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

 :root {
   --teal-deep: #1a5c6b;
   --teal-mid: #256a7a;
   --teal-light: #3a8fa0;
   --teal-pale: #d0eaed;
   --teal-ghost: #eef7f9;
   --white: #ffffff;
   --off-white: #f8fcfd;
   --text-dark: #1a2d32;
   --text-mid: #3a5560;
   --text-light: #6b8c94;
   --gold: #c8a96e;
   --border: #c5dde2;
   --font-display: 'Cormorant Garamond', Georgia, serif;
   --font-body: 'DM Sans', system-ui, sans-serif;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: var(--font-body);
   color: var(--text-dark);
   background: var(--white);
   line-height: 1.6;
 }

 /* Header css */
 /* =========================================
   TOP BAR
========================================= */

 .top-bar {
   background: var(--teal-ghost);
   border-bottom: 1px solid var(--border);
   padding: 10px 0;
 }

 .top-bar-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   flex-wrap: wrap;
 }

 .top-bar-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--text-mid);
 }

 .top-bar-item svg {
   color: var(--teal-light);
   flex-shrink: 0;
 }

 .top-bar-item strong {
   color: var(--text-dark);
   font-weight: 600;
 }

 .top-bar-item a {
   color: var(--teal-deep);
   font-weight: 600;
   text-decoration: none;
 }


 /* =========================================
   HEADER
========================================= */

 header {
   background: #fff;
   border-bottom: 1px solid #e0e7eb;
   position: sticky;
   top: 0;
   z-index: 9999;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

 .header-inner {
   max-width: 1320px;
   margin: 0 auto;
   padding: 0 24px;
   min-height: 110px;

   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
 }


 /* =========================================
   LOGO
========================================= */

 .logo {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-shrink: 0;
   text-decoration: none;
 }

 .logo-icon {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: var(--teal-deep);
   color: #fff;

   display: flex;
   align-items: center;
   justify-content: center;

   font-family: var(--font-display);
   font-size: 24px;
   font-weight: 600;
 }

 .logo-text {
   display: flex;
   flex-direction: column;
 }

 .logo-text .name {
   font-family: var(--font-display);
   font-size: 26px;
   font-weight: 600;
   color: var(--teal-deep);
   line-height: 1.1;
 }

 .logo-text .title-tag {
   font-size: 10.5px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--text-light);
   margin-top: 3px;
 }


 /* =========================================
   MOBILE MENU BUTTON
========================================= */

 .mobile-menu-toggle {
   display: none;
   border: none;
   background: transparent;
   cursor: pointer;
   padding: 8px;
 }

 .mobile-menu-toggle span {
   display: block;
   width: 28px;
   height: 3px;
   margin: 5px 0;
   background: var(--teal-deep);
   border-radius: 3px;
   transition: 0.3s;
 }


 /* =========================================
   NAVIGATION
========================================= */

 nav {
   display: flex;
   align-items: center;
   gap: 2px;
   margin-left: auto;
 }

 nav>a,
 .dropdown>a {
   padding: 8px 10px;
   font-size: 16px;
   font-weight: 500;
   color: var(--text-mid);
   border-radius: 8px;
   transition: 0.2s;

   display: inline-flex;
   align-items: center;
   gap: 6px;

   white-space: nowrap;
   text-decoration: none;
 }

 nav>a:hover,
 .dropdown:hover>a {
   background: var(--teal-ghost);
   color: var(--teal-deep);
 }


 /* =========================================
   DROPDOWNS
========================================= */

 .dropdown {
   position: relative;
 }

 .dropdown>a::after {
   content: '';
   width: 7px;
   height: 7px;

   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;

   transform: rotate(45deg);
   margin-top: -4px;

   transition: 0.25s;
 }

 .dropdown:hover>a::after {
   transform: rotate(-135deg);
   margin-top: 4px;
 }

 .dropdown-menu {
   position: absolute;
   top: calc(100% + 8px);
   left: 0;

   min-width: 250px;
   background: #fff;

   border-radius: 12px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);

   padding: 10px 0;
   margin: 0;

   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);

   transition: 0.25s ease;
   z-index: 1001;
 }

 .dropdown:hover .dropdown-menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }

 .dropdown-menu,
 .dropdown-menu ul,
 .dropdown-menu li {
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .dropdown-menu a {
   display: block;
   padding: 12px 20px;

   font-size: 14.5px;
   color: var(--text-mid);
   text-decoration: none;

   transition: 0.2s;
 }

 .dropdown-menu a:hover {
   background: var(--teal-ghost);
   color: var(--teal-deep);
   padding-left: 26px;
 }


 /* =========================================
   BOOK APPOINTMENT BUTTON
========================================= */

 .btn-primary {
   position: relative;
   z-index: 1;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   padding: 13px 20px !important;

   background: var(--teal-deep);
   color: #fff !important;

   border-radius: 8px;
   font-weight: 600;

   text-decoration: none;
   white-space: nowrap;

   transition: 0.25s;
 }

 .btn-primary:hover {
   background: var(--teal-mid) !important;
   color: #fff !important;
   transform: translateY(-1px);
 }


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

 @media (max-width: 1200px) {

   .header-inner {
     gap: 15px;
   }

   nav>a,
   .dropdown>a {
     font-size: 14px;
     padding: 8px 7px;
   }

   .logo-text .name {
     font-size: 23px;
   }

   .btn-primary {
     padding: 11px 14px !important;
   }
 }


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

 @media (max-width: 1200px) {

   /* TOP BAR */

   .top-bar-inner {
     justify-content: center;
     text-align: center;
     gap: 8px 20px;
   }

   .top-bar-item {
     font-size: 12px;
   }


   /* HEADER */

   .header-inner {
     min-height: 80px;
     padding: 12px 20px;
     position: relative;
   }

   .logo-icon {
     width: 46px;
     height: 46px;
     font-size: 20px;
   }

   .logo-text .name {
     font-size: 21px;
   }

   .logo-text .title-tag {
     font-size: 8px;
     letter-spacing: 1px;
   }


   /* MOBILE TOGGLE */

   .mobile-menu-toggle {
     display: block;
     margin-left: auto;
   }


   /* NAVIGATION */

   nav {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;

     display: none;
     flex-direction: column;
     align-items: stretch;

     background: #fff;
     padding: 15px 20px;

     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

     max-height: calc(100vh - 80px);
     overflow-y: auto;
   }

   nav.active {
     display: flex;
   }

   nav>a,
   .dropdown>a {
     width: 100%;
     padding: 14px 10px;
     font-size: 16px;
   }


   /* DROPDOWN MOBILE */

   .dropdown {
     width: 100%;
   }

   .dropdown>a {
     justify-content: space-between;
   }

   .dropdown-menu {
     position: static;

     display: none;

     opacity: 1;
     visibility: visible;
     transform: none;

     min-width: 100%;
     box-shadow: none;
     border-radius: 0;

     padding: 0 0 5px 15px;
   }

   .dropdown.active .dropdown-menu {
     display: block;
   }

   .dropdown-menu a {
     padding: 10px 15px;
     font-size: 14px;
   }

   .dropdown-menu a:hover {
     padding-left: 20px;
   }


   /* BUTTON */

   nav .btn-primary {
     width: 100%;
     margin-top: 10px;
   }
 }


 /* =========================================
   SMALL MOBILE
========================================= */

 @media (max-width: 600px) {

   .top-bar {
     padding: 8px 0;
   }

   .top-bar-inner {
     flex-direction: column;
     gap: 5px;
   }

   .top-bar-item {
     font-size: 11px;
   }

   .header-inner {
     padding: 10px 15px;
   }

   .logo {
     gap: 9px;
   }

   .logo-icon {
     width: 42px;
     height: 42px;
     font-size: 18px;
   }

   .logo-text .name {
     font-size: 19px;
   }

   .logo-text .title-tag {
     font-size: 7px;
     letter-spacing: 0.8px;
   }

   .mobile-menu-toggle span {
     width: 25px;
     height: 2px;
   }
 }

 /* =========================================
   TABLET / SMALL LAPTOP NAVIGATION
   IMPORTANT: 1200px instead of 991px
========================================= */

 @media (max-width: 1200px) {

   .header-inner {
     min-height: 80px;
     padding: 12px 24px;
     gap: 20px;
   }

   .mobile-menu-toggle {
     display: block;
     margin-left: auto;
   }

   header nav {
     position: absolute;

     top: 100%;
     left: 0;
     right: 0;

     display: none;

     flex-direction: column;
     align-items: stretch;

     width: 100%;

     padding: 15px 24px;

     background: #fff;

     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

     max-height: calc(100vh - 80px);
     overflow-y: auto;
   }

   header nav.active {
     display: flex;
   }

   header nav>a,
   header nav .dropdown>a {
     width: 100%;

     padding: 14px 10px;

     font-size: 16px;
   }

   header nav .dropdown {
     width: 100%;
   }

   header nav .dropdown>a {
     justify-content: space-between;
   }

   header nav .dropdown-menu {
     position: static;

     display: none;

     width: 100%;
     min-width: 100%;

     opacity: 1;
     visibility: visible;
     transform: none;

     box-shadow: none;
     border-radius: 0;

     padding-left: 15px;
   }

   header nav .dropdown.active .dropdown-menu {
     display: block;
   }

   header nav .btn-primary {
     width: 100%;
     margin-top: 10px;
   }
 }

 @media (max-width: 1100px) {

   .hero-inner {
     grid-template-columns: 1fr 1fr;

     padding-left: 24px;
     padding-right: 24px;

     gap: 25px;
   }

   .hero h1 {
     font-size: clamp(38px, 5vw, 58px);
   }

   .hero-sub {
     font-size: 15px;
   }

   .hero-banner-space {
     width: 100%;
     max-width: 100%;

     height: 500px;
   }
 }

 /* Header css end */


 /* Footer Css start */

 /* ───── FOOTER ───── */
 footer {
   background: var(--text-dark);
   color: rgba(255, 255, 255, .7);
 }

 .footer-top {
   padding: 60px 0 40px;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 48px;
 }

 .footer-brand .logo-text .name {
   color: rgba(255, 255, 255, .9);
 }

 .footer-brand .logo-text .title {
   color: rgba(255, 255, 255, .4);
 }

 .footer-brand .logo-icon {
   background: var(--teal-light);
 }

 .footer-about {
   font-size: 13.5px;
   line-height: 1.7;
   margin-top: 16px;
   max-width: 280px;
 }

 .footer-socials {
   display: flex;
   gap: 10px;
   margin-top: 20px;
 }

 .social-btn {
   width: 36px;
   height: 36px;
   background: rgba(255, 255, 255, .08);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, .7);
   text-decoration: none;
   font-size: 15px;
   transition: background .2s, color .2s;
 }

 .social-btn:hover {
   background: var(--teal-light);
   color: white;
 }

 .footer-col h4 {
   font-size: 13px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .5);
   font-weight: 600;
   margin-bottom: 18px;
 }

 .footer-links {
   list-style: none;
   margin: 0 !important;
 }

 .footer-links li {
   margin-bottom: 10px;
 }

 .footer-links a {
   font-size: 13.5px;
   color: rgba(255, 255, 255, .65);
   text-decoration: none;
   transition: color .2s;
 }

 .footer-links a:hover {
   color: var(--teal-pale);
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding: 20px 0;
 }

 .footer-bottom-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   font-size: 12.5px;
   flex-wrap: wrap;
 }

 .disclaimer {
   font-size: 11.5px;
   color: rgba(255, 255, 255, .35);
   max-width: 680px;
   line-height: 1.6;
 }

 /* ───── DIVIDER ───── */
 .divider {
   height: 1px;
   background: var(--border);
   margin: 0;
 }

 /* ───── RESPONSIVE ───── */
 @media (max-width: 900px) {

   .hero-inner,
   .about-grid,
   .clinic-grid,
   .appt-inner {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .hero-visual {
     display: none;
   }

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

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

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

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

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

   nav {
     display: none;
   }

   .about-badge {
     bottom: 12px;
     right: 12px;
   }
 }

 @media (max-width: 600px) {

   .treatments-grid,
   .achievements-grid,
   .results-grid {
     grid-template-columns: 1fr;
   }

   .clinic-features,
   .form-row {
     grid-template-columns: 1fr;
   }

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

 /* RESPONSIVE SCALING FOR MEDIUM SCREENS (1024px to 1200px) */
 @media (max-width: 1200px) and (min-width: 901px) {

   nav>a,
   .dropdown>a {
     padding: 6px 8px;
     font-size: 13px;
   }

   .logo-text .name {
     font-size: 20px;
   }

   .logo-icon {
     width: 44px;
     height: 44px;
     font-size: 20px;
   }
 }

 .whatsapp-float {
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 40px;
   right: 40px;
   background-color: #25d366;
   color: #fff;
   border-radius: 50px;
   text-align: center;
   font-size: 30px;
   box-shadow: 2px 2px 3px #999;
   z-index: 1000;
   /* High number so it stays on top */
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: all 0.3s ease;
 }

 .whatsapp-float:hover {
   background-color: #128c7e;
   transform: scale(1.1);
 }


 /* Footer Css end */

 /* =========================================
   HOMEPAGE CSS
========================================= */


/* =========================================
   HERO
========================================= */

.home-hero {
    position: relative;
    overflow: hidden;
    min-height: 680px;
    background: #d0eaed;
    display: flex;
    align-items: center;
}

.home-hero-inner {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 70px 32px;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.home-hero-content {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal-light);
    font-weight: 600;
}

.home-hero-title {
    margin: 0 0 24px;
    font-family: var(--font-display);
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.05;
    font-weight: 600;
    color: var(--text-dark);
}

.home-hero-title em {
    color: var(--teal-deep);
    font-style: italic;
}

.home-hero-subtitle {
    max-width: 560px;
    margin: 0 0 30px;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.7;
    color: var(--text-mid);
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.home-hero-actions .btn-primary {
    padding: 16px 34px;
    font-size: 17px;
}

.home-hero-image-wrap {
    width: 100%;
    max-width: 700px;
    height: clamp(400px, 50vw, 620px);
    position: relative;
    overflow: hidden;
    margin-left: auto;
}

.home-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
    display: block;
}

.home-hero::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(58, 143, 160, 0.18) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.home-hero::after {
    content: '';
    position: absolute;
    bottom: -180px;
    left: 50%;
    width: 420px;
    height: 420px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(26, 92, 107, 0.1) 0%,
        transparent 70%
    );
    pointer-events: none;
}


/* =========================================
   SHARED HOMEPAGE SECTIONS
========================================= */

.home-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal-light);
    font-weight: 600;
}

/* .home-section-label::before {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--teal-light);
    border-radius: 2px;
} */

.home-section-title {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(30px, 3.5vw, 48px);
    line-height: 1.2;
    font-weight: 600;
    color: var(--text-dark);
}

.home-section-title-light {
    color: white;
}

.home-section-subtitle {
    max-width: 600px;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-mid);
}

.home-section-subtitle-light {
    color: rgba(255, 255, 255, 0.75);
}

.home-section-head {
    margin-bottom: 48px;
}

.home-section-head-center {
    text-align: center;
}

.home-section-head-center .home-section-label {
    justify-content: center;
}

.home-section-head-center .home-section-label::before {
    display: none;
}

.home-section-head-center .home-section-subtitle {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================
   ABOUT
========================================= */

.home-about {
    background: var(--white);
}

.home-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.home-about-image-wrap {
    position: relative;
}

.home-about-image-box {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(
        145deg,
        var(--teal-pale),
        var(--teal-ghost)
    );
}

.home-about-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.home-about-badge {
    position: absolute;
    right: -20px;
    bottom: -20px;
    padding: 20px 24px;
    background: var(--teal-deep);
    color: white;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(26, 92, 107, 0.3);
}

.home-about-badge-number {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
}

.home-about-badge-label {
    margin-top: 5px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.85;
}

.home-about-text {
    font-size: 15px;
    color: var(--text-mid);
    line-height: 1.75;
    margin-bottom: 18px;
}

.home-qualification-list {
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

.home-qualification-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.home-qualification-list li:last-child {
    border-bottom: none;
}

.home-qualification-text strong {
    display: block;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
}

.home-qualification-text span {
    display: block;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.5;
}

.home-about-button {
    display: inline-flex;
    margin-top: 8px;
}


/* =========================================
   ACHIEVEMENTS
========================================= */

.home-achievements {
    background: var(--teal-deep);
}

.home-achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.home-achievement-card {
    padding: 28px 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
}

.home-achievement-number {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    color: white;
}

.home-achievement-label {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}


/* =========================================
   TREATMENTS
========================================= */

.home-treatments {
    background: var(--off-white);
}

.home-treatments-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.home-treatment-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: white;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.home-treatment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(26, 92, 107, 0.14);
}

.home-treatment-image {
    width: 100%;
    height: 190px;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--teal-pale),
        var(--teal-ghost)
    );
}

.home-treatment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-treatment-body {
    padding: 22px;
}

.home-treatment-name {
    margin-bottom: 8px;
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 600;
}

.home-treatment-description {
    color: var(--text-mid);
    font-size: 13.5px;
    line-height: 1.6;
}

.home-treatment-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    color: var(--teal-deep);
    font-size: 13px;
    font-weight: 600;
}

.home-treatments-button-wrap {
    text-align: center;
    margin-top: 48px;
}

.home-treatments-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* =========================================
   CLINIC
========================================= */

.home-clinic {
    background: white;
}

.home-clinic-intro {
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

.home-clinic-intro .home-section-label {
    justify-content: center;
}

.home-clinic-intro .home-section-label::before {
    display: none;
}

.home-clinic-intro-text {
    font-size: 16px;
    color: var(--text-mid);
    line-height: 1.9;
}

.home-clinic-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 70px;
}

.home-clinic-feature {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--teal-ghost);
}

.home-clinic-feature-icon {
    margin-bottom: 12px;
    color: var(--teal-deep);
}

.home-clinic-feature-title {
    margin-bottom: 4px;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
}

.home-clinic-feature-description {
    color: var(--text-mid);
    font-size: 12.5px;
    line-height: 1.5;
}

.home-clinic-location-heading {
    text-align: center;
    margin-bottom: 40px;
}

.home-clinic-location-heading .home-section-label {
    justify-content: center;
}

.home-clinic-location-heading .home-section-label::before {
    display: none;
}

.home-clinic-locations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
}

.home-clinic-location-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.home-clinic-location-header {
    padding: 22px;
    background: #0f766e;
    color: #fff;
}

.home-clinic-location-header h3 {
    margin: 0;
    font-size: 22px;
}

.home-clinic-location-header p {
    margin: 8px 0 0;
    opacity: 0.9;
}

.home-clinic-map {
    display: block;
    width: 100%;
    min-height: 320px;
    border: 0;
}


/* =========================================
   RESULTS
========================================= */

.home-results {
    background: white;
}

.home-results-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.home-result-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.home-result-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: var(--teal-pale);
}

.home-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-result-label {
    padding: 12px 14px;
    background: var(--teal-ghost);
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-deep);
}

.home-results-disclaimer {
    text-align: center;
    margin-top: 32px;
    font-size: 13px;
    color: var(--text-light);
}


/* =========================================
   GOOGLE REVIEWS
========================================= */

.home-reviews {
    background: var(--teal-ghost);
}

.home-google-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 18px;
    margin-bottom: 32px;
}

.home-google-logo {
    font-size: 18px;
    font-weight: 700;
    color: #4285f4;
}

.home-google-rating strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
}

.home-google-stars {
    color: #f59e0b;
    font-size: 13px;
}

.home-google-count {
    font-size: 12px;
    color: var(--text-light);
}

.home-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.home-review-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: white;
}

.home-review-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3f2fd;
    color: #1565c0;
    font-weight: 600;
}

.home-review-avatar-teal {
    background: var(--teal-deep);
    color: white;
}

.home-review-avatar-green {
    background: #a5d6a7;
    color: #2e7d32;
}

.home-review-avatar-yellow {
    background: #ffe082;
    color: #795548;
}

.home-review-avatar-pink {
    background: #f8bbd0;
    color: #880e4f;
}

.home-review-avatar-blue {
    background: #b3e5fc;
    color: #01579b;
}

.home-reviewer-name {
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
}

.home-reviewer-date {
    color: var(--text-light);
    font-size: 11px;
}

.home-review-stars {
    margin: 14px 0 10px;
    color: #f59e0b;
    font-size: 14px;
}

.home-review-text {
    color: var(--text-mid);
    font-size: 13.5px;
    line-height: 1.65;
}

.home-review-source {
    margin-top: 16px;
    color: var(--teal-deep);
    font-size: 11px;
    font-weight: 600;
}


/* =========================================
   APPOINTMENT
========================================= */

.home-appointment {
    background: linear-gradient(
        135deg,
        var(--teal-deep),
        var(--teal-mid)
    );
}

.home-appointment-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
}

.home-appointment-description {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}

.home-appointment-info {
    margin-top: 30px;
}

.home-appointment-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

.home-appointment-info-icon {
    flex-shrink: 0;
}

.home-appointment-form-card {
    padding: 36px;
    border-radius: 20px;
    background: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.home-appointment-form-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.home-appointment-form-subtitle {
    color: var(--text-mid);
    font-size: 14px;
    margin-bottom: 24px;
}


/* =========================================
   WPForms Styling
========================================= */

.home-appointment-form-card .wpforms-container {
    margin: 0 !important;
}

.home-appointment-form-card .wpforms-field {
    padding: 0 0 16px !important;
}

.home-appointment-form-card .wpforms-field-label {
    color: var(--text-dark) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

.home-appointment-form-card input,
.home-appointment-form-card select,
.home-appointment-form-card textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 11px 14px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 8px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    background: var(--off-white) !important;
}

.home-appointment-form-card textarea {
    min-height: 100px !important;
    resize: vertical;
}

.home-appointment-form-card .wpforms-submit {
    width: 100% !important;
    padding: 14px !important;
    border: none !important;
    border-radius: 10px !important;
    background: var(--teal-deep) !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.home-appointment-form-card .wpforms-submit:hover {
    background: var(--teal-mid) !important;
}


/* =========================================
   LARGE TABLET
========================================= */

@media (max-width: 1100px) {

    .home-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 25px;
    }

    .home-hero-title {
        font-size: clamp(40px, 5vw, 60px);
    }

    .home-treatments-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-clinic-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    section {
        padding: 70px 0;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .home-hero {
        min-height: auto;
    }

    .home-hero-inner {
        grid-template-columns: 1fr;
        padding: 70px 24px 0;
        text-align: center;
    }

    .home-hero-content {
        max-width: 700px;
        margin: 0 auto;
        align-items: center;
    }

    .home-hero-subtitle {
        max-width: 650px;
    }

    .home-hero-actions {
        justify-content: center;
    }

    .home-hero-image-wrap {
        width: 100%;
        max-width: 650px;
        height: 500px;
        margin: 20px auto 0;
    }

    .home-about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .home-about-image-wrap {
        max-width: 600px;
        margin: 0 auto;
    }

    .home-achievements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-clinic-locations {
        grid-template-columns: 1fr;
    }

    .home-appointment-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .home-appointment-form-card {
        max-width: 700px;
        margin: 0 auto;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    section {
        padding: 55px 0;
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .home-hero-inner {
        padding: 55px 16px 0;
    }

    .home-hero-eyebrow {
        justify-content: center;
        font-size: 10px;
        letter-spacing: 1.5px;
        text-align: center;
    }

    .home-hero-title {
        font-size: clamp(36px, 11vw, 48px);
        line-height: 1.08;
    }

    .home-hero-subtitle {
        font-size: 15px;
        line-height: 1.65;
    }

    .home-hero-actions {
        width: 100%;
    }

    .home-hero-actions .btn-primary {
        width: 100%;
        padding: 15px 20px;
    }

    .home-hero-image-wrap {
        height: 380px;
    }

    .home-section-title {
        font-size: clamp(30px, 9vw, 40px);
    }

    .home-section-subtitle {
        font-size: 15px;
    }

    .home-about-badge {
        right: 12px;
        bottom: -18px;
        padding: 15px 18px;
    }

    .home-about-badge-number {
        font-size: 32px;
    }

    .home-about-badge-label {
        font-size: 9px;
    }

    .home-achievements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .home-achievement-card {
        padding: 22px 12px;
    }

    .home-achievement-number {
        font-size: 32px;
    }

    .home-achievement-label {
        font-size: 11px;
    }

    .home-treatments-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-treatment-image {
        height: 210px;
    }

    .home-clinic-features {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .home-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .home-result-image {
        height: 180px;
    }

    .home-reviews-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-appointment-form-card {
        padding: 24px 18px;
    }

    .home-appointment-info-item {
        align-items: flex-start;
        font-size: 13px;
        line-height: 1.5;
    }

}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .home-hero-title {
        font-size: 34px;
    }

    .home-achievements-grid {
        grid-template-columns: 1fr;
    }

    .home-results-grid {
        grid-template-columns: 1fr;
    }

}

/*  */


/* =========================================
   APPOINTMENT SECTION
========================================= */

.appointment {
    background:
        linear-gradient(
            135deg,
            var(--teal-deep),
            var(--teal-mid)
        );
}

.appt-inner {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 60px;
    align-items: center;
}


/* LEFT CONTENT */

.appt-left {
    color: white;
}

.appt-left .section-label {
    color: rgba(255, 255, 255, 0.75);
}

.appt-left .section-label::before {
    background: rgba(255, 255, 255, 0.75);
}

.appt-left .section-title {
    color: white;
}

.appt-desc {
    max-width: 560px;
    margin-bottom: 30px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 16px;
    line-height: 1.7;
}


/* APPOINTMENT INFORMATION */

.appt-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.appt-info-item {
    display: flex;
    align-items: center;
    gap: 12px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 14px;
    line-height: 1.5;
}

.appt-info-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);

    font-size: 16px;
}


/* =========================================
   APPOINTMENT FORM CARD
========================================= */

.appt-form-card {
    padding: 36px;

    border-radius: 20px;

    background: white;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15);
}

.form-title {
    margin-bottom: 6px;

    color: var(--text-dark);

    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
}

.form-sub {
    margin-bottom: 24px;

    color: var(--text-light);

    font-size: 13px;
}


/* FORM ROW */

.form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


/* FORM GROUP */

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;

    margin-bottom: 6px;

    color: var(--text-dark);

    font-size: 13px;
    font-weight: 600;
}


/* INPUTS */

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    max-width: 100%;

    padding: 11px 14px;

    border: 1.5px solid var(--border);
    border-radius: 8px;

    background: var(--off-white);

    font-family: var(--font-body);
    font-size: 14px;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;

    border-color: var(--teal-light);

    box-shadow:
        0 0 0 3px rgba(58, 143, 160, 0.12);
}


/* TEXTAREA */

.form-group textarea {
    min-height: 100px;

    resize: vertical;
}


/* SUBMIT BUTTON */

.btn-submit {
    width: 100%;

    padding: 14px;

    border: none;
    border-radius: 10px;

    background: var(--teal-deep);

    color: white;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.btn-submit:hover {
    background: var(--teal-mid);

    transform: translateY(-1px);
}

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

@media (max-width: 900px) {

    .appt-inner {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .appt-form-card {
        max-width: 700px;

        margin: 0 auto;
    }
}


@media (max-width: 600px) {

    .appt-form-card {
        padding: 24px 18px;
    }

    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .appt-info-item {
        align-items: flex-start;

        font-size: 13px;
        line-height: 1.5;
    }

    .form-title {
        font-size: 23px;
    }
}


 /* About Page  Css*/

 /* =========================================
   EDUCATION & FELLOWSHIPS
========================================= */

.education-section {
    overflow: hidden;
}

.education-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 60px;
    align-items: start;
    margin-top: 50px;
}

/* =========================
   TIMELINE
========================= */

.timeline {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 38px;
    border-left: 3px solid var(--teal-deep);
}

.timeline-block {
    position: relative;
    padding-bottom: 44px;
}

.timeline-block:last-child {
    padding-bottom: 0;
}

.timeline-block::before {
    content: '';
    position: absolute;
    left: -47px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--teal-deep);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--teal-deep);
}

.timeline-block h3 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-dark);
    margin: 0 0 10px;
}

.timeline-block .section-text {
    margin: 0;
}

/* =========================
   EDUCATION IMAGE
========================= */

.education-image {
    width: 100%;
    position: sticky;
    top: 40px;
}

.education-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 992px) {

    .education-layout {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
        gap: 35px;
    }

    .timeline {
        padding-left: 32px;
    }

    .timeline-block::before {
        left: -41px;
    }

    .timeline-block h3 {
        font-size: 20px;
    }

    .education-image {
        position: relative;
        top: auto;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .education-layout {
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-top: 35px;
    }

    /*
     * Image comes first on mobile.
     * Change order if you want the timeline first.
     */

    .education-image {
        order: 1;
        width: 100%;
        position: relative;
        top: auto;
    }

    .timeline {
        order: 2;
        width: 100%;
        padding-left: 30px;
        border-left-width: 2px;
    }

    .timeline-block {
        padding-bottom: 34px;
    }

    .timeline-block::before {
        left: -38px;
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .timeline-block h3 {
        font-size: 19px;
        line-height: 1.35;
    }

    .timeline-block .section-text {
        font-size: 15px;
        line-height: 1.75;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .education-layout {
        gap: 32px;
    }

    .timeline {
        padding-left: 26px;
    }

    .timeline-block::before {
        left: -34px;
        width: 11px;
        height: 11px;
    }

    .timeline-block h3 {
        font-size: 18px;
    }

    .timeline-block .section-text {
        font-size: 14.5px;
        line-height: 1.7;
    }

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

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

 section {
   padding: 90px 0;
 }



 .hero-actions,
 .hero-buttons {
   margin-top: 18px;
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
 }

 @media(max-width:600px) {

   .hero-actions,
   .hero-buttons {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
   }
 }

 .hero-buttons .btn-primary,
 .service-content .btn-primary,
 .book-consultation-btn,
 .call-btn {
   position: relative;
   z-index: 1;
   /* Keeping it low ensures it submerges under the header's 9999 index */
 }

 /* ── SHARED ── */
 .section-label {
   font-size: 11px;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--teal-light);
   font-weight: 600;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .section-title {
   font-family: var(--font-display);
   font-size: clamp(28px, 3.2vw, 44px);
   font-weight: 600;
   line-height: 1.2;
   color: var(--text-dark);
   margin-bottom: 16px;
 }

 .section-text {
   font-size: 16px;
   line-height: 1.85;
   color: var(--text-mid);
 }

 .breadcrumb {
   background: var(--off-white);
   padding: 14px 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
 }

 .breadcrumb a {
   color: var(--teal-deep);
   font-weight: 600;
   font-size: 14px;
 }

 .breadcrumb span {
   font-size: 14px;
   color: var(--text-light);
 }

 .img-placeholder {
   width: 100%;
   border-radius: 20px;
   background: linear-gradient(135deg, var(--teal-pale) 0%, var(--teal-ghost) 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: var(--teal-light);
   font-size: 13px;
   font-weight: 500;
   letter-spacing: .5px;
   border: 2px dashed var(--border);
   gap: 10px;
 }

 .img-placeholder svg {
   opacity: .45;
 }

 /* ── PROFILE HERO (unique: portrait + credential card stack, not the service banner pattern) ── */
 .profile-hero {
   padding: 115px 0;
   background: linear-gradient(135deg, #c2d8de 0%, #b6d1d8 100%);
 }

 .profile-grid {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   gap: 70px;
   align-items: center;
 }

 .profile-photo .img-placeholder {
   height: 480px;
   border-radius: 24px;
   box-shadow: 0 25px 70px rgba(0, 0, 0, .1);
 }

 .profile-hero .section-label {
   color: var(--teal-deep);
 }

 .profile-hero .section-label::before {
   background: var(--teal-deep);
 }

 .profile-creds {
   font-size: 15px;
   color: var(--text-mid);
   margin: 10px 0 24px;
   font-style: italic;
 }

 .designation-strip {
   display: flex;
   gap: 36px;
   flex-wrap: wrap;
   padding-top: 22px;
   border-top: 1px solid rgba(26, 92, 107, .18);
 }

 .designation-item .lbl {
   font-size: 11px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--text-light);
   margin-bottom: 4px;
 }

 .designation-item .val {
   font-family: var(--font-display);
   font-size: 20px;
   font-weight: 600;
   color: var(--text-dark);
 }

 /* ── MEMBERSHIP STRIP (unique: pill badges, not a card grid) ── */
 .membership-strip {
   background: var(--teal-deep);
   padding: 30px 0;
 }

 .membership-row {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   justify-content: center;
 }

 .membership-pill {
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .2);
   color: white;
   padding: 10px 20px;
   border-radius: 50px;
   font-size: 13.5px;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .membership-pill .tag {
   font-size: 11px;
   opacity: .65;
 }

 /* ── EDUCATION NARRATIVE (unique: vertical timeline rail, not two-col) ── */
 .timeline {
   position: relative;
   max-width: 880px;
   margin: 50px auto 0;
   padding-left: 36px;
   border-left: 2px solid var(--border);
 }

 .timeline-block {
   position: relative;
   padding-bottom: 44px;
 }

 .timeline-block:last-child {
   padding-bottom: 0;
 }

 .timeline-block::before {
    content: '';
    position: absolute;
    left: -43px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--teal-deep);
    border: 3px solid white;
    box-shadow: 0 0 0 2px var(--teal-deep);
}

 .timeline-block h3 {
   font-family: var(--font-display);
   font-size: 21px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 8px;
 }

 /* ── PHILOSOPHY CALLOUT ── */
 .philosophy-callout {
   background: var(--off-white);
   border-left: 4px solid var(--teal-deep);
   padding: 30px 36px;
   border-radius: 4px;
   margin: 40px 0;
 }

 .philosophy-callout p {
   font-family: var(--font-display);
   font-size: 22px;
   font-style: italic;
   color: var(--text-dark);
   line-height: 1.5;
 }

 /* ── AWARDS LIST (unique: ribbon-style rows, distinct from benefit cards) ── */
 .awards-list {
   margin-top: 46px;
 }

 .award-row {
   display: flex;
   gap: 22px;
   align-items: flex-start;
   padding: 22px 0;
   border-bottom: 1px solid var(--border);
 }

 .award-row:last-child {
   border-bottom: none;
 }

 .award-icon {
   width: 44px;
   height: 44px;
   background: var(--gold-pale);
   color: var(--gold);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   flex-shrink: 0;
 }

 .award-row p {
   font-size: 15.5px;
   color: var(--text-mid);
   line-height: 1.65;
 }

 /* ── PUBLICATIONS (unique: numbered citation list in a card, distinctly academic) ── */
 .pub-card {
   background: var(--off-white);
   border-radius: 20px;
   padding: 40px;
   margin-top: 40px;
 }

 .pub-card h3 {
   font-family: var(--font-display);
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 22px;
   color: var(--text-dark);
 }

 .pub-list {
   counter-reset: pub;
 }

 .pub-list li {
   counter-increment: pub;
   font-size: 13.5px;
   color: var(--text-mid);
   line-height: 1.7;
   padding: 12px 0 12px 34px;
   position: relative;
   border-bottom: 1px solid var(--border);
 }

 .pub-list li:last-child {
   border-bottom: none;
 }

 .pub-list li::before {
   content: counter(pub);
   position: absolute;
   left: 0;
   top: 12px;
   width: 22px;
   height: 22px;
   background: var(--teal-deep);
   color: white;
   border-radius: 50%;
   font-size: 11px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-body);
 }

 /* ── PRESENTATIONS (unique: simple dot list, lighter weight than publications) ── */
 .talks-list li {
   font-size: 14.5px;
   color: var(--text-mid);
   line-height: 1.7;
   padding: 10px 0 10px 22px;
   position: relative;
 }

 .talks-list li::before {
   content: '◆';
   position: absolute;
   left: 0;
   top: 10px;
   color: var(--teal-light);
   font-size: 9px;
 }

 /* ── ACCREDITATION GALLERY (unique: photo grid masonry-style) ── */
 .accred-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin-top: 46px;
 }

 .accred-grid .img-placeholder {
   height: 220px;
   border-radius: 14px;
 }

 .accred-cap {
   font-size: 12.5px;
   color: var(--text-light);
   text-align: center;
   margin-top: 8px;
 }

 /* ── CTA BAND ── */
 .cta-band {
   background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal-mid) 100%);
   text-align: center;
   padding: 70px 0;
 }

 .cta-band h2 {
   color: white;
 }

 .cta-band p {
   color: rgba(255, 255, 255, .8);
   max-width: 560px;
   margin: 0 auto 28px;
 }

 .cta-band .section-label {
   color: rgba(255, 255, 255, .6);
   justify-content: center;
 }

 .cta-band .section-label::before {
   background: rgba(255, 255, 255, .4);
 }

 .btn-light {
   background: white;
   color: var(--teal-deep);
   padding: 14px 32px;
   border-radius: 50px;
   font-size: 14.5px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: transform .2s;
 }

 .btn-light:hover {
   transform: translateY(-2px);
 }

 /* =========================================
   ABOUT PAGE RESPONSIVE CSS
========================================= */


 /* =========================================
   LARGE TABLET / SMALL LAPTOP
========================================= */

 @media (max-width: 1200px) {

   .container {
     max-width: 100%;
     padding-left: 24px;
     padding-right: 24px;
   }

   .profile-grid {
     gap: 40px;
   }

   .profile-hero {
     padding: 90px 0;
   }

   .profile-photo .img-placeholder {
     height: 420px;
   }

   .accred-grid {
     gap: 18px;
   }

 }


 /* =========================================
   TABLET
========================================= */

 @media (max-width: 992px) {

   section {
     padding: 70px 0;
   }


   /* PROFILE HERO */

   .profile-grid {
     grid-template-columns: 1fr;
     gap: 45px;
     text-align: center;
   }

   .profile-photo {
     max-width: 520px;
     width: 100%;
     margin: 0 auto;
   }

   .profile-photo .img-placeholder {
     height: 500px;
   }

   .profile-hero .section-label {
     justify-content: center;
   }

   .profile-hero .section-label::before {
     display: none;
   }

   .profile-creds {
     max-width: 650px;
     margin-left: auto;
     margin-right: auto;
   }

   .designation-strip {
     justify-content: center;
   }


   /* MEMBERSHIP */

   .membership-row {
     gap: 12px;
   }

   .membership-pill {
     font-size: 13px;
     padding: 9px 16px;
   }


   /* TIMELINE */

   .timeline {
     max-width: 760px;
     padding-left: 30px;
   }


   /* ACCREDITATION */

   .accred-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }


   /* PUBLICATIONS */

   .pub-card {
     padding: 32px;
   }


   /* FOOTER */

   .footer-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

 }


 /* =========================================
   MOBILE
========================================= */

 @media (max-width: 600px) {

   section {
     padding: 55px 0;
   }

   .container,
   .container-narrow {
     width: 100%;
     padding-left: 16px;
     padding-right: 16px;
   }


   /* SHARED */

   .section-label {
     font-size: 10px;
     letter-spacing: 2px;
   }

   .section-title {
     font-size: clamp(30px, 9vw, 40px);
     line-height: 1.15;
   }

   .section-text {
     font-size: 15px;
     line-height: 1.7;
   }


   /* PROFILE HERO */

   .profile-hero {
     padding: 55px 0 65px;
   }

   .profile-grid {
     gap: 32px;
   }

   .profile-photo {
     max-width: 100%;
   }

   .profile-photo .img-placeholder {
     height: 380px;
     border-radius: 18px;
   }

   .profile-creds {
     font-size: 14px;
     line-height: 1.6;
   }


   /* DESIGNATION */

   .designation-strip {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     text-align: left;
   }

   .designation-item .val {
     font-size: 18px;
   }


   /* MEMBERSHIP */

   .membership-strip {
     padding: 24px 0;
   }

   .membership-row {
     justify-content: flex-start;
     gap: 8px;
   }

   .membership-pill {
     width: 100%;
     justify-content: center;
     padding: 10px 14px;
     font-size: 12.5px;
   }


   /* TIMELINE */

   .timeline {
     margin-top: 35px;
     padding-left: 24px;
   }

   .timeline-block {
     padding-bottom: 32px;
   }

   .timeline-block::before {
     left: -32px;
     width: 12px;
     height: 12px;
   }

   .timeline-block h3 {
     font-size: 19px;
   }


   /* PHILOSOPHY */

   .philosophy-callout {
     padding: 22px 20px;
     margin: 30px 0;
   }

   .philosophy-callout p {
     font-size: 19px;
     line-height: 1.45;
   }


   /* AWARDS */

   .award-row {
     gap: 14px;
     padding: 18px 0;
   }

   .award-icon {
     width: 38px;
     height: 38px;
     font-size: 17px;
   }

   .award-row p {
     font-size: 14px;
     line-height: 1.6;
   }


   /* PUBLICATIONS */

   .pub-card {
     padding: 22px 18px;
     border-radius: 16px;
   }

   .pub-card h3 {
     font-size: 21px;
   }

   .pub-list li {
     font-size: 13px;
     padding-left: 30px;
   }


   /* PRESENTATIONS */

   .talks-list li {
     font-size: 13.5px;
   }


   /* ACCREDITATION */

   .accred-grid {
     grid-template-columns: 1fr;
     gap: 18px;
     margin-top: 30px;
   }

   .accred-grid .img-placeholder {
     height: 220px;
   }


   /* CTA */

   .cta-band {
     padding: 55px 0;
   }

   .cta-band p {
     font-size: 15px;
     line-height: 1.65;
   }

   .btn-light {
     width: 100%;
     justify-content: center;
     padding: 14px 20px;
   }


   /* FOOTER */

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

 }
@media (max-width: 600px) {

    .timeline {
        padding-left: 24px;
    }

    .timeline-block::before {
        left: -32px;
    }

}

 /* =========================================
   VERY SMALL MOBILE
========================================= */

 @media (max-width: 380px) {

   .profile-photo .img-placeholder {
     height: 320px;
   }

   .designation-strip {
     grid-template-columns: 1fr;
   }

   .membership-pill {
     font-size: 12px;
   }

 }



 /* End  */


 /*  dermatosurgery page css */



 /* ───── SHARED SECTION LABELS ───── */
 .section-label {
   font-size: 11px;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--teal-light);
   font-weight: 600;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 8px;
 }


 .section-title {
   font-family: var(--font-display);
   font-size: clamp(30px, 3.5vw, 48px);
   font-weight: 600;
   line-height: 1.2;
   color: var(--text-dark);
   margin-bottom: 16px;
 }

 .section-text {
   font-size: 16px;
   line-height: 1.85;
   color: var(--text-mid);
 }

 /* ───── BREADCRUMB ───── */
 .breadcrumb {
   background: var(--off-white);
   padding: 14px 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
 }

 .breadcrumb a {
   color: var(--teal-deep);
   font-weight: 600;
   font-size: 14px;
 }

 .breadcrumb span {
   font-size: 14px;
   color: var(--text-light);
 }

 .service-banner-grid {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   /* Slightly more space for image */
   gap: 4rem;
   align-items: center;
   min-height: 520px;
   /* Increased overall banner height */
 }

 .service-image {
   position: relative;
 }

 .hero-img {
   width: 100%;
   height: 520px;
   /* Bigger height */
   object-fit: cover;
   border-radius: 25px;
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
 }

 .btn-hero-outline {
   border: 1.5px solid rgba(255, 255, 255, .5);
   color: white;
   padding: 13px 28px;
   border-radius: 50px;
   font-size: 14.5px;
   font-weight: 600;
   transition: .2s;
 }

 .btn-hero-outline:hover {
   background: rgba(255, 255, 255, .1);
 }

 /* Responsive adjustments */
 @media (max-width: 992px) {
   .service-banner-grid {
     grid-template-columns: 1fr;
     gap: 2.5rem;
     min-height: auto;
   }

   .hero-img {
     height: 420px;
     /* Slightly smaller on tablets */
   }
 }

 @media (max-width: 576px) {
   .hero-img {
     height: 380px;
   }
 }

 .service-card-img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   display: block;
 }

 .card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card:hover {
   transform: translateY(-8px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
 }

 /* ───── WHAT IS GRID ───── */
 .what-is-grid {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 60px;
 }

 .what-is-text {
   flex: 1;
 }

 .what-is-image {
   flex: 1;
   align-items: top;
 }

 .what-is-image img {
   width: 100%;
   border-radius: 20px;
 }

 /* ───── STATS ───── */
 .stats-section {
   background: var(--teal-deep);
   color: white;
   padding: 80px 0;
 }

 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
   text-align: center;
 }

 .stat-num {
   font-family: var(--font-display);
   font-size: 56px;
   font-weight: 600;
   color: white;
   line-height: 1;
 }

 .stat-label {
   font-size: 14px;
   color: rgba(255, 255, 255, .75);
   margin-top: 8px;
 }

 /* ───── CARD GRIDS ───── */
 .card {
   padding: 32px;
   border: 1px solid var(--border);
   border-radius: 20px;
 }

 .card h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 10px;
 }

 .card-white {
   padding: 32px;
   background: white;
   border-radius: 20px;
   border: 1px solid var(--border);
 }

 .card-white h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 10px;
 }

 .grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   margin-top: 50px;
 }

 .grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 28px;
   margin-top: 50px;
 }

 /* ───── PROCESS STEPS ───── */
 .step {
   display: flex;
   gap: 28px;
   margin-bottom: 48px;
 }

 .step-num {
   font-family: var(--font-display);
   font-size: 44px;
   font-weight: 700;
   color: var(--teal-deep);
   line-height: 1;
   flex-shrink: 0;
   width: 60px;
 }

 .step h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 8px;
 }

 /* ───── CANDIDATE LIST ───── */
 .candidate-list {
   padding-left: 20px;
 }

 .candidate-list li {
   margin-bottom: 18px;
   font-size: 15.5px;
   color: var(--text-mid);
   line-height: 1.6;
   list-style: disc;
 }

 /* ───── FAQ ───── */
 .faq-item {
   padding: 28px;
   border: 1px solid var(--border);
   border-radius: 16px;
   margin-bottom: 16px;
 }

 .faq-item h3 {
   font-family: var(--font-display);
   font-size: 21px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 10px;
 }

 /* ───── CTA ───── */
 .cta-box {
   background: var(--teal-deep);
   padding: 80px;
   border-radius: 30px;
   text-align: center;
   color: white;
 }

 .cta-box h2 {
   font-family: var(--font-display);
   font-size: 48px;
   font-weight: 600;
   color: white;
   margin-bottom: 16px;
 }

 .cta-box p {
   max-width: 700px;
   margin: 0 auto 35px;
   font-size: 17px;
   color: rgba(255, 255, 255, .85);
 }

 .cta-buttons {
   display: flex;
   justify-content: center;
   gap: 18px;
   flex-wrap: wrap;
 }

 .cta-btn-white {
   background: white;
   color: var(--teal-deep);
   padding: 14px 34px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 15px;
 }

 .cta-btn-outline {
   background: transparent;
   border: 2px solid white;
   color: white;
   padding: 14px 34px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 15px;
   transition: .3s;
 }

 .cta-btn-outline:hover {
   background: rgba(255, 255, 255, .1);
 }


 /* ───── RESPONSIVE ───── */
 @media (max-width: 992px) {

   .service-banner-grid,
   .what-is-grid {
     flex-direction: column;
     grid-template-columns: 1fr;
     gap: 40px;
   }

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

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

   .appt-inner {
     grid-template-columns: 1fr;
   }

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

   nav {
     display: none;
   }
 }

 @media (max-width: 600px) {

   .grid-3,
   .grid-2 {
     grid-template-columns: 1fr;
   }

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

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

   .cta-box {
     padding: 50px 24px;
   }

   .cta-box h2 {
     font-size: 34px;
   }

   .form-row {
     grid-template-columns: 1fr;
   }
 }

 /* ── DROPDOWN CHEVRON ── */
 .dropdown>a {
   display: inline-flex;
   align-items: center;
   gap: 5px;
 }

 .dropdown>a::after {
   content: '';
   display: inline-block;
   width: 6px;
   height: 6px;
   border-right: 1.5px solid currentColor;
   border-bottom: 1.5px solid currentColor;
   transform: rotate(45deg);
   flex-shrink: 0;
   margin-top: -3px;
   transition: transform .25s, margin-top .25s;
 }

 .dropdown:hover>a::after {
   transform: rotate(-135deg);
   margin-top: 3px;
 }


 /*  */

 /* Mole removal page css */


 /* ── SHARED ── */
 section {
   padding: 80px 0;
 }

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

 .section-label {
   font-size: 11px;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--teal-light);
   font-weight: 600;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px;
 }


 .section-title {
   font-family: var(--font-display);
   font-size: clamp(30px, 3.5vw, 48px);
   font-weight: 600;
   line-height: 1.2;
   color: var(--text-dark);
   margin-bottom: 16px;
   text-decoration: none !important;
 }

 .section-subtitle {
   font-size: 16px;
   color: var(--text-mid);
   max-width: 620px;
   line-height: 1.7;
 }

 .section-head {
   margin-bottom: 48px;
 }

 a {
   text-decoration: none;
 }

 /* ── PAGE HERO (breadcrumb + title) ── */
 .page-hero {
   background: linear-gradient(135deg, #e8f4f7 0%, #d0eaed 40%, #c2e0e6 100%);
   padding: 60px 0 50px;
   position: relative;
   overflow: hidden;
 }

 .page-hero::before {
   content: '';
   position: absolute;
   top: -80px;
   right: -80px;
   width: 520px;
   height: 520px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(58, 143, 160, .18) 0%, transparent 70%);
   pointer-events: none;
 }

 .page-hero-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
   position: relative;
   z-index: 1;
 }

 .breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--text-light);
   margin-bottom: 20px;
   flex-wrap: wrap;
 }

 .breadcrumb a {
   color: var(--teal-deep);
   font-weight: 500;
 }

 .breadcrumb span {
   color: var(--text-light);
 }

 .page-hero h1 {
   font-family: var(--font-display);
   font-size: clamp(34px, 4vw, 58px);
   font-weight: 600;
   line-height: 1.15;
   color: var(--text-dark);
   max-width: 720px;
   margin-bottom: 16px;
 }

 .page-hero h1 em {
   font-style: italic;
   color: var(--teal-deep);
 }

 .page-hero-sub {
   font-size: 16px;
   color: var(--text-mid);
   max-width: 600px;
   line-height: 1.7;
   margin-bottom: 28px;
 }

 .hero-ctas {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
 }

 .btn-hero-outline {
   border: 1.5px solid rgba(255, 255, 255, .5);
   color: white;
   padding: 13px 28px;
   border-radius: 50px;
   font-size: 14.5px;
   font-weight: 600;
   transition: .2s;
 }

 .btn-hero-outline:hover {
   background: rgba(255, 255, 255, .1);
 }

 /* ── INTRO SECTION ── */
 .intro {
   background: var(--white);
 }

 .intro-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: start;
 }

 .intro-body p {
   font-size: 15.5px;
   color: var(--text-mid);
   line-height: 1.8;
   margin-bottom: 18px;
 }

 .intro-body p strong {
   color: var(--text-dark);
 }

 .call-cta-box {
   background: var(--teal-deep);
   border-radius: 16px;
   padding: 22px 28px;
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 28px;
   box-shadow: 0 8px 24px rgba(26, 92, 107, .25);
 }

 .call-cta-icon {
   width: 44px;
   height: 44px;
   background: rgba(255, 255, 255, .15);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .call-cta-text {
   color: white;
 }

 .call-cta-text p {
   font-size: 12px;
   opacity: .8;
   margin-bottom: 2px;
 }

 .call-cta-text a {
   color: white;
   font-size: 20px;
   font-weight: 700;
   font-family: var(--font-display);
 }

 /* ── VIDEO BOX ── */
 .video-wrap {
   background: var(--text-dark);
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(26, 92, 107, .2);
   position: sticky;
   top: 100px;
 }

 .video-wrap iframe {
   width: 100%;
   height: 310px;
   border: none;
   display: block;
 }

 .video-caption {
   padding: 18px 22px;
   background: white;
   border-top: 1px solid var(--border);
 }

 .video-caption strong {
   font-size: 14px;
   color: var(--text-dark);
   display: block;
 }

 .video-caption span {
   font-size: 12.5px;
   color: var(--text-light);
 }

 /* ── METHOD SECTION ── */
 .method {
   background: var(--off-white);
 }

 .method-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
 }

 .method-body p {
   font-size: 15.5px;
   color: var(--text-mid);
   line-height: 1.8;
   margin-bottom: 16px;
 }

 .method-body p strong {
   color: var(--text-dark);
 }

 .method-img-wrap {
   border-radius: 20px;
   overflow: hidden;
   height: 420px;
   position: relative;
   background: linear-gradient(135deg, var(--teal-pale), var(--teal-ghost));
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .method-img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .method-img-badge {
   position: absolute;
   bottom: 20px;
   left: 20px;
   background: var(--teal-deep);
   color: white;
   border-radius: 12px;
   padding: 12px 18px;
   box-shadow: 0 8px 24px rgba(26, 92, 107, .3);
 }

 .method-img-badge strong {
   display: block;
   font-size: 14px;
   font-weight: 700;
 }

 .method-img-badge span {
   font-size: 12px;
   opacity: .8;
 }

 /* ── ADVANTAGES ── */
 .advantages {
   background: var(--white);
 }

 .advantages-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 48px;
 }

 .adv-card {
   background: var(--teal-ghost);
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 28px;
   transition: box-shadow .25s, transform .2s;
 }

 .adv-card:hover {
   box-shadow: 0 12px 40px rgba(26, 92, 107, .14);
   transform: translateY(-4px);
 }

 .adv-icon {
   width: 52px;
   height: 52px;
   background: white;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   margin-bottom: 16px;
   box-shadow: 0 2px 10px rgba(26, 92, 107, .1);
 }

 .adv-title {
   font-weight: 600;
   font-size: 16px;
   color: var(--text-dark);
   margin-bottom: 8px;
 }

 .adv-desc {
   font-size: 13.5px;
   color: var(--text-mid);
   line-height: 1.65;
 }

 /* ── DOCTOR SECTION ── */
 .doctor-section {
   background: var(--teal-deep);
 }

 .doctor-section .section-label {
   color: rgba(255, 255, 255, .6);
 }

 .doctor-section .section-label::before {
   background: rgba(255, 255, 255, .4);
 }

 .doctor-section .section-title {
   color: white;
 }

 .doctor-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
 }

 .doctor-body p {
   font-size: 15.5px;
   color: rgba(255, 255, 255, .82);
   line-height: 1.8;
   margin-bottom: 16px;
 }

 .doctor-body p strong {
   color: white;
 }

 .credentials-list {
   list-style: none;
   margin-top: 24px;
 }

 .credentials-list li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
 }

 .credentials-list li:last-child {
   border-bottom: none;
 }

 .cred-icon {
   width: 32px;
   height: 32px;
   background: rgba(255, 255, 255, .12);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   color: white;
   font-size: 14px;
 }

 .cred-text strong {
   display: block;
   color: white;
   font-weight: 600;
   font-size: 14px;
 }

 .cred-text span {
   font-size: 13px;
   color: rgba(255, 255, 255, .6);
 }

 .doctor-img-wrap {
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: 20px;
   height: 440px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }

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

 .doctor-initials-lg {
   font-family: var(--font-display);
   font-size: 96px;
   font-weight: 600;
   color: rgba(255, 255, 255, .2);
 }

 /* ── FAQ ── */
 .faq {
   background: var(--off-white);
 }

 .faq-list {
   max-width: 800px;
   margin: 0 auto;
 }

 .faq-item {
   background: white;
   border: 1px solid var(--border);
   border-radius: 14px;
   margin-bottom: 12px;
   overflow: hidden;
 }

 .faq-question {
   padding: 20px 24px;
   font-weight: 600;
   font-size: 15px;
   color: var(--text-dark);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
 }

 .faq-question::after {
   content: '+';
   font-size: 22px;
   color: var(--teal-deep);
   font-weight: 300;
   flex-shrink: 0;
   transition: transform .25s;
 }

 .faq-item.open .faq-question::after {
   transform: rotate(45deg);
 }

 .faq-answer {
   font-size: 14.5px;
   color: var(--text-mid);
   line-height: 1.75;
   padding: 0 24px 20px;
   display: none;
 }

 .faq-item.open .faq-answer {
   display: block;
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 900px) {

   .intro-grid,
   .method-grid,
   .doctor-grid,
   .appt-inner {
     grid-template-columns: 1fr;
     gap: 40px;
   }

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

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

   nav {
     display: none;
   }

   .video-wrap {
     position: static;
   }
 }

 @media (max-width: 600px) {
   .advantages-grid {
     grid-template-columns: 1fr;
   }

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

   .form-row {
     grid-template-columns: 1fr;
   }
 }

 /*  */


   SCAR REMOVAL PAGE CSS



.scar-removal-section {
    padding: 90px 0;
}

.scar-removal-section-light {
    background: var(--off-white);
}
.scar-removal-breadcrumb {
    background: var(--off-white);
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.scar-removal-breadcrumb a {
    color: var(--teal-deep);
    font-weight: 600;
    font-size: 14px;
}

.scar-removal-breadcrumb span {
    font-size: 14px;
    color: var(--text-light);
}


/* =========================================================
   COMMON TEXT
========================================================= */

.scar-removal-section-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal-light);
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scar-removal-section-label::before {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--teal-light);
    border-radius: 2px;
    flex-shrink: 0;
}

.scar-removal-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.5vw, 48px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.scar-removal-text {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-mid);
    margin-bottom: 18px;
}

.scar-removal-intro {
    max-width: 700px;
}


/* =========================================================
   HERO
========================================================= */

.scar-removal-hero {
    padding: 90px 0;
    background: linear-gradient(
        135deg,
        #c2d8de 0%,
        #b6d1d8 100%
    );
}

.scar-removal-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 70px;
}

.scar-removal-hero-content {
    min-width: 0;
}

.scar-removal-hero-content .scar-removal-section-label {
    color: var(--teal-deep);
}

.scar-removal-hero-content .scar-removal-section-label::before {
    background: var(--teal-deep);
}

.scar-removal-hero-image {
    width: 100%;
    min-width: 0;
}

.scar-removal-hero-image img {
    width: 100%;
    height: auto;
    min-height: 360px;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: 25px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .08);
}

.scar-removal-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 28px;
}


/* =========================================================
   TWO COLUMN CONTENT
========================================================= */

.scar-removal-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 70px;
}

.scar-removal-two-column.scar-removal-reverse {
    direction: rtl;
}

.scar-removal-two-column.scar-removal-reverse > * {
    direction: ltr;
}

.scar-removal-content-column {
    min-width: 0;
}

.scar-removal-image-column {
    width: 100%;
    min-width: 0;
}

.scar-removal-image-column img {
    width: 100%;
    height: auto;
    min-height: 350px;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}


/* =========================================================
   TYPES OF SCARS
========================================================= */

.scar-removal-types-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin-top: 50px;
}

.scar-removal-type-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    background: white;
    transition:
        box-shadow .25s ease,
        transform .2s ease;
}

.scar-removal-type-card:hover {
    box-shadow: 0 12px 40px rgba(26, 92, 107, .12);
    transform: translateY(-4px);
}

.scar-removal-type-card > img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.scar-removal-type-card-body {
    padding: 26px;
}

.scar-removal-type-card-body h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}


/* =========================================================
   STATS
========================================================= */

.scar-removal-stats {
    background: var(--teal-deep);
    color: white;
    padding: 80px 0;
}

.scar-removal-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    text-align: center;
}

.scar-removal-stat-item {
    min-width: 0;
}

.scar-removal-stat-number {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 600;
    color: white;
    line-height: 1;
}

.scar-removal-stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    margin-top: 8px;
}


/* =========================================================
   BENEFITS
========================================================= */

.scar-removal-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 50px;
}

.scar-removal-benefit-card {
    min-width: 0;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: white;
    transition: box-shadow .2s ease;
}

.scar-removal-benefit-card:hover {
    box-shadow: 0 8px 28px rgba(26, 92, 107, .1);
}

.scar-removal-benefit-card h3 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}


/* =========================================================
   FAQ
========================================================= */

.scar-removal-faq-wrap {
    max-width: 1000px;
    margin-top: 50px;
}

.scar-removal-faq-item {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 16px;
    background: white;
}

.scar-removal-faq-item h3 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}


/* =========================================================
   APPOINTMENT
========================================================= */

.scar-removal-appointment {
    padding: 90px 0;
    background: var(--teal-deep);
}

.scar-removal-appointment-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 70px;
}

.scar-removal-appointment-left {
    min-width: 0;
}

.scar-removal-appointment-left .scar-removal-section-label {
    color: rgba(255, 255, 255, .8);
}

.scar-removal-appointment-left .scar-removal-section-label::before {
    background: rgba(255, 255, 255, .8);
}

.scar-removal-appointment-left .scar-removal-title {
    color: white;
}

.scar-removal-appointment-desc {
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.scar-removal-appointment-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.scar-removal-appointment-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.6;
}

.scar-removal-appointment-icon {
    flex-shrink: 0;
    width: 28px;
}


/* =========================================================
   FORM
========================================================= */

.scar-removal-form-card {
    width: 100%;
    min-width: 0;
    padding: 36px;
    background: white;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}

.scar-removal-form-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.scar-removal-form-sub {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 25px;
}

.scar-removal-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.scar-removal-form-group {
    width: 100%;
    margin-bottom: 18px;
}

.scar-removal-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 7px;
}

.scar-removal-form-group input,
.scar-removal-form-group select,
.scar-removal-form-group textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-dark);
    background: white;
}

.scar-removal-form-group input,
.scar-removal-form-group select {
    height: 48px;
}

.scar-removal-form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.scar-removal-form-group input:focus,
.scar-removal-form-group select:focus,
.scar-removal-form-group textarea:focus {
    outline: none;
    border-color: var(--teal-light);
}

.scar-removal-submit-button {
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 15px 20px;
    border-radius: 10px;
    background: var(--teal-deep);
    color: white;
    font-size: 15px;
    font-weight: 600;
    transition: opacity .2s ease;
}

.scar-removal-submit-button:hover {
    opacity: .9;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .scar-removal-hero-grid {
        gap: 45px;
    }

    .scar-removal-two-column {
        gap: 45px;
    }

    .scar-removal-types-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scar-removal-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 992px) {

    .scar-removal-section {
        padding: 70px 0;
    }

    .scar-removal-hero {
        padding: 70px 0;
    }

    .scar-removal-hero-grid,
    .scar-removal-two-column,
    .scar-removal-appointment-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .scar-removal-two-column.scar-removal-reverse {
        direction: ltr;
    }

    .scar-removal-hero-content {
        text-align: center;
    }

    .scar-removal-hero-content .scar-removal-section-label {
        justify-content: center;
    }

    .scar-removal-hero-content .scar-removal-section-label::before {
        display: none;
    }

    .scar-removal-buttons {
        justify-content: center;
    }

    .scar-removal-hero-image {
        max-width: 650px;
        margin: 0 auto;
    }

    .scar-removal-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scar-removal-appointment-left {
        text-align: center;
    }

    .scar-removal-appointment-left .scar-removal-section-label {
        justify-content: center;
    }

    .scar-removal-appointment-info {
        max-width: 600px;
        margin: 0 auto;
        text-align: left;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .scar-removal-section {
        padding: 55px 0;
    }

    .scar-removal-hero {
        padding: 55px 0 65px;
    }

    .scar-removal-title {
        font-size: clamp(30px, 9vw, 40px);
    }

    .scar-removal-section-label {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .scar-removal-text {
        font-size: 15px;
        line-height: 1.7;
    }

    .scar-removal-hero-image img {
        min-height: 0;
        height: 300px;
        border-radius: 18px;
    }

    .scar-removal-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .scar-removal-buttons a {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .scar-removal-image-column img {
        min-height: 0;
        height: 300px;
    }

    .scar-removal-types-grid,
    .scar-removal-benefits-grid {
        grid-template-columns: 1fr;
    }

    .scar-removal-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 15px;
    }

    .scar-removal-stat-number {
        font-size: 42px;
    }

    .scar-removal-stat-label {
        font-size: 12px;
    }

    .scar-removal-type-card-body {
        padding: 24px;
    }

    .scar-removal-benefit-card {
        padding: 24px;
    }

    .scar-removal-faq-wrap {
        margin-top: 30px;
    }

    .scar-removal-faq-item {
        padding: 22px 18px;
    }

    .scar-removal-faq-item h3 {
        font-size: 19px;
    }

    .scar-removal-appointment {
        padding: 60px 0;
    }

    .scar-removal-form-card {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .scar-removal-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .scar-removal-form-title {
        font-size: 24px;
    }

    .scar-removal-appointment-info-item {
        font-size: 14px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .scar-removal-title {
        font-size: 29px;
    }

    .scar-removal-stat-number {
        font-size: 36px;
    }

    .scar-removal-form-card {
        padding: 20px 15px;
    }

}

/*  End */


 /* =========================================================
   DERMA ROLLER PAGE
   PREFIXED CLASSES TO AVOID THEME / HEADER / FOOTER CONFLICTS
========================================================= */

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

/* =========================
   COMMON
========================= */

.dr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 600;
  margin-bottom: 12px;
}

.dr-eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
  flex-shrink: 0;
}

.dr-eyebrow.no-line::before {
  display: none;
}

h2.dr-display {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-dark);
  margin: 0 0 16px;
}

h2.dr-display em {
  font-style: italic;
  color: var(--teal-deep);
}

.dr-lead {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.75;
}

.dr-btn-ghost {
  border: 2px solid var(--teal-deep);
  color: var(--teal-deep);
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dr-btn-ghost:hover {
  background: var(--teal-deep);
  color: white;
}

/* =========================
   HERO
========================= */

.dr-hero {
  background: linear-gradient(
    135deg,
    #e8f4f7 0%,
    #d0eaed 45%,
    #c2e0e6 100%
  );
  padding: 64px 0 0;
  position: relative;
  overflow: hidden;
}

.dr-hero-bg-text {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 180px);
  font-weight: 600;
  color: rgba(26, 92, 107, .06);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  letter-spacing: -2px;
}

.dr-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}

.dr-hero-left {
  padding-bottom: 60px;
}

.dr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-light);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.dr-breadcrumb a {
  color: var(--teal-deep);
  font-weight: 500;
}

.dr-hero-left h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-dark);
  margin: 0 0 20px;
}

.dr-hero-left h1 em {
  font-style: italic;
  color: var(--teal-deep);
}

.dr-hero-left .dr-lead {
  max-width: 500px;
  margin-bottom: 32px;
}

.dr-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.dr-hero-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 48px;
  align-self: end;
}

.dr-hc-card {
  background: white;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 8px 32px rgba(26, 92, 107, .1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.dr-hc-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--teal-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.dr-hc-text strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.dr-hc-text span {
  font-size: 13px;
  color: var(--text-light);
}

/* =========================
   INTRO
========================= */

.dr-intro {
  padding: 96px 0;
  background: var(--white);
}

.dr-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.dr-intro-copy p {
  font-size: 15.5px;
  color: var(--text-mid);
  line-height: 1.85;
  margin: 0 0 18px;
}

.dr-intro-copy p strong {
  color: var(--text-dark);
}

.dr-intro-copy p:last-child {
  margin-bottom: 0;
}

.dr-intro-visual {
  position: relative;
}

.dr-iv-img {
  width: 100%;
  height: 400px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    var(--teal-pale),
    var(--teal-ghost)
  );
}

.dr-iv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dr-iv-tag {
  position: absolute;
  background: white;
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 8px 28px rgba(26, 92, 107, .14);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

.dr-iv-tag .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal-light);
  flex-shrink: 0;
}

.dr-iv-tag.t1 {
  top: 24px;
  right: -20px;
}

.dr-iv-tag.t2 {
  bottom: 32px;
  left: -20px;
}

.dr-iv-tag.t3 {
  bottom: 100px;
  right: -16px;
  background: var(--teal-deep);
  color: white;
}

.dr-iv-tag.t3 .dot {
  background: rgba(255, 255, 255, .5);
}

/* =========================
   INDICATIONS
========================= */

.dr-indications {
  padding: 80px 0;
  background: var(--teal-deep);
}

.dr-indications .dr-eyebrow {
  color: rgba(255, 255, 255, .55);
}

.dr-indications .dr-eyebrow::before {
  background: rgba(255, 255, 255, .4);
}

.dr-indications h2.dr-display {
  color: white;
  max-width: 560px;
}

.dr-ind-intro {
  color: rgba(255, 255, 255, .75);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 680px;
  margin-bottom: 48px;
}

.dr-ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.dr-ind-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 32px 28px;
  transition: background .2s, transform .2s;
}

.dr-ind-card:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-4px);
}

.dr-ind-emoji {
  font-size: 36px;
  margin-bottom: 16px;
}

.dr-ind-title {
  font-weight: 700;
  font-size: 18px;
  color: white;
  margin-bottom: 10px;
}

.dr-ind-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.7;
}

.dr-ind-tag {
  display: inline-block;
  margin-top: 14px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .8);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
}

/* =========================
   COMPARISON
========================= */

.dr-compare {
  padding: 96px 0;
  background: var(--off-white);
}

.dr-compare-heading {
  text-align: center;
}

.dr-compare-heading .dr-eyebrow {
  justify-content: center;
}

.dr-compare-heading .dr-lead {
  max-width: 580px;
  margin: 0 auto;
}

.dr-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}

.dr-compare-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow .25s, transform .25s;
}

.dr-compare-card:hover {
  box-shadow: 0 16px 48px rgba(26, 92, 107, .12);
  transform: translateY(-3px);
}

.dr-cc-header {
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
}

.dr-cc-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.dr-cc-icon-wrap.teal {
  background: var(--teal-ghost);
}

.dr-cc-icon-wrap.dark {
  background: var(--teal-deep);
}

.dr-cc-header-text h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.dr-cc-header-text span {
  font-size: 12.5px;
  color: var(--text-light);
}

.dr-cc-body {
  padding: 28px 32px 32px;
}

.dr-cc-body p {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0 0 14px;
}

.dr-cc-body p strong {
  color: var(--text-dark);
}

.dr-cc-body p:last-child {
  margin-bottom: 0;
}

.dr-cc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.dr-cc-pill {
  background: var(--teal-ghost);
  border: 1px solid var(--border);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: 30px;
}

/* =========================
   BENEFITS
========================= */

.dr-benefits {
  padding: 96px 0;
  background: var(--white);
}

.dr-benefits-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 64px;
}

.dr-bi-visual {
  background: linear-gradient(
    135deg,
    var(--teal-pale),
    var(--teal-ghost)
  );
  border-radius: 24px;
  height: 380px;
  position: relative;
  overflow: hidden;
}

.dr-bi-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.dr-bi-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--teal-deep);
  color: white;
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 6px 20px rgba(26, 92, 107, .3);
}

.dr-bi-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
}

.dr-bi-badge span {
  font-size: 11px;
  opacity: .8;
}

.dr-ben-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.dr-ben-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  transition: box-shadow .2s, transform .2s;
}

.dr-ben-item:hover {
  box-shadow: 0 8px 24px rgba(26, 92, 107, .1);
  transform: translateY(-2px);
}

.dr-ben-num {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.dr-ben-title {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.dr-ben-desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.65;
}

/* =========================
   HAIR SECTION
========================= */

.dr-hair {
  padding: 96px 0;
  background: var(--off-white);
}

.dr-hair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.dr-hair-copy p {
  font-size: 15.5px;
  color: var(--text-mid);
  line-height: 1.85;
  margin: 0 0 18px;
}

.dr-hair-copy p strong {
  color: var(--text-dark);
}

.dr-hair-visual {
  background: var(--teal-deep);
  border-radius: 24px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.dr-hv-stat {
  background: rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 22px 18px;
}

.dr-hv-stat .num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  color: white;
  line-height: 1;
}

.dr-hv-stat .lbl {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  margin-top: 4px;
  line-height: 1.4;
}

.dr-hv-wide {
  grid-column: 1 / 3;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 18px 20px;
}

.dr-hv-wide p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.65;
  margin: 0;
}

/* =========================
   FAQ
========================= */

.dr-faq {
  padding: 96px 0;
  background: var(--white);
}

.dr-faq-wrap {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 72px;
  align-items: start;
}

.dr-faq-left {
  position: sticky;
  top: 100px;
}

.dr-faq-left .dr-lead {
  font-size: 15px;
  margin-bottom: 28px;
}

.dr-faq-left a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-deep);
  color: white;
  padding: 13px 22px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  transition: background .2s;
}

.dr-faq-left a:hover {
  background: var(--teal-mid);
}

.dr-faq-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dr-faq-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--off-white);
}

.dr-faq-q {
  padding: 20px 24px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.dr-faq-icon {
  width: 28px;
  height: 28px;
  background: var(--teal-ghost);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-deep);
  font-size: 18px;
  flex-shrink: 0;
  transition: transform .25s, background .2s;
}

.dr-faq-item.open .dr-faq-icon {
  transform: rotate(45deg);
  background: var(--teal-deep);
  color: white;
}

.dr-faq-a {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.75;
  padding: 0 24px 20px;
  display: none;
}

.dr-faq-item.open .dr-faq-a {
  display: block;
}

/* =========================
   APPOINTMENT
========================= */

.dr-appointment {
  background: var(--teal-deep);
  padding: 96px 0;
}

.dr-appt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.dr-appt-left .dr-eyebrow {
  color: rgba(255, 255, 255, .55);
}

.dr-appt-left .dr-eyebrow::before {
  background: rgba(255, 255, 255, .4);
}

.dr-appt-left h2.dr-display {
  color: white;
}

.dr-appt-left .dr-lead {
  color: rgba(255, 255, 255, .75);
  margin-bottom: 36px;
}

.dr-contact-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dr-cs-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.dr-cs-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.dr-cs-text {
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
  line-height: 1.5;
}

.dr-cs-text strong {
  display: block;
  color: white;
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 13px;
}

.dr-form-card {
  background: white;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .2);
}

.dr-form-card h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 4px;
}

.dr-form-card > p {
  font-size: 13.5px;
  color: var(--text-light);
  margin-bottom: 28px;
}

.dr-fg {
  margin-bottom: 16px;
}

.dr-fg label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.dr-fg input,
.dr-fg select,
.dr-fg textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--off-white);
  outline: none;
  transition: border .2s, background .2s;
  box-sizing: border-box;
}

.dr-fg input:focus,
.dr-fg select:focus,
.dr-fg textarea:focus {
  border-color: var(--teal-light);
  background: white;
}

.dr-fg textarea {
  height: 88px;
  resize: vertical;
}

.dr-fg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dr-btn-form {
  width: 100%;
  padding: 15px;
  background: var(--teal-deep);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}

.dr-btn-form:hover {
  background: var(--teal-mid);
}

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

/* TABLET */
@media (max-width: 992px) {

  .dr-container {
    padding: 0 20px;
  }

  .dr-hero-inner,
  .dr-intro-grid,
  .dr-benefits-intro,
  .dr-hair-grid,
  .dr-appt-grid {
    gap: 40px;
  }

  .dr-hero-left h1 {
    font-size: clamp(36px, 5vw, 52px);
  }

  .dr-ind-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dr-ind-card:last-child {
    grid-column: span 2;
  }

  .dr-faq-wrap {
    gap: 40px;
  }
}

/* MOBILE */
@media (max-width: 768px) {

  .dr-container {
    padding: 0 16px;
  }

  .dr-hero {
    padding-top: 40px;
  }

  .dr-hero-inner,
  .dr-intro-grid,
  .dr-benefits-intro,
  .dr-hair-grid,
  .dr-appt-grid,
  .dr-compare-grid,
  .dr-faq-wrap {
    grid-template-columns: 1fr;
  }

  .dr-hero-left {
    padding-bottom: 20px;
  }

  .dr-hero-left h1 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .dr-hero-left .dr-lead {
    font-size: 15px;
  }

  .dr-hero-cards {
    padding-bottom: 32px;
  }

  .dr-hero-bg-text {
    font-size: 70px;
    bottom: 10px;
  }

  .dr-intro,
  .dr-compare,
  .dr-benefits,
  .dr-hair,
  .dr-faq,
  .dr-appointment {
    padding: 64px 0;
  }

  .dr-intro-grid,
  .dr-benefits-intro,
  .dr-hair-grid {
    gap: 40px;
  }

  .dr-iv-img {
    height: 320px;
  }

  .dr-iv-tag.t1 {
    right: 10px;
  }

  .dr-iv-tag.t2 {
    left: 10px;
  }

  .dr-iv-tag.t3 {
    right: 10px;
  }

  .dr-indications {
    padding: 64px 0;
  }

  .dr-ind-grid {
    grid-template-columns: 1fr;
  }

  .dr-ind-card:last-child {
    grid-column: auto;
  }

  .dr-compare-grid {
    margin-top: 32px;
  }

  .dr-cc-header,
  .dr-cc-body {
    padding-left: 22px;
    padding-right: 22px;
  }

  .dr-bi-visual {
    height: 320px;
  }

  .dr-ben-list {
    grid-template-columns: 1fr;
  }

  .dr-hair-visual {
    padding: 22px;
  }

  .dr-faq-left {
    position: static;
  }

  .dr-form-card {
    padding: 26px 20px;
    border-radius: 18px;
  }

  .dr-fg-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .dr-appt-grid {
    gap: 42px;
  }
}

/* SMALL MOBILE */
@media (max-width: 480px) {

  .dr-hero-ctas {
    flex-direction: column;
  }

  .dr-hero-ctas a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .dr-hc-card {
    padding: 16px;
  }

  .dr-hc-icon {
    width: 42px;
    height: 42px;
  }

  .dr-iv-tag {
    font-size: 11px;
    padding: 9px 12px;
  }

  .dr-iv-tag.t1 {
    top: 12px;
  }

  .dr-iv-tag.t2 {
    bottom: 14px;
  }

  .dr-iv-tag.t3 {
    bottom: 76px;
  }

  .dr-hair-visual {
    grid-template-columns: 1fr;
  }

  .dr-hv-wide {
    grid-column: auto;
  }

  .dr-hv-stat .num {
    font-size: 32px;
  }

  .dr-faq-q {
    padding: 16px;
    font-size: 14px;
  }

  .dr-faq-a {
    padding: 0 16px 18px;
    font-size: 13.5px;
  }

  .dr-cs-text {
    font-size: 13px;
  }
}
 /* End */

 /* =========================================================
NAIL FUNGAL INFECTION PAGE
UNIQUE CLASS PREFIX: nfi-
========================================================= */

.nfi-page,
.nfi-page *,
.nfi-page *::before,
.nfi-page *::after {
box-sizing: border-box;
}

.nfi-page {
width: 100%;
overflow: hidden;
}

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

.nfi-container-narrow {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
}

.nfi-section {
padding: 96px 0;
}

.nfi-section-offwhite {
background: var(--off-white);
}

/* =========================================================
BREADCRUMB
========================================================= */

.nfi-breadcrumb {
background: var(--off-white);
padding: 14px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

.nfi-breadcrumb .nfi-container {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.nfi-breadcrumb a {
color: var(--teal-deep);
font-weight: 600;
font-size: 14px;
}

.nfi-breadcrumb span {
font-size: 14px;
color: var(--text-light);
}

/* =========================================================
TYPOGRAPHY
========================================================= */

.nfi-section-label {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--teal-light);
font-weight: 600;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}

.nfi-section-label::before {
content: '';
width: 20px;
height: 2px;
background: var(--teal-light);
border-radius: 2px;
flex-shrink: 0;
}

.nfi-section-title {
font-family: var(--font-display);
font-size: clamp(28px, 3.2vw, 44px);
font-weight: 600;
line-height: 1.2;
color: var(--text-dark);
margin: 0 0 16px;
}

.nfi-section-text {
font-size: 16px;
line-height: 1.85;
color: var(--text-mid);
margin: 0;
}

.nfi-section-text + .nfi-section-text {
margin-top: 18px;
}

.nfi-max-width {
max-width: 720px;
}

/* =========================================================
IMAGE STYLES
========================================================= */

.nfi-site-img {
width: 100%;
margin: 0;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--teal-ghost);
}

.nfi-site-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* =========================================================
HERO
========================================================= */

.nfi-service-hero {
position: relative;
padding: 90px 0 70px;
background:
linear-gradient(
135deg,
var(--teal-deep) 0%,
var(--teal-mid) 55%,
var(--teal-light) 100%
);
overflow: hidden;
}

.nfi-service-hero::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 340px;
height: 340px;
border-radius: 50%;
background: rgba(255, 255, 255, .06);
}

.nfi-service-hero::after {
content: '';
position: absolute;
bottom: -120px;
left: -60px;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(255, 255, 255, .05);
}

.nfi-hero-container {
position: relative;
z-index: 2;
max-width: 900px;
}

.nfi-service-hero .nfi-section-label {
color: rgba(255, 255, 255, .75);
}

.nfi-service-hero .nfi-section-label::before {
background: rgba(255, 255, 255, .6);
}

.nfi-service-hero .nfi-section-title {
color: white;
max-width: 820px;
}

.nfi-hero-text {
max-width: 680px;
color: rgba(255, 255, 255, .85);
font-size: 17px;
line-height: 1.8;
margin: 0 0 30px;
}

.nfi-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}

.nfi-btn-hero-light,
.nfi-btn-primary,
.nfi-btn-light {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
}

.nfi-btn-hero-light {
background: white;
color: var(--teal-deep);
padding: 14px 30px;
border-radius: 50px;
font-size: 14.5px;
font-weight: 600;
transition: transform .2s, box-shadow .2s;
}

.nfi-btn-hero-light:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.nfi-btn-primary {
background: var(--teal-deep);
color: white;
padding: 14px 24px;
border-radius: 50px;
font-size: 14.5px;
font-weight: 600;
transition: transform .2s, background .2s;
}

.nfi-btn-primary:hover {
transform: translateY(-2px);
background: var(--teal-mid);
}

/* =========================================================
TWIN IMAGES
========================================================= */

.nfi-twin-images {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 40px;
}

.nfi-twin-images .nfi-site-img {
height: 300px;
}

/* =========================================================
RISK FACTORS
========================================================= */

.nfi-risk-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
margin-top: 36px;
}

.nfi-risk-card {
background: var(--off-white);
border: 1px solid var(--border);
border-radius: 16px;
padding: 26px 22px;
transition: transform .2s, box-shadow .2s;
}

.nfi-risk-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(26, 92, 107, .1);
}

.nfi-risk-num {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--teal-deep);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
margin-bottom: 14px;
}

.nfi-risk-card p {
font-size: 13.5px;
color: var(--text-mid);
line-height: 1.7;
margin: 0;
}

/* =========================================================
PHONE CALLOUT
========================================================= */

.nfi-phone-callout {
background: var(--teal-deep);
border-radius: 16px;
padding: 28px 32px;
margin-top: 36px;
text-align: center;
}

.nfi-phone-callout p {
font-family: var(--font-display);
font-size: 21px;
font-weight: 600;
color: white;
margin: 0;
}

.nfi-phone-callout a {
color: var(--teal-pale);
text-decoration: underline;
}

/* =========================================================
SPLIT GRID
========================================================= */

.nfi-split-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 60px;
align-items: center;
}

.nfi-benefit-image {
height: 360px;
}

/* =========================================================
BENEFITS LIST
========================================================= */

.nfi-benefit-list {
list-style: none;
padding: 0;
margin: 22px 0 0;
}

.nfi-benefit-list li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
font-size: 14.5px;
color: var(--text-mid);
line-height: 1.9;
}

.nfi-benefit-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 1px;
color: var(--teal-deep);
font-weight: 700;
}

/* =========================================================
DOCTOR PANEL
========================================================= */

.nfi-doctor-panel {
background:
linear-gradient(
135deg,
var(--gold-pale) 0%,
#fbf6ec 100%
);
border-radius: 24px;
padding: 50px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 46px;
align-items: center;
}

.nfi-doctor-panel .nfi-section-label {
color: var(--gold);
}

.nfi-doctor-panel .nfi-section-label::before {
background: var(--gold);
}

.nfi-panel-list {
list-style: none;
padding: 0;
margin: 18px 0 0;
}

.nfi-panel-list li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
font-size: 14.5px;
color: var(--text-mid);
line-height: 1.9;
}

.nfi-panel-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--gold);
font-weight: 700;
}

.nfi-doctor-image {
height: 300px;
}

.nfi-doctor-image img {
object-fit: contain;
background: white;
padding: 30px;
}

/* =========================================================
CTA BAND
========================================================= */

.nfi-cta-band {
background:
linear-gradient(
135deg,
var(--teal-deep) 0%,
var(--teal-mid) 100%
);
text-align: center;
padding: 70px 0;
}

.nfi-cta-band .nfi-section-label {
color: rgba(255, 255, 255, .6);
justify-content: center;
}

.nfi-cta-band .nfi-section-label::before {
background: rgba(255, 255, 255, .4);
}

.nfi-cta-band .nfi-section-title {
color: white;
}

.nfi-cta-band p {
max-width: 560px;
margin: 0 auto 28px;
color: rgba(255, 255, 255, .8);
font-size: 16px;
line-height: 1.7;
}

.nfi-btn-light {
background: white;
color: var(--teal-deep);
padding: 14px 32px;
border-radius: 50px;
font-size: 14.5px;
font-weight: 600;
transition: transform .2s, box-shadow .2s;
}

.nfi-btn-light:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

/* =========================================================
APPOINTMENT SECTION
========================================================= */

.nfi-appointment {
background: var(--teal-deep);
padding: 96px 0;
}

.nfi-appointment-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 72px;
align-items: start;
}

.nfi-appointment-left .nfi-section-label {
color: rgba(255, 255, 255, .55);
}

.nfi-appointment-left .nfi-section-label::before {
background: rgba(255, 255, 255, .4);
}

.nfi-appointment-left .nfi-section-title {
color: white;
}

.nfi-appointment-desc {
color: rgba(255, 255, 255, .75);
font-size: 16px;
line-height: 1.75;
margin: 0 0 36px;
}

.nfi-appointment-info {
display: flex;
flex-direction: column;
gap: 16px;
}

.nfi-appointment-info-item {
display: flex;
align-items: flex-start;
gap: 14px;
color: rgba(255, 255, 255, .8);
font-size: 14px;
line-height: 1.6;
}

.nfi-appointment-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(255, 255, 255, .1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 18px;
}

/* =========================================================
APPOINTMENT FORM
========================================================= */

.nfi-appointment-form-card {
background: white;
border-radius: 24px;
padding: 40px;
box-shadow: 0 24px 72px rgba(0, 0, 0, .2);
}

.nfi-form-title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--text-dark);
margin: 0 0 4px;
}

.nfi-form-sub {
font-size: 13.5px;
color: var(--text-light);
margin: 0 0 28px;
}

.nfi-form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.nfi-form-group {
margin-bottom: 16px;
}

.nfi-form-group label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--text-mid);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: .5px;
}

.nfi-form-group input,
.nfi-form-group select,
.nfi-form-group textarea {
display: block;
width: 100%;
max-width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--border);
border-radius: 10px;
font-family: var(--font-body);
font-size: 14px;
color: var(--text-dark);
background: var(--off-white);
outline: none;
transition: border .2s, background .2s;
}

.nfi-form-group input:focus,
.nfi-form-group select:focus,
.nfi-form-group textarea:focus {
border-color: var(--teal-light);
background: white;
}

.nfi-form-group textarea {
min-height: 100px;
resize: vertical;
}

.nfi-btn-submit {
width: 100%;
padding: 15px;
background: var(--teal-deep);
color: white;
border: none;
border-radius: 12px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background .2s, transform .2s;
}

.nfi-btn-submit:hover {
background: var(--teal-mid);
transform: translateY(-1px);
}

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

@media (max-width: 991px) {

.nfi-section {
padding: 75px 0;
}

.nfi-risk-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nfi-split-grid,
.nfi-doctor-panel,
.nfi-appointment-grid {
gap: 40px;
}

.nfi-doctor-panel {
padding: 40px;
}

.nfi-appointment-grid {
grid-template-columns: 1fr;
}

.nfi-appointment-form-card {
max-width: 720px;
}

}

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

@media (max-width: 767px) {

.nfi-container,
.nfi-container-narrow {
padding-left: 18px;
padding-right: 18px;
}

.nfi-section {
padding: 60px 0;
}

.nfi-section-title {
font-size: clamp(28px, 8vw, 36px);
}

.nfi-section-text {
font-size: 15px;
line-height: 1.75;
}

/* Breadcrumb */

.nfi-breadcrumb {
padding: 12px 0;
}

.nfi-breadcrumb a,
.nfi-breadcrumb span {
font-size: 12px;
}

/* Hero */

.nfi-service-hero {
padding: 65px 0 55px;
}

.nfi-service-hero .nfi-section-title {
font-size: clamp(32px, 9vw, 46px);
}

.nfi-hero-text {
font-size: 15px;
line-height: 1.75;
}

.nfi-hero-actions {
flex-direction: column;
align-items: stretch;
}

.nfi-btn-hero-light,
.nfi-btn-primary {
width: 100%;
text-align: center;
}

/* Images */

.nfi-twin-images {
grid-template-columns: 1fr;
gap: 18px;
margin-top: 30px;
}

.nfi-twin-images .nfi-site-img {
height: 260px;
}

/* Risk */

.nfi-risk-grid {
grid-template-columns: 1fr;
gap: 16px;
}

.nfi-risk-card {
padding: 22px 20px;
}

.nfi-phone-callout {
padding: 22px 18px;
}

.nfi-phone-callout p {
font-size: 18px;
line-height: 1.5;
}

/* Split */

.nfi-split-grid {
grid-template-columns: 1fr;
gap: 36px;
}

.nfi-benefit-image {
height: 280px;
order: 2;
}

/* Doctor */

.nfi-doctor-panel {
grid-template-columns: 1fr;
padding: 28px 22px;
gap: 30px;
border-radius: 20px;
}

.nfi-doctor-image {
height: 240px;
}

.nfi-doctor-image img {
padding: 20px;
}

/* CTA */

.nfi-cta-band {
padding: 60px 0;
}

.nfi-cta-band p {
font-size: 15px;
}

.nfi-btn-light {
width: 100%;
max-width: 320px;
}

/* Appointment */

.nfi-appointment {
padding: 65px 0;
}

.nfi-appointment-grid {
grid-template-columns: 1fr;
gap: 42px;
}

.nfi-appointment-desc {
font-size: 15px;
}

.nfi-appointment-info-item {
font-size: 13.5px;
}

.nfi-appointment-form-card {
padding: 26px 20px;
border-radius: 20px;
}

.nfi-form-row {
grid-template-columns: 1fr;
gap: 0;
}

.nfi-form-title {
font-size: 24px;
}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

.nfi-container,
.nfi-container-narrow {
padding-left: 15px;
padding-right: 15px;
}

.nfi-section-title {
font-size: 29px;
}

.nfi-service-hero {
padding: 52px 0 45px;
}

.nfi-service-hero .nfi-section-title {
font-size: 34px;
}

.nfi-section-label {
font-size: 10px;
letter-spacing: 2px;
}

.nfi-phone-callout p {
font-size: 16px;
}

.nfi-appointment-form-card {
padding: 24px 16px;
}

}


 /* ═══════════════════════════════
   RADIOFREQUENCY ABLATION PAGE
════════════════════════════════ */


/* ── BREADCRUMB ── */

.breadcrumb {
  background: var(--off-white);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.breadcrumb a {
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 14px;
}

.breadcrumb span {
  color: var(--text-light);
  font-size: 14px;
}


/* ── SHARED ── */

.section-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}


.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.section-title em {
  font-style: italic;
  color: var(--teal-deep);
}

.section-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-mid);
}

.section-text + .section-text {
  margin-top: 18px;
}

.section-head {
  margin-bottom: 40px;
}

.section-head.center {
  text-align: center;
}

.section-head.center .section-label {
  justify-content: center;
}

.section-head.center .section-label::before {
  display: none;
}

.section-subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 680px;
  margin: 0 auto;
}


/* ── HERO ── */

.rfa-hero {
  padding: 80px 0;
  background:
    linear-gradient(
      135deg,
      var(--teal-ghost) 0%,
      var(--teal-pale) 50%,
      #d5ebed 100%
    );
  overflow: hidden;
  position: relative;
}

.rfa-hero::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}

.rfa-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.rfa-hero-content {
  max-width: 650px;
}

.rfa-hero-content h1 {
  font-size: clamp(36px, 4.5vw, 56px);
}

.rfa-hero-content > p {
  color: var(--text-mid);
  font-size: 17px;
  line-height: 1.8;
  max-width: 620px;
  margin-bottom: 30px;
}

.rfa-hero-image {
  display: flex;
  justify-content: center;
}

.rfa-hero-image figure {
  width: 100%;
  max-width: 430px;
  height: 430px;
  border-radius: 50%;
  box-shadow: 0 20px 50px rgba(26, 92, 107, .12);
}

.rfa-hero-image img {
  object-fit: cover;
}


/* ── IMAGE ── */

figure.site-img {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--teal-ghost);
}

figure.site-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── INTRO ── */

.rfa-intro {
  align-items: center;
}

.rfa-feature-image {
  height: 420px;
}


/* ── CONDITIONS ── */

.indications-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px;
}

.ind-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}

.ind-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--teal-deep),
    var(--gold)
  );
}

.ind-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(26, 92, 107, .08);
}

.ind-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text-dark);
  margin-bottom: 12px;
  font-weight: 600;
}

.ind-card p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.7;
}


/* ── BENEFITS ── */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 36px;
}

.benefit-card {
  background: var(--teal-ghost);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.benefit-icon {
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-deep);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(26, 92, 107, .08);
  font-size: 18px;
  font-weight: 700;
}

.benefit-title {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.benefit-desc {
  font-size: 13.5px;
  color: var(--text-mid);
  line-height: 1.6;
}


/* ── TIMELINE ── */

.timeline {
  position: relative;
  max-width: 800px;
  margin: 40px auto 0;
  padding-left: 32px;
  border-left: 2px solid var(--border);
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -42px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 4px solid var(--teal-deep);
  z-index: 2;
}

.timeline-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-light);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.timeline-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.timeline-desc {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.7;
}


/* ── AFTERCARE ── */

.rfa-aftercare-image {
  height: 430px;
}

.rfa-aftercare-image img {
  object-fit: cover;
}

.benefit-list {
  margin-top: 22px;
}

.benefit-list li {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.8;
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
}

.benefit-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--teal-deep);
  font-weight: 700;
}


/* ── CTA ── */

.cta-band {
  background:
    linear-gradient(
      135deg,
      var(--teal-deep),
      var(--teal-mid)
    );
  text-align: center;
  padding: 70px 0;
}

.cta-band h2 {
  color: white;
}

.cta-band p {
  color: rgba(255,255,255,.8);
  max-width: 560px;
  margin: 0 auto 28px;
}

.cta-band .section-label {
  color: rgba(255,255,255,.6);
  justify-content: center;
}

.cta-band .section-label::before {
  background: rgba(255,255,255,.4);
}

.btn-light {
  background: white;
  color: var(--teal-deep);
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 14.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s;
}

.btn-light:hover {
  transform: translateY(-2px);
}


/* ═══════════════════════════════
   RESPONSIVE
════════════════════════════════ */

@media (max-width: 900px) {

  .rfa-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .rfa-hero-content {
    max-width: 100%;
  }

  .rfa-hero-image {
    order: -1;
  }

  .rfa-hero-image figure {
    width: 300px;
    height: 300px;
  }

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

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

  .rfa-feature-image,
  .rfa-aftercare-image {
    height: 360px;
  }

}


@media (max-width: 600px) {

  .rfa-hero {
    padding: 60px 0;
  }

  .rfa-hero-content h1 {
    font-size: 36px;
  }

  .rfa-hero-content > p {
    font-size: 15px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions a {
    text-align: center;
  }

  .rfa-hero-image figure {
    width: 240px;
    height: 240px;
  }

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

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

  .benefit-card {
    padding: 20px;
  }

  .timeline {
    padding-left: 24px;
  }

  .timeline-dot {
    left: -34px;
  }

  .timeline-title {
    font-size: 20px;
  }

  .rfa-feature-image,
  .rfa-aftercare-image {
    height: 280px;
  }

  .cta-band {
    padding: 55px 20px;
  }

}

 /* =========================================================
   SKIN REJUVENATION PAGE
   Unique Classes + Fully Responsive
========================================================= */

/* ─────────────────────────────────────────
   PAGE WRAPPER
───────────────────────────────────────── */

.rejuv-page {
  overflow: hidden;
}

/* ─────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────── */

.rejuv-breadcrumb {
  background: var(--off-white);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.rejuv-breadcrumb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.rejuv-breadcrumb a {
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.rejuv-breadcrumb span {
  font-size: 14px;
  color: var(--text-light);
}

/* ─────────────────────────────────────────
   SHARED CONTENT
───────────────────────────────────────── */

.rejuv-section-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rejuv-section-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
}

.rejuv-section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.rejuv-section-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-mid);
}

.rejuv-section-text strong {
  color: var(--text-dark);
}

/* ─────────────────────────────────────────
   HERO BANNER
───────────────────────────────────────── */

.rejuv-hero {
  padding: 80px 0;
  background: linear-gradient(
    135deg,
    #e8f4f7 0%,
    #d0eaed 45%,
    #c2e0e6 100%
  );
}

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

.rejuv-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4.5rem;
  align-items: center;
}

.rejuv-hero-content {
  max-width: 600px;
}

.rejuv-hero-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--text-dark);
  margin: 0 0 22px;
}

.rejuv-hero-description {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-mid);
  margin-bottom: 30px;
}

.rejuv-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.rejuv-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.rejuv-hero-btn-primary {
  background: var(--teal-deep);
  color: white;
}

.rejuv-hero-btn-primary:hover {
  background: var(--teal-light);
  color: white;
  transform: translateY(-2px);
}

.rejuv-hero-btn-outline {
  border: 1.5px solid var(--teal-deep);
  color: var(--teal-deep);
}

.rejuv-hero-btn-outline:hover {
  background: var(--teal-deep);
  color: white;
}

.rejuv-hero-image-wrap {
  width: 100%;
}

.rejuv-hero-image {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
  border-radius: 25px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.1);
}

/* ─────────────────────────────────────────
   COMMON SECTION CONTAINER
───────────────────────────────────────── */

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

.rejuv-section {
  padding: 90px 0;
}

.rejuv-section-light {
  background: var(--off-white);
}

/* ─────────────────────────────────────────
   TWO COLUMN SECTIONS
───────────────────────────────────────── */

.rejuv-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.rejuv-two-column-reverse {
  direction: rtl;
}

.rejuv-two-column-reverse > * {
  direction: ltr;
}

.rejuv-content-column {
  min-width: 0;
}

.rejuv-image-column {
  min-width: 0;
}

.rejuv-content-column br {
  display: block;
  content: "";
  margin-top: 18px;
}

.rejuv-content-image {
  width: 100%;
  height: 430px;
  object-fit: cover;
  display: block;
  border-radius: 24px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.08);
}

/* ─────────────────────────────────────────
   TREATMENT TYPES
───────────────────────────────────────── */

.rejuv-treatment-header {
  max-width: 700px;
}

.rejuv-treatment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 50px;
}

.rejuv-treatment-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: white;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.rejuv-treatment-card:hover {
  box-shadow: 0 12px 40px rgba(26, 92, 107, 0.12);
  transform: translateY(-5px);
}

.rejuv-treatment-image-wrap {
  height: 180px;
  overflow: hidden;
}

.rejuv-treatment-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.rejuv-treatment-card:hover .rejuv-treatment-image {
  transform: scale(1.08);
}

.rejuv-treatment-body {
  padding: 26px;
}

.rejuv-treatment-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 10px;
}

.rejuv-treatment-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 13.5px;
  margin-top: 14px;
  text-decoration: none;
}

.rejuv-treatment-link:hover {
  color: var(--teal-light);
}

/* ─────────────────────────────────────────
   STATS
───────────────────────────────────────── */

.rejuv-stats {
  background: var(--teal-deep);
  color: white;
  padding: 80px 0;
}

.rejuv-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.rejuv-stat-number {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  color: white;
  line-height: 1;
}

.rejuv-stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 8px;
}

/* ─────────────────────────────────────────
   BENEFITS
───────────────────────────────────────── */

.rejuv-benefits-header {
  max-width: 680px;
}

.rejuv-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 50px;
}

.rejuv-benefit-card {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.rejuv-benefit-card:hover {
  box-shadow: 0 8px 28px rgba(26, 92, 107, 0.1);
  transform: translateY(-3px);
}

.rejuv-benefit-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 10px;
}

/* ─────────────────────────────────────────
   TREATMENT PROCESS
───────────────────────────────────────── */

.rejuv-process-wrapper {
  max-width: 900px;
  margin-top: 60px;
}

.rejuv-process-step {
  display: flex;
  gap: 28px;
  margin-bottom: 48px;
}

.rejuv-process-step:last-child {
  margin-bottom: 0;
}

.rejuv-process-number {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--teal-deep);
  line-height: 1;
  flex-shrink: 0;
  width: 60px;
}

.rejuv-process-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 8px;
}

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */

.rejuv-faq-wrapper {
  max-width: 1000px;
  margin-top: 50px;
}

.rejuv-faq-item {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 16px;
  background: white;
}

.rejuv-faq-item:last-child {
  margin-bottom: 0;
}

.rejuv-faq-question {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 10px;
}

/* ─────────────────────────────────────────
   RESPONSIVE DESIGN
───────────────────────────────────────── */

@media (max-width: 992px) {

  .rejuv-hero {
    padding: 60px 0;
  }

  .rejuv-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .rejuv-hero-content {
    max-width: 750px;
  }

  .rejuv-hero-image {
    height: 460px;
  }

  .rejuv-two-column {
    gap: 45px;
  }

  .rejuv-treatment-grid,
  .rejuv-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rejuv-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 45px;
  }

  .rejuv-section {
    padding: 70px 0;
  }
}

@media (max-width: 768px) {

  .rejuv-section {
    padding: 60px 0;
  }

  .rejuv-two-column,
  .rejuv-two-column-reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 40px;
  }

  .rejuv-two-column-reverse > * {
    direction: ltr;
  }

  .rejuv-content-image {
    height: 360px;
  }

  .rejuv-treatment-grid,
  .rejuv-benefits-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .rejuv-treatment-body,
  .rejuv-benefit-card {
    padding: 22px;
  }

  .rejuv-process-step {
    gap: 18px;
    margin-bottom: 38px;
  }

  .rejuv-process-number {
    font-size: 36px;
    width: 48px;
  }

  .rejuv-process-title {
    font-size: 20px;
  }
}

@media (max-width: 576px) {

  .rejuv-container,
  .rejuv-hero-container,
  .rejuv-breadcrumb-inner {
    padding-left: 18px;
    padding-right: 18px;
  }

  .rejuv-hero {
    padding: 50px 0;
  }

  .rejuv-hero-title {
    font-size: 38px;
  }

  .rejuv-hero-description {
    font-size: 15px;
  }

  .rejuv-hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .rejuv-hero-btn {
    width: 100%;
  }

  .rejuv-hero-image {
    height: 380px;
  }

  .rejuv-section-title {
    font-size: 32px;
  }

  .rejuv-section-text {
    font-size: 15px;
    line-height: 1.75;
  }

  .rejuv-treatment-grid,
  .rejuv-benefits-grid,
  .rejuv-stats-grid {
    grid-template-columns: 1fr;
  }

  .rejuv-treatment-image-wrap,
  .rejuv-treatment-image {
    height: 210px;
  }

  .rejuv-content-image {
    height: 300px;
  }

  .rejuv-stats {
    padding: 60px 0;
  }

  .rejuv-stat-number {
    font-size: 46px;
  }

  .rejuv-process-step {
    gap: 14px;
  }

  .rejuv-process-number {
    font-size: 30px;
    width: 42px;
  }

  .rejuv-process-title {
    font-size: 19px;
  }

  .rejuv-faq-item {
    padding: 22px;
  }

  .rejuv-faq-question {
    font-size: 19px;
  }
}

 /* =========================================================
   PRP TREATMENT PAGE
   All classes are uniquely prefixed with prp-
========================================================= */

/* ---------- BREADCRUMB ---------- */

.prp-breadcrumb {
    background: var(--off-white);
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.prp-breadcrumb a {
    color: var(--teal-deep);
    font-weight: 600;
    font-size: 14px;
}

.prp-breadcrumb span {
    font-size: 14px;
    color: var(--text-light);
}

/* ---------- SHARED ---------- */

.prp-section-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal-light);
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.prp-section-label::before {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--teal-light);
    border-radius: 2px;
    flex-shrink: 0;
}

.prp-section-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.5vw, 48px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.prp-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-mid);
}

/* ---------- HERO ---------- */

.prp-hero {
    padding: 90px 0;
    background: linear-gradient(
        135deg,
        #c2d8de 0%,
        #b6d1d8 100%
    );
}

.prp-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 80px;
}

.prp-hero-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-mid);
}

.prp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

.prp-hero-media {
    width: 100%;
}

/* ---------- TWO COLUMN ---------- */

.prp-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

/* ---------- VIDEO ---------- */

.prp-video-card {
    width: 100%;
    background: var(--white);
    padding: 20px;
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(26, 92, 107, 0.06);
}

.prp-video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    border-radius: 16px;
}

.prp-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- PROCEDURE ---------- */

.prp-procedure {
    background: var(--teal-ghost);
}

.prp-procedure-intro {
    max-width: 800px;
    color: var(--text-mid);
}

.prp-procedure-list {
    margin-top: 40px;
    max-width: 900px;
}

.prp-procedure-step {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.prp-step-number {
    width: 50px;
    height: 50px;
    background: var(--teal-deep);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    flex-shrink: 0;
}

.prp-step-content h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.prp-step-content p {
    color: var(--text-mid);
    line-height: 1.7;
}

/* ---------- BENEFITS ---------- */

.prp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.prp-benefit-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: 0.3s ease;
}

.prp-benefit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--teal-deep),
        var(--gold)
    );
}

.prp-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(26, 92, 107, 0.1);
}

.prp-benefit-card h3 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.prp-benefit-card p {
    color: var(--text-mid);
    line-height: 1.7;
}

/* ---------- EXPERTISE ---------- */

.prp-expertise {
    background: var(--teal-ghost);
}

.prp-expertise-intro {
    max-width: 800px;
    color: var(--text-mid);
    margin-bottom: 40px;
}

.prp-expertise-title {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.prp-expertise-text {
    color: var(--text-mid);
    line-height: 1.8;
}

/* ---------- DOCTOR ---------- */

.prp-doctor-media {
    min-height: 350px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1100px) {

    .prp-hero-grid {
        gap: 50px;
    }

    .prp-two-column {
        gap: 45px;
    }

    .prp-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {

    .prp-hero {
        padding: 70px 0;
    }

    .prp-hero-grid,
    .prp-two-column {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .prp-hero-content {
        text-align: center;
    }

    .prp-hero-content .prp-section-label {
        justify-content: center;
    }

    .prp-hero-actions {
        justify-content: center;
    }

    .prp-media-placeholder {
        min-height: 360px;
    }
}

@media (max-width: 768px) {

    .prp-section-title {
        font-size: clamp(28px, 7vw, 40px);
    }

    .prp-benefits-grid {
        grid-template-columns: 1fr;
        margin-top: 35px;
    }

    .prp-benefit-card {
        padding: 25px;
    }

    .prp-procedure-step {
        gap: 15px;
    }

    .prp-step-number {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .prp-video-card {
        padding: 12px;
    }
}

@media (max-width: 576px) {

    .prp-hero {
        padding: 50px 0;
    }

    .prp-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .prp-hero-actions a {
        width: 100%;
        text-align: center;
    }

    .prp-media-placeholder {
        min-height: 280px;
    }

    .prp-procedure-step {
        align-items: flex-start;
    }

    .prp-step-number {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .prp-step-content h4 {
        font-size: 16px;
    }

    .prp-step-content p {
        font-size: 14px;
    }

    .prp-section-label {
        letter-spacing: 2px;
    }
}

 /* =========================================================
   LASER SKIN TONING PAGE
   Unique Prefix: lst-
========================================================= */

/* ── BREADCRUMB ── */
.lst-breadcrumb {
  background: var(--off-white);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.lst-breadcrumb a {
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 14px;
}

.lst-breadcrumb span {
  font-size: 14px;
  color: var(--text-light);
}

/* ── SHARED CONTENT ── */
.lst-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lst-label::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
}

.lst-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.lst-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-mid);
}

.lst-text + .lst-text {
  margin-top: 18px;
}

/* ── HERO ── */
.lst-hero {
  position: relative;
  padding: 90px 0 70px;
  background: linear-gradient(
    135deg,
    var(--teal-deep) 0%,
    var(--teal-mid) 55%,
    var(--teal-light) 100%
  );
  overflow: hidden;
}

.lst-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.lst-hero::after {
  content: "";
  position: absolute;
  bottom: -120px;
  left: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.lst-hero .container {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.lst-hero .lst-label {
  color: rgba(255, 255, 255, 0.75);
}

.lst-hero .lst-label::before {
  background: rgba(255, 255, 255, 0.6);
}

.lst-hero .lst-title {
  color: white;
  margin-bottom: 18px;
}

.lst-hero-description {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.8;
  max-width: 640px;
  margin-bottom: 30px;
}

/* ── HERO BUTTONS ── */
.lst-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.lst-btn-light {
  background: white;
  color: var(--teal-deep);
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 14.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.lst-btn-light:hover {
  transform: translateY(-2px);
}

.lst-btn-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: white;
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 14.5px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.lst-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ── VIDEO ── */
.lst-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: 36px auto 0;
  padding-top: 56.25%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(26, 92, 107, 0.16);
  border: 1px solid var(--border);
}

.lst-video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── BEFORE AFTER IMAGE ── */
.lst-before-after {
  width: 100%;
  min-height: 320px;
  margin-top: 36px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    var(--teal-pale) 0%,
    var(--teal-ghost) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--teal-light);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border: 2px dashed var(--border);
  gap: 10px;
}

.lst-before-after svg {
  opacity: 0.45;
}

/* ── INDICATION SECTION ── */
.lst-indications-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.lst-indication-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
}

.lst-indication-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14.5px;
  color: var(--text-dark);
  font-weight: 500;
}

.lst-indication-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal-light);
  flex-shrink: 0;
}

.lst-indication-image {
  min-height: 380px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    var(--teal-pale),
    var(--teal-ghost)
  );
  border: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--teal-light);
  gap: 10px;
}

.lst-indication-image svg {
  opacity: 0.45;
}

/* ── TATTOO REMOVAL PANEL ── */
.lst-tattoo-panel {
  background: linear-gradient(
    135deg,
    var(--gold-pale) 0%,
    #fbf6ec 100%
  );
  border-radius: 24px;
  padding: 50px;
}

.lst-tattoo-panel .lst-label {
  color: var(--gold);
}

.lst-tattoo-panel .lst-label::before {
  background: var(--gold);
}

.lst-tattoo-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 30px;
}

.lst-tattoo-step {
  background: white;
  border-radius: 14px;
  padding: 22px 20px;
  border: 1px solid rgba(169, 128, 63, 0.2);
}

.lst-tattoo-number {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 8px;
}

.lst-tattoo-step p {
  font-size: 13.5px;
  color: var(--text-mid);
  line-height: 1.6;
}

/* ── CTA ── */
.lst-cta {
  background: linear-gradient(
    135deg,
    var(--teal-deep) 0%,
    var(--teal-mid) 100%
  );
  text-align: center;
  padding: 70px 0;
}

.lst-cta .lst-title {
  color: white;
}

.lst-cta-description {
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px;
  margin: 0 auto 28px;
}

.lst-cta .lst-label {
  color: rgba(255, 255, 255, 0.6);
  justify-content: center;
}

.lst-cta .lst-label::before {
  background: rgba(255, 255, 255, 0.4);
}

/* ── RESPONSIVE ── */

@media (max-width: 992px) {
  .lst-hero {
    padding: 70px 0 60px;
  }

  .lst-indications-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .lst-tattoo-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .lst-tattoo-panel {
    padding: 40px 30px;
  }
}

@media (max-width: 768px) {
  .lst-hero {
    padding: 60px 0 50px;
  }

  .lst-hero .lst-title {
    font-size: clamp(30px, 8vw, 42px);
  }

  .lst-hero-description {
    font-size: 16px;
  }

  .lst-indication-list {
    grid-template-columns: 1fr;
  }

  .lst-video-wrapper {
    margin-top: 28px;
  }

  .lst-tattoo-panel {
    padding: 32px 24px;
  }

  .lst-tattoo-steps {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .lst-tattoo-step {
    padding: 18px 16px;
  }

  .lst-cta {
    padding: 55px 0;
  }
}

@media (max-width: 576px) {
  .lst-breadcrumb {
    padding: 12px 0;
  }

  .lst-breadcrumb a,
  .lst-breadcrumb span {
    font-size: 12px;
  }

  .lst-hero {
    padding: 50px 0 45px;
  }

  .lst-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lst-btn-light,
  .lst-btn-outline {
    width: 100%;
    text-align: center;
  }

  .lst-title {
    font-size: 30px;
  }

  .lst-text {
    font-size: 15px;
    line-height: 1.75;
  }

  .lst-indication-image {
    min-height: 280px;
  }

  .lst-tattoo-steps {
    grid-template-columns: 1fr;
  }

  .lst-cta .lst-title {
    font-size: 30px;
  }
}

 /* Scal removal treatment page css */

 .hero-buttons .btn-primary,
 .service-content .btn-primary,
 .book-consultation-btn,
 .call-btn {
   position: relative;
   z-index: 1;
   /* Keeping it low ensures it submerges under the header's 9999 index */
 }

 .hero::after {
   content: '';
   position: absolute;
   bottom: -120px;
   right: -80px;
   width: 560px;
   height: 560px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(26, 92, 107, .12) 0%, transparent 70%);
   pointer-events: none;
 }

 .hero-inner {
   display: grid;
   grid-template-columns: 1fr 420px;
   gap: 0;
   align-items: end;
   position: relative;
   z-index: 1;
   min-height: 520px;
 }

 .hero-left {
   padding: 0 48px 80px 0;
 }

 /* Breadcrumb */
 .breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12.5px;
   color: var(--text-light);
   margin-bottom: 24px;
   flex-wrap: wrap;
 }

 .breadcrumb a {
   color: var(--teal-deep);
   font-weight: 500;
 }

 .breadcrumb span {
   color: var(--text-light);
 }

 /* Left Content */
 .hero-left h1 {
   font-family: var(--font-display);
   font-size: clamp(38px, 5vw, 66px);
   font-weight: 600;
   line-height: 1.1;
   color: var(--text-dark);
   margin-bottom: 20px;
 }

 .hero-left h1 em {
   font-style: italic;
   color: var(--teal-deep);
 }

 .hero-left .lead {
   max-width: 520px;
   margin-bottom: 34px;
 }

 .hero-ctas {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
 }

 /* Right Stat Panel */
 .hero-panel {
   background: var(--teal-deep);
   border-radius: 24px 24px 0 0;
   padding: 48px 36px 52px;
   display: flex;
   flex-direction: column;
   gap: 32px;
   align-self: stretch;
   justify-content: flex-end;
   height: 100%;
   box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .15);
 }

 .hero-stat {
   border-top: 1px solid rgba(255, 255, 255, .18);
   padding-top: 24px;
 }

 .hero-stat:first-child {
   border-top: none;
   padding-top: 0;
 }

 .hs-num {
   font-family: var(--font-display);
   font-size: 52px;
   font-weight: 600;
   color: white;
   line-height: 1;
   letter-spacing: -2px;
 }

 .hs-label {
   font-size: 13.5px;
   color: rgba(255, 255, 255, .75);
   margin-top: 6px;
   line-height: 1.3;
 }

 /* Call to Action inside panel */
 .hero-call {
   background: rgba(255, 255, 255, .12);
   border-radius: 16px;
   padding: 20px 24px;
   margin-top: 8px;
 }

 .hero-call p {
   font-size: 12.5px;
   color: rgba(255, 255, 255, .7);
   margin-bottom: 6px;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 500;
 }

 .hero-call a {
   font-family: var(--font-display);
   font-size: 23px;
   font-weight: 600;
   color: white;
   text-decoration: none;
 }

 .btn-hero-outline {
   border: 1.5px solid rgba(255, 255, 255, .5);
   color: white;
   padding: 13px 28px;
   border-radius: 50px;
   font-size: 14.5px;
   font-weight: 600;
   transition: .2s;
 }

 .btn-hero-outline:hover {
   background: rgba(255, 255, 255, .1);
 }

 /* ═══════════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════════ */
 .trust-strip {
   background: white;
   border-bottom: 1px solid var(--border);
   padding: 0;
 }

 .trust-inner {
   display: flex;
   align-items: stretch;
   overflow: hidden;
 }

 .trust-cell {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 24px 32px;
   border-right: 1px solid var(--border);
   font-size: 13.5px;
   color: var(--text-mid);
 }

 .trust-cell:last-child {
   border-right: none;
 }

 .trust-icon {
   width: 40px;
   height: 40px;
   background: var(--teal-ghost);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 18px;
 }

 .trust-cell strong {
   display: block;
   font-size: 14px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 1px;
 }

 /* ═══════════════════════════════════════════
   OVERVIEW  — full-width intro + image mosaic
═══════════════════════════════════════════ */
 .overview {
   padding: 96px 0;
   background: var(--white);
 }

 .overview-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .overview-copy p {
   font-size: 15.5px;
   color: var(--text-mid);
   line-height: 1.85;
   margin-bottom: 18px;
 }

 .overview-copy p strong {
   color: var(--text-dark);
 }

 .overview-copy p:last-child {
   margin-bottom: 0;
 }

 /* image mosaic: two stacked images */
 .mosaic {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 260px 180px;
   gap: 16px;
 }

 .mosaic-main {
   grid-column: 1 / 3;
   border-radius: 18px;
   overflow: hidden;
   background: linear-gradient(135deg, var(--teal-pale), var(--teal-ghost));
   position: relative;
 }

 .mosaic-main img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .mosaic-tag {
   position: absolute;
   bottom: 16px;
   left: 16px;
   background: white;
   border-radius: 10px;
   padding: 10px 16px;
   font-size: 13px;
   font-weight: 600;
   color: var(--teal-deep);
   box-shadow: 0 4px 16px rgba(26, 92, 107, .12);
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .mosaic-card {
   background: var(--teal-deep);
   border-radius: 18px;
   padding: 24px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .mosaic-card .mc-num {
   font-family: var(--font-display);
   font-size: 38px;
   font-weight: 600;
   color: white;
   line-height: 1;
 }

 .mosaic-card .mc-lbl {
   font-size: 12px;
   color: rgba(255, 255, 255, .65);
   margin-top: 4px;
 }

 .mosaic-pale {
   background: var(--teal-ghost);
   border-radius: 18px;
   padding: 24px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   border: 1px solid var(--border);
 }

 .mosaic-pale .mp-icon {
   font-size: 28px;
   margin-bottom: 8px;
 }

 .mosaic-pale .mp-text {
   font-size: 13px;
   font-weight: 600;
   color: var(--teal-deep);
 }

 /* ═══════════════════════════════════════════
   SCAR TYPES  — horizontal scroll cards
═══════════════════════════════════════════ */
 .scar-types {
   padding: 80px 0;
   background: var(--off-white);
 }

 .scar-types-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 40px;
   gap: 24px;
   flex-wrap: wrap;
 }

 .types-track {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
 }

 .type-card {
   background: white;
   border-radius: 18px;
   padding: 28px 24px;
   border: 1px solid var(--border);
   transition: box-shadow .25s, transform .2s;
   position: relative;
   overflow: hidden;
 }

 .type-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: var(--teal-light);
   border-radius: 18px 18px 0 0;
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s;
 }

 .type-card:hover {
   box-shadow: 0 12px 40px rgba(26, 92, 107, .12);
   transform: translateY(-4px);
 }

 .type-card:hover::before {
   transform: scaleX(1);
 }

 .tc-emoji {
   font-size: 32px;
   margin-bottom: 14px;
 }

 .tc-name {
   font-weight: 700;
   font-size: 16px;
   color: var(--text-dark);
   margin-bottom: 8px;
 }

 .tc-desc {
   font-size: 13.5px;
   color: var(--text-mid);
   line-height: 1.65;
 }

 /* ═══════════════════════════════════════════
   PROCESS  — numbered horizontal timeline
═══════════════════════════════════════════ */
 .process {
   padding: 96px 0;
   background: var(--teal-deep);
   overflow: hidden;
   position: relative;
 }

 .process::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   height: 1px;
   background: rgba(255, 255, 255, .12);
   transform: translateY(-50%);
   pointer-events: none;
 }

 .process .eyebrow {
   color: rgba(255, 255, 255, .55);
 }

 .process .eyebrow::before {
   background: rgba(255, 255, 255, .4);
 }

 .process h2.display {
   color: white;
   max-width: 520px;
   margin-bottom: 56px;
 }

 .steps-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0;
   position: relative;
   z-index: 1;
 }

 .step {
   padding: 32px 24px 32px 0;
   border-right: 1px solid rgba(255, 255, 255, .12);
   padding-right: 28px;
 }

 .step:last-child {
   border-right: none;
   padding-right: 0;
 }

 .step-num {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .2);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-size: 20px;
   font-weight: 600;
   color: white;
   margin-bottom: 20px;
 }

 .step-title {
   font-weight: 600;
   font-size: 15px;
   color: white;
   margin-bottom: 8px;
 }

 .step-desc {
   font-size: 13px;
   color: rgba(255, 255, 255, .65);
   line-height: 1.65;
 }

 /* ═══════════════════════════════════════════
   BENEFITS  — alternating feature rows
═══════════════════════════════════════════ */
 .benefits {
   padding: 96px 0;
   background: var(--white);
 }

 .benefit-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
   padding: 56px 0;
   border-bottom: 1px solid var(--border);
 }

 .benefit-row:first-child {
   padding-top: 0;
 }

 .benefit-row:last-child {
   border-bottom: none;
   padding-bottom: 0;
 }

 .benefit-row.flip .benefit-text {
   order: 2;
 }

 .benefit-row.flip .benefit-visual {
   order: 1;
 }

 .benefit-text p {
   font-size: 15.5px;
   color: var(--text-mid);
   line-height: 1.85;
   margin-bottom: 16px;
 }

 .benefit-text p:last-child {
   margin-bottom: 0;
 }

 .benefit-text p strong {
   color: var(--text-dark);
 }

 .benefit-visual {
   border-radius: 20px;
   overflow: hidden;
   background: linear-gradient(135deg, var(--teal-pale), var(--teal-ghost));
   height: 360px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }

 .benefit-visual img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .bv-badge {
   position: absolute;
   bottom: 20px;
   right: 20px;
   background: var(--teal-deep);
   color: white;
   border-radius: 14px;
   padding: 14px 18px;
   box-shadow: 0 8px 24px rgba(26, 92, 107, .3);
   text-align: center;
 }

 .bv-badge strong {
   display: block;
   font-size: 22px;
   font-family: var(--font-display);
   line-height: 1;
 }

 .bv-badge span {
   font-size: 11px;
   opacity: .8;
 }

 .benefit-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 24px;
 }

 .chip {
   background: var(--teal-ghost);
   border: 1px solid var(--border);
   color: var(--teal-deep);
   font-size: 12.5px;
   font-weight: 500;
   padding: 6px 14px;
   border-radius: 30px;
 }

 /* ═══════════════════════════════════════════
   DR PROFILE  — clean two-col credentials
═══════════════════════════════════════════ */
 .doctor {
   padding: 96px 0;
   background: var(--off-white);
 }

 .doctor-grid {
   display: grid;
   grid-template-columns: 380px 1fr;
   gap: 72px;
   align-items: start;
 }

 .doctor-card {
   background: white;
   border-radius: 24px;
   box-shadow: 0 20px 60px rgba(26, 92, 107, .1);
   overflow: hidden;
   position: sticky;
   top: 100px;
 }

 .doctor-card-img {
   height: 300px;
   background: linear-gradient(135deg, var(--teal-pale), var(--teal-ghost));
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .doctor-initial {
   font-family: var(--font-display);
   font-size: 96px;
   font-weight: 600;
   color: var(--teal-light);
   opacity: .4;
 }

 .doctor-card-body {
   padding: 28px;
 }

 .dcb-name {
   font-family: var(--font-display);
   font-size: 24px;
   font-weight: 600;
   color: var(--text-dark);
 }

 .dcb-role {
   font-size: 12px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--teal-light);
   margin: 4px 0 16px;
 }

 .dcb-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 20px;
 }

 .tag {
   background: var(--teal-ghost);
   color: var(--teal-deep);
   font-size: 11.5px;
   font-weight: 500;
   padding: 4px 10px;
   border-radius: 20px;
 }

 .dcb-contact a {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--teal-deep);
   color: white;
   border-radius: 10px;
   padding: 13px 18px;
   font-size: 14px;
   font-weight: 600;
   transition: background .2s;
 }

 .dcb-contact a:hover {
   background: var(--teal-mid);
 }

 .doctor-content p {
   font-size: 15.5px;
   color: var(--text-mid);
   line-height: 1.85;
   margin-bottom: 18px;
 }

 .doctor-content p strong {
   color: var(--text-dark);
 }

 .cred-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-top: 32px;
 }

 .cred-item {
   background: white;
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 20px;
   display: flex;
   align-items: flex-start;
   gap: 14px;
 }

 .ci-icon {
   width: 40px;
   height: 40px;
   background: var(--teal-ghost);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 18px;
 }

 .ci-title {
   font-weight: 600;
   font-size: 13.5px;
   color: var(--text-dark);
   line-height: 1.3;
 }

 .ci-sub {
   font-size: 12px;
   color: var(--text-light);
   margin-top: 3px;
 }

 /* ═══════════════════════════════════════════
   FAQ  — two-column accordion
═══════════════════════════════════════════ */
 .faq {
   padding: 96px 0;
   background: var(--white);
 }

 .faq-cols {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 48px;
 }

 .faq-item {
   background: var(--off-white);
   border: 1px solid var(--border);
   border-radius: 14px;
   overflow: hidden;
 }

 .faq-q {
   padding: 20px 24px;
   font-weight: 600;
   font-size: 14.5px;
   color: var(--text-dark);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
 }

 .faq-q .faq-icon {
   width: 28px;
   height: 28px;
   background: var(--teal-ghost);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--teal-deep);
   font-size: 18px;
   font-weight: 300;
   flex-shrink: 0;
   transition: transform .25s, background .2s;
 }

 .faq-item.open .faq-q .faq-icon {
   transform: rotate(45deg);
   background: var(--teal-deep);
   color: white;
 }

 .faq-a {
   font-size: 14px;
   color: var(--text-mid);
   line-height: 1.75;
   padding: 0 24px 20px;
   display: none;
 }

 .faq-item.open .faq-a {
   display: block;
 }

 /* ─── RESPONSIVE ─── */
 @media (max-width: 1024px) {
   .hero-inner {
     grid-template-columns: 1fr;
   }

   .hero-panel {
     border-radius: 0;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 20px;
     padding: 28px;
   }

   .hero-stat {
     border-top: none;
     border-left: 1px solid rgba(255, 255, 255, .15);
     padding-top: 0;
     padding-left: 20px;
   }

   .hero-stat:first-child {
     border-left: none;
     padding-left: 0;
   }

   .hero-call {
     margin-left: auto;
   }

   .doctor-card {
     position: static;
   }

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

 @media (max-width: 900px) {
   nav {
     display: none;
   }

   .overview-grid,
   .benefit-row,
   .appt-grid {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .benefit-row.flip .benefit-text,
   .benefit-row.flip .benefit-visual {
     order: unset;
   }

   .types-track {
     grid-template-columns: repeat(2, 1fr);
   }

   .steps-row {
     grid-template-columns: 1fr 1fr;
     gap: 24px;
   }

   .step {
     border-right: none;
     padding-right: 0;
     border-bottom: 1px solid rgba(255, 255, 255, .12);
     padding-bottom: 24px;
   }

   .step:last-child {
     border-bottom: none;
   }

   .faq-cols {
     grid-template-columns: 1fr;
   }

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

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

   .hero-left {
     padding: 0 0 40px;
   }
 }

 @media (max-width: 600px) {

   .types-track,
   .steps-row {
     grid-template-columns: 1fr;
   }

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

   .fg-row {
     grid-template-columns: 1fr;
   }

   .trust-inner {
     flex-direction: column;
   }

   .trust-cell {
     border-right: none;
     border-bottom: 1px solid var(--border);
   }

   .mosaic {
     grid-template-columns: 1fr;
     grid-template-rows: auto;
   }

   .mosaic-main {
     grid-column: 1;
     height: 220px;
   }
 }

 /* End */

 /* Chemical peels page css */

 /* BREADCRUMB */
 .breadcrumb {
   background: var(--off-white);
   padding: 14px 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
 }

 .breadcrumb a {
   color: var(--teal-deep);
   font-weight: 600;
   font-size: 14px;
 }

 .breadcrumb span {
   font-size: 14px;
   color: var(--text-light);
 }

 /* SHARED TITLES */
 .section-label {
   font-size: 11px;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--teal-light);
   font-weight: 600;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 8px;
 }


 .section-title {
   font-family: var(--font-display);
   font-size: clamp(30px, 3.5vw, 48px);
   font-weight: 600;
   line-height: 1.15;
   color: var(--text-dark);
   margin-bottom: 16px;
 }

 /* HERO */
 .service-banner {
   padding: 90px 0;
   background: linear-gradient(135deg, #c2d8de 0%, #b6d1d8 100%);
 }

 .banner-grid {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   align-items: center;
   gap: 80px;
 }

 .btn-hero-outline {
   border: 1.5px solid rgba(255, 255, 255, .5);
   color: white;
   padding: 13px 28px;
   border-radius: 50px;
   font-size: 14.5px;
   font-weight: 600;
   transition: .2s;
 }

 .btn-hero-outline:hover {
   background: rgba(255, 255, 255, .1);
 }

 /* VIDEO SECTION */
 .video-wrap {
   width: 100%;
   background: var(--teal-ghost);
   border-radius: 24px;
   overflow: hidden;
   position: relative;
   padding-top: 56.25%;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
 }

 .video-wrap iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
 }

 /* TWO COL */
 .two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 70px;
 }

/*  .img-placeholder {
   background: linear-gradient(135deg, var(--teal-pale), var(--teal-ghost));
   border-radius: 20px;
   border: 2px dashed var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: var(--teal-light);
   font-size: 13px;
 } */

 /* PEEL TYPES GRID */
 .peels-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 50px;
 }

 .peel-card {
   background: white;
   border: 1px solid var(--border);
   border-radius: 20px;
   padding: 30px;
   position: relative;
   overflow: hidden;
   transition: 0.3s;
 }

 .peel-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(26, 92, 107, 0.1);
 }

 .peel-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--gold), var(--teal-deep));
 }

 .peel-card h3 {
   font-family: var(--font-display);
   font-size: 22px;
   color: var(--text-dark);
   margin-bottom: 10px;
 }

 /*  */

 /* =========================================================
   HAIR TREATMENT PAGE
   All classes are unique and prefixed with hair-
========================================================= */


/* =========================================================
   SHARED TYPOGRAPHY
========================================================= */

.hair-section-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hair-section-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
}

.hair-section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.hair-section-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-mid);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.hair-breadcrumb {
  background: var(--off-white);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.hair-breadcrumb a {
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 14px;
}

.hair-breadcrumb span {
  font-size: 14px;
  color: var(--text-light);
}


/* =========================================================
   HERO SECTION
========================================================= */

.hair-hero {
  padding: 90px 0;
  background: linear-gradient(
    135deg,
    #c2d8de 0%,
    #b6d1d8 100%
  );
}

.hair-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 80px;
}

.hair-hero-content .hair-section-label {
  color: var(--teal-deep);
}

.hair-hero-content .hair-section-label::before {
  background: var(--teal-deep);
}

.hair-hero-buttons {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hair-hero-image {
  width: 100%;
}

.hair-image-placeholder {
  width: 100%;
  min-height: 420px;
  border-radius: 25px;
  background:
    linear-gradient(
      135deg,
      var(--teal-pale) 0%,
      var(--teal-ghost) 100%
    );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--teal-light);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  border: 2px dashed var(--border);
  gap: 10px;
  box-shadow:
    0 25px 70px rgba(0, 0, 0, .08);
}

.hair-image-placeholder svg {
  opacity: .45;
}

.hair-image-placeholder span {
  font-size: 11px;
  opacity: .7;
}


/* =========================================================
   CAUSES SECTION
========================================================= */

.hair-causes-section {
  padding: 90px 0;
}

.hair-intro-text {
  max-width: 680px;
}

.hair-causes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.hair-cause-card {
  position: relative;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 26px 30px;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.hair-cause-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 12px 30px rgba(26, 92, 107, .1);
}

.hair-cause-number {
  position: absolute;
  top: -18px;
  left: 26px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-deep);
  color: white;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.hair-cause-card h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}


/* =========================================================
   STATS
========================================================= */

.hair-stats-section {
  background: var(--teal-deep);
  color: white;
  padding: 80px 0;
}

.hair-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.hair-stat-number {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: white;
}

.hair-stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
  margin-top: 8px;
}


/* =========================================================
   TREATMENT METHODS
========================================================= */

.hair-methods-section {
  background: var(--off-white);
  padding: 90px 0;
}

.hair-method-intro {
  max-width: 700px;
}

.hair-treatment-methods {
  margin-top: 50px;
}

.hair-method-card {
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 36px;
  background: white;
}

.hair-method-top {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
}

.hair-method-image {
  min-height: 280px;
}

.hair-method-image .hair-image-placeholder {
  height: 100%;
  min-height: 280px;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.hair-method-content {
  padding: 40px;
}

.hair-method-tag {
  display: inline-block;
  background: var(--teal-ghost);
  color: var(--teal-deep);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 50px;
  margin-bottom: 14px;
}

.hair-method-content h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
}


/* =========================================================
   AFTERCARE
========================================================= */

.hair-aftercare {
  background: var(--off-white);
  border-top: 1px solid var(--border);
  padding: 26px 40px;
}

.hair-aftercare h4 {
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 600;
  margin-bottom: 14px;
}

.hair-aftercare ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hair-aftercare li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
}

.hair-aftercare li::before {
  content: '✓';
  color: var(--teal-deep);
  font-weight: 700;
  flex-shrink: 0;
}


/* =========================================================
   BENEFITS
========================================================= */

.hair-benefits-section {
  padding: 90px 0;
}

.hair-benefits-intro {
  max-width: 680px;
}

.hair-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 50px;
}

.hair-benefit-card {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.hair-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 28px rgba(26, 92, 107, .1);
}

.hair-benefit-card h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}


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

@media (max-width: 992px) {

  .hair-hero-grid,
  .hair-method-top,
  .appt-inner {
    grid-template-columns: 1fr;
  }

  .hair-hero-grid {
    gap: 45px;
  }

  .hair-causes-grid,
  .hair-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hair-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 45px;
  }

  .hair-method-image {
    min-height: 260px;
  }

  .hair-method-image .hair-image-placeholder {
    min-height: 260px;
  }

  .hair-method-content {
    padding: 32px;
  }

}


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

@media (max-width: 600px) {

  .hair-hero {
    padding: 60px 0;
  }

  .hair-causes-section,
  .hair-methods-section,
  .hair-benefits-section {
    padding: 60px 0;
  }

  .hair-causes-grid,
  .hair-benefits-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .hair-stats-section {
    padding: 60px 0;
  }

  .hair-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 15px;
  }

  .hair-stat-number {
    font-size: 38px;
  }

  .hair-stat-label {
    font-size: 12px;
  }

  .hair-image-placeholder {
    min-height: 300px;
  }

  .hair-method-content {
    padding: 26px;
  }

  .hair-method-content h3 {
    font-size: 25px;
  }

  .hair-aftercare {
    padding: 26px;
  }

  .hair-aftercare ul {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hair-hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hair-hero-buttons a {
    text-align: center;
    width: 100%;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .hair-stats-grid {
    grid-template-columns: 1fr;
  }

  .hair-stat-number {
    font-size: 42px;
  }

}

 /* Pigmentation page css */

 /* BREADCRUMB */
 .breadcrumb {
   background: var(--off-white);
   padding: 14px 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
 }

 .breadcrumb a {
   color: var(--teal-deep);
   font-weight: 600;
   font-size: 14px;
 }

 .breadcrumb span {
   font-size: 14px;
   color: var(--text-light);
 }

 /* SECTION HEADINGS — matches homepage typography (was missing, causing font/style mismatch) */
 .section-label {
   font-size: 11px;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--teal-light);
   font-weight: 600;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px;
 }


 .section-title {
   font-family: var(--font-display);
   font-size: clamp(30px, 3.5vw, 48px);
   font-weight: 600;
   line-height: 1.2;
   color: var(--text-dark);
   margin-bottom: 16px;
   text-decoration: none !important;
 }

 .section-text {
   font-size: 15.5px;
   color: var(--text-mid);
   line-height: 1.75;
   margin-bottom: 14px;
 }

 /* HERO */
 .service-banner {
   padding: 90px 0;
   background: linear-gradient(135deg, #c2d8de 0%, #b6d1d8 100%);
 }

 .banner-grid {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   align-items: center;
   gap: 80px;
 }

 .banner-content .section-label::before {
   background: var(--teal-deep);
 }

 .banner-content .section-label {
   color: var(--teal-deep);
 }

 .hero-buttons {
   display: flex;
   gap: 15px;
   margin-top: 28px;
   flex-wrap: wrap;
 }

 .btn-hero-outline {
   border: 1.5px solid rgba(255, 255, 255, .5);
   color: white;
   padding: 13px 28px;
   border-radius: 50px;
   font-size: 14.5px;
   font-weight: 600;
   transition: .2s;
 }

 .btn-hero-outline:hover {
   background: rgba(255, 255, 255, .1);
 }

 /* IMAGE PLACEHOLDER */


 .img-placeholder svg {
   opacity: .45;
 }

 /* TWO-COL */
 .two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 70px;
 }

 .two-col.reverse {
   direction: rtl;
 }

 .two-col.reverse>* {
   direction: ltr;
 }

 /* TYPES GRID */
 .types-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   margin-top: 50px;
 }

 .type-card {
   border: 1px solid var(--border);
   border-radius: 20px;
   overflow: hidden;
   transition: box-shadow .25s, transform .2s;
 }

 .type-card:hover {
   box-shadow: 0 12px 40px rgba(26, 92, 107, .12);
   transform: translateY(-4px);
 }

 .type-card-img .img-placeholder {
   height: 180px;
   border-radius: 0;
   border: none;
   border-bottom: 1px solid var(--border);
 }

 .type-card-body {
   padding: 26px;
 }

 .type-card-body h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 10px;
 }

 .learn-more {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--teal-deep);
   font-weight: 600;
   font-size: 13.5px;
   margin-top: 14px;
 }

 /* BENEFITS */
 .benefits-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   margin-top: 50px;
 }

 .benefit-card {
   padding: 32px;
   border: 1px solid var(--border);
   border-radius: 20px;
   background: white;
   transition: box-shadow .2s;
 }

 .benefit-card:hover {
   box-shadow: 0 8px 28px rgba(26, 92, 107, .1);
 }

 .benefit-icon {
   width: 52px;
   height: 52px;
   background: var(--teal-ghost);
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   margin-bottom: 18px;
 }

 .benefit-card h3 {
   font-family: var(--font-display);
   font-size: 21px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 10px;
 }

 /* CANDIDATE LIST */
 .candidate-list {
   padding-left: 20px;
 }

 .candidate-list li {
   margin-bottom: 18px;
   font-size: 15.5px;
   color: var(--text-mid);
   line-height: 1.6;
   list-style: disc;
 }

 /* STATS */
 .stats-section {
   background: var(--teal-deep);
   color: white;
   padding: 80px 0;
 }

 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
   text-align: center;
 }

 .stat-num {
   font-family: var(--font-display);
   font-size: 56px;
   font-weight: 600;
   color: white;
   line-height: 1;
 }

 .stat-label {
   font-size: 14px;
   color: rgba(255, 255, 255, .75);
   margin-top: 8px;
 }

 /* STEPS */
 .steps-wrap {
   max-width: 900px;
   margin-top: 60px;
 }

 .step {
   display: flex;
   gap: 28px;
   margin-bottom: 48px;
 }

 .step-num {
   font-family: var(--font-display);
   font-size: 44px;
   font-weight: 700;
   color: var(--teal-deep);
   line-height: 1;
   flex-shrink: 0;
   width: 60px;
 }

 .step h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 8px;
 }

 /* FAQ */
 .faq-item {
   padding: 28px;
   border: 1px solid var(--border);
   border-radius: 16px;
   margin-bottom: 16px;
 }

 .faq-item h3 {
   font-family: var(--font-display);
   font-size: 21px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 10px;
 }

 /*  */

 /* =====================================================
   HAIR LOSS PAGE
   UNIQUE CLASS PREFIX: hairloss-
===================================================== */


/* =====================================================
   BREADCRUMB
===================================================== */

.hairloss-breadcrumb {
  background: var(--off-white);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.hairloss-breadcrumb a {
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 14px;
}

.hairloss-breadcrumb span {
  color: var(--text-light);
  font-size: 14px;
}


/* =====================================================
   SHARED TYPOGRAPHY
===================================================== */

.hairloss-section-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hairloss-section-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
}

.hairloss-section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.hairloss-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-mid);
  margin-bottom: 18px;
}

.hairloss-max-width {
  max-width: 800px;
}

.hairloss-bottom-space {
  margin-bottom: 40px;
}


/* =====================================================
   HERO
===================================================== */

.hairloss-hero {
  padding: 90px 0;
  background:
    linear-gradient(
      135deg,
      #c2d8de 0%,
      #b6d1d8 100%
    );
}

.hairloss-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 80px;
}

.hairloss-hero-content
.hairloss-section-label {
  color: var(--teal-deep);
}

.hairloss-hero-content
.hairloss-section-label::before {
  background: var(--teal-deep);
}

.hairloss-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

.hairloss-hero-image {
  width: 100%;
}

.hairloss-image-placeholder {
  width: 100%;
  height: 400px;
  border-radius: 25px;
  background:
    linear-gradient(
      135deg,
      var(--teal-pale),
      var(--teal-ghost)
    );
  border: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--teal-light);
  font-size: 13px;
  box-shadow:
    0 25px 70px rgba(0, 0, 0, .08);
}

.hairloss-image-placeholder svg {
  opacity: .5;
}


/* =====================================================
   GENERAL SECTIONS
===================================================== */

.hairloss-section {
  padding: 90px 0;
}

.hairloss-section-soft {
  background: var(--teal-ghost);
}


/* =====================================================
   TWO COLUMN LAYOUT
===================================================== */

.hairloss-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.hairloss-content-block
.hairloss-text:last-child {
  margin-bottom: 0;
}

.hairloss-content-image
.hairloss-image-placeholder,
.hairloss-doctor-image
.hairloss-image-placeholder {
  height: 350px;
}


/* =====================================================
   CAUSES
===================================================== */

.hairloss-causes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.hairloss-cause-card {
  position: relative;
  padding: 30px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: .3s;
}

.hairloss-cause-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      var(--teal-deep),
      var(--gold)
    );
}

.hairloss-cause-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 10px 30px rgba(26, 92, 107, .1);
}

.hairloss-cause-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.hairloss-cause-card p {
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.7;
}


/* =====================================================
   SYMPTOMS
===================================================== */

.hairloss-symptoms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.hairloss-symptom-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-mid);
  font-size: 15px;
}

.hairloss-symptom-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--teal-ghost);
  color: var(--teal-deep);
  font-weight: 700;
}


/* =====================================================
   BENEFITS
===================================================== */

.hairloss-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.hairloss-benefit-card {
  position: relative;
  padding: 30px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: .3s;
}

.hairloss-benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      var(--teal-deep),
      var(--gold)
    );
}

.hairloss-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 10px 30px rgba(26, 92, 107, .1);
}

.hairloss-benefit-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.hairloss-benefit-card p {
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.7;
}


/* =====================================================
   EXPERTISE
===================================================== */

.hairloss-expertise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.hairloss-expertise-card {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--off-white);
}

.hairloss-expertise-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text-dark);
  margin-bottom: 16px;
}


/* =====================================================
   APPOINTMENT
===================================================== */

.hairloss-appointment {
  padding: 90px 0;
  background:
    linear-gradient(
      135deg,
      var(--teal-deep) 0%,
      var(--teal-mid) 100%
    );
}

.hairloss-appointment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.hairloss-appointment-content
.hairloss-section-title {
  color: white;
}

.hairloss-appointment-content
.hairloss-section-label {
  color: rgba(255, 255, 255, .65);
}

.hairloss-appointment-content
.hairloss-section-label::before {
  background: rgba(255, 255, 255, .45);
}

.hairloss-appointment-description {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 28px;
}

.hairloss-contact-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hairloss-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
}

.hairloss-contact-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
}


/* =====================================================
   FORM
===================================================== */

.hairloss-form-card {
  padding: 36px;
  background: white;
  border-radius: 20px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, .15);
}

.hairloss-form-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.hairloss-form-subtitle {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 24px;
}

.hairloss-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.hairloss-form-group {
  margin-bottom: 16px;
}

.hairloss-form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 6px;
  letter-spacing: .3px;
}

.hairloss-form-group input,
.hairloss-form-group select,
.hairloss-form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--off-white);
  outline: none;
  transition: .2s;
}

.hairloss-form-group input:focus,
.hairloss-form-group select:focus,
.hairloss-form-group textarea:focus {
  border-color: var(--teal-light);
  background: white;
}

.hairloss-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.hairloss-submit-button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: var(--teal-deep);
  color: white;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  transition: .2s;
}

.hairloss-submit-button:hover {
  background: var(--teal-mid);
}


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

@media (max-width: 992px) {

  .hairloss-hero-grid,
  .hairloss-two-column,
  .hairloss-appointment-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hairloss-causes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hairloss-expertise-grid {
    grid-template-columns: 1fr;
  }

  .hairloss-hero-image {
    order: -1;
  }

}


@media (max-width: 768px) {

  .hairloss-section,
  .hairloss-hero,
  .hairloss-appointment {
    padding: 65px 0;
  }

  .hairloss-causes-grid,
  .hairloss-benefits-grid,
  .hairloss-symptoms-grid {
    grid-template-columns: 1fr;
  }

  .hairloss-form-row {
    grid-template-columns: 1fr;
  }

  .hairloss-image-placeholder {
    height: 300px;
  }

}


@media (max-width: 600px) {

  .hairloss-hero-buttons {
    flex-direction: column;

    align-items: stretch;
  }

  .hairloss-hero-buttons .btn-primary {
    text-align: center;
  }

  .hairloss-form-card {
    padding: 26px;
  }

  .hairloss-contact-item {
    align-items: flex-start;
  }

}

 /* =========================================================
   HAIR FALL PAGE
   UNIQUE CLASS NAMES
========================================================= */


/* =========================================================
   BREADCRUMB
========================================================= */

.hairfall-breadcrumb {
  background: var(--off-white);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.hairfall-breadcrumb a {
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 14px;
}

.hairfall-breadcrumb span {
  font-size: 14px;
  color: var(--text-light);
}


/* =========================================================
   SHARED SECTION LABEL
========================================================= */

.hairfall-section-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hairfall-section-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
}


/* =========================================================
   SHARED SECTION TITLE
========================================================= */

.hairfall-section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.hairfall-section-description {
  max-width: 800px;
  color: var(--text-mid);
  line-height: 1.8;

}


/* =========================================================
   HERO
========================================================= */

.hairfall-hero {
  padding: 90px 0;
  background:
    linear-gradient(
      135deg,
      #c2d8de 0%,
      #b6d1d8 100%
    );
}

.hairfall-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 80px;
}

.hairfall-hero-content {
  max-width: 650px;
}

.hairfall-hero-text {
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.8;
  max-width: 650px;
}

.hairfall-hero-buttons {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.hairfall-hero-image-wrap {
  width: 100%;
}

.hairfall-image-placeholder {
  width: 100%;
  min-height: 350px;
  background:
    linear-gradient(
      135deg,
      var(--teal-pale),
      var(--teal-ghost)
    );
  border-radius: 24px;
  border: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--teal-light);
  font-size: 13px;
}


/* =========================================================
   CAUSES SECTION
========================================================= */

.hairfall-causes-section {
  background: white;
}

.hairfall-causes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.hairfall-cause-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}

.hairfall-cause-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      var(--teal-deep),
      var(--gold)
    );
}

.hairfall-cause-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 10px 30px
    rgba(26, 92, 107, 0.1);
}

.hairfall-cause-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.hairfall-cause-card p {
  color: var(--text-mid);
  line-height: 1.8;
  font-size: 15px;
}


/* =========================================================
   TREATMENT SECTION
========================================================= */

.hairfall-treatment-section {
  background: var(--teal-ghost);
}

.hairfall-treatment-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

  margin-top: 50px;

}

.hairfall-treatment-card {

  background: white;

  border: 1px solid var(--border);

  border-radius: 24px;

  padding: 40px;

  transition: 0.3s;

}

.hairfall-treatment-card:hover {

  transform: translateY(-5px);

  box-shadow:

    0 15px 50px

    rgba(26, 92, 107, 0.12);

}

.hairfall-treatment-tag {

  display: inline-block;

  background: var(--teal-ghost);

  color: var(--teal-deep);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1px;

  padding: 6px 12px;

  border-radius: 30px;

  margin-bottom: 18px;

}

.hairfall-treatment-card h3 {

  font-family: var(--font-display);

  font-size: 28px;

  color: var(--teal-deep);

  margin-bottom: 16px;

}

.hairfall-treatment-card p {

  color: var(--text-mid);

  font-size: 15px;

  line-height: 1.8;

  margin-bottom: 16px;

}

.hairfall-aftercare {

  border-top: 1px solid var(--border);

  margin-top: 24px;

  padding-top: 22px;

}

.hairfall-aftercare h4 {

  font-size: 16px;

  font-weight: 600;

  color: var(--text-dark);

  margin-bottom: 14px;

}

.hairfall-aftercare ul {

  margin: 0;

  padding: 0;

  list-style: none;

}

.hairfall-aftercare li {

  position: relative;

  padding-left: 24px;

  margin-bottom: 10px;

  color: var(--text-mid);

  font-size: 14px;

  line-height: 1.6;

}

.hairfall-aftercare li::before {

  content: '✓';

  position: absolute;

  left: 0;

  top: 0;

  color: var(--teal-deep);

  font-weight: 700;

}


/* =========================================================
   DOCTOR SECTION
========================================================= */

.hairfall-doctor-section {

  background: white;

}

.hairfall-two-col {

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 70px;

}

.hairfall-doctor-content p {

  color: var(--text-mid);

  font-size: 15px;

  line-height: 1.8;

  margin-bottom: 18px;

}

.hairfall-doctor-image {

  width: 100%;

}


/* =========================================================
   APPOINTMENT SECTION
========================================================= */

.hairfall-appointment {

  background:

    linear-gradient(

      135deg,

      var(--teal-deep) 0%,

      var(--teal-mid) 100%

    );

}

.hairfall-appt-inner {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

}

.hairfall-appt-label {

  font-size: 11px;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: rgba(255, 255, 255, .65);

  font-weight: 600;

  display: block;

  margin-bottom: 12px;

}

.hairfall-appt-title {

  font-family: var(--font-display);

  font-size: clamp(30px, 3.5vw, 48px);

  font-weight: 600;

  line-height: 1.15;

  color: white;

  margin-bottom: 18px;

}

.hairfall-appt-description {

  font-size: 15px;

  color: rgba(255, 255, 255, .8);

  line-height: 1.7;

  margin-bottom: 28px;

}

.hairfall-appt-info {

  display: flex;

  flex-direction: column;

  gap: 14px;

}

.hairfall-appt-info-item {

  display: flex;

  align-items: center;

  gap: 12px;

  color: rgba(255, 255, 255, .9);

  font-size: 14px;

}

.hairfall-appt-info-icon {

  width: 36px;

  height: 36px;

  background: rgba(255, 255, 255, .12);

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}


/* =========================================================
   APPOINTMENT FORM
========================================================= */

.hairfall-appt-form-card {

  background: white;

  border-radius: 20px;

  padding: 36px;

  box-shadow:

    0 20px 60px

    rgba(0, 0, 0, .15);

}

.hairfall-form-title {

  font-family: var(--font-display);

  font-size: 24px;

  font-weight: 600;

  color: var(--text-dark);

  margin-bottom: 6px;

}

.hairfall-form-subtitle {

  font-size: 13px;

  color: var(--text-light);

  margin-bottom: 24px;

}

.hairfall-form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}

.hairfall-form-group {

  margin-bottom: 16px;

}

.hairfall-form-group label {

  display: block;

  font-size: 12.5px;

  font-weight: 600;

  color: var(--text-mid);

  margin-bottom: 6px;

  letter-spacing: .3px;

}

.hairfall-form-group input,

.hairfall-form-group select,

.hairfall-form-group textarea {

  width: 100%;

  padding: 11px 14px;

  border: 1.5px solid var(--border);

  border-radius: 8px;

  font-family: var(--font-body);

  font-size: 14px;

  color: var(--text-dark);

  background: var(--off-white);

  transition: border-color .2s;

  outline: none;

}

.hairfall-form-group input:focus,

.hairfall-form-group select:focus,

.hairfall-form-group textarea:focus {

  border-color: var(--teal-light);

  background: white;

}

.hairfall-form-group textarea {

  resize: vertical;

  min-height: 80px;

}

.hairfall-submit-button {

  width: 100%;

  padding: 14px;

  background: var(--teal-deep);

  color: white;

  border: none;

  border-radius: 10px;

  font-family: var(--font-body);

  font-size: 15px;

  font-weight: 600;

  cursor: pointer;

  transition: background .2s;

  letter-spacing: .3px;

}

.hairfall-submit-button:hover {

  background: var(--teal-mid);

}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.hairfall-floating-whatsapp {

  position: fixed;

  bottom: 28px;

  right: 28px;

  z-index: 200;

  background: #25d366;

  color: white;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 26px;

  text-decoration: none;

  box-shadow:

    0 8px 24px

    rgba(37, 211, 102, .4);

  transition: transform .2s;

}

.hairfall-floating-whatsapp:hover {

  transform: scale(1.1);

}


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

@media (max-width: 992px) {

  .hairfall-hero-grid,

  .hairfall-two-col,

  .hairfall-treatment-grid,

  .hairfall-appt-inner {

    grid-template-columns: 1fr;

    gap: 40px;

  }

  .hairfall-causes-grid {

    grid-template-columns: 1fr 1fr;

  }

  .hairfall-hero {

    padding: 70px 0;

  }

}


@media (max-width: 600px) {

  .hairfall-causes-grid {

    grid-template-columns: 1fr;

  }

  .hairfall-form-row {

    grid-template-columns: 1fr;

  }

  .hairfall-treatment-card,

  .hairfall-appt-form-card {

    padding: 26px;

  }

  .hairfall-hero-buttons {

    flex-direction: column;

    align-items: stretch;

  }

  .hairfall-hero-buttons a {

    text-align: center;

  }

  .hairfall-floating-whatsapp {

    width: 50px;

    height: 50px;

    right: 18px;

    bottom: 18px;

  }

}


 /*  */

 /* =========================================================
   ANTI-AGING PAGE
   UNIQUE PREFIX: aa-
========================================================= */

.aa-container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.aa-section {
  padding: 90px 0;
}

.aa-section-light {
  background: var(--off-white);
}

/* BREADCRUMB */

.aa-breadcrumb {
  background: var(--off-white);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.aa-breadcrumb a {
  color: var(--teal-deep);
  font-size: 14px;
  font-weight: 600;
}

.aa-breadcrumb span {
  color: var(--text-light);
  font-size: 14px;
}

/* SHARED TEXT */

.aa-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--teal-light);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.aa-section-label::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
}

.aa-section-title {
  margin-bottom: 16px;
  color: var(--text-dark);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.aa-hero .aa-section-title {
  font-size: clamp(34px, 4vw, 54px);
}

.aa-section-text {
  margin-bottom: 20px;
  color: var(--text-mid);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
}

.aa-max-width {
  max-width: 700px;
}

/* HERO */

.aa-hero {
  padding: 90px 0;
  background: linear-gradient(
    135deg,
    #c2d8de 0%,
    #b6d1d8 100%
  );
}

.aa-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 80px;
}

.aa-hero-content .aa-section-label {
  color: var(--teal-deep);
}

.aa-hero-content .aa-section-label::before {
  background: var(--teal-deep);
}

.aa-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 28px;
}

.aa-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 50px;
  background: var(--teal-deep);
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
}

.aa-btn-primary:hover {
  background: var(--teal-mid);
  color: white;
  transform: translateY(-2px);
}

/* IMAGE PLACEHOLDER */

.aa-image-placeholder {
  width: 100%;
  height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed var(--border);
  border-radius: 25px;
  background: linear-gradient(
    135deg,
    var(--teal-pale),
    var(--teal-ghost)
  );
  color: var(--teal-light);
  font-size: 13px;
  text-align: center;
}

.aa-image-placeholder span {
  font-size: 11px;
  opacity: .7;
}

.aa-hero-image-wrap .aa-image-placeholder {
  box-shadow: 0 25px 70px rgba(0, 0, 0, .08);
}

/* TWO COLUMN */

.aa-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.aa-column-image .aa-image-placeholder {
  height: 420px;
}

/* CONCERNS */

.aa-concerns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.aa-concern-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  transition: all .25s ease;
}

.aa-concern-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--teal-deep),
    var(--gold)
  );
}

.aa-concern-card:hover {
  box-shadow: 0 12px 40px rgba(26, 92, 107, .12);
  transform: translateY(-4px);
}

.aa-concern-card h3 {
  margin-bottom: 8px;
  color: var(--text-dark);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.aa-concern-card p {
  color: var(--text-mid);
  font-size: 14.5px;
  line-height: 1.7;
}

/* STATS */

.aa-stats-section {
  padding: 80px 0;
  background: var(--teal-deep);
  color: white;
}

.aa-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.aa-stat-number {
  color: white;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
}

.aa-stat-label {
  margin-top: 8px;
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
}

/* TREATMENTS */

.aa-treatments-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 50px;
}

.aa-treatment-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  transition: all .25s ease;
}

.aa-treatment-card:hover {
  box-shadow: 0 12px 40px rgba(26, 92, 107, .12);
  transform: translateY(-4px);
}

.aa-treatment-image .aa-image-placeholder {
  height: 200px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.aa-treatment-body {
  padding: 28px;
}

.aa-treatment-body h3 {
  margin-bottom: 10px;
  color: var(--text-dark);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
}

.aa-treatment-body p {
  color: var(--text-mid);
  font-size: 14.5px;
  line-height: 1.75;
}

.aa-treatment-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--gold-pale);
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* BENEFITS */

.aa-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 50px;
}

.aa-benefit-card {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  transition: box-shadow .2s ease;
}

.aa-benefit-card:hover {
  box-shadow: 0 8px 28px rgba(26, 92, 107, .1);
}

.aa-benefit-card h3 {
  margin-bottom: 10px;
  color: var(--text-dark);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}

.aa-benefit-card p {
  color: var(--text-mid);
  font-size: 14.5px;
  line-height: 1.75;
}

/* STEPS */

.aa-steps-wrap {
  max-width: 900px;
  margin-top: 60px;
}

.aa-step {
  display: flex;
  gap: 28px;
  margin-bottom: 48px;
}

.aa-step-number {
  width: 60px;
  flex-shrink: 0;
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}

.aa-step h3 {
  margin-bottom: 8px;
  color: var(--text-dark);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.aa-step p {
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.85;
}

/* CANDIDATES */

.aa-candidate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 50px;
}

.aa-candidate-list {
  padding-left: 20px;
}

.aa-candidate-list li {
  margin-bottom: 18px;
  color: var(--text-mid);
  font-size: 15.5px;
  line-height: 1.6;
  list-style: disc;
}

/* FAQ */

.aa-faq-wrap {
  max-width: 1000px;
  margin-top: 50px;
}

.aa-faq-item {
  margin-bottom: 16px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.aa-faq-item h3 {
  margin-bottom: 10px;
  color: var(--text-dark);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}

.aa-faq-item p {
  margin: 0;
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.8;
}

/* APPOINTMENT */

.aa-appointment {
  padding: 90px 0;
  background: linear-gradient(
    135deg,
    var(--teal-deep) 0%,
    var(--teal-mid) 100%
  );
}

.aa-appointment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.aa-appointment-left .aa-section-label {
  color: rgba(255, 255, 255, .65);
}

.aa-appointment-left .aa-section-label::before {
  background: rgba(255, 255, 255, .4);
}

.aa-appointment-title {
  margin-bottom: 18px;
  color: white;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.15;
}

.aa-appointment-description {
  margin-bottom: 28px;
  color: rgba(255, 255, 255, .8);
  font-size: 15px;
  line-height: 1.7;
}

.aa-appointment-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aa-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
}

.aa-info-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
}

/* FORM */

.aa-form-card {
  padding: 36px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}

.aa-form-card h3 {
  margin-bottom: 6px;
  color: var(--text-dark);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
}

.aa-form-subtitle {
  margin-bottom: 24px;
  color: var(--text-light);
  font-size: 13px;
}

.aa-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.aa-form-group {
  margin-bottom: 16px;
}

.aa-form-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-mid);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3px;
}

.aa-form-group input,
.aa-form-group select,
.aa-form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  outline: none;
  background: var(--off-white);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color .2s ease;
}

.aa-form-group input:focus,
.aa-form-group select:focus,
.aa-form-group textarea:focus {
  border-color: var(--teal-light);
  background: white;
}

.aa-form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.aa-submit-button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: var(--teal-deep);
  color: white;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: background .2s ease;
}

.aa-submit-button:hover {
  background: var(--teal-mid);
}

/* RESPONSIVE */

@media (max-width: 992px) {

  .aa-hero-grid,
  .aa-two-column,
  .aa-concerns-grid,
  .aa-treatments-grid,
  .aa-benefits-grid,
  .aa-appointment-grid {
    grid-template-columns: 1fr;
  }

  .aa-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .aa-hero-grid {
    gap: 50px;
  }

  .aa-two-column {
    gap: 40px;
  }
}

@media (max-width: 768px) {

  .aa-section,
  .aa-hero,
  .aa-appointment {
    padding: 60px 0;
  }

  .aa-container {
    width: min(100% - 32px, 1200px);
  }

  .aa-candidate-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .aa-form-row {
    grid-template-columns: 1fr;
  }

  .aa-step {
    gap: 18px;
  }

  .aa-step-number {
    width: 45px;
    font-size: 34px;
  }
}

@media (max-width: 576px) {

  .aa-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px 15px;
  }

  .aa-stat-number {
    font-size: 40px;
  }

  .aa-stat-label {
    font-size: 12px;
  }

  .aa-hero-buttons {
    flex-direction: column;
  }

  .aa-btn-primary {
    width: 100%;
  }

  .aa-form-card {
    padding: 24px;
  }

  .aa-image-placeholder {
    height: 320px;
  }
}

/* =========================================================
   SKIN TIGHTENING PAGE
   ALL CLASSES PREFIXED WITH st-
========================================================= */


/* =========================
   GLOBAL PAGE RESET
========================= */

.st-page,
.st-page * {
    box-sizing: border-box;
}

.st-page {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}

.st-page img {
    max-width: 100%;
    display: block;
}

.st-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}


/* =========================
   TYPOGRAPHY
========================= */

.st-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;

    color: var(--teal-light, #4e9aa5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1.4;
    text-transform: uppercase;
}

.st-eyebrow::before {
    content: "";
    width: 20px;
    height: 2px;
    flex: 0 0 20px;

    background: currentColor;
    border-radius: 4px;
}

.st-display-heading {
    margin: 0 0 18px;

    color: var(--text-dark, #17343b);
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 600;
    line-height: 1.15;
}


/* =========================
   BUTTONS
========================= */

.st-btn {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 20px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.st-btn:hover {
    transform: translateY(-2px);
}

.st-btn-primary {
    background: var(--teal-deep, #1a5c6b);
    color: #ffffff;
}

.st-btn-primary:hover {
    background: #124a57;
    color: #ffffff;
}

.st-outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 22px;

    border: 2px solid var(--teal-deep, #1a5c6b);
    border-radius: 8px;

    color: var(--teal-deep, #1a5c6b);

    font-size: 13px;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.25s ease;
}

.st-outline-button:hover {
    background: var(--teal-deep, #1a5c6b);
    color: #ffffff;
}


/* =========================================================
   HERO
========================================================= */

.st-hero {
    min-height: 88vh;

    display: grid;
    grid-template-columns: 55% 45%;

    position: relative;
}

.st-hero-content-wrap {
    position: relative;

    display: flex;
    align-items: center;

    padding: 80px 0;

    background:
        linear-gradient(
            145deg,
            #e4f1f4 0%,
            #cce5ea 60%,
            #b8dce3 100%
        );
}

.st-hero-content {
    max-width: 620px;
    margin-left: auto;
    padding-right: 50px;
}

.st-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin-bottom: 26px;

    color: #6b858b;
    font-size: 12px;
}

.st-breadcrumb a {
    color: var(--teal-deep, #1a5c6b);
    font-weight: 600;
    text-decoration: none;
}

.st-hero h1 {
    margin: 0 0 24px;

    color: var(--text-dark, #17343b);

    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 600;
    line-height: 1.05;
}

.st-hero h1 em {
    color: var(--teal-deep, #1a5c6b);
    font-style: italic;
}

.st-lead {
    max-width: 510px;
    margin: 0 0 34px;

    color: #536c72;

    font-size: 16px;
    line-height: 1.75;
}

.st-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* HERO IMAGE */

.st-hero-image-panel {
    position: relative;
    min-height: 500px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: var(--teal-deep, #1a5c6b);
}

.st-hero-image-panel img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.35;

    filter: grayscale(25%);
}

.st-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(15, 64, 75, 0.95),
            rgba(26, 92, 107, 0.15)
        );
}

.st-hero-stats {
    position: relative;
    z-index: 2;

    width: 100%;
    padding: 48px 40px;
}

.st-stat {
    padding-left: 20px;
    margin-bottom: 22px;

    border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.st-stat:last-child {
    margin-bottom: 0;
}

.st-stat-number {
    color: #ffffff;

    font-family: var(--font-display, Georgia, serif);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
}

.st-stat-label {
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 12px;
}


/* =========================================================
   WHY SECTION
========================================================= */

.st-why-section {
    padding: 96px 0;

    background: #ffffff;
}

.st-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;

    gap: 20px;

    margin-top: 48px;
}

.st-why-intro {
    grid-column: 1 / 3;

    padding: 40px;

    border-radius: 24px;

    background: var(--teal-deep, #1a5c6b);
}

.st-why-intro h3 {
    margin: 0 0 16px;

    color: #ffffff;

    font-family: var(--font-display, Georgia, serif);
    font-size: 28px;
}

.st-why-intro p {
    margin: 0 0 14px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 15px;
    line-height: 1.8;
}

.st-why-intro p:last-child {
    margin-bottom: 0;
}

.st-why-image {
    grid-column: 3;
    grid-row: 1 / 3;

    position: relative;

    min-height: 380px;

    overflow: hidden;

    border-radius: 24px;

    background: #d9edf0;
}

.st-why-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.st-image-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;

    padding: 12px 18px;

    border-radius: 12px;

    background: var(--teal-deep, #1a5c6b);
    color: #ffffff;
}

.st-image-badge strong {
    display: block;

    font-size: 15px;
}

.st-image-badge span {
    display: block;

    margin-top: 3px;

    font-size: 12px;
    opacity: 0.75;
}

.st-cause-card {
    padding: 28px;

    border: 1px solid #dce8ea;
    border-radius: 20px;

    background: #f7fafb;
}

.st-cause-title {
    margin-bottom: 8px;

    color: var(--text-dark, #17343b);

    font-size: 15px;
    font-weight: 700;
}

.st-cause-description {
    color: #5b7075;

    font-size: 13.5px;
    line-height: 1.65;
}


/* =========================================================
   TREATMENTS
========================================================= */

.st-treatment-section {
    padding: 96px 0;

    background: #f7fafb;
}

.st-treatment-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 48px;
}

.st-treatment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.st-treatment-card {
    overflow: hidden;

    border: 1px solid #dce8ea;
    border-radius: 24px;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.st-treatment-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 16px 48px rgba(26, 92, 107, 0.12);
}

.st-treatment-bar {
    height: 8px;

    background:
        linear-gradient(
            90deg,
            var(--teal-deep, #1a5c6b),
            #4e9aa5
        );
}

.st-treatment-bar-gold {
    background:
        linear-gradient(
            90deg,
            #b8860b,
            #d9b44a
        );
}

.st-treatment-content {
    padding: 36px;
}

.st-treatment-badge {
    display: inline-flex;

    margin-bottom: 18px;
    padding: 6px 14px;

    border-radius: 20px;

    background: #e8f4f6;
    color: var(--teal-deep, #1a5c6b);

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.st-treatment-badge-gold {
    background: #fdf5e0;
    color: #8a6200;
}

.st-treatment-content h3 {
    margin: 0 0 16px;

    color: var(--text-dark, #17343b);

    font-family: var(--font-display, Georgia, serif);
    font-size: 30px;
    line-height: 1.15;
}

.st-treatment-content p {
    margin: 0 0 15px;

    color: #5b7075;

    font-size: 15px;
    line-height: 1.8;
}

.st-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 22px;
}

.st-chip-list span {
    padding: 5px 13px;

    border: 1px solid #cfe2e5;
    border-radius: 30px;

    background: #edf7f8;
    color: var(--teal-deep, #1a5c6b);

    font-size: 12px;
}

.st-chip-list-gold span {
    border-color: #e8d5a0;

    background: #fdf5e0;
    color: #8a6200;
}


/* =========================================================
   BENEFITS
========================================================= */

.st-benefits-section {
    padding: 96px 0;

    background: var(--teal-deep, #1a5c6b);
}

.st-benefits-section .st-eyebrow {
    color: rgba(255, 255, 255, 0.6);
}

.st-benefits-section .st-display-heading {
    color: #ffffff;
}

.st-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;

    margin-top: 48px;
}

.st-benefit-card {
    padding: 32px 28px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.07);

    transition: background 0.25s ease;
}

.st-benefit-card:hover {
    background: rgba(255, 255, 255, 0.13);
}

.st-benefit-card h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 17px;
}

.st-benefit-card p {
    margin: 0;

    color: rgba(255, 255, 255, 0.7);

    font-size: 13.5px;
    line-height: 1.72;
}

.st-benefit-card span {
    display: inline-block;

    margin-top: 16px;
    padding: 4px 12px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 11.5px;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.st-how-section {
    padding: 96px 0;

    background: #ffffff;
}

.st-how-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 72px;

    margin-bottom: 64px;
}

.st-how-text p {
    margin: 0 0 16px;

    color: #5b7075;

    font-size: 15.5px;
    line-height: 1.85;
}

.st-how-visual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    padding: 36px;

    border: 1px solid #dce8ea;
    border-radius: 24px;

    background: #f7fafb;
}

.st-process-box {
    padding: 22px 18px;

    border: 1px solid #dce8ea;
    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}

.st-process-box strong {
    display: block;

    margin-bottom: 5px;

    color: var(--text-dark, #17343b);

    font-size: 14px;
}

.st-process-box span {
    color: #789096;

    font-size: 12px;
}

.st-process-highlight {
    grid-column: 1 / 3;

    padding: 20px 22px;

    border-radius: 14px;

    background: var(--teal-deep, #1a5c6b);
    color: rgba(255, 255, 255, 0.8);

    font-size: 13.5px;
    line-height: 1.6;
}

.st-process-highlight strong {
    color: #ffffff;
}

.st-step-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.st-step {
    text-align: center;
}

.st-step-number {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;

    border-radius: 50%;

    background: var(--teal-deep, #1a5c6b);
    color: #ffffff;

    font-family: var(--font-display, Georgia, serif);
    font-size: 18px;
}

.st-step h3 {
    margin: 0 0 7px;

    color: var(--text-dark, #17343b);

    font-size: 14px;
}

.st-step p {
    margin: 0;

    color: #5b7075;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   FAQ
========================================================= */

.st-faq-section {
    padding: 96px 0;

    background: #f7fafb;
}

.st-faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
    gap: 64px;
}

.st-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-faq-item {
    overflow: hidden;

    border: 1px solid #dce8ea;
    border-radius: 14px;

    background: #ffffff;
}

.st-faq-question {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 20px 24px;

    border: 0;

    background: transparent;

    color: var(--text-dark, #17343b);

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;
}

.st-faq-question span {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 28px;

    border-radius: 50%;

    background: #e8f4f6;
    color: var(--teal-deep, #1a5c6b);

    font-size: 18px;

    transition: all 0.25s ease;
}

.st-faq-open .st-faq-question span {
    transform: rotate(45deg);

    background: var(--teal-deep, #1a5c6b);
    color: #ffffff;
}

.st-faq-answer {
    display: none;

    padding: 0 24px 20px;

    color: #5b7075;

    font-size: 14.5px;
    line-height: 1.75;
}

.st-faq-open .st-faq-answer {
    display: block;
}

.st-faq-sidebar {
    position: sticky;
    top: 100px;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

.st-faq-cta {
    padding: 32px;

    border-radius: 22px;

    background: var(--teal-deep, #1a5c6b);

    text-align: center;
}

.st-faq-emoji {
    margin-bottom: 14px;

    font-size: 40px;
}

.st-faq-cta h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-family: var(--font-display, Georgia, serif);
    font-size: 22px;
}

.st-faq-cta p {
    margin: 0 0 20px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 13.5px;
    line-height: 1.65;
}

.st-faq-cta a {
    display: block;

    padding: 13px 20px;

    border-radius: 10px;

    background: #ffffff;
    color: var(--teal-deep, #1a5c6b);

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.st-contact-card {
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 28px;

    border: 1px solid #dce8ea;
    border-radius: 22px;

    background: #ffffff;
}

.st-contact-card h3 {
    margin: 0 0 4px;

    color: var(--text-dark, #17343b);

    font-family: var(--font-display, Georgia, serif);
    font-size: 18px;
}

.st-contact-card a,
.st-contact-card span {
    color: #5b7075;

    font-size: 13.5px;
    line-height: 1.5;
    text-decoration: none;
}

.st-contact-card a {
    color: var(--teal-deep, #1a5c6b);
    font-weight: 600;
}


/* =========================================================
   APPOINTMENT
========================================================= */

.st-appointment-section {
    padding: 96px 0;

    background: var(--teal-deep, #1a5c6b);
}

.st-appointment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.85fr);
    align-items: start;
    gap: 64px;
}

.st-appointment-info .st-eyebrow {
    color: rgba(255, 255, 255, 0.6);
}

.st-appointment-info h2 {
    margin: 0 0 20px;

    color: #ffffff;

    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.15;
}

.st-appointment-info h2 em {
    color: #b8dce3;
    font-style: italic;
}

.st-appointment-info > p {
    max-width: 560px;

    margin: 0 0 36px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 16px;
    line-height: 1.75;
}

.st-contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.st-contact-details > div {
    color: rgba(255, 255, 255, 0.75);

    font-size: 14px;
    line-height: 1.6;
}

.st-contact-details strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;
}


/* FORM */

.st-form-card {
    padding: 36px;

    border-radius: 24px;

    background: #ffffff;
}

.st-form-card h3 {
    margin: 0 0 6px;

    color: var(--text-dark, #17343b);

    font-family: var(--font-display, Georgia, serif);
    font-size: 28px;
}

.st-form-card > p {
    margin: 0 0 24px;

    color: #789096;

    font-size: 14px;
}

.st-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.st-form-group {
    margin-bottom: 18px;
}

.st-form-group label {
    display: block;

    margin-bottom: 7px;

    color: var(--text-dark, #17343b);

    font-size: 13px;
    font-weight: 600;
}

.st-form-group input,
.st-form-group select,
.st-form-group textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #dce8ea;
    border-radius: 8px;

    background: #ffffff;
    color: #17343b;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition: border-color 0.25s ease;
}

.st-form-group input:focus,
.st-form-group select:focus,
.st-form-group textarea:focus {
    border-color: var(--teal-deep, #1a5c6b);
}

.st-form-group textarea {
    min-height: 120px;

    resize: vertical;
}

.st-form-submit {
    width: 100%;

    padding: 15px 20px;

    border: 0;
    border-radius: 8px;

    background: var(--teal-deep, #1a5c6b);
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: background 0.25s ease;
}

.st-form-submit:hover {
    background: #124a57;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .st-hero {
        grid-template-columns: 1fr 1fr;
    }

    .st-hero-content {
        padding-right: 30px;
    }

    .st-hero h1 {
        font-size: clamp(38px, 5vw, 56px);
    }

    .st-why-grid {
        grid-template-columns: 1fr 1fr;
    }

    .st-why-intro {
        grid-column: 1 / 3;
    }

    .st-why-image {
        grid-column: 1 / 3;
        grid-row: auto;

        min-height: 320px;
    }

    .st-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .st-appointment-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .st-hero {
        display: block;
        min-height: auto;
    }

    .st-hero-content-wrap {
        padding: 64px 0 56px;
    }

    .st-hero-content {
        max-width: none;
        padding-right: 0;
    }

    .st-hero-image-panel {
        min-height: 420px;
    }

    .st-treatment-grid,
    .st-how-intro {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .st-faq-layout {
        grid-template-columns: 1fr;
    }

    .st-faq-sidebar {
        position: static;
    }

    .st-step-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 40px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .st-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .st-hero-content-wrap {
        padding: 42px 0 40px;
    }

    .st-breadcrumb {
        font-size: 11px;
        gap: 6px;
    }

    .st-hero h1 {
        font-size: clamp(36px, 11vw, 48px);
        line-height: 1.08;
    }

    .st-lead {
        font-size: 15px;
        line-height: 1.7;
    }

    .st-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .st-btn {
        width: 100%;
    }

    .st-hero-image-panel {
        min-height: 420px;
    }

    .st-hero-stats {
        padding: 32px 20px;
    }

    .st-stat {
        padding-left: 16px;
    }

    .st-stat-number {
        font-size: 30px;
    }

    .st-why-section,
    .st-treatment-section,
    .st-benefits-section,
    .st-how-section,
    .st-faq-section,
    .st-appointment-section {
        padding: 64px 0;
    }

    .st-display-heading {
        font-size: 34px;
    }

    .st-why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
    }

    .st-why-intro,
    .st-why-image {
        grid-column: 1;
    }

    .st-why-intro {
        padding: 28px 22px;
    }

    .st-why-intro h3 {
        font-size: 24px;
    }

    .st-why-intro p {
        font-size: 14px;
    }

    .st-why-image {
        min-height: 300px;
    }

    .st-cause-card {
        padding: 22px;
    }

    .st-treatment-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 32px;
    }

    .st-treatment-grid {
        gap: 18px;
    }

    .st-treatment-content {
        padding: 28px 22px 30px;
    }

    .st-treatment-content h3 {
        font-size: 25px;
    }

    .st-treatment-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .st-benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
    }

    .st-benefit-card {
        padding: 26px 22px;
    }

    .st-how-intro {
        gap: 32px;
        margin-bottom: 48px;
    }

    .st-how-visual {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .st-process-highlight {
        grid-column: 1;
    }

    .st-step-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .st-faq-layout {
        gap: 36px;
    }

    .st-faq-question {
        padding: 18px;
        font-size: 14px;
    }

    .st-faq-answer {
        padding: 0 18px 18px;
        font-size: 14px;
    }

    .st-faq-cta,
    .st-contact-card {
        padding: 26px 22px;
    }

    .st-appointment-grid {
        gap: 40px;
    }

    .st-appointment-info h2 {
        font-size: 38px;
    }

    .st-form-card {
        padding: 26px 20px;
        border-radius: 18px;
    }

    .st-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

}


 /*  */

/* =========================================================
   BOTOX TREATMENT PAGE
   All classes are uniquely prefixed with botox-
   ========================================================= */

/* ---------- GLOBAL ---------- */

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

.botox-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 600;
  margin-bottom: 12px;
}

.botox-eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
  flex-shrink: 0;
}

.botox-eyebrow.botox-no-line::before {
  display: none;
}

.botox-display-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-dark);
  margin: 0 0 16px;
}

.botox-display-title em {
  font-style: italic;
  color: var(--teal-deep);
}

.botox-lead {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.75;
}

.botox-body-text {
  font-size: 15.5px;
  color: var(--text-mid);
  line-height: 1.85;
  margin: 0 0 18px;
}

.botox-body-text strong {
  color: var(--text-dark);
}

.botox-body-text:last-child {
  margin-bottom: 0;
}


/* =========================================================
   HERO
   ========================================================= */

.botox-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh;
}

.botox-hero-left {
  background: var(--off-white);
  padding: 88px 64px 88px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border);
}

.botox-hero-left-inner {
  width: 100%;
  max-width: 540px;
  margin-left: auto;
}

.botox-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-light);
  margin-bottom: 28px;
}

.botox-breadcrumb a {
  color: var(--teal-deep);
  font-weight: 500;
}

.botox-hero-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--text-dark);
  margin: 0 0 28px;
}

.botox-hero-title em {
  font-style: italic;
  color: var(--teal-deep);
}

.botox-hero-description {
  max-width: 460px;
  margin-bottom: 40px;
}

.botox-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.botox-book-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--teal-deep);
  color: #fff;
  padding: 16px 28px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.botox-book-button:hover {
  background: var(--teal-mid);
  color: #fff;
  transform: translateY(-2px);
}

.botox-book-button::after {
  content: "→";
  font-size: 18px;
}

.botox-call-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--teal-deep);
  border: 1px solid var(--teal-deep);
  padding: 15px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.botox-call-button:hover {
  background: var(--teal-deep);
  color: #fff;
}

.botox-hero-meta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.botox-meta-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 4px;
}

.botox-meta-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
}


/* ---------- HERO RIGHT ---------- */

.botox-hero-right {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  background: var(--teal-deep);
}

.botox-hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 108, 120, 0.72);
  z-index: 1;
}

.botox-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  mix-blend-mode: luminosity;
}

.botox-hero-right-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 64px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.botox-hero-quote {
  max-width: 560px;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  padding-left: 24px;
  margin-bottom: 32px;
}

.botox-hero-quote p {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 400;
  font-style: italic;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}

.botox-hero-quote cite {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.botox-hero-tag {
  display: inline-block;
  width: fit-content;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 4px;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.botox-intro {
  padding: 96px 0;
  background: var(--white);
}

.botox-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.botox-intro-image {
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    var(--teal-pale),
    var(--teal-ghost)
  );
}

.botox-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================================================
   AREAS
   ========================================================= */

.botox-areas {
  padding: 96px 0;
  background: var(--off-white);
}

.botox-areas-grid-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}

.botox-areas-list-wrapper {
  padding-top: 8px;
}

.botox-areas-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 600;
  margin-bottom: 20px;
}

.botox-areas-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.botox-area-item {
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 14.5px;
  color: var(--text-dark);
  font-weight: 500;
  line-height: 1.4;
  transition: background 0.2s ease, color 0.2s ease;
}

.botox-area-item:hover {
  background: var(--teal-ghost);
  color: var(--teal-deep);
}

.botox-area-item-wide {
  grid-column: 1 / -1;
}


/* =========================================================
   PROCEDURE
   ========================================================= */

.botox-procedure {
  padding: 96px 0;
  background: var(--white);
}

.botox-procedure-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 64px;
}

.botox-procedure-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.botox-procedure-step {
  background: #fff;
  padding: 36px 32px;
}

.botox-procedure-number {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  color: var(--teal-pale);
  line-height: 1;
  margin-bottom: 16px;
}

.botox-procedure-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.botox-procedure-description {
  font-size: 13.5px;
  color: var(--text-mid);
  line-height: 1.7;
}


/* =========================================================
   CARE
   ========================================================= */

.botox-care {
  padding: 96px 0;
  background: var(--teal-deep);
}

.botox-care-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.botox-care-panel {
  padding: 52px 48px;
  background: var(--teal-deep);
}

.botox-care-panel:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.botox-care-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  margin-bottom: 16px;
}

.botox-care-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.botox-care-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 32px;
}

.botox-care-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.botox-care-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.botox-care-list li:last-child {
  border-bottom: none;
}

.botox-care-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--teal-light);
  flex-shrink: 0;
}


/* =========================================================
   FAQ
   ========================================================= */

.botox-faq {
  padding: 96px 0;
  background: var(--off-white);
}

.botox-faq-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.botox-faq-intro {
  position: sticky;
  top: 100px;
}

.botox-faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.botox-faq-item {
  border-bottom: 1px solid var(--border);
}

.botox-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}

.botox-faq-question:hover {
  color: var(--teal-deep);
}

.botox-faq-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  color: var(--text-light);
  font-size: 16px;
  transition: all 0.25s ease;
}

.botox-faq-item.botox-open .botox-faq-toggle {
  color: var(--teal-deep);
  border-color: var(--teal-deep);
  transform: rotate(45deg);
}

.botox-faq-answer {
  display: none;
  padding: 0 0 22px;
  color: var(--text-mid);
  font-size: 14.5px;
  line-height: 1.8;
}

.botox-faq-item.botox-open .botox-faq-answer {
  display: block;
}


/* =========================================================
   APPOINTMENT
   ========================================================= */

.botox-appointment {
  padding: 96px 0;
  background: var(--teal-deep);
}

.botox-appointment-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.botox-appointment-left {
  color: #fff;
}

.botox-section-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
}

.botox-section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 20px;
}

.botox-appointment-description {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
}

.botox-appointment-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.botox-appointment-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.botox-appointment-icon {
  flex-shrink: 0;
}


/* ---------- FORM ---------- */

.botox-form-card {
  padding: 40px;
  background: #fff;
  border-radius: 8px;
}

.botox-form-title {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.botox-form-subtitle {
  font-size: 14px;
  color: var(--text-mid);
  margin-bottom: 28px;
}

.botox-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.botox-form-group {
  margin-bottom: 18px;
}

.botox-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 7px;
}

.botox-form-group input,
.botox-form-group select,
.botox-form-group textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-dark);
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease;
}

.botox-form-group input:focus,
.botox-form-group select:focus,
.botox-form-group textarea:focus {
  border-color: var(--teal-deep);
}

.botox-form-group textarea {
  min-height: 110px;
  resize: vertical;
}

.botox-submit-button {
  width: 100%;
  border: none;
  padding: 15px 20px;
  background: var(--teal-deep);
  color: #fff;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.botox-submit-button:hover {
  background: var(--teal-mid);
}


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

@media (max-width: 1100px) {

  .botox-hero-left {
    padding-left: 24px;
    padding-right: 40px;
  }

  .botox-hero-left-inner {
    max-width: 100%;
  }

  .botox-intro-grid,
  .botox-areas-grid-layout,
  .botox-procedure-header {
    gap: 50px;
  }

  .botox-appointment-inner {
    gap: 40px;
  }
}


@media (max-width: 1024px) {

  .botox-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .botox-hero-left {
    padding: 64px 24px 48px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .botox-hero-right {
    min-height: 500px;
  }

  .botox-procedure-header {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .botox-appointment-inner {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 900px) {

  .botox-intro-grid,
  .botox-areas-grid-layout,
  .botox-care-grid,
  .botox-faq-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .botox-procedure-steps {
    grid-template-columns: 1fr;
  }

  .botox-faq-intro {
    position: static;
  }

  .botox-care-panel:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .botox-intro-image {
    height: 450px;
  }
}


@media (max-width: 700px) {

  .botox-container {
    padding: 0 18px;
  }

  .botox-hero-left {
    padding: 48px 18px 40px;
  }

  .botox-hero-title {
    font-size: clamp(40px, 12vw, 58px);
  }

  .botox-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .botox-book-button,
  .botox-call-button {
    width: 100%;
    text-align: center;
  }

  .botox-hero-meta {
    gap: 24px;
    margin-top: 40px;
  }

  .botox-hero-right {
    min-height: 430px;
  }

  .botox-hero-right-inner {
    padding: 36px 24px;
  }

  .botox-hero-quote {
    padding-left: 18px;
  }

  .botox-hero-quote p {
    font-size: 24px;
  }

  .botox-intro,
  .botox-areas,
  .botox-procedure,
  .botox-care,
  .botox-faq,
  .botox-appointment {
    padding: 64px 0;
  }

  .botox-intro-image {
    height: 360px;
  }

  .botox-areas-list {
    grid-template-columns: 1fr;
  }

  .botox-area-item-wide {
    grid-column: auto;
  }

  .botox-care-panel {
    padding: 36px 24px;
  }

  .botox-form-card {
    padding: 28px 20px;
  }

  .botox-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .botox-section-title {
    font-size: 36px;
  }
}


@media (max-width: 480px) {

  .botox-breadcrumb {
    font-size: 11px;
  }

  .botox-eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .botox-display-title {
    font-size: 32px;
  }

  .botox-hero-title {
    font-size: 42px;
  }

  .botox-hero-right {
    min-height: 380px;
  }

  .botox-hero-quote p {
    font-size: 21px;
  }

  .botox-meta-value {
    font-size: 18px;
  }

  .botox-procedure-step {
    padding: 30px 24px;
  }

  .botox-procedure-number {
    font-size: 48px;
  }

  .botox-form-title {
    font-size: 26px;
  }
}

/* =========================================================
   HYALURONIC ACID FILLERS PAGE
   Unique class prefix: ha-
========================================================= */

/* ---------- PAGE WRAPPER ---------- */

.ha-page {
  width: 100%;
  overflow: hidden;
}

.ha-container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---------- BREADCRUMB ---------- */

.ha-breadcrumb {
  background: var(--off-white);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ha-breadcrumb-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ha-breadcrumb a {
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 14px;
}

.ha-breadcrumb-separator {
  color: var(--text-light);
  font-size: 14px;
}

.ha-breadcrumb-current {
  color: var(--text-light);
  font-size: 14px;
}

/* ---------- SHARED TITLES ---------- */

.ha-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 600;
  margin-bottom: 12px;
}

.ha-section-label::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
  flex-shrink: 0;
}

.ha-section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-dark);
  margin: 0 0 16px;
}

.ha-text {
  color: var(--text-mid);
  line-height: 1.8;
}

.ha-max-text {
  max-width: 800px;
}

/* ---------- HERO ---------- */

.ha-hero {
  padding: 90px 0;
  background: linear-gradient(
    135deg,
    #c2d8de 0%,
    #b6d1d8 100%
  );
}

.ha-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 80px;
}

.ha-hero-content p {
  max-width: 650px;
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.8;
}

.ha-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

.ha-hero-actions .btn-primary {
  white-space: nowrap;
}

/* ---------- HERO IMAGE ---------- */

.ha-image-box {
  width: 100%;
  min-height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--teal-pale),
    var(--teal-ghost)
  );
  border: 1px solid var(--border);
}

.ha-image-box img {
  width: 100%;
  height: 400px;
  min-height: 400px;
  display: block;
  object-fit: cover;
}

/* ---------- CONTENT SECTIONS ---------- */

.ha-section {
  padding: 96px 0;
  background: var(--white);
}

.ha-section--soft {
  background: var(--teal-ghost);
}

.ha-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.ha-two-column--top {
  align-items: start;
}

.ha-content p {
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 18px;
}

.ha-content p:last-child {
  margin-bottom: 0;
}

/* ---------- PROCEDURE ---------- */

.ha-procedure-intro {
  max-width: 800px;
  color: var(--text-mid);
  line-height: 1.8;
}

.ha-procedure-steps {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
}

.ha-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.ha-step-number {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-deep);
  color: white;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
}

.ha-step-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.ha-step-content p {
  color: var(--text-mid);
  line-height: 1.75;
  margin: 0;
}

/* ---------- BENEFITS ---------- */

.ha-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.ha-benefit-card {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ha-benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--teal-deep),
    var(--gold)
  );
}

.ha-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(26, 92, 107, 0.1);
}

.ha-benefit-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-dark);
  margin: 0 0 10px;
}

.ha-benefit-card p {
  color: var(--text-mid);
  line-height: 1.75;
  margin: 0;
}

/* ---------- EXPERTISE ---------- */

.ha-expertise-intro {
  max-width: 800px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 40px;
}

.ha-expertise-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text-dark);
  margin: 0 0 16px;
}

.ha-expertise-card p {
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0;
}

/* ---------- BEFORE / AFTER ---------- */

.ha-results-box {
  width: 100%;
  min-height: 350px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--teal-pale),
    var(--teal-ghost)
  );
  border: 1px solid var(--border);
}

.ha-results-box img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
}

/* ---------- APPOINTMENT SECTION ---------- */

.ha-appointment {
  padding: 96px 0;
  background: var(--teal-deep);
}

.ha-appointment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.ha-appointment-content .ha-section-label {
  color: rgba(255, 255, 255, 0.65);
}

.ha-appointment-content .ha-section-label::before {
  background: rgba(255, 255, 255, 0.5);
}

.ha-appointment-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.15;
  color: white;
  margin-bottom: 18px;
}

.ha-appointment-description {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  max-width: 560px;
}

.ha-appointment-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 32px;
}

.ha-appointment-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.ha-appointment-icon {
  width: 28px;
  flex: 0 0 28px;
  font-size: 18px;
}

/* ---------- FORM ---------- */

.ha-form-card {
  background: white;
  padding: 36px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.ha-form-title {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.ha-form-subtitle {
  color: var(--text-mid);
  font-size: 14px;
  margin-bottom: 24px;
}

.ha-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ha-form-group {
  margin-bottom: 18px;
}

.ha-form-group label {
  display: block;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
}

.ha-form-group input,
.ha-form-group select,
.ha-form-group textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--text-dark);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ha-form-group input:focus,
.ha-form-group select:focus,
.ha-form-group textarea:focus {
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 3px rgba(26, 92, 107, 0.08);
}

.ha-form-group textarea {
  min-height: 110px;
  resize: vertical;
}

.ha-submit-btn {
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 15px 24px;
  border-radius: 6px;
  background: var(--teal-deep);
  color: white;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}

.ha-submit-btn:hover {
  background: var(--teal-mid);
  transform: translateY(-1px);
}

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

@media (max-width: 1100px) {
  .ha-hero-grid {
    gap: 50px;
  }

  .ha-two-column {
    gap: 45px;
  }

  .ha-appointment-grid {
    gap: 45px;
  }
}

@media (max-width: 900px) {
  .ha-container {
    width: min(100% - 40px, 760px);
  }

  .ha-hero {
    padding: 70px 0;
  }

  .ha-hero-grid,
  .ha-two-column,
  .ha-appointment-grid {
    grid-template-columns: 1fr;
  }

  .ha-hero-content {
    order: 1;
  }

  .ha-hero-image {
    order: 2;
  }

  .ha-procedure-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ha-benefits-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ha-section {
    padding: 75px 0;
  }

  .ha-appointment {
    padding: 75px 0;
  }
}

@media (max-width: 650px) {
  .ha-container {
    width: calc(100% - 32px);
  }

  .ha-breadcrumb-inner {
    gap: 5px;
  }

  .ha-breadcrumb a,
  .ha-breadcrumb span {
    font-size: 12px;
  }

  .ha-hero {
    padding: 55px 0;
  }

  .ha-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ha-hero-actions .btn-primary {
    width: 100%;
    text-align: center;
  }

  .ha-image-box {
    min-height: 280px;
  }

  .ha-image-box img {
    min-height: 280px;
  }

  .ha-section {
    padding: 60px 0;
  }

  .ha-section-title {
    font-size: clamp(28px, 8vw, 38px);
  }

  .ha-benefits-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
  }

  .ha-benefit-card {
    padding: 25px;
  }

  .ha-step {
    gap: 14px;
  }

  .ha-step-number {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 20px;
  }

  .ha-form-card {
    padding: 25px 20px;
  }

  .ha-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ha-appointment-info-item {
    font-size: 14px;
  }

  .ha-results-box,
  .ha-results-box img {
    min-height: 260px;
    height: 260px;
  }
}

@media (max-width: 400px) {
  .ha-section-label {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .ha-form-card {
    padding: 22px 16px;
  }

  .ha-step-content h3 {
    font-size: 16px;
  }

  .ha-step-content p {
    font-size: 14px;
  }
}

/* Blog page*/
.aj-blog{
  --bg:#FBF9F5; --surface:#FFFFFF; --ink:#16332C; --body:#4A5A54;
  --muted:#8A968F; --primary:#2E7D6B; --primary-d:#1C5245; --line:#E8E2D6;
  --shadow:0 18px 40px -24px rgba(22,51,44,.35);
  --font-display:'Fraunces',Georgia,serif;
  --radius:20px; --wrap:1180px;
  background:var(--bg); color:var(--body); padding-bottom:4px;
}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap');

.aj-blog *{box-sizing:border-box}
.aj-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.aj-blog img{display:block;max-width:100%}
.aj-blog a{text-decoration:none}

.aj-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.aj-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--primary);display:inline-block}

/* HERO */
.aj-hero{padding:88px 0 48px;text-align:center;position:relative;overflow:hidden}
.aj-hero::after{content:"";position:absolute;inset:auto 0 -40% 0;height:60%;
  background:radial-gradient(60% 100% at 50% 0%,rgba(46,125,107,.10),transparent 70%);pointer-events:none}
.aj-hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(2.6rem,6vw,4.2rem);
  line-height:1.05;color:var(--ink);letter-spacing:-.01em;margin:20px 0 18px}
.aj-hero h1 em{font-style:italic;color:var(--primary);font-weight:400}
.aj-hero p{max-width:600px;margin:0 auto;font-size:1.075rem;color:var(--body);line-height:1.6}

/* FEATURED */
.aj-featured{padding:16px 0 8px}
.aj-featured-card{display:grid;grid-template-columns:1.05fr 1fr;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.aj-featured-media{position:relative;min-height:340px;overflow:hidden;background:#EFEAE0}
.aj-featured-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.aj-featured-card:hover .aj-featured-media img{transform:scale(1.04)}
.aj-flag{position:absolute;top:18px;left:18px;background:var(--ink);color:#fff;font-size:11px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:100px}
.aj-featured-body{padding:44px 48px;display:flex;flex-direction:column;justify-content:center}
.aj-tag{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin-bottom:14px}
.aj-featured-body h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.7rem,2.8vw,2.3rem);
  line-height:1.15;color:var(--ink);letter-spacing:-.01em;margin:0 0 16px}
.aj-featured-body h2 a{color:inherit}
.aj-featured-body p{margin:0 0 26px;line-height:1.65}
.aj-readmore{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.95rem;
  color:var(--primary);align-self:flex-start}
.aj-readmore svg{transition:transform .3s ease}
.aj-readmore:hover{color:var(--primary-d)}
.aj-readmore:hover svg{transform:translateX(5px)}

/* SECTION HEAD */
.aj-section-head{padding:60px 0 30px}
.aj-section-head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.6rem);
  color:var(--ink);line-height:1.1;letter-spacing:-.01em;margin:14px 0 0}

/* GRID */
.aj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-bottom:24px}
.aj-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.aj-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#DAD2C2}
.aj-card-media{aspect-ratio:16/10;overflow:hidden;background:#EFEAE0;display:block}
.aj-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.aj-card:hover .aj-card-media img{transform:scale(1.05)}
.aj-card-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.aj-card-body h3{font-family:var(--font-display);font-weight:500;font-size:1.28rem;line-height:1.25;
  color:var(--ink);margin:0 0 12px;letter-spacing:-.005em}
.aj-card-body h3 a{color:inherit}
.aj-card-body h3 a:hover{color:var(--primary)}
.aj-card-body p{font-size:.94rem;color:var(--body);margin:0 0 20px;flex:1;line-height:1.6}

/* PAGINATION */
.aj-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;padding:40px 0 96px}
.aj-pagination .page-numbers{min-width:44px;height:44px;padding:0 14px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:12px;font-weight:600;font-size:.95rem;
  color:var(--body);background:var(--surface);transition:all .25s ease}
.aj-pagination a.page-numbers:hover{border-color:var(--primary);color:var(--primary)}
.aj-pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}
.aj-pagination .page-numbers.dots{border:none;background:none}

/* CTA */
.aj-cta{background:var(--ink);color:#fff;border-radius:var(--radius);padding:56px 48px;text-align:center;
  margin-bottom:80px;position:relative;overflow:hidden}
.aj-cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 50% 0%,rgba(46,125,107,.35),transparent 65%)}
.aj-cta>*{position:relative}
.aj-cta .aj-eyebrow{color:#7FD3BE}.aj-cta .aj-eyebrow::before{background:#7FD3BE}
.aj-cta h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.6rem);margin:16px 0 12px;letter-spacing:-.01em}
.aj-cta p{color:#C6D3CD;max-width:520px;margin:0 auto 28px;line-height:1.6}
.aj-btn{display:inline-flex;align-items:center;gap:9px;background:var(--primary);color:#fff;font-weight:600;
  padding:15px 30px;border-radius:100px;font-size:.98rem;transition:background .25s ease,transform .25s ease}
.aj-btn:hover{background:#38927D;transform:translateY(-2px)}

/* EMPTY STATE */
.aj-empty{text-align:center;padding:60px 0 96px;color:var(--muted)}

/* RESPONSIVE */
@media (max-width:900px){
  .aj-featured-card{grid-template-columns:1fr}
  .aj-featured-media{min-height:260px}
  .aj-featured-body{padding:34px 30px}
  .aj-grid{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media (max-width:600px){
  .aj-hero{padding:60px 0 36px}
  .aj-grid{grid-template-columns:1fr}
  .aj-featured-body{padding:28px 24px}
  .aj-cta{padding:44px 26px}
}
@media (prefers-reduced-motion:reduce){.aj-blog *{transition:none!important;animation:none!important}}
/**/

/*Contact page*/
.aj-contact{
  --aj-bg:#FBF9F5; --aj-surface:#FFFFFF; --aj-ink:#16332C; --aj-body:#4A5A54;
  --aj-muted:#8A968F; --aj-primary:#2E7D6B; --aj-primary-d:#1C5245; --aj-line:#E8E2D6;
  --aj-shadow:0 18px 40px -24px rgba(22,51,44,.35);
  --aj-font-display:'Fraunces',Georgia,serif;
  --aj-font-body:'Inter',system-ui,-apple-system,sans-serif;
  --aj-wrap:1180px; --aj-radius:20px;
  background:var(--aj-bg); color:var(--aj-body);
  font-family:var(--aj-font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.aj-contact *{box-sizing:border-box;margin:0;padding:0}
.aj-contact img{display:block;max-width:100%}
.aj-contact a{text-decoration:none;color:inherit}
.aj-wrap{max-width:var(--aj-wrap);margin-inline:auto;padding-inline:24px}
.aj-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aj-primary)}
.aj-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--aj-primary);display:inline-block}

/* HERO */
.aj-hero{padding:88px 0 40px;text-align:center;position:relative;overflow:hidden}
.aj-hero::after{content:"";position:absolute;inset:auto 0 -40% 0;height:60%;background:radial-gradient(60% 100% at 50% 0%,rgba(46,125,107,.10),transparent 70%);pointer-events:none}
.aj-hero h1{font-family:var(--aj-font-display);font-weight:500;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1.05;color:var(--aj-ink);letter-spacing:-.01em;margin:20px 0 18px}
.aj-hero h1 em{font-style:italic;color:var(--aj-primary);font-weight:400}
.aj-hero p{max-width:600px;margin:0 auto;font-size:1.075rem}

/* MAIN GRID */
.aj-contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;padding:32px 0 24px;align-items:start}

/* INFO CARDS */
.aj-info-stack{display:flex;flex-direction:column;gap:16px}
.aj-info-card{background:var(--aj-surface);border:1px solid var(--aj-line);border-radius:16px;padding:22px 24px;display:flex;gap:18px;align-items:flex-start;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.aj-info-card:hover{transform:translateY(-3px);box-shadow:var(--aj-shadow);border-color:#DAD2C2}
.aj-info-icon{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(46,125,107,.10);color:var(--aj-primary);display:flex;align-items:center;justify-content:center}
.aj-info-card h3{font-family:var(--aj-font-display);font-weight:500;font-size:1.12rem;color:var(--aj-ink);margin-bottom:4px}
.aj-info-card p,.aj-info-card a{font-size:.95rem;color:var(--aj-body);display:block;line-height:1.5}
.aj-info-card a:hover{color:var(--aj-primary)}

/* SOCIAL ROW */
.aj-social-row{display:flex;gap:12px;margin-top:4px}
.aj-social-row a{width:44px;height:44px;border-radius:12px;border:1px solid var(--aj-line);background:var(--aj-surface);display:flex;align-items:center;justify-content:center;color:var(--aj-ink);transition:all .25s ease}
.aj-social-row a:hover{background:var(--aj-primary);border-color:var(--aj-primary);color:#fff;transform:translateY(-2px)}

/* FORM CARD */
.aj-form-card{background:var(--aj-surface);border:1px solid var(--aj-line);border-radius:var(--aj-radius);padding:40px 40px 44px;box-shadow:var(--aj-shadow)}
.aj-form-card .aj-tag{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aj-primary);margin-bottom:10px;display:block}
.aj-form-card h2{font-family:var(--aj-font-display);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--aj-ink);letter-spacing:-.01em;margin-bottom:6px}
.aj-form-card p.aj-sub{color:var(--aj-muted);font-size:.95rem;margin-bottom:26px}
.aj-field{margin-bottom:18px}
.aj-field label{display:block;font-size:.85rem;font-weight:600;color:var(--aj-ink);margin-bottom:7px}
.aj-field label .aj-req{color:var(--aj-primary)}
.aj-field input,.aj-field select,.aj-field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--aj-line);border-radius:12px;
  font-family:inherit;font-size:.97rem;color:var(--aj-ink);background:var(--aj-bg);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.aj-field input::placeholder,.aj-field textarea::placeholder{color:#AEB6B0}
.aj-field input:focus,.aj-field select:focus,.aj-field textarea:focus{outline:none;border-color:var(--aj-primary);box-shadow:0 0 0 3px rgba(46,125,107,.12);background:#fff}
.aj-field textarea{resize:vertical;min-height:120px}
.aj-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.aj-submit-btn{display:inline-flex;align-items:center;gap:9px;background:var(--aj-primary);color:#fff;font-weight:600;font-family:inherit;
  padding:15px 32px;border:none;border-radius:100px;font-size:1rem;cursor:pointer;transition:background .25s ease,transform .25s ease}
.aj-submit-btn:hover{background:#38927D;transform:translateY(-2px)}

/* MAP */
.aj-map-section{padding:40px 0 0}
.aj-map-frame{border:1px solid var(--aj-line);border-radius:var(--aj-radius);overflow:hidden;box-shadow:var(--aj-shadow);line-height:0}
.aj-map-frame iframe{width:100%;height:420px;border:0;display:block}

/* CTA */
.aj-cta{background:var(--aj-ink);color:#fff;border-radius:var(--aj-radius);padding:52px 48px;text-align:center;margin:56px 0 80px;position:relative;overflow:hidden}
.aj-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 50% 0%,rgba(46,125,107,.35),transparent 65%)}
.aj-cta>*{position:relative}
.aj-cta .aj-eyebrow{color:#7FD3BE}.aj-cta .aj-eyebrow::before{background:#7FD3BE}
.aj-cta h2{font-family:var(--aj-font-display);font-weight:500;font-size:clamp(1.8rem,3.2vw,2.4rem);margin:14px 0 10px;letter-spacing:-.01em}
.aj-cta p{color:#C6D3CD;max-width:520px;margin:0 auto 26px}
.aj-btn{display:inline-flex;align-items:center;gap:9px;background:var(--aj-primary);color:#fff;font-weight:600;padding:15px 30px;border-radius:100px;font-size:.98rem;transition:background .25s ease,transform .25s ease}
.aj-btn:hover{background:#38927D;transform:translateY(-2px)}

/* RESPONSIVE */
@media (max-width:900px){
  .aj-contact-grid{grid-template-columns:1fr;gap:24px}
  .aj-form-card{padding:32px 26px 36px}
}
@media (max-width:600px){
  .aj-hero{padding:60px 0 32px}
  .aj-field-row{grid-template-columns:1fr;gap:0}
  .aj-cta{padding:44px 26px}
  .aj-map-frame iframe{height:320px}
}
@media (prefers-reduced-motion:reduce){.aj-contact *{transition:none!important}}

/**/