/* DentalOne inspired layout, built on the existing clinic content and routes. */
:root {
    --ink: #162c17;
    --green: #1c5e1f;
    --mint: #e7f3e8;
    --cream: #f5f9f7;
    --line: #dae6db;
    --brand-deep: #174d19;
    --brand-green: #1d6520;
    --brand-lime: #97ca99;
    --brand-soft: #e9f3e9;
    --brand-ink: #162c17;
    --lime: #97ca99
}

body {
    background: #fff;
    color: var(--ink)
}

body h1, body h2, body h3 {
    font-family: Manrope, 'DM Sans', sans-serif;
    letter-spacing: -.065em
}

h1, h2 {
    font-weight: 650
}

h1 em, h2 em {
    color: #257228
}

.wrap {
    max-width: 1360px;
    padding-left: clamp(20px, 5vw, 72px);
    padding-right: clamp(20px, 5vw, 72px)
}

.topline {
    background: #174d19
}

.site-header-stack {
    position: sticky;
    top: 0;
    z-index: 50
}

.header {
    position: relative;
    top: auto;
    border-bottom: 1px solid #e4ede4;
    box-shadow: 0 10px 32px #162c1709;
    background: #fff
}

.nav {
    min-height: 78px
}

.logo {
    height: 60px
}

.navlinks {
    gap: clamp(13px, 2vw, 30px);
    font-size: 13px
}

.navlinks > a:not(.btn) {
    position: relative
}

.navlinks > a:not(.btn):after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 100%;
    height: 2px;
    background: #226c25;
    transition: right .3s
}

.navlinks > a:not(.btn):hover:after, .navlinks > a.is-active:not(.btn):after {
    right: 0
}

.btn, .nav-cta {
    border-radius: 100px;
    padding: 15px 25px;
    background: #1e6221;
    color: #fff;
    transition: transform .3s, box-shadow .3s, background .3s
}

.btn:hover, .nav-cta:hover {
    background: #174919;
    box-shadow: 0 13px 27px #174d1935;
    transform: translateY(-3px)
}

.btn:focus-visible, a:focus-visible, button:focus-visible {
    outline: 3px solid #2a8a2e;
    outline-offset: 4px
}

.eyebrow {
    color: #206322;
    letter-spacing: .16em
}

.eyebrow i {
    background: #206322
}

.hero {
    background: #ebf3eb;
    isolation: isolate
}

.hero-grid {
    grid-template-columns:51% 49%;
    min-height: 690px
}

.hero-copy {
    padding: 75px 5vw 82px 0
}

.hero h1 {
    font-size: clamp(3.8rem, 6.6vw, 7.4rem);
    letter-spacing: -.085em;
    line-height: 1.01;
    color: #19371a;
    margin-bottom: 30px
}

.hero-dot {
    color: #2b862e
}

.hero p {
    color: #4b734d;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.75
}

.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d9e7da;
    border-radius: 100px;
    padding: 10px 16px;
    margin-bottom: 32px;
    box-shadow: 0 8px 25px #174d1909
}

.hero .text-link {
    color: #1b4e1d;
    border-color: #1b4e1d
}

.hero-actions {
    gap: 28px
}

.hero-stat {
    margin-top: 74px
}

.avatars {
    display: flex;
    align-items: center;
    background: none;
    padding: 0
}

.avatars span {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid #ebf3eb;
    border-radius: 50%;
    margin-left: -8px;
    color: #1f6322;
    font-size: 19px
}

.avatars span:first-child {
    margin-left: 0
}

.hero-stat strong {
    font-size: 14px;
    color: #1f3d20
}

.hero-stat small {
    font-size: 12px
}

.hero-visual {
    height: 690px;
    margin-right: 0;
    border-radius: 0 0 0 135px;
    box-shadow: none
}

.hero-visual:before {
    background: linear-gradient(180deg, transparent 50%, #10331248);
    z-index: 2
}

.hero-glow {
    display: none
}

.hero-slide-image img {
    object-position: center
}

.hero-badge {
    left: 25px;
    bottom: 36px;
    border-radius: 17px;
    padding: 17px 20px;
    max-width: 275px
}

.hero-badge > span {
    display: grid;
    place-items: center;
    background: #dbefdc;
    color: #1a5d1d;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    font-size: 24px
}

.hero-badge strong {
    color: #1d381e
}

.float-chip {
    color: #1f3d20;
    border-color: #e6eee6;
    box-shadow: 0 12px 35px #18401923
}

.float-chip b {
    color: #217424
}

.image-spark {
    color: #fff
}

.hero-slider-controls {
    background: #194b1bb8
}

.hero-services-strip {
    padding: 35px 0 55px;
    background: #fff
}

.hero-services-grid {
    gap: 17px
}

.hero-service-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e3ece3;
    box-shadow: 0 11px 28px #19371a0b;
    transition: transform .35s, box-shadow .35s
}

.hero-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 48px #174d1921
}

.hero-service-photo img, .service-image img, .about-image img {
    transition: transform .7s cubic-bezier(.2, .7, .2, 1)
}

.hero-service-card:hover img, .service-card:hover img, .about-image:hover img {
    transform: scale(1.065)
}

.hero-service-icon {
    color: #1d6520
}

.hero-service-arrow {
    color: #1d6520
}

.ticker {
    background: #1c5e1f;
    color: #fff
}

.trust {
    background: #f7fbf9
}

.trust-grid > div {
    color: #227125
}

.trust-grid span {
    color: #1f3d20
}

.section {
    padding-top: clamp(75px, 8vw, 130px);
    padding-bottom: clamp(75px, 8vw, 130px)
}

.section h2 {
    color: #1b351c
}

.reference-intro {
    background: #f4faf7
}

.reference-intro h2, .reference-process h2 {
    max-width: 790px
}

.reference-intro p {
    color: #4e7850
}

.reference-reviews {
    background: #e8f2e8
}

.reference-review-grid blockquote {
    border: 1px solid #dae6da;
    box-shadow: 0 15px 30px #174d190b
}

.review-quote-mark {
    color: #1d6620
}

.review-slider-controls > button {
    color: #18521a;
    border-color: #c2d7c2
}

.review-slider-dots button[aria-current=true] {
    background: #1f6322
}

.section-top h2 {
    max-width: 720px
}

.service-card {
    border-radius: 20px;
    overflow: hidden;
    padding: 12px 12px 28px;
    border-color: #dfeae6;
    box-shadow: 0 9px 27px #173d2009
}

.service-image {
    border-radius: 13px;
    overflow: hidden
}

.service-card .number {
    color: #1f6322
}

.circle-arrow {
    color: #1d6520;
    border-color: #bcd5bd
}

.about-band {
    background: #e8f5f0
}

.about-image {
    border-radius: 28px;
    overflow: hidden
}

.floating-label {
    border-radius: 100px;
    right: 16px;
    bottom: 17px;
    color: #18511a
}

.feature-line {
    border-color: #c9d9c9
}

.feature-line > span {
    color: #1f7023
}

.reference-process {
    background: #fff
}

.reference-process-list > div {
    border-color: #cdddcd;
    transition: transform .3s, padding-left .3s, background .3s
}

.reference-process-list > div:hover {
    transform: translateX(7px);
    padding-left: 10px;
    background: #f5f9f5
}

.reference-process-list span {
    color: #1f7323
}

.reference-locations {
    background: #f4faf7
}

.reference-location-card {
    border: 1px solid #dce8dd;
    border-radius: 20px;
    overflow: hidden
}

.page-head {
    background: linear-gradient(130deg, #e8f2e8 0%, #f6faf8 100%);
    max-width: none;
    padding: clamp(80px, 8vw, 125px) max(32px, calc((100vw - 1216px) / 2))
}

.page-head h1 {
    color: #19351a
}

.page-head p {
    color: #4d754e
}

.team-card, .form-card, .contact-panel {
    border-radius: 22px
}

.faq-section {
    background: #f2faf7
}

footer {
   /* background: #143115;*/
    background: #2a2927;
    color: #e8f3e8
}

.site-preloader {
    background: #eaf6f1
}

.preloader-ring {
    border-color: #cae0cb;
    border-top-color: #1d6720
}

.preloader-line i {
    background: #227125
}

@media (max-width: 1000px) {
    .hero-grid {
        grid-template-columns:1fr 1fr
    }

    .hero h1 {
        font-size: clamp(3.4rem, 6vw, 5.8rem)
    }

    .hero-visual {
        height: 620px
    }

    .hero-grid {
        min-height: 620px
    }

    .hero-copy {
        padding-right: 30px
    }
}

@media (max-width: 700px) {
    .site-header-stack {
        position: sticky
    }

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

    .nav {
        min-height: 72px
    }

    .menu-button {
        border-color: #d1e1d2;
        background: #edf7f3
    }

    .menu-button::before {
        color: #174e19
    }

    .navlinks {
        top: 72px;
        border-color: #d8e7d9
    }

    .hero-grid {
        display: flex;
        flex-direction: column;
        min-height: 0
    }

    .hero-copy {
        width: 100%;
        padding: 58px 0 42px
    }

    .hero h1 {
        font-size: clamp(3.4rem, 12vw, 5rem)
    }

    .hero p {
        font-size: 16px
    }

    .hero-stat {
        margin-top: 40px
    }

    .hero-visual {
        width: calc(100% + 40px);
        height: 420px;
        margin: 0 -20px;
        border-radius: 85px 85px 0 0
    }

    .hero-badge {
        left: 20px;
        bottom: 18px
    }

    .float-chip.chip-top {
        right: 12px;
        top: 18px
    }

    .float-chip.chip-bottom {
        display: none
    }

    .hero-services-strip {
        padding: 25px 0 45px
    }

    .section {
        padding-top: 75px;
        padding-bottom: 75px
    }

    .page-head {
        padding: 74px 20px
    }

    .page-head h1 {
        font-size: clamp(3.3rem, 11vw, 5rem)
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy, .hero-visual, .hero-slide-copy.is-active h1, .hero-slide-copy.is-active p, .hero-stat {
        animation: none !important
    }

    .hero-service-card, .service-card, .reference-process-list > div {
        transition: none !important
    }
}

/* Motion layer: installed only after the observer is running. */
.dental-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 101;
    background: #278a2b;
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
    box-shadow: 0 1px 8px #22762577
}

.dental-motion .hero-service-card, .dental-motion .service-card, .dental-motion .team-card, .dental-motion .reference-review-grid blockquote, .dental-motion .reference-process-list > div, .dental-motion .reference-location-card, .dental-motion .gallery-tile, .dental-motion .faq-section details {
    opacity: 0;
    transform: translateY(38px) scale(.96);
    transition: opacity .8s var(--entry-delay, 0ms), transform .85s cubic-bezier(.16, 1, .3, 1) var(--entry-delay, 0ms), box-shadow .3s
}

.dental-motion .hero-service-card.dental-visible, .dental-motion .service-card.dental-visible, .dental-motion .team-card.dental-visible, .dental-motion .reference-review-grid blockquote.dental-visible, .dental-motion .reference-process-list > div.dental-visible, .dental-motion .reference-location-card.dental-visible, .dental-motion .gallery-tile.dental-visible, .dental-motion .faq-section details.dental-visible {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.dental-motion .hero-service-card.dental-visible:hover, .dental-motion .service-card.dental-visible:hover, .dental-motion .reference-location-card.dental-visible:hover {
    transform: translateY(-9px) scale(1.015)
}

.dental-motion .reference-intro h2, .dental-motion .reference-reviews h2, .dental-motion #treatments h2, .dental-motion .about-band h2, .dental-motion .reference-process h2, .dental-motion .reference-locations h2, .dental-motion .faq-section h2, .dental-motion .page-head h1 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s, transform 1s cubic-bezier(.16, 1, .3, 1)
}

.dental-motion .reference-intro.dental-visible h2, .dental-motion .reference-reviews.dental-visible h2, .dental-motion #treatments.dental-visible h2, .dental-motion .about-band.dental-visible h2, .dental-motion .reference-process.dental-visible h2, .dental-motion .reference-locations.dental-visible h2, .dental-motion .faq-section.dental-visible h2, .dental-motion .page-head.dental-visible h1 {
    opacity: 1;
    transform: none
}

.dental-motion-complete .hero-service-card, .dental-motion-complete .service-card, .dental-motion-complete .team-card, .dental-motion-complete .reference-review-grid blockquote, .dental-motion-complete .reference-process-list > div, .dental-motion-complete .reference-location-card, .dental-motion-complete .gallery-tile, .dental-motion-complete .faq-section details, .dental-motion-complete .reference-intro h2, .dental-motion-complete .reference-reviews h2, .dental-motion-complete #treatments h2, .dental-motion-complete .about-band h2, .dental-motion-complete .reference-process h2, .dental-motion-complete .reference-locations h2, .dental-motion-complete .faq-section h2, .dental-motion-complete .page-head h1 {
    opacity: 1;
    transform: none
}

.hero-visual .hero-slide-image.is-active img {
    transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0) scale(1.055);
    transition: transform .45s ease-out
}

.hero-visual .hero-slide-image:not(.is-active) img {
    transform: scale(1.1)
}

.hero-badge {
    animation: dentalFloat 4.2s ease-in-out infinite
}

.hero .eyebrow {
    animation: dentalAppear .7s .05s both
}

.hero-actions .btn {
    animation: dentalAppear .7s .3s both
}

.hero-orbit {
    border-color: #1e692133
}

@keyframes dentalFloat {
    0%, 100% {
        translate: 0 0
    }
    50% {
        translate: 0 -10px
    }
}

@keyframes dentalAppear {
    from {
        opacity: 0;
        transform: translateY(25px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

@media (prefers-reduced-motion: reduce) {
    .dental-scroll-progress {
        display: none
    }

    .hero-badge, .hero .eyebrow, .hero-actions .btn {
        animation: none !important
    }

    .dental-motion * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important
    }
}

/* Interactive before-and-after image comparison. Both layers use the same
   registered two-panel illustration; no external images are needed. */
.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
}

.smile-comparison {
    background: #f3f9f3
}

.comparison-heading {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 58px
}

.comparison-heading h2 {
    margin-bottom: 17px
}

.comparison-heading p {
    font-size: 17px;
    color: #517c53;
    line-height: 1.7
}

.comparison-layout {
    display: grid;
    grid-template-columns:minmax(250px, .85fr) minmax(400px, 1.15fr);
    gap: clamp(35px, 6vw, 95px);
    align-items: center
}

.comparison-copy h3 {
    font-size: clamp(2.4rem, 4vw, 4.5rem);
    line-height: 1.1;
    margin: 18px 0
}

.comparison-copy > p {
    color: #4e7850;
    line-height: 1.8;
    max-width: 450px
}

.comparison-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    color: #226e25
}

.comparison-points {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 18px;
    margin: 30px 0
}

.comparison-points > div {
    padding-top: 17px;
    border-top: 1px solid #cddecd
}

.comparison-points strong, .comparison-points span {
    display: block
}

.comparison-points strong {
    color: #1e6321;
    font-size: 17px;
    margin-bottom: 11px
}

.comparison-points span {
    font-size: 14px;
    color: #4f7850;
    line-height: 1.75
}

.comparison-widget {
    position: relative;
    aspect-ratio: 1.18;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
    background: #d6e9e2;
    box-shadow: 0 30px 70px #1a491c30;
    touch-action: pan-y
}

.comparison-before, .comparison-after {
    position: absolute;
    inset: 0;
    background-image: url('smile-before-after.png');
    background-repeat: no-repeat;
    background-size: 200% 100%
}

.comparison-before {
    background-position: left center;
    clip-path: inset(0 calc(100% - var(--split)) 0 0)
}

.comparison-after {
    background-position: right center
}

.comparison-tag {
    position: absolute;
    top: 18px;
    padding: 10px 15px;
    background: #123613ba;
    backdrop-filter: blur(8px);
    color: #fff;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
    z-index: 3
}

.comparison-tag-before {
    left: 18px
}

.comparison-tag-after {
    right: 18px
}

.comparison-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split);
    width: 3px;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 0 10px #12361355;
    pointer-events: none;
    z-index: 3
}

.comparison-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #17501a;
    white-space: pre;
    font-size: 28px;
    font-weight: 800;
    box-shadow: 0 4px 20px #12361350
}

.comparison-range {
    position: absolute;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    margin: 0
}

.comparison-range:focus-visible {
    opacity: 1;
    outline: 3px solid #1e7222;
    outline-offset: -5px
}

.comparison-range:focus-visible::-moz-range-thumb {
    opacity: 0
}

.comparison-disclaimer {
    font-size: 12px;
    color: #5b8c5d;
    text-align: right;
    margin: 20px 0 0
}

/* The original photo slider continues behind the new floating tooth. */
.hero-tooth-orbit {
    position: absolute;
    z-index: 3;
    width: min(60%, 380px);
    aspect-ratio: 1;
    top: 11%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 36% 30%, #f0f9f0ec, #4fa452b5 52%, #1f6c22ac 82%);
    border: 2px solid #f3fbf4aa;
    box-shadow: inset -25px -30px 65px #14481650, 0 25px 55px #14451633;
    pointer-events: auto;
    perspective: 900px;
    animation: toothOrbitFloat 6s ease-in-out infinite
}

.hero-tooth-orbit:before {
    content: '';
    position: absolute;
    inset: -14px;
    border: 3px solid #c7e9c8aa;
    border-radius: 50%;
    transform: rotate(-25deg) scaleY(.76);
    pointer-events: none
}

.hero-tooth-model {
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(10px 25px 18px #14441666);
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(.22, .7, .16, 1), filter .7s;
    cursor: pointer
}

.hero-tooth-orbit:hover .hero-tooth-model {
    transform: rotateY(360deg) rotate(-8deg) scale(1.09);
    filter: drop-shadow(15px 32px 23px #14441677)
}

@keyframes toothOrbitFloat {
    0%, 100% {
        translate: 0 0
    }
    50% {
        translate: 0 -14px
    }
}

@media (max-width: 850px) {
    .comparison-layout {
        grid-template-columns:1fr
    }

    .comparison-widget {
        width: 100%;
        max-width: 650px;
        margin: auto
    }

    .comparison-copy {
        max-width: 680px
    }
}

@media (max-width: 700px) {
    .comparison-heading {
        margin-bottom: 30px
    }

    .comparison-widget {
        aspect-ratio: 1.05
    }

    .comparison-disclaimer {
        text-align: left
    }

    .hero-tooth-orbit {
        width: min(55%, 260px);
        top: 15%
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-tooth-orbit {
        animation: none
    }

    .hero-tooth-model {
        transition: none
    }

    .hero-tooth-orbit:hover .hero-tooth-model {
        transform: none
    }
}

.comparison-range:focus-visible {
    opacity: 0;
    outline: none
}

.comparison-widget:focus-within {
    outline: 3px solid #1f7223;
    outline-offset: 5px
}

/* Resolve the older full-bleed slider rules with the same or higher specificity. */
body .hero-slider {
    background: linear-gradient(135deg, #fff 10%, #f0f9f0 63%, #def2df 100%);
    color: #1d3e1f
}

body .hero-slider .hero-grid {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(430px, .93fr);
    height: clamp(610px, 72vh, 770px);
    min-height: 610px;
    max-width: 1370px;
    margin: auto;
    padding: 0 clamp(25px, 5vw, 76px);
    align-items: stretch;
    position: relative
}

body .hero-slider .hero-copy {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 5
}

body .hero-slider .hero-slide-copy, body .hero-slider .hero-slide-copy.is-active {
    left: 0;
    right: auto;
    top: 49%;
    width: min(100%, 650px);
    transform: translateY(-50%)
}

body .hero-slider .hero-slide-copy:before {
    color: #207424;
    content: 'DENT O CARE  ·  FAMILY DENTISTRY'
}

body .hero-slider h1, body .hero-slider .hero-slide-copy h1 {
    color: #1a351b;
    text-shadow: none;
    font-size: clamp(3.5rem, 5vw, 6.3rem);
    max-width: 680px
}

body .hero-slider .hero-slide-copy p {
    color: #507a51;
    text-shadow: none;
    max-width: 555px
}

body .hero-slider .hero-actions .btn {
    background: #227925;
    color: #fff;
    border-color: #227925
}

body .hero-slider .hero-actions .text-link {
    color: #1c581e;
    border-color: #8eb690;
    background: #fff
}

body .hero-slider .hero-visual, body .hero-slider .hero-frame {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: visible;
    border-radius: 0;
    z-index: 2;
    background: transparent
}

body .hero-slider .hero-frame {
    overflow: visible;
    isolation: isolate
}

body .hero-slider .hero-slide-image {
    display: none
}

body .hero-slider .hero-visual:before, body .hero-slider .hero-visual:after, body .hero-slider .hero-frame:after {
    display: none
}

body .hero-slider .hero-orbit, body .hero-slider .image-spark, body .hero-slider .float-chip, body .hero-slider .hero-glow {
    display: none
}

body .hero-slider .hero-badge {
    display: flex;
    left: 7%;
    bottom: 12%;
    box-shadow: 0 20px 45px #206d232b
}

body .hero-slider .hero-stat {
    display: flex;
    position: absolute;
    bottom: 7%;
    left: 0;
    right: 0;
    margin: 0
}

body .hero-slider .hero-slider-controls {
    position: absolute;
    bottom: 26px;
    right: 18px;
    left: auto;
    transform: none;
    z-index: 7;
    background: #236d26bb
}

body .hero-slider .hero-tooth-orbit {
    display: grid;
    position: absolute;
    width: min(95%, 500px);
    top: 50%;
    left: 50%;
    translate: 0 -50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 37% 30%, #f7fcf7, #b8e4ba 45%, #51b855 75%, #2b992f);
    border: 3px solid #f1faf2;
    box-shadow: inset -20px -28px 60px #1e762155, 0 30px 75px #2d883033;
    animation: toothOrbitFloat 6s ease-in-out infinite
}

.hero-tooth-spinner {
    position: relative;
    width: 87%;
    height: 87%;
    transform-style: preserve-3d;
    transition: transform .5s ease;
    filter: drop-shadow(12px 22px 20px #1f602277)
}

.hero-tooth-spinner .hero-tooth-model {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    backface-visibility: hidden;
    transform: none;
    filter: none;
    transition: none
}

.hero-tooth-spinner .hero-tooth-back {
    transform: rotateY(180deg) scaleX(-1)
}

body .hero-slider .hero-tooth-orbit:hover .hero-tooth-spinner {
    animation: toothTurn 3.3s linear infinite
}

body .hero-slider .hero-tooth-orbit:hover .hero-tooth-model {
    transform: none;
    filter: none
}

body .hero-slider .hero-tooth-orbit:hover .hero-tooth-back {
    transform: rotateY(180deg) scaleX(-1)
}

@keyframes toothTurn {
    to {
        transform: rotateY(360deg)
    }
}

@media (max-width: 950px) {
    body .hero-slider .hero-grid {
        grid-template-columns:minmax(0, 1fr) minmax(320px, .8fr)
    }

    body .hero-slider h1, body .hero-slider .hero-slide-copy h1 {
        font-size: clamp(2.9rem, 5vw, 4.8rem)
    }
}

@media (max-width: 700px) {
    body .hero-slider, body .hero-slider .hero-grid {
        height: auto;
        min-height: 0
    }

    body .hero-slider .hero-grid {
        display: flex;
        flex-direction: column;
        padding: 0 20px 30px
    }

    body .hero-slider .hero-copy {
        height: 350px;
        min-height: 350px
    }

    body .hero-slider .hero-slide-copy, body .hero-slider .hero-slide-copy.is-active {
        top: 50%;
        left: 0;
        width: 100%;
        transform: translateY(-50%)
    }

    body .hero-slider .hero-slide-copy:before {
        font-size: 10px
    }

    body .hero-slider h1, body .hero-slider .hero-slide-copy h1 {
        font-size: clamp(2.65rem, 10vw, 4rem);
        text-shadow: none
    }

    body .hero-slider .hero-slide-copy p {
        color: #507a51;
        text-shadow: none
    }

    body .hero-slider .hero-visual, body .hero-slider .hero-frame {
        width: 100%;
        height: 340px;
        min-height: 340px;
        margin: 0
    }

    body .hero-slider .hero-tooth-orbit {
        width: min(90%, 300px)
    }

    body .hero-slider .hero-stat, body .hero-slider .hero-badge {
        display: none
    }

    body .hero-slider .hero-slider-controls {
        right: 10px;
        bottom: 10px
    }
}

@media (max-width: 420px) {
    body .hero-slider .hero-copy {
        height: 390px;
        min-height: 390px
    }

    body .hero-slider .hero-visual, body .hero-slider .hero-frame {
        height: 290px;
        min-height: 290px
    }
}

/* Educational teeth explorer; links are populated from the site's services. */
.teeth-explainer {
    background: #fff
}

.explainer-heading {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 55px
}

.explainer-heading p {
    max-width: 650px;
    margin: auto;
    color: #537f55;
    font-size: 17px;
    line-height: 1.7
}

.explainer-grid {
    display: grid;
    grid-template-columns:minmax(180px, 1fr) minmax(350px, 1.8fr) minmax(180px, 1fr);
    gap: clamp(15px, 2vw, 30px);
    align-items: center;
    max-width: 1300px;
    margin: auto
}

.explainer-column {
    display: grid;
    gap: 24px
}

.explainer-topic {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 15px;
    border: 1px solid #d7ecd8;
    border-radius: 17px;
    background: #f6fbf6;
    box-shadow: 0 10px 20px #29752c0b;
    transition: transform .3s, background .3s, box-shadow .3s;
    min-height: 102px
}

.explainer-topic:hover, .explainer-topic:focus-visible, .explainer-topic.is-highlighted {
    background: #e8f6e9;
    box-shadow: 0 16px 30px #2f883329;
    transform: translateY(-4px)
}

.explainer-number {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    background: #2f9e33;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 50%
}

.explainer-topic strong, .explainer-topic small {
    display: block
}

.explainer-topic strong {
    font-size: 15px;
    color: #204f22;
    line-height: 1.25
}

.explainer-topic small {
    font-size: 11px;
    color: #548056;
    line-height: 1.45;
    margin-top: 5px
}

.explainer-arrow {
    color: #2f9e33;
    align-self: flex-start;
    margin-left: auto
}

.explainer-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    isolation: isolate
}

.explainer-visual img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 590px;
    filter: drop-shadow(0 25px 26px #276c2935);
    animation: mouthFloat 5s ease-in-out infinite
}

.explainer-glow {
    position: absolute;
    z-index: -1;
    width: 80%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, #e1f3e1, #f1faf2 60%, transparent 73%)
}

.explainer-pulse {
    position: absolute;
    z-index: 3;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #2db033;
    border: 3px solid #fff;
    box-shadow: 0 0 0 5px #2db03335;
    animation: explainerPulse 2.5s ease-in-out infinite
}

.pulse-one {
    left: 34%;
    top: 36%
}

.pulse-two {
    left: 58%;
    top: 31%;
    animation-delay: .3s
}

.pulse-three {
    left: 40%;
    top: 62%;
    animation-delay: .7s
}

.pulse-four {
    left: 66%;
    top: 66%;
    animation-delay: 1s
}

.pulse-five {
    left: 19%;
    top: 53%;
    animation-delay: 1.3s
}

.pulse-six {
    left: 81%;
    top: 50%;
    animation-delay: 1.6s
}

.explainer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 45px
}

.explainer-bottom p {
    font-size: 12px;
    color: #619463;
    margin: 0
}

@keyframes mouthFloat {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-12px)
    }
}

@keyframes explainerPulse {
    50% {
        box-shadow: 0 0 0 13px #2db0330c;
        transform: scale(1.18)
    }
}

@media (max-width: 950px) {
    .explainer-grid {
        grid-template-columns:1fr 1fr
    }

    .explainer-visual {
        grid-column: 1/-1;
        grid-row: 1;
        max-width: 570px;
        margin: auto
    }

    .explainer-column {
        grid-row: 2
    }

    .explainer-topic {
        min-height: 94px
    }
}

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

    .explainer-column {
        grid-row: auto;
        gap: 12px
    }

    .explainer-visual {
        grid-row: 1;
        grid-column: 1;
        width: 100%
    }

    .explainer-topic {
        min-height: 76px
    }

    .explainer-bottom {
        align-items: flex-start;
        flex-direction: column
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-tooth-orbit:hover .hero-tooth-spinner, .explainer-pulse, .explainer-visual img {
        animation: none !important
    }
}

.explainer-pulse.is-highlighted {
    animation: none;
    transform: scale(1.55);
    background: #1f7e23;
    box-shadow: 0 0 0 12px #2eb63343, 0 0 30px #2eb633aa;
    transition: transform .25s, box-shadow .25s
}

/* Hero geometry correction: the legacy slide entrance used a transform that
   replaced centering and pushed the headline below the viewport. */
body .hero-slider, body .hero-slider .hero-grid {
    height: 690px;
    min-height: 690px
}

body .hero-slider .hero-grid {
    grid-template-columns:minmax(0, 1.08fr) minmax(420px, .92fr);
    gap: 34px
}

body .hero-slider .hero-copy {
    height: 690px;
    min-height: 690px;
    overflow: visible
}

body .hero-slider .hero-slide-copy, body .hero-slider .hero-slide-copy.is-active {
    position: absolute;
    top: 58px;
    left: 0;
    right: auto;
    bottom: auto;
    width: min(100%, 700px);
    height: auto;
    transform: none;
    animation: none
}

body .hero-slider .hero-slide-copy:not(.is-active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

body .hero-slider .hero-slide-copy h1 {
    font-size: clamp(3.15rem, 4.5vw, 5.4rem);
    line-height: 1.06;
    letter-spacing: -.07em;
    margin-bottom: 20px;
    text-wrap: balance
}

body .hero-slider .hero-slide-copy p {
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.55;
    max-width: 590px
}

body .hero-slider .hero-actions {
    margin-top: 25px
}

body .hero-slider .hero-stat, body .hero-slider .hero-badge {
    display: none
}

body .hero-slider > .hero-orbit {
    display: none !important
}

body .hero-slider .hero-visual, body .hero-slider .hero-frame {
    height: 690px;
    min-height: 690px
}

body .hero-slider .hero-tooth-orbit {
    top: 50%;
    left: 50%;
    translate: none;
    transform: translate(-50%, -50%);
    width: min(96%, 455px);
    animation: none;
    background: radial-gradient(circle at 36% 27%, #f5fbf5, #c4e8c5 39%, #55c15a 72%, #309734);
    box-shadow: inset -22px -34px 55px #1f6b2266, 0 26px 65px #32843532;
    overflow: visible
}

body .hero-slider .hero-tooth-orbit:before {
    inset: -12px;
    border: 5px solid #a7e3aaa8;
    transform: rotate(-22deg) scaleY(.78)
}

body .hero-slider .hero-tooth-orbit:after {
    content: '';
    position: absolute;
    inset: 16px;
    border: 1px solid #f4fbf49c;
    border-radius: 50%;
    pointer-events: none
}

body .hero-slider .hero-tooth-spinner {
    width: 91%;
    height: 91%
}

body .hero-slider .hero-tooth-spinner .hero-tooth-model {
    object-fit: contain
}

body .hero-slider .hero-tooth-orbit:focus-within .hero-tooth-spinner {
    animation: toothTurn 3.3s linear infinite
}

body .hero-slider .hero-slider-controls {
    right: clamp(12px, 3vw, 40px);
    bottom: 28px;
    background: #29792cd8
}

@media (max-width: 1000px) and (min-width: 701px) {
    body .hero-slider .hero-grid {
        grid-template-columns:minmax(0, 1.1fr) minmax(300px, .9fr);
        gap: 10px
    }

    body .hero-slider .hero-slide-copy h1 {
        font-size: clamp(2.65rem, 4.5vw, 4.2rem)
    }

    body .hero-slider .hero-tooth-orbit {
        width: min(98%, 370px)
    }
}

@media (max-width: 700px) {
    body .hero-slider, body .hero-slider .hero-grid {
        height: auto;
        min-height: 0
    }

    body .hero-slider .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 20px 28px
    }

    body .hero-slider .hero-copy {
        height: 390px;
        min-height: 390px
    }

    body .hero-slider .hero-slide-copy, body .hero-slider .hero-slide-copy.is-active {
        top: 32px;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        animation: none
    }

    body .hero-slider .hero-slide-copy h1 {
        font-size: clamp(2.6rem, 9.2vw, 3.7rem);
        line-height: 1.07
    }

    body .hero-slider .hero-slide-copy p {
        font-size: 14px;
        line-height: 1.5
    }

    body .hero-slider .hero-actions {
        margin-top: 15px
    }

    body .hero-slider .hero-visual, body .hero-slider .hero-frame {
        height: 300px;
        min-height: 300px
    }

    body .hero-slider .hero-tooth-orbit {
        width: min(88%, 280px)
    }

    body .hero-slider .hero-slider-controls {
        right: 0;
        bottom: 0
    }
}

@media (max-width: 420px) {
    body .hero-slider .hero-copy {
        height: 420px;
        min-height: 420px
    }

    body .hero-slider .hero-visual, body .hero-slider .hero-frame {
        height: 270px;
        min-height: 270px
    }
}

/* Actual WebGL tooth; the image stays in place if WebGL is unavailable. */
body .hero-slider .hero-tooth-orbit {
    isolation: isolate;
    overflow: visible;
    cursor: grab
}

body .hero-slider .hero-tooth-orbit:active {
    cursor: grabbing
}

.hero-tooth-canvas, .hero-tooth-fallback {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.hero-tooth-canvas {
    opacity: 0;
    transition: opacity .3s
}

.hero-tooth-fallback {
    padding: 8%;
    filter: drop-shadow(12px 19px 15px #25652766);
    transition: opacity .3s;
    animation: toothImageFloat 5s ease-in-out infinite
}

.hero-tooth-orbit.webgl-ready .hero-tooth-canvas {
    opacity: 1
}

.hero-tooth-orbit.webgl-ready .hero-tooth-fallback {
    opacity: 0
}

.tooth-callout {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fffffff0;
    box-shadow: 0 8px 23px #3290362f;
    color: #2c8030;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    pointer-events: none;
    animation: toothImageFloat 5s ease-in-out infinite
}

.tooth-callout span {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #37aa3b;
    color: white
}

.tooth-callout-left {
    top: 35%;
    left: -3%;
    animation-delay: -1s
}

.tooth-callout-right {
    bottom: 24%;
    right: -5%;
    animation-delay: -2.5s
}

@keyframes toothImageFloat {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-9px)
    }
}

@media (max-width: 950px) {
    .tooth-callout {
        font-size: 11px;
        padding: 7px 10px
    }

    .tooth-callout-left {
        left: -8%
    }

    .tooth-callout-right {
        right: -8%
    }
}

@media (max-width: 700px) {
    .tooth-callout {
        font-size: 10px;
        padding: 6px 9px
    }

    .tooth-callout span {
        width: 20px;
        height: 20px
    }

    .tooth-callout-left {
        left: 0;
        top: 24%
    }

    .tooth-callout-right {
        right: 0;
        bottom: 18%
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-tooth-fallback, .tooth-callout {
        animation: none !important
    }
}

/* The mouth and its markers move together, so highlights stay aligned. */
.explainer-visual {
    animation: mouthFloat 5s ease-in-out infinite
}

.explainer-visual img {
    animation: none !important
}

.explainer-pulse {
    padding: 0;
    cursor: pointer;
    display: block;
    transition: transform .25s, box-shadow .25s;
    white-space: nowrap
}

.explainer-pulse:focus-visible {
    outline: 3px solid #27992c;
    outline-offset: 5px
}

.explainer-point-name {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translate(-50%, 7px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    color: #267029;
    box-shadow: 0 10px 25px #1c621f2e;
    border: 1px solid #c3e8c5;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    transition: opacity .22s, transform .22s, visibility .22s;
    white-space: nowrap
}

.explainer-pulse.is-highlighted .explainer-point-name, .explainer-pulse:hover .explainer-point-name, .explainer-pulse:focus-visible .explainer-point-name {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0)
}

.pulse-five .explainer-point-name {
    left: 0;
    transform: translate(-10%, 7px)
}

.pulse-five.is-highlighted .explainer-point-name, .pulse-five:hover .explainer-point-name, .pulse-five:focus-visible .explainer-point-name {
    transform: translate(-10%, 0)
}

.pulse-six .explainer-point-name {
    left: auto;
    right: 0;
    transform: translate(10%, 7px)
}

.pulse-six.is-highlighted .explainer-point-name, .pulse-six:hover .explainer-point-name, .pulse-six:focus-visible .explainer-point-name {
    transform: translate(10%, 0)
}

.mobile-menu-logo, .mobile-menu-backdrop {
    display: none
}

@media (max-width: 700px) {
    body .site-header-stack .navlinks {
        position: fixed;
        inset: 0 0 auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: auto;
        max-height: min(92 dvh, 750px);
        overflow-y: auto;
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        padding: 15px 18px 25px;
        border: 0;
        border-radius: 0 0 26px 26px;
        background: #f7faf7;
        box-shadow: 0 22px 55px #1e371f40;
        z-index: 2400;
        transform: translateY(-110%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .42s cubic-bezier(.2, .85, .2, 1), opacity .3s ease, visibility .42s
    }

    body .site-header-stack .navlinks.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

    body .site-header-stack .navlinks > a.mobile-menu-logo {
        order: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: max-content;
        max-width: calc(100% - 55px);
        min-height: 54px;
        margin: 0 0 13px;
        padding: 7px 11px;
        border-radius: 12px;
        background: #183d2b;
        box-shadow: none;
        transform: none;
        text-decoration: none
    }

    .mobile-menu-logo img {
        display: block;
        max-height: 42px;
        width: auto;
        max-width: 185px;
        object-fit: contain
    }

    body .site-header-stack .navlinks > a:not(.btn):not(.mobile-menu-logo) {
        order: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 57px;
        padding: 11px 16px;
        margin: 0;
        border-radius: 12px;
        background: #fff;
        color: #224b24;
        font-size: 16px;
        font-weight: 750;
        box-shadow: 0 1px 5px #2a542c09;
        transform: none;
        text-decoration: none;
        transition: background .22s, transform .22s
    }

    body .site-header-stack .navlinks > a:not(.btn):not(.mobile-menu-logo):hover, body .site-header-stack .navlinks > a:not(.btn):not(.mobile-menu-logo).is-active {
        background: #e7f3e8;
        color: #1a5b1d;
        transform: translateY(-1px);
        text-decoration: none
    }

    body .site-header-stack .navlinks .mobile-menu-actions {
        order: 2;
        display: grid;
        gap: 8px;
        padding: 15px 0 0;
        margin: 0;
        border: 0
    }

    body .site-header-stack .navlinks .mobile-menu-actions a {
        min-height: 48px
    }

    body .site-header-stack .navlinks .mobile-menu-book {
        background: #258729;
        color: #fff;
        box-shadow: 0 5px 16px #2587294d
    }

    body .site-header-stack .navlinks .mobile-menu-phone {
        background: #ebf2eb;
        color: #1d5b20
    }

    body .site-header-stack .navlinks .nav-cta {
        display: none
    }

    body .site-header-stack .menu-button[aria-expanded="true"] {
        position: fixed;
        z-index: 2500;
        top: 19px;
        right: 18px;
        width: 40px;
        height: 40px;
        padding: 7px
    }

    body .site-header-stack .menu-button[aria-expanded="true"] span {
        background: #255727
    }

    body.mobile-menu-open .mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: #10271177;
        backdrop-filter: blur(3px)
    }

    .explainer-point-name {
        font-size: 10px;
        padding: 6px 8px;
        max-width: 150px;
        white-space: normal;
        min-width: 88px;
        text-align: center
    }
}

@media (prefers-reduced-motion: reduce) {
    .explainer-visual {
        animation: none !important
    }

    .site-header-stack .navlinks {
        transition: none !important
    }
}

/* The old backdrop could cover the menu on mobile browsers. Keep the panel
   fully opaque and place it above the page with directly clickable links. */
@media (max-width: 700px) {
    .mobile-menu-backdrop, body.mobile-menu-open .mobile-menu-backdrop {
        display: none !important;
        pointer-events: none !important
    }

    body .site-header-stack {
        z-index: 3000 !important
    }

    body .site-header-stack .navlinks, body .site-header-stack .navlinks.open {
        z-index: 3200;
        background: #f7faf7;
        backdrop-filter: none;
        opacity: 1;
        pointer-events: auto
    }

    body .site-header-stack .navlinks:not(.open) {
        pointer-events: none
    }

    body .site-header-stack .navlinks.open > a, body .site-header-stack .navlinks.open .mobile-menu-actions a {
        position: relative;
        z-index: 1;
        pointer-events: auto !important
    }

    body .site-header-stack .menu-button[aria-expanded="true"] {
        z-index: 3300
    }
}

/* Keep the detailed enamel tooth visible; the previous WebGL canvas hid it. */
body .hero-slider .hero-tooth-orbit {
    perspective: 900px
}

body .hero-slider .hero-tooth-fallback {
    display: block;
    opacity: 1;
    width: 86%;
    height: 88%;
    inset: 6% 7%;
    padding: 0;
    object-fit: contain;
    animation: toothEnamelFloat 5s ease-in-out infinite;
    transform: rotateX(var(--tooth-tilt-x, 0deg)) rotateY(var(--tooth-tilt-y, 0deg));
    transform-style: preserve-3d;
    backface-visibility: visible;
    filter: drop-shadow(12px 22px 17px #25652766);
}

@keyframes toothEnamelFloat {
    0%, 100% {
        transform: translateY(0) rotateX(var(--tooth-tilt-x, 0deg)) rotateY(var(--tooth-tilt-y, 0deg))
    }
    50% {
        transform: translateY(-9px) rotateX(var(--tooth-tilt-x, 0deg)) rotateY(var(--tooth-tilt-y, 0deg))
    }
}

@media (prefers-reduced-motion: reduce) {
    body .hero-slider .hero-tooth-fallback {
        animation: none;
        transform: none
    }
}

/* Admin-managed smile statistics, styled with the clinic's current palette. */
.smile-stats {
    background: #fff;
    padding: 92px 0 105px;
    overflow: hidden
}

.smile-stats-intro {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 45px
}

.smile-stats-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #eaf4ea;
    color: var(--clinic-primary, #86ae44);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700
}

.smile-stats h2 {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1.12;
    letter-spacing: -.06em;
    color: #1a341b;
    margin: 18px 0 14px
}

.smile-stats h2 em {
    font-style: normal;
    color: var(--clinic-primary, #86ae44)
}

.smile-stats-intro p {
    font-size: clamp(14px, 1.4vw, 18px);
    color: #5a8b5c;
    line-height: 1.6;
    margin: 0
}

.smile-stats-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    flex-wrap: wrap;
    max-width: 1150px;
    margin: auto
}

.smile-stats-grid > * {
    flex: 1 1 160px;
    max-width: 220px;
    min-height: 126px;
    border-radius: 18px
}

.smile-stat-number {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 12px 4px
}

.smile-stat-number span {
    font-size: 14px;
    color: #39583a
}

.smile-stat-number strong {
    font-family: Manrope, sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 3vw, 2.7rem);
    line-height: 1;
    color: var(--clinic-primary, #86ae44);
    font-variant-numeric: tabular-nums
}

.smile-stat-photo {
    position: relative;
    display: grid;
    place-items: center;
    background-image: linear-gradient(135deg, #258a29d9, #247f28c2), var(--stat-photo);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
    overflow: hidden;
    padding: 16px
}

.smile-stat-photo:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 25%, #ffffff3d 50%, transparent 75%);
    transform: translateX(-140%);
    animation: smileStatsGlint 6s ease-in-out infinite
}

.smile-stat-photo strong {
    position: relative;
    z-index: 1;
    max-width: 145px;
    font-size: 16px;
    line-height: 1.3
}

.smile-stat-photo:nth-child(even) {
    background-image: linear-gradient(135deg, #258a29c9, var(--clinic-primary, #86ae44)), var(--stat-photo)
}

@keyframes smileStatsGlint {
    0%, 25% {
        transform: translateX(-140%)
    }
    55%, 100% {
        transform: translateX(140%)
    }
}

@media (max-width: 700px) {
    .smile-stats {
        padding: 66px 0
    }

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

    .smile-stats-grid > * {
        max-width: none;
        min-height: 120px
    }

    .smile-stats-grid > *:last-child:nth-child(odd) {
        grid-column: 1/-1
    }

    .smile-stat-number {
        padding: 14px
    }
}

@media (prefers-reduced-motion: reduce) {
    .smile-stat-photo:after {
        animation: none
    }
}