/* Ensure text is always visible during webfont load */
        :root {
            font-synthesis: none;
        }

        html {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

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

        :root {
            --navy: #0f1c2e;
            --navy2: #162032;
            --teal: #256d0c;
            --teal-lt: #e8f5e0;
            --sage: #2d8010;
            --sage-lt: #f0f9e8;
            --off-white: #f5f7f3;
            --white: #ffffff;
            --gray1: #f5f5f5;
            --gray2: #e8e8e8;
            --gray3: #b0b9c4;
            --gray4: #6b7685;
            --text: #1c1b1b;
            --text-muted: #4a5568;
            --border: #d8e0d0;
            --shadow: 0 2px 16px rgba(15, 28, 46, .07);
            --shadow-md: 0 6px 32px rgba(15, 28, 46, .10);
            --r: .75rem;
            --nh: 72px;
        }

        html {
            /* scroll-behavior: smooth intentionally removed
               to allow the scroll-expand hero proxy to work */
            font-size: 16px;
        }

        body {
            font-family: 'Manrope', system-ui, sans-serif;
            background: #0a1422;
            color: var(--text);
            overflow-x: hidden;
            overflow-x: clip;
            line-height: 1.6;
        }

        body.lock-scroll {
            overflow: hidden !important;
        }

        ::selection {
            background: rgba(37, 109, 12, .15);
            color: var(--navy);
        }

        img {
            display: block;
            max-width: 100%;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        /* ── SCROLL BAR ── */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #4ade80 0%, #256d0c 40%, #16a34a 75%, #86efac 100%);
            border-radius: 99px;
            box-shadow: 0 0 8px rgba(37, 109, 12, 0.7), 0 0 2px rgba(134, 239, 172, 0.4);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #86efac 0%, #22c55e 35%, #256d0c 70%, #4ade80 100%);
            box-shadow: 0 0 14px rgba(37, 109, 12, 0.9), 0 0 4px rgba(134, 239, 172, 0.6);
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        /* ── PROGRESS BAR ── */
        #pgbar {
            box-shadow: 0 0 12px var(--teal);
            position: fixed;
            top: 0;
            left: 0;
            height: 2px;
            background: var(--teal);
            z-index: 2000;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform .1s linear;
        }

        /* ── BACK TO TOP ── */
        #btt {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--white);
            border: 1.5px solid var(--border);
            color: var(--navy);
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 0;
            opacity: 0;
            pointer-events: none;
            transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow:
                0 4px 20px rgba(15, 28, 46, 0.1),
                0 1px 4px rgba(15, 28, 46, 0.06);
            z-index: 9100;
            overflow: hidden;
        }

        /* teal fill on hover via pseudo */
        #btt::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: var(--teal);
            transform: scale(0);
            transition: transform .4s cubic-bezier(0.34, 1.26, 0.64, 1);
        }

        #btt:hover::before {
            transform: scale(1);
        }

        /* SVG progress ring — drawn by JS */
        #btt::after {
            content: none;
        }

        #btt-ring {
            position: absolute;
            inset: -4px;
            width: calc(100% + 8px);
            height: calc(100% + 8px);
            pointer-events: none;
            transform: rotate(-90deg);
        }

        #btt-ring .ring-track {
            fill: none;
            stroke: rgba(37, 109, 12, 0.15);
            stroke-width: 2.5;
        }

        #btt-ring .ring-fill {
            fill: none;
            stroke: var(--teal);
            stroke-width: 2.5;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.12s linear;
        }

        #btt .btt-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            transition: transform .3s cubic-bezier(0.34, 1.26, 0.64, 1);
        }

        #btt .btt-arrow svg path {
            transition: stroke .3s;
        }

        #btt:hover .btt-arrow {
            transform: translateY(-2px);
        }

        #btt:hover .btt-arrow svg path {
            stroke: #fff;
        }

        #btt .btt-label {
            display: none;
        }

        @keyframes bttBounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-3px);
            }
        }

        #btt.vis {
            opacity: 1;
            pointer-events: all;
        }

        #btt:hover {
            border-color: var(--teal);
            box-shadow:
                0 8px 28px rgba(37, 109, 12, 0.3),
                0 2px 8px rgba(37, 109, 12, 0.15);
            transform: translateY(-3px);
        }

        /* ── NAVBAR ── */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            height: var(--nh);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 5vw;
            transition: background .3s, box-shadow .3s;
            animation: slideDownFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        nav.sc {
            background: rgba(255, 255, 255, .96);
            backdrop-filter: blur(12px);
            box-shadow: 0 1px 0 var(--border);
        }

        nav.m-open {
            background: rgba(255, 255, 255, 0.98) !important;
            box-shadow: 0 1px 0 var(--border) !important;
            backdrop-filter: blur(12px) !important;
        }

        .n-logo {
            display: flex;
            align-items: center;
            gap: .7rem;
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--white);
            letter-spacing: -.01em;
            transition: color .3s;
        }

        .nav-logo {
            height: 72px;
            width: auto;
            object-fit: contain;
            transition: transform 0.3s ease;
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
        }

        .nav-logo:hover {
            transform: scale(1.04);
        }

        /* Responsive */
        @media(max-width:768px) {
            .nav-logo {
                height: 56px;
            }
        }

        nav.sc .n-logo,
        nav.m-open .n-logo {
            color: var(--navy) !important;
        }


        .n-links {
            display: flex;
            align-items: center;
            gap: 2rem;
            list-style: none;
        }

        .n-links a {
            color: rgba(255, 255, 255, 0.85);
            font-size: 1.05rem;
            font-weight: 500;
            transition: color .2s;
            position: relative;
            padding-bottom: 2px;
        }

        nav.sc .n-links a {
            color: var(--text-muted);
        }

        .n-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1.5px;
            background: var(--teal);
            transition: width .25s;
        }

        .n-links a:hover {
            color: var(--white);
        }

        nav.sc .n-links a:hover {
            color: var(--navy);
        }

        .n-links a:hover::after,
        .n-links a.act::after {
            width: 100%;
        }

        .n-links a.act {
            color: var(--white);
            font-weight: 600;
        }

        nav.sc .n-links a.act {
            color: var(--navy);
            font-weight: 600;
        }

        .n-r {
            display: flex;
            align-items: center;
            gap: .75rem;
        }

        .btn-nav {
            background: var(--teal);
            color: #fff;
            padding: 1rem 2.6rem;
            border-radius: .7rem;
            font-size: 1.1rem;
            font-weight: 700;
            transition: background .2s, transform .2s, box-shadow .2s;
            border: none;
            cursor: pointer;
            font-family: inherit;
            display: inline-block;
            letter-spacing: .02em;
            box-shadow: 0 4px 18px rgba(37, 109, 12, .35);
        }

        nav.sc .btn-nav {
            background: var(--navy);
        }

        .btn-nav:hover {
            background: var(--teal);
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(37, 109, 12, .5);
        }

        /* ── HAMBURGER ── */
        .hbg {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 4px;
            background: none;
            border: none;
        }

        .hbg s {
            width: 22px;
            height: 1.5px;
            background: var(--white);
            border-radius: 2px;
            transition: all .3s;
            display: block;
        }

        nav.sc .hbg s,
        nav.m-open .hbg s {
            background: var(--navy) !important;
        }

        .hbg.op s:nth-child(1) {
            transform: rotate(45deg) translate(4.5px, 4.5px);
        }

        .hbg.op s:nth-child(2) {
            opacity: 0;
        }

        .hbg.op s:nth-child(3) {
            transform: rotate(-45deg) translate(4.5px, -4.5px);
        }

        .m-nav {
            display: flex;
            position: fixed;
            top: var(--nh);
            inset-inline: 0;
            background: var(--white);
            border-bottom: 1px solid var(--border);
            padding: 1.5rem 5vw 2rem;
            flex-direction: column;
            gap: 1.25rem;
            z-index: 999;
            box-shadow: var(--shadow-md);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
            pointer-events: none;
        }

        .m-nav.op {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .m-nav a {
            color: var(--text-muted);
            font-size: 1rem;
            transition: color .2s;
        }

        .m-nav a:hover {
            color: var(--teal);
        }

        .m-nav .btn-nav {
            width: 100%;
            text-align: center;
            margin-top: .5rem;
        }

        /* ── SECTION BASE ── */
        .wrap {
            padding: 3.5rem 5vw;
        }

        .wrap-sm {
            padding: 2.5rem 5vw;
        }

        .s-lbl {
            font-size: .72rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--teal);
            font-weight: 600;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: .6rem;
        }

        .s-lbl::before {
            content: '';
            width: 18px;
            height: 1.5px;
            background: var(--teal);
            flex-shrink: 0;
        }

        .s-ttl {
            font-family: 'Manrope', Georgia, serif;
            font-size: clamp(1.5rem, 2.8vw, 2.4rem);
            font-weight: 400;
            line-height: 1.12;
            color: var(--navy);
            letter-spacing: -.01em;
        }

        .s-ttl em {
            font-style: italic;
            color: var(--teal);
        }

        /* ── ANIMATIONS ── */
        @keyframes slideUpFade {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideDownFade {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ── FADE IN ── */
        .fade-in {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .7s ease, transform .7s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: none;
        }

        .fade-in[data-delay="1"] {
            transition-delay: .1s;
        }

        .fade-in[data-delay="2"] {
            transition-delay: .2s;
        }

        .fade-in[data-delay="3"] {
            transition-delay: .3s;
        }

        .fade-in[data-delay="4"] {
            transition-delay: .4s;
        }

        .fade-in[data-delay="5"] {
            transition-delay: .5s;
        }

        .fade-in[data-delay="6"] {
            transition-delay: .6s;
        }

        /* ════════════════════════════════════════
           SCROLL-EXPAND HERO  (v3 — fixed)
        ════════════════════════════════════════ */

        /* Fixed stage covers the whole screen while hero is active */
        #hexStage {
            position: fixed;
            inset: 0;
            z-index: 900;
            pointer-events: none;
        }

        /* Full-bleed background photo with dark overlay */
        .hex-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }

        .hex-bg-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            /* slow Ken-Burns zoom */
            animation: hexBgZoom 18s ease-in-out infinite alternate;
        }

        @keyframes hexBgZoom {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(1.07);
            }
        }

        /* dark gradient overlay so text + card pop */
        .hex-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(160deg,
                    rgba(10, 20, 35, 0.72) 0%,
                    rgba(15, 28, 46, 0.55) 50%,
                    rgba(10, 20, 35, 0.65) 100%);
            pointer-events: none;
        }

        /* ── Expanding card: Pexels dental video ── */
        .hex-card {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow:
                0 0 100px rgba(37, 109, 12, 0.30),
                0 0 40px rgba(37, 109, 12, 0.12),
                0 12px 60px rgba(0, 0, 0, 0.55);
        }

        .hex-card video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* teal glow ring */
        .hex-card::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            border: 1px solid rgba(37, 109, 12, 0.45);
            pointer-events: none;
            z-index: 3;
        }

        /* ── Crossfade overlay (JS appends this div to #hexStage) ── */
        #hexFadeOverlay {
            position: absolute;
            inset: 0;
            /* Must exactly match .hex-reveal background so the crossfade is seamless */
            background: linear-gradient(160deg, #0f1c2e 0%, #162032 55%, #1a3348 100%);
            opacity: 0;
            z-index: 6;
            pointer-events: none;
            will-change: opacity;
        }

        /* ── Title lines ── */
        .hex-titles {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            pointer-events: none;
            z-index: 2;
        }

        .hex-t {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: clamp(2rem, 4.8vw, 4.2rem);
            font-weight: 800;
            color: #ffffff;
            letter-spacing: -.02em;
            line-height: 1.05;
            font-style: normal;
        }

        /* ── Scroll hint label ── */
        .hex-hint {
            position: absolute;
            bottom: 2.5rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .4rem;
            z-index: 2;
            pointer-events: none;
        }

        .hex-hint-text {
            font-size: .78rem;
            font-weight: 500;
            color: #256d0c;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .hex-hint-arrow {
            width: 20px;
            height: 20px;
            border-right: 2px solid #256d0c;
            border-bottom: 2px solid #256d0c;
            transform: rotate(45deg);
            animation: hintDrop 1.6s ease-in-out infinite;
            opacity: .8;
        }

        @keyframes hintDrop {

            0%,
            100% {
                transform: rotate(45deg) translateY(0);
                opacity: .8;
            }

            50% {
                transform: rotate(45deg) translateY(5px);
                opacity: 1;
            }
        }

        /* ── Scroll proxy (gives body real scroll height) ── */
        .hex-proxy {
            /* height set by JS based on viewport */
            position: relative;
            background: transparent;
        }

        /* ══════════════════════════════════════════════════════════════
           CINEMATIC IMAGE LAYER — lives behind the entire heroExpand
           sequence. Fixed to viewport, driven by the same rAF engine.
        ══════════════════════════════════════════════════════════════ */
        #heroCineBg {
            position: fixed;
            inset: 0;
            z-index: 1;
            overflow: hidden;
            pointer-events: none;
            will-change: transform;
        }

        #heroCineBgImg {
            position: absolute;
            inset: -5%;
            width: 110%;
            height: 110%;
            object-fit: cover;
            object-position: center;
            transform-origin: center center;
            will-change: transform;
            transform: scale(1);
            animation: heroBgBreath 12s ease-in-out infinite alternate;
        }

        @keyframes heroBgBreath {
            0% {
                transform: scale(1) translateY(0px);
            }

            100% {
                transform: scale(1.04) translateY(-10px);
            }
        }

        /* blur overlay on top of the image */
        #heroCineBlur {
            position: absolute;
            inset: 0;
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
            will-change: backdrop-filter;
            z-index: 1;
            pointer-events: none;
        }

        /* dark gradient overlay */
        #heroCineDark {
            position: absolute;
            inset: 0;
            background: linear-gradient(160deg,
                    rgba(10, 20, 35, 1) 0%,
                    rgba(15, 28, 46, 0.92) 50%,
                    rgba(10, 20, 35, 0.96) 100%);
            opacity: 0;
            will-change: opacity;
            z-index: 2;
            pointer-events: none;
        }

        /* Grain texture overlay for film-like feel */
        #heroCineBg::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
            background-size: 200px 200px;
            opacity: 0.35;
            mix-blend-mode: overlay;
        }

        /* teal radial glow accent */
        #heroCineBg::after {
            content: '';
            position: absolute;
            right: -5%;
            bottom: -5%;
            width: 55%;
            height: 65%;
            background: radial-gradient(ellipse 60% 60% at 70% 70%, rgba(37, 109, 12, .18), transparent 70%);
            pointer-events: none;
            z-index: 3;
        }

        /* ══ REVEAL SECTION ══
           position:sticky makes it pin to the top of the viewport while
           hexProxy scrolls past — it is always rendered in place, fading in
           underneath the fixed hexStage. When the proxy ends the sticky
           releases and normal page flow continues with no gap or jump. */
        .hex-reveal {
            position: sticky;
            top: 0;
            /* transparent bg — cinematic image shows through until overlay kicks in */
            background: transparent;
            padding: 0 5vw;
            padding-top: var(--nh);
            height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
            /* Start invisible; JS crossfades it in sync with the overlay */
            opacity: 0;
            pointer-events: none;
            /* Pre-composite on GPU so there's zero repaint cost at handoff */
            will-change: opacity;
            transform: translateZ(0);
            /* No transition here — JS drives opacity directly for frame-perfect sync */
        }

        /* Once shown: navy bg covers the image; children animate in */
        .hex-reveal.show {
            background: linear-gradient(160deg, var(--navy) 0%, var(--navy2) 55%, #1a3348 100%);
            opacity: 1;
            pointer-events: all;
            transition: none;
        }

        /* Stagger children in for a cinematic feel — only plays once on show */
        .hex-reveal.show .orig-hero-badge {
            animation: cinUp 0.7s 0.05s cubic-bezier(.22, 1, .36, 1) both;
        }

        .hex-reveal.show .orig-hero-h1 {
            animation: cinUp 0.8s 0.18s cubic-bezier(.22, 1, .36, 1) both;
        }

        .hex-reveal.show .orig-hero-sub {
            animation: cinUp 0.7s 0.30s cubic-bezier(.22, 1, .36, 1) both;
        }

        .hex-reveal.show .orig-hero-acts {
            animation: cinUp 0.7s 0.40s cubic-bezier(.22, 1, .36, 1) both;
        }

        .hex-reveal.show .orig-hero-stats {
            animation: cinUp 0.7s 0.52s cubic-bezier(.22, 1, .36, 1) both;
        }

        .hex-reveal.show .original-hero-visual {
            animation: cinUp 0.9s 0.22s cubic-bezier(.22, 1, .36, 1) both;
        }

        @keyframes cinUp {
            from {
                opacity: 0;
                transform: translateY(28px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* dot pattern same as original hero */
        .hex-reveal::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: .04;
            background-image: radial-gradient(circle, rgba(255, 255, 255, .8) 1px, transparent 1px);
            background-size: 36px 36px;
            pointer-events: none;
        }

        /* teal radial accent same as original */
        .hex-reveal::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 50%;
            height: 100%;
            background: radial-gradient(ellipse 70% 80% at 85% 60%, rgba(37, 109, 12, .18), transparent 65%);
            pointer-events: none;
        }

        /* two-column inner grid */
        .original-hero-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 3rem;
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding: 2rem 0;
            position: relative;
            z-index: 1;
        }

        @media (max-width: 900px) {
            .original-hero-inner {
                grid-template-columns: 1fr;
            }

            .original-hero-visual {
                display: none;
            }
        }

        /* LEFT column */
        .original-hero-content {
            position: relative;
            z-index: 2;
        }

        .orig-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(37, 109, 12, .18);
            border: 1px solid rgba(37, 109, 12, .35);
            color: #256d0c;
            padding: .4rem 1rem;
            border-radius: 3rem;
            font-size: .75rem;
            font-weight: 500;
            letter-spacing: .06em;
            text-transform: uppercase;
            margin-bottom: .9rem;
        }

        .orig-hero-badge-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #256d0c;
            flex-shrink: 0;
        }

        .orig-hero-h1 {
            font-family: 'Manrope', Georgia, serif;
            font-size: clamp(2rem, 4vw, 3.4rem);
            font-weight: 400;
            line-height: 1.05;
            color: var(--white);
            letter-spacing: -.02em;
            margin-bottom: .85rem;
        }

        .orig-hero-sub {
            color: rgba(255, 255, 255, 1);
            font-size: 1.05rem;
            line-height: 1.8;
            max-width: 480px;
            margin-bottom: 1.2rem;
        }

        .orig-hero-acts {
            display: flex;
            gap: .9rem;
            flex-wrap: wrap;
            margin-bottom: 1.5rem;
        }

        .orig-hero-stats {
            display: flex;
            gap: 2.5rem;
            flex-wrap: wrap;
            padding-top: 1.2rem;
            border-top: 1px solid rgba(255, 255, 255, .1);
        }

        /* RIGHT column */
        .original-hero-visual {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        /* stat numbers / labels reused from original */
        .h-stat-n {
            display: block;
            font-size: 2rem;
            font-weight: 600;
            color: #fff;
            line-height: 1;
        }

        .h-stat-l {
            font-size: .72rem;
            color: rgba(255, 255, 255, .45);
            text-transform: uppercase;
            letter-spacing: .1em;
            margin-top: .3rem;
        }

        /* hero card + pills + info row from original */
        .hero-img-card {
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 1.25rem;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .hero-clinic-name {
            font-family: 'Manrope', serif;
            font-size: 1.6rem;
            color: #fff;
            font-weight: 400;
            line-height: 1.2;
        }

        .hero-clinic-sub {
            color: rgba(255, 255, 255, .5);
            font-size: .85rem;
        }

        .hero-pills {
            display: flex;
            gap: .6rem;
            flex-wrap: wrap;
        }

        .h-pill {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            color: rgba(255, 255, 255, .75);
            padding: .35rem .85rem;
            border-radius: 3rem;
            font-size: .78rem;
        }

        .hero-info-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .75rem;
        }

        .hero-info-item {
            background: rgba(37, 109, 12, .15);
            border: 1px solid rgba(37, 109, 12, .25);
            border-radius: .75rem;
            padding: 1rem 1.1rem;
        }

        .hii-label {
            font-size: .68rem;
            color: rgba(255, 255, 255, .4);
            text-transform: uppercase;
            letter-spacing: .12em;
            margin-bottom: .3rem;
        }

        .hii-val {
            font-size: 1.1rem;
            font-weight: 600;
            color: #fff;
        }

        /* float animation for right panel */
        .float-anim {
            animation: floating 4s ease-in-out infinite;
        }

        @keyframes floating {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-12px);
            }
        }

        /* shared buttons (must work on dark bg) */
        /* shared buttons */
        .btn-primary {
            background: var(--teal);
            color: #fff;
            padding: .85rem 2rem;
            border-radius: .6rem;
            font-size: .9rem;
            font-weight: 500;
            transition: background .2s, transform .2s, box-shadow .2s;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            border: none;
            cursor: pointer;
            font-family: inherit;
            text-decoration: none;
        }

        .btn-primary:hover {
            background: #239090;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(37, 109, 12, .40);
        }

        .btn-secondary {
            background: transparent;
            color: rgba(255, 255, 255, 0.82);
            padding: .85rem 2rem;
            border-radius: .6rem;
            border: 1.5px solid rgba(255, 255, 255, 0.22);
            font-size: .9rem;
            font-weight: 500;
            transition: all .2s;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            text-decoration: none;
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: #256d0c;
            color: #256d0c;
        }

        /* ── Sections that slide OVER the fixed hero image ──
           heroExpand sits at default z-index; the fixed #heroCineBg is z:1.
           All content sections need z:2+ and solid backgrounds to cleanly
           cover the fixed image as they scroll into view. */
        #heroExpand {
            position: relative;
            z-index: 2;
        }

        section.premium-about,
        #trust,
        #services,
        #stats,
        #treatments,
        #doctors,
        #testimonials,
        #appointment,
        #ctabanner,
        #dental-tech,
        #patient-journey,
        #why-us,
        #dental-timeline,
        .faq-section,
        footer {
            position: relative;
            z-index: 2;
        }

        /* Ensure premium-about has a fully opaque background */
        section.premium-about {
            background: linear-gradient(135deg, #f8fbfd 0%, #eef5f7 100%) !important;
        }

        /* ── TRUST STRIP ── */
        #trust {
            background: var(--off-white);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }

        .trust-inner {
            padding: 2rem 5vw;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3rem;
            flex-wrap: wrap;
        }

        .trust-item {
            display: flex;
            align-items: center;
            gap: .7rem;
            color: var(--text-muted);
            font-size: .85rem;
            opacity: 0;
            transform: perspective(600px) rotateX(25deg) translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .trust-item.fu-visible {
            opacity: 1;
            transform: perspective(600px) rotateX(0) translateY(0);
        }

        .trust-item:nth-child(1) {
            transition-delay: 0s;
        }

        .trust-item:nth-child(2) {
            transition-delay: 0.08s;
        }

        .trust-item:nth-child(3) {
            transition-delay: 0.16s;
        }

        .trust-item:nth-child(4) {
            transition-delay: 0.24s;
        }

        .trust-item:nth-child(5) {
            transition-delay: 0.32s;
        }

        .trust-icon {
            width: 36px;
            height: 36px;
            border-radius: .5rem;
            background: var(--teal-lt);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .trust-div {
            width: 1px;
            height: 28px;
            background: var(--border);
        }

        /* ── SERVICES ── */
        /* ───────── PREMIUM SERVICES SECTION ───────── */

        #services {
            position: relative;
            background: transparent;
        }

        /* Fixed-window effect: image stays pinned, section scrolls over it */
        .svc-parallax-bg {
            display: none;
        }

        #services::before {
            display: none;
        }

        /* doctor image removed — using fixed bg */

        #services .s-ttl,
        #services .sv-name {
            color: #ffffff;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
        }

        #services .sv-desc,
        #services .sv-hd-sub {
            color: rgba(255, 255, 255, 0.90);
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
        }

        #services .s-lbl {
            color: #6fcf4a;
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
        }

        #services .s-lbl::before {
            background: #6fcf4a;
        }

        /* sv-card base styles defined in premium cards block below */


        @keyframes serviceBg {
            0% {
                transform: scale(1);
                background-position: center;
            }

            50% {
                transform: scale(1.08);
                background-position: top;
            }

            100% {
                transform: scale(1);
                background-position: bottom;
            }
        }

        /* blob removed */

        /* keep content above bg */

        #services .wrap {
            position: relative;
            z-index: 2;
        }

        /* heading */

        .sv-hd {
            margin-bottom: 2rem;
        }

        .sv-hd .s-ttl {
            font-size: clamp(2.6rem, 5vw, 4rem);
            font-weight: 800;
            letter-spacing: -.025em;
            line-height: 1.08;
        }

        .sv-hd-sub {
            font-size: 1.6rem;
            line-height: 1.75;
            color: #f0ede8;
            max-width: 580px;
        }

        /* services grid */

        .sv-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.8rem;
        }

        /* ───────── PREMIUM SERVICE CARDS ───────── */

        .sv-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            position: relative;
            z-index: 5;
        }

        /* card */

        .sv-card {
            position: relative;
            /* overflow:visible so border-radius renders cleanly and no pseudo-element is clipped */
            overflow: visible;

            padding: 2.3rem;
            min-height: 240px;

            border-radius: 2rem;

            background: rgba(4, 12, 24, 0.70);

            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);

            /* border via outline so it sits outside the box and never fights pseudo-elements */
            border: none;
            outline: 1px solid rgba(37, 109, 12, 0.22);
            outline-offset: 0px;

            /* top teal accent delivered entirely via inset box-shadow — always follows border-radius */
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.4),
                inset 0 3px 0 rgba(37, 109, 12, 0.55),
                inset 0 1px 0 rgba(37, 109, 12, 0.15);

            transition:
                transform .45s ease,
                box-shadow .45s ease,
                outline-color .45s ease,
                background .4s ease;

            display: flex;
            flex-direction: column;
        }

        /* ::before is now owned by .glow-border (JS) — do not override it */
        /* ::after is the shine sweep from the animation engine — keep it */

        /* hover */

        .sv-card:hover {
            transform: scale(1.02);
            background: rgba(2, 8, 18, 0.88);
            outline-color: rgba(37, 109, 12, 0.45);
            box-shadow:
                0 24px 60px rgba(0, 0, 0, 0.55),
                inset 0 3px 0 rgba(37, 109, 12, 0.75),
                inset 0 1px 0 rgba(37, 109, 12, 0.2);
        }

        /* number */

        .sv-num {
            font-size: .75rem;
            letter-spacing: .25em;
            color: #256d0c;

            margin-bottom: 1.5rem;

            font-weight: 600;
        }

        /* icon */

        .sv-ico {
            width: 78px;
            height: 78px;

            border-radius: 1.5rem;

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

            font-size: 2rem;

            margin-bottom: 1.5rem;

            background:
                linear-gradient(145deg,
                    rgba(37, 109, 12, 0.22),
                    rgba(37, 109, 12, 0.08));

            border: 1px solid rgba(37, 109, 12, 0.18);

            box-shadow:
                0 8px 24px rgba(0, 0, 0, 0.2);

            transition: .4s ease;
        }

        /* icon hover — intentionally static */

        /* title */

        .sv-name {
            font-size: 1.35rem;
            font-weight: 700;

            color: white;

            margin-bottom: .9rem;

            line-height: 1.3;
        }

        /* desc */

        .sv-desc {
            font-size: .95rem;
            line-height: 1.9;

            color:
                #c8e6c9;
        }

        /* responsive */

        @media(max-width:1100px) {
            .sv-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

            .sv-card {
                min-height: auto;
            }
        }

        /* text */

        .sv-name {
            font-size: 1.3rem;
            margin-top: 1rem;
            margin-bottom: .8rem;
            transition: .4s ease;
        }

        .sv-desc {
            font-size: .92rem;
            line-height: 1.9;
            transition: .4s ease;
        }

        /* hover text white */

        .sv-card:hover .sv-name,
        .sv-card:hover .sv-desc,
        .sv-card:hover .sv-num {
            color: white;
        }

        /* responsive */

        @media(max-width:1100px) {
            .sv-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

            .sv-card {
                min-height: 200px;
            }
        }

        /* ══════════════════════════════════════════════
           PREMIUM ABOUT SECTION — CLASSY REDESIGN
        ══════════════════════════════════════════════ */
        .pab-section {
            height: auto;
            max-height: none;
            padding: 3.5rem 0;
            background: var(--white);
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        /* Subtle background geometry */
        .pab-bg-line {
            position: absolute;
            pointer-events: none;
        }

        .pab-bg-line-1 {
            top: 0;
            left: 45%;
            width: 1px;
            height: 100%;
            background: linear-gradient(to bottom, transparent, rgba(37, 109, 12, .08), transparent);
        }

        .pab-bg-line-2 {
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(37, 109, 12, .06), transparent);
        }

        .pab-bg-circle {
            position: absolute;
            width: 700px;
            height: 700px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(37, 109, 12, .04) 0%, transparent 65%);
            top: -200px;
            right: -200px;
            pointer-events: none;
        }

        .pab-inner {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 5vw;
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 3.5rem;
            align-items: center;
        }

        /* ── VISUAL SIDE ── */
        .pab-visual {
            position: relative;
        }

        .pab-img-frame {
            position: relative;
            border-radius: 2px;
            overflow: hidden;
            box-shadow: 0 40px 80px rgba(15, 28, 46, .12), 0 8px 24px rgba(15, 28, 46, .06);
        }

        .pab-img-frame img {
            width: 100%;
            height: 380px;
            object-fit: cover;
            display: block;
            transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
            filter: brightness(.97) contrast(1.02);
        }

        .pab-visual:hover .pab-img-frame img {
            transform: scale(1.03);
        }

        .pab-img-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent 55%, rgba(15, 28, 46, .18));
        }

        /* credential badge */
        .pab-badge {
            position: absolute;
            bottom: -1.5rem;
            right: -2rem;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: .75rem;
            padding: .9rem 1.3rem;
            display: flex;
            align-items: center;
            gap: .85rem;
            box-shadow: 0 12px 40px rgba(15, 28, 46, .10);
            animation: pabFloat 5s ease-in-out infinite;
        }

        @keyframes pabFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-6px);
            }
        }

        .pab-badge-icon {
            font-size: 1.6rem;
        }

        .pab-badge-title {
            font-weight: 700;
            font-size: .82rem;
            color: var(--navy);
            letter-spacing: -.01em;
        }

        .pab-badge-sub {
            font-size: .72rem;
            color: var(--teal);
            font-weight: 500;
            margin-top: 1px;
        }

        /* vertical accent line */
        .pab-accent-line {
            position: absolute;
            left: -2rem;
            top: 3rem;
            width: 3px;
            height: calc(100% - 6rem);
            background: linear-gradient(to bottom, var(--teal), rgba(37, 109, 12, .1));
            border-radius: 3px;
        }

        /* ── CONTENT SIDE ── */
        .pab-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .pab-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            font-size: 1rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--teal);
            font-weight: 700;
            font-family: 'Manrope', Georgia, serif;
            margin-bottom: .2rem;
        }

        .pab-eyebrow-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--teal);
            box-shadow: 0 0 12px rgba(37, 109, 12, .8);
            animation: aboutDotPulse 2s ease-in-out infinite;
            flex-shrink: 0;
        }

        .pab-headline {
            font-family: 'Manrope', Georgia, serif;
            font-size: clamp(1.6rem, 2.2vw, 2.4rem);
            font-weight: 400;
            line-height: 1.08;
            color: var(--navy);
            letter-spacing: -.03em;
        }

        .pab-headline em {
            font-style: italic;
            color: var(--teal);
        }

        .pab-lead {
            font-size: .97rem;
            line-height: 1.9;
            color: var(--text-muted);
            max-width: 480px;
        }

        /* elegant divider */
        .pab-divider {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .pab-divider-line {
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        .pab-divider-diamond {
            font-size: .5rem;
            color: var(--teal);
            opacity: .7;
        }

        /* stats row */
        .pab-stats {
            display: flex;
            align-items: center;
            gap: 0;
            background: var(--off-white);
            border: 1px solid var(--border);
            border-radius: .5rem;
            overflow: hidden;
        }

        .pab-stat {
            flex: 1;
            padding: .7rem .9rem;
            text-align: center;
        }

        .pab-stat-sep {
            width: 1px;
            height: 36px;
            background: var(--border);
            flex-shrink: 0;
        }

        .pab-stat-num {
            font-family: 'Manrope', serif;
            font-size: 1.3rem;
            color: var(--navy);
            line-height: 1;
            letter-spacing: -.02em;
        }

        .pab-stat-lbl {
            font-size: .62rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--gray4);
            font-weight: 600;
            margin-top: .35rem;
            line-height: 1.35;
        }

        /* pillars */
        .pab-pillars {
            display: flex;
            flex-direction: column;
            gap: .6rem;
        }

        .pab-pillar {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: .75rem 1.1rem;
            border: 1px solid var(--border);
            border-radius: .5rem;
            background: var(--white);
            transition: border-color .25s, box-shadow .25s, transform .25s;
            overflow: hidden;
        }

        .pab-pillar:hover {
            border-color: rgba(37, 109, 12, .3);
            box-shadow: 0 4px 20px rgba(37, 109, 12, .06);
            transform: translateX(4px);
        }

        .pab-pillar-num {
            font-family: 'Manrope', serif;
            font-size: 1.4rem;
            color: rgba(37, 109, 12, .3);
            line-height: 1;
            flex-shrink: 0;
            letter-spacing: -.02em;
            padding-top: .1rem;
        }

        .pab-pillar-body {
            min-width: 0;
            flex: 1;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        .pab-pillar-ttl {
            font-weight: 600;
            font-size: 1rem;
            color: var(--navy);
            margin-bottom: .3rem;
            letter-spacing: -.01em;
            line-height: 1.3;
        }

        .pab-pillar-txt {
            font-size: .875rem;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* responsive */
        @media (max-width: 900px) {
            .pab-section {
                height: auto;
                max-height: none;
                padding: 4rem 0;
            }

            .pab-inner {
                grid-template-columns: 1fr;
                gap: 3rem;
            }

            .pab-img-frame img {
                height: 320px;
            }

            .pab-accent-line {
                display: none;
            }

            .pab-badge {
                right: 1rem;
                bottom: -1rem;
            }
        }

        /* ══════════════════════════════════════════════
           OLD ABOUT — 100VH WHITE PREMIUM SECTION (kept for fallback)
        ══════════════════════════════════════════════ */
        #about {
            height: auto;
            max-height: none;
            overflow: visible;
            position: relative;
            display: flex;
            flex-direction: column;
            background: var(--off-white);
        }

        /* Subtle top-right teal glow */
        #about::before {
            content: '';
            position: absolute;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(37, 109, 12, 0.06) 0%, transparent 70%);
            top: -200px;
            right: -180px;
            pointer-events: none;
        }

        /* dot grid texture */
        #about::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .55;
            background-image: radial-gradient(circle, rgba(37, 109, 12, 0.12) 1px, transparent 1px);
            background-size: 30px 30px;
        }

        #about .about-grain,
        #about .about-dots,
        #about .about-orb {
            display: none;
        }

        #about .wrap {
            position: relative;
            z-index: 2;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 5vw;
        }

        /* ── MAIN GRID ── */
        .ab-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            height: 100%;
        }

        /* ── LEFT PANEL ── */
        .ab-left {
            display: flex;
            flex-direction: column;
            gap: .9rem;
        }

        .ab-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            background: rgba(37, 109, 12, 0.08);
            border: 1px solid rgba(37, 109, 12, 0.18);
            color: var(--teal);
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
            padding: .3rem .95rem;
            border-radius: 3rem;
            width: fit-content;
        }

        .ab-eyebrow::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--teal);
            box-shadow: 0 0 6px rgba(37, 109, 12, 0.7);
            animation: aboutDotPulse 2s ease-in-out infinite;
        }

        @keyframes aboutDotPulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: .4;
                transform: scale(.5);
            }
        }

        .ab-headline {
            font-family: 'Manrope', Georgia, serif;
            font-size: clamp(2rem, 2.8vw, 2.7rem);
            font-weight: 400;
            line-height: 1.1;
            color: var(--navy);
            letter-spacing: -.02em;
        }

        .ab-headline em {
            font-style: italic;
            color: var(--teal);
        }

        .ab-lead {
            font-size: .92rem;
            line-height: 1.8;
            color: var(--text-muted);
            max-width: 430px;
        }

        .ab-lead mark {
            background: rgba(37, 109, 12, 0.1);
            color: var(--teal);
            border-radius: 3px;
            padding: 0 4px;
            font-weight: 500;
        }

        /* ── STATS STRIP ── */
        .ab-stats-row {
            display: flex;
            gap: 0;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: .9rem;
            overflow: hidden;
            width: fit-content;
            box-shadow: var(--shadow);
        }

        .ab-stat-cell {
            padding: .8rem 1.4rem;
            text-align: center;
            border-right: 1px solid var(--border);
            transition: background .25s;
            min-width: 82px;
        }

        .ab-stat-cell:last-child {
            border-right: none;
        }

        .ab-stat-cell:hover {
            background: rgba(37, 109, 12, 0.05);
        }

        .ab-stat-n {
            font-family: 'Manrope', serif;
            font-size: 1.6rem;
            font-weight: 400;
            color: var(--teal);
            line-height: 1;
            margin-bottom: .2rem;
        }

        .ab-stat-l {
            font-size: .58rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: .1em;
            font-weight: 600;
            white-space: nowrap;
        }

        /* ── FEATURE ROWS ── */
        .ab-features {
            display: flex;
            flex-direction: column;
            gap: .55rem;
        }

        .ab-feat {
            display: flex;
            gap: .85rem;
            align-items: center;
            padding: .75rem 1rem;
            background: var(--white);
            border-radius: .75rem;
            border: 1px solid var(--border);
            box-shadow: 0 1px 6px rgba(15, 28, 46, 0.04);
            transition: background .25s, border-color .25s, transform .3s, box-shadow .3s;
            cursor: default;
        }

        .ab-feat:hover {
            background: #fff;
            border-color: rgba(37, 109, 12, 0.25);
            box-shadow: 0 6px 20px rgba(37, 109, 12, 0.08);
            transform: translateX(4px);
        }

        .ab-feat-ico {
            width: 34px;
            height: 34px;
            border-radius: .55rem;
            background: var(--teal-lt);
            border: 1px solid rgba(37, 109, 12, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .95rem;
            flex-shrink: 0;
        }

        .ab-feat-body {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .ab-feat-ttl {
            font-size: .84rem;
            font-weight: 600;
            color: var(--navy);
        }

        .ab-feat-txt {
            font-size: .74rem;
            color: var(--text-muted);
            line-height: 1.5;
            text-align: right;
        }

        /* ── RIGHT: BENTO CARD GRID ── */
        .ab-right {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 1rem;
            height: clamp(360px, 64vh, 520px);
            align-self: center;
        }

        .ab-card {
            position: relative;
            border-radius: 1.25rem;
            overflow: hidden;
            border: 1px solid var(--border);
            background: var(--white);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1.3rem;
            transition: transform .38s cubic-bezier(.22, 1, .36, 1), border-color .3s, box-shadow .3s;
            box-shadow: 0 4px 20px rgba(15, 28, 46, 0.06);
        }

        /* card 1 spans both rows on left */
        .ab-card:nth-child(1) {
            grid-row: 1 / 3;
            background: linear-gradient(155deg, var(--teal-lt) 0%, rgba(230, 244, 244, 0.4) 60%, var(--white) 100%);
            border-color: rgba(37, 109, 12, 0.18);
        }

        .ab-card:hover {
            transform: translateY(-5px);
            border-color: rgba(37, 109, 12, 0.3);
            box-shadow: 0 16px 48px rgba(37, 109, 12, 0.12);
        }

        /* coloured top bar */
        .ab-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--teal), rgba(37, 109, 12, 0.2));
        }

        .ab-card:nth-child(2)::before {
            background: linear-gradient(90deg, #256d0c, rgba(37, 109, 12, 0.15));
        }

        .ab-card:nth-child(3)::before {
            background: linear-gradient(90deg, #f59e0b, rgba(245, 158, 11, 0.15));
        }

        /* icon */
        .ab-card-ico {
            position: absolute;
            top: 1.1rem;
            left: 1.2rem;
            font-size: 2rem;
            line-height: 1;
            opacity: .55;
        }

        .ab-card:nth-child(1) .ab-card-ico {
            font-size: 2.6rem;
            opacity: .45;
        }

        /* number */
        .ab-card-n {
            font-family: 'Manrope', serif;
            font-size: 2.2rem;
            font-weight: 400;
            color: var(--teal);
            line-height: 1;
        }

        .ab-card:nth-child(1) .ab-card-n {
            font-size: 2.8rem;
        }

        .ab-card:nth-child(2) .ab-card-n {
            color: #256d0c;
        }

        .ab-card:nth-child(3) .ab-card-n {
            color: #d97706;
        }

        .ab-card-label {
            font-size: .62rem;
            text-transform: uppercase;
            letter-spacing: .14em;
            color: var(--text-muted);
            font-weight: 600;
            margin-top: .2rem;
        }

        .ab-card-desc {
            font-size: .76rem;
            color: var(--text-muted);
            margin-top: .45rem;
            line-height: 1.5;
        }

        .ab-card-line {
            display: block;
            height: 1px;
            background: linear-gradient(90deg, rgba(37, 109, 12, 0.3), transparent);
            margin: .65rem 0 .4rem;
            width: 50%;
        }

        /* responsive */
        @media (max-width: 900px) {
            #about {
                height: auto;
                max-height: none;
            }

            .ab-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .ab-right {
                height: 300px;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr;
            }

            .ab-card:nth-child(1) {
                grid-row: unset;
            }
        }

        /* ── TREATMENTS ── */
        /* ═══════════════════════════════════════════
           TREATMENTS SECTION — redesigned
        ═══════════════════════════════════════════ */
        #treatments {
            background: linear-gradient(170deg, #0d2010 0%, #1a3a18 40%, #0f2810 100%);
            overflow: visible;
            padding-top: var(--nh);
            padding-bottom: 3rem;
            box-sizing: border-box;
            position: relative;
            isolation: isolate;
        }

        #treatments::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 55% 45% at 15% 20%, rgba(37, 109, 12, 0.12) 0%, transparent 60%),
                radial-gradient(ellipse 40% 50% at 85% 75%, rgba(37, 109, 12, 0.08) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }

        #treatments::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
            background-size: 32px 32px;
            pointer-events: none;
            z-index: 0;
        }

        #treatments .wrap {
            padding: 2.5rem 5vw 0;
            position: relative;
            z-index: 1;
        }

        /* ── Centered header block above cards ── */
        #treatments .wrap>.fade-in:first-child {
            text-align: center;
            max-width: 680px;
            margin: 0 auto 2rem;
        }

        #treatments .s-lbl {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(111, 207, 74, 0.15);
            border: 1px solid rgba(111, 207, 74, 0.45);
            color: #6fcf4a;
            padding: .35rem .85rem;
            border-radius: 99px;
            margin: 0 auto 1rem;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            width: fit-content;
        }

        #treatments .s-lbl::before {
            display: none;
        }

        #treatments .s-ttl {
            color: #ffffff;
            font-size: clamp(2.6rem, 5vw, 4rem);
            letter-spacing: -.025em;
            line-height: 1.08;
            font-weight: 800;
        }

        /* Highlight marks on the title */
        #treatments .s-ttl mark.hl {
            background: none !important;
            background-image: none !important;
            color: #6fcf4a !important;
            -webkit-text-fill-color: #6fcf4a !important;
        }

        #treatments .s-ttl mark.hl2 {
            background: none !important;
            background-image: none !important;
            color: #6fcf4a !important;
            -webkit-text-fill-color: #6fcf4a !important;
        }

        .tr-sub {
            color: rgba(255, 255, 255, 0.60);
            font-size: 1.35rem;
            line-height: 1.75;
            max-width: 600px;
            margin: .9rem auto 0;
            font-weight: 400;
        }

        #treatments mark.hl-dark {
            background: none !important;
            background-image: none !important;
            color: #6fcf4a !important;
            -webkit-text-fill-color: #6fcf4a !important;
            font-weight: 600;
        }

        #treatments mark.hl2-dark {
            background: none !important;
            background-image: none !important;
            color: #6fcf4a !important;
            -webkit-text-fill-color: #6fcf4a !important;
            font-weight: 600;
        }

        .tr-scroll-hint {
            display: none;
        }

        /* ══════════════════════════════════════════
           SERVICES — centered header
        ══════════════════════════════════════════ */
        .sv-hd {
            text-align: center;
            margin-bottom: 2rem;
        }

        .sv-hd .s-lbl {
            margin: 0 auto 0.8rem;
            width: fit-content;
            justify-content: center;
            font-size: 0.95rem;
            letter-spacing: .2em;
        }

        .sv-hd .s-ttl {
            font-size: clamp(2.6rem, 5vw, 4rem);
            font-weight: 800;
            letter-spacing: -.025em;
            line-height: 1.08;
        }

        .sv-hd-sub {
            font-size: 1.6rem;
            color: #ffffff;
            max-width: 580px;
            margin: .9rem auto 0;
            line-height: 1.75;
        }

        /* ── Grid: 4 columns × 2 rows ── */
        .tr-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: var(--tr-row1, 210px) var(--tr-row2, 210px);
            gap: 1.1rem;
            margin-top: 1rem;
            padding: 0 5vw 2.5rem;
            overflow: visible;
            position: relative;
            z-index: 1;
            transition: grid-template-rows .55s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .tr-grid::-webkit-scrollbar {
            display: none;
        }

        /* ── Card base — clean white-card style ── */
        .tr-card {
            position: relative;
            min-width: 0;
            border-radius: 1rem;
            cursor: pointer;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.10);
            padding: 1.5rem 1.25rem 1.2rem;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
            transition:
                background .4s ease,
                border-color .35s ease,
                box-shadow .4s ease,
                transform .4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .tr-card:hover {
            background: rgba(255, 255, 255, 0.10);
            border-color: rgba(255, 255, 255, 0.22);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
            transform: translateY(-3px);
            z-index: 2;
        }

        .tr-card-panel {
            display: contents;
        }

        /* Subtle top accent bar */
        .tr-card-inner {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            border-radius: 1rem 1rem 0 0;
            background: transparent;
            pointer-events: none;
            z-index: 2;
            transition: background .4s ease;
        }

        .tr-card:hover .tr-card-inner {
            background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 30%, rgba(255, 255, 255, 0.35) 70%, transparent 100%);
        }

        .tr-card-glow-line {
            display: none;
        }

        /* ── Card inner elements ── */
        .tr-card-num {
            font-size: .6rem;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: .22em;
            margin-bottom: .7rem;
            font-weight: 700;
            position: relative;
            z-index: 1;
            font-variant-numeric: tabular-nums;
        }

        .tr-card-ico-wrap {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: .85rem;
            transition:
                background .35s ease,
                border-color .35s ease,
                transform .4s cubic-bezier(0.34, 1.4, 0.64, 1);
            position: relative;
            z-index: 1;
        }

        .tr-card:hover .tr-card-ico-wrap {
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.30);
            transform: scale(1.08);
        }

        .tr-card-label {
            font-size: .72rem;
            color: rgba(255, 255, 255, 0.50);
            text-transform: uppercase;
            letter-spacing: .14em;
            margin-bottom: .3rem;
            font-weight: 700;
            position: relative;
            z-index: 1;
        }

        .tr-card-name {
            font-size: 1.1rem;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.3;
            position: relative;
            z-index: 1;
            letter-spacing: -.01em;
        }

        /* Description — fully visible on hover */
        .tr-card-desc {
            font-size: .9rem;
            color: rgba(255, 255, 255, 0.45);
            line-height: 1.55;
            margin-top: .45rem;
            opacity: 0;
            transform: translateY(6px);
            position: relative;
            z-index: 1;
            transition:
                opacity .4s ease .05s,
                transform .45s cubic-bezier(0.25, 1, 0.5, 1) .05s,
                color .3s ease;
        }

        .tr-card:hover .tr-card-desc {
            opacity: 1;
            transform: translateY(0);
            color: rgba(255, 255, 255, 0.72);
        }

        /* CTA */
        .tr-card-cta {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            font-size: .7rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.80);
            letter-spacing: .08em;
            text-transform: uppercase;
            margin-top: auto;
            padding-top: .6rem;
            opacity: 0;
            transform: translateY(5px);
            position: relative;
            z-index: 1;
            transition:
                opacity .38s ease .12s,
                transform .45s cubic-bezier(0.25, 1, 0.5, 1) .12s;
        }

        .tr-card-cta svg {
            transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .tr-card:hover .tr-card-cta {
            opacity: 1;
            transform: translateY(0);
        }

        .tr-card:hover .tr-card-cta svg {
            transform: translateX(4px);
        }

        /* Tooltip — hidden */
        .tr-card-tip {
            display: none;
        }

        .tr-card-tip-title {
            font-size: .78rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.9);
            letter-spacing: .04em;
            margin-bottom: .35rem;
        }

        .tr-card-tip-tags {
            display: flex;
            flex-wrap: wrap;
            gap: .3rem;
        }

        .tr-tip-tag {
            font-size: .65rem;
            color: rgba(255, 255, 255, .65);
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 99px;
            padding: .15rem .55rem;
            white-space: nowrap;
        }

        /* ── STATS ── */
        #stats {
            background: #f8faf6;
            position: relative;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            position: relative;
            z-index: 1;
        }

        .st-card {
            text-align: center;
            padding: 2.5rem 1.5rem;
            background: #ffffff;
            border-radius: 1.25rem;
            border: 1.5px solid rgba(37, 109, 12, 0.12);
            box-shadow:
                0 4px 24px rgba(37, 109, 12, 0.07),
                0 1px 4px rgba(0, 0, 0, 0.04);
            transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
        }

        .st-card:hover {
            transform: translateY(-5px);
            border-color: rgba(37, 109, 12, 0.28);
            box-shadow:
                0 16px 48px rgba(37, 109, 12, 0.13),
                0 4px 12px rgba(0, 0, 0, 0.06);
        }

        .st-n {
            font-family: 'Manrope', sans-serif;
            font-size: 3rem;
            font-weight: 700;
            color: #1c1b1b;
            background: none;
            -webkit-background-clip: unset;
            -webkit-text-fill-color: #1c1b1b;
            background-clip: unset;
            line-height: 1;
            display: block;
            margin-bottom: .55rem;
            letter-spacing: -0.02em;
        }

        .st-l {
            font-size: .75rem;
            color: #6b7685;
            text-transform: uppercase;
            letter-spacing: .12em;
            font-weight: 600;
        }

        /* ── TEAM ── */
        /* ── TEAM ── */
        /* ── DOCTORS SECTION — site-matched navy gradient ── */
        #doctors {
            background: linear-gradient(135deg, #0f1c2e 0%, #162032 40%, #12243a 70%, #0f1c2e 100%);
            position: relative;
            padding: 0;
            overflow: hidden;
            isolation: isolate;
        }

        /* Ambient glow blobs */
        #doctors::before {
            content: '';
            position: absolute;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(37, 109, 12, 0.13) 0%, transparent 65%);
            bottom: -120px;
            right: 10%;
            pointer-events: none;
            z-index: 0;
        }

        #doctors::after {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(45, 128, 16, 0.10) 0%, transparent 65%);
            top: -80px;
            left: 30%;
            pointer-events: none;
            z-index: 0;
        }

        /* Subtle grid/dot texture overlay */
        #doctors .dr-texture {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image:
                radial-gradient(circle, rgba(37, 109, 12, 0.04) 1px, transparent 1px);
            background-size: 40px 40px;
            opacity: 0.6;
        }

        /* Thin teal top border accent */
        #doctors .dr-top-accent {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(37, 109, 12, 0.6) 30%, rgba(37, 109, 12, 0.8) 50%, rgba(37, 109, 12, 0.6) 70%, transparent);
            z-index: 1;
        }

        #doctors .wrap {
            padding: 0 5vw;
            position: relative;
            z-index: 2;
        }

        /* ── Full section: side-by-side, no padding clipping ── */
        .dr-layout {
            display: grid;
            grid-template-columns: 420px 1fr;
            align-items: stretch;
            min-height: 560px;
        }

        @media(max-width: 900px) {
            .dr-layout {
                grid-template-columns: 1fr;
                min-height: auto;
            }
        }

        /* ── Left panel: sits ON TOP of scrolling cards ── */
        .dr-left {
            position: relative;
            z-index: 10;
            background: linear-gradient(180deg, rgba(15, 28, 46, 0.98) 0%, rgba(22, 32, 50, 0.97) 100%);
            padding: 4rem 3rem 4rem 5vw;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            box-shadow: 8px 0 48px 20px rgba(15, 28, 46, 0.95);
            border-right: 1px solid rgba(255, 255, 255, 0.04);
        }

        /* Decorative vertical teal line on left panel right edge */
        .dr-left::after {
            content: '';
            position: absolute;
            top: 20%;
            bottom: 20%;
            right: -1px;
            width: 1px;
            background: linear-gradient(to bottom, transparent, rgba(37, 109, 12, 0.5), transparent);
            z-index: 1;
        }

        @media(max-width: 900px) {
            .dr-left {
                padding: 3.5rem 5vw 2rem;
                box-shadow: none;
                border-right: none;
            }

            .dr-left::after {
                display: none;
            }
        }

        .dr-hd {
            margin-bottom: 2.25rem;
        }

        .dr-hd .s-lbl {
            color: #256d0c;
        }

        .dr-hd .s-lbl::before {
            background: #256d0c;
        }

        .dr-hd .s-ttl {
            color: #fff;
            font-size: clamp(1.8rem, 2.8vw, 2.6rem);
            margin-top: .5rem;
            line-height: 1.15;
        }

        .dr-hd-sub {
            color: rgba(255, 255, 255, 0.42);
            font-size: .9rem;
            line-height: 1.75;
            margin: .85rem 0 0;
        }

        /* Team count stat strip */
        .dr-stat-strip {
            display: flex;
            gap: 1.5rem;
            margin-top: 2rem;
            margin-bottom: .25rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.10);
        }

        .dr-stat-item {
            display: flex;
            flex-direction: column;
        }

        .dr-stat-num {
            font-family: 'Manrope', serif;
            font-size: 1.6rem;
            color: #256d0c;
            line-height: 1;
        }

        .dr-stat-label {
            font-size: .68rem;
            color: rgba(255, 255, 255, 0.50);
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-top: .2rem;
        }

        /* Scroll arrow buttons */
        .dr-scroll-btns {
            display: flex;
            gap: .75rem;
            margin-top: 2.25rem;
        }

        .dr-arrow {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.04);
            color: rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s;
            flex-shrink: 0;
        }

        .dr-arrow:hover:not(:disabled) {
            background: var(--teal);
            border-color: var(--teal);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(37, 109, 12, 0.4);
        }

        .dr-arrow:active:not(:disabled) {
            transform: scale(0.93);
        }

        .dr-arrow:disabled {
            opacity: 0.18;
            cursor: default;
        }

        /* Dots */
        .dr-dots-row {
            display: flex;
            align-items: center;
            margin-top: 1.5rem;
        }

        .dr-dots-inner {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .dr-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, 0.22);
            cursor: pointer;
            padding: 0;
            transition: background .3s, width .3s cubic-bezier(.34, 1.26, .64, 1), border-radius .3s;
        }

        .dr-dot.dr-dot-active {
            background: #256d0c;
            width: 22px;
            border-radius: 4px;
        }

        /* ── Right: carousel track ── */
        .dr-right {
            overflow: hidden;
            position: relative;
        }

        /* fade out right edge */
        .dr-right::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100px;
            background: linear-gradient(to right, transparent, rgba(15, 28, 46, 0.95));
            pointer-events: none;
            z-index: 3;
        }

        /* ── Scrollable row ── */
        .dr-carousel {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            padding: 2.5rem 5vw 2.5rem 2rem;
            scrollbar-width: none;
            -ms-overflow-style: none;
            cursor: grab;
            align-items: stretch;
        }

        .dr-carousel:active {
            cursor: grabbing;
        }

        .dr-carousel::-webkit-scrollbar {
            display: none;
        }

        /* ── Doctor card ── */
        .dr-card {
            flex-shrink: 0;
            width: 300px;
            scroll-snap-align: start;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.04) 100%);
            border-radius: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.10);
            overflow: hidden;
            transition: box-shadow .4s cubic-bezier(.22, 1, .36, 1), transform .4s cubic-bezier(.22, 1, .36, 1), border-color .4s;
            display: flex;
            flex-direction: column;
            backdrop-filter: blur(4px);
        }

        .dr-card:hover {
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(37, 109, 12, 0.15) inset;
            transform: translateY(-6px);
            border-color: rgba(37, 109, 12, 0.28);
            background: linear-gradient(160deg, rgba(22, 40, 72, 0.92) 0%, rgba(15, 28, 46, 0.88) 100%);
        }

        /* Card avatar area — now uses real photos */
        .dr-img {
            height: 220px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            flex-direction: column;
            gap: 0.6rem;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .dr-img img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
        }

        /* Dark gradient at bottom so name tag is readable */
        .dr-img::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(15, 28, 46, 0.75) 0%, transparent 55%);
            z-index: 1;
            pointer-events: none;
        }

        /* Per-card backgrounds removed — real photos used instead */
        .dr-card:nth-child(1) .dr-img,
        .dr-card:nth-child(2) .dr-img,
        .dr-card:nth-child(3) .dr-img,
        .dr-card:nth-child(4) .dr-img,
        .dr-card:nth-child(5) .dr-img,
        .dr-card:nth-child(6) .dr-img {
            background: #162032;
        }

        /* Subtle mesh/noise overlay removed — photos provide own texture */

        /* Subtle corner arc — hidden now that we use photos */
        .dr-img::after {
            display: none;
        }

        .dr-img-name {
            display: none;
        }

        /* Info area */
        .dr-info {
            padding: 1.5rem 1.6rem 1.75rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .dr-name {
            font-family: 'Manrope', serif;
            font-size: 1.2rem;
            font-weight: 400;
            color: #fff;
            margin-bottom: .2rem;
            letter-spacing: -.01em;
        }

        .dr-spec {
            font-size: .67rem;
            color: #256d0c;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .1em;
            margin-bottom: .9rem;
        }

        .dr-divider {
            height: 1px;
            background: linear-gradient(to right, rgba(37, 109, 12, 0.18), rgba(255, 255, 255, 0.05));
            margin-bottom: .9rem;
        }

        .dr-bio {
            font-size: .83rem;
            color: rgba(255, 255, 255, 0.78);
            line-height: 1.75;
            flex: 1;
        }

        .dr-badge {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            margin-top: 1.1rem;
            background: rgba(37, 109, 12, 0.15);
            color: #256d0c;
            border: 1px solid rgba(37, 109, 12, 0.2);
            padding: .3rem .9rem;
            border-radius: 3rem;
            font-size: .63rem;
            font-weight: 700;
            letter-spacing: .07em;
            align-self: flex-start;
        }

        .dr-badge::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #256d0c;
            opacity: 0.7;
        }

        /* ── TESTIMONIALS ── */
        #testimonials {
            background: var(--off-white);
        }

        .ts-hd {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-bottom: 3rem;
            gap: 1.5rem;
        }

        .ts-controls {
            display: flex;
            gap: .6rem;
        }

        .ts-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            background: var(--white);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: var(--navy);
            transition: all .2s;
        }

        .ts-btn:hover {
            background: var(--teal);
            border-color: var(--teal);
            color: #fff;
        }



        /* ───────── PREMIUM AUTO SLIDING TESTIMONIALS ───────── */

        .ts-slider {
            overflow: hidden;
            position: relative;
            width: 100%;
            mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
        }

        /* sliding track — doubled cards for seamless loop */
        .ts-track {
            display: flex;
            gap: 1.5rem;
            width: max-content;
            animation: testimonialSlide 36s linear infinite;
            will-change: transform;
        }

        /* pause on hover */
        .ts-slider:hover .ts-track {
            animation-play-state: paused;
        }

        /* cards */
        .ts-card {
            width: 370px;
            flex-shrink: 0;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.80));
            border: 1px solid rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(20px);
            border-radius: 1.75rem;
            padding: 2rem 2rem 1.75rem;
            box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
            transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
            position: relative;
            overflow: hidden;
        }

        .ts-card::before {
            content: '\201C';
            position: absolute;
            top: -.5rem;
            right: 1.5rem;
            font-size: 7rem;
            line-height: 1;
            color: var(--teal);
            opacity: .07;
            font-family: 'Manrope', serif;
            pointer-events: none;
        }

        .ts-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 28px 65px rgba(15, 23, 42, 0.15);
        }

        /* stars */
        .ts-stars {
            color: #f5a100;
            font-size: .9rem;
            letter-spacing: 3px;
            margin-bottom: 1rem;
        }

        /* text */
        .ts-txt {
            font-size: .9rem;
            color: var(--text-muted);
            line-height: 1.85;
            margin-bottom: 1.6rem;
            font-style: italic;
        }

        /* author row */
        .ts-auth {
            display: flex;
            align-items: center;
            gap: .9rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }

        .ts-av {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--navy), var(--teal));
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .95rem;
            font-weight: 700;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(37, 109, 12, .35);
        }

        .ts-name {
            font-size: .88rem;
            font-weight: 600;
            color: var(--navy);
        }

        .ts-role {
            font-size: .76rem;
            color: var(--teal);
            margin-top: .15rem;
            font-weight: 500;
        }

        /* dots indicator */
        .ts-dots {
            display: flex;
            justify-content: center;
            gap: .5rem;
            margin-top: 2rem;
        }

        .ts-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gray2);
            cursor: pointer;
            transition: all .35s ease;
            border: none;
            padding: 0;
        }

        .ts-dot.active {
            background: var(--teal);
            width: 22px;
            border-radius: 99px;
        }

        /* smooth infinite slide */
        @keyframes testimonialSlide {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-50% - .75rem));
            }
        }

        /* ── APPOINTMENT ── */
        #appointment {
            background: transparent;
        }

        /* Make appointment heading text visible */
        #appointment .s-ttl {
            color: #1a2e1a;
        }

        #appointment em {
            color: #256d0c;
        }

        #appointment .s-lbl {
            color: #256d0c;
        }

        #appointment .s-lbl::before {
            background: #256d0c;
        }


        /* ───────── APPOINTMENT SECTION FIX ───────── */




        .ap-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 5rem;
            align-items: center;
        }

        .ap-lead {
            color: rgba(190, 225, 225, 0.65);
            font-size: .95rem;
            line-height: 1.8;
            margin: 1.5rem 0 2.5rem;
        }

        .ap-info-list {
            display: flex;
            flex-direction: column;
            gap: 1.1rem;
        }

        .ap-row {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            padding: 1.1rem 1.25rem;
            border: 1px solid rgba(37, 109, 12, 0.12);
            border-radius: .75rem;
            background: rgba(5, 14, 28, 0.65);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: border-color .3s, background .3s, box-shadow .3s;
        }

        .ap-row:hover {
            border-color: rgba(37, 109, 12, 0.4);
            background: rgba(3, 9, 20, 0.82);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
        }

        .ap-ico {
            width: 38px;
            height: 38px;
            border-radius: .5rem;
            background: rgba(37, 109, 12, 0.2);
            border: 1px solid rgba(37, 109, 12, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .ap-row-lbl {
            font-size: .72rem;
            color: rgba(37, 109, 12, 0.7);
            text-transform: uppercase;
            letter-spacing: .1em;
            margin-bottom: .3rem;
            font-weight: 500;
        }

        .ap-row a {
            color: #e8f6f6;
            font-weight: 500;
            font-size: .9rem;
        }

        .ap-row a:hover {
            color: #256d0c;
        }

        .ap-row div {
            font-size: .88rem;
            color: rgba(200, 230, 230, 0.8);
            line-height: 1.6;
        }

        /* Form  */

        .ap-form {
            background: rgba(4, 12, 24, 0.72);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(37, 109, 12, 0.14);
            border-radius: 1.25rem;
            padding: 2.5rem;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .f-ttl {
            font-size: 1.4rem;
            font-weight: 600;
            color: #e8f6f6;
            margin-bottom: .4rem;
        }

        .f-sub {
            font-size: .85rem;
            color: rgba(190, 225, 225, 0.55);
            margin-bottom: 2rem;
        }

        .f-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .f-full {
            grid-column: 1/-1;
        }

        .fg {
            position: relative;
        }

        .fi {
            width: 100%;
            padding: .85rem 1rem;
            border: 1.5px solid rgba(37, 109, 12, 0.15);
            border-radius: .6rem;
            background: rgba(3, 9, 20, 0.7);
            color: #e8f6f6;
            font-family: inherit;
            font-size: .9rem;
            outline: none;
            transition: border-color .25s, box-shadow .25s;
            appearance: none;
            -webkit-appearance: none;
        }

        .fi:focus {
            border-color: rgba(37, 109, 12, 0.5);
            box-shadow: 0 0 0 3px rgba(37, 109, 12, 0.12);
        }

        .fi::placeholder {
            color: rgba(37, 109, 12, 0.3);
        }

        select.fi {
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232a7f7f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            padding-right: 2.5rem;
        }

        select.fi option {
            background: #091422;
            color: #e8f6f6;
        }

        .btn-submit {
            width: 100%;
            background: var(--navy);
            color: #fff;
            padding: 1rem;
            border-radius: .6rem;
            border: none;
            font-family: inherit;
            font-size: .95rem;
            font-weight: 500;
            cursor: pointer;
            transition: background .2s, transform .2s;
            margin-top: .5rem;
        }

        .btn-submit:hover {
            background: var(--teal);
            transform: translateY(-1px);
        }

        .f-ok {
            display: none;
            text-align: center;
            padding: 3rem 1rem;
        }

        .f-ok-ico {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .f-ok h3 {
            font-size: 1.4rem;
            font-weight: 600;
            color: #e8f6f6;
            margin-bottom: .5rem;
        }

        .f-ok p {
            font-size: .88rem;
            color: rgba(190, 225, 225, 0.6);
            line-height: 1.7;
        }

        /* ───────── DATE FIELD LABEL FIX ───────── */
        .fi-date-wrap {
            position: relative;
        }

        .fi-date-lbl {
            display: block;
            font-size: .72rem;
            font-weight: 500;
            color: rgba(37, 109, 12, 0.65);
            text-transform: uppercase;
            letter-spacing: .1em;
            margin-bottom: .4rem;
            padding-left: .1rem;
        }

        .fi-date {
            color: #e8f6f6;
        }

        .fi-date::-webkit-calendar-picker-indicator {
            opacity: 0.5;
            cursor: pointer;
            filter: invert(1);
        }

        /* ───────── ENHANCED SCROLL ANIMATIONS ───────── */

        /* Slide in from left */
        .slide-left {
            opacity: 0;
            transform: translate3d(-60px, 0, 0);
            transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .slide-left.sl-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        /* Slide in from right */
        .slide-right {
            opacity: 0;
            transform: translate3d(60px, 0, 0);
            transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .slide-right.sr-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        /* Scale pop */
        .scale-pop {
            opacity: 0;
            transform: scale(0.85);
            transition: opacity 0.75s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .scale-pop.sp-visible {
            opacity: 1;
            transform: scale(1);
        }

        /* Flip-up for trust items */
        .flip-up {
            opacity: 0;
            transform: perspective(600px) rotateX(25deg) translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .flip-up.fu-visible {
            opacity: 1;
            transform: perspective(600px) rotateX(0) translateY(0);
        }

        /* Reveal line for section labels */
        .line-reveal {
            position: relative;
            overflow: hidden;
        }

        .line-reveal::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--teal);
            transform: translateX(0);
            transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
        }

        .line-reveal.lr-visible::after {
            transform: translateX(101%);
        }

        /* Stagger delays for flip-up groups */
        .flip-up:nth-child(1) {
            transition-delay: 0s;
        }

        .flip-up:nth-child(2) {
            transition-delay: 0.1s;
        }

        .flip-up:nth-child(3) {
            transition-delay: 0.2s;
        }

        .flip-up:nth-child(4) {
            transition-delay: 0.3s;
        }

        /* Floating badge animation enhancement */
        @keyframes floatBadge {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-6px);
            }
        }

        /* Section transition glow */
        @keyframes sectionGlow {
            from {
                box-shadow: inset 0 0 0 rgba(37, 109, 12, 0);
            }

            to {
                box-shadow: inset 0 -4px 40px rgba(37, 109, 12, .06);
            }
        }

        #appointment.ap-in-view {
            animation: sectionGlow 1.2s ease forwards;
        }

        /* Enhanced form entrance */
        .ap-form {
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease, box-shadow 0.4s ease;
        }

        .ap-form:hover {
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(37, 109, 12, 0.15);
        }

        /* Form field focus glow */
        .fi:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px rgba(37, 109, 12, 0.1);
        }

        /* ───────── PERFECT FORM ALIGNMENT ───────── */


        /* ── CTA BANNER ── */
        #ctabanner {
            background: linear-gradient(135deg, var(--navy) 0%, #1a3a50 100%);
            position: relative;
            overflow: hidden;
        }

        .cta-pattern {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .04;
            background-image: radial-gradient(circle, rgba(255, 255, 255, .8) 1px, transparent 1px);
            background-size: 32px 32px;
        }

        .cb-inner {
            padding: 2.5rem 5vw;
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 2rem;
        }

        .cb-ttl {
            font-family: 'Manrope', serif;
            font-size: clamp(1.8rem, 3.2vw, 2.8rem);
            font-weight: 400;
            color: var(--white);
            line-height: 1.2;
        }

        .cb-ttl em {
            font-style: italic;
            color: #256d0c;
        }

        .cb-sub {
            color: rgba(255, 255, 255, .55);
            font-size: .9rem;
            margin-top: .5rem;
        }

        .cb-acts {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn-white {
            background: var(--white);
            color: var(--navy);
            padding: .85rem 2rem;
            border-radius: .6rem;
            font-size: .9rem;
            font-weight: 600;
            transition: all .2s;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
        }

        .btn-white:hover {
            background: var(--teal);
            color: #fff;
            transform: translateY(-2px);
        }

        .btn-outline-white {
            background: rgba(255, 255, 255, .12);
            color: #ffffff;
            padding: .85rem 2rem;
            border-radius: .6rem;
            border: 1.5px solid rgba(255, 255, 255, .55);
            font-size: .9rem;
            font-weight: 500;
            transition: all .2s;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
        }

        .btn-outline-white:hover {
            background: rgba(255, 255, 255, .22);
            color: #fff;
            border-color: rgba(255, 255, 255, .8);
        }

        /* ── FOOTER ── */
        footer {
            background: var(--navy);
            color: rgba(255, 255, 255, .7);
            padding: 2.5rem 5vw 1.5rem;
        }

        .ft-grid {
            display: grid;
            grid-template-columns: 1.8fr 1fr 1fr 1fr;
            gap: 3.5rem;
            margin-bottom: 4rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        .ft-logo {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--white);
            display: flex;
            align-items: center;
            gap: .6rem;
            margin-bottom: 1rem;
        }

        .ft-logo-mark {
            width: 32px;
            height: 32px;
            background: var(--teal);
            border-radius: .4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .9rem;
            color: #fff;
        }

        .ft-brand p {
            font-size: .84rem;
            line-height: 1.9;
            max-width: 280px;
            margin-bottom: 1.5rem;
        }

        .ft-soc {
            display: flex;
            gap: .6rem;
        }

        .ft-pin {
            width: 13px;
            height: 13px;
            fill: var(--teal);
            flex-shrink: 0;
            margin-right: .3rem;
            opacity: 0.85;
            position: relative;
            top: 1px;
        }

        .ft-col ul li a {
            display: flex;
            align-items: center;
        }

        .ft-branch-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
        }

        .ft-branch-name {
            display: flex;
            align-items: center;
            font-size: .84rem;
            color: rgba(255, 255, 255, .75);
            transition: color .2s;
            white-space: nowrap;
        }

        .ft-branch-name:hover {
            color: var(--white);
        }

        .ft-branch-tel {
            font-size: .75rem;
            color: rgba(255, 255, 255, .42);
            letter-spacing: .01em;
            white-space: nowrap;
            transition: color .2s;
            display: none !important;
            /* Hide on desktop */
        }

        .ft-branch-tel:hover {
            color: var(--white);
        }

        .ft-contact-divider {
            border-top: 1px solid rgba(255, 255, 255, .08);
            margin: .3rem 0;
        }

        .soc-btn {
            width: 36px;
            height: 36px;
            border-radius: .5rem;
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .9rem;
            color: rgba(255, 255, 255, .55);
            transition: all .25s;
        }

        .soc-btn svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
            transition: all .25s;
        }

        .soc-btn:hover {
            background: transparent;
            border: none;
            color: #fff;
            transform: translateY(-2px);
        }

        .ft-col h4 {
            color: var(--white);
            font-size: .72rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            margin-bottom: 1.25rem;
            font-weight: 600;
        }

        .ft-col ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .7rem;
        }

        .ft-col ul a {
            font-size: .84rem;
            transition: color .2s;
        }

        .ft-col ul a:hover {
            color: var(--white);
        }

        .ft-bot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .ft-bot p {
            font-size: .78rem;
            color: rgba(255, 255, 255, .70);
        }

        @media(max-width: 1100px) {
            .sv-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .tr-grid {
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: var(--tr-row1, 200px) var(--tr-row2, 200px) var(--tr-row3, 200px);
            }

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

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

            .ab-right {
                display: none;
            }

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

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

            .sv-hd {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }

        @media(max-width: 1023px) {
            .tr-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                grid-template-rows: auto !important;
            }

            .tr-card {
                height: auto !important;
                min-height: 240px;
            }

            .tr-card .tr-card-desc,
            .tr-card .tr-card-cta {
                opacity: 1 !important;
                transform: translateY(0) !important;
            }
        }

        @media(max-width: 768px) {
            :root {
                --nh: 64px;
            }

            .n-links {
                display: none !important;
            }

            nav .btn-nav {
                display: none !important;
            }

            .m-nav .btn-nav {
                display: inline-block !important;
                padding: 0.8rem 1.5rem !important;
                font-size: 1rem !important;
                border-radius: 0.6rem !important;
            }

            .hbg {
                display: flex;
            }

            .sv-grid,
            .dr-grid {
                grid-template-columns: 1fr;
            }

            .tr-grid {
                grid-template-columns: 1fr !important;
                grid-template-rows: auto !important;
                gap: 1rem;
                padding-left: 5vw;
                padding-right: 5vw;
            }

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

            .ts-track {
                grid-template-columns: 1fr;
            }

            .wrap {
                padding: 4rem 5vw;
            }

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

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

            .cb-inner {
                flex-direction: column;
                align-items: flex-start;
            }

            .trust-inner {
                gap: 1.5rem;
            }

            .trust-div {
                display: none;
            }

            /* .hero-stats removed - replaced by .hex-stats */
        }

        @media(max-width: 480px) {
            .tr-grid {
                grid-template-columns: 1fr !important;
                gap: 0.75rem;
            }
        }







        /* ── animation ── */

        /* ───────── WEBSITE OPENING ANIMATION ───────── */
        .loader {
            position: fixed;
            inset: 0;
            background: #0f1c2e;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5000;
            overflow: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }

        .loader.hide {
            opacity: 0;
            visibility: hidden;
        }

        .loader-logo {
            color: white;
            font-size: 3rem;
            font-weight: 700;
            letter-spacing: 3px;
            animation: zoomIn 0.8s ease forwards;
        }

        .loader-logo span {
            color: #256d0c;
        }

        @keyframes zoomIn {
            0% {
                transform: scale(0.5);
                opacity: 0;
                letter-spacing: 12px;
            }

            100% {
                transform: scale(1);
                opacity: 1;
                letter-spacing: 3px;
            }
        }




        /* ═══════════════════════════════════════════════
           CINEMATIC SCROLL ANIMATION SYSTEM — FULL ENGINE
           ═══════════════════════════════════════════════ */

        /* ── GPU ACCELERATION BASELINE ── */
        section,
        .sv-card,
        .tr-card,
        .dr-card,
        .ts-card,
        .st-card,
        .ab-feat,
        .trust-item,
        .ap-row,
        .ft-col,
        .s-lbl,
        .s-ttl {
            will-change: transform, opacity;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* ── CINEMATIC SECTION ENTRY ── */
        /* Every section starts invisible and scaled-down */
        .cinema-section {
            opacity: 0;
            transform: translate3d(0, 80px, 0) scale(0.92);
            filter: blur(6px);
            transition:
                opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .cinema-section.cs-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            filter: blur(0px);
        }

        /* Section stagger children */
        .cinema-section .cinema-child {
            opacity: 0;
            transform: translate3d(0, 50px, 0) scale(0.96);
            filter: blur(3px);
            transition:
                opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .cinema-section.cs-visible .cinema-child {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            filter: blur(0);
        }

        .cinema-section.cs-visible .cinema-child:nth-child(1) {
            transition-delay: 0.08s;
        }

        .cinema-section.cs-visible .cinema-child:nth-child(2) {
            transition-delay: 0.16s;
        }

        .cinema-section.cs-visible .cinema-child:nth-child(3) {
            transition-delay: 0.24s;
        }

        .cinema-section.cs-visible .cinema-child:nth-child(4) {
            transition-delay: 0.32s;
        }

        .cinema-section.cs-visible .cinema-child:nth-child(5) {
            transition-delay: 0.40s;
        }

        .cinema-section.cs-visible .cinema-child:nth-child(6) {
            transition-delay: 0.48s;
        }

        /* ── WORD-BY-WORD HEADING REVEAL ── */
        .word-reveal {
            overflow: hidden;
            display: inline-block;
        }

        .word-reveal .word {
            display: inline-block;
            opacity: 0;
            transform: translateY(110%) rotate(2deg);
            transition:
                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .word-reveal.wr-visible .word {
            opacity: 1;
            transform: translateY(0) rotate(0deg);
        }

        .word-reveal.wr-visible .word:nth-child(1) {
            transition-delay: 0.00s;
        }

        .word-reveal.wr-visible .word:nth-child(2) {
            transition-delay: 0.08s;
        }

        .word-reveal.wr-visible .word:nth-child(3) {
            transition-delay: 0.16s;
        }

        .word-reveal.wr-visible .word:nth-child(4) {
            transition-delay: 0.24s;
        }

        .word-reveal.wr-visible .word:nth-child(5) {
            transition-delay: 0.32s;
        }

        .word-reveal.wr-visible .word:nth-child(6) {
            transition-delay: 0.40s;
        }

        .word-reveal.wr-visible .word:nth-child(7) {
            transition-delay: 0.48s;
        }

        .word-reveal.wr-visible .word:nth-child(8) {
            transition-delay: 0.56s;
        }

        /* ── CARD CINEMA ENTRY ── */
        .card-cinema {
            opacity: 0;
            transform: translate3d(0, 70px, 0) scale(0.88);
            filter: blur(8px);
            transition:
                opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .card-cinema.cc-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            filter: blur(0);
        }

        /* Grid stagger for card sets */
        .card-grid-cinema .card-cinema:nth-child(1) {
            transition-delay: 0.04s;
        }

        .card-grid-cinema .card-cinema:nth-child(2) {
            transition-delay: 0.10s;
        }

        .card-grid-cinema .card-cinema:nth-child(3) {
            transition-delay: 0.16s;
        }

        .card-grid-cinema .card-cinema:nth-child(4) {
            transition-delay: 0.22s;
        }

        .card-grid-cinema .card-cinema:nth-child(5) {
            transition-delay: 0.28s;
        }

        .card-grid-cinema .card-cinema:nth-child(6) {
            transition-delay: 0.34s;
        }

        .card-grid-cinema .card-cinema:nth-child(7) {
            transition-delay: 0.40s;
        }

        .card-grid-cinema .card-cinema:nth-child(8) {
            transition-delay: 0.46s;
        }

        /* ── 3D TILT ON CARDS ── */
        .sv-card,
        .dr-card,
        .st-card {
            transform-style: preserve-3d;
            transition:
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.55s ease !important;
            perspective: 800px;
        }

        /* Restore full cinematic transitions for tr-card — handled in #treatments block */

        .sv-card:hover {
            box-shadow: 0 35px 80px rgba(15, 23, 42, .28), 0 0 0 1px rgba(37, 109, 12, .2);
        }

        .dr-card:hover {
            box-shadow: 0 30px 70px rgba(15, 23, 42, .18);
        }

        .st-card:hover {
            box-shadow: 0 28px 65px rgba(37, 109, 12, .2);
        }

        /* ── LABEL WIPE EFFECT ── */
        .s-lbl-wrap {
            overflow: hidden;
            display: inline-block;
        }

        .s-lbl {
            opacity: 0;
            transform: translateX(-30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .s-lbl.lbl-visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* ── PARAGRAPH FADE-UP ── */
        .para-cinema {
            opacity: 0;
            transform: translate3d(0, 35px, 0);
            transition:
                opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .para-cinema.pc-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        /* ── SCROLL VELOCITY MOTION BLUR ── */
        body.scrolling-fast * {
            /* subtle motion blur on fast scroll — GPU composited */
        }

        body.scrolling-fast .cinema-section:not(.cs-visible) {
            filter: blur(2px);
        }

        /* ── GLOW DEPTH ON SCROLL ── */
        .scroll-glow {
            transition: box-shadow 0.4s ease, border-color 0.4s ease;
        }

        /* ── TRUST STRIP ENTRY ── */
        .trust-item {
            opacity: 0;
            transform: translate3d(0, 30px, 0) scale(0.92);
            transition:
                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .trust-item.ti-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
        }

        /* ── STATS POP SPRING ── */
        .st-card {
            opacity: 0;
            transform: translate3d(0, 50px, 0) scale(0.85);
        }

        .st-card.sc-popped {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            animation: springPop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        @keyframes springPop {
            0% {
                opacity: 0;
                transform: scale(0.75) translateY(40px);
            }

            60% {
                opacity: 1;
                transform: scale(1.04) translateY(-6px);
            }

            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* ── ANIMATED GRADIENT OVERLAY ── */
        .gradient-overlay-animate {
            background-size: 200% 200%;
            animation: gradientShift 8s ease infinite;
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /* ── FLOATING GLOW ORBS ── */
        .glow-orb {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            will-change: transform;
            animation: orbFloat 6s ease-in-out infinite alternate;
        }

        @keyframes orbFloat {
            0% {
                transform: translate(0px, 0px) scale(1);
            }

            33% {
                transform: translate(30px, -20px) scale(1.05);
            }

            66% {
                transform: translate(-20px, 20px) scale(0.96);
            }

            100% {
                transform: translate(15px, -30px) scale(1.08);
            }
        }

        /* ── CINEMATIC VIEWPORT TRANSITION OVERLAY ── */
        .cinema-veil {
            position: fixed;
            inset: 0;
            background: var(--navy);
            z-index: 4999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        /* ── SECTION LINE REVEAL ── */
        .line-reveal {
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--teal), transparent);
            transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
            display: block;
            margin-bottom: 1rem;
        }

        .line-reveal.lr-visible {
            width: 60px;
        }

        /* ── FLOATING ANIMATION ── */
        .float-anim {
            animation: floating 4s ease-in-out infinite;
        }

        @keyframes floating {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-12px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        /* ── EXISTING REVEAL COMPAT ── */
        .reveal {
            opacity: 0;
            transform: translate3d(0, 60px, 0) scale(0.94);
            filter: blur(4px);
            transition:
                opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Treatments uses fixed height layout — only fade, no transform shift */
        #treatments.reveal {
            transform: none;
            filter: none;
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #treatments.reveal.active {
            opacity: 1;
            transform: none;
            filter: none;
        }

        .reveal.active {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            filter: blur(0);
        }

        /* ── EXISTING FADE-IN COMPAT ── */
        .fade-in {
            opacity: 0;
            transform: translate3d(0, 28px, 0);
            transition:
                opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .fade-in.visible {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        .fade-in[data-delay="1"] {
            transition-delay: .12s;
        }

        .fade-in[data-delay="2"] {
            transition-delay: .22s;
        }

        .fade-in[data-delay="3"] {
            transition-delay: .32s;
        }

        .fade-in[data-delay="4"] {
            transition-delay: .42s;
        }

        .fade-in[data-delay="5"] {
            transition-delay: .52s;
        }

        .fade-in[data-delay="6"] {
            transition-delay: .62s;
        }

        /* ── NAVBAR ANIMATION ── */
        nav {
            animation: navDrop 1s ease;
        }

        @keyframes navDrop {
            from {
                opacity: 0;
                transform: translateY(-100%);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        /* ───────── CURSOR GLOW ───────── */
        /* ───────── PREMIUM CURSOR GLOW ───────── */
        .cursor-glow {
            position: fixed;
            width: 380px;
            height: 380px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;

            transform: translate(-50%, -50%);
            transition:
                background 0.5s ease,
                opacity 0.3s ease;

            filter: blur(35px);

            opacity: 0.9;

            mix-blend-mode: screen;
        }


        /* Stronger effect on buttons/cards */

        .btn-primary:hover~.cursor-glow,
        .sv-card:hover~.cursor-glow,
        .tr-card:hover~.cursor-glow {
            transform: translate(-50%, -50%) scale(1.2);
        }


        /* ───────── HERO TEXT ANIMATION ───────── */
        .hero-h1 {
            overflow: hidden;
        }

        .hero-h1 span {
            display: inline-block;
            opacity: 0;
            transform: translateY(100px);
            animation: textReveal 1s forwards;
        }

        .hero-h1 span:nth-child(1) {
            animation-delay: 0.2s;
        }

        .hero-h1 span:nth-child(2) {
            animation-delay: 0.5s;
        }

        .hero-h1 span:nth-child(3) {
            animation-delay: 0.8s;
        }

        @keyframes textReveal {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ───────── SHINE EFFECT ───────── */
        .dr-card,
        .ts-card {
            position: relative;
            overflow: hidden;
        }

        /* sv-card uses overflow:visible for clean border-radius — shine is clipped by border-radius naturally */
        .sv-card {
            position: relative;
        }

        /* tr-card: keep overflow hidden so content clips cleanly to card bounds */
        .tr-card {
            overflow: hidden;
            will-change: auto;
            border-radius: 1.25rem;
        }

        .sv-card::after,
        .dr-card::after,
        .ts-card::after {
            content: '';
            position: absolute;
            top: -120%;
            left: -120%;
            width: 200%;
            height: 200%;
            background: linear-gradient(120deg,
                    transparent,
                    rgba(255, 255, 255, 0.12),
                    transparent);
            transform: rotate(25deg);
            transition: 0.7s;
            /* clip shine inside the card's rounded corners */
            border-radius: inherit;
            pointer-events: none;
        }

        .sv-card:hover::after,
        .dr-card:hover::after,
        .ts-card:hover::after {
            top: 100%;
            left: 100%;
        }

        /* tr-card::after is the glass border ring — do not override with shine */


        /* ───────── BUTTON PULSE ───────── */
        .btn-primary {
            animation: pulseGlow 2.5s infinite;
        }

        @keyframes pulseGlow {
            0% {
                box-shadow: 0 0 0 rgba(37, 109, 12, 0.5);
            }

            50% {
                box-shadow: 0 0 25px rgba(37, 109, 12, 0.8);
            }

            100% {
                box-shadow: 0 0 0 rgba(37, 109, 12, 0.5);
            }
        }




        /* PREMIUM ABOUT SECTION */

        .premium-about {
            padding: 3rem 8%;
            background:
                linear-gradient(135deg,
                    #f8fbfd 0%,
                    #eef5f7 100%);
            overflow: visible;
            position: relative;
        }

        /* background glow */

        .premium-about::before {
            content: '';
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;

            background:
                radial-gradient(circle,
                    rgba(37, 109, 12, 0.12),
                    transparent 70%);

            top: -200px;
            right: -180px;

            animation: floatGlow 8s ease-in-out infinite alternate;
        }

        @keyframes floatGlow {
            from {
                transform: translateY(0px);
            }

            to {
                transform: translateY(40px);
            }
        }

        .premium-about-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        /* LEFT SIDE */

        .premium-about-image-wrap {
            position: relative;
            overflow: visible;
            padding-right: 90px;
            padding-bottom: 30px;
        }

        .premium-about-image-wrap img {
            width: 100%;
            height: 420px;
            object-fit: cover;
            border-radius: 24px;
            box-shadow: 0 24px 60px rgba(15, 28, 46, 0.20);
            transition: 1s cubic-bezier(.16, 1, .3, 1);
        }

        .premium-about-image-wrap:hover img {
            transform: scale(1.03);
        }

        /* glow */

        .premium-glow {
            position: absolute;
            inset: auto;

            width: 280px;
            height: 280px;

            border-radius: 50%;

            background:
                radial-gradient(circle,
                    rgba(37, 109, 12, 0.35),
                    transparent 70%);

            bottom: -60px;
            left: -60px;

            filter: blur(40px);

            z-index: -1;
        }

        /* OPENING CARD */

        .opening-card {
            position: absolute;
            bottom: -5px;
            right: -15px;
            width: 340px;
            padding: 24px 26px;
            border-radius: 24px;
            background: rgba(10, 20, 38, 0.92);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            border: 1px solid rgba(37, 109, 12, 0.18);
            box-shadow:
                0 28px 64px rgba(0, 0, 0, 0.40),
                0 0 0 1px rgba(37, 109, 12, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            animation: floatCard 4s ease-in-out infinite;
            z-index: 5;
        }

        @keyframes floatCard {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .opening-card h3 {
            color: #256d0c;
            font-size: 1.15rem;
            margin-bottom: 14px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .opening-card h3::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #256d0c;
            box-shadow: 0 0 6px #256d0c;
        }

        .hour-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.82);
            font-size: 17px;
        }

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

        .hour-row span:last-child {
            color: #4ade80;
            font-weight: 500;
        }

        /* RIGHT SIDE */

        .premium-about-content {
            position: relative;
        }

        .about-subtitle {
            display: inline-block;
            color: #256d0c;
            letter-spacing: 3px;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 14px;
        }

        .premium-about-content h2 {
            font-size: 2rem;
            line-height: 1.12;
            color: #0f1c2e;
            margin-bottom: 12px;
            font-family: serif;
        }

        .premium-about-content p {
            color: #5b6472;
            font-size: 15px;
            line-height: 1.8;
            margin-bottom: 16px;
        }

        /* SKILLS */

        .skill {
            margin-bottom: 8px;
        }

        .skill-top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .skill-top span:first-child {
            font-weight: 700;
            color: #0f1c2e;
        }

        .skill-top span:last-child {
            color: #256d0c;
            font-weight: 700;
        }

        .skill-bar {
            height: 12px;
            background: #dfe8eb;
            border-radius: 50px;
            overflow: hidden;
            position: relative;
        }

        .skill-fill {
            height: 100%;
            border-radius: 50px;

            background:
                linear-gradient(90deg,
                    #256d0c,
                    #256d0c);

            box-shadow:
                0 0 20px rgba(37, 109, 12, 0.4);

            animation: fillAnim 2s ease forwards;
        }

        .fill1 {
            width: 95%;
        }

        .fill2 {
            width: 98%;
        }

        .fill3 {
            width: 92%;
        }

        @keyframes fillAnim {
            from {
                width: 0;
            }
        }

        /* SCROLL ANIMATION */

        .premium-about {
            opacity: 0;
            transform:
                translateY(80px) scale(0.94);

            transition:
                1.2s cubic-bezier(.16, 1, .3, 1);
        }

        .premium-about.show,
        .premium-about.sec-visible {
            opacity: 1;
            transform:
                translateY(0) scale(1);
        }

        /* RESPONSIVE */

        @media(max-width:991px) {

            .premium-about-container {
                grid-template-columns: 1fr;
            }

            .opening-card {
                right: 20px;
                bottom: 20px;
            }

            .premium-about-content h2 {
                font-size: 3rem;
            }

        }

        @media(max-width:768px) {

            .premium-about {
                padding: 3rem 6%;
            }

            .premium-about-image-wrap img {
                height: 260px;
            }

            .opening-card {
                width: 220px;
                padding: 14px 16px;
                right: 0;
                bottom: -10px;
            }

            .premium-about-content h2 {
                font-size: 2rem;
            }

        }

        /* ═══════════════════════════════════════
           SERVICES SPLIT LAYOUT
        ═══════════════════════════════════════ */

        /* Split container */
        .sv-split-layout {
            display: grid;
            grid-template-columns: 1fr 2px 1fr;
            gap: 0 2rem;
            align-items: stretch;
            min-height: 380px;
        }

        /* ── LEFT: SLIDER PANEL ── */
        .sv-slider-panel {
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .sv-slider-track {
            position: relative;
            width: 100%;
        }

        /* Dots */
        .sv-dots {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin-top: 1.2rem;
        }

        .sv-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(37, 109, 12, 0.3);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            border: none;
        }

        .sv-dot.active {
            background: #256d0c;
            transform: scale(1.5);
            box-shadow: 0 0 8px rgba(37, 109, 12, 0.6);
        }

        /* ── PARTITION ── */
        .sv-partition {
            background: linear-gradient(to bottom,
                    transparent,
                    rgba(37, 109, 12, 0.4) 20%,
                    rgba(37, 109, 12, 0.6) 50%,
                    rgba(37, 109, 12, 0.4) 80%,
                    transparent);
            width: 2px;
            border-radius: 2px;
            position: relative;
        }

        .sv-partition::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #256d0c;
            box-shadow: 0 0 16px rgba(37, 109, 12, 0.8);
            animation: partitionPulse 2s ease-in-out infinite;
        }

        @keyframes partitionPulse {

            0%,
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            50% {
                opacity: 0.4;
                transform: translate(-50%, -50%) scale(1.6);
            }
        }

        /* ── RIGHT: COMPARE PANEL ── */
        .sv-compare-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
        }

        .sv-compare-label-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 380px;
        }

        .compare-title {
            font-family: 'Manrope', serif;
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.85);
            text-align: center;
        }

        .compare-badge {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.3rem 0.8rem;
            border-radius: 3rem;
        }

        .before-badge {
            background: rgba(180, 140, 30, 0.25);
            color: #e0b840;
            border: 1px solid rgba(180, 140, 30, 0.4);
        }

        .after-badge {
            background: rgba(37, 109, 12, 0.25);
            color: #256d0c;
            border: 1px solid rgba(37, 109, 12, 0.4);
        }

        /* Compare container */
        .sv-compare-wrap {
            position: relative;
            width: 100%;
            max-width: 380px;
            border-radius: 1.2rem;
            overflow: hidden;
            cursor: ew-resize;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(37, 109, 12, 0.2);
            user-select: none;
        }

        .tooth-svg {
            width: 100%;
            height: auto;
            display: block;
        }

        /* After layer: always visible, full width */
        .compare-after {
            display: block;
            width: 100%;
        }

        /* Before layer: overlaid, clipped to left half */
        .compare-before {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            overflow: hidden;
            border-right: 2px solid rgba(255, 255, 255, 0.6);
        }

        .compare-before svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 380px;
            /* matches viewBox width mapping */
            max-width: none;
            height: 100%;
        }

        /* Handle */
        .compare-handle {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            pointer-events: none;
            z-index: 10;
        }

        .handle-line {
            flex: 1;
            width: 2px;
            background: rgba(255, 255, 255, 0.7);
        }

        .handle-circle {
            width: 40px;
            height: 40px;
            background: var(--teal);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(37, 109, 12, 0.6);
            flex-shrink: 0;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .compare-caption {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.5);
            text-align: center;
            font-style: italic;
        }

        /* Responsive */
        @media(max-width: 900px) {
            .sv-split-layout {
                grid-template-columns: 1fr;
                grid-template-rows: auto 2px auto;
                gap: 2rem 0;
            }

            .sv-partition {
                width: 100%;
                height: 2px;
                background: linear-gradient(to right,
                        transparent,
                        rgba(37, 109, 12, 0.5) 30%,
                        rgba(37, 109, 12, 0.5) 70%,
                        transparent);
            }
        }

        /* ═══════════════════════════════════════════
           SERVICES SECTION — CLEAN REBUILD
        ═══════════════════════════════════════════ */

        /* Remove old sv-card min-height from services context */
        #services .sv-card {
            min-height: unset;
        }

        /* Section background fix — keep existing dark bg */
        #services {
            position: relative;
        }

        /* ── HEADER ── */
        .sv-hd {
            margin-bottom: 2rem;
        }

        .sv-hd-sub {
            font-size: 1.45rem;
            color: #f0ede8;
            max-width: 520px;
            margin-top: .5rem;
        }

        /* ── SPLIT GRID ── */
        .svc-split {
            display: grid;
            grid-template-columns: 1fr 24px 1fr;
            gap: 0;
            align-items: center;
            min-height: 360px;
        }

        /* ── LEFT PANEL ── */
        .svc-left {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            position: relative;
            z-index: 5;
        }

        /* The slider box — FIXED HEIGHT, clips overflow */
        .svc-slider-box {
            position: relative;
            height: 280px;
            overflow: hidden;
        }

        /* Each card — absolutely stacked, only active one shows */
        .svc-card {
            position: absolute !important;
            inset: 0;
            display: flex;
            flex-direction: column;
            padding: 2rem 2rem 1.5rem;
            border-radius: 1.5rem;
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(37, 109, 12, 0.15);
            box-shadow:
                0 4px 24px rgba(15, 28, 46, 0.10),
                0 1px 4px rgba(15, 28, 46, 0.06);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            min-height: unset !important;
            overflow: hidden;
            /* hidden by default */
            opacity: 0;
            transform: translateX(60px);
            pointer-events: none;
            transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Coloured top accent bar */
        .svc-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            border-radius: 1.5rem 1.5rem 0 0;
            background: linear-gradient(90deg, #256d0c, #256d0c, #256d0c);
        }

        /* Active card */
        .svc-card-active {
            opacity: 1 !important;
            transform: translateX(0) !important;
            pointer-events: all !important;
        }

        /* Card entering from right */
        .svc-card-enter-right {
            opacity: 0 !important;
            transform: translateX(60px) !important;
            pointer-events: none !important;
        }

        /* Card entering from left */
        .svc-card-enter-left {
            opacity: 0 !important;
            transform: translateX(-60px) !important;
            pointer-events: none !important;
        }

        /* Card exiting to left */
        .svc-card-exit-left {
            opacity: 0 !important;
            transform: translateX(-60px) !important;
            pointer-events: none !important;
        }

        /* Card exiting to right */
        .svc-card-exit-right {
            opacity: 0 !important;
            transform: translateX(60px) !important;
            pointer-events: none !important;
        }

        .svc-card-num {
            font-size: .7rem;
            letter-spacing: .22em;
            color: #256d0c;
            font-weight: 700;
            margin-bottom: .8rem;
        }

        .svc-card-icon {
            font-size: 2.2rem;
            margin-bottom: .8rem;
            line-height: 1;
        }

        .svc-card-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: #0f1c2e;
            margin-bottom: .6rem;
            line-height: 1.3;
        }

        .svc-card-desc {
            font-size: .88rem;
            line-height: 1.75;
            color: #4a5568;
        }

        .svc-card-cta {
            margin-top: auto;
            padding-top: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
        }

        .svc-card-learn {
            font-size: .8rem;
            font-weight: 600;
            letter-spacing: .08em;
            color: #256d0c;
            opacity: 0;
            transform: translateY(6px);
            transition: opacity .3s ease, transform .3s ease;
            flex-shrink: 0;
            text-shadow: none;
        }

        .svc-card:hover .svc-card-learn,
        .svc-card-active .svc-card-learn {
            opacity: 1;
            transform: translateY(0);
        }

        .svc-card-book {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            background: linear-gradient(135deg, #256d0c 0%, #1e6060 100%);
            color: #fff;
            font-size: .78rem;
            font-weight: 600;
            letter-spacing: .06em;
            padding: .5rem 1.1rem;
            border-radius: .6rem;
            border: none;
            cursor: pointer;
            font-family: inherit;
            text-decoration: none;
            flex-shrink: 0;
            opacity: 0;
            transform: translateY(6px);
            transition: opacity .3s ease, transform .3s ease, background .2s ease, box-shadow .2s ease;
            box-shadow: 0 2px 12px rgba(37, 109, 12, 0.30);
            pointer-events: none;
        }

        .svc-card:hover .svc-card-book,
        .svc-card-active .svc-card-book {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }

        .svc-card-book:hover {
            background: linear-gradient(135deg, #33999a 0%, #247070 100%);
            box-shadow: 0 4px 20px rgba(37, 109, 12, 0.50);
            transform: translateY(-1px) !important;
        }

        .svc-card-book svg {
            flex-shrink: 0;
        }

        /* ── BEFORE / AFTER SLIDER ── */
        .ba-slider-wrap {
            margin-top: 1rem;
            border-radius: .65rem;
            overflow: hidden;
            position: relative;
            user-select: none;
        }

        .ba-labels {
            display: flex;
            justify-content: space-between;
            margin-bottom: .4rem;
        }

        .ba-lbl {
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: .2rem .55rem;
            border-radius: 4px;
        }

        .ba-lbl-before {
            background: rgba(180, 80, 80, .18);
            color: #e06060;
        }

        .ba-lbl-after {
            background: rgba(37, 109, 12, .18);
            color: #256d0c;
        }

        .ba-slider {
            position: relative;
            width: 100%;
            height: 140px;
            border-radius: .65rem;
            overflow: hidden;
            cursor: ew-resize;
            border: 1px solid rgba(255, 255, 255, .08);
        }

        .ba-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            display: block;
        }

        .ba-before-clip {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 50%;
            overflow: hidden;
            z-index: 2;
        }

        .ba-before-clip .ba-img {
            position: absolute;
            top: 0;
            left: 0;
            /* must match full slider width so crop is identical to the after image */
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
            object-position: center center;
            max-width: none;
        }

        .ba-handle {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 100%;
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            pointer-events: none;
        }

        .ba-handle-line {
            flex: 1;
            width: 2px;
            background: rgba(255, 255, 255, .75);
        }

        .ba-handle-btn {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--teal);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            box-shadow: 0 2px 12px rgba(37, 109, 12, .5);
            flex-shrink: 0;
        }

        /* ── NAV ROW ── */
        .svc-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            position: relative;
            z-index: 10;
        }

        .svc-arrow {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.85);
            background: rgba(255, 255, 255, 0.18);
            color: #ffffff;
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .25s, border-color .25s, transform .2s, color .25s;
            flex-shrink: 0;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        .svc-arrow:hover {
            background: #256d0c;
            border-color: #256d0c;
            color: #ffffff;
            transform: scale(1.1);
        }

        .svc-dots-row {
            display: flex;
            gap: 7px;
            align-items: center;
        }

        .svc-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
            display: inline-block;
        }

        .svc-dot-on {
            background: #ffffff;
            transform: scale(1.5);
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
        }

        /* ── CENTRE DIVIDER ── */
        .svc-divider {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            min-height: 320px;
            justify-content: center;
            gap: 0;
        }

        .svc-divider-line {
            flex: 1;
            width: 1.5px;
            background: linear-gradient(to bottom,
                    transparent,
                    rgba(37, 109, 12, 0.5) 20%,
                    rgba(37, 109, 12, 0.5) 80%,
                    transparent);
        }

        .svc-divider-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #256d0c;
            flex-shrink: 0;
            box-shadow: 0 0 14px rgba(37, 109, 12, 0.9);
            animation: divDotPulse 2s ease-in-out infinite;
        }

        @keyframes divDotPulse {

            0%,
            100% {
                box-shadow: 0 0 8px rgba(37, 109, 12, 0.6);
                transform: scale(1);
            }

            50% {
                box-shadow: 0 0 20px rgba(37, 109, 12, 1);
                transform: scale(1.35);
            }
        }

        /* ── RIGHT PANEL ── */
        .svc-right {
            display: flex;
            flex-direction: column;
            gap: .9rem;
            align-items: center;
        }

        .svc-compare-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .svc-compare-title {
            font-family: 'Manrope', serif;
            font-size: .95rem;
            color: rgba(255, 255, 255, 0.85);
            flex: 1;
            text-align: center;
        }

        .svc-badge {
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .09em;
            text-transform: uppercase;
            padding: .25rem .7rem;
            border-radius: 2rem;
        }

        .svc-badge-before {
            background: rgba(200, 140, 30, 0.22);
            color: #e0b840;
            border: 1px solid rgba(200, 140, 30, 0.35);
        }

        .svc-badge-after {
            background: rgba(37, 109, 12, 0.22);
            color: #256d0c;
            border: 1px solid rgba(37, 109, 12, 0.4);
        }

        /* ── COMPARE WIDGET ── */
        .svc-compare {
            position: relative;
            width: 100%;
            border-radius: 1.1rem;
            overflow: hidden;
            cursor: ew-resize;
            user-select: none;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
            border: 1px solid rgba(37, 109, 12, 0.2);
            /* Fixed aspect ratio so it never collapses */
            aspect-ratio: 4 / 3;
        }

        /* After image — fills full container */
        .svc-compare-after {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .svc-compare-after img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
            transition: opacity 0.35s ease;
        }

        /* Before image — clipped to left portion */
        .svc-compare-before {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            /* controlled by JS */
            height: 100%;
            overflow: hidden;
            border-right: 2px solid rgba(255, 255, 255, 0.75);
        }

        /* The before img must always be the FULL container width,
           not the clipped div's width — width is set in px by JS on load + resize */
        .svc-compare-before img {
            position: absolute;
            top: 0;
            left: 0;
            /* width set by JS */
            height: 100%;
            object-fit: cover;
            object-position: left center;
            display: block;
            pointer-events: none;
            max-width: none;
            transition: opacity 0.35s ease;
        }

        /* Drag handle */
        .svc-handle {
            position: absolute;
            top: 0;
            left: 50%;
            /* controlled by JS */
            transform: translateX(-50%);
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 5;
            pointer-events: none;
        }

        .svc-handle-bar {
            flex: 1;
            width: 2px;
            background: rgba(255, 255, 255, 0.75);
        }

        .svc-handle-btn {
            width: 38px;
            height: 38px;
            background: var(--teal);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 18px rgba(37, 109, 12, 0.7);
            border: 2px solid rgba(255, 255, 255, 0.35);
            flex-shrink: 0;
            cursor: ew-resize;
        }

        .svc-compare-hint {
            font-size: .72rem;
            color: rgba(255, 255, 255, 0.45);
            text-align: center;
            font-style: italic;
        }

        /* ── LABEL OVERLAYS on compare images ── */
        .svc-compare::before {
            content: 'BEFORE';
            position: absolute;
            top: .6rem;
            left: .6rem;
            background: rgba(0, 0, 0, 0.55);
            color: #e0b840;
            font-size: .6rem;
            font-weight: 700;
            letter-spacing: .1em;
            padding: .2rem .5rem;
            border-radius: .3rem;
            z-index: 4;
            pointer-events: none;
        }

        .svc-compare::after {
            content: 'AFTER';
            position: absolute;
            top: .6rem;
            right: .6rem;
            background: rgba(0, 0, 0, 0.55);
            color: #256d0c;
            font-size: .6rem;
            font-weight: 700;
            letter-spacing: .1em;
            padding: .2rem .5rem;
            border-radius: .3rem;
            z-index: 4;
            pointer-events: none;
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            .svc-split {
                grid-template-columns: 1fr;
                grid-template-rows: auto 24px auto;
                gap: 1.5rem 0;
            }

            .svc-divider {
                flex-direction: row;
                min-height: unset;
                height: 1.5px;
                width: 100%;
            }

            .svc-divider-line {
                flex: 1;
                height: 1.5px;
                width: unset;
                background: linear-gradient(to right,
                        transparent,
                        rgba(37, 109, 12, 0.5) 20%,
                        rgba(37, 109, 12, 0.5) 80%,
                        transparent);
            }

            .svc-compare {
                aspect-ratio: 3 / 2;
            }
        }

        /* ═══════════════════════════════════════════════════════
           HIGHLIGHTED WORDS — TEAL / VIOLET THEME
        ═══════════════════════════════════════════════════════ */
        :root {
            --hl-violet-deep: #256d0c;
            --hl-violet-mid: #256d0c;
            --hl-violet-lt: #256d0c;
            --hl-teal-deep: #1a5c00;
            --hl-teal-mid: #256d0c;
        }

        /* ── PRIMARY HIGHLIGHT ── */
        mark.hl {
            background: transparent !important;
            background-image: none !important;
            -webkit-background-clip: unset;
            background-clip: unset;
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            position: relative;
            display: inline;
            font-style: italic;
            font-weight: 700;
        }

        mark.hl::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 2px;
            background: #256d0c;
            border-radius: 2px;
            opacity: 0.5;
        }

        /* ── SECONDARY HIGHLIGHT ── */
        mark.hl2 {
            background: transparent !important;
            background-image: none !important;
            -webkit-background-clip: unset;
            background-clip: unset;
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            position: relative;
            display: inline;
            font-style: italic;
            font-weight: 700;
        }

        mark.hl2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 2px;
            background: #256d0c;
            border-radius: 2px;
            opacity: 0.5;
        }

        /* ── ON LIGHT BACKGROUNDS ── */
        mark.hl-dark {
            background: transparent !important;
            background-image: none !important;
            -webkit-background-clip: unset;
            background-clip: unset;
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            font-style: italic;
            font-weight: 700;
        }

        /* ── ON LIGHT BACKGROUNDS: secondary ── */
        mark.hl2-dark {
            background: transparent !important;
            background-image: none !important;
            -webkit-background-clip: unset;
            background-clip: unset;
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            font-style: italic;
            font-weight: 700;
        }

        /* ── CTA white highlight ── */
        mark.hl-white {
            background: transparent !important;
            background-image: none !important;
            -webkit-background-clip: unset;
            background-clip: unset;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            font-style: italic;
            font-weight: 700;
        }

        /* ── Hero pill badges ── */
        mark.pill-hl {
            background: rgba(37, 109, 12, 0.12);
            color: #256d0c;
            border: 1px solid rgba(37, 109, 12, 0.28);
            border-radius: 4px;
            padding: 0 5px;
            font-style: normal;
            -webkit-text-fill-color: #256d0c;
        }

        mark.pill-hl2 {
            background: rgba(37, 109, 12, 0.12);
            color: #256d0c;
            border: 1px solid rgba(37, 109, 12, 0.28);
            border-radius: 4px;
            padding: 0 5px;
            font-style: normal;
            -webkit-text-fill-color: #256d0c;
        }

        /* Inside h-pills: no box, just green text */
        .h-pill mark.pill-hl,
        .h-pill mark.pill-hl2 {
            background: none !important;
            border: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
        }

        /* ── Shimmer pulse animation — REMOVED, no glow ── */
        mark.hl,
        mark.hl-dark,
        mark.hl-white,
        mark.hl2,
        mark.hl2-dark {
            animation: none;
        }

        /* Subtle underline — no animation, no glow */
        mark.hl::after,
        mark.hl2::after {
            box-shadow: none;
        }

        /* ══════════════════════════════════════════════════════════
           REDESIGNED APPOINTMENT SECTION
        ══════════════════════════════════════════════════════════ */
        #appointment {
            background: linear-gradient(135deg, #0f1c2e 0%, #162032 40%, #12243a 70%, #0f1c2e 100%);
            position: relative;
            overflow: hidden;
        }

        #appointment::before,
        #appointment::after {
            display: none;
        }

        /* Outer grid */
        .ap2-outer {
            display: grid;
            grid-template-columns: 1fr 1.25fr;
            width: 100%;
        }

        /* ── LEFT PANEL ── */
        .ap2-left {
            background: #ffffff;
            border-right: 1px solid #e8ede8;
            display: flex;
            align-items: center;
            padding: 3rem 4vw;
        }

        .ap2-left-inner {
            width: 100%;
        }

        .ap2-heading {
            font-family: 'Manrope', serif;
            font-size: clamp(2rem, 3.5vw, 3rem);
            font-weight: 400;
            color: #1a2e1a;
            line-height: 1.12;
            margin: 0.8rem 0 1.2rem;
            letter-spacing: -0.01em;
        }

        .ap2-lead {
            font-size: 0.92rem;
            color: #6b7a6b;
            line-height: 1.85;
            margin-bottom: 2rem;
        }

        /* Info rows */
        .ap2-info-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-bottom: 2rem;
        }

        .ap2-row {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            padding: 1rem 1.25rem;
            border-radius: 0.85rem;
            background: #f4f7f4;
            border: 1px solid #e2e8e2;
            transition: border-color 0.2s, background 0.2s;
        }

        .ap2-row:hover {
            border-color: #256d0c;
            background: #f0f7ee;
        }

        .ap2-ico {
            width: 38px;
            height: 38px;
            border-radius: 0.65rem;
            background: #eaf4e6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
            border: 1px solid #d0e8c8;
        }

        .ap2-row-lbl {
            font-size: 0.65rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #256d0c;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }

        .ap2-row div,
        .ap2-row a {
            font-size: 0.87rem;
            color: #2d3b2d;
            line-height: 1.55;
        }

        .ap2-row a:hover {
            color: #256d0c;
        }

        .ap2-row-sub {
            font-size: 0.75rem;
            color: #8a9a8a;
            margin-top: 2px;
        }

        /* Trust row */
        .ap2-trust {
            display: flex;
            gap: 1.5rem;
            padding-top: 1.2rem;
            border-top: 1px solid #e2e8e2;
        }

        .ap2-trust-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .ap2-trust-num {
            font-family: 'Manrope', serif;
            font-size: 1.5rem;
            color: #256d0c;
            line-height: 1;
        }

        .ap2-trust-item span:last-child {
            font-size: 0.72rem;
            color: #7a8a7a;
            letter-spacing: 0.05em;
        }

        /* ── RIGHT FORM PANEL ── */
        .ap2-right {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3rem 4vw;
            background: #f7f9f7;
        }

        .ap2-form-wrap {
            width: 100%;
            max-width: 640px;
            background: #ffffff;
            border: 1px solid #e2e8e2;
            border-radius: 1.25rem;
            padding: 2.5rem 2.5rem 2rem;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        }

        /* Form header */
        .ap2-form-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1.2rem;
            border-bottom: 1px solid #edf2ed;
        }

        .ap2-form-icon {
            width: 46px;
            height: 46px;
            background: #eaf4e6;
            border-radius: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            border: 1px solid #d0e8c8;
            flex-shrink: 0;
        }

        .ap2-form-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: #1a2e1a;
            letter-spacing: -0.01em;
        }

        .ap2-form-sub {
            font-size: 0.78rem;
            color: #8a9a8a;
            margin-top: 2px;
        }

        /* Step indicator */
        .ap2-steps {
            display: flex;
            align-items: center;
            gap: 0;
            margin-bottom: 1.8rem;
        }

        .ap2-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .ap2-step span {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #f0f4f0;
            border: 1px solid #d8e4d8;
            color: #a0b0a0;
            font-size: 0.75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .ap2-step small {
            font-size: 0.62rem;
            color: #a0b0a0;
            letter-spacing: 0.05em;
        }

        .ap2-step-done span {
            background: #eaf4e6;
            border-color: #256d0c;
            color: #256d0c;
        }

        .ap2-step-active span {
            background: #256d0c;
            border-color: transparent;
            color: #fff;
            box-shadow: 0 4px 12px rgba(37, 109, 12, 0.30);
        }

        .ap2-step-active small {
            color: #256d0c;
            font-weight: 600;
        }

        .ap2-step-line {
            flex: 1;
            height: 1px;
            background: #e2e8e2;
            margin: 0 8px;
            margin-bottom: 18px;
        }

        /* Fields */
        .ap2-fields {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1.4rem;
        }

        .ap2-field-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .ap2-field-full {
            grid-column: 1/-1;
        }

        .ap2-field-group {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .ap2-label {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #4a6a4a;
        }

        .ap2-req {
            color: #256d0c;
        }

        .ap2-input-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }

        .ap2-input-icon {
            position: absolute;
            left: 0.9rem;
            font-size: 0.95rem;
            pointer-events: none;
            z-index: 1;
        }

        .ap2-input {
            width: 100%;
            padding: 0.78rem 0.9rem 0.78rem 2.4rem;
            background: #f8faf8;
            border: 1px solid #dce8dc;
            border-radius: 0.65rem;
            color: #1a2e1a;
            font-family: inherit;
            font-size: 0.88rem;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
            appearance: none;
            -webkit-appearance: none;
        }

        .ap2-input::placeholder {
            color: #b0c0b0;
        }

        .ap2-input:focus {
            border-color: #256d0c;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(37, 109, 12, 0.10);
        }

        .ap2-input[type="date"] {
            color-scheme: light;
        }

        .ap2-select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23256d0c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            padding-right: 2.5rem;
            cursor: pointer;
        }

        .ap2-select option {
            background: #ffffff;
            color: #1a2e1a;
        }

        /* Submit button */
        .ap2-submit {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            padding: 1rem 1.5rem;
            background: #256d0c;
            border: none;
            border-radius: 0.75rem;
            color: #fff;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            cursor: pointer;
            transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 16px rgba(37, 109, 12, 0.25);
        }

        .ap2-submit:hover {
            background: #1e5c0a;
            transform: translateY(-1px);
            box-shadow: 0 8px 24px rgba(37, 109, 12, 0.35);
        }

        .ap2-submit:active {
            transform: translateY(0);
        }

        /* Privacy note */
        .ap2-privacy {
            text-align: center;
            font-size: 0.72rem;
            color: #a0b0a0;
            margin-top: 0.9rem;
        }

        /* Override old .f-ok to work inside new layout */
        .ap2-right .f-ok {
            display: none;
            text-align: center;
            padding: 3rem 2rem;
            width: 100%;
            max-width: 520px;
        }

        .ap2-right .f-ok h3 {
            color: #1a2e1a;
            font-size: 1.4rem;
            margin: 1rem 0 0.5rem;
        }

        .ap2-right .f-ok p {
            color: #6b7a6b;
            font-size: 0.88rem;
        }

        .ap2-right .f-ok-ico {
            font-size: 3.5rem;
        }

        /* Responsive */
        @media (max-width: 900px) {
            .ap2-outer {
                grid-template-columns: 1fr;
                min-height: unset;
            }

            .ap2-left {
                border-right: none;
                border-bottom: 1px solid #e8ede8;
                padding: 3rem 1.5rem;
            }

            .ap2-right {
                padding: 2.5rem 1.5rem;
            }

            .ap2-form-wrap {
                padding: 1.8rem 1.5rem;
            }

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

        /* ═══════════════════════════════════════════════════
           ENHANCED CINEMATIC SCROLL ANIMATIONS v2
        ═══════════════════════════════════════════════════ */

        /* ── MAGNETIC SLIDE FROM SIDES ── */
        .cin-left {
            opacity: 0;
            transform: translate3d(-80px, 30px, 0) scale(0.94);
            filter: blur(5px);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s ease;
        }

        .cin-right {
            opacity: 0;
            transform: translate3d(80px, 30px, 0) scale(0.94);
            filter: blur(5px);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s ease;
        }

        .cin-left.cin-on,
        .cin-right.cin-on {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            filter: blur(0);
        }

        /* ── DEPTH ZOOM IN ── */
        .cin-zoom {
            opacity: 0;
            transform: scale(0.78) translateY(40px);
            filter: blur(10px);
            transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease;
        }

        .cin-zoom.cin-on {
            opacity: 1;
            transform: scale(1) translateY(0);
            filter: blur(0);
        }

        /* ── ROTATE DROP ── */
        .cin-drop {
            opacity: 0;
            transform: translate3d(0, -40px, 0) rotate(-4deg) scale(0.9);
            filter: blur(4px);
            transform-origin: top center;
            transition: opacity 0.9s cubic-bezier(0.34, 1.26, 0.64, 1), transform 0.9s cubic-bezier(0.34, 1.26, 0.64, 1), filter 0.8s ease;
        }

        .cin-drop.cin-on {
            opacity: 1;
            transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
            filter: blur(0);
        }

        /* ── SEQUENTIAL STAGGER ── */
        .cin-stagger>* {
            opacity: 0;
            transform: translate3d(0, 55px, 0) scale(0.92);
            filter: blur(4px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
        }

        .cin-stagger.cin-on>*:nth-child(1) {
            opacity: 1;
            transform: none;
            filter: blur(0);
            transition-delay: 0.05s;
        }

        .cin-stagger.cin-on>*:nth-child(2) {
            opacity: 1;
            transform: none;
            filter: blur(0);
            transition-delay: 0.12s;
        }

        .cin-stagger.cin-on>*:nth-child(3) {
            opacity: 1;
            transform: none;
            filter: blur(0);
            transition-delay: 0.19s;
        }

        .cin-stagger.cin-on>*:nth-child(4) {
            opacity: 1;
            transform: none;
            filter: blur(0);
            transition-delay: 0.26s;
        }

        .cin-stagger.cin-on>*:nth-child(5) {
            opacity: 1;
            transform: none;
            filter: blur(0);
            transition-delay: 0.33s;
        }

        .cin-stagger.cin-on>*:nth-child(6) {
            opacity: 1;
            transform: none;
            filter: blur(0);
            transition-delay: 0.40s;
        }

        .cin-stagger.cin-on>*:nth-child(7) {
            opacity: 1;
            transform: none;
            filter: blur(0);
            transition-delay: 0.47s;
        }

        .cin-stagger.cin-on>*:nth-child(8) {
            opacity: 1;
            transform: none;
            filter: blur(0);
            transition-delay: 0.54s;
        }

        /* ── SECTION ACCENT LINE ── */
        .cin-line {
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #2d0a6e, #256d0c, #064e3b);
            border-radius: 3px;
            transition: width 1.3s cubic-bezier(0.16, 1, 0.3, 1);
            margin-bottom: 1rem;
            display: block;
        }

        .cin-line.cin-on {
            width: 80px;
        }

        /* Center the cin-line when inside centered headers */
        .sv-hd .cin-line,
        #treatments .wrap .cin-line,
        #patient-journey .cin-line,
        #why-us .cin-line,
        #branches .cin-line {
            margin-left: auto;
            margin-right: auto;
        }

        /* ── BORDER GLOW ON ENTRY ── */
        .cin-border-glow {
            border: 1px solid transparent;
            transition: border-color 1.4s ease, box-shadow 1.4s ease;
        }

        .cin-border-glow.cin-on {
            border-color: rgba(37, 109, 12, 0.18);
            box-shadow: inset 0 0 60px rgba(45, 10, 110, 0.08);
        }

        /* ══════════════════════════════════════════════════════
           FAQ SECTION
        ══════════════════════════════════════════════════════ */
        #faq {
            background: linear-gradient(160deg, #f8fbff 0%, #eef4f9 100%);
            position: relative;
            overflow: visible;
            display: flex;
            align-items: center;
            padding: 3rem 0;
            border-top: 1px solid var(--border);
        }

        #faq::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(37, 109, 12, .06) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        #faq .wrap {
            width: 100%;
        }

        .faq-inner {
            display: grid;
            grid-template-columns: 1fr 1.7fr;
            gap: 3.5rem;
            align-items: start;
            position: relative;
            z-index: 1;
        }

        .faq-left {
            position: sticky;
            top: calc(var(--nh) + 1.5rem);
            bottom: 2rem;
            max-height: calc(100vh - var(--nh) - 3rem);
            overflow: visible;
        }

        .faq-tag {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-size: .72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .12em;
            color: var(--teal);
            margin-bottom: 1rem;
        }

        .faq-tag::before {
            content: '';
            display: block;
            width: 24px;
            height: 2px;
            background: var(--teal);
            border-radius: 2px;
        }

        .faq-heading {
            font-family: 'Manrope', serif;
            font-size: clamp(1.8rem, 3vw, 2.6rem);
            font-weight: 400;
            color: var(--navy);
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        .faq-heading em {
            font-style: italic;
            color: var(--teal);
        }

        .faq-lead {
            font-size: .88rem;
            color: var(--text-muted);
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }

        .faq-cta-link {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-size: .88rem;
            font-weight: 600;
            color: var(--teal);
            border-bottom: 1.5px solid rgba(37, 109, 12, .25);
            padding-bottom: .15rem;
            transition: border-color .2s, gap .2s;
        }

        .faq-cta-link:hover {
            border-color: var(--teal);
            gap: .75rem;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

        .faq-item {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: .875rem;
            overflow: hidden;
            transition: border-color .25s, box-shadow .25s;
        }

        .faq-item.open {
            border-color: rgba(37, 109, 12, .35);
            box-shadow: 0 4px 24px rgba(37, 109, 12, .08);
        }

        .faq-q-text {
            font-size: .92rem;
            font-weight: 600;
            color: var(--text);
            line-height: 1.4;
            padding-left: 0;
            margin-left: 0;
            text-indent: 0;
            display: block;
            word-spacing: normal;
            white-space: normal;
        }

        .faq-q {
            width: 100%;
            background: none;
            border: none;
            padding: .9rem 1.2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            cursor: pointer;
            text-align: left;
            font-family: inherit;
            padding-inline-start: 1.2rem;
            padding-inline-end: 1.2rem;
            margin: 0;
            -webkit-appearance: none;
            appearance: none;
        }

        .faq-item.open .faq-q-text {
            color: var(--teal);
        }

        .faq-icon {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--gray1);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: .85rem;
            color: var(--gray4);
            transition: background .25s, color .25s, transform .35s cubic-bezier(0.34, 1.26, 0.64, 1);
        }

        .faq-item.open .faq-icon {
            background: var(--teal);
            color: #fff;
            border-color: var(--teal);
            transform: rotate(45deg);
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .5s cubic-bezier(0.25, 1, 0.5, 1), padding .4s ease;
            padding: 0 1.2rem;
        }

        .faq-item.open .faq-a {
            max-height: 600px;
            padding: 0 1.2rem 1rem;
        }

        .faq-a p {
            font-size: .85rem;
            color: var(--text-muted);
            line-height: 1.7;
        }

        .faq-a ul {
            margin-top: .6rem;
            padding-left: 1.1rem;
            display: flex;
            flex-direction: column;
            gap: .3rem;
        }

        .faq-a ul li {
            font-size: .83rem;
            color: var(--text-muted);
            line-height: 1.55;
        }

        .faq-a ul li::marker {
            color: var(--teal);
        }

        /* ── Section expand tweaks ── */
        /* Make premium-about bigger */
        .premium-about {
            padding: 4.5rem 8% !important;
        }

        /* Services more breathing room */
        #services .wrap {
            padding-top: 5rem;
            padding-bottom: 5rem;
        }

        /* Stats bigger */
        #stats .wrap-sm {
            padding-top: 5rem;
            padding-bottom: 5rem;
        }

        .st-card {
            padding: 3rem 2rem;
        }

        .st-n {
            font-size: 3.8rem;
        }

        /* Doctors more space */
        #doctors {
            height: auto !important;
            max-height: none !important;
            min-height: unset;
            padding-bottom: 1rem;
        }

        /* Testimonials more space */
        #testimonials .wrap {
            padding-top: 5rem;
            padding-bottom: 5rem;
        }

        /* Appointment more space */
        #appointment .wrap {
            padding-top: 5rem;
            padding-bottom: 5rem;
        }

        /* FAQ responsive */
        @media (max-width: 900px) {
            #faq {
                align-items: flex-start;
                padding: 3rem 0;
            }

            .faq-inner {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .faq-left {
                position: static;
            }
        }
    


        /* #hexStage styles in main hero CSS block */
        /* Prevent body scroll flash during hero */
        body.hero-active {
            overflow: hidden;
        }
    


        /* ── Count-up glow removed ── */
        @keyframes gsapCountGlow {
            0% {
                text-shadow: none;
            }

            50% {
                text-shadow: none;
            }

            100% {
                text-shadow: none;
            }
        }

        .gsap-count-glow {
            animation: gsapCountGlow 0.9s ease;
        }

        /* ── Section shimmer line that sweeps across the top ── */
        .gsap-shimmer-line {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1.5px;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(37, 109, 12, 0) 10%,
                    rgba(37, 109, 12, .7) 50%,
                    rgba(37, 109, 12, .5) 70%,
                    transparent 100%);
            transform: scaleX(0);
            transform-origin: left;
            opacity: 0;
            pointer-events: none;
            z-index: 4;
            will-change: transform, opacity;
        }

        /* ── GSAP will set opacity/transform, override old fade-in defaults ── */
        .gsap-managed {
            opacity: 1 !important;
            transform: none !important;
        }

        /* ── Section enter animation ── */
        /* Sections slide up + fade in as they enter the viewport.
           Uses IntersectionObserver (same system as existing .fade-in).
           No sticky, no GSAP scrub, no transforms on parent sections.  */
        .sec-enter {
            opacity: 0;
            transform: translateY(48px);
            transition:
                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform, opacity;
        }

        .sec-enter.sec-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Stagger delays for sections */
        .sec-enter:nth-child(1) {
            transition-delay: 0s;
        }

        .sec-enter:nth-child(2) {
            transition-delay: 0.05s;
        }

        .sec-enter:nth-child(3) {
            transition-delay: 0.05s;
        }

        .sec-enter:nth-child(4) {
            transition-delay: 0.05s;
        }

        .sec-enter:nth-child(5) {
            transition-delay: 0.05s;
        }

        .sec-enter:nth-child(6) {
            transition-delay: 0.05s;
        }

        .sec-enter:nth-child(7) {
            transition-delay: 0.05s;
        }

        .sec-enter:nth-child(8) {
            transition-delay: 0.05s;
        }

        .sec-enter:nth-child(9) {
            transition-delay: 0.05s;
        }

        /* Section progress dots */
        .section-progress-dot {
            display: none !important;
        }

        .spd-item {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(37, 109, 12, 0.25);
            border: 1px solid rgba(37, 109, 12, 0.5);
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .spd-item.active {
            background: rgba(37, 109, 12, 1);
            transform: scale(1.8);
            box-shadow: 0 0 8px rgba(37, 109, 12, 0.6);
        }

        /* Stats number glow removed */
        @keyframes numGlow {

            0%,
            100% {
                text-shadow: none;
            }

            50% {
                text-shadow: none;
            }
        }

        .st-n.glow-pulse {
            animation: numGlow 1.2s ease-out;
        }

        /* Service card 3D setup */
        .svc-card {
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        /* ╔══════════════════════════════════════════════════════╗
           ║         CLEAN WHITE THEME OVERRIDES                 ║
           ╚══════════════════════════════════════════════════════╝ */

        /* ── BODY & PAGE ─────────────────────────────────────── */
        body {
            background: #ffffff !important;
        }

        .loader {
            background: #ffffff !important;
        }

        .loader-logo,
        .loader-logo-text {
            color: #0f1c2e !important;
        }

        /* ── NAV ─────────────────────────────────────────────── */
        nav {
            background: rgba(255, 255, 255, 0.97) !important;
            box-shadow: 0 1px 0 #d8e0d0 !important;
        }

        nav.sc {
            background: rgba(255, 255, 255, 0.97) !important;
        }

        .n-logo {
            color: #0f1c2e !important;
        }

        .n-links a {
            color: #4a5568 !important;
        }

        .n-links a:hover,
        .n-links a.act,
        nav.sc .n-links a:hover,
        nav.sc .n-links a.act {
            color: #256d0c !important;
        }

        .btn-nav {
            background: #256d0c !important;
            color: #fff !important;
        }

        nav.sc .btn-nav {
            background: #256d0c !important;
        }

        .hbg s,
        nav.m-open .hbg s {
            background: #0f1c2e !important;
        }

        .m-nav {
            background: #ffffff !important;
            border-color: #d8e0d0 !important;
        }

        .m-links a {
            color: #1c1b1b !important;
        }

        .m-links a.act {
            color: #256d0c !important;
        }

        /* ── HERO (scroll-expand video intact) ───────────────── */
        /* No white overlay — video shows through with white text */
        .hex-reveal.show {
            background: linear-gradient(135deg, #060d18 0%, #0a1628 40%, #0d1f10 100%) !important;
        }

        /* Dot pattern — slightly more visible */
        .hex-reveal::before {
            opacity: .035 !important;
            background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 1px, transparent 1px) !important;
            background-size: 32px 32px !important;
        }

        /* Green radial glow — stronger and more present */
        .hex-reveal::after {
            background: radial-gradient(ellipse 75% 90% at 80% 55%, rgba(37, 109, 12, .22), transparent 60%) !important;
        }

        #hexFadeOverlay {
            background: linear-gradient(160deg, #0f1c2e 0%, #162032 55%, #1a3348 100%) !important;
        }

        /* Keep dark tint on background image for readability */
        .hex-bg::after {
            background: rgba(0, 0, 0, 0.52) !important;
        }

        /* All hero text → white */
        .hex-t,
        .orig-hero-h1 {
            color: #ffffff !important;
        }

        .orig-hero-sub {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .h-stat-n {
            color: #ffffff !important;
        }

        .h-stat-l {
            color: rgba(255, 255, 255, 0.75) !important;
        }

        .hero-clinic-name {
            color: #ffffff !important;
        }

        .hero-clinic-sub {
            color: rgba(255, 255, 255, 0.80) !important;
        }

        .h-pill {
            color: rgba(255, 255, 255, 0.85) !important;
            background: rgba(255, 255, 255, 0.12) !important;
        }

        .hii-val {
            color: #ffffff !important;
        }

        .hii-label {
            color: rgba(255, 255, 255, 0.70) !important;
        }

        .hex-hint-text {
            color: #256d0c !important;
        }

        .orig-hero-badge {
            background: rgba(37, 109, 12, 0.20) !important;
            color: #256d0c !important;
            border-color: rgba(37, 109, 12, 0.35) !important;
        }

        .orig-hero-badge-dot {
            background: #256d0c !important;
        }

        /* cineDark overlay → dark fade (keeps video readable) */
        #heroCineDark {
            background: linear-gradient(160deg, rgba(10, 20, 34, 0.85) 0%, rgba(15, 28, 46, 0.75) 100%) !important;
        }

        /* ── TRUST STRIP ──────────────────────────────────────── */
        #trust {
            background: #f5f7f3 !important;
            border-color: #d8e0d0 !important;
        }

        .trust-icon {
            background: #e8f5e0 !important;
        }

        .trust-label {
            color: #4a5568 !important;
        }

        .trust-div {
            background: #d8e0d0 !important;
        }

        /* ── SERVICES section: remove pill boxes, brighten green ── */
        #services {
            background: #f5f7f3 !important;
        }

        #services .s-ttl {
            color: #ffffff !important;
        }

        .sv-hd-sub {
            color: #f0ede8 !important;
        }

        #services mark.pill-hl,
        #services mark.pill-hl2 {
            background: none !important;
            border: none !important;
            padding: 0 !important;
            color: #7dd94f !important;
            -webkit-text-fill-color: #7dd94f !important;
            font-weight: 600;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
        }

        #services mark.hl,
        #services mark.hl2 {
            color: #7dd94f !important;
            -webkit-text-fill-color: #7dd94f !important;
            background: none !important;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        #services mark.hl::after,
        #services mark.hl2::after {
            background: #7dd94f;
        }

        #services .s-lbl {
            color: #7dd94f !important;
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
        }

        #services .s-lbl::before {
            background: #7dd94f !important;
        }

        .svc-card-learn {
            color: #256d0c;
        }

        .svc-card-book {
            background: linear-gradient(135deg, #2d8010 0%, #1a5a08 100%);
            box-shadow: 0 2px 12px rgba(37, 109, 12, 0.30);
        }

        .svc-card-book:hover {
            background: linear-gradient(135deg, #256d0c 0%, #1a5a08 100%) !important;
            box-shadow: 0 4px 20px rgba(37, 109, 12, 0.50) !important;
        }

        /* svc-card icons */
        #services .svc-card-icon svg {
            stroke: #256d0c !important;
        }

        #services .svc-card-icon svg circle[fill="#256d0c"] {
            fill: #256d0c !important;
        }

        /* Service cards: dark glass → white */
        .sv-card {
            background: #ffffff !important;
            outline: 1px solid #d8e0d0 !important;
            box-shadow: 0 4px 20px rgba(15, 28, 46, 0.07), inset 0 3px 0 #256d0c !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .sv-name {
            color: #1c1b1b !important;
        }

        .sv-desc {
            color: #2d3748 !important;
        }

        .sv-num {
            color: #256d0c !important;
        }

        .sv-ico {
            color: #256d0c !important;
        }

        /* Hover: card goes dark green */
        .sv-card:hover {
            background: #0f1c2e !important;
            outline-color: #256d0c !important;
        }

        .sv-card:hover .sv-name {
            color: #ffffff !important;
        }

        .sv-card:hover .sv-desc {
            color: #f0ede8 !important;
        }

        .sv-card:hover .sv-num {
            color: #256d0c !important;
        }

        .sv-card:hover .sv-ico {
            color: #256d0c !important;
        }

        /* ── ABOUT ────────────────────────────────────────────── */
        #about {
            background: #ffffff !important;
        }

        .pab-section {
            background: #ffffff !important;
        }

        .pab-headline {
            color: #1c1b1b !important;
        }

        .pab-headline em {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        .pab-lead {
            color: #4a5568 !important;
        }

        .pab-badge-title {
            color: #0f1c2e !important;
        }

        .pab-stat-num {
            color: #0f1c2e !important;
        }

        .pab-stat-lbl {
            color: #4a5568 !important;
        }

        .pab-pillar-ttl {
            color: #1c1b1b !important;
        }

        .pab-pillar-body {
            color: #4a5568 !important;
        }

        .ab-headline {
            color: #1c1b1b !important;
        }

        .ab-feat-ttl {
            color: #1c1b1b !important;
        }

        .ab-feat-body {
            color: #4a5568 !important;
        }

        .ab-card-n {
            color: #0f1c2e !important;
        }

        .ab-eyebrow {
            background: rgba(37, 109, 12, 0.08) !important;
            color: #256d0c !important;
        }

        .ab-lead mark {
            background: rgba(37, 109, 12, 0.10) !important;
        }

        /* ── TREATMENTS ───────────────────────────────────────── */
        #treatments {
            background: linear-gradient(170deg, #0d2010 0%, #1a3a18 40%, #0f2810 100%) !important;
        }

        #treatments .s-ttl {
            color: #ffffff !important;
        }

        #treatments .s-ttl mark.hl,
        #treatments .s-ttl mark.hl2 {
            color: #6fcf4a !important;
            -webkit-text-fill-color: #6fcf4a !important;
            background: none !important;
        }

        #treatments .s-lbl {
            color: #6fcf4a !important;
            background: rgba(111, 207, 74, 0.15) !important;
            border-color: rgba(111, 207, 74, 0.45) !important;
        }

        #treatments .s-lbl::before {
            display: none !important;
        }

        .tr-sub {
            color: rgba(255, 255, 255, 0.60) !important;
        }

        .tr-card-name {
            color: #ffffff !important;
        }

        .tr-card-label {
            color: #6fcf4a !important;
        }

        .tr-card-desc {
            color: rgba(255, 255, 255, 0.70) !important;
        }

        .tr-card-cta {
            color: #6fcf4a !important;
        }

        .tr-card-num {
            color: rgba(255, 255, 255, 0.12) !important;
        }

        .tr-tip-tag {
            color: rgba(255, 255, 255, 0.65) !important;
        }

        .tr-card-tip-title {
            color: #ffffff !important;
        }

        /* ── STATS MARQUEE (dark strip) ─────────────────────── */
        /* stays dark — no override needed */

        /* ── PATIENT JOURNEY ──────────────────────────────────── */
        #patient-journey {
            background: #f5f7f3 !important;
        }

        #patient-journey .s-ttl {
            color: #1c1b1b !important;
        }

        #patient-journey .s-ttl em {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        #patient-journey .s-lbl {
            color: #256d0c !important;
        }

        #patient-journey .s-lbl::before {
            background: #256d0c !important;
        }

        .pj-step-num {
            color: #256d0c !important;
            border-color: rgba(37, 109, 12, 0.3) !important;
        }

        .pj-step-final .pj-step-num {
            background: #256d0c !important;
            color: #fff !important;
            border-color: #256d0c !important;
        }

        .pj-step-ttl {
            color: #1c1b1b !important;
        }

        .pj-step-body {
            color: #4a5568 !important;
        }

        /* ── WHY US ───────────────────────────────────────────── */
        #why-us {
            background: transparent !important;
        }

        #why-us .s-ttl {
            color: #ffffff !important;
        }

        #why-us .s-ttl em {
            color: #6fcf4a !important;
            -webkit-text-fill-color: #6fcf4a !important;
            font-style: italic;
        }

        #why-us .s-ttl mark.hl,
        #why-us .s-ttl mark.hl2 {
            color: #6fcf4a !important;
            -webkit-text-fill-color: #6fcf4a !important;
            background: none !important;
        }

        #why-us .s-lbl {
            color: #6fcf4a !important;
        }

        #why-us .s-lbl::before {
            background: #6fcf4a !important;
        }

        #why-us .wu-hd-sub {
            color: rgba(255, 255, 255, 0.72) !important;
        }

        /* ── Trust layout: image + feature grid ── */
        .wu-trust-layout {
            display: grid;
            grid-template-columns: 1fr 1.45fr;
            gap: 3rem;
            align-items: stretch;
        }

        .wu-trust-img-col {
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
        }

        .wu-trust-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
            min-height: 420px;
        }

        .wu-trust-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

        .wu-trust-feature {
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 0.875rem;
            padding: 1.4rem 1.4rem 1.2rem;
            backdrop-filter: blur(8px);
            transition: background 0.25s, border-color 0.25s;
        }

        .wu-trust-feature:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(94, 203, 58, 0.35);
        }

        .wu-tf-title {
            font-size: 1rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 0.75rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #256d0c;
            display: inline-block;
        }

        .wu-tf-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }

        .wu-tf-list li {
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.82);
            padding-left: 1.1rem;
            position: relative;
            line-height: 1.5;
        }

        .wu-tf-list li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: #256d0c;
            font-size: 0.9rem;
        }

        /* Responsive */
        @media (max-width: 900px) {
            .wu-trust-layout {
                grid-template-columns: 1fr;
            }

            .wu-trust-img-col {
                max-height: 320px;
            }

            .wu-trust-photo {
                min-height: 280px;
            }
        }

        @media (max-width: 580px) {
            .wu-trust-features {
                grid-template-columns: 1fr;
            }
        }

        /* ── DENTAL TIMELINE ──────────────────────────────────── */
        #dental-timeline {
            background: #f5f7f3 !important;
        }

        .dtl-header .s-ttl {
            color: #1c1b1b !important;
        }

        .dtl-header .s-ttl em {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        .dtl-header .s-lbl {
            color: #256d0c !important;
        }

        .dtl-header .s-lbl::before {
            background: #256d0c !important;
        }

        .dtl-h-card {
            background: #ffffff !important;
            border-color: #d8e0d0 !important;
            color: #1c1b1b !important;
        }

        .dtl-h-card.dtl-h-card-active {
            background: #ffffff !important;
            border-color: #d8e0d0 !important;
        }

        .dtl-h-card.dtl-h-card-active .dtl-year {
            color: var(--teal) !important;
        }

        /* ── DOCTORS (keep dark) ──────────────────────────────── */
        #doctors {
            background: linear-gradient(135deg, #0f1c2e 0%, #162032 40%, #12243a 70%, #0f1c2e 100%) !important;
        }

        #doctors .s-ttl {
            color: #ffffff !important;
        }

        #doctors .s-ttl mark.hl2 {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        #doctors .s-lbl {
            color: #256d0c !important;
        }

        #doctors .s-lbl::before {
            background: #256d0c !important;
        }

        .dr-hd-sub {
            color: rgba(255, 255, 255, 0.65) !important;
        }

        .dr-name {
            color: #ffffff !important;
        }

        .dr-spec {
            color: #256d0c !important;
        }

        .dr-stat-num {
            color: #256d0c !important;
        }

        .dr-badge {
            background: rgba(37, 109, 12, 0.15) !important;
            color: #256d0c !important;
        }

        /* ── TESTIMONIALS ─────────────────────────────────────── */
        #testimonials {
            background: #f5f7f3 !important;
        }

        #testimonials .s-ttl {
            color: #1c1b1b !important;
            text-align: center !important;
        }

        #testimonials .s-ttl mark.hl {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        #testimonials .s-lbl {
            color: #256d0c !important;
            text-align: center !important;
            justify-content: center !important;
        }

        #testimonials .s-lbl::before {
            background: #256d0c !important;
        }

        .ts-card {
            background: #ffffff !important;
            border: 1px solid #d8e0d0 !important;
            box-shadow: 0 2px 12px rgba(15, 28, 46, 0.06) !important;
        }

        .ts-body {
            color: #2d3748 !important;
        }

        .ts-name {
            color: #1c1b1b !important;
        }

        .ts-role {
            color: #256d0c !important;
        }

        .ts-av {
            background: linear-gradient(135deg, #0f1c2e, #256d0c) !important;
            color: #fff !important;
        }

        .ts-btn {
            background: #ffffff !important;
            color: #1c1b1b !important;
            border-color: #d8e0d0 !important;
        }

        .ts-btn:hover {
            background: #256d0c !important;
            color: #fff !important;
        }

        /* ── APPOINTMENT (navy theme — matches doctors) ─────────── */
        #appointment {
            background:
                linear-gradient(135deg, rgba(15, 28, 46, 0.92) 0%, rgba(22, 32, 50, 0.88) 40%, rgba(18, 36, 58, 0.9) 70%, rgba(15, 28, 46, 0.94) 100%),
                url('assets/images/clinic-bg.webp') !important;
            background-size: cover, cover !important;
            background-position: center, center !important;
            background-repeat: no-repeat, no-repeat !important;
            background-attachment: scroll, fixed !important;
        }

        #appointment .s-ttl {
            color: #ffffff !important;
        }

        #appointment .s-lbl {
            color: #a8f788 !important;
        }

        #appointment .s-lbl::before {
            background: #a8f788 !important;
        }

        .ap2-headline {
            color: #ffffff !important;
        }

        .ap2-tagline,
        .ap2-desc,
        .ap2-sub {
            color: rgba(220, 230, 240, 0.78) !important;
        }

        .ap2-left {
            background: transparent !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        .ap2-right {
            background: transparent !important;
        }

        .ap2-row {
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        .ap2-row:hover {
            border-color: rgba(168, 247, 136, 0.6) !important;
            background: rgba(168, 247, 136, 0.08) !important;
        }

        .ap2-ico {
            background: rgba(168, 247, 136, 0.12) !important;
            border-color: rgba(168, 247, 136, 0.3) !important;
        }

        .ap2-row-lbl {
            color: #a8f788 !important;
        }

        .ap2-row div,
        .ap2-row a {
            color: rgba(230, 238, 245, 0.92) !important;
        }

        .ap2-row a:hover {
            color: #a8f788 !important;
        }

        .ap2-row-sub {
            color: rgba(200, 212, 224, 0.6) !important;
        }

        .ap2-heading {
            color: #ffffff !important;
        }

        .ap2-lead {
            color: rgba(220, 230, 240, 0.78) !important;
        }

        .ap2-heading .hl2 {
            color: #a8f788 !important;
        }

        .ap2-form-title {
            color: #ffffff !important;
        }

        .ap2-form-wrap {
            background: linear-gradient(180deg, rgba(15, 28, 46, 0.82) 0%, rgba(22, 32, 50, 0.8) 100%) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 8px 48px rgba(0, 0, 0, 0.45) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
        }

        .ap2-form-header {
            border-bottom-color: rgba(255, 255, 255, 0.08) !important;
        }

        .ap2-step span {
            background: rgba(255, 255, 255, 0.06) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
            color: rgba(255, 255, 255, 0.5) !important;
        }

        .ap2-step small {
            color: rgba(255, 255, 255, 0.5) !important;
        }

        .ap2-step-done span {
            background: rgba(168, 247, 136, 0.15) !important;
            border-color: #a8f788 !important;
            color: #a8f788 !important;
        }

        .ap2-step-active span {
            background: #256d0c !important;
            border-color: transparent !important;
            color: #fff !important;
        }

        .ap2-step-active small {
            color: #a8f788 !important;
        }

        .ap2-step-line {
            background: rgba(255, 255, 255, 0.12) !important;
        }

        .ap2-right .f-ok h3 {
            color: #ffffff !important;
        }

        .ap2-right .f-ok p {
            color: rgba(220, 230, 240, 0.7) !important;
        }

        .ap2-form-icon {
            background: rgba(168, 247, 136, 0.12) !important;
            border-color: rgba(168, 247, 136, 0.3) !important;
        }

        .ap2-form-sub {
            color: rgba(200, 212, 224, 0.65) !important;
        }

        .ap2-label {
            color: rgba(230, 238, 245, 0.85) !important;
        }

        .ap2-input {
            background: rgba(255, 255, 255, 0.06) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #ffffff !important;
        }

        .ap2-input::placeholder {
            color: rgba(255, 255, 255, 0.38) !important;
        }

        .ap2-input:focus {
            border-color: #a8f788 !important;
            background: rgba(255, 255, 255, 0.09) !important;
            box-shadow: 0 0 0 3px rgba(168, 247, 136, 0.15) !important;
        }

        .ap2-input[type="date"] {
            color-scheme: dark !important;
        }

        .ap2-select {
            background-color: rgba(255, 255, 255, 0.06) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #ffffff !important;
        }

        .ap2-select option {
            background: #12243a !important;
            color: #ffffff !important;
        }

        .ap2-submit {
            background: #256d0c !important;
            color: #fff !important;
        }

        .ap2-submit:hover {
            background: #2d8010 !important;
        }

        .hour-row {
            color: rgba(230, 238, 245, 0.78) !important;
        }

        /* ── CTA BANNER (keep dark) ───────────────────────────── */
        #ctabanner {
            background: linear-gradient(135deg, #0f1c2e 0%, #1a3a50 100%) !important;
        }

        .cb-ttl {
            color: #ffffff !important;
        }

        .cb-sub {
            color: rgba(255, 255, 255, 0.75) !important;
        }

        /* ── FAQ ──────────────────────────────────────────────── */
        #faq {
            background: #f5f7f3 !important;
        }

        #faq .s-ttl {
            color: #1c1b1b !important;
        }

        #faq .s-lbl {
            color: #256d0c !important;
        }

        #faq .s-lbl::before {
            background: #256d0c !important;
        }

        .faq-q {
            color: #1c1b1b !important;
        }

        .faq-a {
            color: #4a5568 !important;
        }

        .faq-icon {
            color: #256d0c !important;
            border-color: #d8e0d0 !important;
        }

        .faq-item.open .faq-icon {
            background: #256d0c !important;
            color: #fff !important;
            border-color: #256d0c !important;
        }

        .fi {
            background: #ffffff !important;
            border-color: #d8e0d0 !important;
            box-shadow: 0 1px 6px rgba(15, 28, 46, 0.05) !important;
        }

        /* ── BRANCHES ─────────────────────────────────────────── */
        #branches {
            background: #ffffff !important;
        }

        #branches .s-ttl {
            color: #1c1b1b !important;
        }

        #branches .s-lbl {
            color: #256d0c !important;
        }

        #branches .s-lbl::before {
            background: #256d0c !important;
        }

        .br-card {
            background: #f5f7f3 !important;
            border-color: #d8e0d0 !important;
        }

        .br-card-name {
            color: #1c1b1b !important;
        }

        .br-card-addr {
            color: #4a5568 !important;
        }

        .br-badge {
            background: rgba(37, 109, 12, 0.10) !important;
            color: #256d0c !important;
        }

        /* ── Main Branch styles ── */
        .br-card-main {
            border-color: var(--teal) !important;
            box-shadow: 0 0 0 2px rgba(37, 109, 12, 0.25), var(--shadow-md) !important;
            position: relative;
            overflow: hidden;
        }

        .br-main-ribbon {
            position: absolute;
            top: 16px;
            right: -30px;
            background: var(--teal);
            color: #fff;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: .28rem 2.6rem;
            transform: rotate(45deg);
            z-index: 2;
            box-shadow: 0 2px 8px rgba(37, 109, 12, 0.35);
        }

        .br-main-tag {
            display: inline-block;
            font-size: 0.72rem;
            font-weight: 700;
            background: rgba(37, 109, 12, 0.12);
            color: var(--teal);
            border: 1px solid rgba(37, 109, 12, 0.3);
            border-radius: 99px;
            padding: .18rem .6rem;
            vertical-align: middle;
            margin-left: .4rem;
            letter-spacing: .02em;
        }

        /* ── Head Office card ── */
        .br-card-wrap {
            display: contents;
        }

        .br-card-main {
            border: 1px solid var(--border) !important;
            border-top-left-radius: 0 !important;
            box-shadow: 0 6px 28px rgba(37, 109, 12, 0.12) !important;
            position: relative;
            overflow: visible !important;
            align-self: end;
        }

        .br-hq-tag {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            background: #256d0c;
            color: #fff;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: .3rem .75rem .3rem .6rem;
            border-radius: .4rem .4rem 0 0;
            position: absolute;
            top: -1.65rem;
            left: -1.5px;
            white-space: nowrap;
        }

        .br-hq-banner {
            display: none;
        }

        .br-main-ribbon {
            display: none;
        }

        .br-main-tag {
            display: none;
        }

        .br-btn-primary {
            background: #256d0c !important;
            color: #fff !important;
            border-color: #256d0c !important;
        }

        .br-btn-secondary {
            border-color: #d8e0d0 !important;
            color: #1c1b1b !important;
        }

        .br-btn-secondary:hover,
        .br-btn-primary:hover {
            background: #0f1c2e !important;
            border-color: #0f1c2e !important;
            color: #fff !important;
        }

        /* ── DENTAL TECH (keep dark) ──────────────────────────── */
        #dental-tech {
            background: #050d18 !important;
        }

        .dt-hero-headline {
            color: #e8f4f4 !important;
        }

        .dt-hero-desc {
            color: rgba(37, 109, 12, 0.85) !important;
        }

        .dt-card {
            background: #070f1c !important;
        }

        .svc-card {
            background: linear-gradient(145deg, #0f2744 0%, #0b1e38 60%, #091829 100%) !important;
            border: 1.5px solid rgba(37, 109, 12, 0.45) !important;
            border-radius: 1.5rem !important;
            overflow: hidden !important;
            box-shadow:
                0 0 0 1px rgba(37, 109, 12, 0.12),
                0 8px 32px rgba(9, 24, 41, 0.55),
                0 2px 8px rgba(9, 24, 41, 0.35) !important;
        }

        .svc-card-title {
            color: #ffffff !important;
        }

        .svc-card-desc {
            color: #f0ede8 !important;
        }

        .svc-compare-title {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .svc-compare-hint {
            color: rgba(255, 255, 255, 0.45) !important;
        }

        .compare-title {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .compare-caption {
            color: rgba(255, 255, 255, 0.5) !important;
        }

        /* ── FOOTER (dark) ────────────────────────────────────── */
        .ft-logo {
            color: #ffffff !important;
        }

        .ft-logo-mark {
            color: #fff !important;
        }

        .ft-col h4 {
            color: #ffffff !important;
        }

        .ft-col ul a {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .ft-col ul a:hover {
            color: #256d0c !important;
        }

        .ft-copy {
            color: rgba(255, 255, 255, 0.75) !important;
        }

        .soc-btn:hover {
            background: transparent !important;
            border: none !important;
            color: #fff !important;
        }

        /* ── GLOBAL BUTTONS ───────────────────────────────────── */
        .btn-primary {
            background: #256d0c !important;
            color: #fff !important;
        }

        .btn-primary:hover {
            background: #1a5000 !important;
        }

        .btn-secondary {
            border-color: #256d0c !important;
            color: #256d0c !important;
            background: transparent !important;
        }

        .btn-secondary:hover {
            background: #256d0c !important;
            color: #fff !important;
        }

        .btn-submit {
            background: #256d0c !important;
            color: #fff !important;
        }

        .btn-white {
            background: #fff !important;
            color: #0f1c2e !important;
        }

        .btn-white:hover {
            background: #f0f9e8 !important;
        }

        .btn-outline-white {
            border-color: rgba(255, 255, 255, 0.55) !important;
            color: #ffffff !important;
        }

        .btn-outline-white:hover {
            background: rgba(255, 255, 255, 0.18) !important;
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.8) !important;
        }

        /* ── GLOBAL MARKS / HIGHLIGHTS ────────────────────────── */
        .s-ttl mark.hl,
        mark.hl {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        .s-ttl mark.hl2,
        mark.hl2 {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        /* hl-white stays white (inside dark sections) */
        mark.hl-white {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            background: none !important;
        }

        /* ── MISC ─────────────────────────────────────────────── */
        #pgbar {
            background: #256d0c !important;
            box-shadow: 0 0 12px #256d0c !important;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #4ade80 0%, #256d0c 40%, #16a34a 75%, #86efac 100%) !important;
            box-shadow: 0 0 10px rgba(37, 109, 12, 0.8), 0 0 3px rgba(134, 239, 172, 0.5) !important;
        }

        #btt::before {
            background: #256d0c !important;
        }

        #btt-ring .ring-fill {
            stroke: #256d0c !important;
        }

        .cin-line {
            background: linear-gradient(90deg, #0f1c2e, #256d0c, #1a5000) !important;
        }

        #floatAppt {
            background: #256d0c !important;
            color: #fff !important;
        }

        .stats-marquee-wrap {
            background: #380038 !important;
        }

        .opening-card {
            background: rgba(15, 28, 46, 0.92) !important;
        }

        /* ══ TARGETED FONT COLOR FIXES — invisible text on white bg ══ */

        /* NAV */
        .n-links a {
            color: #4a5568 !important;
        }

        /* HERO — video bg, text must be white */
        .hex-t {
            color: #ffffff !important;
        }

        .orig-hero-h1 {
            color: #ffffff !important;
        }

        .orig-hero-sub {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .h-stat-n {
            color: #ffffff !important;
        }

        .h-stat-l {
            color: rgba(255, 255, 255, 0.90) !important;
        }

        .hero-clinic-name {
            color: #1c1b1b !important;
        }

        .hero-clinic-sub {
            color: #4a5568 !important;
        }

        .h-pill {
            color: #4a5568 !important;
        }

        .hii-val {
            color: #0f1c2e !important;
        }

        .hii-label {
            color: #6b7280 !important;
        }

        /* SERVICES (white bg cards) */
        .sv-name {
            color: #1c1b1b !important;
        }

        #services .sv-name {
            color: #1c1b1b !important;
        }

        .sv-num {
            color: #256d0c !important;
        }

        .sv-hd-sub {
            color: #f0ede8 !important;
        }

        #services .sv-hd-sub {
            color: #f0ede8 !important;
        }

        /* BUTTONS on white bg */
        .btn-secondary {
            color: #256d0c !important;
            border-color: #256d0c !important;
        }

        .btn-outline-white {
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.55) !important;
        }

        /* WHY US (white bg) */
        #why-us .s-ttl {
            color: #ffffff !important;
        }

        .wu-card-title {
            color: #1c1b1b !important;
        }

        .wu-card-desc {
            color: #2d3748 !important;
        }

        /* GLOBAL s-ttl default — dark; dark sections override below */
        .s-ttl {
            color: #1c1b1b !important;
        }

        #treatments .s-ttl,
        #doctors .s-ttl,
        #ctabanner .s-ttl,
        #dental-tech .s-ttl {
            color: #ffffff !important;
        }

        /* DENTAL TECH compare panel (dark section) */
        .compare-title {
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .compare-caption {
            color: rgba(255, 255, 255, 0.55) !important;
        }

        /* APPOINTMENT hour rows (navy section) */
        .hour-row {
            color: rgba(230, 238, 245, 0.78) !important;
        }

        /* TEXT SHINE on white bg */
        .text-shine {
            color: #0f1c2e !important;
            -webkit-text-fill-color: #0f1c2e !important;
        }

        /* SM LABEL */
        .sm-label {
            color: #ffffff !important;
        }

        /* SM NUMBER */
        .sm-number {
            color: #ffdd00 !important;
        }

        /* SM ICON circle */
        .sm-icon {
            background: rgba(255, 255, 255, 0.15) !important;
            border-color: rgba(255, 255, 255, 0.40) !important;
        }

        /* SM ICON svg strokes/fills */
        .sm-icon svg path,
        .sm-icon svg circle,
        .sm-icon svg rect,
        .sm-icon svg polyline,
        .sm-icon svg line {
            stroke: #ffffff !important;
            fill: none !important;
        }

        /* SM DIVIDER */
        .sm-divider {
            background: rgba(255, 255, 255, 0.30) !important;
        }
    


        /* Force ap2-outer to span full section width with no centering offset */
        #appointment {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .ap2-outer {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Reduce side padding inside both panels so content sits closer to edges */
        .ap2-left {
            padding-left: 3vw !important;
            padding-right: 3vw !important;
        }

        .ap2-right {
            padding-left: 2vw !important;
            padding-right: 2vw !important;
        }

        /* Let the form card fill the full right column width */
        .ap2-form-wrap {
            max-width: 100% !important;
            width: 100% !important;
        }
    


        /* Main heading — match treatments: clamp(2.6rem,5vw,4rem) weight 800 */
        #why-us .s-ttl {
            font-size: clamp(2.6rem, 5vw, 4rem) !important;
            font-weight: 800 !important;
            letter-spacing: -.025em !important;
            line-height: 1.08 !important;
        }

        /* Feature card titles — scale up to match treatments card weight */
        .wu-tf-title {
            font-size: 1.2rem !important;
            font-weight: 800 !important;
        }

        /* Feature list items — scale up slightly */
        .wu-tf-list li {
            font-size: 1rem !important;
            font-weight: 500 !important;
        }
    


        /* ── Doctors layout: widen left panel so bold heading fits without overflow ── */
        @media (min-width: 901px) {
            .dr-layout {
                grid-template-columns: 420px 1fr !important;
            }
        }

        /* ── Services ── */
        #services .s-ttl {
            font-size: clamp(2.6rem, 5vw, 4rem) !important;
            font-weight: 800 !important;
            letter-spacing: -.025em !important;
            line-height: 1.08 !important;
        }

        /* ── About (uses .pab-headline) ── */
        .pab-headline {
            font-size: clamp(2.6rem, 5vw, 4rem) !important;
            font-weight: 800 !important;
            letter-spacing: -.025em !important;
            line-height: 1.08 !important;
        }

        /* ── Doctors — left panel is 360px wide, so cap font size to fit ── */
        #doctors .s-ttl {
            font-size: clamp(2.2rem, 3.2vw, 3rem) !important;
            font-weight: 800 !important;
            letter-spacing: -.025em !important;
            line-height: 1.08 !important;
        }

        /* ── Testimonials ── */
        #testimonials .s-ttl {
            font-size: clamp(2.6rem, 5vw, 4rem) !important;
            font-weight: 800 !important;
            letter-spacing: -.025em !important;
            line-height: 1.08 !important;
        }

        /* ── FAQ (uses .faq-heading) ── */
        .faq-heading {
            font-size: clamp(2.6rem, 5vw, 4rem) !important;
            font-weight: 800 !important;
            letter-spacing: -.025em !important;
            line-height: 1.08 !important;
        }

        /* ── Branches ── */
        #branches .s-ttl {
            font-size: clamp(2.6rem, 5vw, 4rem) !important;
            font-weight: 800 !important;
            letter-spacing: -.025em !important;
            line-height: 1.08 !important;
        }

        /* ── Dental Timeline ── */
        #dental-timeline .s-ttl {
            font-size: clamp(2.6rem, 5vw, 4rem) !important;
            font-weight: 800 !important;
            letter-spacing: -.025em !important;
            line-height: 1.08 !important;
        }

        /* ── Patient Journey ── */
        #patient-journey .s-ttl {
            font-size: clamp(2.6rem, 5vw, 4rem) !important;
            font-weight: 800 !important;
            letter-spacing: -.025em !important;
            line-height: 1.08 !important;
        }

        /* ── Appointment heading ── */
        .ap2-heading {
            font-size: clamp(2.6rem, 5vw, 4rem) !important;
            font-weight: 800 !important;
            letter-spacing: -.025em !important;
            line-height: 1.08 !important;
        }

        /* ── Zero-gap overrides for Doctors section ── */
        #doctors {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            height: auto !important;
            min-height: auto !important;
        }

        #doctors .dr-layout {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            min-height: auto !important;
        }

        #doctors .dr-left {
            padding-top: 2rem !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        #doctors .dr-right {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        #doctors .dr-carousel {
            padding-top: 2rem !important;
            padding-bottom: 2rem !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        #doctors .dr-card {
            margin-top: 0 !important;
        }
    


        /* ── OPENING HOURS — colors ── */
        .opening-card .hour-row span:last-child {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }

        .opening-card h3 {
            color: #1a5c09 !important;
        }

        .opening-card h3::before {
            background: #1a5c09 !important;
            box-shadow: 0 0 6px #1a5c09 !important;
        }
    


        /* ── Container ── */
        #videoHero {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        /* ── Video: oversized so parallax never shows edges ── */
        #heroPromoVideo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            will-change: transform;
            transform-origin: center center;
            transform: scale(1) translateY(0px);
        }

        /* ── Layer 1: base dark vignette ── */
        #vhVignette {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(5, 10, 20, 0.55) 100%),
                linear-gradient(to bottom, rgba(5, 10, 20, 0.45) 0%, transparent 30%, transparent 65%, rgba(5, 10, 20, 0.75) 100%);
            z-index: 1;
            pointer-events: none;
        }

        /* ── Layer 2: scroll-driven dark wipe (JS controls opacity) ── */
        #vhDark {
            position: absolute;
            inset: 0;
            background: linear-gradient(160deg, rgba(8, 16, 30, 0.0) 0%, rgba(10, 20, 38, 0.0) 100%);
            z-index: 2;
            pointer-events: none;
            will-change: opacity;
            opacity: 0;
        }

        /* ── Layer 3: teal accent glow (bottom-left, fades on scroll) ── */
        #vhGlow {
            position: absolute;
            bottom: -5%;
            left: -5%;
            width: 55%;
            height: 55%;
            background: radial-gradient(ellipse 60% 60% at 30% 80%, rgba(37, 109, 12, 0.22), transparent 70%);
            z-index: 2;
            pointer-events: none;
            will-change: opacity, transform;
        }

        /* ── Layer 4: horizontal light streak (top-right) ── */
        #vhStreak {
            position: absolute;
            top: 18%;
            right: -10%;
            width: 55%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
            z-index: 2;
            pointer-events: none;
            will-change: opacity, transform;
            transform-origin: right center;
        }

        /* ── Grain overlay for film texture ── */
        #vhGrain {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
            background-size: 180px 180px;
            opacity: 0.4;
            mix-blend-mode: overlay;
        }

        /* ── Titles wrapper ── */
        #vhTitles {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            z-index: 3;
            pointer-events: none;
            will-change: transform, opacity;
        }

        /* ── Badge above title ── */
        #vhBadge {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            background: rgba(37, 109, 12, 0.18);
            border: 1px solid rgba(37, 109, 12, 0.45);
            color: rgba(255, 255, 255, 0.92);
            padding: 0.38rem 1.1rem;
            border-radius: 3rem;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            margin-bottom: 1.1rem;
            will-change: opacity, transform;
            animation: vhBadgeIn 1s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        #vhBadge::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #256d0c;
            box-shadow: 0 0 8px rgba(37, 109, 12, 0.8);
            flex-shrink: 0;
            animation: vhPulse 2s ease-in-out infinite;
        }

        @keyframes vhPulse {

            0%,
            100% {
                box-shadow: 0 0 6px rgba(37, 109, 12, 0.7);
            }

            50% {
                box-shadow: 0 0 14px rgba(37, 109, 12, 1);
            }
        }

        /* ── Line 1 ── */
        #vhT1 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: clamp(1.9rem, 3.8vw, 3.4rem);
            font-weight: 700;
            font-style: normal;
            color: rgba(255, 255, 255, 0.82);
            letter-spacing: 0.04em;
            line-height: 1.1;
            text-align: center;
            text-transform: uppercase;
            will-change: transform, opacity;
            animation: vhT1In 1s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
            text-shadow:
                0 2px 40px rgba(0, 0, 0, 0.5),
                0 0 60px rgba(37, 109, 12, 0.12);
        }

        /* ── Line 2 ── */
        #vhT2 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: clamp(3.8rem, 9vw, 8.2rem);
            font-weight: 800;
            font-style: normal;
            color: #ffffff;
            letter-spacing: -0.03em;
            line-height: 1.0;
            text-align: center;
            will-change: transform, opacity;
            animation: vhT2In 1s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
            filter: drop-shadow(0 2px 30px rgba(0, 0, 0, 0.55));
        }

        /* ── Thin divider line between titles ── */
        #vhDivider {
            width: 0px;
            height: 1.5px;
            background: linear-gradient(90deg, transparent, rgba(37, 109, 12, 0.8), transparent);
            margin: 0.6rem auto;
            animation: vhDividerGrow 1.2s 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
            will-change: width, opacity;
        }

        @keyframes vhDividerGrow {
            from {
                width: 0px;
                opacity: 0;
            }

            to {
                width: 180px;
                opacity: 1;
            }
        }

        /* ── Sub-tagline ── */
        #vhSub {
            font-size: clamp(0.78rem, 1.4vw, 1.0rem);
            font-weight: 400;
            color: rgba(255, 255, 255, 0.72);
            letter-spacing: 0.08em;
            margin-top: 1.0rem;
            text-align: center;
            will-change: opacity, transform;
            animation: vhSubIn 1s 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        /* ── Scroll indicator (replaces old hex-hint) ── */
        #vhScroll {
            position: absolute;
            bottom: 2.5rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            z-index: 3;
            pointer-events: none;
            will-change: opacity, transform;
            animation: vhSubIn 1.2s 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        #vhScrollLine {
            width: 1.5px;
            height: 48px;
            background: linear-gradient(to bottom, rgba(37, 109, 12, 0.9), transparent);
            position: relative;
            overflow: hidden;
        }

        #vhScrollLine::after {
            content: '';
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9), transparent);
            animation: vhScrollDrop 1.8s ease-in-out infinite;
        }

        @keyframes vhScrollDrop {
            0% {
                top: -100%;
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            100% {
                top: 100%;
                opacity: 0;
            }
        }

        #vhScrollText {
            font-size: 0.68rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.55);
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        /* ── Corner accent lines — removed ── */
        #vhCornerTL,
        #vhCornerBR {
            display: none;
        }

        /* ── Entrance animations ── */
        @keyframes vhBadgeIn {
            from {
                opacity: 0;
                transform: translateY(16px) scale(0.95);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes vhT1In {
            from {
                opacity: 0;
                transform: translateY(32px) scale(0.97);
                filter: blur(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        @keyframes vhT2In {
            from {
                opacity: 0;
                transform: translateY(32px) scale(0.97);
                filter: blur(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        @keyframes vhSubIn {
            from {
                opacity: 0;
                transform: translateY(18px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ── Scroll: mask clip effect on video ── */
        #vhClipMask {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            background: transparent;
            will-change: clip-path;
            /* starts fully open, collapses inward on scroll */
            clip-path: inset(0% 0% 0% 0% round 0px);
        }

        @media (max-width: 640px) {

            #vhT1 {
                font-size: clamp(1.1rem, 5vw, 1.6rem);
            }

            #vhT2 {
                font-size: clamp(2.2rem, 11vw, 3.4rem);
            }

            #vhCornerTL,
            #vhCornerBR {
                width: 36px;
                height: 36px;
            }
        }
    


        /* ── STATS MARQUEE ── */
        .stats-marquee-wrap {
            width: 100%;
            background: #380038;
            border-top: 1px solid rgba(255, 100, 255, 0.18);
            border-bottom: 1px solid rgba(255, 100, 255, 0.18);
            padding: 0;
            overflow: hidden;
            position: relative;
            /* Always visible — never affected by cinema-section animations */
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            visibility: visible !important;
            z-index: 10;
        }

        /* Fade edges */
        .stats-marquee-wrap::before,
        .stats-marquee-wrap::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 2;
            pointer-events: none;
        }

        .stats-marquee-wrap::before {
            left: 0;
            background: linear-gradient(to right, #380038 0%, transparent 100%);
        }

        .stats-marquee-wrap::after {
            right: 0;
            background: linear-gradient(to left, #380038 0%, transparent 100%);
        }

        .stats-marquee-track {
            display: flex;
            width: max-content;
            animation: marqueeScroll 32s linear infinite;
            will-change: transform;
            opacity: 1 !important;
            visibility: visible !important;
        }

        @keyframes marqueeScroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .stats-marquee-inner {
            display: flex;
            align-items: center;
            padding: 0;
        }

        .sm-item {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 1rem 2rem;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .sm-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(37, 109, 12, 0.12);
            border: 1px solid rgba(37, 109, 12, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .sm-icon svg {
            width: 19px;
            height: 19px;
        }

        .sm-text {
            display: flex;
            flex-direction: column;
            line-height: 1.25;
        }

        .sm-number {
            font-family: 'Manrope', serif;
            font-size: 1.15rem;
            font-weight: 400;
            color: var(--teal);
            letter-spacing: -0.01em;
        }

        .sm-label {
            font-size: 0.7rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.55);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .sm-divider {
            width: 1px;
            height: 30px;
            background: rgba(37, 109, 12, 0.2);
            flex-shrink: 0;
            margin: 0 0.35rem;
        }
    


                .trnew-grid {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 1rem;
                    margin-top: 2rem;
                    padding: 0 5vw 2.5rem;
                }

                .trnew-card {
                    flex: 0 0 calc(16.666% - 1rem);
                    min-width: 130px;
                    position: relative;
                    overflow: hidden;
                    background: rgba(255, 255, 255, 0.14);
                    backdrop-filter: blur(16px);
                    -webkit-backdrop-filter: blur(16px);
                    border: 1px solid rgba(255, 255, 255, 0.28);
                    border-radius: 16px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: .85rem;
                    padding: 1.8rem 1rem;
                    cursor: pointer;
                    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.20);
                    transition: box-shadow .4s cubic-bezier(0.25, 1, 0.5, 1),
                        transform .4s cubic-bezier(0.25, 1, 0.5, 1),
                        border-color .35s ease,
                        background .35s ease;
                }

                /* shimmer sweep on hover */
                .trnew-card::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -75%;
                    width: 50%;
                    height: 100%;
                    background: linear-gradient(120deg,
                            transparent 0%,
                            rgba(255, 255, 255, 0.18) 50%,
                            transparent 100%);
                    transform: skewX(-20deg);
                    transition: left .6s ease;
                    pointer-events: none;
                }

                .trnew-card:hover::before {
                    left: 130%;
                }

                /* glow ring — disabled */
                .trnew-card::after {
                    content: none;
                }

                .trnew-card:hover::after {
                    opacity: 0;
                }

                .trnew-card:hover {
                    background: rgba(255, 255, 255, 0.12);
                    border-color: rgba(255, 255, 255, 0.25);
                    box-shadow:
                        0 12px 40px rgba(0, 0, 0, 0.25),
                        0 4px 12px rgba(0, 0, 0, 0.20),
                        inset 0 1px 0 rgba(255, 255, 255, 0.25);
                    transform: translateY(-7px) scale(1.03);
                }

                .trnew-card:hover .trnew-card-name {
                    color: #fff;
                }

                .trnew-card:hover svg * {
                    stroke: rgba(255, 255, 255, 1) !important;
                    filter: none;
                }

                .trnew-card svg {
                    flex-shrink: 0;
                    width: 68px;
                    height: 68px;
                    transition: transform .4s cubic-bezier(0.25, 1, 0.5, 1);
                }

                .trnew-card:hover svg {
                    transform: scale(1.12);
                }

                /* Default: all strokes white */
                .trnew-card svg * {
                    stroke: rgba(255, 255, 255, 0.85) !important;
                    transition: stroke .35s, fill .35s;
                }

                /* Preserve red accent for ulcer / gum disease indicators */
                .trnew-card svg [stroke="#e04040"],
                .trnew-card svg [stroke="#e04a6a"] {
                    stroke: rgba(255, 110, 130, 0.92) !important;
                }

                /* Preserve green healing badge */
                .trnew-card svg [stroke="#256d0c"] {
                    stroke: rgba(125, 215, 87, 0.95) !important;
                }

                /* Solid fill dots (eyes, etc.) stay white */
                .trnew-card svg [fill="currentColor"] {
                    fill: rgba(255, 255, 255, 0.85) !important;
                    stroke: none !important;
                }

                /* On hover — strokes stay white */
                .trnew-card:hover svg [stroke]:not([stroke="#e04040"]):not([stroke="#e04a6a"]):not([stroke="#256d0c"]) {
                    stroke: rgba(255, 255, 255, 1) !important;
                    filter: none;
                }

                .trnew-card-name {
                    font-size: .95rem;
                    font-weight: 600;
                    color: rgba(255, 255, 255, 0.92);
                    text-align: center;
                    line-height: 1.35;
                    letter-spacing: .01em;
                    transition: color .3s;
                }

                @media(max-width:900px) {
                    .trnew-card {
                        flex: 0 0 calc(33.333% - 1rem);
                    }
                }

                @media(max-width:540px) {
                    .trnew-card {
                        flex: 0 0 calc(50% - 1rem);
                    }
                }

                /* trnew-card as anchor — remove default link styles */
                a.trnew-card {
                    display: flex;
                    text-decoration: none;
                    color: inherit;
                }

                a.trnew-card:visited {
                    color: inherit;
                }
            


        #dental-camp {
            background: linear-gradient(135deg, #f0f9e8 0%, #e8f5e0 60%, #d4edcc 100%);
            position: relative;
            overflow: hidden;
        }

        #dental-camp::before {
            content: '';
            position: absolute;
            top: -60px;
            right: -60px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(37, 109, 12, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        #dental-camp::after {
            content: '';
            position: absolute;
            bottom: -40px;
            left: -40px;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(37, 109, 12, 0.06) 0%, transparent 70%);
            pointer-events: none;
        }

        .camp-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
        }

        .camp-left {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            flex: 1;
            min-width: 260px;
        }

        .camp-icon-wrap {
            flex-shrink: 0;
            width: 56px;
            height: 56px;
            border-radius: 14px;
            background: linear-gradient(135deg, #2d8010 0%, #256d0c 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 20px rgba(37, 109, 12, 0.28);
        }

        .camp-text-block .camp-label {
            font-size: .72rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--teal);
            font-weight: 600;
            margin-bottom: .4rem;
        }

        .camp-text-block h3 {
            font-family: 'Manrope', Georgia, serif;
            font-size: clamp(1.5rem, 2.8vw, 2.4rem);
            font-weight: 400;
            color: var(--navy);
            margin-bottom: .4rem;
            line-height: 1.12;
            letter-spacing: -.01em;
        }

        .camp-text-block p {
            font-size: .95rem;
            color: var(--text-muted);
            line-height: 1.6;
            max-width: 520px;
        }

        .camp-divider {
            width: 1px;
            height: 52px;
            background: rgba(37, 109, 12, 0.18);
            flex-shrink: 0;
        }

        .camp-pills {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .camp-pill {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            font-size: .78rem;
            font-weight: 600;
            color: #2d6a0a;
            background: rgba(37, 109, 12, 0.10);
            border: 1px solid rgba(37, 109, 12, 0.18);
            border-radius: 999px;
            padding: 6px 14px;
            white-space: nowrap;
        }

        .camp-pill svg {
            flex-shrink: 0;
        }

        .camp-cta-btn {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            background: linear-gradient(135deg, #2d8010 0%, #256d0c 100%);
            color: #fff;
            font-family: 'Manrope', sans-serif;
            font-size: .95rem;
            font-weight: 700;
            padding: 14px 28px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            letter-spacing: .02em;
            box-shadow: 0 6px 22px rgba(37, 109, 12, 0.30);
            transition: transform .25s ease, box-shadow .25s ease;
            text-decoration: none;
            white-space: nowrap;
            position: relative;
            z-index: 2;
            pointer-events: auto;
        }

        .camp-cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(37, 109, 12, 0.40);
        }

        .camp-cta-btn svg {
            transition: transform .25s ease;
        }

        .camp-cta-btn:hover svg {
            transform: translateX(3px);
        }

        @media (max-width: 768px) {
            .camp-divider {
                display: none;
            }

            .camp-inner {
                flex-direction: column;
                align-items: flex-start;
                gap: 1.25rem;
            }

            .camp-cta-btn {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .camp-left {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 0.8rem !important;
            }

            .camp-pills {
                gap: 0.4rem !important;
            }

            .camp-pill {
                padding: 4px 10px !important;
                font-size: 0.72rem !important;
            }
        }
    


        /* ── MAGNETIC BUTTON SYSTEM ── */
        .mag-btn {
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
        }

        /* ── SPLIT-TEXT CHARS ── */
        .split-word {
            overflow: hidden;
            display: inline-block;
        }

        .split-char {
            display: inline-block;
            opacity: 0;
            transform: translateY(110%) rotate(3deg);
            transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .split-char.ch-vis {
            opacity: 1;
            transform: translateY(0) rotate(0deg);
        }

        /* ── STAGGER DELAYS for chars ── */
        .split-char:nth-child(1) {
            transition-delay: 0.00s
        }

        .split-char:nth-child(2) {
            transition-delay: 0.03s
        }

        .split-char:nth-child(3) {
            transition-delay: 0.06s
        }

        .split-char:nth-child(4) {
            transition-delay: 0.09s
        }

        .split-char:nth-child(5) {
            transition-delay: 0.12s
        }

        .split-char:nth-child(6) {
            transition-delay: 0.15s
        }

        .split-char:nth-child(7) {
            transition-delay: 0.18s
        }

        .split-char:nth-child(8) {
            transition-delay: 0.21s
        }

        .split-char:nth-child(9) {
            transition-delay: 0.24s
        }

        .split-char:nth-child(10) {
            transition-delay: 0.27s
        }

        .split-char:nth-child(11) {
            transition-delay: 0.30s
        }

        .split-char:nth-child(12) {
            transition-delay: 0.33s
        }

        .split-char:nth-child(13) {
            transition-delay: 0.36s
        }

        .split-char:nth-child(14) {
            transition-delay: 0.39s
        }

        .split-char:nth-child(15) {
            transition-delay: 0.42s
        }

        .split-char:nth-child(16) {
            transition-delay: 0.45s
        }

        .split-char:nth-child(17) {
            transition-delay: 0.48s
        }

        .split-char:nth-child(18) {
            transition-delay: 0.51s
        }

        .split-char:nth-child(19) {
            transition-delay: 0.54s
        }

        .split-char:nth-child(20) {
            transition-delay: 0.57s
        }

        /* ── SCROLL-LINKED NUMBER COUNTER ── */
        .count-anim {
            transition: color 0.3s;
        }

        /* ── ADVANCED CARD REVEAL ── */
        .adv-reveal {
            opacity: 0;
            transform: translate3d(0, 70px, 0) scale(0.93);
            filter: blur(5px);
            transition:
                opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .adv-reveal.ar-vis {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            filter: blur(0);
        }

        .adv-reveal:nth-child(1) {
            transition-delay: 0.05s
        }

        .adv-reveal:nth-child(2) {
            transition-delay: 0.12s
        }

        .adv-reveal:nth-child(3) {
            transition-delay: 0.19s
        }

        .adv-reveal:nth-child(4) {
            transition-delay: 0.26s
        }

        .adv-reveal:nth-child(5) {
            transition-delay: 0.33s
        }

        .adv-reveal:nth-child(6) {
            transition-delay: 0.40s
        }

        /* ── PARALLAX SECTION DIVIDERS ── */
        .par-divider {
            position: relative;
            height: 2px;
            overflow: visible;
            margin: 0;
        }

        .par-divider::before {
            content: '';
            position: absolute;
            left: -100%;
            width: 300%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--teal), #256d0c, var(--teal), transparent);
            animation: dividerSweep 4s ease-in-out infinite;
        }

        @keyframes dividerSweep {
            0% {
                transform: translateX(-60%);
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            80% {
                opacity: 1;
            }

            100% {
                transform: translateX(60%);
                opacity: 0;
            }
        }

        /* ── MORPHING BACKGROUND BLOB ── */
        .morph-blob {
            position: absolute;
            border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            animation: morphBlob 12s ease-in-out infinite alternate;
            pointer-events: none;
            will-change: border-radius, transform;
        }

        @keyframes morphBlob {
            0% {
                border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
                transform: translate(0, 0) scale(1);
            }

            25% {
                border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
            }

            50% {
                border-radius: 50% 50% 30% 70% / 50% 70% 30% 50%;
                transform: translate(20px, -15px) scale(1.05);
            }

            75% {
                border-radius: 30% 70% 70% 30% / 50% 50% 40% 60%;
            }

            100% {
                border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
                transform: translate(-10px, 10px) scale(0.97);
            }
        }

        /* ── SCROLL INDICATOR DOTS ── */


        /* ── RIPPLE ON CLICK ── */
        .ripple-wrap {
            position: relative;
            overflow: hidden;
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            transform: scale(0);
            background: rgba(255, 255, 255, 0.25);
            animation: rippleOut 0.6s linear;
            pointer-events: none;
        }

        @keyframes rippleOut {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        /* ── HOVER CARD BORDER GLOW ── */
        .glow-border {
            position: relative;
        }

        .glow-border::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, transparent 40%, rgba(37, 109, 12, 0.5) 60%, transparent 80%);
            background-size: 200% 200%;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
            background-position: 200% 200%;
        }

        .glow-border:hover::before {
            opacity: 1;
            animation: borderGlow 2s linear infinite;
        }

        @keyframes borderGlow {
            to {
                background-position: -200% -200%;
            }
        }

        /* ── SMOOTH SECTION TRANSITIONS ── */
        section {
            transform: translateZ(0);
        }

        /* ── STAGGERED LIST ITEMS ── */
        .stagger-list>* {
            opacity: 0;
            transform: translateX(-20px);
            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .stagger-list.sl-done>*:nth-child(1) {
            opacity: 1;
            transform: none;
            transition-delay: 0.05s
        }

        .stagger-list.sl-done>*:nth-child(2) {
            opacity: 1;
            transform: none;
            transition-delay: 0.12s
        }

        .stagger-list.sl-done>*:nth-child(3) {
            opacity: 1;
            transform: none;
            transition-delay: 0.19s
        }

        .stagger-list.sl-done>*:nth-child(4) {
            opacity: 1;
            transform: none;
            transition-delay: 0.26s
        }

        .stagger-list.sl-done>*:nth-child(5) {
            opacity: 1;
            transform: none;
            transition-delay: 0.33s
        }

        /* ── HERO FLOATING PARTICLES ── */
        .hero-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(37, 109, 12, 0.6);
            pointer-events: none;
            animation: particleDrift var(--dur, 8s) ease-in-out infinite var(--del, 0s);
        }

        @keyframes particleDrift {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.6;
            }

            33% {
                transform: translate(var(--tx1, 20px), var(--ty1, -30px)) scale(1.2);
            }

            66% {
                transform: translate(var(--tx2, -15px), var(--ty2, -60px)) scale(0.8);
            }

            100% {
                transform: translate(0, -90px) scale(0.4);
                opacity: 0;
            }
        }

        /* ── TEXT SHINE ── */
        .text-shine {
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
        }

        @keyframes textShine {
            0% {
                background-position: 200% center;
            }

            100% {
                background-position: -200% center;
            }
        }

        /* ── SECTION COUNTER PROGRESS BARS ── */
        .skill-bar-wrap {
            overflow: hidden;
            border-radius: 99px;
            background: var(--gray2);
            height: 4px;
        }

        .skill-bar-fill {
            height: 100%;
            width: 0;
            border-radius: 99px;
            background: linear-gradient(90deg, var(--teal), #256d0c);
            transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 0 8px rgba(37, 109, 12, 0.5);
        }

        /* ── AMBIENT LIGHT SWEEP on sections ── */
        .ambient-sweep {
            position: relative;
            overflow: hidden;
        }

        .ambient-sweep::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -80%;
            width: 60%;
            height: 200%;
            background: linear-gradient(105deg, transparent, rgba(37, 109, 12, 0.04), transparent);
            transform: skewX(-15deg);
            animation: ambientPass 8s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes ambientPass {
            0% {
                left: -80%;
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                left: 120%;
                opacity: 0;
            }
        }

        /* ── TOOTH PATH DRAW SVG DECORATION ── */
        #tooth-deco {
            position: absolute;
            opacity: 0.04;
            pointer-events: none;
        }

        #tooth-deco path {
            stroke-dasharray: 800;
            stroke-dashoffset: 800;
            animation: drawPath 4s ease forwards;
        }

        @keyframes drawPath {
            to {
                stroke-dashoffset: 0;
            }
        }

        /* ── SECTION NUMBER ACCENT ── */
        .section-num {
            display: none;
        }

        /* ── LOADING SHIMMER on cards ── */
        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }

            100% {
                background-position: 200% 0;
            }
        }

        /* ── ACTIVE NAV LINK UNDERLINE ANIMATE ── */
        .n-links a.act::after {
            animation: underlineGrow 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes underlineGrow {
            from {
                width: 0;
            }

            to {
                width: 100%;
            }
        }

        /* ── APPOINTMENT FORM FIELD FOCUS EFFECT ── */
        .fi {
            transition: border-color .3s, box-shadow .3s, transform .2s;
        }

        .fi:focus {
            transform: translateY(-1px);
            box-shadow: 0 4px 20px rgba(37, 109, 12, 0.12);
        }

        /* cursor-ring removed */

        /* ── SVG WAVE ANIMATION ── */
        .wave-svg {
            display: block;
            width: 100%;
            overflow: hidden;
            line-height: 0;
        }

        .wave-svg path {
            animation: waveDrift 6s ease-in-out infinite alternate;
        }

        @keyframes waveDrift {
            from {
                d: path("M0,40 C200,80 400,0 600,40 C800,80 1000,0 1200,40 L1200,80 L0,80 Z");
            }

            to {
                d: path("M0,40 C200,0 400,80 600,40 C800,0 1000,80 1200,40 L1200,80 L0,80 Z");
            }
        }

        /* ── DOCTOR CARD PORTRAIT HOVER ── */
        .dr-card:hover .dr-img {
            transform: scale(1.06);
            transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .dr-img {
            transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ── TESTIMONIAL CARD SUBTLE FLOAT ── */
        .ts-card:hover {
            transform: translateY(-6px) scale(1.01);
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
        }

        /* ── FOOTER LINK HOVER SLIDE ── */
        .ft-col ul li a {
            position: relative;
            padding-left: 0;
            transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
        }

        .ft-col ul li a::before {
            content: '→';
            position: absolute;
            left: -1.2rem;
            opacity: 0;
            transition: opacity 0.3s, left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            color: var(--teal);
        }

        .ft-col ul li a:hover {
            padding-left: 1.4rem;
            color: white;
        }

        .ft-col ul li a:hover::before {
            left: 0;
            opacity: 1;
        }

        /* ── COUNTER ODOMETER STYLE ── */
        .h-stat-n {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .h-stat-n:hover {
            transform: scale(1.08);
            color: #256d0c;
        }

        /* ── BUTTON RIPPLE & MAGNETIC ── */
        .btn-primary,
        .btn-nav,
        .btn-submit,
        .btn-white {
            position: relative;
            overflow: hidden;
        }

        /* ══════════════════════════════════════════════════════
           COMPREHENSIVE MOBILE RESPONSIVE OVERRIDES
           Covers every section + animation at all breakpoints
        ══════════════════════════════════════════════════════ */

        /* ── Base mobile tweaks ── */
        @media (max-width: 1023px) {

            #hexStage,
            .hex-proxy {
                display: none !important;
            }

            .hex-reveal {
                position: relative !important;
                top: 0 !important;
                height: auto !important;
                min-height: 100vh;
                display: flex !important;
                align-items: center !important;
                opacity: 1 !important;
                pointer-events: auto !important;
                visibility: visible !important;
                background: linear-gradient(160deg, var(--navy) 0%, var(--navy2) 55%, #1a3348 100%) !important;
                padding: 5rem 5vw 4rem !important;
            }
        }

        @media (max-width: 768px) {

            /* Disable custom webkit scrollbar on mobile views to allow native overlay scrollbars */
            ::-webkit-scrollbar,
            *::-webkit-scrollbar {
                width: 0px !important;
                height: 0px !important;
                display: none !important;
            }

            :root {
                --nh: 62px;
            }

            html {
                font-size: 15px;
            }

            .wrap {
                padding: 2.5rem 4.5vw;
            }

            .wrap-sm {
                padding: 1.75rem 4.5vw;
            }

            /* Reduce heavy translate animations on mobile for perf */
            .slide-left {
                transform: translate3d(-30px, 0, 0);
            }

            .slide-right {
                transform: translate3d(30px, 0, 0);
            }

            .fade-in {
                transform: translateY(16px);
            }
        }

        /* ════════ NAVBAR ════════ */
        @media (max-width: 900px) {
            .n-links {
                display: none;
            }

            .n-r .btn-nav {
                display: none;
            }

            .hbg {
                display: flex !important;
            }
        }

        @media (max-width: 480px) {
            nav {
                padding: 0 4vw;
            }

            .nav-logo {
                height: 40px;
            }

            nav .btn-nav {
                padding: 0.4rem 0.75rem !important;
                font-size: 0.78rem !important;
            }
        }

        /* ════════ HERO EXPAND — hex titles ════════ */
        @media (max-width: 768px) {
            .hex-t {
                font-size: clamp(1.8rem, 8vw, 3rem);
                letter-spacing: -.02em;
                text-align: center;
            }

            .hex-hint {
                bottom: 1.5rem;
            }

            .hex-hint-text {
                font-size: .68rem;
            }
        }

        /* ════════ ORIGINAL HERO (hex-reveal) ════════ */
        @media (max-width: 900px) {
            .original-hero-inner {
                grid-template-columns: 1fr;
                gap: 0;
                padding: 1rem 0;
            }

            .original-hero-visual {
                display: none !important;
            }

            .hex-reveal {
                padding: 0 4.5vw;
                padding-top: var(--nh);
            }
        }

        @media (max-width: 768px) {
            .orig-hero-h1 {
                font-size: clamp(1.9rem, 7.5vw, 2.8rem);
                line-height: 1.08;
            }

            .orig-hero-sub {
                font-size: .95rem;
                line-height: 1.7;
                max-width: 100%;
            }

            .orig-hero-acts {
                gap: .65rem;
                flex-direction: column;
            }

            .orig-hero-acts .btn-primary,
            .orig-hero-acts .btn-secondary {
                width: 100%;
                justify-content: center;
                padding: .8rem 1.4rem;
            }

            .orig-hero-stats {
                gap: 1.5rem;
            }

            .h-stat-n {
                font-size: 1.6rem;
            }
        }

        @media (max-width: 480px) {
            .orig-hero-badge {
                font-size: .68rem;
                padding: .35rem .8rem;
            }

            .orig-hero-h1 {
                font-size: clamp(1.65rem, 7vw, 2.2rem);
            }

            .orig-hero-stats {
                gap: 1rem;
                flex-wrap: wrap;
            }
        }

        /* ════════ TRUST STRIP ════════ */
        @media (max-width: 768px) {
            .trust-inner {
                padding: 1.5rem 4.5vw;
                gap: 1.4rem;
                justify-content: flex-start;
            }

            .trust-item {
                font-size: .8rem;
                gap: .5rem;
            }
        }

        @media (max-width: 480px) {
            .trust-inner {
                gap: 1rem;
            }

            .trust-item {
                width: calc(50% - .5rem);
            }
        }

        /* ════════ PREMIUM ABOUT (pab) ════════ */
        @media (max-width: 900px) {
            .pab-section {
                padding: 3rem 0;
            }

            .pab-inner {
                grid-template-columns: 1fr;
                gap: 2.5rem;
                padding: 0 4.5vw;
            }

            .pab-img-frame img {
                height: 280px;
            }

            .pab-accent-line {
                display: none;
            }

            .pab-badge {
                right: 1rem;
                bottom: -1rem;
            }

            .pab-headline {
                font-size: clamp(1.5rem, 5.5vw, 2rem);
            }
        }

        @media (max-width: 480px) {
            .pab-badge {
                right: .5rem;
                padding: .7rem 1rem;
                gap: .6rem;
            }

            .pab-stats {
                flex-wrap: wrap;
            }

            .pab-stat {
                flex: 1 1 40%;
            }

            .pab-stat-sep {
                display: none;
            }

            .pab-lead {
                font-size: .9rem;
            }
        }

        /* ════════ SERVICES — split interactive layout ════════ */
        @media (max-width: 900px) {
            .svc-split {
                grid-template-columns: 1fr !important;
                grid-template-rows: auto auto auto;
                min-height: unset;
                gap: 1.5rem;
            }

            /* Make slider box full height on mobile */
            .svc-slider-box {
                height: 310px !important;
            }

            .sv-partition {
                width: 100% !important;
                height: 1px !important;
                background: linear-gradient(to right, transparent, rgba(37, 109, 12, .4) 30%, rgba(37, 109, 12, .4) 70%, transparent) !important;
            }
        }

        @media (max-width: 768px) {
            .sv-hd-sub {
                font-size: 1.3rem;
            }

            .svc-card {
                padding: 1.5rem 1.5rem 1.2rem;
                border-radius: 1.2rem;
            }

            .svc-card-title {
                font-size: 1.3rem;
            }

            .svc-card-book,
            .svc-card-learn {
                opacity: 1 !important;
                transform: translateY(0) !important;
                pointer-events: all !important;
            }

            /* Right panel menu items */
            .svc-right {
                padding-left: 0 !important;
            }

            .svc-menu-item {
                padding: .8rem .9rem;
            }

            .svc-menu-label {
                font-size: .82rem;
            }

            /* Before/After slider — hidden on mobile */
            .ba-slider-wrap {
                display: none !important;
            }

            .svc-compare-hint {
                display: none !important;
            }
        }

        @media (max-width: 480px) {
            .svc-slider-box {
                height: 320px !important;
            }

            .svc-card-icon {
                font-size: 1.8rem;
            }
        }

        /* ════════ STATS SECTION ════════ */
        @media (max-width: 768px) {
            .st-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 1rem;
            }
        }

        @media (max-width: 480px) {
            .st-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: .75rem;
            }

            .st-num {
                font-size: clamp(2rem, 8vw, 2.8rem) !important;
            }
        }

        /* ════════ TREATMENTS ════════ */
        @media (max-width: 1100px) {
            .tr-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }

        @media (max-width: 768px) {
            .tr-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem;
            }

            .tr-card {
                min-height: unset;
            }

            .tr-card-ico-wrap {
                width: 44px;
                height: 44px;
            }

            .tr-card-title {
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .tr-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: .75rem;
            }

            .tr-card {
                padding: 1.1rem;
            }

            .tr-card-title {
                font-size: .88rem;
            }

            .tr-card-desc {
                font-size: .78rem;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }

        /* ════════ DOCTORS ════════ */
        @media (max-width: 1100px) {
            .dr-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }

        @media (max-width: 768px) {
            .dr-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 1rem;
            }

            .dr-card {
                min-height: unset;
            }

            .dr-img-wrap {
                height: 200px;
            }

            .dr-name {
                font-size: .95rem;
            }

            .dr-spec {
                font-size: .75rem;
            }

            .dr-controls {
                gap: .75rem;
            }
        }

        @media (max-width: 480px) {
            .dr-grid {
                grid-template-columns: 1fr !important;
            }

            .dr-img-wrap {
                height: 240px;
            }
        }

        /* ════════ TESTIMONIALS ════════ */
        @media (max-width: 768px) {
            #testimonials .wrap {
                padding: 2.5rem 4vw !important;
            }

            .ts-card {
                width: 300px;
                padding: 1.5rem 1.4rem 1.3rem;
                border-radius: 1.25rem;
            }

            .ts-txt {
                font-size: .85rem;
                line-height: 1.75;
            }

            .ts-track {
                gap: 1rem;
                animation-duration: 28s;
            }
        }

        @media (max-width: 480px) {
            .ts-card {
                width: 260px;
            }

            .ts-stars {
                font-size: .8rem;
            }
        }

        /* ════════ APPOINTMENT ════════ */
        @media (max-width: 900px) {
            .ap-grid {
                grid-template-columns: 1fr !important;
                gap: 2.5rem;
            }

            .ap-lead {
                margin: 1rem 0 1.5rem;
            }
        }

        @media (max-width: 768px) {
            .ap2-outer {
                grid-template-columns: 1fr !important;
                min-height: unset !important;
            }

            .ap2-left {
                padding: 2.5rem 4vw 1.5rem !important;
                border-right: none !important;
                border-bottom: 1px solid rgba(255, 255, 255, .06);
            }

            .ap2-right {
                padding: 1.5rem 4vw 2.5rem !important;
            }

            .ap2-form-wrap {
                padding: 1.5rem 1rem !important;
            }

            .ap2-field-row {
                grid-template-columns: 1fr !important;
            }

            .ap2-headline {
                font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
            }

            .f-grid {
                grid-template-columns: 1fr !important;
            }

            .ap-form {
                padding: 1.75rem 1.25rem;
            }

            .f-ttl {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 480px) {
            .ap-row {
                padding: .9rem 1rem;
                gap: .75rem;
            }

            .ap-ico {
                width: 32px;
                height: 32px;
            }
        }

        /* ════════ CTA BANNER ════════ */
        @media (max-width: 768px) {
            .cb-inner {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 1.5rem;
            }

            .cb-ttl {
                font-size: clamp(1.5rem, 6vw, 2rem);
            }

            .cb-acts {
                flex-direction: column;
                width: 100%;
            }

            .cb-acts .btn-white,
            .cb-acts .btn-primary,
            .cb-acts a {
                width: 100%;
                text-align: center;
                justify-content: center;
            }
        }

        /* ════════ DENTAL TECH ════════ */
        @media (max-width: 900px) {
            .dt-hero-layout {
                grid-template-columns: 1fr !important;
                gap: 2rem;
            }

            .dt-visual-side {
                order: -1;
            }

            .dt-stat-row {
                flex-wrap: wrap;
                gap: 1rem;
            }

            .dt-stat-pill {
                flex: 1 1 40%;
            }
        }

        @media (max-width: 768px) {
            .dt-hero-headline {
                font-size: clamp(1.5rem, 6vw, 2rem) !important;
            }

            .dt-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 1rem;
            }

            .dt-card {
                padding: 1.25rem 1rem;
            }

            .dt-card-title {
                font-size: .9rem;
            }

            .dt-card-desc {
                font-size: .78rem;
            }

            .dt-stat-pills {
                gap: .6rem;
                flex-wrap: wrap;
            }
        }

        @media (max-width: 480px) {
            .dt-grid {
                grid-template-columns: 1fr !important;
            }

            .dt-stat-pill {
                flex: 1 1 100%;
            }
        }

        /* ════════ PATIENT JOURNEY ════════ */
        @media (max-width: 768px) {

            #pj-pin-wrapper,
            .pj-pin-wrapper {
                height: auto !important;
            }

            #patient-journey .wrap {
                overflow: visible;
            }

            .pj-track-wrap {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 0.5rem;
            }

            .pj-track {
                transform: none !important;
                flex-wrap: nowrap;
                gap: 1rem;
            }

            .pj-step {
                width: 260px !important;
                flex-shrink: 0;
                min-height: unset;
                padding: 1.5rem;
            }

            .pj-connector {
                width: 40px;
                flex-shrink: 0;
            }

            .pj-step-title {
                font-size: 1rem;
            }

            .pj-step-desc {
                font-size: .82rem;
            }

            .pj-controls {
                padding-bottom: 0;
                margin-bottom: 0;
            }

            /* Swipe hint — only visible on mobile */
            .pj-swipe-hint {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                font-size: 0.8rem;
                color: #256d0c;
                opacity: 0.75;
                margin-top: 0.75rem;
                font-weight: 500;
                letter-spacing: 0.03em;
                animation: pjSwipePulse 2s ease-in-out infinite;
            }

            @keyframes pjSwipePulse {

                0%,
                100% {
                    opacity: 0.5;
                    transform: translateX(0);
                }

                50% {
                    opacity: 0.9;
                    transform: translateX(3px);
                }
            }
        }

        /* Hide swipe hint on desktop */
        @media (min-width: 769px) {
            .pj-swipe-hint {
                display: none !important;
            }
        }

        @media (max-width: 480px) {
            .pj-step {
                width: 230px !important;
                padding: 1.2rem;
            }
        }

        /* ════════ WHY US ════════ */
        @media (max-width: 768px) {
            .wu-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 1rem;
            }

            .wu-card {
                padding: 1.25rem 1.1rem;
            }

            .wu-card-title {
                font-size: .95rem;
            }

            .wu-card-desc {
                font-size: .8rem;
            }

            .wu-card-badge {
                font-size: .65rem;
            }
        }

        @media (max-width: 480px) {
            .wu-grid {
                grid-template-columns: 1fr !important;
            }
        }

        /* ════════ DENTAL TIMELINE ════════ */
        @media (max-width: 768px) {
            #dental-timeline {
                position: relative !important;
                height: auto !important;
                min-height: unset !important;
                overflow: visible !important;
            }

            .dtl-pin-wrapper {
                height: auto !important;
            }

            .dtl-header {
                padding: 2rem 4.5vw 1rem;
                flex-direction: column;
                align-items: flex-start;
                gap: .6rem;
            }

            .dtl-track-area {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
                padding: 0 4.5vw;
                display: block;
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }

            .dtl-track-area::-webkit-scrollbar {
                display: none !important;
            }

            .dtl-h-track {
                transform: none !important;
                flex-wrap: nowrap;
                display: flex;
                gap: 1rem;
                padding: 1.5rem 0 0.5rem;
            }

            .dtl-h-item {
                width: 240px;
                flex-shrink: 0;
                transform: none !important;
                padding: 0 !important;
                align-items: center !important;
            }

            .dtl-h-item::after {
                display: none;
            }

            .dtl-h-card {
                opacity: 1;
                transform: none;
                width: 220px;
            }

            .dtl-controls .dr-arrow,
            #dtlPrev,
            #dtlNext {
                display: none;
            }

            /* Swipe hint — visible only on mobile */
            .dtl-swipe-hint {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                font-size: 0.8rem;
                color: #256d0c;
                opacity: 0.75;
                margin-top: 0.75rem;
                font-weight: 500;
                letter-spacing: 0.03em;
                animation: dtlSwipePulse 2s ease-in-out infinite;
            }

            @keyframes dtlSwipePulse {

                0%,
                100% {
                    opacity: 0.5;
                    transform: translateX(0);
                }

                50% {
                    opacity: 0.9;
                    transform: translateX(3px);
                }
            }
        }

        /* Hide swipe hint on desktop */
        @media (min-width: 769px) {
            .dtl-swipe-hint {
                display: none !important;
            }
        }

        /* ════════ FAQ ════════ */
        @media (max-width: 900px) {
            .faq-inner {
                grid-template-columns: 1fr !important;
                gap: 1.5rem;
            }
        }

        @media (max-width: 768px) {

            #faq,
            .faq-section,
            section.faq {
                padding: 2.5rem 4vw !important;
            }

            .faq-col-hd {
                font-size: clamp(1.5rem, 6vw, 2rem) !important;
            }

            .faq-q {
                padding: 1rem 1rem;
            }

            .faq-q-text {
                font-size: .9rem;
            }
        }

        /* ════════ FOOTER ════════ */
        @media (max-width: 900px) {
            .ft-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 2rem 1.5rem;
            }

            .ft-brand {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 768px) {
            footer {
                padding: 2.5rem 4vw 1.5rem !important;
            }

            .ft-logo {
                height: 40px;
            }

            .ft-bottom {
                flex-direction: column;
                gap: .5rem;
                text-align: center;
                font-size: .78rem;
            }
        }

        @media (max-width: 480px) {
            .ft-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 1.5rem 1rem;
            }

            .ft-col h4 {
                font-size: .8rem;
            }

            .ft-col ul li a {
                font-size: .82rem;
            }
        }

        @media (max-width: 360px) {
            .ft-grid {
                grid-template-columns: 1fr !important;
            }
        }

        /* ════════ FLOATING WIDGETS ════════ */
        @media (max-width: 768px) {
            #floatAppt {
                left: 1rem;
                bottom: 1.2rem;
                font-size: .75rem;
                padding: .55rem .9rem .55rem .75rem;
            }

            #btt {
                width: 46px;
                height: 46px;
                right: 1rem;
                bottom: 1.2rem;
            }

            #luxCursor,
            #luxCursorDot {
                display: none !important;
            }
        }

        /* ════════ HERO — cinematic bg on small screens ════════ */
        @media (max-width: 768px) {
            #heroCineBg::after {
                display: none;
            }

            /* remove corner glow on mobile */
            #heroCineBgImg {
                animation: none;
                transform: scale(1.06);
            }

            /* stop breathing on mobile */
        }

        /* ════════ SECTION LABELS — center on mobile ════════ */
        @media (max-width: 600px) {

            /* Ensure section labels don't overflow */
            .s-lbl {
                font-size: .65rem;
                letter-spacing: .12em;
            }

            .s-ttl {
                font-size: clamp(1.4rem, 6vw, 2rem);
            }
        }

        /* ════════ SCROLL-DRIVEN horizontal sections on very small screens ════════ */
        @media (max-width: 480px) {

            /* Patient journey & dental timeline track: natural scroll, no sticky */
            .pj-step {
                width: 80vw !important;
            }

            .dtl-h-item {
                width: 75vw !important;
            }

            .dtl-h-card {
                width: calc(75vw - 20px) !important;
            }

            /* Testimonial cards */
            .ts-card {
                width: 82vw;
            }

            /* Reduce floating badge overhang */
            .pab-badge {
                right: .25rem;
                bottom: -0.5rem;
                transform: scale(.88);
                transform-origin: bottom right;
            }

            /* Buttons full-width */
            .btn-primary,
            .btn-secondary {
                font-size: .85rem;
                padding: .75rem 1.25rem;
            }
        }

        /* ════════ Preserve all animations but reduce on prefers-reduced-motion ════════ */
        @media (prefers-reduced-motion: reduce) {

            .fade-in,
            .slide-left,
            .slide-right,
            .scale-pop,
            .flip-up {
                transition: none !important;
                opacity: 1 !important;
                transform: none !important;
            }

            #heroCineBgImg {
                animation: none !important;
            }

            .ts-track {
                animation: none !important;
            }

            .float-anim,
            .pab-badge {
                animation: none !important;
            }

            @keyframes hintDrop {

                from,
                to {
                    transform: rotate(45deg);
                }
            }
        }

        /* ════════ Fix horizontal overflow on all screens ════════ */
        body {
            overflow-x: hidden;
            overflow-x: clip;
        }

        section,
        .wrap,
        .wrap-sm {
            max-width: 100vw;
            overflow-x: hidden;
            overflow-x: clip;
        }

        /* ════════ Touch-friendly tap targets ════════ */
        @media (max-width: 768px) {

            .btn-primary,
            .btn-secondary,
            .btn-nav,
            .btn-white,
            .btn-submit,
            .faq-q,
            .svc-menu-item,
            .dr-arrow,
            .ts-dot {
                min-height: 44px;
            }

            .m-nav a {
                padding: .3rem 0;
                min-height: 44px;
                display: flex;
                align-items: center;
            }
        }

        /* ════════ SERVICES — right panel on mobile ════════ */
        @media (max-width: 768px) {
            .svc-right {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: .6rem;
            }

            .svc-menu-item {
                border-radius: .75rem;
                border: 1px solid rgba(37, 109, 12, .15);
                background: rgba(255, 255, 255, .04);
            }

            .svc-menu-item.svc-active {
                background: rgba(37, 109, 12, .12);
                border-color: rgba(37, 109, 12, .4);
            }

            .svc-menu-progress {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .svc-right {
                grid-template-columns: 1fr;
            }
        }

        /* ════════════════════════════════════════════════════════════
           COMPREHENSIVE MOBILE RESPONSIVE FIXES
           Applied on top of existing breakpoints for full coverage
        ════════════════════════════════════════════════════════════ */

        /* ── HERO SECTION ── */
        @media (max-width: 768px) {
            .original-hero-inner {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 1.5rem 0;
            }

            .orig-hero-h1 {
                font-size: clamp(1.8rem, 8vw, 2.6rem);
            }

            .orig-hero-sub {
                font-size: .95rem;
                line-height: 1.7;
                max-width: 100%;
            }

            .orig-hero-acts {
                gap: .75rem;
            }

            .orig-hero-stats {
                gap: 1.5rem;
            }

            .hex-reveal {
                padding: 2rem 4vw;
            }
        }

        @media (max-width: 480px) {
            .orig-hero-acts {
                flex-direction: column;
                width: 100%;
            }

            .orig-hero-acts .btn-primary,
            .orig-hero-acts .btn-secondary {
                width: 100%;
                justify-content: center;
            }

            .orig-hero-stats {
                gap: 1rem;
                flex-wrap: wrap;
            }
        }

        /* ── TRUST STRIP ── */
        @media (max-width: 600px) {
            .trust-inner {
                flex-direction: column;
                align-items: flex-start;
                gap: .9rem;
                padding: 1.5rem 5vw;
            }

            .trust-div {
                display: none;
            }

            .trust-item {
                width: 100%;
            }
        }

        /* ── ABOUT (pab) ── */
        @media (max-width: 768px) {
            .pab-inner {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .pab-visual {
                margin-bottom: 1.5rem;
            }

            .pab-img-frame img {
                height: 260px;
            }

            .pab-badge {
                right: .5rem;
                bottom: -1rem;
                padding: .7rem 1rem;
                transform-origin: bottom right;
                transform: scale(.9);
            }

            .pab-accent-line {
                display: none;
            }

            .pab-stats {
                flex-wrap: wrap;
            }

            .pab-stat {
                flex: 1 1 45%;
            }
        }

        @media (max-width: 480px) {
            .pab-section {
                padding: 2.5rem 0;
            }

            .pab-badge {
                position: static;
                margin-top: 1rem;
                transform: none;
                display: inline-flex;
            }

            .pab-headline {
                font-size: clamp(1.5rem, 7vw, 2rem);
            }
        }

        /* ── PREMIUM ABOUT (opening hours card) ── */
        @media (max-width: 768px) {
            .premium-about {
                padding: 3rem 5vw !important;
            }

            .premium-about-container {
                grid-template-columns: 1fr;
            }

            /* Restore right-side padding so the card can overhang — exactly like desktop */
            .premium-about-image-wrap {
                padding-right: 60px !important;
                padding-bottom: 20px !important;
                overflow: visible;
                position: relative;
            }

            /* Taller image to accommodate the card hanging at the bottom-right */
            .premium-about-image-wrap img {
                height: 420px !important;
            }

            /* Card overhangs at bottom-right — mirroring the desktop layout */
            .opening-card {
                position: absolute !important;
                top: auto !important;
                left: auto !important;
                right: -10px !important;
                bottom: -5px !important;
                width: 300px !important;
                max-width: calc(100vw - 60px) !important;
                padding: 22px 24px !important;
                margin-top: 0 !important;
                z-index: 5 !important;
                animation: floatCard 4s ease-in-out infinite !important;
            }

            .opening-card h3 {
                font-size: 1.1rem !important;
                margin-bottom: 12px !important;
            }

            .opening-card .hour-row {
                font-size: 0.95rem !important;
                padding: 7px 0 !important;
            }
        }

        /* ── SERVICES ── */
        @media (max-width: 768px) {
            .svc-split {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .svc-divider {
                flex-direction: row;
                min-height: unset;
                height: 2px;
                width: 100%;
                justify-content: flex-start;
            }

            .svc-divider-line {
                flex: 1;
                width: 100%;
                height: 1.5px;
                background: linear-gradient(to right, transparent, rgba(37, 109, 12, .5) 20%, rgba(37, 109, 12, .5) 80%, transparent);
            }

            .svc-slider-box {
                height: 310px !important;
            }

            #services .wrap {
                padding-top: 3rem !important;
                padding-bottom: 3rem !important;
            }
        }

        @media (max-width: 480px) {
            .svc-slider-box {
                height: 320px !important;
            }

            .svc-card {
                padding: 1.5rem 1.25rem;
            }
        }

        /* ── TREATMENTS ── */
        @media (max-width: 768px) {
            .tr-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                grid-template-rows: none !important;
                gap: .75rem;
            }

            .tr-card {
                min-height: 160px;
            }

            .tr-card-desc,
            .tr-card-cta {
                opacity: 1;
                transform: none;
            }

            #treatments .s-ttl {
                font-size: clamp(1.8rem, 7vw, 2.8rem);
            }
        }

        @media (max-width: 400px) {
            .tr-grid {
                grid-template-columns: 1fr !important;
            }
        }

        /* ── STATS ── */
        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
            }

            .st-card {
                padding: 2rem 1rem;
            }

            .st-n {
                font-size: 2.8rem;
            }
        }

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

        /* ── DOCTORS ── */
        @media (max-width: 768px) {
            .dr-layout {
                grid-template-columns: 1fr;
            }

            .dr-left {
                padding: 2.5rem 5vw 1.5rem;
            }

            .dr-carousel {
                padding: 1.5rem 5vw 2rem;
            }

            .dr-card {
                width: 260px;
            }
        }

        @media (max-width: 480px) {
            .dr-card {
                width: calc(85vw);
            }
        }

        /* ── TESTIMONIALS ── */
        @media (max-width: 768px) {
            .ts-hd {
                margin-bottom: 2rem;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-end;
                text-align: left;
            }

            .ts-card {
                width: 300px;
                padding: 1.5rem 1.5rem 1.25rem;
            }

            /* Fix dots — override the global 44px min-height tap target which breaks shape */
            .ts-dot {
                min-height: unset !important;
                height: 6px !important;
                width: 6px !important;
                border-radius: 50% !important;
            }

            .ts-dot.active {
                width: 22px !important;
                height: 6px !important;
                border-radius: 99px !important;
            }

            /* Prev / Next buttons — proper circular size on mobile */
            .ts-btn {
                width: 40px !important;
                height: 40px !important;
                min-height: unset !important;
                font-size: 1rem !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            /* Dots row — tighten up spacing */
            .ts-dots {
                margin-top: 1.25rem;
                gap: .45rem;
            }
        }

        /* ── APPOINTMENT ── */
        @media (max-width: 900px) {
            .ap-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
        }

        @media (max-width: 768px) {
            .ap-form {
                padding: 1.75rem 1.25rem;
            }

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

            .ap-lead {
                font-size: .88rem;
            }
        }

        /* ── CTA BANNER ── */
        @media (max-width: 768px) {
            .cb-inner {
                flex-direction: column;
                align-items: flex-start;
                gap: 1.5rem;
            }

            .cb-ttl {
                font-size: clamp(1.5rem, 6vw, 2rem);
            }

            .cb-acts {
                flex-direction: column;
                width: 100%;
            }

            .cb-acts .btn-white,
            .cb-acts .btn-primary,
            .cb-acts .btn-outline-white,
            .cb-acts a {
                width: 100%;
                justify-content: center;
                text-align: center;
            }
        }

        /* ── FOOTER ── */
        @media (max-width: 768px) {
            .ft-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2rem 1.5rem;
            }

            .ft-brand {
                grid-column: 1 / -1;
            }

            footer {
                padding: 2.5rem 4vw 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .ft-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .ft-bot {
                flex-direction: column;
                align-items: flex-start;
                gap: .5rem;
            }
        }

        /* ── HERO STATS STRIP ── */
        @media (max-width: 600px) {

            .hex-stats,
            .h-stat-n {
                font-size: 1.5rem;
            }

            .orig-hero-stats>* {
                min-width: 80px;
            }
        }

        /* ── GLOBAL: prevent text overflow on narrow screens ── */
        @media (max-width: 480px) {

            h1,
            h2,
            h3,
            .s-ttl,
            .pab-headline,
            .ab-headline,
            .orig-hero-h1,
            .cb-ttl,
            .faq-heading {
                word-break: break-word;
                overflow-wrap: break-word;
            }

            .wrap,
            .wrap-sm {
                padding-left: 4vw;
                padding-right: 4vw;
            }

            /* Hero actions */
            .orig-hero-acts a,
            .orig-hero-acts button {
                width: 100%;
                justify-content: center;
            }

            /* Section labels smaller on tiny screens */
            .s-lbl {
                font-size: .6rem;
                letter-spacing: .1em;
            }
        }



        /* ── FIX: svc-compare widget on mobile ── */
        @media (max-width: 768px) {

            .svc-compare,
            .sv-compare-wrap {
                max-width: 100%;
            }

            .compare-before svg {
                width: 100%;
            }
        }

        /* ═══════════════════════════════════════════════════════════════
           COMPREHENSIVE RESPONSIVE OVERHAUL
           — Video hero expand, appointment (ap2), dental-tech, patient-
             journey, why-us, dental-timeline, FAQ, footer, and all grids
        ═══════════════════════════════════════════════════════════════ */

        /* ── VIDEO HERO EXPAND — responsive card sizing ── */
        /* Already handled in JS calcSizes(), but ensure the stage itself
           never overflows on very small screens */
        @media (max-width: 480px) {
            #hexStage {
                overflow: hidden;
            }

            .hex-card {
                border-radius: .75rem !important;
            }

            .hex-titles {
                padding: 0 1rem;
                text-align: center;
            }

            .hex-t {
                font-size: clamp(1.5rem, 7.5vw, 2.2rem);
            }
        }

        /* ── VIDEO EXPAND — ensure video is always responsive ── */
        .hex-card video,
        video {
            max-width: 100%;
        }

        /* Responsive video wrapper utility — use for any embed */
        .video-responsive-wrap {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            /* 16:9 */
            height: 0;
            overflow: hidden;
            border-radius: var(--r);
        }

        .video-responsive-wrap iframe,
        .video-responsive-wrap video,
        .video-responsive-wrap embed,
        .video-responsive-wrap object {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* ── APPOINTMENT SECTION — ap2-outer two-column → single ── */
        @media (max-width: 900px) {
            .ap2-outer {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .ap2-left {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                padding: 3rem 2.5rem;
            }

            .ap2-right {
                padding: 2.5rem 2.5rem 3rem;
            }

            .ap2-form-wrap {
                max-width: 100%;
            }
        }

        @media (max-width: 768px) {
            .ap2-outer {
                grid-template-columns: 1fr;
            }

            .ap2-left {
                padding: 2.5rem 5vw;
            }

            .ap2-right {
                padding: 2rem 5vw 2.5rem;
            }

            .ap2-heading {
                font-size: clamp(1.7rem, 6vw, 2.4rem);
            }

            .ap2-trust {
                flex-wrap: wrap;
                gap: 1rem;
            }

            .ap2-trust-item {
                flex: 1 1 calc(33% - .5rem);
                min-width: 70px;
            }

            /* Form fields — single column on mobile */
            .ap2-fields .ap2-field-row {
                flex-direction: column;
            }

            .ap2-field-group {
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            .ap2-left {
                padding: 2rem 4.5vw;
            }

            .ap2-right {
                padding: 1.5rem 4.5vw 2rem;
            }

            .ap2-form-wrap {
                padding: 1.75rem 1.25rem 1.5rem;
            }

            .ap2-heading {
                font-size: clamp(1.5rem, 7vw, 2rem);
                line-height: 1.15;
            }

            .ap2-steps {
                gap: .4rem;
            }

            .ap2-steps small {
                font-size: .6rem;
            }
        }

        /* ── DENTAL TECH SECTION ── */
        @media (max-width: 1024px) {

            .dt-hero-grid,
            .dt-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .dt-hero-visual {
                order: -1;
            }
        }

        @media (max-width: 768px) {
            #dental-tech {
                padding-top: 3rem;
                padding-bottom: 3rem;
            }

            .dt-hero-headline {
                font-size: clamp(1.7rem, 6vw, 2.6rem);
            }

            .dt-hero-desc {
                font-size: .92rem;
            }

            .dt-cards-grid {
                grid-template-columns: 1fr 1fr;
                gap: .85rem;
            }

            .dt-card {
                padding: 1.25rem 1rem;
            }

            .dt-card-icon {
                width: 44px;
                height: 44px;
                font-size: 1.3rem;
            }

            .dt-card-title {
                font-size: .9rem;
            }

            .dt-card-desc {
                font-size: .78rem;
            }

            /* Tech feature list stacks */
            .dt-features {
                flex-direction: column;
                gap: .75rem;
            }

            .dt-feature-item {
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            .dt-cards-grid {
                grid-template-columns: 1fr;
            }

            .dt-hero-headline {
                font-size: clamp(1.5rem, 7vw, 2rem);
            }

            #dental-tech .wrap {
                padding-top: 2rem;
                padding-bottom: 2rem;
            }
        }

        /* ── PATIENT JOURNEY SECTION ── */
        @media (max-width: 900px) {

            .pj-grid,
            .journey-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .pj-visual,
            .journey-visual {
                display: none;
            }
        }

        @media (max-width: 768px) {
            #patient-journey {
                padding: 2rem 0 !important;
                height: auto !important;
                min-height: unset !important;
                position: relative !important;
                overflow: visible !important;
            }

            .pj-inner {
                display: block !important;
                height: auto !important;
                padding: 2rem 4.5vw 0 !important;
            }

            .pj-header {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 0.75rem !important;
            }

            .pj-track-wrap {
                padding: 0 4.5vw !important;
            }

            .pj-steps,
            .journey-steps {
                gap: 1.25rem;
            }

            .pj-step,
            .journey-step {
                width: 280px !important;
                min-height: 250px !important;
                padding: 1.5rem !important;
            }

            .pj-step-num,
            .journey-step-num {
                font-size: 1.2rem;
                width: 38px;
                height: 38px;
                flex-shrink: 0;
            }

            #patient-journey .s-ttl {
                font-size: clamp(1.6rem, 6vw, 2.4rem);
            }
        }

        /* ── WHY US SECTION ── */
        @media (max-width: 1024px) {
            .wu-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1.25rem;
            }
        }

        @media (max-width: 768px) {
            #why-us {
                padding: 3rem 0;
            }

            .wu-hd {
                text-align: center;
            }

            .wu-hd .s-lbl {
                justify-content: center;
            }

            .wu-hd .s-lbl::before {
                display: none;
            }

            .wu-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
            }

            .wu-card {
                padding: 1.25rem 1rem;
            }

            .wu-card-ico {
                width: 44px;
                height: 44px;
                font-size: 1.3rem;
            }

            .wu-card-ttl {
                font-size: .88rem;
            }

            .wu-card-txt {
                font-size: .8rem;
            }
        }

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

            #why-us .s-ttl {
                font-size: clamp(1.5rem, 7vw, 2rem);
            }
        }

        /* ── DENTAL TIMELINE SECTION ── */
        @media (max-width: 900px) {
            .dtl-track {
                flex-direction: column;
                align-items: flex-start;
                gap: 1.5rem;
            }

            .dtl-connector {
                display: none;
            }

            .dtl-item {
                width: 100%;
                flex-direction: row;
                align-items: flex-start;
                gap: 1.25rem;
            }

            .dtl-dot {
                flex-shrink: 0;
                margin-top: .25rem;
            }
        }

        @media (max-width: 768px) {
            #dental-timeline {
                padding: 2rem 0 !important;
            }

            .dtl-header {
                padding: 2rem 4.5vw 0 !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 0.75rem !important;
            }

            .dtl-track-area {
                padding: 0 4.5vw !important;
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }

            .dtl-track-area::-webkit-scrollbar {
                display: none !important;
            }

            .dtl-h-item {
                width: 300px !important;
            }

            .dtl-h-item:not(:last-child)::after {
                display: none !important;
            }

            .dtl-h-card {
                width: 270px !important;
                min-height: 250px !important;
                padding: 1.5rem !important;
            }

            .dtl-header .s-ttl {
                font-size: clamp(1.6rem, 6vw, 2.4rem);
            }

            .dtl-year {
                font-size: 0.72rem !important;
            }

            .dtl-event {
                font-size: .9rem !important;
            }

            .dtl-desc {
                font-size: .8rem !important;
            }
        }

        /* ── STATS SECTION ── */
        @media (max-width: 1024px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: .85rem;
            }

            .st-n {
                font-size: 2.4rem;
            }

            .st-lbl {
                font-size: .7rem;
            }
        }

        /* ── FAQ SECTION ── */
        @media (max-width: 768px) {

            #faq,
            .faq-section {
                padding: 3rem 0;
            }

            .faq-heading {
                font-size: clamp(1.5rem, 6vw, 2.2rem);
            }

            .faq-q {
                font-size: .92rem;
                padding: 1rem 1.1rem;
            }

            .faq-q-text {
                font-size: .9rem;
            }

            .faq-a p,
            .faq-a li {
                font-size: .88rem;
            }

            .faq-a {
                padding: 0 1.1rem;
            }

            .faq-item.open .faq-a {
                padding: .75rem 1.1rem 1.1rem;
            }
        }

        @media (max-width: 480px) {

            #faq .wrap,
            .faq-section .wrap {
                padding-left: 4.5vw;
                padding-right: 4.5vw;
            }

            .faq-item {
                border-radius: .75rem;
            }
        }

        /* ── CTA BANNER ── */
        @media (max-width: 480px) {
            #ctabanner {
                padding: 2.5rem 4.5vw;
            }

            .cb-inner {
                gap: 1.25rem;
            }

            .cb-ttl {
                font-size: clamp(1.4rem, 7vw, 1.9rem);
            }

            .cb-sub {
                font-size: .88rem;
            }

            .cb-acts {
                gap: .75rem;
            }

            .btn-white,
            .btn-outline-white {
                padding: .8rem 1.4rem;
                font-size: .88rem;
                width: 100%;
                text-align: center;
                justify-content: center;
                display: flex;
            }
        }

        /* ── ABOUT SECTION (ab-grid) ── */
        @media (max-width: 768px) {
            .ab-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .ab-right {
                height: 220px;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: 1fr;
                gap: .75rem;
            }

            .ab-card:nth-child(1) {
                grid-row: unset;
            }

            .ab-stats-row {
                width: 100%;
            }

            .ab-stat-cell {
                flex: 1;
            }
        }

        @media (max-width: 480px) {
            .ab-right {
                height: 180px;
                grid-template-columns: 1fr 1fr 1fr;
            }

            .ab-card-n {
                font-size: 1.6rem;
            }

            .ab-card:nth-child(1) .ab-card-n {
                font-size: 1.9rem;
            }

            .ab-headline {
                font-size: clamp(1.6rem, 7vw, 2.2rem);
            }
        }

        /* ── DOCTOR SECTION ── */
        @media (max-width: 900px) {
            .dr-layout {
                display: flex;
                flex-direction: column;
            }

            .dr-left {
                padding: 2.5rem 5vw 1rem;
            }

            .dr-arrows-row {
                display: flex;
                gap: .5rem;
            }
        }

        /* ── TESTIMONIALS — smaller card width on mobile ── */
        @media (max-width: 480px) {
            .ts-card {
                width: 280px;
            }

            .ts-txt {
                font-size: .85rem;
            }
        }

        /* ── OPENING HOURS / PREMIUM ABOUT ── */
        @media (max-width: 480px) {
            .premium-about {
                padding: 2.5rem 4.5vw !important;
            }

            /* Restore right-side padding so the card can overhang on small phones */
            .premium-about-image-wrap {
                padding-right: 45px !important;
                padding-bottom: 15px !important;
            }

            /* Keep image tall enough for card to overlay on small phones */
            .premium-about-image-wrap img {
                height: 400px !important;
            }

            .opening-card {
                left: auto !important;
                right: -8px !important;
                bottom: -5px !important;
                width: 260px !important;
                max-width: calc(100vw - 50px) !important;
                padding: 18px 20px !important;
            }

            .opening-card h3 {
                font-size: 1.05rem !important;
                margin-bottom: 10px !important;
            }

            .opening-card .hour-row {
                font-size: 0.9rem !important;
                padding: 6px 0 !important;
            }
        }

        /* ── SERVICES SECTION — heading ── */
        @media (max-width: 768px) {
            .sv-hd .s-ttl {
                font-size: clamp(1.8rem, 7vw, 2.4rem);
                font-weight: 800;
            }

            .sv-hd-sub {
                font-size: 1.3rem;
                margin-top: .6rem;
            }
        }

        /* ── HERO REVEAL — vertical padding fine-tune ── */
        @media (max-width: 480px) {
            .hex-reveal {
                align-items: flex-start;
                padding-top: calc(var(--nh) + 1rem);
            }

            .original-hero-inner {
                padding: 0;
            }

            .orig-hero-h1 {
                font-size: clamp(1.55rem, 8vw, 2.1rem);
            }
        }

        /* ── GLOBAL OVERFLOW GUARD ── */
        @media (max-width: 768px) {

            section,
            footer,
            .wrap,
            .wrap-sm {
                overflow-x: hidden;
            }

            /* Prevent absolute/fixed badge overflow */
            .pab-badge {
                max-width: calc(100% - 1rem);
            }
        }

        /* ── TABLET TWEAKS (600–900) ── */
        @media (min-width: 600px) and (max-width: 900px) {
            .sv-hd .s-ttl {
                font-size: clamp(2.6rem, 5vw, 4rem);
                font-weight: 800;
            }

            .ap2-heading {
                font-size: clamp(1.8rem, 4vw, 2.6rem);
            }

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

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

            .pab-inner {
                padding: 0 4vw;
            }

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

        /* ── LARGE SCREEN GUARD (prevents excessive stretching) ── */
        @media (min-width: 1400px) {

            .original-hero-inner,
            .pab-inner {
                max-width: 1400px;
                margin-left: auto;
                margin-right: auto;
            }
        }

        /* ══════════════════════════════════════════
           BRANCHES SECTION
        ══════════════════════════════════════════ */
        #branches {
            background: var(--off-white);
            position: relative;
            overflow: hidden;
        }

        #branches::before {
            content: '';
            position: absolute;
            top: -80px;
            right: -80px;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(37, 109, 12, .08) 0%, transparent 70%);
            pointer-events: none;
        }

        .branches-header {
            text-align: center;
            max-width: 580px;
            margin: 0 auto 3rem;
        }

        .branches-header .s-lbl {
            justify-content: center;
        }

        .branches-header .s-lbl::before {
            display: none;
        }

        .branches-sub {
            margin-top: .9rem;
            font-size: .95rem;
            color: var(--text-muted);
            line-height: 1.7;
        }

        .branches-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.25rem;
            max-width: 1300px;
            margin: 0 auto;
            padding-top: 2rem;
            align-items: stretch;
        }

        .br-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 1rem;
            padding: 1.6rem 1.4rem 1.4rem;
            display: flex;
            flex-direction: column;
            gap: .85rem;
            transition: box-shadow .3s, transform .3s, border-color .3s;
            position: relative;
            overflow: hidden;
        }

        .br-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--teal), var(--sage));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .br-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-5px);
            border-color: rgba(37, 109, 12, .3);
        }

        .br-card:hover::after {
            transform: scaleX(1);
        }

        .br-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .br-icon {
            width: 44px;
            height: 44px;
            border-radius: .65rem;
            background: var(--teal-lt);
            color: var(--teal);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .br-badge {
            font-size: .67rem;
            font-weight: 600;
            letter-spacing: .13em;
            text-transform: uppercase;
            color: var(--teal);
            background: var(--teal-lt);
            padding: .28rem .75rem;
            border-radius: 99px;
        }

        .br-name {
            font-family: 'Manrope', Georgia, serif;
            font-size: 1.3rem;
            font-weight: 400;
            color: var(--navy) !important;
            line-height: 1.1;
        }

        .br-address {
            font-style: normal;
            font-size: .82rem;
            color: var(--text-muted);
            line-height: 1.65;
            display: flex;
            align-items: flex-start;
            gap: .45rem;
            flex-grow: 1;
        }

        .br-address svg {
            flex-shrink: 0;
            margin-top: .2rem;
            color: var(--teal);
        }

        .br-meta {
            display: flex;
            flex-direction: column;
            gap: .4rem;
            border-top: 1px solid var(--gray2);
            padding-top: .85rem;
        }

        .br-hours,
        .br-phone {
            font-size: .79rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: .45rem;
        }

        .br-hours svg,
        .br-phone svg {
            color: var(--teal);
            flex-shrink: 0;
        }

        .br-actions {
            display: flex;
            gap: .6rem;
            margin-top: auto;
            padding-top: .4rem;
            flex-wrap: wrap;
        }

        .br-btn-primary {
            flex: 1;
            min-width: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            background: var(--teal);
            color: #fff !important;
            font-size: .8rem;
            font-weight: 500;
            padding: .62rem .9rem;
            border-radius: .5rem;
            font-family: inherit;
            transition: background .2s, transform .2s;
            white-space: nowrap;
        }

        .br-btn-primary:hover {
            background: var(--navy);
            transform: translateY(-1px);
        }

        .br-btn-secondary {
            flex: 1;
            min-width: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            background: transparent;
            color: var(--teal) !important;
            border: 1.5px solid var(--teal);
            font-size: .8rem;
            font-weight: 500;
            padding: .62rem .9rem;
            border-radius: .5rem;
            font-family: inherit;
            transition: background .2s, color .2s, transform .2s;
            white-space: nowrap;
        }

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

        /* Branches heading color fix (global .s-ttl is white) */
        #branches .s-ttl {
            color: var(--navy) !important;
        }

        #branches .s-ttl em {
            color: var(--teal) !important;
            -webkit-text-fill-color: var(--teal) !important;
            background: none !important;
        }

        @media (max-width: 1100px) {
            .branches-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

            .br-card {
                padding: 1.4rem 1.2rem 1.2rem;
            }
        }

        @media (max-width: 480px) {
            .br-actions {
                flex-direction: column !important;
                gap: 0.5rem !important;
            }

            .br-btn-primary,
            .br-btn-secondary {
                width: 100% !important;
                flex: none !important;
            }
        }

        /* ══════════════════════════════════════════════════════════════════
           UNIVERSAL RESPONSIVE LAYER — covers all missing intermediate
           breakpoints for laptop (1024–1440px) and all mobile sizes.
           No content or existing logic changed — purely layout/spacing fixes.
        ══════════════════════════════════════════════════════════════════ */

        /* ── Ensure nothing overflows horizontally on any screen ── */
        html,
        body {
            max-width: 100%;
            overflow-x: hidden;
            overflow-x: clip;
        }

        img,
        video,
        iframe,
        embed,
        object {
            max-width: 100%;
        }

        /* ── LARGE LAPTOP (1280–1440px): Tighten nav padding & font ── */
        @media (min-width: 1280px) and (max-width: 1440px) {
            nav {
                padding: 0 4vw;
            }

            .n-links {
                gap: 1.6rem;
            }

            .n-links a {
                font-size: .98rem;
            }

            .btn-nav {
                padding: .85rem 2rem;
                font-size: 1rem;
            }

            .original-hero-inner {
                max-width: 1200px;
            }
        }

        /* ── MEDIUM LAPTOP (1024–1279px): Compact nav, tighten grids ── */
        @media (min-width: 901px) and (max-width: 1279px) {
            nav {
                padding: 0 3.5vw;
            }

            .n-links {
                gap: 1.25rem;
            }

            .n-links a {
                font-size: .92rem;
            }

            .btn-nav {
                padding: .75rem 1.5rem;
                font-size: .92rem;
            }

            .original-hero-inner {
                gap: 2rem;
                max-width: 100%;
                padding: 1.5rem 0;
            }

            .hero-img-card {
                padding: 1.8rem;
            }

            .wrap {
                padding: 3rem 4vw;
            }

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

            .pab-inner {
                gap: 2.5rem;
                padding: 0 4vw;
            }

            .svc-split {
                gap: 1.5rem;
            }
        }

        /* ── TABLET PORTRAIT (768–900px): Single column hero, compact nav ── */
        @media (min-width: 769px) and (max-width: 900px) {
            .original-hero-inner {
                grid-template-columns: 1fr;
                padding: 1rem 0;
            }

            .original-hero-visual {
                display: none !important;
            }

            .wrap {
                padding: 2.5rem 4vw;
            }

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

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

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

        /* ── MOBILE LANDSCAPE & SMALL TABLET (600–768px) ── */
        @media (max-width: 768px) {

            /* Nav */
            nav {
                padding: 0 4vw;
                height: 64px;
            }

            :root {
                --nh: 64px;
            }

            /* Hero */
            .orig-hero-h1 {
                font-size: clamp(1.7rem, 6.5vw, 2.4rem);
            }

            /* Sections */
            .wrap,
            .wrap-sm {
                padding: 2.5rem 4.5vw;
            }

            /* Appointment form */
            .ap2-form {
                padding: 1.5rem;
            }

            /* Stats */
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
        }

        /* ── STANDARD MOBILE (480–600px) ── */
        @media (max-width: 600px) {

            /* Nav */
            nav {
                padding: 0 4vw;
            }

            .nav-logo {
                height: 48px;
            }

            /* Hero */
            .orig-hero-h1 {
                font-size: clamp(1.6rem, 7vw, 2.2rem);
            }

            .orig-hero-sub {
                font-size: .9rem;
            }

            /* Sections */
            .wrap {
                padding: 2rem 4vw;
            }

            .s-ttl {
                font-size: clamp(1.4rem, 5.5vw, 2rem);
            }

            /* Trust */
            .trust-inner {
                gap: 1rem;
                flex-wrap: wrap;
            }

            .trust-div {
                display: none;
            }

            /* Branches */
            .branches-grid {
                grid-template-columns: 1fr;
            }

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

            /* Doctor grid */
            .dr-grid {
                grid-template-columns: 1fr;
            }

            /* Testimonials */
            .ts-card {
                padding: 1.4rem 1.2rem;
            }
        }

        /* ── SMALL MOBILE (360–480px) ── */
        @media (max-width: 480px) {

            /* Nav */
            nav {
                padding: 0 3.5vw;
            }

            .nav-logo {
                height: 44px;
            }

            /* Hero */
            .orig-hero-h1 {
                font-size: clamp(1.45rem, 7.5vw, 2rem);
                line-height: 1.1;
            }

            .orig-hero-sub {
                font-size: .85rem;
                line-height: 1.65;
            }

            .orig-hero-stats {
                gap: .85rem;
                flex-wrap: wrap;
            }

            .h-stat-n {
                font-size: 1.4rem;
            }

            .h-stat-l {
                font-size: .65rem;
            }

            /* Sections */
            .wrap {
                padding: 1.75rem 3.5vw;
            }

            .s-ttl {
                font-size: clamp(1.3rem, 6vw, 1.85rem);
            }

            .s-lbl {
                font-size: .68rem;
            }

            /* Buttons */
            .btn-primary,
            .btn-secondary {
                padding: .75rem 1.4rem;
                font-size: .85rem;
            }

            /* Stats */
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: .75rem;
            }

            /* Branches */
            .br-card {
                padding: 1.2rem 1rem 1rem;
            }

            .br-name {
                font-size: 1.15rem;
            }

            /* Footer */
            .ft-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1.25rem 1rem;
            }

            /* Testimonials */
            .ts-card {
                padding: 1.2rem 1rem;
            }
        }

        /* ── VERY SMALL MOBILE (< 360px) ── */
        @media (max-width: 360px) {
            nav {
                padding: 0 3vw;
            }

            .nav-logo {
                height: 40px;
            }

            nav .btn-nav {
                padding: 0.35rem 0.6rem !important;
                font-size: 0.72rem !important;
            }

            .orig-hero-h1 {
                font-size: clamp(1.25rem, 8vw, 1.7rem);
            }

            .wrap {
                padding: 1.5rem 3vw;
            }

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

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

            .btn-primary,
            .btn-secondary {
                width: 100%;
                justify-content: center;
            }
        }

        /* ── EXTRA LARGE SCREENS (≥ 1600px): prevent excessive stretch ── */
        @media (min-width: 1600px) {
            .original-hero-inner {
                max-width: 1400px;
                margin-left: auto;
                margin-right: auto;
            }

            .branches-grid {
                max-width: 1400px;
            }

            nav {
                padding: 0 6vw;
                max-width: 1920px;
                margin-left: auto;
                margin-right: auto;
            }

            .wrap,
            .wrap-sm {
                padding: 4rem 8vw;
            }
        }

        /* ── Prevent overflow on grid items at all sizes ── */
        .sv-grid,
        .dr-grid,
        .tr-grid,
        .stats-grid,
        .branches-grid,
        .ft-grid,
        .faq-inner,
        .pab-inner {
            width: 100%;
            box-sizing: border-box;
        }

        /* ── Fix horizontal scroll from oversized fixed-width elements ── */
        .trust-inner {
            max-width: 100%;
            box-sizing: border-box;
        }

        /* ── Testimonial horizontal scroll track fix on all sizes ── */
        .ts-track {
            min-width: 0;
        }

        /* ── Appointment section form never overflows ── */
        .ap-form,
        .ap2-form,
        form {
            max-width: 100%;
            box-sizing: border-box;
        }

        /* ── Back-to-top button: keep away from edges on small screens ── */
        @media (max-width: 480px) {
            #btt {
                bottom: 1.25rem;
                right: 1.25rem;
                width: 46px;
                height: 46px;
            }
        }
    


        /* ── CUSTOM CURSOR ── */
        #luxCursor {
            position: fixed;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1.5px solid rgba(37, 109, 12, 0.6);
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: width .3s, height .3s, border-color .3s, background .3s;
            mix-blend-mode: normal;
        }

        #luxCursorDot {
            position: fixed;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--teal);
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: transform .08s;
        }

        #luxCursor.hov {
            width: 60px;
            height: 60px;
            border-color: var(--teal);
            background: rgba(37, 109, 12, 0.08);
        }

        @media(max-width:768px) {

            #luxCursor,
            #luxCursorDot {
                display: none;
            }
        }

        /* ── FLOATING APPOINTMENT WIDGET ── */
        #floatAppt {
            position: fixed;
            left: 1.5rem;
            bottom: 2rem;
            background: var(--teal);
            color: #fff;
            border-radius: 3rem;
            padding: .65rem 1.4rem;
            display: flex;
            align-items: center;
            gap: .5rem;
            cursor: pointer;
            z-index: 490;
            box-shadow: 0 8px 28px rgba(37, 109, 12, 0.45);
            transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s, opacity .4s ease, visibility .4s;
            font-size: .82rem;
            font-weight: 600;
            animation: floatBounce 3s ease-in-out infinite;
            /* Hidden until video scroll completes */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        #floatAppt.fa-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }

        #floatAppt:hover {
            transform: scale(1.06) translateY(-3px);
            box-shadow: 0 14px 36px rgba(37, 109, 12, 0.55);
        }

        .fa-icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fa-icon svg {
            display: block;
        }

        @keyframes floatBounce {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-5px)
            }
        }

        /* ── SEC ENTER ANIMATION ── */
        .sec-enter {
            opacity: 0;
            transform: translate3d(0, 60px, 0);
            transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1), transform .9s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .sec-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        /* ══════════════════════════════
   CUTTING-EDGE INNOVATION — FUTURISTIC DARK THEME
══════════════════════════════ */

        .dt-header {
            display: none !important;
        }

        #dental-tech {
            background: #050d18;
            position: relative;
            overflow: hidden;
            padding: 0;
            box-sizing: border-box;
        }

        /* Animated grid lines */
        #dental-tech::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(0, 255, 200, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 200, 0.04) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            z-index: 0;
            animation: dtGridShift 20s linear infinite;
        }

        @keyframes dtGridShift {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 60px 60px;
            }
        }

        /* Ambient glows */
        #dental-tech::after {
            content: '';
            position: absolute;
            top: -20%;
            left: -10%;
            width: 70%;
            height: 80%;
            background: radial-gradient(ellipse, rgba(0, 200, 160, 0.07) 0%, transparent 65%);
            pointer-events: none;
            z-index: 0;
        }

        .dt-ambient-glow-right {
            position: absolute;
            bottom: -10%;
            right: -10%;
            width: 55%;
            height: 70%;
            background: radial-gradient(ellipse, rgba(42, 127, 200, 0.06) 0%, transparent 65%);
            pointer-events: none;
            z-index: 0;
        }

        /* ─── HERO: two-col layout ─── */
        .dt-hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 520px;
            position: relative;
            z-index: 2;
        }

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

        /* LEFT */
        .dt-hero-left {
            padding: 5.5rem 4vw 5rem 6vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        .dt-overline {
            display: inline-flex;
            align-items: center;
            gap: .7rem;
            font-size: .6rem;
            font-weight: 700;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: #256d0c;
            margin-bottom: 1.6rem;
        }

        .dt-overline::before {
            content: '';
            display: block;
            width: 28px;
            height: 1px;
            background: linear-gradient(90deg, #256d0c, transparent);
            flex-shrink: 0;
        }

        .dt-overline::after {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #256d0c;
            box-shadow: 0 0 8px #256d0c;
            flex-shrink: 0;
        }

        .dt-hero-left .s-lbl,
        .dt-hero-left .s-ttl {
            display: none;
        }

        .dt-hero-headline {
            font-family: 'Manrope', serif;
            font-size: clamp(2.2rem, 3.6vw, 3.8rem);
            color: #e8f4f4;
            line-height: 1.06;
            letter-spacing: -.03em;
            margin-bottom: 1.6rem;
            font-weight: 400;
        }

        .dt-hero-headline em {
            color: #256d0c;
            font-style: italic;
        }

        .dt-hero-desc {
            font-size: .92rem;
            color: rgba(180, 210, 210, 0.7);
            line-height: 1.9;
            max-width: 420px;
        }

        /* RIGHT */
        .dt-hero-right {
            padding: 4rem 5vw 4rem 3vw;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3.5rem;
            position: relative;
        }

        /* Tooth container */
        .dt-tooth-wrap {
            position: relative;
            flex-shrink: 0;
            width: 240px;
            height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Outer scanning ring */
        .dt-tooth-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1px solid rgba(37, 109, 12, 0.25);
            animation: dtRingScan 4s linear infinite;
        }

        .dt-tooth-ring::before {
            content: '';
            position: absolute;
            top: -3px;
            left: 50%;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #256d0c;
            box-shadow: 0 0 12px #256d0c, 0 0 24px rgba(37, 109, 12, 0.5);
            transform: translateX(-50%);
        }

        @keyframes dtRingScan {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Second ring */
        .dt-tooth-ring2 {
            position: absolute;
            inset: 20px;
            border-radius: 50%;
            border: 1px solid rgba(37, 109, 12, 0.1);
            animation: dtRingScan 8s linear infinite reverse;
        }

        /* Glow core */
        .dt-tooth-glow {
            position: absolute;
            inset: 40px;
            border-radius: 50%;
            background: radial-gradient(circle at 40% 35%, rgba(37, 109, 12, 0.15) 0%, rgba(0, 100, 180, 0.08) 60%, transparent 100%);
        }

        /* Tooth SVG — updated to glowing cyan */
        .dt-tooth-svg {
            position: relative;
            z-index: 2;
            width: 96px;
            filter: drop-shadow(0 0 16px rgba(37, 109, 12, 0.5)) drop-shadow(0 8px 32px rgba(37, 109, 12, 0.2));
            animation: dtToothFloat 5s ease-in-out infinite;
        }

        @keyframes dtToothFloat {

            0%,
            100% {
                transform: translateY(0) rotate(-1deg);
            }

            50% {
                transform: translateY(-10px) rotate(1deg);
            }
        }

        /* Floating particles */
        .dt-dot {
            position: absolute;
            border-radius: 50%;
            background: #256d0c;
            box-shadow: 0 0 8px rgba(37, 109, 12, 0.6);
            animation: dtDotFloat 4s ease-in-out infinite;
        }

        .dt-dot:nth-child(1) {
            width: 6px;
            height: 6px;
            top: 30px;
            right: 40px;
            animation-delay: 0s;
        }

        .dt-dot:nth-child(2) {
            width: 4px;
            height: 4px;
            bottom: 50px;
            left: 32px;
            animation-delay: 1.2s;
            background: rgba(42, 127, 200, 0.9);
            box-shadow: 0 0 8px rgba(42, 127, 200, 0.7);
        }

        .dt-dot:nth-child(3) {
            width: 5px;
            height: 5px;
            bottom: 32px;
            right: 52px;
            animation-delay: 2.4s;
        }

        @keyframes dtDotFloat {

            0%,
            100% {
                transform: translateY(0);
                opacity: 0.6;
            }

            50% {
                transform: translateY(-8px);
                opacity: 1;
            }
        }

        /* Stacked stats */
        .dt-stats-stack {
            display: flex;
            flex-direction: column;
            gap: 1.8rem;
        }

        .dt-stat-block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            padding-left: 1rem;
        }

        .dt-stat-block::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 2px;
            background: linear-gradient(180deg, #256d0c, rgba(37, 109, 12, 0.1));
            border-radius: 2px;
        }

        .dt-stat-block-n {
            font-family: 'Manrope', serif;
            font-size: 2.9rem;
            color: #256d0c;
            line-height: 1;
        }

        .dt-stat-block-label {
            font-size: .55rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .18em;
            color: rgba(150, 190, 190, 0.6);
            margin-top: .3rem;
        }

        /* Hide old stats row */
        .dt-stats-row {
            display: none !important;
        }

        /* ─── TECH CARDS ─── */
        .dt-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            position: relative;
            z-index: 2;
            border-top: 1px solid rgba(37, 109, 12, 0.08);
            gap: 1px;
            background: rgba(37, 109, 12, 0.08);
        }

        @media(max-width: 900px) {
            .dt-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

        .dt-card {
            position: relative;
            padding: 2.8rem 2.2rem 2.5rem;
            background: #070f1c;
            overflow: hidden;
            cursor: default;
        }

        .dt-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 30% 0%, rgba(37, 109, 12, 0.05) 0%, transparent 60%);
            opacity: 0;
            transition: opacity .4s;
        }

        .dt-card:hover {
            background: #070f1c;
        }

        /* Glowing top accent bar */
        .dt-card-accent {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, #256d0c, transparent);
            transform: scaleX(0);
            transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .dt-card:hover .dt-card-accent {
            transform: scaleX(0);
        }

        /* Ghost number */
        .dt-card-num {
            position: absolute;
            top: 1.2rem;
            right: 1.4rem;
            font-family: 'Manrope', serif;
            font-size: 4.5rem;
            color: rgba(37, 109, 12, 0.04);
            line-height: 1;
            user-select: none;
            transition: color .3s, transform .4s cubic-bezier(0.34, 1.26, 0.64, 1);
        }

        .dt-card:hover .dt-card-num {
            color: rgba(37, 109, 12, 0.04);
        }

        /* Icon container — hexagonal frame feel */
        .dt-card-ico {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            background: rgba(37, 109, 12, 0.06);
            border: 1px solid rgba(37, 109, 12, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1.4rem;
            transition: transform .4s cubic-bezier(0.34, 1.26, 0.64, 1), box-shadow .3s, border-color .3s;
        }

        .dt-card:hover .dt-card-ico {
            transform: none;
            box-shadow: none;
            border-color: rgba(37, 109, 12, 0.18);
        }

        .dt-card-title {
            font-size: 1rem;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: .65rem;
            letter-spacing: .01em;
            transition: color .3s;
        }

        .dt-card:hover .dt-card-title {
            color: #ffffff;
        }

        .dt-card-desc {
            font-size: .81rem;
            color: rgba(220, 235, 235, 0.90);
            line-height: 1.82;
        }

        .dt-card-tag {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            margin-top: 1.4rem;
            font-size: .58rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(37, 109, 12, 0.6);
            padding: .32rem .9rem;
            border-radius: 3rem;
            background: rgba(37, 109, 12, 0.04);
            border: 1px solid rgba(37, 109, 12, 0.12);
            transition: border-color .3s, background .3s, color .3s;
        }

        .dt-card:hover .dt-card-tag {
            border-color: rgba(37, 109, 12, 0.12);
            background: rgba(37, 109, 12, 0.04);
            color: rgba(37, 109, 12, 0.6);
        }

        .dt-card-tag::before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #256d0c;
            box-shadow: 0 0 6px #256d0c;
            flex-shrink: 0;
        }

        /* Hide feature strip */
        .dt-feature-strip {
            display: none;
        }

        /* ─── CTA STRIP ─── */
        .dt-cta-strip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.8rem 6vw;
            background: rgba(37, 109, 12, 0.03);
            border-top: 1px solid rgba(37, 109, 12, 0.08);
            position: relative;
            z-index: 2;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .dt-cta-text {
            font-size: .88rem;
            color: rgba(150, 190, 190, 0.6);
        }

        .dt-cta-text strong {
            color: #c8e8e8;
            font-weight: 600;
        }

        .dt-cta-btn {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            padding: .85rem 2rem;
            border-radius: .5rem;
            background: transparent;
            color: #256d0c;
            font-size: .875rem;
            font-weight: 600;
            font-family: inherit;
            border: 1px solid rgba(37, 109, 12, 0.4);
            cursor: pointer;
            transition: all .35s cubic-bezier(0.16, 1, 0.3, 1);
            text-decoration: none;
            position: relative;
            overflow: hidden;
            letter-spacing: .03em;
        }

        .dt-cta-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(37, 109, 12, 0.12), rgba(37, 109, 12, 0.06));
            transform: translateX(-100%);
            transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .dt-cta-btn:hover::before {
            transform: translateX(0);
        }

        .dt-cta-btn:hover {
            border-color: rgba(37, 109, 12, 0.7);
            box-shadow: 0 0 24px rgba(37, 109, 12, 0.15), inset 0 0 24px rgba(37, 109, 12, 0.05);
            transform: translateY(-2px);
        }

        .dt-cta-btn svg {
            transition: transform .35s cubic-bezier(0.34, 1.26, 0.64, 1);
            position: relative;
            z-index: 1;
        }

        .dt-cta-btn span {
            position: relative;
            z-index: 1;
        }

        .dt-cta-btn:hover svg {
            transform: translateX(5px);
        }

        /* ══════════════════════════════
   PATIENT JOURNEY SECTION
══════════════════════════════ */
        /* ══ PATIENT JOURNEY — styled to match Rohinish Journey (dental timeline) ══ */
        .pj-pin-wrapper {
            position: relative;
        }

        /* Disable reveal/sec-enter transforms on patient-journey — they break position:sticky */
        #patient-journey.reveal,
        #patient-journey.sec-enter {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            transition: none !important;
        }

        #patient-journey {
            background: var(--white);
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-top: 1px solid var(--border);
        }

        #patient-journey .s-lbl {
            color: var(--teal);
            margin: 0 0 0.5rem;
            font-size: 0.85rem;
            letter-spacing: .12em;
            justify-content: flex-start;
            width: fit-content;
        }

        #patient-journey .s-lbl::before {
            background: var(--teal);
        }

        #patient-journey .s-ttl {
            color: var(--navy) !important;
            font-size: clamp(1.8rem, 3vw, 2.6rem);
            letter-spacing: -.02em;
            line-height: 1.1;
            margin-bottom: 0;
        }

        #patient-journey em {
            color: var(--teal) !important;
            -webkit-text-fill-color: var(--teal) !important;
            background: none !important;
        }

        #patient-journey .pj-header>p {
            color: var(--text-muted) !important;
            font-size: .82rem !important;
            line-height: 1.6 !important;
            margin: .6rem 0 0 !important;
            max-width: 480px;
            text-align: left;
            display: flex;
            align-items: center;
            gap: .5rem;
            opacity: .7;
        }

        .pj-inner {
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;
            padding: 3rem 8vw 0;
            width: 100%;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
        }

        .pj-header {
            text-align: left;
            margin-bottom: 0;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 2rem;
            flex-wrap: wrap;
        }

        /* Horizontal scroll track like dental timeline */
        .pj-track-wrap {
            flex: 1;
            overflow: hidden;
            padding: 0 8vw;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .pj-track-wrap::-webkit-scrollbar {
            display: none;
        }

        .pj-track {
            display: flex;
            align-items: center;
            gap: 0;
            position: relative;
            z-index: 2;
            padding: 60px 8vw 60px 0;
            min-width: unset;
            will-change: transform;
        }

        /* Show the arrow connectors with zigzag like dental timeline */
        .pj-connector {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 80px;
            position: relative;
            z-index: 1;
        }

        .pj-conn-line {
            display: none;
        }

        /* Zigzag connectors via pseudo on pj-step — alternating up/down */
        .pj-step {
            flex-shrink: 0;
            width: 350px;
            min-height: 290px;
            position: relative;
            background: var(--white);
            border: 1.5px solid var(--border);
            border-radius: 1.25rem;
            padding: 2.2rem 2.2rem;
            box-shadow: 0 2px 16px rgba(15, 28, 46, .06);
            transition: transform .5s cubic-bezier(.16, 1, .3, 1),
                box-shadow .5s ease,
                border-color .4s ease;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }

        /* Coloured left border accent like dtl-h-card::before */
        .pj-step::before {
            content: '';
            position: absolute;
            left: 0;
            top: 1.25rem;
            bottom: 1.25rem;
            width: 3px;
            border-radius: 0 2px 2px 0;
            background: var(--border);
            transition: background .4s;
        }

        .pj-step:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 32px rgba(15, 28, 46, .10), 0 2px 8px rgba(15, 28, 46, .06);
            border-color: var(--border);
        }

        .pj-step:hover::before {
            background: var(--border);
        }

        /* Alternating zigzag: odd steps go up, even steps go down */
        .pj-track>.pj-step:nth-of-type(odd) {
            align-self: flex-end;
            margin-bottom: 2rem;
            margin-top: 0;
        }

        .pj-track>.pj-step:nth-of-type(even) {
            align-self: flex-start;
            margin-top: 2rem;
            margin-bottom: 0;
        }

        /* Connector SVG between steps */
        .pj-connector:nth-of-type(even) {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M4 0 C4 40 76 40 76 80' fill='none' stroke='%23e0e5eb' stroke-width='2' stroke-dasharray='5 4'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 80px 80px;
            height: 80px;
            width: 80px;
        }

        .pj-connector:nth-of-type(odd) {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M4 80 C4 40 76 40 76 0' fill='none' stroke='%23e0e5eb' stroke-width='2' stroke-dasharray='5 4'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 80px 80px;
            height: 80px;
            width: 80px;
        }

        /* Final / active step — teal highlight */
        .pj-step-final {
            background: var(--white);
            border-color: rgba(37, 109, 12, .3);
            box-shadow: 0 8px 32px rgba(37, 109, 12, .12), 0 2px 8px rgba(15, 28, 46, .06);
        }

        .pj-step-final::before {
            background: var(--teal) !important;
        }

        .pj-step-final .pj-step-num {
            background: var(--teal);
            color: #fff;
            border-color: var(--teal);
        }

        .pj-step-final .pj-step-title,
        .pj-step-final .pj-step-desc {
            color: var(--navy);
        }

        .pj-step-final .pj-step-tag {
            border-color: rgba(37, 109, 12, 0.3);
            color: var(--teal);
            background: var(--teal-lt);
        }

        /* Step number — styled like dtl-year pill */
        .pj-step-num {
            display: inline-flex;
            align-items: center;
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--teal);
            background: var(--teal-lt);
            border: 1px solid rgba(37, 109, 12, .15);
            padding: .22rem .7rem;
            border-radius: 99px;
            margin-bottom: .85rem;
            transition: background .3s, color .3s;
        }

        .pj-step-ico {
            font-size: 1.5rem;
            margin-bottom: .65rem;
            line-height: 1;
            filter: none;
        }

        .pj-step-title {
            font-size: .95rem;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: .5rem;
            letter-spacing: -.01em;
            line-height: 1.35;
        }

        .pj-step-desc {
            font-size: .79rem;
            color: var(--text-muted);
            line-height: 1.7;
            flex: 1;
            overflow: hidden;
        }

        .pj-step-tag {
            display: inline-block;
            margin-top: .75rem;
            font-size: .7rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--teal);
            border: 1px solid rgba(37, 109, 12, 0.15);
            background: var(--teal-lt);
            padding: .22rem .7rem;
            border-radius: 99px;
        }

        .pj-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            padding: .5rem 5vw 2rem;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
        }

        .pj-controls .dr-arrow {
            border-color: var(--border);
            background: var(--white);
            color: var(--navy);
            box-shadow: 0 2px 8px rgba(15, 28, 46, .07);
        }

        .pj-controls .dr-arrow:hover:not(:disabled) {
            background: var(--teal);
            border-color: var(--teal);
            color: #fff;
        }

        .pj-progress-wrap {
            display: none;
        }

        .pj-progress-bar {
            height: 3px;
            background: rgba(37, 109, 12, 0.15);
            border-radius: 99px;
            overflow: hidden;
        }

        .pj-progress-fill {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--teal), #256d0c);
            border-radius: 99px;
            transition: width .15s linear;
        }

        .pj-scroll-hint {
            display: none;
        }

        @media (max-width: 900px) {
            #patient-journey {
                padding: 0;
            }
        }

        @media (max-width: 540px) {
            .pj-track {
                /* keep flex horizontal on small screens — let JS handle it */
            }
        }

        /* Adjustments for shorter laptop/desktop screens to prevent bottom cut-off */
        @media (min-width: 769px) and (max-height: 850px) {
            .pj-inner {
                padding-top: clamp(1.5rem, 3vh, 2.5rem);
            }

            #patient-journey .s-ttl {
                font-size: clamp(1.6rem, 2.5vh, 2.2rem) !important;
            }

            #patient-journey .pj-header>p {
                margin-top: 0.4rem !important;
                font-size: 0.78rem !important;
            }

            .pj-track {
                padding-top: clamp(20px, 4vh, 40px);
                padding-bottom: clamp(20px, 4vh, 40px);
            }

            .pj-step {
                min-height: clamp(200px, 32vh, 260px);
                padding: 1.5rem 1.8rem;
            }

            .pj-track>.pj-step:nth-of-type(odd) {
                margin-bottom: 1rem;
            }

            .pj-track>.pj-step:nth-of-type(even) {
                margin-top: 1rem;
            }

            .pj-connector:nth-of-type(even),
            .pj-connector:nth-of-type(odd) {
                height: 40px;
                width: 80px;
                background-size: 100% 100%;
            }

            .pj-controls {
                padding-top: 0.25rem;
                padding-bottom: clamp(1rem, 2.5vh, 1.5rem);
            }

            .pj-step-ico {
                font-size: 1.25rem;
                margin-bottom: 0.4rem;
            }

            .pj-step-title {
                font-size: 0.9rem;
                margin-bottom: 0.3rem;
            }

            .pj-step-desc {
                font-size: 0.76rem;
                line-height: 1.6;
            }

            .pj-step-tag {
                margin-top: 0.5rem;
                font-size: 0.65rem;
                padding: 0.18rem 0.6rem;
            }
        }

        /* ══════════════════════════════
   WHY CHOOSE US
══════════════════════════════ */
        #why-us {
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            position: relative;
            overflow: hidden;
            padding: 1.5rem 0;
        }

        #why-us .s-ttl {
            color: #0f1c2e;
            font-size: clamp(2.4rem, 4.5vw, 3.8rem);
            letter-spacing: -.02em;
            line-height: 1.05;
        }

        #why-us em {
            color: #256d0c;
        }

        #why-us .s-lbl {
            color: #256d0c;
            margin: 0 auto 0.8rem;
            font-size: 0.95rem;
            letter-spacing: .2em;
            justify-content: center;
            width: fit-content;
        }

        #why-us .s-lbl::before {
            background: #256d0c;
        }

        .wu-mesh {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: none;
        }

        .wu-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            position: relative;
            z-index: 2;
        }

        @media(max-width:900px) {
            .wu-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

        .wu-card {
            padding: 1.2rem 1.4rem;
            border-radius: 1.25rem;
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.7);
            box-shadow: 0 2px 16px rgba(15, 28, 46, 0.06);
            position: relative;
            overflow: hidden;
            transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s ease;
        }

        .wu-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 32px rgba(15, 28, 46, 0.10);
        }

        .wu-card-num {
            font-size: .62rem;
            letter-spacing: .2em;
            color: rgba(37, 109, 12, 0.9);
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: .3rem;
        }

        .wu-card-ico {
            font-size: 1.8rem;
            margin-bottom: .5rem;
        }

        .wu-card-title {
            font-size: .95rem;
            font-weight: 700;
            color: #0f1c2e;
            margin-bottom: .3rem;
        }

        .wu-card-desc {
            font-size: .78rem;
            color: #4a5568;
            line-height: 1.55;
        }

        .wu-card-badge {
            display: inline-block;
            margin-top: .6rem;
            font-size: .58rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #256d0c;
            border: 1px solid rgba(37, 109, 12, 0.3);
            background: rgba(37, 109, 12, 0.1);
            padding: .2rem .65rem;
            border-radius: 3rem;
        }

        /* ══════════════════════════════
   DENTAL TIMELINE
══════════════════════════════ */
        /* ══════════════════════════════════════════
           DENTAL TIMELINE  —  horizontal scroll-driven
        ══════════════════════════════════════════ */
        /* ── PIN WRAPPER: provides scroll travel height (set by JS) ── */
        .dtl-pin-wrapper {
            position: relative;
        }

        /* ── SECTION ── */
        #dental-timeline {
            background: var(--white);
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-top: 1px solid var(--border);
        }

        #dental-timeline::before {
            content: none;
        }

        /* ── Header ── */
        .dtl-header {
            padding: 3rem 8vw 0;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .dtl-header-left {}

        .dtl-header .s-lbl {
            color: var(--teal);
            margin-bottom: .5rem;
        }

        .dtl-header .s-lbl::before {
            background: var(--teal);
        }

        .dtl-header .s-ttl {
            font-size: clamp(1.8rem, 3vw, 2.6rem);
            color: var(--navy);
            margin-bottom: 0;
        }

        .dtl-header .s-ttl em {
            color: var(--teal);
        }

        .dtl-header-sub {
            font-size: .82rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: .5rem;
            align-self: flex-end;
            padding-bottom: .3rem;
            opacity: .7;
        }

        .dtl-header-sub svg {
            flex-shrink: 0;
            color: var(--teal);
            opacity: .7;
        }

        /* ── Track area ── */
        .dtl-track-area {
            flex: 1;
            position: relative;
            overflow: hidden;
            padding: 0 8vw;
            display: flex;
            align-items: center;
            z-index: 1;
        }

        /* Hide the old spine entirely */
        .dtl-h-spine,
        .dtl-h-spine-fill {
            display: none;
        }

        /* ── Moving track ── */
        .dtl-h-track {
            display: flex;
            align-items: center;
            gap: 0;
            will-change: transform;
            position: relative;
            z-index: 2;
            padding: 60px 0;
        }

        /* ── Individual item ── */
        .dtl-h-item {
            flex-shrink: 0;
            width: 430px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Alternating: odd up, even down */
        .dtl-h-item:nth-child(odd) {
            align-items: flex-end;
            padding-bottom: 2rem;
        }

        .dtl-h-item:nth-child(even) {
            align-items: flex-start;
            padding-top: 2rem;
        }

        /* ── Curved connector between items ── */
        /* Each item except the last gets an SVG connector on the right */
        .dtl-h-item:not(:last-child)::after {
            content: '';
            position: absolute;
            right: -40px;
            width: 80px;
            height: 80px;
            background: none;
            /* SVG bracket connector as data URI */
            pointer-events: none;
            z-index: 0;
        }

        /* Odd→Even: bracket curves DOWN from bottom-right to top-right of next */
        .dtl-h-item:nth-child(odd):not(:last-child)::after {
            bottom: calc(50% - 40px);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M4 0 C4 40 76 40 76 80' fill='none' stroke='%23e0e5eb' stroke-width='2' stroke-dasharray='5 4'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 80px 80px;
        }

        /* Even→Odd: bracket curves UP */
        .dtl-h-item:nth-child(even):not(:last-child)::after {
            top: calc(50% - 40px);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M4 80 C4 40 76 40 76 0' fill='none' stroke='%23e0e5eb' stroke-width='2' stroke-dasharray='5 4'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 80px 80px;
        }

        /* ── Card ── */
        .dtl-h-card {
            position: relative;
            background: var(--white);
            border: 1.5px solid var(--border);
            border-radius: 1.25rem;
            padding: 2.2rem 2.2rem;
            width: 350px;
            min-height: 290px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            box-shadow: 0 2px 16px rgba(15, 28, 46, .06);
            transition: transform .5s cubic-bezier(.16, 1, .3, 1),
                box-shadow .5s ease,
                border-color .4s ease,
                opacity .4s ease;
            opacity: 1;
            transform: scale(1);
            --tilt-rx: 0deg;
            --tilt-ry: 0deg;
            flex-shrink: 0;
            box-sizing: border-box;
        }

        /* Coloured left border accent */
        .dtl-h-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 1.25rem;
            bottom: 1.25rem;
            width: 3px;
            border-radius: 0 2px 2px 0;
            background: var(--border);
            transition: background .4s;
        }

        .dtl-h-card.dtl-tilting {
            transform: scale(1) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry)) !important;
            transition: transform 0.1s ease !important;
        }

        .dtl-h-card.dtl-h-card-lit {
            opacity: 1;
            transform: scale(1);
        }

        .dtl-h-card.dtl-h-card-lit::before {
            background: var(--border);
        }

        .dtl-h-card.dtl-h-card-active {
            opacity: 1;
            transform: scale(1);
            border-color: #d8e0d0;
            box-shadow: none;
        }

        .dtl-h-card.dtl-h-card-active::before {
            background: var(--border);
        }

        /* Year pill */
        .dtl-year {
            display: inline-flex;
            align-items: center;
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--teal);
            background: var(--teal-lt);
            border: 1px solid rgba(37, 109, 12, .15);
            padding: .22rem .7rem;
            border-radius: 99px;
            margin-bottom: .85rem;
            transition: background .3s, color .3s;
        }

        .dtl-h-card.dtl-h-card-active .dtl-year {
            background: var(--teal-lt);
            color: var(--teal);
            border-color: rgba(37, 109, 12, .15);
        }

        /* Icon */
        .dtl-icon {
            font-size: 1.5rem;
            margin-bottom: .65rem;
            line-height: 1;
        }

        .dtl-event {
            font-size: .95rem;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: .5rem;
            line-height: 1.35;
        }

        .dtl-desc {
            font-size: .79rem;
            color: var(--text-muted);
            line-height: 1.7;
        }

        .dtl-branch-hl {
            display: inline;
            background: linear-gradient(120deg, rgba(37, 109, 12, .18) 0%, rgba(37, 109, 12, .12) 100%);
            color: #1a5a08;
            font-weight: 700;
            border-radius: 4px;
            padding: 0 4px 1px;
            border-bottom: 2px solid rgba(37, 109, 12, .45);
        }

        /* Hide old dot + stem (no spine) */
        .dtl-h-dot,
        .dtl-h-card::after {
            display: none;
        }

        /* ── Controls ── */
        .dtl-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            padding: .5rem 5vw 2rem;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
        }

        /* Light-mode arrow buttons for white bg */
        .dtl-controls .dr-arrow {
            border-color: var(--border);
            background: var(--white);
            color: var(--navy);
            box-shadow: 0 2px 8px rgba(15, 28, 46, .07);
        }

        .dtl-controls .dr-arrow:hover:not(:disabled) {
            background: var(--teal);
            border-color: var(--teal);
            color: #fff;
        }

        .dtl-dots {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        /* Light-mode dots */
        .dtl-dots .dr-dot {
            background: var(--gray2);
        }

        .dtl-dots .dr-dot.dr-dot-active {
            background: var(--teal);
        }

        /* ── Mobile ── */
        @media (max-width: 768px) {
            #dental-timeline {
                position: relative !important;
                height: auto !important;
                min-height: unset !important;
                overflow: visible !important;
            }

            .dtl-pin-wrapper {
                height: auto !important;
            }

            .dtl-header {
                padding: 2.5rem 5vw 1rem;
                flex-direction: column;
                align-items: flex-start;
                gap: .75rem;
            }

            .dtl-track-area {
                padding: 0 5vw;
                overflow-x: auto !important;
                overflow-y: visible !important;
                display: block;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }

            .dtl-track-area::-webkit-scrollbar {
                display: none !important;
            }

            .dtl-h-track {
                display: flex !important;
                flex-wrap: nowrap !important;
                gap: 1rem;
                padding: 2rem 0 0.5rem;
                transform: none !important;
            }

            .dtl-h-item {
                width: 260px;
                flex-shrink: 0 !important;
                transform: none !important;
                padding: 0 !important;
                align-items: center !important;
            }

            .dtl-h-item::after {
                display: none;
            }

            /* Reset alternating alignment on mobile */
            .dtl-h-item:nth-child(odd),
            .dtl-h-item:nth-child(even) {
                align-items: center !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

            .dtl-h-card {
                opacity: 1;
                transform: none;
                width: 240px;
                min-height: unset;
            }

            /* Swipe hint */
            .dtl-swipe-hint {
                display: flex !important;
                align-items: center;
                justify-content: center;
                gap: 8px;
                font-size: 0.8rem;
                color: #256d0c;
                opacity: 0.75;
                margin: 0.5rem 0 1.5rem;
                font-weight: 500;
                letter-spacing: 0.03em;
                animation: dtlSwipePulse 2s ease-in-out infinite;
            }
        }

        /* ── MOUSE GLOW ── */
        #mouseGlow {
            position: fixed;
            pointer-events: none;
            z-index: 0;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(37, 109, 12, 0.06) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            transition: left .12s ease, top .12s ease;
            display: none;
        }

        @media(min-width:1024px) {
            #mouseGlow {
                display: block;
            }
        }

        /* ── AMBIENT SECTION GLOW ── */
        #dental-tech .wrap,
        #why-us .wrap {
            position: relative;
            z-index: 2;
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }
    


        /* Fixed layer sits behind everything */
        .cin-bg {
            position: fixed;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
            will-change: opacity;
            backface-visibility: hidden;
        }

        .cin-bg.visible {
            opacity: 1;
        }

        .cin-bg img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            transform: scale(1);
        }

        /* Dark overlay on every bg */
        .cin-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
        }

        /* Per-section overlay colours */
        .cin-bg[data-sec="services"]::after {
            background: rgba(8, 14, 22, 0.48);
        }

        .cin-bg[data-sec="treatments"]::after {
            background: linear-gradient(160deg, rgba(6, 12, 22, 0.74) 0%, rgba(10, 18, 32, 0.70) 100%);
        }

        .cin-bg[data-sec="dental-tech"]::after {
            background: rgba(5, 13, 24, 0.97);
        }

        .cin-bg[data-sec="patient-journey"]::after {
            background: rgba(9, 16, 28, 0.84);
        }

        .cin-bg[data-sec="doctors"]::after {
            background: rgba(10, 18, 32, 0.90);
        }

        /* Doctors: suppress the cinematic bg image entirely */
        #cinBgDoctors {
            display: none !important;
        }

        .cin-bg[data-sec="why-us"]::after {
            background: rgba(8, 16, 28, 0.72);
        }

        .cin-bg[data-sec="ctabanner"]::after {
            background: linear-gradient(135deg, rgba(12, 24, 40, 0.91) 0%, rgba(18, 42, 62, 0.90) 100%);
        }

        .cin-bg[data-sec="stats"]::after {
            background: rgba(230, 244, 244, 0.93);
        }

        .cin-bg[data-sec="testimonials"]::after {
            background: rgba(248, 249, 251, 0.95);
        }

        .cin-bg[data-sec="appointment"]::after {
            background: rgba(6, 12, 22, 0.65);
        }

        .cin-bg[data-sec="faq"]::after {
            background: rgba(255, 255, 255, 0.96);
        }

        /* All sections sit above fixed layers */
        section,
        .dtl-pin-wrapper,
        .pj-pin-wrapper,
        footer {
            position: relative;
            z-index: 2;
            isolation: isolate;
        }

        /* Patient journey now has white bg — suppress its cinematic layer */
        #cinBgPatientJourney {
            display: none !important;
        }
    


        /* ─── Sections with cinematic bg layers: make base transparent ─── */
        /* This lets the fixed image show through without fighting existing styles */
        #services,
        #treatments,
        #why-us,
        #ctabanner {
            background: transparent !important;
        }

        /* Appointment: navy theme + clinic background image */
        #appointment {
            background:
                linear-gradient(135deg, rgba(15, 28, 46, 0.92) 0%, rgba(22, 32, 50, 0.88) 40%, rgba(18, 36, 58, 0.9) 70%, rgba(15, 28, 46, 0.94) 100%),
                url('assets/images/clinic-bg.webp') !important;
            background-size: cover, cover !important;
            background-position: center, center !important;
            background-repeat: no-repeat, no-repeat !important;
            background-attachment: scroll, fixed !important;
        }

        /* Doctors: already dark — transparent lets the fixed bg show */
        /* #doctors { background: transparent !important; } — disabled, using own bg */

        /* Remove existing ::before blobs/glows that conflict on transparent sections */
        #appointment::before,
        #appointment::after {
            display: none !important;
        }

        /* Keep treatment ::before/::after display:none since bg is handled by cin layer */
        #treatments::before,
        #treatments::after {
            display: none !important;
        }

        /* Dental-tech now uses its own dark futuristic bg — no conflict */
        /* #dental-tech pseudo-elements are intentionally kept active */
    


        /* ── CURSOR TRAIL DOTS ── */


        /* ── SHIMMER SWEEP ON CARDS ── */
        .sv-card,
        .dr-card,
        .st-card,
        .wu-card,
        .dt-card {
            overflow: hidden;
        }

        .sv-card::after,
        .dr-card::after,
        .st-card::after,
        .wu-card::after,
        .dt-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(105deg,
                    transparent 20%,
                    rgba(255, 255, 255, 0.045) 50%,
                    transparent 80%);
            pointer-events: none;
            transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 5;
        }

        .sv-card:hover::after,
        .dr-card:hover::after,
        .st-card:hover::after,
        .wu-card:hover::after,
        .dt-card:hover::after {
            left: 120%;
        }

        /* ── TEAL GLOW PULSE ON CTA BUTTON ── */
        @keyframes ctaGlowPulse {

            0%,
            100% {
                box-shadow: 0 8px 30px rgba(62, 207, 207, 0.3);
            }

            50% {
                box-shadow: 0 8px 50px rgba(62, 207, 207, 0.55), 0 0 0 6px rgba(62, 207, 207, 0.08);
            }
        }

        .ap2-submit {
            animation: ctaGlowPulse 2.8s ease-in-out infinite;
        }

        .ap2-submit:hover {
            animation: none;
        }

        /* ── BTN-WHITE SHIMMER ── */
        .btn-white {
            position: relative;
            overflow: hidden;
        }

        .btn-white::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.2) 50%, transparent 80%);
            pointer-events: none;
            transition: left 0.55s ease;
        }

        .btn-white:hover::after {
            left: 130%;
        }

        /* ── FOOTER SLIDE-UP REVEAL ── */
        footer {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        }

        footer.ft-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ── FOOTER LINK HOVER UNDERLINE ANIMATION ── */
        .ft-col ul a {
            position: relative;
        }

        .ft-col ul a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--teal);
            transition: width 0.28s ease;
        }

        .ft-col ul a:hover::after {
            width: 100%;
        }

        /* ── SECTION DIVIDER GLOW LINE ── */
        .section-glow-divider {
            height: 1px;
            width: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(37, 109, 12, 0.35) 30%, rgba(37, 109, 12, 0.55) 50%, rgba(37, 109, 12, 0.35) 70%, transparent 100%);
            position: relative;
            overflow: hidden;
        }

        .section-glow-divider::after {
            content: '';
            position: absolute;
            top: 0;
            left: -30%;
            width: 30%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(37, 109, 12, 0.9), transparent);
            animation: dividerSweep 3.5s ease-in-out infinite;
        }

        @keyframes dividerSweep {
            0% {
                left: -30%;
            }

            100% {
                left: 130%;
            }
        }

        /* ── FLOATING AMBIENT ORBS in WHY-US ── */
        #why-us {
            position: relative;
        }

        .wu-orb {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(80px);
            opacity: 0;
            animation: wuOrbFloat 14s ease-in-out infinite;
        }

        .wu-orb-1 {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(37, 109, 12, 0.14) 0%, transparent 70%);
            top: -100px;
            right: -100px;
            animation-delay: 0s;
        }

        .wu-orb-2 {
            width: 360px;
            height: 360px;
            background: radial-gradient(circle, rgba(37, 109, 12, 0.10) 0%, transparent 70%);
            bottom: -80px;
            left: 5%;
            animation-delay: -5s;
            animation-duration: 18s;
        }

        @keyframes wuOrbFloat {
            0% {
                opacity: 0.7;
                transform: translateY(0px) scale(1);
            }

            33% {
                opacity: 1;
                transform: translateY(-30px) scale(1.05);
            }

            66% {
                opacity: 0.6;
                transform: translateY(15px) scale(0.96);
            }

            100% {
                opacity: 0.7;
                transform: translateY(0px) scale(1);
            }
        }

        /* ── STATS SECTION NUMBER GLOW ANIMATION ── */
        @keyframes statNumberPop {
            0% {
                transform: scale(0.7);
                opacity: 0;
            }

            60% {
                transform: scale(1.12);
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .st-n.popped {
            animation: statNumberPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        /* ── TEAL BORDER HIGHLIGHT on ACTIVE NAV ITEM ── */
        .n-links a.act {
            position: relative;
        }

        /* ── SCROLL-ACTIVATED LINE DRAW for CTA BANNER ── */
        @keyframes ctaLineGrow {
            from {
                width: 0;
            }

            to {
                width: 56px;
            }
        }

        #ctabanner .s-lbl::before {
            animation: ctaLineGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        /* ── FORM INPUT FOCUS GLOW ── */
        .ap2-input:focus {
            box-shadow: 0 0 0 3px rgba(62, 207, 207, 0.18), 0 0 20px rgba(62, 207, 207, 0.08);
        }

        /* ── FAQ ICON SPIN ── */
        .faq-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s;
        }

        .faq-q[aria-expanded="true"] .faq-icon {
            transform: rotate(45deg);
            color: var(--teal);
        }

        /* ── HERO STAT COUNTER FLASH ── */
        @keyframes counterFlash {
            0% {
                color: var(--teal);
                text-shadow: none;
            }

            100% {
                text-shadow: none;
            }
        }

        /* ── SMOOTH BTN-NAV HOVER GLOW ── */
        .btn-nav {
            position: relative;
            overflow: hidden;
        }

        .btn-nav::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.12);
            border-radius: inherit;
            opacity: 0;
            transition: opacity 0.25s;
        }

        .btn-nav:hover::before {
            opacity: 1;
        }

        /* ── ALIGNMENT FIX: TR-SUB spacing ── */
        .tr-sub mark {
            margin: 0 2px;
        }

        /* ── ALIGNMENT FIX: Footer bottom bar on mobile ── */
        @media (max-width: 480px) {
            .ft-bot {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }
        }

        /* ── ALIGNMENT FIX: CTA banner buttons wrap properly ── */
        @media (max-width: 480px) {
            .cb-acts {
                flex-direction: column;
                width: 100%;
            }

            .cb-acts .btn-white,
            .cb-acts .btn-outline-white {
                width: 100%;
                justify-content: center;
            }
        }

        /* ── ALIGNMENT FIX: Stats grid even spacing ── */
        .stats-grid {
            align-items: stretch;
        }

        .st-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* ── ALIGNMENT FIX: Doctor stat strip wraps on small screens ── */
        @media (max-width: 480px) {
            .dr-stat-strip {
                flex-wrap: wrap;
                gap: 1rem;
            }
        }

        /* ── GLOWING SECTION ENTRY HIGHLIGHT ── */
        @keyframes sectionEntryGlow {
            0% {
                box-shadow: inset 0 0 0 rgba(37, 109, 12, 0);
            }

            30% {
                box-shadow: inset 0 0 80px rgba(37, 109, 12, 0.06);
            }

            100% {
                box-shadow: inset 0 0 0 rgba(37, 109, 12, 0);
            }
        }

        .section-entry-flash {
            animation: sectionEntryGlow 1.2s ease-out both;
        }

        /* ── PROGRESS BAR GLOW PULSE ── */
        #pgbar {
            transition: transform 0.1s linear, box-shadow 0.3s ease;
        }

        /* ── BACK TO TOP SMOOTH SCALE ── */
        #btt.vis {
            animation: bttAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        @keyframes bttAppear {
            from {
                opacity: 0;
                transform: scale(0.4) translateY(20px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* ── TOOTH PARTICLE ANIMATION ── */
        .tooth-float {
            position: absolute;
            font-size: 1rem;
            opacity: 0;
            pointer-events: none;
            animation: toothFloat var(--dur, 10s) var(--del, 0s) ease-in-out infinite;
            z-index: 1;
            filter: blur(0.5px);
        }

        @keyframes toothFloat {
            0% {
                opacity: 0;
                transform: translateY(0) rotate(0deg) scale(0.8);
            }

            10% {
                opacity: 0.18;
            }

            50% {
                opacity: 0.10;
                transform: translateY(-60px) rotate(15deg) scale(1);
            }

            90% {
                opacity: 0.18;
            }

            100% {
                opacity: 0;
                transform: translateY(-120px) rotate(-5deg) scale(0.7);
            }
        }

        /* ── TEAL BOTTOM ACCENT BAR on SECTION LABELS ── */
        .s-lbl {
            position: relative;
        }

        /* ── SMOOTH IMAGE LOAD FADE ── */
        .cin-bg img {
            animation: imgFadeIn 0.6s ease both;
        }

        @keyframes imgFadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* ── APPOINTMENT PANEL FADE-IN FIX ── */
        .ap2-left,
        .ap2-right {
            transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ── MOBILE APPOINTMENT LAYOUT FIX ── */
        @media (max-width: 768px) {
            .ap2-outer {
                grid-template-columns: 1fr;
            }

            .ap2-left {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                padding: 3rem 2rem;
            }

            .ap2-right {
                padding: 2.5rem 2rem;
            }

            .ap2-form-wrap {
                padding: 1.8rem 1.5rem 1.5rem;
            }
        }

        /* ── MOBILE ABOUT GRID FIX ── */
        @media (max-width: 768px) {
            .pab-inner {
                grid-template-columns: 1fr;
            }
        }

        /* ════════════════════════════════════════════════════════
           FINAL RESPONSIVE POLISH
        ════════════════════════════════════════════════════════ */
        @media (max-width: 768px) {
            .ab-grid {
                grid-template-columns: 1fr !important;
                gap: 2rem;
            }

            .ab-stats-row {
                width: 100%;
            }

            .ab-stat-cell {
                min-width: unset;
                flex: 1;
                padding: .7rem .8rem;
            }

            .ab-headline {
                font-size: clamp(1.6rem, 6vw, 2.2rem);
            }

            .wu-hd-sub {
                max-width: 100%;
                font-size: .9rem;
            }

            .dt-split {
                grid-template-columns: 1fr !important;
                gap: 2rem;
            }

            .dt-hero-headline {
                font-size: clamp(1.5rem, 6vw, 2rem) !important;
                line-height: 1.15;
            }

            .dt-stat-block-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 1rem;
            }

            .hero-img-card {
                padding: 1.5rem;
            }

            .hero-clinic-name {
                font-size: 1.3rem;
            }

            .hero-info-row {
                grid-template-columns: 1fr 1fr;
                gap: .5rem;
            }

            .pab-bg-circle {
                display: none;
            }

            #btt-ring {
                inset: -3px;
                width: calc(100% + 6px);
                height: calc(100% + 6px);
            }
        }

        @media (max-width: 600px) {
            .s-ttl br {
                display: none;
            }

            .s-ttl {
                font-size: clamp(1.4rem, 6vw, 2rem);
            }

            .s-lbl {
                font-size: .65rem;
                letter-spacing: .12em;
            }
        }

        @media (max-width: 480px) {
            .dt-stat-block-grid {
                grid-template-columns: 1fr 1fr !important;
            }

            .m-nav {
                padding: 1.25rem 4vw 1.75rem;
            }

            .m-nav a {
                font-size: .95rem;
            }

            #floatAppt {
                max-width: calc(100vw - 4rem - 62px);
            }
        }
    


        @media (max-width: 1024px) {

            html,
            body {
                overflow-x: hidden !important;
                overflow-x: clip !important;
                width: 100% !important;
                max-width: 100% !important;
            }
        }

        /* ── Global mobile base ── */
        @media (max-width: 768px) {
            html {
                font-size: 15px;
            }

            .wrap {
                padding: 3rem 4vw;
            }

            .wrap-sm {
                padding: 2rem 4vw;
            }

            /* Section headings */
            .s-ttl {
                font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
            }

            .s-lbl {
                font-size: 0.72rem !important;
            }

            /* cin-line decorative bar */
            .cin-line {
                margin-left: auto;
                margin-right: auto;
            }
        }

        /* ════════════════ HERO ════════════════ */
        @media (max-width: 768px) {

            /* Hex card sizes already handled by existing JS calcSizes(),
               but bump font size of title lines */
            .hex-t {
                font-size: clamp(1.8rem, 8vw, 3rem) !important;
            }

            .hex-hint-text {
                font-size: .68rem;
            }

            /* Hero reveal content */
            .orig-hero-h1 {
                font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
            }

            .orig-hero-sub {
                font-size: .9rem;
            }

            .orig-hero-acts {
                flex-direction: column;
                gap: .75rem;
            }

            .orig-hero-acts .btn-primary,
            .orig-hero-acts .btn-secondary {
                width: 100%;
                text-align: center;
            }

            /* Hex stats row */
            .hex-stats {
                gap: 1rem;
                flex-wrap: wrap;
                justify-content: center;
            }

            .hex-stat-val {
                font-size: 1.4rem;
            }
        }

        /* ════════════════ SERVICES ════════════════ */
        @media (max-width: 768px) {
            #services .wrap {
                padding: 2.5rem 4vw 0;
            }

            .sv-hd .s-ttl {
                font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
                font-weight: 800 !important;
            }

            .sv-hd-sub {
                font-size: 1.3rem !important;
            }

            /* Stack slider + compare vertically */
            .svc-split {
                grid-template-columns: 1fr !important;
                grid-template-rows: auto auto auto !important;
                gap: 1.5rem 0 !important;
            }

            .svc-left {
                padding: 0;
            }

            .svc-right {
                padding: 0;
            }

            /* Slider box full width */
            .svc-slider-box {
                width: 100%;
                height: 310px !important;
            }

            @media (max-width: 480px) {
                .svc-slider-box {
                    height: 320px !important;
                }
            }

            .svc-card {
                min-height: 280px;
            }

            /* Compare image full width */
            .svc-compare {
                aspect-ratio: 4/3;
            }

            /* Nav/dots row */
            .svc-nav-row {
                justify-content: center;
            }
        }

        /* ════════════════ ABOUT ════════════════ */
        @media (max-width: 768px) {
            .pab-section {
                padding: 3rem 0;
                height: auto;
                max-height: none;
            }

            .pab-inner {
                grid-template-columns: 1fr !important;
                gap: 2rem !important;
                padding: 0 4vw !important;
            }

            .pab-visual {
                display: none;
            }

            .pab-headline {
                font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
            }

            .pab-lead {
                font-size: .95rem !important;
            }

            /* Pillars stack on mobile */
            .pab-pillars {
                flex-direction: column !important;
            }

            .pab-pillar {
                flex-direction: row;
                text-align: left;
            }

            .pab-pillar-body {
                text-align: left;
            }

            /* Stats bar */
            .pab-stats {
                flex-wrap: wrap;
            }

            .pab-stat {
                flex: 1 1 45%;
            }

            .pab-stat-sep {
                display: none;
            }
        }

        /* ════════════════ TREATMENTS ════════════════ */
        @media (max-width: 768px) {
            #treatments .wrap>.fade-in:first-child {
                padding: 0 1rem;
            }

            #treatments .s-ttl {
                font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
            }

            .tr-sub {
                font-size: 1.1rem !important;
            }

            /* 1 column on very small screens */
            .tr-grid {
                grid-template-columns: 1fr !important;
                grid-template-rows: none !important;
                gap: 0.75rem !important;
                padding: 0 4vw 1.5rem !important;
            }

            /* Reset JS-driven row heights on mobile */
            .tr-grid {
                grid-auto-rows: auto !important;
            }

            .tr-card {
                height: auto !important;
                min-height: 200px;
            }

            .tr-card-panel {
                height: auto !important;
                position: relative !important;
                inset: auto !important;
            }

            .tr-card:hover .tr-card-panel {
                height: auto !important;
            }

            .tr-card-desc {
                opacity: 1 !important;
                transform: none !important;
            }

            .tr-card-cta {
                opacity: 1 !important;
                transform: none !important;
            }
        }

        @media (max-width: 480px) {
            .tr-grid {
                grid-template-columns: 1fr !important;
            }
        }

        /* ════════════════ STATS ════════════════ */
        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 1rem;
            }

            .st-card {
                padding: 1.5rem 1rem;
            }

            .st-n {
                font-size: 2rem;
            }
        }

        /* ════════════════ DENTAL TECH ════════════════ */
        @media (max-width: 768px) {
            #dental-tech .wrap {
                padding: 2.5rem 4vw;
            }

            .dt-hero {
                grid-template-columns: 1fr !important;
            }

            .dt-hero-right {
                display: none;
            }

            .dt-hero-left {
                padding: 2rem 0 1.5rem;
            }

            .dt-hero-headline {
                font-size: clamp(1.6rem, 6vw, 2.2rem);
            }

            .dt-grid {
                grid-template-columns: 1fr !important;
            }

            .dt-stat-pills {
                flex-wrap: wrap;
                gap: .5rem;
            }
        }

        /* ════════════════ PATIENT JOURNEY ════════════════ */
        @media (max-width: 768px) {
            .pj-inner {
                padding: 2rem 4vw 0;
            }

            .pj-header {
                flex-direction: column;
                align-items: flex-start;
                gap: .5rem;
            }

            #patient-journey .s-ttl {
                font-size: clamp(1.6rem, 7vw, 2rem) !important;
            }

            .pj-track-wrap {
                padding: 0 4vw;
            }

            .pj-step {
                width: 220px !important;
                height: 260px !important;
                padding: 1.4rem 1.2rem;
            }
        }

        /* ════════════════ DOCTORS ════════════════ */
        @media (max-width: 768px) {
            .dr-layout {
                grid-template-columns: 1fr !important;
                min-height: unset !important;
            }

            .dr-left {
                padding: 2.5rem 4vw 1.5rem !important;
                position: relative !important;
                min-height: unset !important;
            }

            .dr-hd .s-ttl {
                font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
            }

            .dr-hd-sub {
                font-size: .9rem;
            }

            .dr-carousel {
                padding: 1.5rem 4vw !important;
                gap: 1rem;
            }

            .dr-card {
                width: 82vw !important;
                max-width: 320px;
                flex-shrink: 0;
            }

            .dr-img {
                height: 200px;
            }

            /* Dots and arrows */
            .dr-scroll-btns {
                justify-content: center;
            }
        }

        /* ════════════════ WHY US ════════════════ */
        @media (max-width: 768px) {
            #why-us .wrap {
                padding: 2.5rem 4vw;
            }

            .wu-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem;
            }

            .wu-card {
                padding: 1.4rem 1.2rem;
            }
        }

        /* ════════════════ DENTAL TIMELINE ════════════════ */
        @media (max-width: 768px) {
            #dtlPinWrapper {
                height: auto !important;
                position: relative !important;
            }

            #dental-timeline {
                position: relative !important;
                height: auto !important;
                min-height: unset !important;
                overflow: visible !important;
            }

            .dtl-track-area {
                overflow-x: auto !important;
                overflow-y: visible !important;
                -webkit-overflow-scrolling: touch;
                display: block !important;
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }

            .dtl-track-area::-webkit-scrollbar {
                display: none !important;
            }

            .dtl-h-track {
                transform: none !important;
                display: flex !important;
                flex-wrap: nowrap !important;
                gap: 1rem;
                padding: 1.5rem 0 0.5rem;
            }

            .dtl-h-item {
                width: 270px !important;
                flex-shrink: 0 !important;
                padding: 0 !important;
                align-items: center !important;
            }

            /* Reset alternating top/bottom offset on mobile */
            .dtl-h-item:nth-child(odd),
            .dtl-h-item:nth-child(even) {
                align-items: center !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

            .dtl-h-card {
                width: 240px !important;
                opacity: 1 !important;
                transform: none !important;
                min-height: unset !important;
            }

            .dtl-h-card::before {
                display: none !important;
            }

            .dtl-header {
                padding: 2rem 4vw 1rem;
                flex-direction: column;
                align-items: flex-start;
                gap: .5rem;
            }

            .dr-arrow,
            #dtlPrev,
            #dtlNext,
            .dtl-dots {
                display: none;
            }
        }

        /* ════════════════ TESTIMONIALS ════════════════ */
        @media (max-width: 768px) {
            #testimonials .wrap {
                padding: 2.5rem 4vw !important;
            }

            .ts-track {
                grid-template-columns: 1fr !important;
                gap: 1rem;
            }

            .ts-card {
                padding: 1.4rem 1.2rem;
            }

            .ts-quote {
                font-size: 1rem;
            }
        }

        /* ════════════════ APPOINTMENT ════════════════ */
        @media (max-width: 768px) {
            .ap2-outer {
                grid-template-columns: 1fr !important;
                min-height: unset !important;
            }

            .ap2-left {
                padding: 2.5rem 4vw 1.5rem !important;
                border-right: none !important;
                border-bottom: 1px solid rgba(255, 255, 255, .06);
            }

            .ap2-right {
                padding: 1.5rem 4vw 2.5rem !important;
            }

            .ap2-form-wrap {
                padding: 1.5rem 1rem !important;
            }

            .ap2-field-row {
                grid-template-columns: 1fr !important;
            }

            .ap2-headline {
                font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
            }
        }

        /* ════════════════ CTA BANNER ════════════════ */
        @media (max-width: 768px) {
            #ctabanner .wrap {
                padding: 2.5rem 4vw;
            }

            .cb-inner {
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                gap: 1.5rem;
            }

            .cb-ttl {
                font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
            }

            .cb-sub {
                font-size: .9rem;
            }

            .cb-acts {
                width: 100%;
                flex-direction: column;
                gap: 0.75rem;
            }

            .btn-white,
            .btn-outline-white {
                width: 100% !important;
                justify-content: center !important;
            }
        }

        /* ════════════════ FAQ ════════════════ */
        @media (max-width: 768px) {

            .faq-section,
            section.faq {
                padding: 2.5rem 4vw !important;
            }

            .faq-inner {
                grid-template-columns: 1fr !important;
                gap: 1.5rem;
            }

            .faq-col-hd {
                font-size: clamp(1.6rem, 6vw, 2rem) !important;
            }
        }

        /* ════════════════ FOOTER ════════════════ */
        @media (max-width: 768px) {
            footer {
                padding: 2.5rem 4vw 1.5rem !important;
            }

            .ft-grid,
            .f-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 2rem 1.5rem;
            }

            .ft-brand {
                grid-column: 1 / -1;
                order: 1;
            }

            .ft-col:nth-child(2) {
                order: 2;
            }

            .ft-col:nth-child(4) {
                order: 3;
            }

            .ft-col:nth-child(3) {
                grid-column: 1 / -1 !important;
                order: 4;
                margin-top: 1.5rem;
            }

            .ft-logo {
                height: 40px;
            }

            .ft-bottom {
                flex-direction: column;
                gap: .5rem;
                text-align: center;
                font-size: .78rem;
            }

            .ft-branch-row {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 1rem !important;
                width: 100% !important;
                padding: 0.6rem 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
            }

            .ft-col:nth-child(3) ul li:last-child .ft-branch-row {
                border-bottom: none !important;
            }

            .ft-branch-tel {
                display: inline-block !important;
                font-size: 0.8rem !important;
                color: rgba(255, 255, 255, 0.65) !important;
                transition: color 0.18s;
            }

            .ft-branch-tel:hover {
                color: var(--white) !important;
            }

            .desktop-only-contact {
                display: none !important;
            }
        }

        @media (max-width: 480px) {

            .ft-grid,
            .f-grid {
                grid-template-columns: 1fr !important;
            }
        }

        /* ════════════════ FLOATING WIDGETS ════════════════ */
        @media (max-width: 768px) {
            #floatAppt {
                left: 1rem;
                bottom: 1.2rem;
                font-size: .75rem;
                padding: .55rem .9rem .55rem .75rem;
            }

            #btt {
                width: 46px;
                height: 46px;
                right: 1rem;
                bottom: 1.2rem;
            }

            #luxCursor,
            #luxCursorDot {
                display: none !important;
            }
        }

        /* ════════════════ PROGRESS BAR ════════════════ */
        @media (max-width: 768px) {
            #pgbar {
                height: 2px;
            }
        }

        /* ── SVG icon sizing in all icon wrappers ── */
        .svc-card-icon svg,
        .tr-card-ico-wrap svg,
        .pj-step-ico svg,
        .wu-card-ico svg,
        .dtl-icon svg,
        .pab-badge-icon svg,
        .fa-icon svg {
            display: block;
            width: 100%;
            height: 100%;
            max-width: 28px;
            max-height: 28px;
        }

        .tr-card-ico-wrap svg {
            max-width: 26px;
            max-height: 26px;
        }

        .pj-step-ico svg {
            max-width: 32px;
            max-height: 32px;
        }

        .wu-card-ico svg {
            max-width: 32px;
            max-height: 32px;
        }

        .svc-card-icon svg {
            max-width: 30px;
            max-height: 30px;
        }

        .dtl-icon svg {
            max-width: 24px;
            max-height: 24px;
        }

        .pab-badge-icon svg {
            max-width: 22px;
            max-height: 22px;
        }

        /* ══════════════════════════════════════════════════
           GLOBAL SECTION INTRO COLORS
           Headings → white  |  Labels & sub-text → #256d0c
        ══════════════════════════════════════════════════ */

        /* ── Section label (overline pill) → light teal ── */
        .s-lbl {
            color: #256d0c !important;
        }

        .s-lbl::before {
            background: #256d0c !important;
        }

        /* ── Main section heading → white ── */
        .s-ttl {
            color: #ffffff !important;
        }

        /* ── Italic/em inside headings → light teal ── */
        .s-ttl em,
        .cb-ttl em,
        .dtl-header .s-ttl em,
        #why-us em {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        /* Patient journey "Journey" → teal (white bg now) */
        #patient-journey em {
            color: var(--teal) !important;
            -webkit-text-fill-color: var(--teal) !important;
            background: none !important;
        }

        /* Patient journey s-ttl → navy on white bg */
        #patient-journey .s-ttl {
            color: var(--navy) !important;
        }

        /* Other s-ttl mark.hl2 (e.g. Doctors, Appointment) → cyan */
        .s-ttl mark.hl2 {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        /* Treatments "Capabilities" → white */
        #treatments .s-ttl mark.hl2 {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            background: none !important;
        }

        /* About section "Exceptional Smiles" → teal green */
        .pab-headline em {
            color: var(--teal) !important;
            -webkit-text-fill-color: var(--teal) !important;
            background: none !important;
        }

        /* ── Sub-description paragraphs → light teal ── */
        .pab-lead,
        .cb-sub,
        .dt-hero-desc,
        #why-us .wu-hd-sub {
            color: rgba(37, 109, 12, 0.88) !important;
        }

        /* Hero, services, treatments, doctors sub → white */
        .orig-hero-sub,
        .sv-hd-sub,
        .tr-sub,
        .dr-hd-sub {
            color: #ffffff !important;
        }

        /* ── About section (light bg) — keep readable dark ── */
        .pab-headline {
            color: var(--navy) !important;
        }

        .pab-lead {
            color: var(--text-muted) !important;
        }

        /* ── Dental timeline (light bg) — keep dark ── */
        .dtl-header .s-ttl {
            color: var(--navy) !important;
        }

        .dtl-header .s-ttl em {
            color: var(--teal) !important;
            -webkit-text-fill-color: var(--teal) !important;
            background: none !important;
        }

        .dtl-header .s-lbl {
            color: var(--teal) !important;
        }

        .dtl-header .s-lbl::before {
            background: var(--teal) !important;
        }

        /* ── Testimonials cin-line: render above the label text ── */
        #testimonials .s-lbl {
            flex-direction: column;
            align-items: center;
        }

        #testimonials .s-lbl .ts-cin-line {
            display: block;
            width: 0;
            margin-bottom: .6rem;
        }

        #testimonials .s-lbl .ts-cin-line.cin-on {
            width: 80px;
        }

        /* ── Testimonials (light off-white bg) — black heading + teal label ── */
        #testimonials .s-ttl {
            color: var(--navy) !important;
            text-align: center;
        }

        #testimonials .s-ttl mark.hl {
            background-image: none;
            -webkit-text-fill-color: var(--teal);
            color: var(--teal);
            background-clip: unset;
            -webkit-background-clip: unset;
        }

        #testimonials .s-lbl {
            color: var(--teal) !important;
            text-align: center;
            justify-content: center;
        }

        #testimonials .s-lbl::before {
            display: none;
        }

        /* Hide any JS-injected cin-line sibling (we have our own inside) */
        #testimonials .s-lbl~.cin-line,
        #testimonials .cin-line:not(.ts-cin-line) {
            display: none !important;
        }

        #testimonials .s-lbl::before {
            background: var(--teal) !important;
        }

        /* ── CTA banner heading → white ── */
        .cb-ttl {
            color: #ffffff !important;
        }

        .cb-sub {
            color: rgba(37, 109, 12, 0.88) !important;
        }

        /* ── Appointment section ── */
        .ap2-headline {
            color: #ffffff !important;
        }

        .ap2-tagline,
        .ap2-desc,
        .ap2-sub {
            color: rgba(37, 109, 12, 0.88) !important;
        }

        /* ── Doctors section ── */
        .dr-hd .s-ttl {
            color: #ffffff !important;
        }

        #doctors .s-ttl mark.hl2 {
            color: var(--teal) !important;
            -webkit-text-fill-color: var(--teal) !important;
            background: none !important;
        }

        .dr-hd-sub {
            color: #ffffff !important;
        }

        /* ── Dental tech section ── */
        .dt-hero-headline {
            color: #e8f4f4 !important;
        }

        .dt-hero-desc {
            color: rgba(37, 109, 12, 0.82) !important;
        }

        /* ── HERO SECTION — fix all text colors on dark video bg ── */

        /* H1 spans plain words → white */
        .orig-hero-h1 span {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }

        /* H1 marks — "Smile" + "Expert Care" → bright green */
        .orig-hero-h1 mark.hl,
        .orig-hero-h1 mark.hl2 {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        /* Sub text */
        .orig-hero-sub {
            color: rgba(255, 255, 255, 0.88) !important;
        }

        /* Sub pill highlights */
        .orig-hero-sub mark.pill-hl,
        .orig-hero-sub mark.pill-hl2 {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
            border: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
        }

        /* Stats */
        .h-stat-n {
            color: #ffffff !important;
        }

        .h-stat-l {
            color: rgba(255, 255, 255, 0.60) !important;
        }

        .orig-hero-stats {
            border-top-color: rgba(255, 255, 255, 0.12) !important;
        }

        /* Right card */
        .hero-clinic-name {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }

        .hero-clinic-sub {
            color: rgba(255, 255, 255, 0.65) !important;
        }

        .h-pill {
            color: #1c1b1b !important;
            background: rgba(37, 109, 12, .08) !important;
            border-color: rgba(37, 109, 12, .20) !important;
        }

        .h-pill mark.pill-hl,
        .h-pill mark.pill-hl2 {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        .hii-label {
            color: #6b7685 !important;
        }

        .hii-val {
            color: #0f1c2e !important;
        }

        /* ══════════════════════════════════════════════
           HERO SECTION — WHITE BACKGROUND REDESIGN
        ══════════════════════════════════════════════ */

        /* Background — clean white */
        .hex-reveal.show {
            background: #ffffff !important;
        }

        /* Remove dark glows */
        .hex-reveal::after {
            background: radial-gradient(ellipse 60% 70% at 85% 50%, rgba(37, 109, 12, .06), transparent 60%) !important;
        }

        /* Badge */
        .orig-hero-badge {
            background: rgba(37, 109, 12, .10) !important;
            border-color: rgba(37, 109, 12, .25) !important;
            color: #256d0c !important;
        }

        .orig-hero-badge-dot {
            background: #256d0c !important;
        }

        /* H1 — plain words dark navy, marks vivid green */
        .orig-hero-h1 {
            color: #0f1c2e !important;
        }

        .orig-hero-h1 span {
            color: #0f1c2e !important;
            -webkit-text-fill-color: #0f1c2e !important;
        }

        .orig-hero-h1 mark.hl,
        .orig-hero-h1 mark.hl2 {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        /* Subtitle */
        .orig-hero-sub {
            color: #4a5568 !important;
        }

        .orig-hero-sub mark.pill-hl,
        .orig-hero-sub mark.pill-hl2 {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
            border: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
        }

        /* Stats row */
        .h-stat-n {
            color: #0f1c2e !important;
            font-weight: 700 !important;
        }

        .h-stat-l {
            color: #6b7685 !important;
        }

        .orig-hero-stats {
            border-top-color: #e2e8e0 !important;
        }

        /* Right card */
        .hero-img-card {
            background: #ffffff !important;
            border: 1px solid #e2e8e0 !important;
            box-shadow: 0 4px 24px rgba(15, 28, 46, .08) !important;
            backdrop-filter: none !important;
        }

        .hero-clinic-name {
            color: #0f1c2e !important;
            -webkit-text-fill-color: #0f1c2e !important;
            font-weight: 600 !important;
        }

        .hero-clinic-sub {
            color: #6b7685 !important;
        }

        /* Pills */
        .h-pill {
            background: #ffffff !important;
            border: 1px solid #d0d8cc !important;
            color: #256d0c !important;
        }

        .h-pill mark.pill-hl,
        .h-pill mark.pill-hl2 {
            color: #256d0c !important;
            -webkit-text-fill-color: #256d0c !important;
            background: none !important;
        }

        /* Info grid items */
        .hero-info-item {
            background: #f5f7f3 !important;
            border: 1px solid #e2e8e0 !important;
        }

        .hii-label {
            color: #6b7685 !important;
        }

        .hii-val {
            color: #0f1c2e !important;
            font-weight: 700 !important;
        }

        /* Explore Services button */
        .hex-reveal .btn-secondary,
        .orig-hero-acts .btn-secondary {
            border-color: #256d0c !important;
            color: #256d0c !important;
        }

        .hex-reveal .btn-secondary:hover,
        .orig-hero-acts .btn-secondary:hover {
            background: #256d0c !important;
            color: #ffffff !important;
        }
    


        /* ── BLOGS SECTION ─────────────────────────────── */
        #blogs {
            background:
                radial-gradient(120% 80% at 50% -10%, #f3f9ee 0%, rgba(243, 249, 238, 0) 55%),
                #ffffff;
            padding: 0;
            border-top: 1px solid #ebf0e7;
        }

        #blogs .wrap {
            padding-top: 40px;
            padding-bottom: 48px;
        }

        /* ── Header ── */
        .blogs-label {
            font-family: 'Manrope', sans-serif;
            text-align: center;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: #256d0c;
            margin-bottom: 12px;
        }

        .blogs-label::before,
        .blogs-label::after {
            content: '';
            display: inline-block;
            width: 26px;
            height: 1px;
            background: #b9d4a8;
            vertical-align: middle;
            margin: 0 12px 3px;
        }

        .blogs-title {
            font-family: 'Manrope', Georgia, serif;
            font-size: clamp(1.7rem, 3.4vw, 2.5rem);
            font-weight: 800;
            color: #14202e;
            text-align: center;
            margin-bottom: 14px;
            letter-spacing: -.015em;
            line-height: 1.15;
        }

        .blogs-title em {
            font-style: italic;
            color: #256d0c;
        }

        .blogs-sub {
            font-family: 'Manrope', sans-serif;
            text-align: center;
            font-size: 1.1rem;
            font-weight: 400;
            color: #5a6573;
            line-height: 1.6;
            max-width: 560px;
            margin: 0 auto 40px;
        }

        /* ── Category tabs ── */
        .blogs-tabs {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            width: fit-content;
            max-width: 100%;
            margin: 0 auto 44px;
        }

        .btab {
            font-family: 'Manrope', sans-serif;
            font-size: .76rem;
            font-weight: 600;
            color: #4a5568;
            background: #f4f6f1;
            border: 1px solid #e6ebe0;
            border-radius: 999px;
            padding: 9px 18px;
            cursor: pointer;
            white-space: nowrap;
            transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
            letter-spacing: .01em;
        }

        .btab:hover {
            color: #256d0c;
            background: #ecf5e4;
            border-color: #cfe3bf;
        }

        .btab--active {
            color: #fff !important;
            font-weight: 700;
            background: linear-gradient(135deg, #2d8010 0%, #256d0c 100%) !important;
            border-color: transparent !important;
            box-shadow: 0 6px 16px rgba(37, 109, 12, .26);
            transform: translateY(-1px);
        }

        /* ── Card grid ── */
        .blogs-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 26px;
            margin-bottom: 48px;
        }

        .bcard {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #ebefe6;
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(15, 28, 46, .04);
            transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease;
        }

        .bcard:hover {
            transform: translateY(-6px);
            border-color: #d8e7cc;
            box-shadow: 0 18px 40px -12px rgba(37, 109, 12, .22), 0 6px 16px rgba(15, 28, 46, .06);
        }

        .bcard--hidden {
            display: none;
        }

        /* ── Media ── */
        .bcard__media {
            position: relative;
            display: block;
            width: 100%;
            aspect-ratio: 16 / 11;
            overflow: hidden;
            background: #eef3ea;
        }

        .bcard__fallback {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bcard__icon {
            font-size: 2.8rem;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .08));
        }

        .bcard__photo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .55s cubic-bezier(.16, 1, .3, 1);
        }

        .bcard__media::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(15, 28, 46, 0) 55%, rgba(15, 28, 46, .28) 100%);
            opacity: .8;
            transition: opacity .35s ease;
        }

        .bcard:hover .bcard__photo {
            transform: scale(1.07);
        }

        .bcard:hover .bcard__media::after {
            opacity: 1;
        }

        /* ── Category pill ── */
        .bcard__cat {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: 'Manrope', sans-serif;
            font-size: .64rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #1c2b16;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(6px);
            padding: 5px 11px;
            border-radius: 999px;
            box-shadow: 0 2px 8px rgba(15, 28, 46, .12);
        }

        .bcard__cat::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #256d0c;
        }

        .bcard__cat--cosmetic::before {
            background: #d99b1c;
        }

        .bcard__cat--tech::before {
            background: #2f6fd6;
        }

        .bcard__cat--kids::before {
            background: #e06464;
        }

        .bcard__cat--surgery::before {
            background: #b1543d;
        }

        .bcard__cat--gums::before {
            background: #c2418a;
        }

        .bcard__cat--ortho::before {
            background: #7c5cd0;
        }

        .bcard__cat--restorative::before {
            background: #0e8a86;
        }

        .bcard__cat--prevention::before {
            background: #3a7d44;
        }

        /* ── Body ── */
        .bcard__body {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 18px 18px 20px;
        }

        .bcard__title {
            font-family: 'Manrope', sans-serif;
            font-size: .96rem;
            font-weight: 700;
            color: #16212f;
            line-height: 1.38;
            letter-spacing: -.01em;
            margin-bottom: 9px;
            transition: color .25s ease;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .bcard:hover .bcard__title {
            color: #256d0c;
        }

        .bcard__excerpt {
            font-family: 'Manrope', sans-serif;
            font-size: .8rem;
            font-weight: 400;
            color: #5d6773;
            line-height: 1.55;
            margin-bottom: 16px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .bcard__meta {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-top: auto;
            font-family: 'Manrope', sans-serif;
            font-size: .68rem;
            font-weight: 500;
            color: #8a93a0;
        }

        .bcard__avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2d8010 0%, #256d0c 100%);
            color: #fff;
            font-size: .56rem;
            font-weight: 800;
            letter-spacing: .02em;
            flex-shrink: 0;
        }

        .bcard__author {
            color: #3a4350;
            font-weight: 600;
        }

        .bcard__dot {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #c4cbd3;
        }

        /* ── Explore link ── */
        .blogs-explore {
            display: flex;
            justify-content: center;
        }

        .blogs-explore-link {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-family: 'Manrope', sans-serif;
            font-size: .82rem;
            font-weight: 700;
            color: #256d0c;
            background: #fff;
            border: 1.5px solid #cfe3bf;
            border-radius: 999px;
            padding: 12px 26px;
            letter-spacing: .02em;
            transition: gap .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
        }

        .blogs-explore-link svg {
            flex-shrink: 0;
        }

        .blogs-explore-link:hover {
            gap: 13px;
            background: linear-gradient(135deg, #2d8010 0%, #256d0c 100%);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 10px 24px rgba(37, 109, 12, .28);
            transform: translateY(-2px);
        }

        .blogs-explore-link:hover svg path,
        .blogs-explore-link:hover svg circle {
            stroke: #fff;
        }

        #blogsToggle {
            cursor: pointer;
            font-family: 'Manrope', sans-serif;
        }

        .blogs-toggle-chevron {
            transition: transform .3s ease;
        }

        #blogsToggle[aria-expanded="true"] .blogs-toggle-chevron {
            transform: rotate(180deg);
        }

        /* ── Responsive ── */
        @media (max-width: 1000px) {
            .blogs-cards {
                grid-template-columns: repeat(2, 1fr);
                gap: 22px;
            }
        }

        @media (max-width: 900px) {
            .btab {
                font-size: .72rem;
                padding: 8px 14px;
            }
        }

        @media (max-width: 768px) {
            .blogs-tabs {
                justify-content: flex-start !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                width: auto !important;
                max-width: 100% !important;
                padding: 4px 4px 12px !important;
                margin-bottom: 24px !important;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }

            .blogs-tabs::-webkit-scrollbar {
                display: none;
            }

            .blogs-tabs .btab {
                flex-shrink: 0 !important;
            }
        }

        @media (max-width: 560px) {
            #blogs .wrap {
                padding-top: 32px;
                padding-bottom: 40px;
            }

            .blogs-cards {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .blogs-tabs {
                gap: 7px;
            }
        }

        /* ── Header row (old — kept for safety) ── */
        .blogs-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 28px;
            gap: 16px;
        }

        /* ── PREVENT BLUR AND FADE ON WHY-US & JOURNEYS ── */
        #why-us,
        #dental-timeline,
        #patient-journey,
        #why-us .fade-in,
        #dental-timeline .fade-in,
        #patient-journey .fade-in {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            transition: none !important;
        }
    


        /* ── Reduce rendering cost on mobile without changing any visuals ── */
        @media (max-width: 768px) {

            /* Promote scrollable body to its own compositor layer */
            body {
                -webkit-overflow-scrolling: touch;
            }

            /* Replace expensive backdrop-filter blurs with solid equivalents on mobile */
            nav,
            nav.sc,
            nav.m-open {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background: rgba(255, 255, 255, 0.98) !important;
            }

            .m-nav {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background: #ffffff !important;
            }

            /* content-visibility: skip rendering off-screen heavy sections */
            #services,
            #treatments,
            #doctors,
            #testimonials,
            #stats,
            #ctabanner {
                content-visibility: auto;
                contain-intrinsic-size: auto 600px;
            }

            /* Disable heavy box-shadows on mobile cards to reduce paint */
            .sv-card,
            .dr-card,
            .st-card,
            .tr-card {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
            }

            /* Cursor glow: hidden on touch */
            .cursor-glow {
                display: none !important;
            }
        }