/* =========================================================
   Family Dentist — Family Dental Care
   Main Stylesheet
========================================================= */

:root{
  --teal:#0d9488;
  --teal-dark:#0a7a70;
  --teal-darker:#075e56;
  --footer-bg:#083f3c;
  --bg-light:#e8f7f5;
  --bg-lighter:#f4fbfa;
  --text-dark:#0f2e2c;
  --text-body:#4b6664;
  --white:#ffffff;
  --border:#dcece9;
  --radius:14px;
  --shadow:0 10px 30px rgba(var(--shadow-rgb,8,63,60),.08);
  --shadow-lg:0 20px 50px rgba(var(--shadow-rgb,8,63,60),.14);
  --font-heading:'Poppins',sans-serif;
  --font-hand:'Caveat',cursive;
    --teal-dark: #0b3d3d;
  --teal-darker: #082b2b;
  --teal-primary: #129393;
  --teal-primary-hover: #0e7a7a;
  --teal-light: #e7f6f6;
  --teal-lighter: #f2fbfb;
  --text-dark: #123333;
  --text-muted: #4d6b6b;
  --white: #ffffff;
  --border-light: #d3ecec;
  --shadow-soft: 0 10px 30px rgba(var(--shadow-rgb,11,61,61), 0.08);
  --radius-md: 10px;
  --radius-lg: 18px;
  --font-body: "Inter", "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-heading);
  color:var(--text-body);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{color:var(--text-dark);margin:0 0 .5em;font-weight:700;line-height:1.25;}
p{margin:0 0 1em;}
.container{width:92%;max-width:1200px;margin:0 auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:50px;
  font-weight:600;font-size:.95rem;border:2px solid transparent;
  transition:all .25s ease;white-space:nowrap;
}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-dark);transform:translateY(-2px);}
.btn-outline{background:transparent;border-color:var(--teal);color:var(--teal);}
.btn-outline:hover{background:var(--teal);color:#fff;}
.btn-icon{width:16px;height:16px;filter:brightness(0) invert(1);}
.btn-outline .btn-icon-dark{width:14px;height:14px;filter:none;}
.btn-outline:hover .btn-icon-dark{filter:brightness(0) invert(1);}

/* ---------- Section heading ---------- */
.eyebrow{color:var(--teal);font-weight:600;letter-spacing:.02em;margin-bottom:.4em;font-size:.95rem;}
.section-heading{text-align:center;max-width:640px;margin:0 auto 42px;}
.section-sub{color:var(--text-body);}
.section-sub-left{color:var(--text-body);max-width:480px;}

/* =========================================================
   HEADER
========================================================= */
.site-header{
  position:sticky;top:0;z-index:200;
  background:#fff;
  box-shadow:0 2px 14px rgba(var(--shadow-rgb,8,63,60),.06);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;gap:20px;
}
.logo{display:flex;align-items:center;gap:10px;}
.logo-icon{width:38px;height:38px;}
.logo-icon-white{filter:brightness(0) invert(1);}
.logo-text{display:flex;flex-direction:column;line-height:1.2;}
.logo-text strong{color:var(--teal);font-size:1.15rem;}
.logo-text small{color:var(--text-body);font-size:.72rem;}

.main-nav ul{display:flex;gap:28px;}
.main-nav a{font-weight:500;color:var(--text-dark);position:relative;padding:6px 0;}
.main-nav a.active,.main-nav a:hover{color:var(--teal);}
.main-nav a.active::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--teal);
}
.btn-header{flex-shrink:0;}
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;width:30px;height:24px;padding:0;
}
.nav-toggle span{display:block;height:2px;background:var(--text-dark);border-radius:2px;transition:.3s;}
/* Hamburger morphs into a close (×) icon while the mobile nav is open,
   so it doubles as an explicit close button. */
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* =========================================================
   HERO SLIDER
========================================================= */
.hero-slider{position:relative;height:470px;overflow:hidden;}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;visibility:hidden;transition:opacity .8s ease;
  display:flex;align-items:center;
}
.hero-slide.active{opacity:1;visibility:visible;position:relative;}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(232,247,245,.94) 0%,rgba(232,247,245,.75) 45%,rgba(232,247,245,.15) 75%);
}
.hero-content{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  min-height:470px;padding:30px 0;
}
.hero-text{max-width:560px;}
.hero-eyebrow{color:var(--teal);font-weight:700;letter-spacing:.03em;font-size:.9rem;margin-bottom:14px;}
.hero-text h1,.hero-text h2.hero-h1{font-size:2.6rem;margin-bottom:18px;}
.hero-desc{font-size:1.02rem;margin-bottom:26px;}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;}
.hero-note{
  font-family:var(--font-hand);font-size:1.6rem;color:var(--teal-darker);
  text-align:right;line-height:1.15;align-self:flex-start;margin-top:20px;
}
.hero-note span{color:#e0757a;}

.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.85);
  color:var(--teal-darker);font-size:1rem;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.hero-arrow:hover{background:var(--teal);color:#fff;}
.hero-prev{left:18px;} .hero-next{right:18px;}
.hero-dots{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:5;
}
.hero-dots span{width:9px;height:9px;border-radius:50%;background:rgba(var(--shadow-rgb,8,63,60),.25);cursor:pointer;transition:.2s;}
.hero-dots span.active{background:var(--teal);width:24px;border-radius:6px;}

/* =========================================================
   FEATURES STRIP
========================================================= */
.features-strip{
  background:#fff;box-shadow:var(--shadow-lg);border-radius:var(--radius);
  max-width:1140px;margin:-40px auto 0;position:relative;z-index:10;padding:28px 10px;
}
.features-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.feature-item{
  flex:1 1 150px;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;padding:10px;border-right:1px solid var(--border);
}
.feature-item:last-child{border-right:none;}
.feature-item img{width:38px;height:38px;}
.feature-item span{font-weight:600;color:var(--text-dark);font-size:.92rem;}

/* =========================================================
   ABOUT
========================================================= */
.about-section{padding:100px 0 70px;}
.about-grid{display:flex;align-items:center;gap:60px;}
.about-text{flex:1;}
.about-text h2{font-size:2rem;}
.about-image{flex:1;position:relative;}
.about-image img{border-radius:var(--radius);width:100%;box-shadow:var(--shadow);}
.about-badge{
  position:absolute;bottom:-24px;right:-24px;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:16px 20px;display:flex;align-items:center;gap:12px;max-width:220px;
}
.about-badge img{width:34px;height:34px;}
.about-badge strong{color:var(--teal);font-size:1.3rem;}
.about-badge div{font-size:.85rem;color:var(--text-dark);font-weight:600;}
.about-badge small{display:block;font-weight:400;color:var(--text-body);}

/* =========================================================
   GENERIC CAROUSEL
========================================================= */
.carousel{position:relative;}
.carousel-track-wrap{overflow:hidden;}
.carousel-track{display:flex;transition:transform .5s ease;gap:26px;}
.carousel-arrow{
  position:absolute;top:40%;transform:translateY(-50%);z-index:4;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:#fff;
  color:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.carousel-arrow:hover{background:var(--teal);color:#fff;}
.carousel-prev{left:-14px;} .carousel-next{right:-14px;}
.carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:26px;}
.carousel-dots span{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;}
.carousel-dots span.active{background:var(--teal);width:22px;border-radius:5px;transition:.2s;}

/* =========================================================
   SERVICES
========================================================= */
.services-section{padding:70px 0;background:var(--bg-lighter);}
.service-card{
  flex:0 0 calc(25% - 20px);background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);text-align:left;
}
.service-card img{width:100%;height:170px;object-fit:cover;}
.service-card h3{font-size:1.08rem;margin:16px 18px 6px;}
.service-card p{font-size:.88rem;margin:0 18px 18px;color:var(--text-body);}

/* =========================================================
   DOCTORS
========================================================= */
.doctors-section{padding:70px 0;}
.doctors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.doctors-grid-2{grid-template-columns:repeat(2,1fr);max-width:640px;margin:0 auto;}
.doctor-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;text-align:center;
  transition:.25s;
}
.doctor-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.doctor-card img{display:block;width:100%;height:auto;aspect-ratio:4/3.4;object-fit:cover;object-position:center top;}
.doctor-card h3{font-size:1.05rem;margin:16px 12px 2px;}
.doctor-card p{font-size:.85rem;color:var(--teal);margin:0 12px 18px;}

/* =========================================================
   BEFORE & AFTER
========================================================= */
.before-after-section{padding:70px 0;background:var(--bg-light);}
.ba-card{flex:0 0 calc(33.333% - 18px);}
.ba-compare{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;box-shadow:var(--shadow);
}
.ba-compare img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.ba-before-wrap{position:absolute;inset:0;width:50%;overflow:hidden;}
.ba-before-img{width:auto;height:100%;position:absolute;left:0;top:0;max-width:none;}
.ba-compare .ba-before-wrap .ba-before-img{width:200%;}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);
  pointer-events:none;box-shadow:0 0 0 3px rgba(255,255,255,.4);
}
.ba-handle span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:var(--teal);box-shadow:var(--shadow);
}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;
}
.ba-labels{display:flex;justify-content:space-between;margin-top:10px;font-size:.85rem;color:var(--text-body);font-weight:600;}

/* =========================================================
   TESTIMONIALS
========================================================= */
.testimonials-section{padding:70px 0;}
.testi-card{
  flex:0 0 calc(33.333% - 18px);background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);
}
.testi-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.testi-head img{width:52px;height:52px;border-radius:50%;object-fit:cover;}
.stars{color:#f5b301;font-size:.85rem;letter-spacing:1px;}
.testi-card p{font-size:.92rem;color:var(--text-body);margin:0;}

/* =========================================================
   FAQ + CONTACT
========================================================= */
.faq-contact-section{padding:80px 0;background:var(--bg-lighter);}
.faq-contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:start;}
.accordion-item{border-bottom:1px solid var(--border);}
.accordion-toggle{
  width:100%;text-align:left;background:none;border:none;padding:16px 4px;
  display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--text-dark);
  font-size:.98rem;
}
.accordion-toggle span{color:var(--teal);font-size:1.2rem;transition:.25s;}
.accordion-item.open .accordion-toggle span{transform:rotate(45deg);}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.accordion-item.open .accordion-panel{max-height:200px;}
.accordion-panel p{padding:0 4px 16px;font-size:.92rem;color:var(--text-body);}

.contact-col{background:var(--bg-light);border-radius:var(--radius);padding:36px;}
.contact-form-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.contact-tooth-icon{width:44px;height:44px;opacity:.5;flex-shrink:0;}
.appointment-form{margin-top:18px;display:flex;flex-direction:column;gap:14px;}
.form-row{display:flex;gap:14px;}
.appointment-form input,.appointment-form select,.appointment-form textarea{
  width:100%;padding:13px 16px;border-radius:10px;border:1px solid var(--border);
  font-family:inherit;font-size:.92rem;background:#fff;color:var(--text-dark);
}
.appointment-form input:focus,.appointment-form select:focus,.appointment-form textarea:focus{
  outline:2px solid var(--teal);outline-offset:1px;
}
.appointment-form button{align-self:flex-start;border:none;}

/* =========================================================
   BLOG
========================================================= */
.blog-section{padding:80px 0;}
.blog-section .carousel{margin-top:36px;}
.blog-card{flex:0 0 calc(33.333% - 18px);background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.blog-thumb{position:relative;}
.blog-thumb img{width:100%;height:190px;object-fit:cover;}
.blog-date{
  position:absolute;top:14px;left:14px;background:#fff;color:var(--teal-darker);
  font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:20px;
}
.blog-card h3{font-size:1.05rem;margin:18px 18px 6px;}
.blog-card p{font-size:.88rem;margin:0 18px 14px;color:var(--text-body);}
.read-more{display:flex;align-items:center;gap:6px;margin:0 18px 20px;color:var(--teal);font-weight:600;font-size:.9rem;}
.read-more img{width:14px;height:14px;}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{background:var(--footer-bg);color:var(--on-dark-1,#c9e3e0);}
.footer-top{
  display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.3fr;gap:40px;padding:70px 0 40px;
}
.footer-col h4{color:#fff;margin-bottom:18px;font-size:1.05rem;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{color:var(--on-dark-2,#b7d6d3);font-size:.92rem;}
.footer-col a:hover{color:#fff;}
.footer-about p{font-size:.9rem;color:var(--on-dark-3,#a9cfcb);}
.logo-footer{margin-bottom:16px;}
.logo-footer .logo-text strong{color:#fff;}
.logo-footer .logo-text small{color:var(--on-dark-3,#a9cfcb);}
.social-icons{display:flex;gap:10px;margin:18px 0;}
.social-icons a{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
}
.social-icons img{width:16px;height:16px;}
.social-icons a:hover{background:var(--teal);}
.footer-tagline{font-family:var(--font-hand);font-size:1.2rem;color:#fff;}
.footer-contact li{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--on-dark-2,#b7d6d3);}
.footer-contact img{width:18px;height:18px;margin-top:2px;flex-shrink:0;}
.footer-contact small{color:var(--on-dark-4,#89b6b2);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;}
.footer-bottom-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem;color:var(--on-dark-3,#a9cfcb);}
.footer-bottom-links{display:flex;gap:20px;}
.footer-bottom-links a{color:var(--on-dark-3,#a9cfcb);}
.footer-bottom-links a:hover{color:#fff;}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1024px){
  .doctors-grid{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .blog-card{flex:0 0 calc(100% - 18px);background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
  .service-card{flex:0 0 calc(50% - 13px);}
  .faq-contact-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
}

@media (max-width:860px){
  .main-nav{
    position:fixed;top:70px;left:0;right:0;bottom:0;background:#fff;
    transform:translateX(-100%);transition:transform .3s ease;padding:30px 24px;overflow-y:auto;
    z-index:150;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column;gap:0;align-items:stretch;}
  .main-nav ul li{width:100%;flex-shrink:1;}
  .main-nav ul li a{text-align:left;white-space:normal;}
  .main-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--border);}
  .nav-toggle{display:flex;}
  .btn-header{display:none;}

  /* Each top-level item (Home, About Us, Treatments, ...) slides in from
     the left with a slight stagger once the nav panel is open. */
  .main-nav ul > li{opacity:0;transform:translateX(-18px);}
  .main-nav.open ul > li{animation:navItemIn .35s ease forwards;}
  .main-nav.open ul > li:nth-child(1){animation-delay:.04s;}
  .main-nav.open ul > li:nth-child(2){animation-delay:.08s;}
  .main-nav.open ul > li:nth-child(3){animation-delay:.12s;}
  .main-nav.open ul > li:nth-child(4){animation-delay:.16s;}
  .main-nav.open ul > li:nth-child(5){animation-delay:.2s;}
  .main-nav.open ul > li:nth-child(6){animation-delay:.24s;}
  .main-nav.open ul > li:nth-child(7){animation-delay:.28s;}
  @keyframes navItemIn{
    from{opacity:0;transform:translateX(-18px);}
    to{opacity:1;transform:translateX(0);}
  }
  @media (prefers-reduced-motion:reduce){
    .main-nav ul > li{opacity:1;transform:none;}
    .main-nav.open ul > li{animation:none;}
  }

  .hero-slider{height:auto;min-height:auto;}
  .hero-content{flex-direction:column;text-align:center;padding:50px 0 70px;gap:20px;min-height:auto;}
  .hero-text{max-width:100%;}
  .hero-text h1,.hero-text h2.hero-h1{font-size:1.9rem;}
  .hero-buttons{justify-content:center;}
  .hero-note{align-self:center;text-align:center;}

  .about-grid{flex-direction:column;}
  .about-image{width:100%;}
  .about-badge{right:12px;bottom:-20px;}

  .service-card,.ba-card,.testi-card{flex:0 0 100%;}
  .carousel-prev{left:-6px;} .carousel-next{right:-6px;}

  .doctors-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .blog-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;padding:50px 0 30px;}
}

@media (max-width:560px){
  .features-strip{margin-top:-30px;padding:20px 6px;}
  .feature-item{flex:1 1 45%;border-right:none;border-bottom:1px solid var(--border);padding-bottom:16px;}
  .hero-text h1,.hero-text h2.hero-h1{font-size:1.55rem;}
  .form-row{flex-direction:column;}
  .doctors-grid{grid-template-columns:1fr 1fr;}
  .section-heading h2,.about-text h2{font-size:1.5rem;}
  .contact-col{padding:24px;}
  .footer-bottom-inner{flex-direction:column;text-align:center;}
}

/* =========================================================
   about page
========================================================= */


/* ============ HERO / BANNER (full image) ============ */
.hero-banner {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  background-image: linear-gradient(180deg, rgba(var(--shadow-rgb,11,61,61), 0.55), rgba(var(--shadow-rgb,11,61,61), 0.35)),
    url("https://placehold.co/1920x900/1a7a7a/ffffff?text=Happy+Family+Photo");
  background-size: cover;
  background-position: center;
}

.hero-banner .container {
  padding-top: 60px;
  padding-bottom: 60px;
}

.hero-banner .eyebrow {
  color: var(--on-dark-eyebrow,#bdeeee);
}

.hero-banner h1 {
  color: var(--white);
  font-size: 2.6rem;
  max-width: 640px;
}

/* ============ WELCOME / ABOUT SECTION ============ */
.about-section {
  padding: 90px 0;
  background: var(--white);
}

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

.about-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 340px;
}

.about-content h2 {
  font-size: 2rem;
  margin-bottom: 18px;
}

.about-content p {
  color: var(--text-muted);
  margin-bottom: 16px;
  max-width: 520px;
}

.about-content p a {
  color: var(--teal-primary);
  text-decoration: underline;
}

.about-content .btn {
  margin-top: 12px;
}

/* ============ STATS SECTION ============ */
.stats-section {
  background: var(--teal-light);
  border-radius: var(--radius-lg);
  margin: 0 24px 90px;
  padding: 50px 40px;
}

.stats-wrap {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: 40px;
  align-items: center;
}

.stats-intro h2 {
  font-size: 1.7rem;
  margin-bottom: 12px;
}

.stats-intro p {
  color: var(--text-muted);
  margin-bottom: 18px;
}

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

.stat-item {
  padding: 0 10px;
  border-left: 1px solid var(--border-light);
}

.stat-item:first-child {
  border-left: none;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 12px;
  box-shadow: 0 6px 16px rgba(var(--shadow-rgb,11,61,61), 0.08);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--teal-dark);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ============ MISSION / VISION ============ */
.mv-section {
  padding: 0 0 90px;
}

.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.mv-card {
  display: flex;
  gap: 22px;
}

.mv-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  flex-shrink: 0;
}

.mv-text h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.mv-text p {
  color: var(--text-muted);
}

.mv-underline {
  width: 40px;
  height: 3px;
  background: var(--teal-primary);
  margin-top: 14px;
  border-radius: 2px;
}

/* ============ DOCTORS SECTION ============ */
.doctors-section {
  background: var(--teal-light);
  padding: 90px 0;
}

.section-heading {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 50px;
}

.section-heading h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.section-heading p {
  color: var(--text-muted);
}

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.doctor-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease;
}

.doctor-card:hover {
  transform: translateY(-6px);
}

.doctor-photo {
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
}

.doctor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doctor-info {
  padding: 22px 24px 26px;
}

.doctor-info h3 {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.doctor-role {
  color: var(--teal-primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.doctor-details {
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.doctor-details span {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.doctor-details span strong {
  color: var(--text-dark);
}

/* ============ CTA SECTION ============ */
.cta-section {
  margin: 37px 24px 38px;
  background: var(--teal-light);
  border-radius: var(--radius-lg);
  padding: 40px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.cta-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cta-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.cta-left h3 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.cta-left p {
  color: var(--text-muted);
  max-width: 480px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 992px) {
  .about-grid,
  .mv-grid {
    grid-template-columns: 1fr;
  }

  .about-image {
    order: -1;
  }

  .stats-wrap {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 768px) {
  /* NOTE: mobile nav (.main-nav / .nav-toggle) is handled once, at the
     860px breakpoint above, as a full-height slide-in overlay. A second,
     conflicting ruleset used to live here (max-height:400px + overflow:
     hidden, no bottom/z-index) which clipped the menu and let page
     content show through underneath it — removed so there's only one
     source of truth for the mobile nav. */

  .hero-banner h1 {
    font-size: 2rem;
  }

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

  .stat-item {
    border-left: none;
  }

  .doctors-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }

  .cta-section {
    flex-direction: column;
    text-align: center;
  }

  .cta-left {
    flex-direction: column;
    text-align: center;
  }

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

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-col ul li {
    justify-content: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-banner {
    min-height: 380px;
  }

  .hero-banner h1 {
    font-size: 1.6rem;
  }

  .about-section,
  .doctors-section {
    padding: 60px 0;
  }

  .stats-section,
  .cta-section {
    margin-left: 14px;
    margin-right: 14px;
    padding: 30px 20px;
  }

  .brand-text .brand-name {
    font-size: 1rem;
  }
}

/* =========================================================
   CONTACT PAGE (new)
   Uses the site's existing root color variables:
   --teal, --teal-dark, --teal-darker, --bg-light, --bg-lighter,
   --text-dark, --text-body, --border, --radius, --shadow, --shadow-lg
========================================================= */

/* ---- Header logo icon (emoji circle) ---- */
.logo-icon-emoji{
  width:38px;height:38px;border-radius:50%;
  background:var(--bg-light);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
}
.logo-footer .logo-icon-emoji{background:rgba(255,255,255,.1);}

/* ---- Contact hero ---- */
.contact-hero{background:var(--bg-light);overflow:hidden;height: 320px;}
.contact-hero-grid{display:flex;align-items:center;justify-content:space-between;gap:50px;height: 320px;}
.contact-hero-text{max-width:480px;}
.contact-hero-text h1{font-size:2.4rem;margin:0;}
.contact-hero-image{position:relative;flex:0 0 44%;max-width:520px;}
.contact-hero-image img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);}
.contact-hero-note{
  position:absolute;top:-18px;right:6px;
  font-family:var(--font-hand);font-size:1.5rem;line-height:1.15;color:var(--teal-darker);
  text-align:right;
}
.contact-hero-note span{color:#e0757a;}

/* ---- Contact info cards ---- */
.contact-info-section{padding:70px 0 20px;}
.contact-info-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px;
}
.info-card{
  background:var(--bg-light);border-radius:var(--radius);padding:26px 22px;
}
.info-icon{
  width:52px;height:52px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  box-shadow:var(--shadow);margin-bottom:16px;
}
.info-card h3{font-size:1.08rem;margin-bottom:8px;}
.info-card p{font-size:.88rem;color:var(--text-body);margin:0 0 3px;}
.info-card a{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--teal);font-weight:600;font-size:.86rem;margin-top:4px;
}

/* ---- Map + Get in touch form ---- */
.contact-map-section{padding:50px 0 90px;}
.contact-map-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;}
.map-embed{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  min-height:440px;background:var(--bg-light);
}
.map-embed iframe{width:100%;height:100%;min-height:440px;border:0;display:block;}

.get-in-touch-col{position:relative;}
.get-in-touch-col .contact-tooth-icon{
  position:absolute;bottom:22px;right:22px;opacity:.35;width:48px;height:48px;
  font-size:2.4rem;line-height:1;
}
.appointment-form select{appearance:auto;}

/* ---- CTA section (contact page) ---- */
.cta-section{
  background:var(--bg-light);border-radius:var(--radius);
  margin:0 24px 40px;padding:36px 44px;
}
.cta-inner{
  max-width:1152px;display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;width:100%;
}
.cta-left{display:flex;align-items:center;gap:22px;}
.cta-icon{
  width:66px;height:66px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;
}
.cta-left h3{font-size:1.25rem;margin:4px 0 6px;}
.cta-left p{color:var(--text-body);max-width:460px;margin:0;}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .contact-info-grid{grid-template-columns:repeat(2,1fr);}
  .contact-map-grid{grid-template-columns:1fr;}
  .map-embed{min-height:360px;}
  .map-embed iframe{min-height:360px;}
}

@media (max-width:860px){
  .contact-hero-grid{flex-direction:column;text-align:center;}
  .contact-hero-text{max-width:100%;}
  .contact-hero-image{max-width:420px;}
  .contact-hero-note{position:static;margin-top:14px;text-align:center;}
  .cta-section{margin:0 16px 60px;}
  .cta-inner{flex-direction:column;text-align:center;}
  .cta-left{flex-direction:column;text-align:center;}
}

@media (max-width:560px){
  .contact-hero{padding:40px 0 50px;}
  .contact-hero-text h1{font-size:1.7rem;}
  .contact-info-grid{grid-template-columns:1fr;}
  .contact-map-section{padding:30px 0 60px;}
}


/* =========================================================
   OUR DENTISTS PAGE (new)
========================================================= */

/* ---- Hero: full image, 340px, minimal content ---- */
.doctors-hero{
  height:340px;
  display:flex;align-items:center;
  background-image:linear-gradient(180deg, rgba(var(--shadow-rgb,8,63,60),.55), rgba(var(--shadow-rgb,8,63,60),.32)),
    url("https://placehold.co/1920x680/0a7a70/ffffff?text=Dentist+Portrait");
  background-size:cover;background-position:center;
}
.doctors-hero-eyebrow{color:var(--on-dark-eyebrow,#bdeeee);}
.doctors-hero-title{color:#fff;font-size:2.3rem;max-width:640px;margin:0;}

/* ---- Our Dental Team highlight strip ---- */
.team-highlight{
  background:var(--bg-light);border-radius:var(--radius);
  margin:60px 24px;padding:36px 40px;
}
.team-highlight-grid{display:flex;align-items:center;gap:34px;}
.team-badge{
  width:70px;height:70px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:var(--shadow);
}
.team-highlight-text{flex:1 1 320px;max-width:400px;}
.team-highlight-text h2{font-size:1.4rem;margin:4px 0 10px;}
.team-highlight-text p{color:var(--text-body);font-size:.9rem;margin:0;}
.team-features{display:flex;flex:2 1 480px;justify-content:space-between;gap:8px;}
.team-feature{
  flex:1;text-align:center;padding:0 12px;border-left:1px solid var(--border);
}
.team-feature:first-child{border-left:none;}
.team-feature-icon{
  width:54px;height:54px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  margin:0 auto 10px;box-shadow:var(--shadow);
}
.team-feature span{font-size:.84rem;color:var(--text-dark);font-weight:600;line-height:1.3;}

/* ---- Doctors showcase (2 cards) ---- */
.doctors-showcase{padding:0 0 70px;}
.doctors-showcase-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:30px;
  max-width:1000px;margin:0 auto;
}
.doctor-card-lg{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.doctor-photo-wrap{position:relative;}
.doctor-card-lg .doctor-photo{position:relative;overflow:hidden;aspect-ratio:auto;}
.doctor-card-lg .doctor-photo img{width:100%;height:auto;aspect-ratio:4/3.2;object-fit:cover;object-position:center top;display:block;}
.doctor-badge{
  position:absolute;left:24px;bottom:-26px;width:54px;height:54px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:var(--teal);
}
.doctor-card-lg .doctor-info{padding:44px 26px 24px;}
.doctor-card-lg h3{font-size:1.3rem;margin-bottom:2px;}
.doctor-card-lg .doctor-role{color:var(--teal);font-weight:600;margin-bottom:12px;}
.doctor-card-lg .doctor-desc{color:var(--text-body);font-size:.92rem;margin-bottom:22px;}
.doctor-stats{display:flex;border-top:1px solid var(--border);padding-top:18px;}
.doctor-stat{flex:1;text-align:center;padding:0 8px;border-left:1px solid var(--border);}
.doctor-stat:first-child{border-left:none;}
.doctor-stat-icon{
  width:46px;height:46px;border-radius:50%;background:var(--bg-light);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin:0 auto 8px;
}
.doctor-stat span{font-size:.8rem;color:var(--text-dark);font-weight:600;line-height:1.3;display:block;}

/* ---- CTA decoration (doctors page reuses .cta-section) ---- */
.cta-section{position:relative;overflow:hidden;}
.cta-decor{
  position:absolute;right:30px;top:18px;font-size:2.6rem;opacity:.25;pointer-events:none;
}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .team-highlight-grid{flex-wrap:wrap;}
  .team-highlight-text{max-width:100%;flex:1 1 100%;}
  .team-features{flex:1 1 100%;}
}

@media (max-width:860px){
  .doctors-hero-title{font-size:1.9rem;}
  .team-highlight{margin:40px 16px;padding:30px 24px;}
  .team-highlight-grid{flex-direction:column;text-align:center;}
  .team-features{flex-direction:column;gap:20px;}
  .team-feature{border-left:none;border-top:1px solid var(--border);padding-top:16px;}
  .team-feature:first-child{border-top:none;padding-top:0;}
  .doctors-showcase-grid{grid-template-columns:1fr;max-width:460px;}
  .cta-decor{display:none;}
}

@media (max-width:560px){
  .doctors-hero{height:300px;}
  .doctors-hero-title{font-size:1.6rem;}
  .doctor-stats{flex-wrap:wrap;}
  .doctor-stat{flex:1 1 33%;border-left:none;margin-bottom:10px;}
}


/* =========================================================
   REVIEWS / TESTIMONIALS PAGE (new)
========================================================= */

/* ---- Hero: full image, 340px, minimal content ---- */
.reviews-hero{
  height:340px;
  display:flex;align-items:center;
  background-image:linear-gradient(180deg, rgba(var(--shadow-rgb,8,63,60),.55), rgba(var(--shadow-rgb,8,63,60),.32)),
    url("https://placehold.co/1920x680/0a7a70/ffffff?text=Dentist+Portrait");
  background-size:cover;background-position:center;
}
.reviews-hero-eyebrow{color:var(--on-dark-eyebrow,#bdeeee);}
.reviews-hero-title{color:#fff;font-size:2.3rem;max-width:640px;margin:0;}

/* ---- Our Patients highlight strip ---- */
.reviews-highlight{
  background:var(--bg-light);border-radius:var(--radius);
  margin:60px 24px;padding:36px 40px;
}
.reviews-highlight-grid{display:flex;align-items:center;gap:34px;}
.reviews-badge{
  width:70px;height:70px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:var(--shadow);
}
.reviews-highlight-text{flex:1 1 300px;max-width:360px;}
.reviews-highlight-text h2{font-size:1.4rem;margin:4px 0 10px;}
.reviews-highlight-text p{color:var(--text-body);font-size:.9rem;margin:0;}
.reviews-stats{display:flex;flex:2 1 480px;justify-content:space-between;gap:8px;text-align:center;}
.reviews-stat{flex:1;padding:0 12px;border-left:1px solid var(--border);}
.reviews-stat:first-child{border-left:none;}
.reviews-stat-icon{
  width:54px;height:54px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  margin:0 auto 10px;box-shadow:var(--shadow);
}
.reviews-stat-number{font-family:var(--font-heading);font-size:1.4rem;font-weight:700;color:var(--teal-dark);}
.reviews-stat-label{font-size:.82rem;color:var(--text-body);}

/* ---- Patient testimonials ---- */
.patient-testimonials{padding:70px 0;}
.pt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;}
.pt-head h2{font-size:1.7rem;margin-bottom:6px;}
.pt-head p{color:var(--text-body);font-size:.95rem;margin:0;}
.pt-nav{display:flex;gap:10px;flex-shrink:0;}
.pt-arrow{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:#fff;
  color:var(--teal-dark);font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.pt-arrow:hover{background:var(--teal);color:#fff;}

.pt-track{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.pt-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 22px;display:flex;flex-direction:column;
}
.pt-quote{font-size:2rem;color:var(--teal);line-height:1;margin-bottom:6px;}
.pt-stars{color:#f5b400;letter-spacing:2px;margin-bottom:14px;}
.pt-text{color:var(--text-body);font-size:.92rem;flex:1;margin-bottom:20px;}
.pt-person{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border);margin-bottom:12px;}
.pt-person img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.pt-person strong{display:block;font-size:.92rem;color:var(--text-dark);}
.pt-person span{font-size:.8rem;color:var(--teal);}
.pt-date{font-size:.8rem;color:var(--text-body);}

/* ---- Video testimonials ---- */
.video-testimonials{background:var(--bg-light);padding:70px 0;margin-bottom: 30px;}
.video-testimonials-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:44px;align-items:center;}
.vt-text p{color:var(--text-body);margin:12px 0 22px;}

.vt-main{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#000;}
.vt-main video{width:100%;display:block;max-height:520px;background:#000;}

/* ---- Video thumbnail slider ---- */
.vt-thumbs-wrap{display:flex;align-items:center;gap:12px;margin-top:18px;}
.vt-arrow{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;
  color:var(--teal-dark);font-size:1.2rem;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease;
}
.vt-arrow:hover{background:var(--teal);color:#fff;}

.vt-thumbs{
  display:flex;gap:16px;flex:1;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;padding:2px;
}
.vt-thumbs::-webkit-scrollbar{display:none;}

.vt-thumb{
  position:relative;flex:0 0 160px;border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow);border:2px solid transparent;background:none;padding:0;
  cursor:pointer;transition:border-color .2s ease,transform .2s ease;
}
.vt-thumb:hover{transform:translateY(-2px);}
.vt-thumb.active{border-color:var(--teal);}
.vt-thumb img{width:100%;display:block;}
.vt-thumb-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);
  color:var(--teal-dark);font-size:.9rem;display:flex;align-items:center;justify-content:center;
}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .reviews-highlight-grid{flex-wrap:wrap;}
  .reviews-highlight-text{max-width:100%;flex:1 1 100%;}
  .reviews-stats{flex:1 1 100%;}
  .pt-track{grid-template-columns:repeat(2,1fr);}
  .video-testimonials-grid{grid-template-columns:1fr;}
}

@media (max-width:860px){
  .reviews-hero-title{font-size:1.9rem;}
  .reviews-highlight{margin:40px 16px;padding:30px 24px;}
  .reviews-highlight-grid{flex-direction:column;text-align:center;}
  .reviews-stats{flex-direction:column;gap:20px;}
  .reviews-stat{border-left:none;border-top:1px solid var(--border);padding-top:16px;}
  .reviews-stat:first-child{border-top:none;padding-top:0;}
  .pt-head{flex-direction:column;align-items:flex-start;}
  .pt-track{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
  .vt-thumbs{grid-template-columns:1fr;max-width:320px;margin:16px auto 0;}
}

@media (max-width:560px){
  .reviews-hero{height:300px;}
  .reviews-hero-title{font-size:1.6rem;}
  .vt-play{width:56px;height:56px;font-size:1.3rem;}
}
/* =========================================================
   GUM TREATMENT (SERVICE DETAIL) PAGE (new)
   Uses existing root variables only.
========================================================= */

/* ---- Service hero: full-image banner, light gradient overlay ---- */
.service-hero{
  position:relative;
  min-height:400px;
  display:flex;align-items:center;
  overflow:hidden;
  background-color:var(--bg-light);
  background-image:linear-gradient(100deg, rgba(232,247,245,.96) 0%, rgba(232,247,245,.82) 42%, rgba(232,247,245,.1) 72%),
    url("https://placehold.co/1600x800/0a7a70/e8f7f5?text=Patient+Smiling");
  background-size:cover;background-position:center;
}
.service-hero-decor{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.service-hero-decor::before,
.service-hero-decor::after{
  content:'';position:absolute;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(var(--teal-rgb,13,148,136),.14), rgba(var(--teal-rgb,13,148,136),0) 70%);
}
.service-hero-decor::before{width:340px;height:340px;top:-120px;left:-90px;}
.service-hero-decor::after{width:220px;height:220px;bottom:-90px;left:60px;background:radial-gradient(circle at 30% 30%, rgba(var(--teal-rgb,13,148,136),.18), rgba(var(--teal-rgb,13,148,136),0) 70%);}

.service-hero-inner{position:relative;z-index:2;padding:70px 0;}
.service-hero-eyebrow{
  display:flex;align-items:center;gap:10px;
}
.service-hero-eyebrow::before{content:'';display:inline-block;width:26px;height:2px;background:var(--teal);}
.service-hero-inner h1{font-size:2.8rem;margin:6px 0 22px;max-width:520px;}
.service-hero-icon{
  width:56px;height:56px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  box-shadow:var(--shadow);color:var(--teal);
}

/* ---- Gum treatment services grid ---- */
.gum-services-section{padding:80px 0 70px;background:var(--bg-lighter);}
.gum-services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.gum-service-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;position:relative;
}
.gsc-image{position:relative;height:200px;}
.gsc-image img{width:100%;height:100%;object-fit:cover;display:block;}
.gsc-icon{
  position:absolute;left:22px;bottom:-24px;width:56px;height:56px;border-radius:50%;
  background:var(--bg-light);color:var(--teal);border:4px solid #fff;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:var(--shadow);
}
.gsc-body{padding:40px 22px 26px;position:relative;overflow:hidden;}
.gsc-body h3{font-size:1.2rem;margin-bottom:8px;}
.gsc-body p{font-size:.92rem;color:var(--text-body);margin-bottom:20px;}
.gsc-body::after{
  content:'';position:absolute;right:-20px;bottom:-30px;width:90px;height:90px;
  background:var(--bg-light);border-radius:50%;z-index:0;
}
.gsc-body .btn{position:relative;z-index:1;}
.btn-sm{padding:11px 22px;font-size:.88rem;}

/* ---- Why choose us strip ---- */
.why-choose-section{padding:0 0 10px;}
.why-choose-strip{
  background:var(--bg-light);border-radius:var(--radius);
  padding:34px 40px;
}
.why-choose-grid{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.why-choose-badge{
  width:66px;height:66px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  color:var(--teal);box-shadow:var(--shadow);
}
.why-choose-text{flex:1 1 300px;max-width:380px;}
.why-choose-text h2{font-size:1.4rem;margin:4px 0 8px;}
.why-choose-text p{color:var(--text-body);font-size:.9rem;margin:0;}
.why-choose-features{display:flex;flex:2 1 480px;justify-content:space-between;gap:10px;}
.why-feature{
  flex:1;text-align:center;padding:0 12px;border-left:1px solid var(--border);
}
.why-feature:first-child{border-left:none;}
.wf-icon{
  width:50px;height:50px;border-radius:50%;background:#fff;color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  margin:0 auto 10px;box-shadow:var(--shadow);
}
.why-feature span{font-size:.85rem;font-weight:600;color:var(--text-dark);line-height:1.3;display:block;}

/* ---- Gum treatment CTA (full-width teal bar) ---- */
.gum-cta-section{
  background:var(--teal);color:#fff;margin-top:60px;position:relative;overflow:hidden;
}
.gum-cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:34px 0;flex-wrap:wrap;position:relative;z-index:2;
}
.gum-cta-left{display:flex;align-items:center;gap:20px;}
.gum-cta-icon{
  width:60px;height:60px;border-radius:50%;background:#fff;color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;
}
.gum-cta-left h3{color:#fff;font-size:1.2rem;margin-bottom:4px;}
.gum-cta-left p{color:rgba(255,255,255,.85);font-size:.9rem;margin:0;max-width:420px;}
.btn-white{background:#fff;color:var(--teal-darker);}
.btn-white:hover{background:var(--teal-darker);color:#fff;transform:translateY(-2px);}
.gum-cta-tooth{
  position:absolute;right:26px;top:50%;transform:translateY(-50%);
  font-size:3rem;opacity:.18;z-index:1;pointer-events:none;
}
.gum-cta-section::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:220px;
  background:rgba(255,255,255,.06);
  clip-path:polygon(0 0, 60% 0, 30% 100%, 0 100%);
}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .gum-services-grid{grid-template-columns:repeat(2,1fr);}
  .why-choose-grid{flex-wrap:wrap;}
  .why-choose-text{max-width:100%;flex:1 1 100%;}
  .why-choose-features{flex:1 1 100%;}
}

@media (max-width:860px){
  .service-hero{min-height:320px;}
  .service-hero-inner h1{font-size:2.1rem;}
  .gum-services-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
  .why-choose-strip{margin:0 16px;padding:28px 24px;}
  .why-choose-grid{flex-direction:column;text-align:center;}
  .why-choose-features{flex-direction:column;gap:18px;}
  .why-feature{border-left:none;border-top:1px solid var(--border);padding-top:14px;}
  .why-feature:first-child{border-top:none;padding-top:0;}
  .gum-cta-inner{flex-direction:column;text-align:center;}
  .gum-cta-left{flex-direction:column;text-align:center;}
  .gum-cta-tooth{display:none;}
}

@media (max-width:560px){
  .service-hero{min-height:280px;}
  .service-hero-inner h1{font-size:1.7rem;}
  .gum-services-section{padding:60px 0 50px;}
}

/* =========================================================
   SCALING (SERVICE DETAIL) PAGE (new)
   Uses existing root variables only. Body copy set to black
   per request; headings keep the existing dark heading color.
========================================================= */

/* ---- Why Scaling: two-column intro ---- */
.why-scaling-section{padding:80px 0;}
.why-scaling-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;}
.why-scaling-text .eyebrow{color:var(--teal);}
.why-scaling-text h2{font-size:1.9rem;margin:6px 0 16px;max-width:480px;}
.why-scaling-text p{color:#000;max-width:460px;margin-bottom:28px;}
.why-scaling-features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.wsf-item{text-align:center;}
.wsf-icon{
  width:64px;height:64px;border-radius:50%;background:var(--bg-light);color:var(--teal);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;position:relative;
}
.wsf-item span{font-size:.86rem;font-weight:600;color:#000;line-height:1.3;display:block;}

.why-scaling-image{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.why-scaling-image img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px;}
.wsi-note{
  position:absolute;top:18px;left:18px;background:rgba(255,255,255,.92);
  border-radius:12px;padding:10px 16px;box-shadow:var(--shadow);
  font-family:var(--font-hand);font-size:1.15rem;color:var(--teal-darker);line-height:1.2;max-width:170px;
}

/* ---- The Process: what to expect ---- */
.process-section{background:var(--bg-light);padding:70px 0;margin-bottom:70px;}
.process-grid{display:grid;grid-template-columns:.85fr 2fr;gap:40px;align-items:center;}
.process-text .eyebrow{color:var(--teal);}
.process-text h2{font-size:1.7rem;margin:6px 0 12px;}
.process-text p{color:#000;margin:0;}
.process-steps{display:flex;align-items:flex-start;gap:0;}
.process-step{flex:1;text-align:center;position:relative;padding:0 6px;}
.process-step-top{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:14px;}
.process-num{
  width:26px;height:26px;border-radius:50%;background:var(--teal-darker);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;
}
.process-icon-ring{
  width:56px;height:56px;border-radius:50%;background:#fff;color:var(--teal);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.process-arrow{color:var(--teal);flex-shrink:0;margin:0 2px;align-self:center;}
.process-step h4{font-size:1rem;margin-bottom:6px;}
.process-step p{font-size:.85rem;color:#000;margin:0;}

/* ---- The Benefits: icon grid ---- */
.benefits-section{padding:0 0 70px;}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.benefit-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;}
.benefit-icon{
  width:54px;height:54px;border-radius:50%;background:var(--bg-light);color:var(--teal);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.benefit-card h4{font-size:1.02rem;margin-bottom:6px;}
.benefit-card p{font-size:.86rem;color:#000;margin:0;}

/* ---- Whitening compare: two info columns ---- */
.compare-section{padding:0 0 70px;}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;}
.compare-col{background:var(--bg-lighter);border-radius:var(--radius);padding:34px 30px;}
.compare-col.alt{background:var(--bg-light);}
.compare-col .eyebrow{color:var(--teal);}
.compare-col h3{font-size:1.35rem;margin:6px 0 16px;}
.compare-list{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.compare-list li{
  display:flex;gap:10px;font-size:.92rem;color:#000;list-style:none;line-height:1.5;
}
.compare-list li::before{content:'•';color:var(--teal);font-weight:700;flex-shrink:0;}
.compare-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.compare-media img{width:100%;height:220px;object-fit:cover;display:block;}
.compare-collage{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.compare-collage img{width:100%;height:110px;object-fit:cover;display:block;}

/* ---- FAQ ---- */
.scaling-faq-section{padding:0 0 70px;}
.scaling-faq-head{max-width:640px;margin-bottom:30px;}
.scaling-faq-head h2{font-size:1.8rem;margin-bottom:8px;}
.scaling-faq-head p{color:#000;margin:0;}
.scaling-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.scaling-faq-grid .accordion-item{border:1px solid var(--border);border-radius:10px;margin-bottom:14px;padding:0 4px;background:var(--bg-lighter);}
.scaling-faq-grid .accordion-toggle{color:#000;}
.scaling-faq-grid .accordion-panel p{color:#000;}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .why-scaling-grid{grid-template-columns:1fr;}
  .why-scaling-image{order:-1;}
  .why-scaling-features{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:1fr;}
  .process-steps{flex-wrap:wrap;}
  .process-step{flex:1 1 45%;margin-bottom:20px;}
  .process-arrow{display:none;}
  .benefits-grid{grid-template-columns:repeat(2,1fr);}
  .compare-grid{grid-template-columns:1fr;}
  .scaling-faq-grid{grid-template-columns:1fr;}
}

@media (max-width:860px){
  .service-hero{min-height:300px;}
  .service-hero-inner h1{font-size:2rem;}
  .why-scaling-section{padding:60px 0;}
  .why-scaling-text h2{font-size:1.6rem;}
  .why-scaling-features{grid-template-columns:repeat(2,1fr);}
  .process-section{padding:50px 0;margin-bottom:50px;}
  .benefits-grid{grid-template-columns:1fr 1fr;}
  .compare-col{padding:26px 20px;}
}

@media (max-width:560px){
  .service-hero{min-height:260px;}
  .service-hero-inner h1{font-size:1.7rem;}
  .why-scaling-features{grid-template-columns:1fr 1fr;gap:14px;}
  .benefits-grid{grid-template-columns:1fr;}
  .compare-collage img{height:90px;}
}

/* CTA icon color (scaling page reuses the site's existing .cta-section) */
.cta-icon{color:var(--teal);}


/* =========================================================
   SERVICE DETAIL PAGES — light animation & hover effects
   Used by: root-planing.php, flap-surgery.php
   Everything is scoped to .svc-page so other pages are untouched.
========================================================= */

/* ---- Scroll reveal (soft fade-up). Only active when JS has run ---- */
.reveal-ready .svc-page .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
  transition-delay:calc(var(--i, 0) * 90ms);
}
.reveal-ready .svc-page .reveal.in-view{opacity:1;transform:none;}

/* ---- Hero: gentle entrance + slow floating decor ---- */
@keyframes svcFadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes svcFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes svcSoftPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--teal-rgb,13,148,136),.28);}50%{box-shadow:0 0 0 9px rgba(var(--teal-rgb,13,148,136),0);}}

.svc-page .service-hero-eyebrow{animation:svcFadeUp .7s ease both;}
.svc-page .service-hero-inner h1{animation:svcFadeUp .8s ease .15s both;}
.svc-page .service-hero-decor::before{animation:svcFloat 7s ease-in-out infinite;}
.svc-page .service-hero-decor::after{animation:svcFloat 9s ease-in-out infinite reverse;}
.svc-page .service-hero{background-size:104%;transition:background-size 1.2s ease;}
.svc-page .service-hero:hover{background-size:108%;}

/* ---- Why section: feature icons + image ---- */
.svc-page .wsf-item{transition:transform .3s ease;}
.svc-page .wsf-icon{transition:transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;}
.svc-page .wsf-item:hover{transform:translateY(-5px);}
.svc-page .wsf-item:hover .wsf-icon{
  background:var(--teal);color:#fff;transform:scale(1.08);
  box-shadow:0 10px 22px rgba(var(--teal-rgb,13,148,136),.28);
}
.svc-page .why-scaling-image img{transition:transform .8s ease;}
.svc-page .why-scaling-image:hover img{transform:scale(1.05);}
.svc-page .wsi-note{animation:svcFloat 5s ease-in-out infinite;}

/* ---- Process steps ---- */
.svc-page .process-step{transition:transform .3s ease;}
.svc-page .process-icon-ring{transition:transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;}
.svc-page .process-num{transition:transform .3s ease, background-color .3s ease;}
.svc-page .process-step:hover{transform:translateY(-6px);}
.svc-page .process-step:hover .process-icon-ring{
  background:var(--teal);color:#fff;box-shadow:0 12px 26px rgba(var(--teal-rgb,13,148,136),.3);
}
.svc-page .process-step:hover .process-num{background:var(--teal);transform:scale(1.12);}
.svc-page .process-arrow{transition:transform .3s ease;}
.svc-page .process-steps:hover .process-arrow{animation:svcNudge 1.4s ease-in-out infinite;}
@keyframes svcNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}

/* ---- Benefit cards ---- */
.svc-page .benefit-card{transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, opacity .7s ease;}
.svc-page .benefit-icon{transition:transform .3s ease, background-color .3s ease, color .3s ease;}
.svc-page .benefit-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:var(--teal);
  transition-delay:0s;
}
.svc-page .benefit-card:hover .benefit-icon{background:var(--teal);color:#fff;transform:rotate(-8deg) scale(1.08);}

/* ---- Who should / should not columns ---- */
.svc-page .compare-col{transition:transform .3s ease, box-shadow .3s ease, opacity .7s ease;}
.svc-page .compare-col:hover{transform:translateY(-5px);box-shadow:var(--shadow);transition-delay:0s;}
.svc-page .compare-list li{transition:transform .25s ease, color .25s ease;}
.svc-page .compare-list li:hover{transform:translateX(6px);color:var(--teal-darker);}
.svc-page .compare-media,
.svc-page .compare-collage{overflow:hidden;}
.svc-page .compare-media img,
.svc-page .compare-collage img{transition:transform .6s ease, filter .4s ease;}
.svc-page .compare-media:hover img{transform:scale(1.06);}
.svc-page .compare-collage img:hover{transform:scale(1.1);filter:brightness(1.05);}

/* ---- FAQ ---- */
.svc-page .scaling-faq-grid .accordion-item{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .7s ease, background-color .25s ease;}
.svc-page .scaling-faq-grid .accordion-item:hover{
  transform:translateX(4px);border-color:var(--teal);box-shadow:var(--shadow);transition-delay:0s;
}
.svc-page .scaling-faq-grid .accordion-item.open{border-color:var(--teal);background:#fff;}
.svc-page .accordion-toggle span{display:inline-block;transition:transform .3s ease;}
.svc-page .accordion-item.open .accordion-toggle span{transform:rotate(45deg);}

/* ---- CTA ---- */
.svc-page .cta-icon{animation:svcSoftPulse 2.6s ease-in-out infinite;border-radius:50%;}
.svc-page .cta-section .btn{transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;}
.svc-page .cta-section .btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(var(--teal-rgb,13,148,136),.35);}

/* ---- Respect users who prefer less motion ---- */
@media (prefers-reduced-motion:reduce){
  .svc-page *,
  .svc-page *::before,
  .svc-page *::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important;}
  .reveal-ready .svc-page .reveal{opacity:1;transform:none;}
}

/* ---- Menu: highlight the page you are currently on ----
   (Treatments > Gum Treatment > Scaling / Root Planing / Flap Surgery) */
.mega-right-panel ul li a.is-current{
  color:var(--teal);font-weight:600;background:var(--bg-light);
}
.mega-left-link.is-current{color:var(--teal);font-weight:600;}


/* =========================================================
   SERVICE PAGES — image & icon effects (round 2)
   Used by: scaling.php, root-planing.php, flap-surgery.php
   Scoped to .svc-page. Loaded after the basic effects above,
   so these refine / extend them.
========================================================= */

@keyframes svcPop{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:scale(1);}}
@keyframes svcZoomIn{from{transform:scale(1.18);}to{transform:scale(1);}}
@keyframes svcWiggle{0%,100%{transform:rotate(0);}25%{transform:rotate(-14deg);}50%{transform:rotate(10deg);}75%{transform:rotate(-6deg);}}
@keyframes svcBounce{0%,100%{transform:translateY(0);}40%{transform:translateY(-6px);}70%{transform:translateY(1px);}}
@keyframes svcBeat{0%,100%{transform:scale(1);}30%{transform:scale(1.2);}60%{transform:scale(.95);}}
@keyframes svcRipple{from{transform:scale(1);opacity:.55;}to{transform:scale(1.7);opacity:0;}}
@keyframes svcSlideIn{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:none;}}

/* ---------- ICONS ---------- */

/* Icon circles: pop in one after another when the section appears */
.svc-page .reveal.in-view .wsf-icon,
.svc-page .reveal.in-view .benefit-icon,
.svc-page .reveal.in-view .process-icon-ring{
  animation:svcPop .55s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--i, 0) * 120ms + 250ms);
}

/* Ripple ring that radiates out on hover */
.svc-page .wsf-icon,
.svc-page .benefit-icon,
.svc-page .process-icon-ring{position:relative;}
.svc-page .wsf-icon::after,
.svc-page .benefit-icon::after,
.svc-page .process-icon-ring::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--teal);opacity:0;pointer-events:none;
}
.svc-page .wsf-item:hover .wsf-icon::after,
.svc-page .benefit-card:hover .benefit-icon::after,
.svc-page .process-step:hover .process-icon-ring::after{animation:svcRipple .9s ease-out;}

/* The drawn icon itself moves, each with its own personality */
.svc-page .wsf-icon svg,
.svc-page .benefit-icon svg,
.svc-page .process-icon-ring svg,
.svc-page .cta-icon svg,
.svc-page .btn svg{transform-origin:center;}
.svc-page .wsf-item:hover .wsf-icon svg{animation:svcWiggle .7s ease;}
.svc-page .benefit-card:hover .benefit-icon svg{animation:svcBeat .8s ease;}
.svc-page .process-step:hover .process-icon-ring svg{animation:svcBounce .7s ease;}
.svc-page .cta-icon:hover svg{animation:svcWiggle .7s ease;}
.svc-page .cta-icon{transition:transform .3s ease;}
.svc-page .cta-icon:hover{transform:scale(1.08);}

/* Step number badge pops on hover */
.svc-page .process-step:hover .process-num{animation:svcBeat .6s ease;}

/* Arrows between process steps gently point forward all the time */
.svc-page .process-arrow{animation:svcNudge 2.2s ease-in-out infinite;}

/* Button icon reacts on hover */
.svc-page .btn svg{transition:transform .3s ease;}
.svc-page .btn:hover svg{transform:rotate(-10deg) scale(1.18);}

/* Benefit card: accent line grows across the top on hover */
.svc-page .benefit-card{position:relative;overflow:hidden;}
.svc-page .benefit-card::before{
  content:'';position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--teal),var(--teal-darker));
  transform:scaleX(0);transform-origin:left;transition:transform .45s ease;
}
.svc-page .benefit-card:hover::before{transform:scaleX(1);}

/* ---------- IMAGES ---------- */

/* Main image: zooms in as it appears, tilts up and shines on hover */
.svc-page .why-scaling-image,
.svc-page .compare-media{position:relative;transition:transform .4s ease, box-shadow .4s ease;}
.svc-page .why-scaling-image.in-view img{animation:svcZoomIn 1.3s ease backwards;}
.svc-page .why-scaling-image:hover,
.svc-page .compare-media:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.svc-page .why-scaling-image img,
.svc-page .compare-media img{transition:transform .9s ease, filter .5s ease;}
.svc-page .why-scaling-image:hover img{transform:scale(1.07);filter:saturate(1.08);}

/* Light sweep across the picture on hover */
.svc-page .why-scaling-image::after,
.svc-page .compare-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform:translateX(-120%);
}
.svc-page .why-scaling-image:hover::after,
.svc-page .compare-media:hover::after{transform:translateX(120%);transition:transform .9s ease;}

/* Handwritten note on the image tilts slightly on hover */
.svc-page .wsi-note{transition:transform .3s ease, box-shadow .3s ease;}
.svc-page .why-scaling-image:hover .wsi-note{transform:rotate(-3deg) scale(1.06);box-shadow:var(--shadow-lg);}

/* Collage: pictures pop in one by one; hovered one comes forward, others dim */
.svc-page .compare-col.in-view .compare-collage img{animation:svcPop .6s ease backwards;}
.svc-page .compare-col.in-view .compare-collage img:nth-child(1){animation-delay:.25s;}
.svc-page .compare-col.in-view .compare-collage img:nth-child(2){animation-delay:.4s;}
.svc-page .compare-col.in-view .compare-collage img:nth-child(3){animation-delay:.55s;}
.svc-page .compare-col.in-view .compare-collage img:nth-child(4){animation-delay:.7s;}
.svc-page .compare-collage img{position:relative;cursor:pointer;}
.svc-page .compare-collage:hover img{filter:brightness(.82) saturate(.85);}
.svc-page .compare-collage img:hover{
  transform:scale(1.12);filter:brightness(1.05) saturate(1.1);z-index:2;
}

/* List bullets slide in one after another */
.svc-page .compare-col.in-view .compare-list li{animation:svcSlideIn .5s ease backwards;}
.svc-page .compare-col.in-view .compare-list li:nth-child(1){animation-delay:.2s;}
.svc-page .compare-col.in-view .compare-list li:nth-child(2){animation-delay:.3s;}
.svc-page .compare-col.in-view .compare-list li:nth-child(3){animation-delay:.4s;}
.svc-page .compare-col.in-view .compare-list li:nth-child(4){animation-delay:.5s;}
.svc-page .compare-col.in-view .compare-list li:nth-child(5){animation-delay:.6s;}
.svc-page .compare-list li::before{display:inline-block;transition:transform .25s ease;}
.svc-page .compare-list li:hover::before{transform:scale(1.6);}


/* =========================================================
   CATEGORY PAGES — Gum Treatment & Implantology
   Cards, icons, images and hover effects.
   Both pages use <div class="svc-page cat-page"> so they also
   share the hero + scroll-reveal effects defined above.
========================================================= */

@keyframes svcRise{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes svcFloatC{0%,100%{transform:translateY(-50%);}50%{transform:translateY(calc(-50% - 10px));}}

/* ---- 4-card layout (Implantology) ---- */
.gum-services-grid.four{grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:1100px){.gum-services-grid.four{grid-template-columns:repeat(2,1fr);}}
@media (max-width:860px){.gum-services-grid.four{grid-template-columns:1fr;max-width:460px;margin:0 auto;}}

/* ---- Hero icon ---- */
.cat-page .service-hero-icon{
  animation:svcFloat 4s ease-in-out infinite;
  transition:background-color .3s ease, box-shadow .3s ease;
  cursor:default;
}
.cat-page .service-hero-icon:hover{background:var(--bg-light);box-shadow:var(--shadow-lg);animation:svcWiggle .7s ease;}

/* ---- Service cards ---- */
.reveal-ready .cat-page .gum-service-card.reveal{
  transition:transform .35s ease, box-shadow .35s ease;transition-delay:0s;
}
.reveal-ready .cat-page .gum-service-card.reveal.in-view{
  opacity:1;transform:none;
  animation:svcRise .7s ease backwards;
  animation-delay:calc(var(--i, 0) * 110ms);
}
.cat-page .gum-service-card:hover,
.reveal-ready .cat-page .gum-service-card.reveal.in-view:hover{
  transform:translateY(-10px);box-shadow:var(--shadow-lg);
}

/* Card image: zoom, colour tint and a light sweep on hover */
.cat-page .gsc-photo{position:absolute;inset:0;overflow:hidden;}
.cat-page .gsc-photo img{transition:transform .8s ease, filter .5s ease;}
.cat-page .gum-service-card:hover .gsc-photo img{transform:scale(1.12);filter:saturate(1.1);}
.cat-page .gsc-photo::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(var(--shadow-rgb,8,63,60),.45));
  opacity:0;transition:opacity .4s ease;
}
.cat-page .gum-service-card:hover .gsc-photo::before{opacity:1;}
.cat-page .gsc-photo::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform:translateX(-120%);
}
.cat-page .gum-service-card:hover .gsc-photo::after{transform:translateX(120%);transition:transform .9s ease;}

/* Card icon: pops in, then wiggles + turns teal with a ripple on hover */
.cat-page .gsc-icon{z-index:3;transition:background-color .3s ease, color .3s ease, box-shadow .3s ease;}
.cat-page .gsc-icon::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--teal);opacity:0;pointer-events:none;
}
.cat-page .gum-service-card.in-view .gsc-icon{
  animation:svcPop .55s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--i, 0) * 110ms + 350ms);
}
.cat-page .gum-service-card:hover .gsc-icon{
  background:var(--teal);animation:svcWiggle .7s ease;box-shadow:0 10px 22px rgba(var(--teal-rgb,13,148,136),.35);
}
.cat-page .gum-service-card:hover .gsc-icon::after{animation:svcRipple .9s ease-out;}

/* Card text area: soft circle grows, title turns teal, arrow slides */
.cat-page .gsc-body::after{transition:transform .6s ease;}
.cat-page .gum-service-card:hover .gsc-body::after{transform:scale(3.4);}
.cat-page .gsc-body h3{transition:color .3s ease;}
.cat-page .gum-service-card:hover .gsc-body h3{color:var(--teal);}
.cat-page .btn span{display:inline-block;transition:transform .3s ease;}
.cat-page .gum-service-card:hover .btn span,
.cat-page .btn:hover span{transform:translateX(5px);}
.cat-page .gsc-body .btn{transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;}
.cat-page .gsc-body .btn:hover{box-shadow:0 10px 22px rgba(var(--teal-rgb,13,148,136),.32);}

/* ---- Why choose us strip ---- */
.cat-page .why-choose-strip{transition:box-shadow .35s ease, opacity .7s ease, transform .7s ease;}
.cat-page .why-choose-strip:hover{box-shadow:var(--shadow);}
.cat-page .why-choose-badge{
  animation:svcSoftPulse 2.8s ease-in-out infinite;
  transition:transform .3s ease;
}
.cat-page .why-choose-badge:hover{transform:rotate(-8deg) scale(1.1);}
.cat-page .why-feature{transition:transform .3s ease;}
.cat-page .why-feature span{transition:color .3s ease;}
.cat-page .why-feature:hover{transform:translateY(-6px);}
.cat-page .why-feature:hover span{color:var(--teal);}
.cat-page .wf-icon{position:relative;transition:transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;}
.cat-page .wf-icon::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--teal);opacity:0;pointer-events:none;
}
.cat-page .reveal.in-view .wf-icon{
  animation:svcPop .55s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--i, 0) * 120ms + 250ms);
}
.cat-page .why-feature:hover .wf-icon{
  background:var(--teal);box-shadow:0 10px 22px rgba(var(--teal-rgb,13,148,136),.3);animation:svcBounce .7s ease;
}
.cat-page .why-feature:hover .wf-icon::after{animation:svcRipple .9s ease-out;}

/* ---- CTA bar ---- */
.cat-page .gum-cta-icon{animation:svcSoftPulse 2.6s ease-in-out infinite;transition:transform .3s ease;}
.cat-page .gum-cta-left:hover .gum-cta-icon{transform:scale(1.08);animation:svcWiggle .7s ease;}
.cat-page .gum-cta-tooth{animation:svcFloatC 5s ease-in-out infinite;}
.cat-page .btn-white{transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;}
.cat-page .btn-white:hover{box-shadow:0 12px 26px rgba(0,0,0,.22);}

/* keep card text above the growing circle */
.cat-page .gsc-body h3,
.cat-page .gsc-body p{position:relative;z-index:1;}


/* =========================================================
   PAGE ANIMATIONS & HOVER EFFECTS
   Pages: Home, About Us, Our Dentists, Reviews, Contact Us
   (only active when <body class="fx-page">, set in header.php)
   Scroll-reveal is driven by js/animations.js
========================================================= */

@keyframes fxUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
@keyframes fxRight{from{opacity:0;transform:translateX(-40px);}to{opacity:1;transform:none;}}
@keyframes fxPopIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}
@keyframes fxFloatT{0%,100%{translate:0 0;}50%{translate:0 -10px;}}
@keyframes fxBeat{0%,100%{transform:scale(1);}30%{transform:scale(1.2);}60%{transform:scale(.95);}}
@keyframes fxRing{0%{box-shadow:0 0 0 0 rgba(var(--teal-rgb,13,148,136),.38);}100%{box-shadow:0 0 0 16px rgba(var(--teal-rgb,13,148,136),0);}}
@keyframes fxShine{from{left:-70%;}to{left:130%;}}

/* ---------- page-load entrance (hero areas) ---------- */
.fx-page .hero-slide.active .hero-eyebrow{animation:fxUp .8s ease .1s both;}
.fx-page .hero-slide.active h1{animation:fxUp .8s ease .25s both;}
.fx-page .hero-slide.active .hero-desc{animation:fxUp .8s ease .4s both;}
.fx-page .hero-slide.active .hero-buttons{animation:fxUp .8s ease .55s both;}
.fx-page .hero-slide.active .hero-note{animation:fxUp .8s ease .7s both;}

.fx-page .hero-banner .eyebrow,
.fx-page .doctors-hero-eyebrow,
.fx-page .reviews-hero-eyebrow,
.fx-page .contact-hero-text .eyebrow{display:inline-block;animation:fxUp .8s ease .1s both;}
.fx-page .hero-banner h1,
.fx-page .doctors-hero-title,
.fx-page .reviews-hero-title,
.fx-page .contact-hero-text h1{animation:fxUp .9s ease .28s both;}
.fx-page .contact-hero-image{animation:fxPopIn .9s ease .3s both;}
.fx-page .contact-hero-note{animation:fxFloatT 4.5s ease-in-out 1.2s infinite;}

/* ---------- scroll reveal (classes added by JS) ---------- */
.fx-page .fx-reveal{
  opacity:0;transform:translateY(34px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--fx-i,0) * 90ms);
}
.fx-page .fx-reveal.fx-left{transform:translateX(-44px);}
.fx-page .fx-reveal.fx-right{transform:translateX(44px);}
.fx-page .fx-reveal.fx-zoom{transform:scale(.93);}
.fx-page .fx-reveal.fx-in{opacity:1;transform:none;}
.fx-page .fx-load{animation:fxUp .8s ease both;animation-delay:calc(var(--fx-i,0) * 90ms + 150ms);}

/* ---------- buttons: shine sweep + soft glow ---------- */
.fx-page .btn{position:relative;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;}
.fx-page .btn::after{
  content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);pointer-events:none;
}
.fx-page .btn:hover::after{animation:fxShine .8s ease;}
.fx-page .btn:hover{box-shadow:0 12px 26px rgba(var(--teal-rgb,13,148,136),.28);}
.fx-page .btn:active{transform:translateY(0) scale(.97);}
.fx-page .btn .btn-icon,.fx-page .btn .btn-icon-dark{transition:transform .3s ease;}
.fx-page .btn:hover .btn-icon,.fx-page .btn:hover .btn-icon-dark{transform:translateX(4px);}
.fx-page .read-more img{transition:transform .3s ease;}
.fx-page .read-more:hover img{transform:translateX(6px);}

/* ---------- cards: lift, glow, image zoom ---------- */
.fx-page :is(.service-card,.feature-item,.blog-card,.ba-card,.testi-card,.pt-card,.mv-card,.stat-item,
             .info-card,.reviews-stat,.team-feature,.doctor-stat,.doctor-card,.doctor-card-lg,.vt-thumb){
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}
.fx-page :is(.service-card,.blog-card,.ba-card,.testi-card,.pt-card,.mv-card,.info-card,.doctor-card-lg):hover{
  transform:translateY(-8px);box-shadow:0 22px 46px rgba(var(--shadow-rgb,8,63,60),.16);
}
.fx-page :is(.feature-item,.stat-item,.reviews-stat,.team-feature):hover{transform:translateY(-6px);}
.fx-page :is(.doctor-stat,.vt-thumb):hover{transform:translateY(-4px);}
.fx-page :is(.info-card,.mv-card,.pt-card,.testi-card):hover{border-color:var(--teal);}

.fx-page .service-card{overflow:hidden;}
.fx-page :is(.service-card,.blog-thumb,.doctor-photo) img,
.fx-page img.doctor-photo,
.fx-page :is(.about-image,.contact-hero-image) img{transition:transform .7s ease, filter .5s ease;}
.fx-page .service-card:hover img{transform:scale(1.07);}
.fx-page .blog-card:hover .blog-thumb img{transform:scale(1.08);}
.fx-page :is(.doctor-card,.doctor-card-lg):hover :is(.doctor-photo img,img.doctor-photo){transform:scale(1.06);}
.fx-page .doctor-photo{overflow:hidden;}
.fx-page .blog-thumb{overflow:hidden;}
.fx-page :is(.about-image,.contact-hero-image){overflow:visible;}
.fx-page :is(.about-image,.contact-hero-image):hover img{transform:scale(1.03);filter:saturate(1.08);}

.fx-page :is(.service-card,.blog-card,.doctor-card,.doctor-card-lg,.mv-card,.info-card):hover :is(h3,h4){color:var(--teal);}
.fx-page :is(h3,h4){transition:color .3s ease;}

/* icons inside hovered cards give a small beat */
.fx-page :is(.feature-item,.stat-item,.reviews-stat,.team-feature,.doctor-stat,.mv-card,.info-card):hover
  :is([class*="icon"]):not(.btn-icon):not(.btn-icon-dark){animation:fxBeat .7s ease;}
.fx-page .info-card:hover .info-icon{box-shadow:0 0 0 0 rgba(var(--teal-rgb,13,148,136),.4);animation:fxBeat .7s ease, fxRing 1s ease-out;}
.fx-page .mv-underline{transition:transform .45s ease;transform-origin:left;}
.fx-page .mv-card:hover .mv-underline{transform:scaleX(1.7);}

/* stars twinkle */
.fx-page :is(.stars,.pt-stars){display:inline-block;transition:transform .3s ease, letter-spacing .3s ease;}
.fx-page :is(.testi-card,.pt-card):hover :is(.stars,.pt-stars){transform:scale(1.08);letter-spacing:2px;}

/* ---------- arrows, dots, video thumbs ---------- */
.fx-page :is(.carousel-arrow,.hero-arrow,.vt-arrow,.pt-arrow){transition:background .3s ease, color .3s ease, box-shadow .3s ease, scale .3s ease;}
.fx-page :is(.carousel-arrow,.hero-arrow,.vt-arrow,.pt-arrow):hover{scale:1.14;box-shadow:0 10px 22px rgba(var(--teal-rgb,13,148,136),.32);}
.fx-page :is(.carousel-arrow,.hero-arrow,.vt-arrow,.pt-arrow):active{scale:.94;}
.fx-page :is(.hero-dots,.carousel-dots) > *{transition:scale .25s ease, background .25s ease;}
.fx-page :is(.hero-dots,.carousel-dots) > *:hover{scale:1.35;}
.fx-page .vt-thumb-play{transition:scale .3s ease;}
.fx-page .vt-thumb:hover .vt-thumb-play{scale:1.2;}
.fx-page .vt-thumb.active{animation:fxRing 2s ease-out infinite;}

/* ---------- accordion ---------- */
.fx-page .accordion-item{transition:transform .3s ease, box-shadow .3s ease;}
.fx-page .accordion-item:hover{transform:translateX(5px);box-shadow:0 10px 24px rgba(var(--shadow-rgb,8,63,60),.1);}
.fx-page .accordion-toggle{transition:color .3s ease, background-color .3s ease;}
.fx-page .accordion-toggle:hover{color:var(--teal);}
.fx-page .accordion-toggle span{display:inline-block;transition:transform .3s ease;}
.fx-page .accordion-toggle:hover span{transform:scale(1.25);}

/* ---------- forms & map ---------- */
.fx-page :is(.appointment-form,.contact-col) :is(input,select,textarea){transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;}
.fx-page :is(.appointment-form,.contact-col) :is(input,select,textarea):hover{border-color:var(--teal);}
.fx-page :is(.appointment-form,.contact-col) :is(input,select,textarea):focus{
  border-color:var(--teal);outline:none;box-shadow:0 0 0 4px rgba(var(--teal-rgb,13,148,136),.16);transform:translateY(-1px);
}
.fx-page .appointment-form{transition:box-shadow .4s ease, transform .4s ease;}
.fx-page .appointment-form:hover{box-shadow:0 22px 48px rgba(var(--shadow-rgb,8,63,60),.14);}
.fx-page .map-embed{transition:box-shadow .4s ease, transform .4s ease;}
.fx-page .map-embed:hover{box-shadow:0 22px 48px rgba(var(--shadow-rgb,8,63,60),.18);transform:translateY(-4px);}

/* ---------- gentle floating decorations ---------- */
.fx-page :is(.about-badge,.team-badge,.reviews-badge,.contact-tooth-icon){animation:fxFloatT 5s ease-in-out infinite;}
.fx-page .cta-icon{animation:fxRing 2.4s ease-out infinite;}
.fx-page .cta-decor{animation:fxFloatT 7s ease-in-out infinite;}

/* ---------- respect reduced-motion settings ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-page *,.fx-page *::before,.fx-page *::after{animation:none !important;transition:none !important;}
  .fx-page .fx-reveal{opacity:1;transform:none;}
}

/* =========================================================
   HERO HEADING SIZE — set per slide in Admin > Home: Hero Slides
   (falls back to the original sizes when nothing is set)
========================================================= */
.hero-text h1{font-size:var(--h-size,2.6rem);}
@media (max-width:860px){.hero-text h1{font-size:var(--h-size-t,1.9rem);}}
@media (max-width:560px){.hero-text h1{font-size:var(--h-size-s,1.55rem);}}

/* About + Services heading sizes — set in Admin > Home (fall back to the original sizes) */
.about-text h2{font-size:var(--ab-h,2rem);}
.services-section .section-heading h2{font-size:var(--sv-h,1.5em);}
@media (max-width:860px){
  .about-text h2{font-size:var(--ab-h-t,2rem);}
  .services-section .section-heading h2{font-size:var(--sv-h-t,1.5em);}
}
@media (max-width:560px){
  .about-text h2{font-size:var(--ab-h-s,1.5rem);}
  .services-section .section-heading h2{font-size:var(--sv-h-s,1.5rem);}
}


/* =========================================================
   HOME — dynamic Doctors grid + Before/After slider (admin-driven)
========================================================= */
.doctors-section .doctors-grid{max-width:none;margin:0 auto;gap:26px;}
.doctors-section .dg-1{grid-template-columns:minmax(0,300px);justify-content:center;}
.doctors-section .dg-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;}
.doctors-section .dg-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:960px;}
.doctors-section .dg-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1024px){
  .doctors-section .dg-3,.doctors-section .dg-4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;}
}
@media (max-width:560px){
  .doctors-section .doctors-grid{gap:14px;}
  .doctors-section .dg-1{grid-template-columns:minmax(0,300px);}
  .doctors-section .dg-2,.doctors-section .dg-3,.doctors-section .dg-4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;}
}

/* before/after: the slider position comes from --ba (set by js/carousel.js) */
.ba-compare{--ba:50%;}
.ba-compare .ba-before-wrap{width:100%;clip-path:inset(0 calc(100% - var(--ba)) 0 0);}
.ba-compare .ba-before-wrap .ba-before-img{width:100%;height:100%;}
.ba-compare .ba-handle{left:var(--ba);}
.ba-caption{margin:8px 0 0;text-align:center;font-size:.92rem;font-weight:600;color:var(--text-dark);}
.carousel-track .ba-card{min-width:0;}

/* heading size set in admin (Our Doctors / Before & After) — shrinks on tablet / phone */
.doctors-section .section-heading h2{font-size:var(--dc-h,2rem);}
.before-after-section .section-heading h2{font-size:var(--ba-h,2rem);}
@media (max-width:860px){
  .doctors-section .section-heading h2{font-size:var(--dc-h-t,2rem);}
  .before-after-section .section-heading h2{font-size:var(--ba-h-t,2rem);}
}
@media (max-width:560px){
  .doctors-section .section-heading h2{font-size:var(--dc-h-s,1.5rem);}
  .before-after-section .section-heading h2{font-size:var(--ba-h-s,1.5rem);}
}

/* =========================================================
   HOME — Testimonials in Google-review style (2 grids) + dynamic FAQ
========================================================= */
.testimonials-section .section-heading h2{font-size:var(--ts-h,2rem);}
.faq-col h2{font-size:var(--fq-h,1.5em);}
@media (max-width:860px){
  .testimonials-section .section-heading h2{font-size:var(--ts-h-t,2rem);}
  .faq-col h2{font-size:var(--fq-h-t,1.5em);}
}
@media (max-width:560px){
  .testimonials-section .section-heading h2{font-size:var(--ts-h-s,1.5rem);}
  .faq-col h2{font-size:var(--fq-h-s,1.5rem);}
}

.faq-contact-grid.no-faq{grid-template-columns:minmax(0,640px);justify-content:center;}

/* grid 1 = rating box, grid 2 = review slider (2 cards per view) */
.gr-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:30px;align-items:stretch;}
.gr-layout.gr-solo{grid-template-columns:minmax(0,1fr);}

.gr-summary{
  background:#fff;border:1px solid #e3e8ee;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.gr-logo svg{width:42px;height:42px;display:block;margin:0 auto 6px;}
.gr-label{font-weight:700;letter-spacing:.08em;font-size:.95rem;color:var(--text-dark);}
.gr-big{font-size:2.6rem;font-weight:700;line-height:1.1;color:var(--text-dark);}
.gr-stars{font-size:1.5rem;letter-spacing:3px;line-height:1;}
.gr-stars .on,.gr-stars-sm .on{color:#fbbc04;}
.gr-stars .off,.gr-stars-sm .off{color:#dadce0;}
.gr-count{font-size:.86rem;color:var(--text-body);margin-bottom:10px;}
.gr-btn{margin-top:6px;}

.gr-slider{min-width:0;}
.gr-slider .carousel-track{gap:20px;}
.gr-card{
  flex:0 0 calc(50% - 10px);min-width:0;background:#fff;border:1px solid #e3e8ee;border-radius:12px;
  padding:20px 20px 22px;box-shadow:0 1px 3px rgba(60,64,67,.12),0 4px 12px rgba(60,64,67,.06);
  display:flex;flex-direction:column;gap:10px;transition:box-shadow .25s ease, transform .25s ease;
}
.gr-card:hover{box-shadow:0 2px 6px rgba(60,64,67,.18),0 10px 24px rgba(60,64,67,.10);transform:translateY(-3px);}
.gr-head{display:flex;align-items:center;gap:12px;}
.gr-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.gr-initial{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:1.2rem;}
.gr-who{min-width:0;}
.gr-who strong{display:block;font-size:.95rem;color:#202124;font-weight:600;line-height:1.25;}
.gr-who small{display:block;font-size:.78rem;color:#70757a;margin-top:2px;}
.gr-g{margin-left:auto;flex-shrink:0;}
.gr-g svg{width:22px;height:22px;display:block;}
.gr-rate{display:flex;align-items:center;gap:8px;}
.gr-stars-sm{font-size:1.05rem;letter-spacing:1px;line-height:1;}
.gr-verified{width:15px;height:15px;flex-shrink:0;}
.gr-text{margin:0;font-size:.92rem;line-height:1.6;color:#3c4043;}

@media (max-width:1024px){
  .gr-layout{grid-template-columns:minmax(0,1fr);}
  .gr-summary{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 22px;padding:20px;}
  .gr-logo svg{margin:0;}
  .gr-count{margin-bottom:0;}
  .gr-btn{margin-top:0;}
}
@media (max-width:700px){
  .gr-card{flex:0 0 100%;}
  .gr-summary{flex-direction:column;}
}

/* =========================================================
   HOME — dynamic Get In Touch + Blog (heading sizes set in admin, form notices)
========================================================= */
.contact-col h2{font-size:var(--ct-h,1.5em);}
.blog-section h2{font-size:var(--bg-h,1.5em);}
@media (max-width:860px){
  .contact-col h2{font-size:var(--ct-h-t,1.5em);}
  .blog-section h2{font-size:var(--bg-h-t,1.5em);}
}
@media (max-width:560px){
  .contact-col h2{font-size:var(--ct-h-s,1.5rem);}
  .blog-section h2{font-size:var(--bg-h-s,1.5rem);}
}
.form-notice{margin-top:16px;padding:13px 16px;border-radius:10px;font-size:.92rem;font-weight:500;}
.form-notice-ok{background:#e8f7ee;color:#136c3a;border:1px solid #bfe6cf;}
.form-notice-error{background:#fdecec;color:#b42318;border:1px solid #f6c6c6;}
.hp-field{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;}



/* =========================================================
   ABOUT PAGE — sizes set in Admin > About Page (shrink on tablet / phone)
========================================================= */
.hero-banner h1{font-size:var(--ah-h,2.6rem);}
.about-content h2{font-size:var(--aw-h,2rem);}
@media (max-width:768px){
  .hero-banner h1{font-size:var(--ah-h-t,2rem);}
  .about-content h2{font-size:var(--aw-h-t,2rem);}
}
@media (max-width:480px){
  .hero-banner h1{font-size:var(--ah-h-s,1.6rem);}
  .about-content h2{font-size:var(--aw-h-s,2rem);}
}


/* =========================================================
   ABOUT PAGE — Mission / Vision, Dentists, CTA (admin-driven)
========================================================= */
.mv-text h3{font-size:var(--mv-h,1.3rem);}
.cta-left h3{font-size:var(--cta-h,1.25rem);}
.mv-grid.mv-one{grid-template-columns:minmax(0,640px);justify-content:center;}
.doctors-section .doctors-grid.ab-grid{max-width:800px;gap:30px;}
.doctors-section .doctors-grid.ab-grid.ab-one{grid-template-columns:minmax(0,400px);justify-content:center;}
@media (max-width:768px){
  .mv-text h3{font-size:var(--mv-h-t,1.3rem);}
  .cta-left h3{font-size:var(--cta-h-t,1.25rem);}
}
@media (max-width:480px){
  .mv-text h3{font-size:var(--mv-h-s,1.3rem);}
  .cta-left h3{font-size:var(--cta-h-s,1.25rem);}
}


/* =========================================================
   DENTISTS PAGE — sizes set in Admin > Dentists Page (shrink on tablet / phone)
========================================================= */
.doctors-hero-title{font-size:var(--dh-h,2.3rem);}
.team-highlight-text h2{font-size:var(--dt-h,1.4rem);}
.doctors-showcase-grid.dp-one{grid-template-columns:minmax(0,480px);justify-content:center;}
.doctor-card-lg.dp-nobadge .doctor-info{padding-top:26px;}
.doctor-card-lg .doctor-badge{z-index:2;}
@media (max-width:860px){
  .doctors-hero-title{font-size:var(--dh-h-t,1.9rem);}
  .team-highlight-text h2{font-size:var(--dt-h-t,1.4rem);}
}
@media (max-width:560px){
  .doctors-hero-title{font-size:var(--dh-h-s,1.6rem);}
  .team-highlight-text h2{font-size:var(--dt-h-s,1.4rem);}
}


/* =========================================================
   REVIEWS PAGE — sizes set in Admin > Reviews Page (shrink on tablet / phone)
========================================================= */
.reviews-hero-title{font-size:var(--rh-h,2.3rem);}
.reviews-highlight-text h2{font-size:var(--ri-h,1.4rem);}
@media (max-width:860px){
  .reviews-hero-title{font-size:var(--rh-h-t,1.9rem);}
  .reviews-highlight-text h2{font-size:var(--ri-h-t,1.4rem);}
}
@media (max-width:560px){
  .reviews-hero-title{font-size:var(--rh-h-s,1.6rem);}
  .reviews-highlight-text h2{font-size:var(--ri-h-s,1.4rem);}
}

/* =========================================================
   REVIEWS PAGE — Patient Testimonials slider (same look as home), dynamic Video + CTA
========================================================= */
.patient-testimonials{padding:70px 0;}
.patient-testimonials .gr-slider{padding:0 6px;}

.vt-text h2{font-size:var(--vt-h,2rem);}
.video-testimonials-grid.vt-solo{grid-template-columns:minmax(0,760px);justify-content:center;}
.vt-thumb img,.vt-thumb-blank{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.vt-thumb-blank{background:linear-gradient(135deg,var(--teal-primary-hover,#0e7a7a),var(--teal-bright,#1aa6a0));}
@media (max-width:860px){
  .vt-text h2{font-size:var(--vt-h-t,1.7rem);}
  .vt-thumbs{max-width:none;margin:0;}
}
@media (max-width:560px){
  .vt-text h2{font-size:var(--vt-h-s,1.5rem);}
}


/* =========================================================
   CONTACT PAGE — admin-driven top banner + info cards
========================================================= */
.contact-hero-text h1{font-size:var(--ch-h,2.4rem);}
.contact-info-section .section-heading h2{font-size:var(--ci-h,2rem);}
@media (max-width:768px){
  .contact-info-section .section-heading h2{font-size:var(--ci-h-t,2rem);}
}
@media (max-width:480px){
  .contact-hero-text h1{font-size:var(--ch-h-s,1.7rem);}
  .contact-info-section .section-heading h2{font-size:var(--ci-h-s,1.6rem);}
}
/* any number of cards: 4 in a row on desktop, 2 on tablets, 1 on phones */
.contact-info-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}

/* contact page: map hidden in admin -> the message form is centred on its own */
.contact-map-grid.no-map{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto;}

/* visually hidden (screen readers / SEO only) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}