/* =========================================================
   Dr. Bhatt's Clinic – Theme Styles
   Primary:  #101927  (deep navy)
   Gold:     #C8A43D  (warm gold)
   Light:    #FFFEF8  (warm white)
   Logo blue:#333E89  (accent only)
   Logo grn: #92BC54  (accent only)
   ========================================================= */

   *,
   *::before,
   *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box
   }
   
   :root {
     --navy: #101927;
     --navy-mid: #1C2D40;
     --navy-soft: #263548;
     --gold: #C8A43D;
     --gold-light: #DFC06A;
     --gold-pale: #F5EDD4;
     --gold-dark: #9E7E25;
     --white: #FFFEF8;
     --off: #F7F5ED;
     --blue: #333E89;
     --green: #92BC54;
     --text: #1E2B3A;
     --muted: #5A6A7A;
     --border-d: rgba(200, 164, 61, .5);
     --border: rgba(200, 164, 61, .18);
     --border-l: rgba(200, 164, 61, .1);
     --shadow-sm: 0 2px 12px rgba(16, 25, 39, .08);
     --shadow-md: 0 8px 32px rgba(16, 25, 39, .12);
     --shadow-lg: 0 20px 60px rgba(16, 25, 39, .18);
     --r: 10px;
     --r-lg: 18px;
     /* Height of topbar + main header for content offset when sticky */
     /* --sticky-header-height: 116px; */
   }
   
   html {
     scroll-behavior: smooth
   }
   
   body {
     font-family: 'DM Sans', sans-serif;
     background: var(--white);
     color: var(--text);
     overflow-x: clip;
     line-height: 1.6
   }
   
   ::-webkit-scrollbar {
     width: 4px
   }
   
   ::-webkit-scrollbar-track {
     background: var(--navy)
   }
   
   ::-webkit-scrollbar-thumb {
     background: var(--gold);
     border-radius: 2px
   }
   
   img {
     display: block;
     max-width: 100%;
     height: auto
   }
   
   a {
     text-decoration: none;
     color: inherit
   }
   
   .hidden {
     display: none !important
   }
   
   /* ── Utility ── */
   .container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 2rem
   }
   
   .tag {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-family: 'DM Sans', sans-serif;
     font-size: .7rem;
     font-weight: 600;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--gold);
     padding: .35rem .9rem;
     border-radius: 50px;
     border: 1px solid var(--border);
     background: var(--gold-pale)
   }
   
   .section-head {
     margin-bottom: 3.5rem
   }
   
   .section-head .tag {
     margin-bottom: .9rem
   }
   
   .section-head h2 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(1.9rem, 3.5vw, 2.8rem);
     font-weight: 700;
     color: var(--navy);
     line-height: 1.15
   }
   
   .section-head h2 em {
     font-style: italic;
     color: var(--gold-light)
   }
   
   .section-head p {
     font-size: .95rem;
     color: var(--muted);
     line-height: 1.8;
     max-width: 880px;
     margin-top: .75rem
   }
   
   /* Section head variants */
   .section-head--compact {
     margin-bottom: 1.5rem
   }
   
   .section-head--center {
     text-align: center
   }
   
   .section-head--center p {
     margin-left: auto;
     margin-right: auto
   }
   
   /* Tag on dark backgrounds */
   .tag--dark {
     background: rgba(200, 164, 61, .1);
     border-color: rgba(200, 164, 61, .2)
   }
   
   /* =========================================================
      STICKY HEADER WRAPPER – sticky on desktop, fixed on small screens
      ========================================================= */
   .site-header-sticky-wrap {
     position: sticky;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background: var(--white);
     box-shadow: var(--shadow-sm);
   }
   
   /* =========================================================
      TOPBAR
      ========================================================= */
   .topbar {
     background: var(--navy);
     border-bottom: 1px solid rgba(255, 255, 255, .06);
     padding: .5rem 0
   }
   
   .topbar .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: .5rem
   }
   
   .tb-info {
     display: flex;
     align-items: center;
     gap: 1.5rem;
     flex-wrap: wrap
   }
   
   .tb-item {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: .80rem;
     font-weight: 400;
     color: rgba(255, 255, 255, .70)
   }
   
   .tb-item i {
     color: var(--gold);
     font-size: .62rem
   }
   
   .tb-item a {
     color: rgba(255, 255, 255, .70);
     transition: color .2s
   }
   
   .tb-item a:hover {
     color: var(--gold-light)
   }
   
   .tb-socials {
     display: flex;
     gap: .4rem
   }
   
   .tb-soc {
     width: 28px;
     height: 28px;
     border-radius: 6px;
     border: 1px solid rgba(255, 255, 255, .50);
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, .70);
     font-size: .7rem;
     transition: all .2s
   }
   
   .tb-soc:hover {
     background: var(--gold);
     border-color: var(--gold);
     color: var(--navy)
   }
   
   /* =========================================================
      HEADER
      ========================================================= */
   header {
     background: var(--white);
     border-bottom: 1px solid rgba(200, 164, 61, .12);
     box-shadow: var(--shadow-sm);
     position: sticky;
     top: 0;
     z-index: 1000;
   }
   
   .hdr {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 76px
   }
   
   .logo {
     display: flex;
     align-items: center;
     gap: 12px
   }
   
   .logo img {
     height: 52px;
     width: auto
   }
   
   .logo-text .brand {
     font-family: 'Playfair Display', serif;
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--navy);
     line-height: 1;
     letter-spacing: -.01em
   }
   
   .logo-text .brand span {
     color: var(--gold-dark)
   }
   
   .logo-text .sub {
     font-size: .6rem;
     font-weight: 500;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--muted);
     margin-top: 4px
   }
   
   /* NAV */
   .main-nav {
     display: flex;
     align-items: center;
     gap: .1rem
   }
   
   /* Scoped to .main-nav so Bootstrap .nav-link :focus/:hover vars do not override */
   .main-nav .nav-link {
     font-size: .85rem;
     font-weight: 500;
     letter-spacing: .02em;
     color: var(--text);
     padding: .48rem .9rem;
     border-radius: 6px;
     transition: color .2s ease, background-color .2s ease
   }
   
   .main-nav .nav-link:hover,
   .main-nav .nav-link:focus,
   .main-nav .nav-link:focus-visible,
   .main-nav .nav-link:active,
   .main-nav .nav-link.active {
     color: var(--navy);
     background: var(--off)
   }
   
   .nav-drop {
     position: relative;
     font-size: .85rem;
     font-weight: 500;
     letter-spacing: .02em;
     color: var(--text);
     border-radius: 6px;
     transition: all .2s
   }
   
   .nav-drop>a::after {
     content: ' ▾';
     font-size: .95rem;
     opacity: .8
   }
   
   .nav-dropdown {
     display: none;
     position: absolute;
     top: calc(100%+10px);
     left: 0;
     background: var(--white);
     border: 1px solid var(--border-l);
     border-top: 2px solid var(--gold);
     border-radius: 0 0 var(--r) var(--r);
     padding: .4rem;
     min-width: 250px;
     box-shadow: var(--shadow-md);
     z-index: 200
   }
   
   .nav-drop:hover .nav-dropdown {
     display: block;
     animation: fade-down .15s ease
   }
   
   @keyframes fade-down {
     from {
       opacity: 0;
       transform: translateY(-5px)
     }
   
     to {
       opacity: 1;
       transform: translateY(0)
     }
   }
   
   .nav-dropdown a {
     display: block;
     padding: .5rem .85rem;
     border-radius: 6px;
     font-size: .78rem;
     font-weight: 500;
     color: var(--text);
     transition: all .15s
   }
   
   .nav-dropdown a:hover {
     background: var(--off);
     color: var(--navy)
   }
   
   .header-cta {
     font-size: .85rem;
     font-weight: 600;
     letter-spacing: .04em;
     background: var(--gold);
     color: rgba(255, 255, 255, 1.0);
     padding: .6rem 1.5rem;
     border-radius: var(--r);
     display: flex;
     align-items: center;
     gap: 7px;
     box-shadow: 0 3px 12px rgba(200, 164, 61, .35);
     transition: all .25s
   }
   
   .header-cta:hover {
     background: var(--gold-dark);
     color: var(--white);
     box-shadow: 0 5px 18px rgba(200, 164, 61, .45);
     transform: translateY(-1px)
   }
   
   .header-cta-wrap {
     display: flex;
     align-items: center;
     gap: 1rem
   }
   
   .hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 5px
   }
   
   .hamburger span {
     width: 22px;
     height: 2px;
     background: var(--navy);
     display: block;
     border-radius: 1px;
     transition: .3s
   }
   
   /* MOBILE NAV */
   .mob-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(16, 25, 39, .6);
     z-index: 9998
   }
   
   .mob-overlay.show {
     display: block
   }
   
   .mob-panel {
     display: none;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     width: 280px;
     background: var(--white);
     z-index: 9999;
     padding: 2rem 1.5rem;
     overflow-y: auto;
     border-left: 3px solid var(--gold)
   }
   
   .mob-panel.show {
     display: block
   }
   
   .mob-close {
     font-size: 1.6rem;
     color: var(--navy);
     cursor: pointer;
     display: flex;
     justify-content: flex-end;
     margin-bottom: 2rem
   }
   
   .mob-panel a {
     display: block;
     padding: .8rem 0;
     font-size: .88rem;
     font-weight: 500;
     color: var(--text);
     border-bottom: 1px solid var(--off);
     transition: color .2s
   }
   
   .mob-panel a:hover {
     color: var(--gold-dark)
   }
   
   /* =========================================================
      HERO
      ========================================================= */
   .hero {
     background: var(--navy);
     min-height: 90vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden
   }
   
   /* Subtle geometric decoration */
   .hero-bg {
     position: absolute;
     inset: 0;
     pointer-events: none;
     background:
       radial-gradient(ellipse 60% 70% at 80% 50%, rgba(200, 164, 61, .08) 0%, transparent 60%),
       radial-gradient(ellipse 40% 50% at 5% 90%, rgba(51, 62, 137, .15) 0%, transparent 55%)
   }
   
   .hero-pattern {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     width: 50%;
     background: linear-gradient(135deg, rgba(255, 254, 248, .03) 25%, transparent 25%) -10px 0,
       linear-gradient(225deg, rgba(255, 254, 248, .03) 25%, transparent 25%) -10px 0,
       linear-gradient(315deg, rgba(255, 254, 248, .03) 25%, transparent 25%),
       linear-gradient(45deg, rgba(255, 254, 248, .03) 25%, transparent 25%);
     background-size: 20px 20px;
     pointer-events: none;
     opacity: .4
   }
   
   .hero-line {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent)
   }
   
   .hero-inner {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: center;
     padding: 5rem 0
   }
   
   /* LEFT */
   .hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: .7rem;
     font-weight: 600;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--gold-light);
     margin-bottom: 1.6rem;
     opacity: 0;
     animation: rise .6s .1s forwards
   }
   
   .hero-eyebrow::before {
     content: '';
     width: 24px;
     height: 1px;
     background: var(--gold)
   }
   
   .hero h1 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(2.6rem, 4.5vw, 4.2rem);
     font-weight: 700;
     color: var(--white);
     line-height: 1.08;
     letter-spacing: -.02em;
     margin-bottom: 1.2rem;
     opacity: 0;
     animation: rise .6s .2s forwards
   }
   
   .hero h1 em {
     font-style: italic;
     color: var(--gold-light)
   }
   
   .hero-sub {
     font-size: 1rem;
     font-weight: 300;
     color: rgba(255, 254, 248, .85);
     line-height: 1.85;
     max-width: 480px;
     margin-bottom: 2.4rem;
     opacity: 0;
     animation: rise .6s .32s forwards
   }
   
   .hero-actions {
     display: flex;
     gap: .9rem;
     flex-wrap: wrap;
     opacity: 0;
     animation: rise .6s .44s forwards
   }
   
   .btn-primary {
     font-size: .85rem;
     font-weight: 600;
     letter-spacing: .04em;
     background: var(--gold);
     color: rgba(255, 255, 255, 1.0);
     padding: .8rem 2rem;
     border-radius: var(--r);
     display: inline-flex;
     align-items: center;
     gap: 8px;
     box-shadow: 0 4px 16px rgba(200, 164, 61, .38);
     transition: all .25s
   }
   
   .btn-primary:hover {
     background: var(--gold-light);
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(200, 164, 61, .45)
   }
   
   .btn-outline {
     font-size: .82rem;
     font-weight: 600;
     letter-spacing: .04em;
     background: transparent;
     color: var(--white);
     padding: .8rem 1.8rem;
     border-radius: var(--r);
     border: 1.5px solid rgba(255, 254, 248, .25);
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: all .25s
   }
   
   .btn-outline:hover {
     border-color: rgba(255, 254, 248, .6);
     background: rgba(255, 254, 248, .05)
   }
   
   .btn-primary--mt {
     display: inline-flex;
     margin-top: .5rem
   }
   
   .hero-stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     margin-top: 3rem;
     padding-top: 2.5rem;
     border-top: 1px solid rgba(255, 254, 248, .08);
     opacity: 0;
     animation: rise .6s .56s forwards
   }
   
   .hstat {
     padding: 0 1.4rem;
     border-right: 1px solid rgba(255, 254, 248, .08)
   }
   
   .hstat:first-child {
     padding-left: 0
   }
   
   .hstat:last-child {
     border-right: none
   }
   
   .hstat-num {
     font-family: 'Playfair Display', serif;
     font-size: 2.4rem;
     font-weight: 700;
     color: var(--white);
     line-height: 1
   }
   
   .hstat-num sup {
     font-size: 1.2rem;
     color: var(--gold-light)
   }
   
   .hstat-lbl {
     font-size: .68rem;
     font-weight: 500;
     color: rgba(255, 254, 248, .85);
     letter-spacing: .06em;
     margin-top: 4px;
     text-transform: uppercase
   }
   
   /* RIGHT – image stack */
   .hero-visual {
     position: relative;
     height: 500px;
     opacity: 0;
     animation: slide-in .7s .3s forwards
   }
   
   .hv-card {
     position: absolute;
     border-radius: var(--r-lg);
     overflow: hidden;
     box-shadow: var(--shadow-lg)
   }
   
   .hv-card img {
     width: 100%;
     height: 100%;
     object-fit: cover
   }
   
   .hv-main {
     width: 310px;
     height: 410px;
     right: 0;
     top: 0;
     background: var(--navy-mid)
   }
   
   .hv-mini {
     width: 200px;
     height: 252px;
     left: 112px;
     bottom: 0;
     border: 5px solid var(--white);
     background: var(--navy-mid)
   }
   
   .hv-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(16, 25, 39, .75) 0%, transparent 55%)
   }
   
   .hv-caption {
     position: absolute;
     bottom: 1rem;
     left: 1rem;
     right: 1rem
   }
   
   .hv-caption h4 {
     font-family: 'Playfair Display', serif;
     font-size: .95rem;
     font-weight: 600;
     color: var(--white)
   }
   
   .hv-caption p {
     font-size: .62rem;
     font-weight: 500;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--gold-light);
     margin-top: 2px
   }
   
   /* Gold frame on main card */
   .hv-main::after {
     content: '';
     position: absolute;
     inset: 0;
     border: 1px solid rgba(200, 164, 61, .2);
     border-radius: var(--r-lg);
     z-index: 2;
     pointer-events: none
   }
   
   /* Floating badge */
   .hv-badge {
     position: absolute;
     top: 20px;
     left: -16px;
     z-index: 5;
     background: var(--white);
     border-radius: 12px;
     padding: .7rem 1rem;
     display: flex;
     align-items: center;
     gap: 10px;
     box-shadow: var(--shadow-md);
     border: 1px solid var(--gold-pale);
     animation: float 4s ease-in-out infinite
   }
   
   .hv-badge-icon {
     width: 36px;
     height: 36px;
     background: var(--gold-pale);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--gold-dark);
     font-size: .9rem
   }
   
   .hv-badge-text strong {
     display: block;
     font-size: .82rem;
     font-weight: 600;
     color: var(--navy)
   }
   
   .hv-badge-text small {
     font-size: .7rem;
     color: var(--navy-mid);
     letter-spacing: .04em
   }
   
   .hv-badge2 {
     position: absolute;
     bottom: 10px;
     right: -18px;
     z-index: 5;
     background: var(--navy);
     border-radius: 12px;
     padding: .7rem 1rem;
     display: flex;
     align-items: center;
     gap: 10px;
     box-shadow: var(--shadow-md);
     border: 1px solid rgba(200, 164, 61, .8);
     animation: float 5s ease-in-out 1.5s infinite
   }
   
   .hv-badge2 .hv-badge-icon {
     background: rgba(200, 164, 61, .15);
     color: var(--gold-light)
   }
   
   .hv-badge2 .hv-badge-text strong {
     color: var(--white)
   }
   
   .hv-badge2 .hv-badge-text small {
     color: rgba(255, 254, 248, .45)
   }
   
   @keyframes float {
   
     0%,
     100% {
       transform: translateY(0)
     }
   
     50% {
       transform: translateY(-8px)
     }
   }
   
   @keyframes rise {
     from {
       opacity: 0;
       transform: translateY(18px)
     }
   
     to {
       opacity: 1;
       transform: translateY(0)
     }
   }
   
   @keyframes slide-in {
     from {
       opacity: 0;
       transform: translateX(24px)
     }
   
     to {
       opacity: 1;
       transform: translateX(0)
     }
   }
   
   /* =========================================================
      SHLOKA STRIP
      ========================================================= */
   .shloka-strip {
     background: var(--gold);
     padding: 0.75rem 0;
     text-align: center;
     position: relative;
     overflow: hidden
   }
   
   .shloka-strip::before,
   .shloka-strip::after {
     content: '✦';
     font-size: 1.6rem;
     color: rgba(255, 255, 255, .60);
     position: absolute;
     top: 50%;
     transform: translateY(-50%)
   }
   
   .shloka-strip::before {
     left: 3rem
   }
   
   .shloka-strip::after {
     right: 3rem
   }
   
   .shloka-strip p.skt {
     font-family: 'Playfair Display', serif;
     font-style: italic;
     font-size: 1.5rem;
     color: #ffffff;
     margin-bottom: .3rem
   }
   
   .shloka-strip p.en {
     font-size: 1.0rem;
     font-weight: 400;
     color: #ffffff;
   }
   
   /* =========================================================
      ABOUT
      ========================================================= */
   .about {
     padding: 7rem 0;
     background: var(--white)
   }
   
   .about-grid {
     display: grid;
     grid-template-columns: 1fr 1.05fr;
     gap: 6rem;
     align-items: center
   }
   
   /* image side */
   .about-imgs {
     position: relative;
     height: 540px
   }
   
   .ai-main {
     position: absolute;
     left: 0;
     top: 0;
     width: 72%;
     height: 86%;
     object-fit: cover;
     border-radius: var(--r) var(--r) 72px var(--r);
     box-shadow: var(--shadow-lg)
   }
   
   .ai-accent {
     position: absolute;
     right: 0;
     bottom: 0;
     width: 50%;
     height: 54%;
     object-fit: cover;
     border-radius: var(--r);
     border: 5px solid var(--white);
     box-shadow: var(--shadow-md)
   }
   
   .ai-gold-bar {
     position: absolute;
     left: -8px;
     top: 20%;
     bottom: 20%;
     width: 3px;
     background: linear-gradient(to bottom, var(--gold-light), var(--gold));
     border-radius: 2px
   }
   
   .ai-badge {
     position: absolute;
     top: 22px;
     right: -10px;
     z-index: 3;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background: var(--gold);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow: 0 8px 24px rgba(200, 164, 61, .45)
   }
   
   .ai-badge .num {
     font-family: 'Playfair Display', serif;
     font-size: 2.1rem;
     font-weight: 700;
     color: rgba(255, 255, 255, 1.0);
     line-height: 1
   }
   
   .ai-badge .lbl {
     font-size: .5rem;
     font-weight: 600;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 1.0);
     margin-top: 4px;
     text-align: center
   }
   
   /* text side – ensure description is always visible */
   .about-text {
     opacity: 1;
     transform: none;
   }
   
   .about-description {
     margin-bottom: 1rem;
     color: black;
     font-family: 'Poppins', sans-serif;
     font-weight: 500;
   }
   
   .about-features {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: .65rem;
     margin: 1.8rem 0
   }
   
   .af-item {
     display: flex;
     align-items: center;
     gap: 9px;
     padding: .75rem .9rem;
     border: 1px solid var(--border-l);
     border-radius: var(--r);
     background: var(--off);
     transition: all .2s
   }
   
   .af-item:hover {
     border-color: var(--gold);
     background: var(--gold-pale);
     transform: translateX(3px)
   }
   
   .af-icon {
     width: 30px;
     height: 30px;
     border-radius: 6px;
     background: var(--gold);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--navy);
     font-size: .8rem;
     flex-shrink: 0
   }
   
   .af-text {
     font-size: .8rem;
     font-weight: 500;
     color: var(--navy)
   }
   
   .about p {
     font-size: .92rem;
     line-height: 1.88;
     margin-bottom: .9rem
   }
   
   /* =========================================================
      SERVICES
      ========================================================= */
   .services {
     padding: 7rem 0;
     background: var(--navy)
   }
   
   .services .section-head h2 {
     color: var(--white)
   }
   
   .services .section-head p {
     color: rgba(255, 254, 248, .5)
   }
   
   .sv-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.2rem
   }
   
   .sv-card {
     background: rgba(255, 254, 248, .04);
     border: 1px solid rgba(255, 254, 248, .07);
     border-radius: var(--r-lg);
     overflow: hidden;
     text-decoration: none;
     display: flex;
     flex-direction: column;
     transition: all .3s;
     position: relative
   }
   
   .sv-card::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: var(--gold);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .35s
   }
   
   .sv-card:hover::before {
     transform: scaleX(1)
   }
   
   .sv-card:hover {
     background: rgba(255, 254, 248, .07);
     transform: translateY(-4px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, .25)
   }
   
   .sv-img {
     height: 200px;
     overflow: hidden;
     position: relative
   }
   
   .sv-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s
   }
   
   .sv-card:hover .sv-img img {
     transform: scale(1.05)
   }
   
   .sv-img::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(16, 25, 39, .85) 0%, transparent 50%)
   }
   
   .sv-num {
     position: absolute;
     top: 12px;
     right: 12px;
     z-index: 2;
     font-size: .72rem;
     font-weight: 600;
     letter-spacing: .1em;
     color: var(--gold-light);
     background: rgba(16, 25, 39, .65);
     border: 1px solid rgba(200, 164, 61, .25);
     padding: .2rem .65rem;
     border-radius: 5px
   }
   
   .sv-body {
     padding: 1.6rem 1.8rem;
     flex: 1;
     display: flex;
     flex-direction: column
   }
   
   .sv-name {
     font-family: 'Playfair Display', serif;
     font-size: 1.4rem;
     font-weight: 600;
     color: var(--white);
     margin-bottom: .5rem;
     transition: color .25s
   }
   
   .sv-card:hover .sv-name {
     color: var(--gold-light)
   }
   
   .sv-desc {
     font-size: .82rem;
     color: #ffffff;
     line-height: 1.78;
     margin-bottom: 1.3rem;
     flex: 1;
     transition: color .25s
   }
   
   .sv-card:hover .sv-desc {
     color: rgba(255, 254, 248, .75)
   }
   
   .sv-link {
     font-size: .73rem;
     font-weight: 600;
     letter-spacing: .06em;
     text-transform: uppercase;
     color: var(--gold);
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: gap .2s
   }
   
   .sv-card:hover .sv-link {
     gap: 10px
   }
   
   /* =========================================================
      TESTIMONIALS
      ========================================================= */
   .testimonials {
     padding: 5rem 0;
     background: var(--off)
   }
   
   .testi-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.2rem
   }
   
   .t-card {
     background: var(--white);
     border: 1px solid var(--border-l);
     border-radius: var(--r-lg);
     padding: 1.8rem;
     position: relative;
     transition: all .3s;
     overflow: hidden
   }
   
   .t-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--gold), var(--gold-dark));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .35s
   }
   
   .t-card:hover::after {
     transform: scaleX(1)
   }
   
   .t-card:hover {
     box-shadow: var(--shadow-md);
     transform: translateY(-3px)
   }
   
   .t-quote-mark {
     font-family: 'Playfair Display', serif;
     font-size: 4rem;
     color: var(--gold-light);
     line-height: 1;
     position: absolute;
     top: .5rem;
     right: 1.2rem
   }
   
   .t-stars {
     color: var(--gold);
     font-size: .75rem;
     letter-spacing: 2px;
     margin-bottom: .7rem
   }
   
   .t-text {
     font-family: 'Playfair Display', serif;
     font-size: .96rem;
     color: var(--text);
     line-height: 1.75;
     margin-bottom: 1.3rem;
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;
     overflow: hidden
   }
   
   .t-author {
     display: flex;
     align-items: center;
     gap: 10px;
     padding-top: .9rem;
     border-top: 1px solid var(--border-l)
   }
   
   .t-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     flex-shrink: 0;
     background: var(--gold);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Playfair Display', serif;
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--navy)
   }
   
   .t-name {
     font-size: .86rem;
     font-weight: 600;
     color: var(--navy)
   }
   
   .t-role {
     font-size: .65rem;
     font-weight: 500;
     letter-spacing: .06em;
     text-transform: uppercase;
     color: var(--muted);
     margin-top: 2px
   }
   
   /* Inner page testimonial carousel (Bootstrap-like) */
   .testimonials-section {
     padding: 4rem 0;
     background: var(--off)
   }
   
   .testimonial-carousel {
     position: relative;
     width: 100%;
     min-width: 320px;
     max-width: 720px;
     min-height: 0;
     margin: 0 auto;
     background: var(--white);
     border-radius: var(--r-lg);
     border: 1px solid var(--border-l);
     box-shadow: var(--shadow-sm);
     padding: 1.5rem 2rem 1.75rem;
   }
   
   .testimonial-card {
     text-align: left;
   }
   
   .testimonial-header {
     display: flex;
     align-items: center;
     gap: 0.85rem;
     margin-bottom: 0.75rem;
   }
   
   .testimonial-avatar-img {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     object-fit: cover;
   }
   
   .testimonial-name {
     font-size: 1rem;
     font-weight: 600;
     color: var(--navy);
     margin: 0 0 .15rem;
   }
   
   .testimonial-role {
     font-size: .78rem;
     color: var(--muted);
     margin: 0 0 .25rem;
   }
   
   .testimonial-text {
     font-family: 'Playfair Display', serif;
     font-size: .92rem;
     color: var(--text);
     line-height: 1.65;
     margin: 0;
   }
   
   .testimonial-carousel .carousel-inner {
     position: relative;
     min-height: 180px;
   }
   
   .testimonial-carousel .carousel-item {
     transition: opacity .5s ease-in-out, transform .5s ease-in-out;
   }
   
   .testimonial-carousel .carousel-item:not(.active) {
     opacity: 0;
     transform: translateX(8px);
     position: absolute;
     inset: 0;
   }
   
   .testimonial-carousel .carousel-item.active {
     opacity: 1;
     transform: translateX(0);
     position: relative;
   }
   
   .testimonial-carousel .carousel-control-prev,
   .testimonial-carousel .carousel-control-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: 1px solid var(--border);
     background: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: var(--shadow-sm);
     transition: background .2s, color .2s, border-color .2s;
     font-size: 0;
     line-height: 0;
   }
   
   .testimonial-carousel .carousel-control-prev .visually-hidden,
   .testimonial-carousel .carousel-control-next .visually-hidden {
     position: absolute !important;
     width: 1px !important;
     height: 1px !important;
     padding: 0 !important;
     margin: -1px !important;
     overflow: hidden !important;
     clip: rect(0, 0, 0, 0) !important;
     white-space: nowrap !important;
     border: 0 !important;
   }
   
   .testimonial-carousel .carousel-control-prev {
     left: -21px;
   }
   
   .testimonial-carousel .carousel-control-next {
     right: -21px;
   }
   
   .testimonial-carousel .carousel-control-prev-icon,
   .testimonial-carousel .carousel-control-next-icon {
     display: inline-block;
     width: 16px;
     height: 16px;
     border-top: 2px solid var(--navy);
     border-right: 2px solid var(--navy);
   }
   
   .testimonial-carousel .carousel-control-prev-icon {
     transform: rotate(-135deg);
   }
   
   .testimonial-carousel .carousel-control-next-icon {
     transform: rotate(45deg);
   }
   
   .testimonial-carousel .carousel-control-prev:hover,
   .testimonial-carousel .carousel-control-next:hover {
     background: var(--gold);
     border-color: var(--gold);
   }
   
   .testimonial-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
   .testimonial-carousel .carousel-control-next:hover .carousel-control-next-icon {
     border-color: var(--white);
   }
   
   .testimonial-carousel .carousel-indicators {
     display: flex;
     justify-content: center;
     gap: .4rem;
     margin-top: 1.6rem;
   }
   
   .testimonial-carousel .carousel-indicators button {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     border: none;
     background: var(--border);
     cursor: pointer;
     padding: 0;
   }
   
   .testimonial-carousel .carousel-indicators button.active {
     background: var(--gold);
   }
   
   @media (max-width: 640px) {
     .testimonial-carousel {
       padding: 1.8rem 1.5rem 2.2rem;
     }
   
     .testimonial-header {
       flex-direction: row;
       align-items: flex-start;
     }
   
     .testimonial-avatar-img {
       width: 60px;
       height: 60px;
     }
   
     .testimonial-carousel .carousel-control-prev,
     .testimonial-carousel .carousel-control-next {
       display: none;
     }
   }
   
   /* =========================================================
      CONTACT PAGE
      ========================================================= */
   .contact-section01 {
     padding: 3rem 0 2.5rem;
     background: var(--white);
   }
   
   .contact-info-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 0;
     border: 1px solid var(--border-l);
     border-radius: var(--r-lg);
     overflow: hidden;
     background: var(--white);
     box-shadow: var(--shadow-sm);
   }
   
   .contact-info-card {
     display: flex;
     align-items: flex-start;
     gap: 1rem;
     padding: 1.5rem 1.5rem 1.6rem;
     background: var(--white);
     border-right: 1px solid var(--border-l);
     border-bottom: 1px solid var(--border-l);
     transition: background .2s;
   }
   
   .contact-info-card:nth-child(2n) {
     border-right: none;
   }
   
   .contact-info-card:nth-last-child(-n+2) {
     border-bottom: none;
   }
   
   .contact-info-card:hover {
     background: var(--off);
   }
   
   .contact-info-icon {
     width: 44px;
     height: 44px;
     border-radius: var(--r);
     background: var(--gold-pale);
     color: var(--gold-dark);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     flex-shrink: 0;
   }
   
   .contact-info-card h3 {
     font-family: 'Playfair Display', serif;
     font-size: 1rem;
     font-weight: 600;
     color: var(--navy);
     margin: 0 0 .35rem;
   }
   
   .contact-info-card .contact-info-desc,
   .contact-info-card .contact-info-desc p {
     font-size: .88rem;
     color: var(--muted);
     line-height: 1.6;
     margin: 0;
   }
   
   .contact-info-card a {
     color: var(--navy);
     font-weight: 500;
     transition: color .2s;
   }
   
   .contact-info-card a:hover {
     color: var(--gold-dark);
   }
   
   .contact-info-list {
     list-style: none;
     padding: 0;
     margin: .25rem 0 0;
   }
   
   .contact-info-list li {
     font-size: .88rem;
     color: var(--muted);
     margin-bottom: .2rem;
   }
   
   .contact-info-list a {
     font-weight: 500;
     color: var(--navy);
   }
   
   .contact-socials {
     display: flex;
     gap: .5rem;
     margin-top: .4rem;
   }
   
   .contact-socials a {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--navy);
     transition: all .2s;
   }
   
   .contact-socials a:hover {
     background: var(--gold);
     border-color: var(--gold);
     color: var(--white);
   }
   
   .contact-hours-card {
     background: var(--navy);
     border-radius: var(--r-lg);
     padding: 2rem 1.75rem;
     position: relative;
     overflow: hidden;
   }
   
   .contact-hours-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--gold);
   }
   
   .contact-hours-card h3 {
     font-family: 'Playfair Display', serif;
     font-size: 1.2rem;
     font-weight: 600;
     color: var(--white);
     margin: 0 0 1rem;
   }
   
   .contact-hours-card p {
     font-size: .9rem;
     color: rgba(255, 254, 248, .85);
     margin: 0 0 .35rem;
     line-height: 1.5;
   }
   
   .contact-hours-card .contact-hours-closed {
     color: rgba(255, 254, 248, .6);
     margin-top: .5rem;
   }
   
   .contact-hours-card .contact-hours-cta {
     font-size: .95rem;
     font-weight: 500;
     color: var(--gold-light);
     margin-top: 1.25rem;
     line-height: 1.5;
   }
   
   .contact-layout {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 2.5rem;
     align-items: start;
   }
   
   @media (max-width: 991px) {
     .contact-layout {
       grid-template-columns: 1fr;
     }
   
     .contact-hours-card {
       margin-top: 0;
     }
   }
   
   @media (max-width: 640px) {
     .contact-info-grid {
       grid-template-columns: 1fr;
     }
   
     .contact-info-card {
       border-right: none;
       border-bottom: 1px solid var(--border-l);
     }
   
     .contact-info-card:nth-last-child(-n+2) {
       border-bottom: 1px solid var(--border-l);
     }
   
     .contact-info-card:last-child {
       border-bottom: none;
     }
   }
   
   /* Contact form section */
   .contact-form-section {
     padding: 3rem 0 4rem;
     background: var(--off);
   }
   
   .contact-form-section h3 {
     font-family: 'Playfair Display', serif;
     font-size: 1.6rem;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 1.5rem;
   }
   
   .contact-form-card {
     background: var(--white);
     border: 1px solid var(--border-l);
     border-radius: var(--r-lg);
     padding: 2rem 2rem 2.5rem;
     max-width: 720px;
     margin: 0 auto;
     box-shadow: var(--shadow-sm);
   }
   
   .contact-form-card::before {
     content: '';
     display: block;
     height: 3px;
     background: linear-gradient(90deg, var(--gold), var(--gold-dark));
     border-radius: var(--r-lg) var(--r-lg) 0 0;
     margin: -2rem -2rem 1.5rem -2rem;
   }
   
   .contact-form .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
     margin-bottom: 1rem;
   }
   
   .contact-form .form-row-full {
     grid-column: 1 / -1;
   }
   
   .contact-form label.f-label {
     display: block;
     font-size: .72rem;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: .4rem;
   }
   
   .contact-form .f-input-light {
     width: 100%;
     padding: .75rem 1rem;
     border: 1px solid var(--border-l);
     border-radius: 8px;
     font-family: 'DM Sans', sans-serif;
     font-size: .9rem;
     color: var(--text);
     background: var(--white);
     transition: border-color .2s, box-shadow .2s;
   }
   
   .contact-form .f-input-light::placeholder {
     color: var(--muted);
   }
   
   .contact-form .f-input-light:focus {
     outline: none;
     border-color: var(--gold);
     box-shadow: 0 0 0 3px rgba(200, 164, 61, .15);
   }
   
   .contact-form textarea.f-input-light {
     resize: vertical;
     min-height: 100px;
   }
   
   .contact-form select.f-input-light {
     appearance: auto;
     cursor: pointer;
   }
   
   .contact-form .form-check {
     display: flex;
     align-items: flex-start;
     gap: .5rem;
     margin: 1rem 0 1.25rem;
   }
   
   .contact-form .form-check input {
     margin-top: .25rem;
     accent-color: var(--gold);
   }
   
   .contact-form .form-check label {
     font-size: .85rem;
     color: var(--muted);
     cursor: pointer;
   }
   
   .contact-form .btn-submit {
     width: 100%;
     padding: .9rem 1.5rem;
     font-size: .9rem;
     font-weight: 600;
     letter-spacing: .04em;
     background: var(--gold);
     color: var(--navy);
     border: none;
     border-radius: var(--r);
     cursor: pointer;
     font-family: 'DM Sans', sans-serif;
     box-shadow: 0 4px 16px rgba(200, 164, 61, .35);
     transition: all .25s;
   }
   
   .contact-form .btn-submit:hover {
     background: var(--gold-dark);
     color: var(--white);
     box-shadow: 0 6px 20px rgba(200, 164, 61, .45);
     transform: translateY(-1px);
   }
   
   /* Map */
   .contact-map-wrap {
     padding: 0 0 2rem;
   }
   
   .contact-map-wrap .map-ratio {
     position: relative;
     width: 100%;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
     border-radius: var(--r-lg);
     border: 1px solid var(--border-l);
     box-shadow: var(--shadow-sm);
   }
   
   .contact-map-wrap .map-ratio iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 0;
   }
   
   .contact-map-wrap .map-ratio .map-link-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 2;
   }
   
   @media (max-width: 640px) {
     .contact-form .form-row {
       grid-template-columns: 1fr;
     }
   
     .contact-form-card {
       padding: 1.5rem 1.25rem 2rem;
     }
   
     .contact-form-card::before {
       margin: -1.5rem -1.25rem 1.25rem -1.25rem;
     }
   }
   
   /* Booking appointment page */
   .booking-section {
     padding: 2.5rem 0 4rem;
     background: var(--off);
   }
   
   .booking-intro {
     text-align: center;
     max-width: 560px;
     margin: 0 auto 2rem;
     font-size: .95rem;
     color: var(--muted);
     line-height: 1.7;
   }
   
   .booking-intro .booking-phone {
     font-weight: 600;
     color: var(--navy);
     white-space: nowrap;
   }
   
   .booking-intro .booking-phone:hover {
     color: var(--gold-dark);
   }
   
   .booking-form-card {
     max-width: 640px;
     margin: 0 auto;
   }
   
   .contact-form .required {
     color: var(--gold-dark);
   }
   
   .contact-form .form-check label a {
     color: var(--gold-dark);
     text-decoration: underline;
   }
   
   .contact-form .form-check label a:hover {
     color: var(--navy);
   }
   
   .contact-form .btn-submit i {
     margin-right: .4rem;
   }
   
   /* =========================================================
      APPOINTMENT
      ========================================================= */
   .appointment {
     padding: 7rem 0;
     background: var(--navy)
   }
   
   .appointment .section-head h2 {
     color: var(--white)
   }
   
   .appointment .section-head p {
     color: rgba(255, 254, 248, .7);
     max-width: 1080px;
   }
   
   .appt-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: start
   }
   
   .appt-info {
     display: flex;
     flex-direction: column;
     gap: .75rem
   }
   
   .ai-row {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: .9rem 1rem;
     background: rgba(255, 254, 248, .04);
     border: 1px solid rgba(255, 254, 248, .07);
     border-radius: var(--r);
     border-left: 2px solid var(--gold);
     transition: border-left-color .2s
   }
   
   .ai-row:hover {
     border-left-color: var(--gold-light);
     background: rgba(200, 164, 61, .06)
   }
   
   .ai-ico {
     width: 34px;
     height: 34px;
     border-radius: 7px;
     flex-shrink: 0;
     background: rgba(200, 164, 61, .12);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--gold);
     font-size: .8rem
   }
   
   .ai-main-txt {
     font-size: .90rem;
     font-weight: 500;
     color: rgba(255, 254, 248, .85)
   }
   
   .ai-main-txt a {
     color: rgba(255, 254, 248, .85)
   }
   
   .ai-main-txt a:hover {
     color: var(--gold-light)
   }
   
   .ai-sub-txt {
     font-size: .76rem;
     color: rgba(255, 254, 248, .60);
     margin-top: 2px
   }
   
   /* Form */
   .form-card {
     background: rgba(255, 254, 248, .05);
     border: 1px solid rgba(200, 164, 61, .18);
     border-radius: var(--r-lg);
     padding: 2.2rem;
     position: relative;
     overflow: hidden
   }
   
   .form-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: var(--gold)
   }
   
   .form-title {
     font-family: 'Playfair Display', serif;
     font-size: 1.15rem;
     font-weight: 600;
     color: var(--gold-light);
     margin-bottom: 1.4rem
   }
   
   .form-title i:first-child {
     margin-right: 8px;
     font-size: .95rem
   }
   
   .f-submit i {
     font-size: 1.05rem
   }
   
   .f-label {
     font-size: .68rem;
     font-weight: 600;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: rgba(255, 254, 248, .7);
     display: block;
     margin-bottom: 5px
   }
   
   .f-input {
     width: 100%;
     background: rgba(255, 254, 248, .06);
     border: 1px solid rgba(255, 254, 248, .1);
     border-radius: 12px;
     padding: .78rem .95rem;
     font-family: 'DM Sans', sans-serif;
     font-size: .88rem;
     color: rgba(255, 254, 248, .92);
     outline: none;
     transition: all .2s;
     margin-bottom: .9rem;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none
   }
   
   /* Home appointment form: gray input background by default (override Bootstrap/white) */
   .appointment .form-card .f-input,
   .appointment .form-card input.f-input,
   .appointment .form-card select.f-input,
   .appointment .form-card textarea.f-input {
     background-color: rgba(255, 254, 248, .12) !important;
     border-color: rgba(255, 254, 248, .2);
   }
   
   /* Some browsers apply native styling to date inputs; force consistent rounding */
   .appointment .form-card input.f-input[type="date"] {
     border-radius: 12px !important;
   }
   
   .appointment .form-card .f-input:focus,
   .appointment .form-card input.f-input:focus,
   .appointment .form-card select.f-input:focus,
   .appointment .form-card textarea.f-input:focus {
     background-color: rgba(200, 164, 61, .15) !important;
     border-color: var(--gold);
     box-shadow: 0 0 0 3px rgba(200, 164, 61, .12);
   }
   
   .f-input::placeholder {
     /* Match the "Choose a service..." tone */
     color: rgba(255, 254, 248, .58)
   }
   
   .f-input:not(:placeholder-shown) {
     /* While typing: slightly brighter than placeholder */
     color: rgba(255, 254, 248, .92)
   }
   
   .appointment .form-card select.f-input:required:invalid {
     /* "Choose a service..." (no value selected) */
     color: rgba(255, 254, 248, .58)
   }
   
   .appointment .form-card select.f-input option[value=""] {
     color: rgba(255, 254, 248, .58)
   }
   
   .appointment .form-card select.f-input:required:valid {
     color: rgba(255, 254, 248, .92)
   }
   
   .f-input:focus {
     border-color: var(--gold);
     background: rgba(200, 164, 61, .08);
     box-shadow: 0 0 0 3px rgba(200, 164, 61, .12)
   }
   
   .f-input option {
     background: var(--navy-mid);
     color: var(--white)
   }
   
   .f-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: .9rem
   }
   
   .f-textarea {
     resize: none;
     height: 94px
   }
   
   .f-submit {
     width: 100%;
     border: none;
     padding: .88rem;
     border-radius: 8px;
     background: var(--gold);
     color: var(--navy);
     cursor: pointer;
     margin-top: .4rem;
     font-family: 'DM Sans', sans-serif;
     font-size: .94rem;
     font-weight: 600;
     letter-spacing: .04em;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     box-shadow: 0 4px 16px rgba(200, 164, 61, .38);
     transition: all .3s
   }
   
   .f-submit:hover {
     background: var(--gold-light);
     transform: translateY(-2px);
     box-shadow: 0 7px 22px rgba(200, 164, 61, .48)
   }
   
   /* =========================================================
      CTA STRIP
      ========================================================= */
   .cta-strip {
     background: var(--gold-pale);
     border-top: 1px solid var(--border);
     padding: 2.2rem 0
   }
   
   .cta-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 1.5rem
   }
   
   .cta-text small {
     font-size: .75rem;
     font-weight: 600;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--gold-dark);
     display: block;
     margin-bottom: 3px
   }
   
   .cta-text h3 {
     font-family: 'Playfair Display', serif;
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--navy)
   }
   
   .cta-text h3 em {
     font-style: italic
   }
   
   .cta-phone {
     font-family: 'Playfair Display', serif;
     font-size: 1.8rem;
     font-weight: 700;
     color: var(--navy);
     letter-spacing: -.02em;
     transition: color .2s
   }
   
   .cta-phone:hover {
     color: var(--gold-dark)
   }
   
   .cta-btn {
     font-size: .78rem;
     font-weight: 600;
     letter-spacing: .04em;
     border: 2px solid var(--navy);
     color: var(--navy);
     padding: .7rem 1.8rem;
     border-radius: var(--r);
     transition: all .25s;
     white-space: nowrap
   }
   
   .cta-btn:hover {
     background: var(--navy);
     color: var(--white);
     transform: translateY(-1px)
   }
   
   /* =========================================================
      FOOTER
      ========================================================= */
   footer {
     background: var(--navy)
   }
   
   footer::before {
     content: '';
     display: block;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent)
   }
   
   .ft-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1.4fr 1.6fr;
     gap: 3rem;
     padding: 5rem 0 3rem
   }
   
   .ft-brand-name {
     font-family: 'Playfair Display', serif;
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--white);
     margin-bottom: 3px
   }
   
   .ft-brand-name span {
     color: var(--gold)
   }
   
   .ft-tagline {
     font-size: .6rem;
     font-weight: 500;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: rgba(255, 254, 248, .70);
     margin-bottom: 1.1rem
   }
   
   .ft-desc {
     font-size: .8rem;
     color: #ffffff;
     line-height: 1.78;
     margin-bottom: 1.4rem
   }
   
   .ft-socials {
     display: flex;
     gap: .45rem
   }
   
   .ft-soc {
     width: 32px;
     height: 32px;
     border-radius: 6px;
     border: 1px solid rgba(255, 254, 248, .50);
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, .70);
     font-size: .7rem;
     transition: all .2s
   }
   
   .ft-soc:hover {
     background: var(--gold);
     border-color: var(--gold);
     color: var(--navy)
   }
   
   .ft-col-title {
     font-size: .72rem;
     font-weight: 600;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 1.1rem;
     padding-bottom: .6rem;
     border-bottom: 1px solid rgba(255, 254, 248, .06)
   }
   
   .ft-links {
     list-style: none
   }
   
   .ft-links li {
     margin-bottom: .32rem
   }
   
   .ft-links a {
     font-size: .8rem;
     color: rgba(255, 254, 248, .60);
     transition: color .2s;
     display: inline-flex;
     align-items: center;
     gap: 5px
   }
   
   .ft-links a::before {
     content: '›';
     color: var(--gold);
     opacity: .8;
     font-size: .92rem
   }
   
   .ft-links a:hover {
     color: rgba(255, 254, 248, .85)
   }
   
   .ft-hours-row {
     display: flex;
     justify-content: space-between;
     padding: .42rem 0;
     border-bottom: 1px solid rgba(255, 254, 248, .40)
   }
   
   .ft-hours-row .day {
     font-size: .78rem;
     color: rgba(255, 254, 248, .60)
   }
   
   .ft-hours-row .time {
     font-size: .78rem;
     font-weight: 600;
     color: var(--gold-light)
   }
   
   .ft-hours-row .time.closed {
     color: #e07070
   }
   
   .ft-hours-row--no-border {
     border-bottom: none
   }
   
   .ft-note-sm {
     font-size: .75rem;
     color: rgba(255, 254, 248, .60);
     margin-top: .7rem;
   }
   
   .ft-ci {
     display: flex;
     gap: 9px;
     align-items: flex-start;
     padding: .42rem 0;
     border-bottom: 1px solid rgba(255, 254, 248, .40)
   }
   
   .ft-ci i {
     color: var(--gold);
     font-size: .7rem;
     margin-top: 3px;
     flex-shrink: 0
   }
   
   .ft-ci a,
   .ft-ci span {
     font-size: .78rem;
     color: rgba(255, 254, 248, .60);
     transition: color .2s
   }
   
   .ft-ci a:hover {
     color: var(--gold-light)
   }
   
   .ft-no-branch {
     font-size: .75rem;
     font-weight: 600;
     letter-spacing: .05em;
     color: var(--gold);
     margin-top: 1rem;
     opacity: .85
   }
   
   .ft-bottom {
     border-top: 1px solid rgba(255, 254, 248, .60);
     padding: 1.4rem 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem
   }
   
   .ft-bottom p {
     font-size: .74rem;
     color: rgba(255, 254, 248, .60)
   }
   
   .ft-bottom a {
     color: var(--gold-light)
   }
   
   /* =========================================================
      SCROLL REVEAL (slow animations, replay every time on scroll)
      ========================================================= */
   .sr,
   .sr-up {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 1s ease-out, transform 1s ease-out;
   }
   
   .sr.visible,
   .sr-up.visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   .sr-l {
     opacity: 0;
     transform: translateX(-40px);
     transition: opacity 1s ease-out, transform 1s ease-out;
   }
   
   .sr-l.visible {
     opacity: 1;
     transform: translateX(0);
   }
   
   .sr-r {
     opacity: 0;
     transform: translateX(40px);
     transition: opacity 1s ease-out, transform 1s ease-out;
   }
   
   .sr-r.visible {
     opacity: 1;
     transform: translateX(0);
   }
   
   .sr-in {
     opacity: 0;
     transition: opacity 1s ease-out;
   }
   
   .sr-in.visible {
     opacity: 1;
   }
   
   .d1 {
     transition-delay: .1s;
   }
   
   .d2 {
     transition-delay: .2s;
   }
   
   .d3 {
     transition-delay: .3s;
   }
   
   .d4 {
     transition-delay: .4s;
   }
   
   /* Blog listing: whole card links to detail page */
   .blog-card-link {
     cursor: pointer;
     transition: transform 0.25s ease, box-shadow 0.25s ease;
   }
   
   .blog-card-link:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   }
   
   /* =========================================================
      INNER PAGES - Team, About, etc.
      ========================================================= */
   .page-banner {
     background: var(--navy);
     padding: 4rem 0 3rem;
     text-align: center;
     position: relative
   }
   
   .page-banner::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent)
   }
   
   .page-banner h1 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(1.8rem, 4vw, 2.5rem);
     font-weight: 700;
     color: var(--white);
     margin-bottom: .5rem
   }
   
   .page-banner h1 em {
     font-style: italic;
     color: var(--gold-light)
   }
   
   .page-banner .breadcrumb {
     font-size: .8rem;
     color: rgba(255, 254, 248, .7);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .4rem;
     flex-wrap: wrap
   }
   
   .page-banner .breadcrumb a {
     color: var(--gold-light);
     transition: color .2s
   }
   
   .page-banner .breadcrumb a:hover {
     color: var(--white)
   }
   
   .page-banner .breadcrumb span:last-child {
     color: rgba(255, 254, 248, .5)
   }
   
   .team-section {
     padding: 5rem 0;
     background: var(--white)
   }
   
   .team-grid {
     display: grid;
     grid-template-columns: 1fr 1.4fr;
     gap: 4rem;
     align-items: start;
     max-width: 1000px
   }
   
   .team-img-wrap {
     border-radius: var(--r-lg);
     /* overflow: hidden;
     box-shadow: var(--shadow-lg) */
   }
   
   .team-img-wrap img {
     width: 100%;
     height: auto;
     display: block
   }
   
   .team-info h2 {
     font-family: 'Playfair Display', serif;
     font-size: 1.8rem;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: .3rem
   }
   
   .team-info .role {
     font-size: .9rem;
     color: var(--gold-dark);
     font-weight: 600;
     letter-spacing: .04em;
     margin-bottom: 1.5rem
   }
   
   .team-info p,
   .team-info .team-list {
     font-size: .9rem;
     color: var(--muted);
     line-height: 1.85;
     margin-bottom: 1.2rem
   }
   
   .team-list {
     list-style: none
   }
   
   .team-list li {
     margin-bottom: .5rem;
     padding-left: 0
   }
   
   .team-list li span {
     font-weight: 600;
     color: var(--navy);
     min-width: 120px;
     display: inline-block
   }
   
   .team-socials {
     display: flex;
     gap: .5rem;
     margin-top: 1.2rem
   }
   
   .team-socials a {
     width: 38px;
     height: 38px;
     border-radius: 8px;
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--navy);
     transition: all .2s
   }
   
   .team-socials a:hover {
     background: var(--gold);
     border-color: var(--gold);
     color: var(--white)
   }
   
   .tabs-section {
     padding: 4rem 0;
     background: var(--off)
   }
   
   .tabs-header {
     display: flex;
     flex-wrap: wrap;
     gap: .3rem;
     margin-bottom: 2rem;
     border-bottom: 1px solid var(--border-l)
   }
   
   .tabs-header .tab-btn {
     padding: .7rem 1.4rem;
     font-size: .85rem;
     font-weight: 600;
     /* color: var(--muted); */
     color: #fff;
     background: none;
     border: none;
     cursor: pointer;
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
     transition: all .2s;
     font-family: 'DM Sans', sans-serif
   }
   
   .tabs-header .tab-btn:hover {
     /* color: var(--navy) */
     color: #b8924a
   }
   
   .tabs-header .tab-btn.active {
     color: var(--gold-dark);
     border-bottom-color: var(--gold)
   }
   
   .tab-panel {
     display: none
   }
   
   .tab-panel.active {
     display: block
   }
   
   .tab-panel ul {
     list-style: none
   }
   
   .tab-panel li {
     display: flex;
     gap: .6rem;
     margin-bottom: .7rem;
     font-size: .9rem;
     color: var(--text);
     line-height: 1.7
   }
   
   .tab-panel li::before {
     content: '';
     width: 6px;
     height: 6px;
     background: var(--gold);
     border-radius: 50%;
     margin-top: .5em;
     flex-shrink: 0
   }
   
   .team-form-section {
     padding: 5rem 0;
     background: var(--white)
   }
   
   .team-form-section h3 {
     font-family: 'Playfair Display', serif;
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 1.5rem
   }
   
   .team-form-section .form-card {
     max-width: 720px;
     background: var(--off);
     border: 1px solid var(--border-l)
   }
   
   .team-form-section .form-card::before {
     background: var(--gold)
   }
   
   .team-form-section .f-label {
     color: var(--muted)
   }
   
   .team-form-section .f-input {
     background: var(--white);
     border-color: var(--border-l);
     color: var(--text)
   }
   
   .team-form-section .f-input::placeholder {
     color: var(--muted)
   }
   
   .team-form-section .f-input:focus {
     border-color: var(--gold);
     background: var(--white);
     box-shadow: 0 0 0 3px rgba(200, 164, 61, .15)
   }
   
   @media (max-width: 900px) {
     .team-grid {
       grid-template-columns: 1fr
     }
   }
   
   /* Content grid (for inner pages using row/col) */
   .row {
     display: flex;
     flex-wrap: wrap;
     margin: 0 -0.75rem
   }
   
   .row>[class*="col-"] {
     padding: 0 0.75rem;
     margin-bottom: 1rem;
     box-sizing: border-box
   }
   
   .col-lg-12 {
     flex: 0 0 100%;
     max-width: 100%
   }
   
   .col-lg-6 {
     flex: 0 0 50%;
     max-width: 50%
   }
   
   .col-lg-5 {
     flex: 0 0 41.666667%;
     max-width: 41.666667%
   }
   
   .col-lg-7 {
     flex: 0 0 58.333333%;
     max-width: 58.333333%
   }
   
   .col-lg-4 {
     flex: 0 0 33.333333%;
     max-width: 33.333333%
   }
   
   .col-lg-3 {
     flex: 0 0 25%;
     max-width: 25%
   }
   
   .col-md-4 {
     flex: 0 0 33.333333%;
     max-width: 33.333333%
   }
   
   .col-md-6 {
     flex: 0 0 50%;
     max-width: 50%
   }
   
   .col-md-12 {
     flex: 0 0 100%;
     max-width: 100%
   }
   
   .col-sm-12 {
     flex: 0 0 100%;
     max-width: 100%
   }
   
   .col-xl-10 {
     flex: 0 0 83.333333%;
     max-width: 83.333333%
   }
   
   .m-auto {
     margin-left: auto;
     margin-right: auto
   }
   
   @media (max-width: 991px) {
   
     .col-lg-6,
     .col-lg-5,
     .col-lg-7,
     .col-lg-4,
     .col-lg-3,
     .col-md-4,
     .col-md-6 {
       flex: 0 0 100%;
       max-width: 100%
     }
   }
   
   /* Old page-title banner styling – exact match to HTML reference (theme-only look) */
   .prt-page-title-row {
     background: var(--navy) !important;
     padding: 4rem 0 3rem !important;
     text-align: center;
     position: relative
   }
   
   /* Banner images from banner-images folder (match image name to page) */
   .prt-page-title-row.bg-about {
     background-color: var(--navy);
     background-image: url('../images/banner-images/About_image.webp') !important;
     background-size: cover !important;
     background-position: center !important;
   }
   
   .prt-page-title-row.bg-blog {
     background-color: var(--navy);
     background-image: url('../images/banner-images/Blog.webp') !important;
     background-size: cover !important;
     background-position: center !important;
   }
   
   .prt-page-title-row.bg-contct {
     background-color: var(--navy);
     background-image: url('../images/banner-images/Contact us.webp') !important;
     background-size: cover !important;
     background-position: center !important;
   }
   
   .prt-page-title-row.bg-dr-nirav {
     /* background-color: var(--navy); */
     background-image: url('../images/banner-images/dr_nirav_Image.webp') !important;
     /* background-size: cover !important; */
     /* background-position: center !important; */
   }
   
   .prt-page-title-row.bg-dr-dhruti {
     /* background-color: var(--navy); */
     background-image: url('../images/banner-images/Dr_Dhruti_Image.png') !important;
     /* background-size: cover !important; */
     /* background-position: center !important; */
   }
   
   .prt-page-title-row.bg-gallery {
     background-color: var(--navy);
     background-image: url('../images/banner-images/Gallery.webp') !important;
     background-size: cover !important;
     background-position: center !important;
   }
   
   .prt-page-title-row.bg-service-homoeopathy {
     background-color: var(--navy);
     background-image: url('../images/banner-images/Homoeopathy Treatment.webp') !important;
     background-size: cover !important;
     background-position: center !important;
   }
   
   .prt-page-title-row.bg-service-panchkrm {
     background-color: var(--navy);
     background-image: url('../images/banner-images/Panchakarma Treatment.webp') !important;
     background-size: cover !important;
     background-position: center !important;
   }
   
   .prt-page-title-row.bg-testiminial {
     background-color: var(--navy);
     background-image: url('../images/banner-images/Testimonial.webp') !important;
     background-size: cover !important;
     background-position: center !important;
   }
   
   .prt-page-title-row.bg-service-ayurveda {
     background-color: var(--navy);
     background-image: url('/images/banner-images/Ayurvedic Treatment.webp') !important;
     background-size: cover !important;
     background-position: center !important;
   }
   
   /* Solid navy only for variants with no image in folder */
   .prt-page-title-row.bg-team {
     background-color: var(--navy) !important;
     background-image: none !important
   }
   
   /* Dark overlay on all banner images for text readability */
   .prt-page-title-row.bg-about .prt-page-title-row-inner,
   .prt-page-title-row.bg-blog .prt-page-title-row-inner,
   .prt-page-title-row.bg-contct .prt-page-title-row-inner,
   .prt-page-title-row.bg-dr-nirav .prt-page-title-row-inner,
   .prt-page-title-row.bg-dr-dhruti .prt-page-title-row-inner,
   .prt-page-title-row.bg-gallery .prt-page-title-row-inner,
   .prt-page-title-row.bg-service-homoeopathy .prt-page-title-row-inner,
   .prt-page-title-row.bg-service-panchkrm .prt-page-title-row-inner,
   .prt-page-title-row.bg-service-ayurveda .prt-page-title-row-inner,
   .prt-page-title-row.bg-testiminial .prt-page-title-row-inner {
     /* background-color: rgba(0, 0, 0, 0.35) !important; */
   }
   
   /* Override main.css: inner padding */
   .prt-page-title-row .prt-page-title-row-inner {
     padding: 2rem 0 1.5rem !important;
     background-color: transparent !important
   }
   
   /* Gold line between banner and content (match HTML reference) */
   .home-page-title-mobile {
     display: none;
   }
   
   .prt-page-title-row::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: var(--gold)
   }
   
   .prt-page-title-row .title,
   .prt-page-title-row .page-title-heading h2 {
     font-family: 'Playfair Display', serif !important;
     font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
     font-weight: 700 !important;
     color: var(--white) !important;
     margin-bottom: .5rem
   }
   
   .prt-page-title-row .breadcrumb-wrapper {
     font-size: .8rem;
     color: rgba(255, 254, 248, .7);
     border-top: none !important
   }
   
   /* Banner breadcrumb: Home link white, current page gold (match HTML reference) */
   .prt-page-title-row .breadcrumb-wrapper a {
     color: var(--white);
     transition: color .2s
   }
   
   .prt-page-title-row .breadcrumb-wrapper a:hover {
     color: var(--gold-light)
   }
   
   .prt-page-title-row .breadcrumb-wrapper span {
     color: var(--gold-light)
   }
   
   .site-main {
     /* padding: 3rem 0; */
     background: var(--white);
     overflow-x: hidden;
   }
   
   .d-flex {
     display: flex
   }
   
   .align-items-center {
     align-items: center
   }
   
   .justify-content-between {
     justify-content: space-between
   }
   
   @media (max-width:1024px) {
     .home-page-title-mobile {
       display: block;
     }
   }
   
   /* =========================================================
      GALLERY GRID - Responsive, max 3 columns
      ========================================================= */
   .grid-view {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.25rem;
     padding: 2rem 0
   }
   
   /* Grid responsive: 3 cols -> 2 cols -> 1 col */
   @media (max-width: 900px) {
     .grid-view {
       grid-template-columns: repeat(2, 1fr);
       gap: 1rem
     }
   }
   
   @media (max-width: 560px) {
     .grid-view {
       grid-template-columns: 1fr;
       gap: 1rem;
       padding: 1.5rem 0
     }
   }
   
   .grid-view>* {
     height: 100%
   }
   
   .gallery-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.25rem;
     padding: 2rem 0
   }
   
   .gallery-item {
     border-radius: 12px;
     overflow: hidden;
     background: var(--white);
     border: 1px solid var(--border-l);
     transition: transform .25s, box-shadow .25s
   }
   
   .gallery-item:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md)
   }
   
   .gallery-item-img {
     position: relative;
     aspect-ratio: 1;
     overflow: hidden;
     border-radius: 12px 12px 0 0
   }
   
   .gallery-item:not(:has(.gallery-caption)) .gallery-item-img {
     border-radius: 12px
   }
   
   .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .4s
   }
   
   .gallery-item:hover img {
     transform: scale(1.03)
   }
   
   .gallery-item .zoom-btn {
     position: absolute;
     bottom: 12px;
     right: 12px;
     padding: .4rem .85rem;
     font-size: .72rem;
     font-weight: 600;
     letter-spacing: .05em;
     color: var(--white);
     background: rgba(16, 25, 39, .75);
     border: none;
     border-radius: 6px;
     cursor: pointer;
     opacity: 0;
     transition: opacity .25s;
     font-family: 'DM Sans', sans-serif
   }
   
   .gallery-item:hover .zoom-btn {
     opacity: 1
   }
   
   .gallery-item .zoom-btn:hover {
     background: var(--gold);
     color: var(--navy)
   }
   
   .gallery-item .zoom-btn i {
     margin-right: 4px;
     font-size: .65rem
   }
   
   .gallery-caption {
     padding: .85rem .75rem;
     font-size: .82rem;
     color: var(--muted);
     line-height: 1.5
   }
   
   .gallery-caption h5,
   .gallery-caption h6 {
     font-size: .82rem;
     font-weight: 600;
     color: var(--navy);
     margin: 0;
     line-height: 1.4
   }
   
   /* Gallery responsive: 3 cols -> 2 cols -> 1 col */
   @media (max-width: 900px) {
     .gallery-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 1rem
     }
   }
   
   @media (max-width: 560px) {
     .gallery-grid {
       grid-template-columns: 1fr;
       gap: 1rem;
       padding: 1.5rem 0
     }
   }
   
   /* =========================================================
      BLOG GRID - Responsive, same as gallery (3 -> 2 -> 1 cols)
      ========================================================= */
   .blog-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.25rem;
     padding: 2rem 0
   }
   
   .blog-grid .featured-imagebox-post {
     border-radius: var(--r-lg);
     overflow: hidden;
     background: var(--white);
     border: 1px solid var(--border-l);
     transition: transform .25s, box-shadow .25s;
     height: 100%;
     display: flex;
     flex-direction: column
   }
   
   .blog-grid .featured-imagebox-post:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md)
   }
   
   .blog-grid .featured-thumbnail {
     position: relative;
     aspect-ratio: 1;
     overflow: hidden;
     border-radius: var(--r-lg) var(--r-lg) 0 0
   }
   
   .blog-grid .featured-thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .4s
   }
   
   .blog-grid .featured-imagebox-post:hover .featured-thumbnail img {
     transform: scale(1.03)
   }
   
   .blog-grid .featured-content {
     flex: 1;
     padding: 1rem 1rem 1.25rem;
     display: flex;
     flex-direction: column
   }
   
   .blog-grid .post-title h3 {
     font-size: .95rem;
     line-height: 1.45;
     margin: 0
   }
   
   .blog-grid .post-title h3 a {
     color: var(--navy);
     text-decoration: none;
     transition: color .2s
   }
   
   .blog-grid .post-title h3 a:hover {
     color: var(--gold-dark)
   }
   
   .blog-grid .featured-desc {
     margin-top: 0.5rem;
     font-size: 0.9rem;
     line-height: 1.5;
     color: var(--base-bodyfont-color)
   }
   
   .blog-grid .featured-desc p,
   .blog-grid .featured-desc li {
     margin: 0 0 0.35em
   }
   
   .blog-grid .featured-desc p:last-child,
   .blog-grid .featured-desc li:last-child {
     margin-bottom: 0
   }
   
   @media (max-width: 900px) {
     .blog-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 1rem
     }
   }
   
   @media (max-width: 560px) {
     .blog-grid {
       grid-template-columns: 1fr;
       gap: 1rem;
       padding: 1.5rem 0
     }
   }
   
   /* Testimonial page: minimal horizontal card – small avatar left, content right */
   .testi-section01 .blog-grid .featured-imagebox-post {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     gap: 1rem;
     padding: 1.25rem 1.25rem 1.5rem;
     height: auto;
     background-color: #fffcf2;
   }
   
   .testi-section01 .blog-grid .featured-thumbnail {
     flex-shrink: 0;
     width: 56px;
     height: 56px;
     min-width: 56px;
     aspect-ratio: unset;
     border-radius: 50%;
     overflow: hidden;
     background: #FFC107;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .testi-section01 .blog-grid .featured-thumbnail img {
     width: 28px;
     height: 28px;
     max-width: 28px;
     max-height: 28px;
     object-fit: contain;
     padding: 0;
     filter: brightness(0) invert(1);
   }
   
   .testi-section01 .blog-grid .featured-thumbnail img.testimonial-user-icon {
     width: 100%;
     height: 100%;
     max-width: 100%;
     max-height: 100%;
     filter: none;
     object-fit: contain;
   }
   
   .testi-section01 .blog-grid .featured-content {
     flex: 1;
     padding: 0;
     min-width: 0;
   }
   
   .testi-section01 .blog-grid .featured-content-inner {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
   }
   
   .testi-section01 .blog-grid .post-header,
   .testi-section01 .blog-grid .post-title {
     margin: 0;
   }
   
   .testi-section01 .blog-grid .post-title.featured-title h3 {
     font-size: 1rem;
     font-weight: 600;
     color: var(--navy);
     margin: 0 0 0.2rem;
     line-height: 1.3;
   }
   
   .testi-section01 .blog-grid .testimonial-rating-star {
     margin: 0 0 0.25rem;
     line-height: 1;
   }
   
   .testi-section01 .blog-grid .testimonial-rating-star i {
     font-size: 0.85rem;
     color: #ffcd1e;
   }
   
   .testi-section01 .blog-grid .featured-desc {
     margin-top: 0;
   }
   
   .testi-section01 .blog-grid .featured-desc .testi-text-description {
     font-size: 0.9rem;
     line-height: 1.6;
     color: var(--text);
     margin: 0;
   }
   
   @media (max-width: 560px) {
     .testi-section01 .blog-grid .featured-imagebox-post {
       padding: 1rem;
       gap: 0.85rem;
     }
   
     .testi-section01 .blog-grid .featured-thumbnail {
       width: 50px;
       height: 50px;
       min-width: 50px;
       min-height: 50px;
     }
   
     .testi-section01 .blog-grid .featured-thumbnail img {
       width: 24px;
       height: 24px;
       max-width: 24px;
       max-height: 24px;
     }
   }
   
   /* Blog detail page */
   .blog-details-section {
     padding: 2rem 0 3rem
   }
   
   .blog-loading-msg,
   .blog-notfound-msg {
     padding: 3rem 0;
     text-align: center;
     color: var(--muted)
   }
   
   .blog-notfound-msg .cta-btn {
     margin-top: 1rem;
     display: inline-block
   }
   
   .blog-entry-content {
     color: var(--text);
     line-height: 1.65
   }
   
   .blog-entry-content .blog-single-title h2,
   .blog-entry-content .blog-single-title h3 {
     margin-top: 1rem;
     margin-bottom: .5rem;
     color: var(--navy)
   }
   
   .blog-entry-content img {
     max-width: 100%;
     height: auto
   }
   
   /* Blog single: force dark text after introduction (override editor/theme white) */
   .prt-blog-single .blog-content,
   .prt-blog-single .blog-content p,
   .prt-blog-single .blog-content h1,
   .prt-blog-single .blog-content h2,
   .prt-blog-single .blog-content h3,
   .prt-blog-single .blog-content h4,
   .prt-blog-single .blog-content li,
   .prt-blog-single .blog-content span,
   .prt-blog-single .blog-content div,
   .prt-blog-single .blog-content a {
     color: #222 !important;
   }
   
   .prt-blog-single .blog-content a:hover {
     color: #2a4a3a !important;
   }
   
   /* Gallery lightbox modal */
   .gallery-modal {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(16, 25, 39, .92);
     z-index: 10000;
     align-items: center;
     justify-content: center;
     padding: 2rem;
     cursor: pointer
   }
   
   .gallery-modal.show {
     display: flex
   }
   
   .gallery-modal img {
     max-width: 95%;
     max-height: 95vh;
     object-fit: contain;
     border-radius: 8px;
     box-shadow: var(--shadow-lg);
     pointer-events: none
   }
   
   .gallery-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
  
    width: 44px;
    height: 44px;
  
    padding: 0 !important;           
    box-sizing: border-box;          
  
    border-radius: 50% !important;
  
    background: rgba(255, 254, 248, .15);
    border: 1px solid rgba(255, 254, 248, .3);
  
    color: #fff;
    font-size: 20px;
    line-height: 1;                  
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    cursor: pointer;
  }
   
   .gallery-modal-close:hover {
     background: var(--gold);
     color: var(--navy);
     border-color: var(--gold)
   }
   
   /* =========================================================
      IMAGE ROUNDED (theme)
      ========================================================= */
   .img-rounded {
     border-radius: var(--r-lg);
     overflow: hidden
   }
   
   /* =========================================================
      ABOUT PAGE – Mission / Vision cards
      ========================================================= */
   .about-cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
     padding: 2rem 0
   }
   
   .about-card {
     background: var(--white);
     border-radius: var(--r-lg);
     padding: 2rem 1.75rem;
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-l);
     text-align: center;
     transition: box-shadow .25s, transform .25s
   }
   
   .about-card:hover {
     box-shadow: var(--shadow-md);
     transform: translateY(-2px)
   }
   
   .about-card-icon {
     width: 80px;
     height: 80px;
     margin: 0 auto 1rem;
     display: flex;
     align-items: center;
     justify-content: center
   }
   
   .about-card-icon img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain
   }
   
   .about-card h3 {
     font-family: 'Playfair Display', serif;
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--navy);
     margin-bottom: .75rem
   }
   
   .about-card p {
     color: var(--text);
     font-size: .95rem;
     line-height: 1.6;
     margin: 0;
     text-align: start
   }
   
   @media (max-width: 640px) {
     .about-cards {
       grid-template-columns: 1fr;
       gap: 1rem;
       padding: 1.5rem 0
     }
   }
   
   /* =========================================================
      ACCORDION (toggle)
      ========================================================= */
   .accordion .toggle {
     border: 1px solid var(--border);
     border-radius: var(--r);
     margin-bottom: .5rem;
     overflow: hidden;
     background: var(--white)
   }
   
   .accordion .toggle:last-child {
     margin-bottom: 0
   }
   
   .accordion .toggle-title {
     margin: 0
   }
   
   .accordion .toggle-title a {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 1.1rem;
     color: var(--navy);
     font-weight: 600;
     font-size: .95rem;
     text-decoration: none;
     transition: background .2s, color .2s
   }
   
   .accordion .toggle-title a:hover {
     background: var(--off);
     color: var(--gold-dark)
   }
   
   .accordion .toggle-title a.active {
     background: var(--gold-pale);
     color: var(--navy)
   }
   
   .accordion .toggle-title a::after {
     content: '\f078';
     font-family: 'Font Awesome 6 Free';
     font-weight: 900;
     font-size: .75rem;
     transition: transform .25s
   }
   
   .accordion .toggle.open .toggle-title a::after {
     transform: rotate(180deg)
   }
   
   .accordion .toggle-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height .3s ease;
     padding: 0 1.1rem
   }
   
   .accordion .toggle.open .toggle-content {
     max-height: 1200px;
     padding: 1rem 1.1rem 1.1rem
   }
   
   .accordion .toggle-content {
     border-top: 1px solid var(--border-l)
   }
   
   .accordion .toggle-content p {
     margin: 0 0 .6rem;
     font-size: .9rem;
     line-height: 1.6;
     color: var(--text)
   }
   
   .accordion .toggle-content p:last-child {
     margin-bottom: 0
   }
   
   /* =========================================================
      RESPONSIVE
      ========================================================= */
   @media (max-width:1024px) {
   
     .hero-inner,
     .about-grid,
     .appt-grid {
       grid-template-columns: 1fr;
       gap: 3rem
     }
   
     .hero-visual {
       display: none
     }
   
     .about-imgs {
       height: 360px;
       max-width: 420px
     }
   
     .sv-grid,
     .testi-grid {
       grid-template-columns: 1fr 1fr
     }
   
     .ft-grid {
       grid-template-columns: 1fr 1fr
     }
   
     .main-nav {
       display: none
     }
   
     .topbar {
       display: none
     }
   
     html {
       --sticky-header-height: 76px
     }
   
     .site-header-sticky-wrap {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       width: 100%;
       z-index: 1000;
       background: var(--white);
       box-shadow: var(--shadow-sm);
     }
   
     .main-content-wrap {
       padding-top: var(--sticky-header-height, 76px)
     }
   
     .hamburger {
       display: flex
     }
   
     .header-cta {
       display: none
     }
   }
   
   @media (max-width:680px) {
   
     .sv-grid,
     .testi-grid,
     .f-row {
       grid-template-columns: 1fr
     }
   
     .ft-grid {
       grid-template-columns: 1fr;
       padding: 3rem 0 2rem
     }
   
     .btn-primary,
     .btn-outline {
       justify-content: center;
     }
   
     .hero-inner {
       padding: 3rem 0
     }
   
     .hero-stats {
       grid-template-columns: repeat(3, 1fr)
     }
   
     .cta-inner {
       flex-direction: column;
       align-items: flex-start
     }
   
     .ai-accent,
     .ai-gold-bar {
       display: none
     }
   
     .topbar .tb-item:last-child {
       display: none
     }
   
     .shloka-strip::before,
     .shloka-strip::after {
       display: none
     }
   }
   input.f-input,
input.f-input[type="text"],
input.f-input[type="date"],
input.f-input[type="tel"],
input.f-input[type="email"],
input.f-input[type="number"],
select.f-input,
textarea.f-input,
.f-row input.f-input,
.f-row input.f-input[type="text"],
.f-row input.f-input[type="date"],
.f-row input.f-input[type="tel"],
.f-row input.f-input[type="email"],
.form-card input.f-input,
.form-card input.f-input[type="text"],
.form-card input.f-input[type="date"],
.appointment .form-card input.f-input,
.appointment .form-card input.f-input[type="text"],
.appointment .form-card input.f-input[type="date"] {
  border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
}