/* =========================================================
   SMILE SKULPT — PREMIUM GOLD / CHARCOAL DESIGN SYSTEM
   ========================================================= */
:root{
  --ss-black:#0f0e0c;
  --ss-charcoal:#171512;
  --ss-brown:#272016;
  --ss-gold:#d4a52c;
  --ss-gold-light:#f0cb63;
  --ss-gold-dark:#9a7217;
  --ss-cream:#fbf8f0;
  --ss-cream-2:#f4efe3;
  --ss-white:#ffffff;
  --ss-text:#403a31;
  --ss-muted:#756f65;
  --ss-line:rgba(212,165,44,.22);
  --ss-shadow:0 22px 60px rgba(15,14,12,.10);
  --ss-radius:24px;
}

html{scroll-behavior:smooth}
body{
  background:var(--ss-cream) !important;
  color:var(--ss-text) !important;
  font-family:"Inter","Roboto",Arial,sans-serif !important;
  line-height:1.7;
}
body:before{content:"";display:block;height:0}
::selection{background:var(--ss-gold);color:var(--ss-black)}
a{transition:all .25s ease}
h1,h2,h3,h4,h5,h6{
  font-family:"Playfair Display","Georgia",serif !important;
  color:var(--ss-black) !important;
  letter-spacing:-.02em;
}
.display-5,.hero-title,h1,h2,h3{font-weight:700}
.text-muted{color:var(--ss-muted)!important}
.text-primary,.text-primary i{color:var(--ss-gold)!important}
.bg-light{background:var(--ss-cream-2)!important}
.bg-white{background:var(--ss-white)!important}

/* Header */
.main-nav{
  background:rgba(15,14,12,.94)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(240,203,99,.14);
  min-height:88px;
  padding-top:10px!important;
  padding-bottom:10px!important;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  z-index:1030;
}
.main-nav.scrolled{background:rgba(15,14,12,.98)!important;box-shadow:0 14px 45px rgba(0,0,0,.25)}
.brand-logo{min-width:145px}
.brand-logo img{height:68px!important;width:128px!important;object-fit:contain;display:block}
.brand-logo h4,.brand-logo .Logo{color:var(--ss-gold-light)!important;font-size:1rem}
.navbar .nav{gap:8px}
.nav-link,.navbar-nav .nav-link{
  color:var(--ss-gold-light)!important;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.02em;
  padding:.7rem .9rem!important;
  position:relative;
}
.nav-link:after{
  content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;
  background:var(--ss-gold);transform:translateX(-50%);transition:.25s ease;border-radius:9px
}
.nav-link:hover,.nav-link.active{color:#fff!important}
.nav-link:hover:after,.nav-link.active:after{width:60%}
.main-nav>.container>.btn,
.main-nav .btn{
  background:linear-gradient(135deg,var(--ss-gold-light),var(--ss-gold))!important;
  color:var(--ss-black)!important;
  border:1px solid var(--ss-gold-light)!important;
  border-radius:999px!important;
  font-weight:800!important;
  padding:.72rem 1.35rem!important;
  box-shadow:0 8px 25px rgba(212,165,44,.20);
}
.main-nav .btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(212,165,44,.35)}
.navbar-toggler{color:var(--ss-gold-light)!important;border:1px solid rgba(240,203,99,.3)!important;border-radius:12px;padding:.35rem .6rem}
.navbar-toggler i{color:var(--ss-gold-light)!important}
.offcanvas{background:var(--ss-charcoal)!important;color:#fff!important}
.offcanvas .brand-logo img{height:65px!important}
.offcanvas .brand-logo h4{color:var(--ss-gold-light)!important}
.offcanvas .nav-link{color:var(--ss-gold-light)!important;font-size:1rem}
.offcanvas .btn-close{filter:invert(1);opacity:.8}

/* Buttons */
.btn{
  border:0!important;border-radius:999px!important;font-weight:700!important;
  padding:.78rem 1.35rem!important;transition:all .25s ease!important
}
.btn:hover{transform:translateY(-2px)}
.hero-btn,.btn-primary,.make-btn,.price-btn,.cta-btn{
  background:linear-gradient(135deg,var(--ss-gold-light),var(--ss-gold))!important;
  color:var(--ss-black)!important;
  border:1px solid var(--ss-gold-light)!important;
  box-shadow:0 10px 28px rgba(212,165,44,.18)
}
.btn-outline-primary,.btn-outline-primary:visited{
  color:var(--ss-gold-dark)!important;border:1px solid var(--ss-gold)!important;background:transparent!important
}
.btn-outline-primary:hover{background:var(--ss-gold)!important;color:var(--ss-black)!important}
.btn-light{background:#fff!important;color:var(--ss-black)!important;border:1px solid rgba(15,14,12,.08)!important}

/* Hero — homepage */
.hero-modern{
  padding:115px 0 115px!important;
  background:
    radial-gradient(circle at 82% 20%,rgba(212,165,44,.16),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(212,165,44,.08),transparent 24%),
    var(--ss-cream)!important;
  border-radius:0!important;color:var(--ss-black)!important;position:relative;overflow:hidden
}
.hero-modern:before{
  content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(212,165,44,.2);
  border-radius:50%;right:-190px;top:90px;box-shadow:0 0 0 40px rgba(212,165,44,.035),0 0 0 80px rgba(212,165,44,.025)
}
.hero-modern .container{position:relative;z-index:1}
.hero-title{
  color:var(--ss-black)!important;font-size:clamp(2.6rem,5vw,4.8rem)!important;
  line-height:1.03!important;max-width:700px;margin-bottom:20px
}
.hero-title::first-line{color:var(--ss-gold-dark)}
.hero-desc{color:var(--ss-muted)!important;font-size:1.05rem;max-width:590px;line-height:1.85}
.hero-modern .hero-btn{margin-top:8px}
.hero-img{
  width: min(100%, 500px) !important;
  height: 520px !important;
  max-height: none !important;
  object-fit: cover !important;
  padding: 0 !important;
  left: auto !important;
  display: block;
  margin: auto;

  /* Egg shape */
  border-radius: 30% 30% 35% 35% / 32% 32% 30% 30%;

  filter: drop-shadow(0 28px 35px rgba(15,14,12,.16));
}

.hero-rating{
  background:var(--ss-black)!important;border:1px solid rgba(240,203,99,.35);border-radius:16px!important;
  padding:10px 16px!important;color:#fff!important;box-shadow:0 12px 30px rgba(15,14,12,.12)
}
.rating-value{color:var(--ss-gold-light)!important}
.rating-text{color:#e8e2d7!important}

/* Inner page hero */
.hero-section{
  min-height:56vh!important;padding-top:150px!important;padding-bottom:90px!important;
  background:
    radial-gradient(circle at 80% 25%,rgba(212,165,44,.18),transparent 26%),
    linear-gradient(135deg,#fffdf8 0%,#f4eee2 100%)!important;
  position:relative!important;overflow:hidden!important;display:flex;align-items:center;justify-content:center
}
.hero-section:after{
  content:"";position:absolute;right:-130px;bottom:-180px;width:400px;height:400px;border:1px solid rgba(212,165,44,.25);border-radius:50%;box-shadow:0 0 0 35px rgba(212,165,44,.04)
}
.hero-section .container{position:relative;z-index:2}
.hero-section .hero-title{color:var(--ss-black)!important;font-size:clamp(2.5rem,5vw,4.3rem)!important}
.hero-text{color:var(--ss-muted)!important;max-width:700px!important;line-height:1.8}

/* Gold section label */
.blog-tag,.faq-tag,.tag{color:var(--ss-gold-dark)!important;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:800}

/* Appointment */
.appointment-bar{
  background:#fff!important;border:1px solid var(--ss-line);border-radius:24px!important;
  padding:28px!important;margin-top:-50px!important;position:relative;z-index:5;
  box-shadow:var(--ss-shadow)!important
}
.form-label{color:var(--ss-black)!important;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.form-control,.form-select{
  border:1px solid #ded7c9!important;background:#fff!important;color:var(--ss-text)!important;
  border-radius:12px!important;min-height:46px!important;box-shadow:none!important
}
.form-control:focus,.form-select:focus{border-color:var(--ss-gold)!important;box-shadow:0 0 0 4px rgba(212,165,44,.12)!important}
.make-btn{min-height:46px}

/* Feature strip */
.features-grid{padding-top:70px!important;padding-bottom:55px!important}
.feature-item{background:#fff;border:1px solid rgba(15,14,12,.07);border-radius:18px;padding:28px 20px;min-height:175px;box-shadow:0 10px 30px rgba(15,14,12,.05);transition:.3s}
.feature-item:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(15,14,12,.10);border-color:var(--ss-line)}
.feature-icon{font-size:35px!important;color:var(--ss-gold)!important;margin-bottom:10px}
.feature-item h5{color:var(--ss-black)!important;font-size:1.05rem}
.feature-item p{color:var(--ss-muted)!important;font-size:.9rem}

/* General content sections */
.container-xxl,.container-fluid{position:relative}
.container-xxl.py-5{padding-top:90px!important;padding-bottom:90px!important}
.container-fluid.bg-light{background:var(--ss-cream-2)!important}
.container-fluid.bg-light.py-5{padding-top:90px!important;padding-bottom:90px!important}

/* About */
.container-xxl .position-relative.overflow-hidden{
  border-radius:28px!important;box-shadow:var(--ss-shadow);border:1px solid rgba(212,165,44,.16)
}
.container-xxl .position-relative.overflow-hidden img{transition:transform .6s ease}
.container-xxl .position-relative.overflow-hidden:hover img{transform:scale(1.035)}
.container-xxl .position-absolute.top-0.end-0{background:var(--ss-cream)!important;padding-left:10px!important;padding-bottom:10px!important}
.container-xxl .position-absolute.top-0.end-0>div{background:var(--ss-black)!important;border:1px solid rgba(240,203,99,.3)}
.container-xxl .position-absolute.top-0.end-0 h1{color:var(--ss-gold-light)!important;font-size:3rem}
.container-xxl .position-absolute.top-0.end-0 h3,.container-xxl .position-absolute.top-0.end-0 h6{color:#fff!important}
.container-xxl .display-5{font-size:clamp(2.1rem,4vw,3.4rem)!important;line-height:1.1}
.blog-tag.mb-4{display:inline-block}
.btn-lg-square{background:var(--ss-cream-2)!important;color:var(--ss-gold-dark)!important;border-radius:15px!important;display:flex;align-items:center;justify-content:center}
.border-top{border-color:var(--ss-line)!important}

/* Services */
.service-item,.service-card,.solution-card,.price-card,.team-card,.why-team-box{
  background:#fff!important;border:1px solid rgba(15,14,12,.07)!important;border-radius:22px!important;
  box-shadow:0 14px 35px rgba(15,14,12,.06)!important;transition:all .3s ease!important;overflow:hidden
}
.service-item:hover,.service-card:hover,.solution-card:hover,.price-card:hover,.team-card:hover,.why-team-box:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(15,14,12,.12)!important;border-color:var(--ss-line)!important}
.service-icon{background:var(--ss-cream-2)!important;border-radius:16px!important;width:64px!important;height:64px!important;display:flex;align-items:center;justify-content:center}
.service-icon img{max-height:45px;max-width:45px;object-fit:contain}
.service-text h3{font-size:1.35rem!important;margin-bottom:7px}
.service-img{height:230px!important;object-fit:cover;border-radius:16px!important;transition:transform .5s ease}
.service-item:hover .service-img{transform:scale(1.035)}
.service-card,.solution-card{padding:30px!important}
.service-card i,.solution-icon{color:var(--ss-gold)!important}
.solution-icon{background:var(--ss-black)!important;border-radius:16px!important}
.solution-link,.team-link,.read-link{color:var(--ss-gold-dark)!important;font-weight:800}

/* Testimonials */
.testimonial-box{background:#fff;border:1px solid rgba(15,14,12,.07);border-radius:28px!important;overflow:hidden;box-shadow:var(--ss-shadow)}
.testimonial-img{height:390px!important;object-fit:cover}
.testimonial-content{padding:50px!important}
.quote-icon{color:var(--ss-gold)!important;font-size:3.5rem!important;line-height:.8}
.testimonial-text{color:var(--ss-muted)!important;line-height:1.9}
.review-avatar{border:2px solid var(--ss-gold)!important}

/* Blog */
.blog-card{background:#fff;border:1px solid rgba(15,14,12,.07);border-radius:20px!important;padding:14px!important;box-shadow:0 12px 32px rgba(15,14,12,.05);transition:.3s}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 22px 45px rgba(15,14,12,.10)}
.blog-img{border-radius:15px!important}

/* FAQ */
.accordion-item{border:1px solid rgba(15,14,12,.08)!important;border-radius:15px!important;background:#fff!important;margin-bottom:12px!important;box-shadow:0 7px 20px rgba(15,14,12,.035)}
.accordion-button{background:#fff!important;color:var(--ss-black)!important;border-radius:15px!important;padding:1.15rem 1.25rem;font-weight:700!important}
.accordion-button:not(.collapsed){background:var(--ss-cream-2)!important;color:var(--ss-gold-dark)!important;box-shadow:none!important}
.accordion-button:focus{box-shadow:0 0 0 3px rgba(212,165,44,.10)!important}

/* Stats */
.stats-box{background:linear-gradient(135deg,var(--ss-black),var(--ss-brown))!important;border:1px solid rgba(240,203,99,.25);border-radius:24px!important;padding:35px!important;box-shadow:var(--ss-shadow)}
.stats-icon{color:var(--ss-gold-light)!important}
.counter,.stats-label{color:#fff!important}
.counter{font-family:"Inter",Arial,sans-serif!important}
.stats-label{opacity:.78}

/* CTA */
.cta-box,.cta-section .cta-box{background:linear-gradient(135deg,var(--ss-black),var(--ss-brown))!important;border:1px solid rgba(240,203,99,.28)!important;border-radius:26px!important;padding:42px!important;box-shadow:var(--ss-shadow)}
.cta-box h3{color:#fff!important}
.cta-box p{color:#d8d0c3!important}
.cta-btn{background:var(--ss-gold-light)!important}

/* Inner appointment */
.appointment-box{background:linear-gradient(135deg,var(--ss-black),var(--ss-brown))!important;border:1px solid rgba(240,203,99,.28);box-shadow:var(--ss-shadow);border-radius:24px!important}
.appointment-box h1,.appointment-box h2,.appointment-box h3,.appointment-box h4,.appointment-box h5,.appointment-box h6{color:#fff!important}
.appointment-box .text-white,.appointment-box .text-white-50{color:#fff!important}
.equal-img{border-radius:0 24px 24px 0!important;object-fit:cover}

/* Pricing */
.price-card{padding:32px!important;position:relative}
.price-card.popular{border:2px solid var(--ss-gold)!important;transform:translateY(-8px)}
.price-card.popular:hover{transform:translateY(-14px)}
.price{color:var(--ss-gold-dark)!important;font-family:"Inter",Arial,sans-serif!important}
.price-list li{color:var(--ss-muted)!important;padding:4px 0}
.badge-popular{background:var(--ss-gold)!important;color:var(--ss-black)!important;font-weight:800;border-radius:999px;padding:5px 12px}

/* Contact */
.contact-icon,.contactus .bg-primary,.bg-primary{background:var(--ss-black)!important}
.contactus .text-primary{color:var(--ss-gold)!important}

/* Footer */
.footer-section{background:var(--ss-black)!important;color:#d8d0c3!important;border-top:1px solid rgba(240,203,99,.16)}
.footer-section h6,.footer-section strong{color:#fff!important}
.footer-section p,.footer-section small,.footer-contact li{color:#bdb5a8!important}
.footer-links a{color:#bdb5a8!important;text-decoration:none}
.footer-links a:hover{color:var(--ss-gold-light)!important;padding-left:4px}
.footer-contact i,.social-icons i{color:var(--ss-gold)!important}
.social-icons i:hover{color:#fff!important;transform:translateY(-2px)}
.footer-section hr{border-color:rgba(240,203,99,.16)!important;opacity:1}
.footer-section .logo{color:var(--ss-gold-light)!important}
.footer-section .logo i{color:var(--ss-gold)!important}

/* Images */
.equal-img,.why-img,.team-img{object-fit:cover}
.why-img{border:1px solid var(--ss-line);box-shadow:var(--ss-shadow)!important;border-radius:24px!important}
.why-list li{color:var(--ss-text)!important}
.why-list i{color:var(--ss-gold)!important}

/* Accessibility / polish */
img{max-width:100%}
*:focus-visible{outline:2px solid var(--ss-gold);outline-offset:3px}

@media(max-width:991.98px){
  .main-nav{min-height:78px}
  .brand-logo img{height:58px!important;width:110px!important}
  .hero-modern{padding-top:125px!important;padding-bottom:80px!important}
  .hero-modern .hero-img{margin-top:40px;max-height:420px}
  .hero-title{font-size:clamp(2.45rem,8vw,4rem)!important}
  .appointment-bar{margin-top:-30px!important}
  .price-card.popular{transform:none}
}
@media(max-width:767.98px){
  .hero-modern{text-align:center}
  .hero-desc{margin-left:auto;margin-right:auto}
  .hero-modern .d-flex{justify-content:center}
  .hero-rating{margin-left:auto;margin-right:auto}
  .appointment-bar{margin:20px 12px 0!important;padding:22px!important}
  .features-grid{padding-top:40px!important}
  .container-xxl.py-5,.container-fluid.bg-light.py-5{padding-top:60px!important;padding-bottom:60px!important}
  .testimonial-img{height:280px!important}
  .testimonial-content{padding:32px!important}
  .blog-card{display:block!important}
  .blog-img{width:100%!important;height:190px!important;margin-bottom:15px}
  .cta-box{padding:30px 22px!important;text-align:center}
  .equal-img{border-radius:0 0 24px 24px!important}
  .appointment-box{border-radius:24px 24px 0 0!important}
}

/* Final layout fixes */
.hero-section .hero-content-center {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-section .hero-content-center .hero-title,
.hero-section .hero-content-center .hero-text {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Homepage: show the complete treatment images without cropping */
.service-item .service-img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 16px !important;
}


/* Final alignment fixes for inner-page hero headings */
.hero-section > .container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.hero-section > .container > .hero-title {
  width: 100% !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.hero-section > .container > .hero-text {
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.hero-section > .container > .hero-btn {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep homepage treatment images fully visible */
.service-item .service-img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}

/* =========================================================
   PREMIUM MOTION SYSTEM — shared by every page
   ========================================================= */
.premium-inner-hero {
  isolation: isolate;
}

.premium-inner-hero::before,
.premium-inner-hero::after {
  pointer-events: none;
}

/* Elegant floating gold atmosphere */
.premium-inner-hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -260px;
  top: 5%;
  border: 1px solid rgba(212,165,44,.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 35px rgba(212,165,44,.025),
    0 0 0 75px rgba(212,165,44,.018);
  animation: premiumOrbit 18s linear infinite;
}

.premium-inner-hero::after {
  animation: premiumPulse 5s ease-in-out infinite;
}

.hero-modern::before,
.hero-section::before {
  animation: premiumFloat 8s ease-in-out infinite;
}

/* Page-load polish */
body {
  animation: premiumPageIn .55s ease both;
}

/* Give images a subtle premium lift while keeping motion restrained */
.hero-img {
  animation: premiumHeroFloat 6s ease-in-out infinite;
  transform-origin: center bottom;
}

.service-item,
.service-card,
.solution-card,
.price-card,
.team-card,
.why-team-box,
.blog-card,
.testimonial-box,
.feature-item {
  will-change: transform;
}

/* Smooth focus/hover movement */
.btn,
.nav-link,
.service-item,
.service-card,
.solution-card,
.price-card,
.team-card,
.blog-card,
.feature-item {
  transition-timing-function: cubic-bezier(.22,1,.36,1) !important;
}

@keyframes premiumPageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes premiumHeroFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(.35deg); }
}

@keyframes premiumFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-12px,0); }
}

@keyframes premiumOrbit {
  from { transform: rotate(0deg) translateX(0); }
  to { transform: rotate(360deg) translateX(0); }
}

@keyframes premiumPulse {
  0%,100% { opacity: .8; }
  50% { opacity: 1; }
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body,
  .hero-img,
  .premium-inner-hero::before,
  .premium-inner-hero::after,
  .hero-modern::before,
  .hero-section::before {
    animation: none !important;
  }
  [data-aos] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 767.98px) {
  .premium-inner-hero::before {
    width: 360px;
    height: 360px;
    left: -230px;
  }
  .hero-img { animation-duration: 7s; }
}


/* =========================================================
   MOBILE-FIRST RESPONSIVE HARDENING
   ========================================================= */
html, body { max-width: 100%; overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; }
.container, .container-fluid, .container-xxl { --bs-gutter-x: 1.5rem; }
img, svg, video, iframe { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Prevent animated/decorative elements from creating horizontal scroll. */
.premium-inner-hero,
.hero-modern,
.hero-section,
.main-nav { overflow: hidden; }

@media (max-width: 991.98px) {
  .main-nav .container { min-height: 72px; }
  .main-nav .brand-logo { min-width: 0; max-width: 56vw; }
  .main-nav .brand-logo img { width: 110px !important; height: 58px !important; }
  .navbar-toggler { flex: 0 0 auto; padding: .25rem .4rem; }

  .hero-modern,
  .hero-section { min-height: auto !important; }

  .hero-modern .row,
  .hero-section .row { row-gap: 2rem; }

  .hero-title { font-size: clamp(2rem, 7vw, 3.25rem) !important; }
  .hero-text, .hero-desc { font-size: .98rem !important; }

  .appointment-bar { width: auto; max-width: calc(100% - 24px); }
  .cta-box { gap: 1.25rem; }
}

@media (max-width: 767.98px) {
  .container, .container-fluid, .container-xxl { padding-left: 16px !important; padding-right: 16px !important; }
  section { overflow-x: clip; }

  .main-nav { padding-top: .55rem !important; padding-bottom: .55rem !important; }
  .main-nav .brand-logo img { width: 100px !important; height: 54px !important; }
  .main-nav .brand-logo::after { bottom: 0; }

  .hero-modern { padding: 110px 0 60px !important; border-radius: 0 0 24px 24px; }
  .hero-section { padding: 110px 0 55px !important; }
  .hero-title { font-size: clamp(1.85rem, 9vw, 2.7rem) !important; line-height: 1.12 !important; }
  .hero-text, .hero-desc { max-width: 100% !important; }
  .hero-img { width: min(100%, 360px) !important; margin: 20px auto 0 !important; left: auto !important; }

  .hero-modern .d-flex { flex-wrap: wrap; gap: .75rem !important; }
  .hero-modern .btn, .hero-section .btn { min-height: 46px; }

  .appointment-bar { margin: 18px 0 0 !important; max-width: 100%; padding: 18px 14px !important; border-radius: 18px; }
  .appointment-bar .row { row-gap: 10px; }
  .appointment-bar input,
  .appointment-bar select,
  .appointment-bar textarea,
  .appointment-bar button { width: 100%; min-height: 44px; }

  .stats-box, .cta-box { padding: 24px 18px !important; border-radius: 18px; }
  .stats-box { gap: 22px; }
  .cta-box { flex-direction: column; text-align: center; }

  .service-item, .service-card, .solution-card, .price-card, .team-card, .blog-card, .feature-item { width: 100%; }
  .service-item .service-img { max-height: none !important; }
  .testimonial-img { height: 250px !important; }
  .testimonial-content { padding: 24px 18px !important; }
  .testimonial-text { max-width: 100%; }

  .offcanvas { width: min(88vw, 380px) !important; }
  .offcanvas .brand-logo { min-width: 0; max-width: 75%; }
  .offcanvas .brand-logo img { width: 100px !important; height: 58px !important; }
  .offcanvas .nav-link { padding: 10px 0; font-size: 1rem; }

  .footer-section { overflow: hidden; }
  footer .row { row-gap: 1.75rem; }
}

@media (max-width: 380px) {
  .main-nav .brand-logo img { width: 88px !important; height: 50px !important; }
  .hero-title { font-size: 1.75rem !important; }
  .hero-modern { padding-top: 105px !important; }
  .container, .container-fluid, .container-xxl { padding-left: 12px !important; padding-right: 12px !important; }
}

/* =========================================================
   SMILE SKULPT — NAVIGATION LOGO MOTION
   Shared by Home, About Us, Services and Contact Us.
   ========================================================= */
.main-nav .brand-logo{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  overflow:visible;
  will-change:transform;
  animation: ssLogoSlide 4.8s ease-in-out infinite;
}

.main-nav .brand-logo img{
  will-change:transform,filter;
  transform-origin:center center;
  animation:ssLogoFloat 3.8s ease-in-out infinite;
  transition:filter .3s ease,transform .3s ease;
}

.main-nav .brand-logo::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:1px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(240,203,99,.34) 0%,
    rgba(212,165,44,.12) 42%,
    transparent 74%);
  filter:blur(5px);
  pointer-events:none;
  animation:ssLogoGlow 2.7s ease-in-out infinite;
}

.main-nav .brand-logo:hover img{
  filter:drop-shadow(0 7px 18px rgba(240,203,99,.28));
}

@keyframes ssLogoSlide{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(14px)}
}

@keyframes ssLogoFloat{
  0%,100%{transform:translateX(-2px) translateY(0) rotate(0)}
  50%{transform:translateX(2px) translateY(-2px) rotate(-.25deg)}
}

@keyframes ssLogoGlow{
  0%,100%{opacity:.35;transform:scaleX(.82)}
  50%{opacity:.9;transform:scaleX(1)}
}

/* Premium mobile menu: cleaner spacing and a softer entrance. */
.offcanvas{
  width:min(88vw,380px)!important;
  border-left:1px solid rgba(240,203,99,.16)!important;
  box-shadow:-18px 0 55px rgba(0,0,0,.28)!important;
}
.offcanvas .offcanvas-header{
  padding:22px 22px 14px!important;
  border-bottom:1px solid rgba(240,203,99,.12);
}
.offcanvas .offcanvas-body{
  padding:18px 22px 28px!important;
}
.offcanvas .brand-logo{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0!important;
  max-width:calc(100% - 42px)!important;
  animation:ssMobileLogoSlide 4.8s ease-in-out infinite;
}
.offcanvas .brand-logo img{
  width:100px!important;
  height:58px!important;
  flex:0 0 auto;
  animation:ssMobileLogoFloat 3.8s ease-in-out infinite;
}
.offcanvas .brand-logo h4{
  font-size:1.02rem!important;
  line-height:1.15!important;
  margin:0!important;
}
.offcanvas .nav-link{
  padding:12px 0!important;
  font-size:1.05rem!important;
  letter-spacing:.01em;
}
.offcanvas .nav-link:after{
  left:0;
  transform:none;
  bottom:3px;
}
.offcanvas .nav-link:hover:after,
.offcanvas .nav-link.active:after{width:68px}
.offcanvas .booking-trigger{
  margin-top:18px;
  width:100%;
  justify-content:center;
  min-height:54px;
}
.offcanvas .btn-close{
  flex:0 0 auto;
  width:28px;
  height:28px;
  padding:5px!important;
  border-radius:50%;
  opacity:.9;
  background-size:20px;
}

@keyframes ssMobileLogoSlide{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(7px)}
}
@keyframes ssMobileLogoFloat{
  0%,100%{transform:translateX(-1px) translateY(0)}
  50%{transform:translateX(2px) translateY(-1px)}
}

@media (max-width:991.98px){
  .main-nav .brand-logo{animation-duration:5.8s}
  .main-nav .brand-logo img{animation-duration:4.4s}
}

@media (prefers-reduced-motion:reduce){
  .main-nav .brand-logo,
  .main-nav .brand-logo img,
  .main-nav .brand-logo::after,
  .offcanvas .brand-logo,
  .offcanvas .brand-logo img{
    animation:none!important;
  }
}


/* =========================================================
   MOBILE RESPONSIVE FIXES — Smile Skulpt
   Designed for 320px–767px phones and tablets.
   ========================================================= */
@media (max-width: 767.98px) {
  /* Keep every page inside the viewport. */
  html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
  .row { --bs-gutter-x: 1rem; }
  [class*="col-"] { min-width: 0; }

  /* Fixed header: reserve a little less vertical space on phones. */
  .main-nav { min-height: 72px !important; }
  .main-nav .container { padding-left: 14px !important; padding-right: 14px !important; }
  .main-nav .brand-logo { max-width: 58vw !important; }
  .main-nav .brand-logo img { width: 96px !important; height: 52px !important; object-fit: contain; }
  .navbar-toggler { min-width: 48px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Homepage hero: stack cleanly and prevent oversized image spacing. */
  .hero-modern { padding: 68px 0 48px !important; }
  .hero-modern .row { row-gap: 1rem !important; }
  .hero-title { font-size: clamp(1.85rem, 8.8vw, 2.65rem) !important; line-height: 1.1 !important; }
  .hero-desc { font-size: .94rem !important; line-height: 1.65 !important; }
  .hero-modern .hero-img { width: min(100%, 310px) !important; max-height: none !important; margin: 10px auto 0 !important;  }
  .hero-rating { font-size: .88rem; padding: 9px 13px !important; }

  /* Appointment form becomes a comfortable one-column mobile form. */
  .appointment-bar { margin: 14px 0 0 !important; padding: 18px 14px !important; }
  .appointment-bar .row { row-gap: 12px !important; }
  .appointment-bar [class*="col-"] { width: 100% !important; flex: 0 0 100% !important; }
  .appointment-bar .form-control,
  .appointment-bar .form-select,
  .appointment-bar .make-btn { min-height: 48px !important; }

  /* About image: do NOT crop the square image on mobile. */
  .container-xxl .position-relative.overflow-hidden {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 22px !important;
  }
  .container-xxl .position-relative.overflow-hidden > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* Move the experience badge away from the face on phone screens. */
  .container-xxl .position-absolute.top-0.end-0 {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    width: 126px !important;
    height: 126px !important;
    padding: 6px !important;
    z-index: 3;
  }
  .container-xxl .position-absolute.top-0.end-0 > div { padding: 10px !important; }
  .container-xxl .position-absolute.top-0.end-0 h1 { font-size: 2rem !important; margin-bottom: 0 !important; }
  .container-xxl .position-absolute.top-0.end-0 h3 { font-size: 1.1rem !important; margin-bottom: 2px !important; }
  .container-xxl .position-absolute.top-0.end-0 h6 { font-size: .72rem !important; }

  /* Mobile section spacing and headings. */
  .container-xxl.py-5,
  .container-fluid.bg-light.py-5 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .container-xxl .display-5,
  .container-fluid .display-5 { font-size: clamp(1.8rem, 7vw, 2.35rem) !important; line-height: 1.15 !important; }
  .container-xxl .border-top { margin-top: 1.5rem !important; padding-top: 1.25rem !important; }

  /* Treatment cards: image first, text below, no horizontal overflow. */
  .service-item { padding: 18px !important; }
  .service-item .d-flex.ms-n4 { margin-left: 0 !important; flex-wrap: wrap; }
  .service-item .service-icon { margin-right: 12px !important; }
  .service-item .service-text { flex: 1 1 180px; min-width: 0; }
  .service-item .service-img { width: 100% !important; height: auto !important; object-fit: contain !important; }

  /* Stats: use a 2×2 grid on phones instead of four long rows. */
  .stats-box { padding: 20px 10px !important; }
  .stats-box > .row { row-gap: 22px; }
  .stats-box .col-md-3 { width: 50% !important; flex: 0 0 50% !important; padding-left: 6px; padding-right: 6px; }
  .stats-icon { font-size: 27px !important; }
  .counter { font-size: clamp(1.65rem, 8vw, 2rem) !important; margin-bottom: 2px !important; }
  .stats-label { font-size: .74rem !important; line-height: 1.35 !important; }

  /* Inner-page hero headings stay centered and compact. */
  .hero-section { min-height: 0 !important; padding: 100px 0 48px !important; }
  .hero-section > .container { padding-left: 16px !important; padding-right: 16px !important; }
  .hero-section > .container > .hero-title { font-size: clamp(2rem, 9vw, 2.7rem) !important; }
  .hero-section > .container > .hero-text { font-size: .95rem !important; line-height: 1.65 !important; }

  /* Contact cards and map stack without clipped height. */
  .contactus .container-fluid { padding-top: 38px !important; padding-bottom: 38px !important; }
  .contactus .col-md-4 { width: 100% !important; }
  .contactus iframe,
  iframe { max-width: 100%; }
  .contactus [style*="min-height: 450px"],
  .contactus .position-relative.h-100 { min-height: 300px !important; height: 300px !important; }
  .contactus iframe { min-height: 300px !important; height: 300px !important; }

  /* Buttons and form controls need touch-friendly targets. */
  .btn { min-height: 44px; }
  .form-control, .form-select { min-height: 48px !important; }
  textarea.form-control { min-height: 120px !important; }

  /* Footer columns stack naturally with readable spacing. */
  .footer-section { overflow: hidden !important; }
  .footer-section .container { padding-left: 18px !important; padding-right: 18px !important; }
}

@media (max-width: 380px) {
  .main-nav .brand-logo img { width: 88px !important; height: 48px !important; }
  .hero-modern { padding-top: 62px !important; }
  .container-xxl .position-absolute.top-0.end-0 { width: 112px !important; height: 112px !important; right: 8px !important; bottom: 8px !important; }
  .container-xxl .position-absolute.top-0.end-0 h1 { font-size: 1.75rem !important; }
  .stats-label { font-size: .68rem !important; }
}

/* =========================================================
   FINAL MOBILE ABOUT SECTION FIX
   ========================================================= */
@media (max-width: 991.98px) {
  /* Keep the About image and its content in one clean vertical column. */
  .container-xxl > .container > .row > .col-lg-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .container-xxl .position-relative.overflow-hidden {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  /* Put the experience badge right at the lower edge, away from the face. */
  .container-xxl .position-absolute.top-0.end-0 {
    top: auto !important;
    right: 6px !important;
    bottom: 0 !important;
    transform: none !important;
  }

  /* Call-us information should never sit off-screen beside the photo. */
  .container-xxl .border-top .d-flex {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .container-xxl .border-top .d-flex img {
    flex: 0 0 auto !important;
    max-width: 56px !important;
    height: auto !important;
  }

  .container-xxl .border-top .d-flex h5 {
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(.95rem, 4.2vw, 1.2rem) !important;
    line-height: 1.35 !important;
  }
}


/* Mobile View */
@media (max-width: 767px) {
  .hero-img {
    width: min(100%, 330px) !important;
    height: 380px !important;
    max-height: 380px !important;
    object-fit: cover !important;

    border-radius: 30% 30% 35% 35% / 32% 32% 30% 30%;

    margin: 0 auto !important;
  }
}

/* Premium testimonial slider */
.testimonials-section{position:relative}
.testimonial-carousel{background:#fff;border:1px solid rgba(15,14,12,.08);border-radius:28px;box-shadow:var(--ss-shadow);overflow:hidden;padding:0 72px 52px}
.testimonial-slide{min-height:300px;display:flex;align-items:center;justify-content:center;gap:38px;padding:48px 55px 58px}
.testimonial-passport{width:92px!important;height:118px!important;min-width:92px;object-fit:cover;border-radius:10px;border:3px solid var(--ss-gold);box-shadow:0 10px 24px rgba(15,14,12,.12);background:#f5f5f5}
.testimonial-copy{max-width:700px}
.testimonial-copy .quote-icon{margin-bottom:12px}
.testimonial-copy .testimonial-text{font-size:1.05rem;margin-bottom:20px}
.testimonial-carousel .carousel-indicators{bottom:14px;margin-bottom:0}
.testimonial-carousel .carousel-indicators button{width:9px;height:9px;border-radius:50%;border:0;background:var(--ss-gold);opacity:.35}
.testimonial-carousel .carousel-indicators button.active{opacity:1}
.testimonial-control{width:62px!important;opacity:1!important}
.testimonial-control .carousel-control-prev-icon,
.testimonial-control .carousel-control-next-icon{background-color:var(--ss-black);background-size:45%;border-radius:50%;width:42px;height:42px}
@media(max-width:767.98px){
  .testimonial-carousel{padding:0 28px 50px;border-radius:22px}
  .testimonial-slide{min-height:390px;flex-direction:column;text-align:center;gap:20px;padding:42px 22px 55px}
  .testimonial-passport{width:82px!important;height:106px!important;min-width:82px}
  .testimonial-copy{max-width:100%}
  .testimonial-copy .quote-icon{font-size:2.8rem!important}
  .testimonial-copy .testimonial-text{font-size:.98rem;line-height:1.7}
  .testimonial-control{width:35px!important}
  .testimonial-control .carousel-control-prev-icon,
  .testimonial-control .carousel-control-next-icon{width:34px;height:34px}
}


/* =========================================================
   Smile Skulpt — Premium Animated Hero Clinic Heading
   ========================================================= */
.hero-modern .hero-clinic-title {
  display: block;
  width: 100%;
  max-width: 100% !important;
  margin-bottom: 22px !important;
  /* Reduced from the previous 3.15rem maximum so the full clinic
     name stays visible inside the desktop text column. */
  font-size: clamp(2.05rem, 2.65vw, 2.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em;
  font-weight: 800 !important;
  color: transparent !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

.hero-clinic-title .hero-title-line {
  display: block;
  width: 100%;
  max-width: 100%;
  color: transparent !important;
  background: linear-gradient(
    90deg,
    #0b0b0f 0%,
    #1677ff 18%,
    #00a6a6 34%,
    #d4af37 50%,
    #8b5cf6 68%,
    #e11d48 84%,
    #0b0b0f 100%
  );
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: smileSkulptHeadingFlow 7s ease-in-out infinite;
  will-change: background-position;
}

.hero-clinic-title .hero-title-line:nth-child(2) {
  animation-delay: -2.3s;
}

.hero-clinic-title .hero-title-line:nth-child(3) {
  animation-delay: -4.6s;
}

@keyframes smileSkulptHeadingFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Desktop: keep the three intentional heading lines intact,
   while using a smaller size that fits the 7-column text area. */
@media (min-width: 992px) {
  .hero-modern .hero-clinic-title .hero-title-line {
    white-space: nowrap;
  }
}

/* Tablet: allow natural wrapping if the available column is narrower. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-modern .hero-clinic-title {
    font-size: clamp(1.9rem, 4.4vw, 2.45rem) !important;
  }

  .hero-modern .hero-clinic-title .hero-title-line {
    white-space: normal;
  }
}

/* Mobile: smaller, readable heading with no horizontal overflow. */
@media (max-width: 767.98px) {
  .hero-modern .hero-clinic-title {
    font-size: clamp(1.45rem, 7.2vw, 1.85rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em;
    margin-bottom: 18px !important;
  }

  .hero-clinic-title .hero-title-line {
    width: 100%;
    white-space: normal;
  }
}

/* Very small phones: keep the full heading comfortably inside the viewport. */
@media (max-width: 380px) {
  .hero-modern .hero-clinic-title {
    font-size: 1.38rem !important;
    line-height: 1.14 !important;
  }
}

/* Accessibility: respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .hero-clinic-title .hero-title-line {
    animation: none;
    background-position: 50% 50%;
  }
}


/* =========================================================
   MOBILE HERO HEADING — FIX HEADER OVERLAP
   ========================================================= */

@media (max-width: 767px) {

    /* Keep hero below the fixed mobile header */
    .hero-modern {
        position: relative !important;
        overflow-x: hidden !important;
    }

    /* Move ONLY the main heading down */
    .hero-modern .hero-clinic-title {
        position: relative !important;
        top: 38px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto 55px !important;
        padding: 0 10px !important;

        text-align: center !important;

        font-size: 30px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;

        white-space: normal !important;
        overflow: visible !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .hero-modern .hero-clinic-title .hero-title-line {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        text-align: center !important;

        white-space: normal !important;
        overflow: visible !important;

        line-height: 1.15 !important;
    }

}


/* Smaller phones */
@media (max-width: 380px) {

    .hero-modern .hero-clinic-title {
        top: 32px !important;
        font-size: 26px !important;
        line-height: 1.16 !important;
        margin-bottom: 48px !important;
    }

}

/* =========================================================
   HOME HERO — SMILE SKULPT CLINIC BRAND HEADING
   Styled to closely match the supplied reference artwork.
   ========================================================= */
.hero-heading-block{
  text-align:center;
  max-width:650px;
  margin:0 auto;
  position:relative;
  padding:6px 0 2px;
}
.hero-brand-mark{
  width:118px;
  height:86px;
  margin:0 auto 4px;
  overflow:hidden;
  position:relative;
}
.hero-brand-mark img{
  position:absolute;
  width:245px;
  max-width:none;
  height:auto;
  left:50%;
  top:0;
  transform:translateX(-50%);
}
.hero-clinic-title{
  margin:0!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.08!important;
  font-weight:400!important;
}
.hero-main-brand{
  display:block;
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif!important;
  font-size:clamp(2.85rem,4.5vw,4.7rem)!important;
  line-height:.92!important;
  letter-spacing:-.035em!important;
  white-space:nowrap;
  color:#171717!important;
  font-weight:600!important;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}
.hero-main-brand em{
  color:var(--ss-gold-dark)!important;
  font-style:normal;
  font-weight:600!important;
}
.hero-clinic-name{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:13px;
  padding:0;
  border-bottom:0;
  font-family:"Montserrat","Roboto",Arial,sans-serif!important;
  font-size:clamp(1rem,1.65vw,1.55rem)!important;
  line-height:1!important;
  letter-spacing:.20em!important;
  color:#202020!important;
  font-weight:500!important;
}
.hero-clinic-name::before,
.hero-clinic-name::after{
  content:"";
  display:block;
  flex:0 1 58px;
  width:58px;
  height:1px;
  background:linear-gradient(90deg,transparent,#b58a32 25%,#d4af37 50%,#b58a32 75%,transparent);
  box-shadow:0 0 1px rgba(180,138,50,.35);
}
.hero-clinic-name::before{transform:translateY(1px);}
.hero-clinic-name::after{transform:translateY(1px);}

.hero-surgery-name{
  display:block;
  margin-top:12px;
  font-family:"Montserrat","Roboto",Arial,sans-serif!important;
  font-size:clamp(.78rem,1.05vw,1rem)!important;
  line-height:1.2!important;
  letter-spacing:.16em!important;
  color:#3e3a35!important;
  font-weight:400!important;
  white-space:nowrap;
}
.hero-location{
  display:block;
  margin-top:12px;
  font-family:"Montserrat","Roboto",Arial,sans-serif!important;
  font-size:.9rem!important;
  line-height:1!important;
  letter-spacing:.22em!important;
  color:var(--ss-gold-dark)!important;
  font-weight:500!important;
}
.hero-location i{margin-right:5px;font-size:.9em}
.hero-heading-rule{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:10px;
}
.hero-heading-rule span{
  width:76px;
  height:2px;
  display:block;
  background:linear-gradient(90deg,transparent,var(--ss-gold),transparent);
  border-radius:50%;
}
.hero-desc{
  text-align:center;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:500px!important;
}

@media (max-width:991.98px){
  .hero-heading-block{max-width:100%;padding-top:2px}
  .hero-main-brand{font-size:clamp(2.4rem,7.5vw,3.75rem)!important}
  .hero-surgery-name{letter-spacing:.11em!important}
}
@media (max-width:575.98px){
  .hero-brand-mark{width:100px;height:72px}
  .hero-brand-mark img{width:210px}
  .hero-main-brand{font-size:2.35rem!important;letter-spacing:-.045em!important}
  .hero-clinic-name{font-size:.92rem!important;letter-spacing:.13em!important;padding-left:0;padding-right:0;gap:10px}
  .hero-clinic-name::before,.hero-clinic-name::after{flex-basis:34px;width:34px}
  .hero-surgery-name{font-size:.68rem!important;letter-spacing:.08em!important;white-space:normal;max-width:310px}
  .hero-location{font-size:.78rem!important;letter-spacing:.18em!important}
  .hero-desc{font-size:.92rem!important;line-height:1.6!important}
}

/* Final home hero refinements */
.hero-main-brand span{
  color:#171717!important;
}
.hero-cta-row{
  width:100%;
  justify-content:center!important;
  text-align:center;
}
.hero-cta-row .hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0!important;
}
@media (max-width:575.98px){
  .hero-cta-row{
    flex-direction:column;
    width:100%;
    gap:.7rem!important;
  }
  .hero-cta-row .hero-btn{
    width:auto;
    max-width:100%;
  }
}


/* =========================================================
   FINAL HERO MOBILE RESPONSIVE + FULL LOGO FIX
   ========================================================= */

/* Show the complete Smile Skulpt logo inside the hero.
   The original CSS cropped the logo inside a small fixed-height box. */
.hero-brand-mark{
  width:190px !important;
  height:auto !important;
  aspect-ratio:1671 / 941 !important;
  margin:0 auto 14px !important;
  overflow:visible !important;
  position:relative !important;
}
.hero-brand-mark img{
  position:static !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  transform:none !important;
}

/* Keep the complete hero heading inside the viewport. */
.hero-modern{
  overflow-x:hidden !important;
}
.hero-heading-block{
  width:100% !important;
  max-width:650px !important;
  padding-left:12px !important;
  padding-right:12px !important;
  box-sizing:border-box !important;
}
.hero-main-brand{
  max-width:100% !important;
  white-space:nowrap !important;
}

/* Tablet */
@media (min-width:768px) and (max-width:991.98px){
  .hero-modern{
    padding:110px 0 70px !important;
  }
  .hero-brand-mark{
    width:175px !important;
  }
  .hero-main-brand{
    font-size:clamp(2.25rem,7vw,3.5rem) !important;
  }
  .hero-surgery-name{
    white-space:normal !important;
  }
  .hero-img{
    width:min(100%,400px) !important;
    height:auto !important;
    max-height:460px !important;
    object-fit:cover !important;
  }
}

/* Mobile phones */
@media (max-width:767.98px){
  .hero-modern{
    padding:112px 0 48px !important;
    overflow-x:hidden !important;
  }

  .hero-modern .row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    row-gap:24px !important;
  }

  .hero-modern .col-lg-7,
  .hero-modern .col-md-7,
  .hero-modern .col-lg-5,
  .hero-modern .col-md-5{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }

  .hero-heading-block{
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 8px !important;
  }

  /* Full logo — no clipping/cropping on mobile. */
  .hero-brand-mark{
    width:min(190px,55vw) !important;
    height:auto !important;
    aspect-ratio:1671 / 941 !important;
    margin:0 auto 12px !important;
    overflow:visible !important;
  }

  .hero-brand-mark img{
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
  }

  /* Cancel the older +38px mobile heading offset. */
  .hero-modern .hero-clinic-title{
    position:static !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 18px !important;
    padding:0 !important;
    font-size:inherit !important;
  }

  .hero-main-brand{
    font-size:clamp(2rem,9vw,2.55rem) !important;
    line-height:1 !important;
    letter-spacing:-.045em !important;
    white-space:nowrap !important;
  }

  .hero-clinic-name{
    font-size:clamp(.78rem,3.8vw,.95rem) !important;
    letter-spacing:.11em !important;
    gap:7px !important;
    margin-top:11px !important;
  }

  .hero-clinic-name::before,
  .hero-clinic-name::after{
    flex:0 1 28px !important;
    width:28px !important;
  }

  .hero-surgery-name{
    font-size:clamp(.61rem,2.7vw,.72rem) !important;
    line-height:1.35 !important;
    letter-spacing:.065em !important;
    white-space:normal !important;
    max-width:310px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-location{
    font-size:.72rem !important;
    letter-spacing:.16em !important;
    margin-top:10px !important;
  }

  .hero-heading-rule{
    margin-top:9px !important;
  }

  .hero-desc{
    width:100% !important;
    max-width:430px !important;
    padding:0 12px !important;
    box-sizing:border-box !important;
    font-size:.92rem !important;
    line-height:1.6 !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-cta-row{
    width:100% !important;
    padding:0 12px !important;
    box-sizing:border-box !important;
    flex-direction:column !important;
    gap:.7rem !important;
  }

  .hero-cta-row .hero-btn{
    width:100% !important;
    max-width:330px !important;
    min-height:46px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* Make the hero photo fluid instead of keeping the desktop 520px height. */
  .hero-modern .hero-img{
    display:block !important;
    width:min(100%,330px) !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:1 / 1 !important;
    object-fit:cover !important;
    margin:0 auto !important;
  }
}

/* Very small phones */
@media (max-width:380px){
  .hero-modern{
    padding-top:106px !important;
  }
  .hero-brand-mark{
    width:155px !important;
  }
  .hero-main-brand{
    font-size:1.85rem !important;
  }
  .hero-clinic-name{
    font-size:.72rem !important;
  }
  .hero-surgery-name{
    font-size:.59rem !important;
  }
  .hero-modern .hero-img{
    width:min(100%,290px) !important;
  }
}

/* =========================================================
   HERO BRAND LETTER SVG FIX
   The decorative S letters are inline SVG images. Keep them
   proportional to the heading and prevent stretching/cropping.
   ========================================================= */
.hero-main-brand > span,
.hero-main-brand > em{
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle !important;
}
.hero-main-brand img{
  display:inline-block !important;
  width:.82em !important;
  height:.82em !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  vertical-align:-.08em !important;
  margin:0 .02em 0 0 !important;
}
@media (max-width:767.98px){
  .hero-main-brand img{
    width:.78em !important;
    height:.78em !important;
  }
}

/* =========================================================
   FINAL MOBILE HERO LOGO CROP FIX
   Uses the real hero-brand-symbol.png aspect ratio (1072:735)
   so the complete logo remains visible on every phone width.
   ========================================================= */
.hero-brand-mark{
  width:min(230px, 42vw) !important;
  height:auto !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
  position:relative !important;
  margin:0 auto 14px !important;
  line-height:0 !important;
}

.hero-brand-mark img{
  position:static !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:none !important;
}

@media (max-width:767.98px){
  .hero-brand-mark{
    width:min(230px, 64vw) !important;
    height:auto !important;
    aspect-ratio:auto !important;
    margin:0 auto 12px !important;
    overflow:visible !important;
  }

  .hero-brand-mark img{
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
  }
}

@media (max-width:380px){
  .hero-brand-mark{
    width:min(205px, 62vw) !important;
  }
}