:root {
            --F: #0B1F17;
            --S: #526B57;
            --SL: #8CA391;
            --SG: rgba(82, 107, 87, .12);
            --G: #C6A87C;
            --GG: rgba(198, 168, 124, .45);
            --GD: #9a6f3a;
            --BG: #F4F6F3;
            --W: #fff;
            --T: #0d0d0d;
            --M: #585858;
            --BD: rgba(11, 31, 23, .08);
            --FH: 'Cormorant Garamond', serif;
            --FB: 'Manrope', sans-serif;
            --PX: 5.5vw;
            --RLG: 44px;
            --RMD: 24px;
            --RSM: 12px;
            --EX: cubic-bezier(.19, 1, .22, 1);
            --SP: cubic-bezier(.175, .885, .32, 1.1);
            --FL: 0 35px 70px -15px rgba(11, 31, 23, .25);
            --GL: 0 12px 45px rgba(31, 38, 135, .08);
            --SEC: clamp(80px, 12vh, 130px)
        }

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

        html,
        body {
            width: 100%;
            max-width: 100%
        }

        body {
            overflow-x: hidden;
            font-family: var(--FB);
            background: var(--BG);
            color: var(--T);
            line-height: 1.6;
            cursor: none
        }

        html {
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            scroll-behavior: initial
        }

        html.lenis {
            height: auto
        }

        .lenis.lenis-smooth {
            scroll-behavior: auto !important
        }

        .lenis.lenis-stopped {
            overflow: hidden
        }

        .sw {
            overflow-x: hidden;
            width: 100%;
            position: relative
        }

        ::selection {
            background: var(--S);
            color: #fff
        }

        img {
            display: block;
            max-width: 100%;
            height: auto;
            object-fit: cover
        }

        a {
            text-decoration: none;
            color: inherit;
            display: inline-block;
            cursor: none
        }

        button {
            border: none;
            background: none;
            font-family: inherit;
            cursor: none;
            outline: none
        }

        .noise {
            position: fixed;
            inset: 0;
            z-index: 99999;
            pointer-events: none;
            opacity: .03;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
        }

        .sp-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--GD), var(--G), #fff);
            z-index: 99990;
            width: 0%;
            box-shadow: 0 0 12px var(--GG);
            transition: width .15s;
            filter: drop-shadow(0 0 6px rgba(198, 168, 124, .6))
        }

        #cD,
        #cR,
        #cT {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 100000;
            transform: translate(-50%, -50%)
        }

        #cD {
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
            mix-blend-mode: difference;
            transition: width .2s, height .2s
        }

        #cR {
            width: 40px;
            height: 40px;
            border: 1.5px solid rgba(255, 255, 255, .5);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            mix-blend-mode: difference;
            transition: width .3s var(--SP), height .3s var(--SP), background .3s, border-color .3s
        }

        #cT {
            font-size: .5rem;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: #fff;
            opacity: 0;
            transition: opacity .2s;
            white-space: nowrap;
            position: absolute;
            mix-blend-mode: normal
        }

        body.hl #cD {
            width: 0;
            height: 0
        }

        body.hl #cR {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, .1);
            border-color: #fff;
            backdrop-filter: blur(4px);
            mix-blend-mode: normal
        }

        body.hd #cR {
            width: 80px;
            height: 80px;
            background: var(--F);
            border-color: var(--F);
            mix-blend-mode: normal
        }

        body.hd #cT {
            opacity: 1
        }

        body.himg #cR {
            width: 95px;
            height: 95px;
            border-color: var(--G);
            background: rgba(198, 168, 124, .95);
            mix-blend-mode: normal
        }

        body.mousedown #cR {
            transform: translate(-50%, -50%) scale(.6) !important
        }

        @media(pointer:coarse) {

            body,
            a,
            button {
                cursor: auto !important;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
            }

            #cD,
            #cR,
            #cT {
                display: none !important
            }
        }

        a[href],
        button {
            pointer-events: auto !important
        }

        .word-wrap {
            overflow: hidden;
            display: inline-block;
            vertical-align: top;
            padding-bottom: .1em;
            margin-bottom: -.1em
        }

        .word {
            display: inline-block;
            transform: translateY(100px) rotateX(-90deg);
            transform-origin: 50% 100%;
            opacity: 0;
            filter: blur(6px)
        }

        /* FAILSAFE: if the GSAP scroll-reveal chain never fires (blocked CDN,
           very slow connection, backgrounded tab during load, JS error) these
           elements would otherwise stay invisible forever. Force them to the
           same end-state GSAP would reach, a few seconds after load. Matches
           the values GSAP animates to, so there is no visible fight if GSAP
           does succeed - this just re-asserts the same result. */
        @keyframes revealFailsafe {
            to { opacity: 1; transform: none; filter: none }
        }
        .word,
        .fade-up, .area-chip, .gi, .bx, .vc, .tc, .bac, .pstep, .mb,
        .faq-item, .why-item, .review-item, .fg > div, .ftb {
            animation: revealFailsafe 0.01s linear 4.5s 1 forwards;
        }

        /* PRELOADER */
        #PL {
            position: fixed;
            inset: 0;
            background: var(--F);
            z-index: 90000;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden
        }

        .pl-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px)
        }

        .pl-o1 {
            width: 60vw;
            height: 60vw;
            background: radial-gradient(circle, rgba(82, 107, 87, .4), transparent 70%);
            top: -10%;
            left: -10%;
            animation: oF 7s ease-in-out infinite alternate
        }

        .pl-o2 {
            width: 50vw;
            height: 50vw;
            background: radial-gradient(circle, rgba(198, 168, 124, .25), transparent 70%);
            bottom: -10%;
            right: -10%;
            animation: oF 9s ease-in-out infinite alternate-reverse
        }

        @keyframes oF {
            from {
                transform: scale(1)
            }

            to {
                transform: scale(1.3) translate(50px, 50px)
            }
        }

        .pl-bg {
            position: absolute;
            font-family: var(--FH);
            font-size: 24vw;
            color: rgba(255, 255, 255, .015);
            white-space: nowrap;
            animation: pD 15s linear infinite alternate
        }

        @keyframes pD {
            from {
                transform: translateX(-5%)
            }

            to {
                transform: translateX(5%)
            }
        }

        .pl-in {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.8rem
        }

        .pl-lg {
            height: 110px;
            width: auto;
            opacity: 0;
            transform: translateY(30px) scale(.8)
        }

        .pl-lt {
            font-family: var(--FH);
            font-size: 4.5rem;
            font-weight: 300;
            letter-spacing: .15em;
            color: #fff;
            overflow: hidden;
            display: flex;
            gap: .05em
        }

        .pl-lt span {
            display: inline-block;
            transform: translateY(120%) rotate(15deg);
            transform-origin: left top
        }

        .pl-bw {
            width: 300px;
            height: 2px;
            background: rgba(255, 255, 255, .1);
            position: relative;
            overflow: hidden;
            border-radius: 4px
        }

        .pl-bf {
            position: absolute;
            inset: 0 100% 0 0;
            background: linear-gradient(90deg, var(--GD), var(--G), #fff);
            box-shadow: 0 0 20px rgba(198, 168, 124, .8)
        }

        .pl-pct {
            font-size: .75rem;
            letter-spacing: .25em;
            color: rgba(255, 255, 255, .8);
            font-family: monospace;
            font-weight: 700
        }

        .pl-tag {
            font-size: .75rem;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .3)
        }

        /* TOP BAR */
        #TB {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 960;
            background: linear-gradient(90deg, #060f0a, #152a1e 40%, #1a3325 60%, #060f0a);
            color: #fff;
            padding: .6rem var(--PX);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
            border-bottom: 1px solid rgba(198, 168, 124, .2);
            transform: translateY(-100%)
        }

        .tb-shine {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(198, 168, 124, .15), transparent);
            animation: tbS 3s ease-in-out infinite
        }

        @keyframes tbS {

            0%,
            100% {
                transform: translateX(-100%)
            }

            50% {
                transform: translateX(100%)
            }
        }

        .tb-t {
            font-size: .76rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: .6rem;
            position: relative;
            z-index: 1
        }

        .tb-g {
            color: var(--G);
            font-weight: 800
        }

        .tb-cd {
            display: flex;
            align-items: center;
            gap: .28rem;
            background: rgba(255, 255, 255, .08);
            padding: .22rem .9rem;
            border-radius: 100px;
            border: 1px solid rgba(198, 168, 124, .25);
            position: relative;
            z-index: 1;
            backdrop-filter: blur(5px)
        }

        .tb-n {
            font-family: monospace;
            font-size: .85rem;
            font-weight: 700;
            color: var(--G);
            min-width: 1.8ch;
            text-align: center;
            transition: color .3s, transform .3s
        }

        .tb-l {
            font-size: .56rem;
            color: rgba(255, 255, 255, .5);
            text-transform: uppercase;
            letter-spacing: .06em
        }

        .tb-sep {
            color: rgba(198, 168, 124, .5);
            font-size: .85rem
        }

        .tb-b {
            background: linear-gradient(135deg, var(--G), var(--GD));
            color: var(--F);
            font-size: .7rem;
            font-weight: 800;
            padding: .34rem 1.1rem;
            border-radius: 100px;
            text-transform: uppercase;
            letter-spacing: .1em;
            transition: transform .3s var(--SP), box-shadow .3s;
            position: relative;
            z-index: 1;
            text-decoration: none;
            cursor: none;
            display: inline-block
        }

        .tb-b:hover {
            transform: scale(1.08) translateY(-2px);
            box-shadow: 0 10px 20px var(--GG)
        }

        #tbX {
            position: absolute;
            right: var(--PX);
            color: rgba(255, 255, 255, .4);
            font-size: 1rem;
            padding: .5rem;
            transition: all .3s;
            z-index: 1;
            cursor: none
        }

        #tbX:hover {
            color: #fff;
            transform: rotate(90deg) scale(1.2)
        }

        .tb-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            background: var(--G);
            border-radius: 50%;
            vertical-align: middle;
            animation: ping 2s ease infinite
        }

        /* NAV */
        #NAV {
            position: fixed;
            left: 0;
            right: 0;
            padding: 1.6rem var(--PX);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 900;
            transition: padding .4s var(--EX), background .4s, top .35s
        }

        #NAV.sc {
            padding: 1rem var(--PX);
            background: rgba(244, 246, 243, .97);
            backdrop-filter: blur(24px) saturate(200%);
            border-bottom: 1px solid var(--BD);
            box-shadow: 0 4px 30px rgba(11, 31, 23, .08)
        }

        .nav-lg {
            height: auto;
            max-height: 90px;
            width: auto;
            max-width: 200px;
            object-fit: contain;
            display: block;
            transition: transform .4s var(--SP)
        }

        .nav-lg:hover {
            transform: scale(1.08) rotate(-2deg)
        }

        .nm {
            display: flex;
            gap: 2.4vw;
            list-style: none
        }

        .nl {
            font-size: .75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .15em;
            color: var(--F);
            position: relative;
            padding: .4rem 0;
            overflow: hidden;
            text-decoration: none;
            display: inline-block;
            cursor: none
        }

        .nl span {
            display: inline-block;
            transition: transform .3s var(--EX)
        }

        .nl::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--G);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform .4s var(--EX)
        }

        .nl:hover::after {
            transform: scaleX(1);
            transform-origin: left
        }

        .nl:hover span {
            transform: translateY(-2px)
        }

        .ham {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: none;
            z-index: 1001;
            position: relative;
            width: 30px;
            height: 20px;
            justify-content: center
        }

        .ham span {
            width: 100%;
            height: 2.5px;
            background: var(--F);
            transition: all .4s var(--EX);
            position: absolute;
            left: 0;
            border-radius: 2px
        }

        .ham span:nth-child(1) {
            top: 0
        }

        .ham span:nth-child(2) {
            bottom: 0
        }

        .ham.active span:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
            background: #fff
        }

        .ham.active span:nth-child(2) {
            transform: translateY(-9px) rotate(-45deg);
            background: #fff
        }

        .m-nav {
            position: fixed;
            inset: 0;
            background: var(--F);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            clip-path: circle(0% at 100% 0%);
            transition: clip-path .8s var(--EX);
            pointer-events: none
        }

        .m-nav.active {
            clip-path: circle(150% at 100% 0%);
            pointer-events: auto
        }

        .m-nav-close {
            position: absolute;
            top: 1.5rem;
            right: 1.8rem;
            width: 48px;
            height: 48px;
            background: rgba(255,255,255,.1);
            border: 1.5px solid rgba(255,255,255,.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.4rem;
            color: #fff;
            z-index: 10;
            transition: background .3s, transform .3s;
            -webkit-tap-highlight-color: transparent;
        }

        .m-nav-close:hover, .m-nav-close:active {
            background: rgba(255,255,255,.22);
            transform: rotate(90deg);
        }

        .m-nav::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 50% 50%, rgba(198, 168, 124, .15), transparent 70%)
        }

        .m-nl {
            font-size: 3rem;
            font-family: var(--FH);
            color: #fff;
            text-transform: uppercase;
            letter-spacing: .1em;
            margin: .8rem 0;
            opacity: 0;
            transform: translateY(50px);
            transition: all .6s var(--EX);
            text-decoration: none;
            cursor: none
        }

        .m-nav.active .m-nl {
            opacity: 1;
            transform: translateY(0)
        }

        .m-nav.active .m-nl:nth-child(1) {
            transition-delay: .1s
        }

        .m-nav.active .m-nl:nth-child(2) {
            transition-delay: .15s
        }

        .m-nav.active .m-nl:nth-child(3) {
            transition-delay: .2s
        }

        .m-nav.active .m-nl:nth-child(4) {
            transition-delay: .25s
        }

        .m-nav.active .m-nl:nth-child(5) {
            transition-delay: .3s
        }

        .m-nav.active .m-nl:nth-child(6) {
            transition-delay: .35s
        }

        .m-nav.active .m-nl:nth-child(7) {
            transition-delay: .4s
        }

        /* BUTTONS */
        .btn,
        .bto {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            padding: .9rem 2.5rem;
            border-radius: 100px;
            font-size: .78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .12em;
            position: relative;
            overflow: hidden;
            transition: box-shadow .4s, transform .4s var(--SP);
            text-decoration: none;
            cursor: pointer
        }

        .btn {
            color: #fff;
            background: var(--F);
            border: 1px solid transparent
        }

        .btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--S);
            border-radius: 100px;
            transform: scale(0);
            transition: transform .6s var(--EX);
            z-index: 0
        }

        .btn:hover::before {
            transform: scale(2.5)
        }

        .btn:hover {
            box-shadow: 0 15px 35px var(--GG);
            transform: translateY(-5px) scale(1.03)
        }

        .btn>*,
        .bto>* {
            position: relative;
            z-index: 2;
            pointer-events: none
        }

        .bto {
            color: var(--F);
            border: 1.5px solid var(--F);
            background: transparent
        }

        .bto:hover {
            background: var(--F);
            color: #fff;
            transform: translateY(-5px) scale(1.03);
            box-shadow: 0 15px 35px var(--BD)
        }

        .btn-gold {
            background: linear-gradient(135deg, #d4a85a, var(--G), #c49340) !important;
            color: var(--F) !important;
            border: none;
            box-shadow: 0 8px 25px rgba(198, 168, 124, .35)
        }

        .btn-gold::before {
            background: #fff
        }

        .btn-gold:hover {
            box-shadow: 0 15px 45px var(--GG) !important;
            transform: translateY(-4px) scale(1.03) !important
        }

        .btn-gold::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
            transform: skewX(-25deg);
            animation: btnShimmer 3.5s ease-in-out infinite;
            z-index: 1;
            pointer-events: none
        }

        @keyframes btnShimmer {

            0%,
            100% {
                left: -100%
            }

            50% {
                left: 150%
            }
        }

        .fab {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 800;
            background: linear-gradient(135deg, #d4a85a, var(--G), #c49340);
            color: var(--F);
            font-size: .7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .1em;
            padding: 1rem 2rem;
            border-radius: 100px;
            box-shadow: 0 15px 40px rgba(198, 168, 124, .45);
            display: flex;
            align-items: center;
            gap: .6rem;
            transform: translateY(150px);
            transition: transform .6s var(--EX), box-shadow .4s;
            border: 2px solid rgba(255, 255, 255, .6);
            text-decoration: none;
            cursor: none
        }

        .fab.visible {
            transform: translateY(0)
        }

        .fab:hover {
            transform: translateY(-6px) scale(1.05);
            box-shadow: 0 25px 50px var(--GG)
        }

        /* HERO */
        .hero {
            min-height: 100vh;
            padding: clamp(160px, 22vh, 240px) var(--PX) clamp(80px, 12vh, 130px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(160deg, #f8faf7 0%, #eef1ec 40%, #f4f0ea 100%)
        }

        .hgw {
            position: absolute;
            inset: 0;
            perspective: 1000px;
            z-index: 0;
            mask-image: linear-gradient(to bottom, transparent, black 40%, black 80%, transparent);
            -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%, black 80%, transparent)
        }

        .hg {
            position: absolute;
            bottom: -40%;
            left: -50%;
            width: 200%;
            height: 150%;
            background-image: linear-gradient(rgba(11, 31, 23, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 31, 23, .06) 1px, transparent 1px);
            background-size: 80px 80px;
            transform: rotateX(75deg);
            animation: gM 12s linear infinite
        }

        @keyframes gM {
            0% {
                transform: rotateX(75deg) translateY(0)
            }

            100% {
                transform: rotateX(75deg) translateY(80px)
            }
        }

        .particles {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            overflow: hidden
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: var(--G);
            opacity: 0;
            animation: pFloat linear infinite
        }

        @keyframes pFloat {
            0% {
                transform: translateY(100vh) scale(0);
                opacity: 0
            }

            10% {
                opacity: .6
            }

            90% {
                opacity: .2
            }

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

        .hb {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
            filter: blur(80px);
            opacity: .8
        }

        .hb1 {
            width: 80vw;
            height: 80vw;
            max-width: 900px;
            max-height: 900px;
            background: rgba(82, 107, 87, .18);
            top: -20%;
            right: -15%;
            animation: hb1A 18s ease-in-out infinite alternate
        }

        .hb2 {
            width: 60vw;
            height: 60vw;
            max-width: 700px;
            max-height: 700px;
            background: rgba(198, 168, 124, .18);
            bottom: -10%;
            left: -15%;
            animation: hb2A 22s ease-in-out infinite alternate
        }

        .hb3 {
            width: 40vw;
            height: 40vw;
            max-width: 500px;
            max-height: 500px;
            background: rgba(82, 107, 87, .15);
            top: 40%;
            left: 40%;
            animation: hb3A 25s ease-in-out infinite alternate
        }

        @keyframes hb1A {
            from {
                transform: translate(0, 0) scale(1)
            }

            to {
                transform: translate(150px, 100px) scale(1.2)
            }
        }

        @keyframes hb2A {
            from {
                transform: translate(0, 0) scale(1)
            }

            to {
                transform: translate(-120px, -80px) scale(1.15)
            }
        }

        @keyframes hb3A {
            from {
                transform: translate(0, 0) scale(1)
            }

            to {
                transform: translate(100px, -100px) scale(1.3)
            }
        }

        .hero-in {
            max-width: 1100px;
            margin: 0 auto;
            width: 100%;
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center
        }

        .eyb {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 8px 22px;
            border-radius: 100px;
            background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(244, 246, 243, .95));
            backdrop-filter: blur(15px);
            border: 1px solid rgba(82, 107, 87, .25);
            margin-bottom: 2rem;
            box-shadow: 0 4px 20px rgba(11, 31, 23, .1), 0 0 0 4px rgba(82, 107, 87, .06);
            transform: translateY(40px);
            opacity: 0
        }

        .eyd {
            width: 8px;
            height: 8px;
            background: var(--S);
            border-radius: 50%;
            position: relative;
            flex-shrink: 0
        }

        .eyd::after {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: 50%;
            border: 1px solid var(--S);
            animation: ping 1.8s cubic-bezier(.2, .8, .4, 1) infinite
        }

        @keyframes ping {

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

        .eyt {
            font-size: .75rem;
            font-weight: 800;
            letter-spacing: .24em;
            text-transform: uppercase;
            color: #0a1c10
        }

        .ht {
            font-family: var(--FH);
            font-size: clamp(4.5rem, 10vw, 12rem);
            line-height: .88;
            font-weight: 300;
            color: #0a1c10;
            margin-bottom: 2rem;
            text-transform: lowercase;
            letter-spacing: -.03em
        }

        .ht .it {
            font-style: italic;
            color: #3d6648;
            font-weight: 300
        }

        .hdesc {
            font-size: clamp(1.1rem, 1.4vw, 1.3rem);
            color: #4a4a4a;
            max-width: 700px;
            margin: 0 auto 3rem;
            line-height: 1.9;
            opacity: 0;
            transform: translateY(30px)
        }

        .hact {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(30px);
            width: 100%
        }

        .spills {
            display: flex;
            gap: 2rem;
            margin-top: 4rem;
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(30px);
            width: 100%
        }

        .sp {
            background: rgba(255, 255, 255, .98);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(11, 31, 23, .08);
            border-radius: 100px;
            padding: .7rem 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            box-shadow: 0 8px 30px rgba(11, 31, 23, .1);
            transition: transform .5s var(--SP), box-shadow .5s, border-color .5s;
            position: relative;
            overflow: hidden
        }

        .sp:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: var(--FL);
            border-color: var(--G)
        }

        .spn {
            font-family: var(--FH);
            font-size: 2.2rem;
            font-weight: 400;
            color: #3d6648;
            line-height: 1
        }

        .spl {
            font-size: .8rem;
            font-weight: 700;
            color: #0a1c10;
            line-height: 1.3;
            text-transform: uppercase;
            letter-spacing: .05em;
            text-align: left
        }

        /* MARQUEE */
        .mq-wrap {
            perspective: 1000px;
            overflow: hidden;
            z-index: 20;
            position: relative
        }

        .mq {
            background: linear-gradient(90deg, #071510, #0d2018, #071510);
            padding: 2.5rem 0;
            transform: rotate(-1.5deg) rotateX(10deg) scale(1.05);
            width: 106%;
            left: -3%;
            position: relative;
            box-shadow: 0 30px 60px rgba(0, 0, 0, .4)
        }

        .mq2 {
            transform: rotate(1.5deg) rotateX(10deg) scale(1.05);
            margin-top: -1.5rem;
            background: linear-gradient(135deg, var(--G), #d4a85a, #c49340)
        }

        .mq2 .mqit,
        .mq2 .mqs {
            color: var(--F)
        }

        .mqi {
            display: flex;
            white-space: nowrap;
            width: max-content;
            animation: mqA 30s linear infinite
        }

        .mqi2 {
            animation-direction: reverse;
            animation-duration: 35s
        }

        @keyframes mqA {
            from {
                transform: translateX(0)
            }

            to {
                transform: translateX(-33.3333%)
            }
        }

        .mqit {
            font-family: var(--FH);
            font-size: 2.8rem;
            font-style: italic;
            font-weight: 300;
            color: #fff;
            padding: 0 3rem;
            display: flex;
            align-items: center;
            gap: 3.5rem;
            transition: color .3s
        }

        .mqit:hover {
            color: var(--G)
        }

        .mqs {
            color: rgba(198, 168, 124, .8) !important;
            font-style: normal;
            font-size: 1.2rem;
            vertical-align: middle;
            margin: 0 .5rem
        }

        /* SECTION */
        .sec {
            padding: var(--SEC) var(--PX);
            position: relative
        }

        .sey {
            font-size: .78rem;
            font-weight: 900;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--S);
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            gap: 1rem
        }

        .sey::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background: var(--S)
        }

        .sey.visible::before {
            box-shadow: 0 0 15px 3px rgba(82, 107, 87, .4), 0 0 30px 6px rgba(82, 107, 87, .2)
        }

        .sh {
            font-family: var(--FH);
            font-size: clamp(3.5rem, 5.5vw, 6.5rem);
            line-height: .95;
            color: #0a1c10;
            margin-bottom: 2rem;
            letter-spacing: -.03em;
            font-weight: 300
        }

        .sh em {
            font-style: italic;
            color: var(--S)
        }

        .tl {
            font-size: 1.15rem;
            line-height: 1.9;
            color: var(--M);
            margin-bottom: 2rem;
            max-width: 650px
        }

        /* ABOUT */
        #about {
            background: linear-gradient(180deg, var(--BG) 0%, #f0f2ef 100%);
            position: relative;
            overflow: hidden
        }

        #about::before {
            content: '';
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(82, 107, 87, .07), transparent 70%);
            top: -100px;
            right: -100px;
            pointer-events: none;
            animation: aboutOrb 12s ease-in-out infinite alternate;
            z-index: 0
        }

        #about::after {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(198, 168, 124, .06), transparent 70%);
            bottom: -50px;
            left: -50px;
            pointer-events: none;
            animation: aboutOrb 15s ease-in-out infinite alternate-reverse;
            z-index: 0
        }

        @keyframes aboutOrb {
            from {
                transform: translate(0, 0) scale(1)
            }

            to {
                transform: translate(60px, 40px) scale(1.2)
            }
        }

        .aw {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8vw;
            max-width: 1500px;
            margin: 0 auto;
            align-items: center
        }

        .av {
            position: relative;
            height: 680px
        }

        .iw {
            position: absolute;
            border-radius: var(--RLG);
            overflow: hidden;
            box-shadow: var(--FL)
        }

        .iw::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, .15);
            z-index: 1;
            transition: opacity .8s
        }

        .iw:hover::before {
            opacity: 0
        }

        .iw img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.3);
            transition: transform 1.5s var(--EX)
        }

        .iw:hover img {
            transform: scale(1.1)
        }

        .iw1 {
            top: 0;
            left: 0;
            width: 70%;
            height: 65%;
            z-index: 2
        }

        .iw2 {
            bottom: 0;
            right: 0;
            width: 65%;
            height: 55%;
            z-index: 1
        }

        .iw::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 70%);
            transform: translateX(-100%) rotate(25deg);
            transition: transform 1s var(--EX);
            pointer-events: none;
            z-index: 3
        }

        .iw:hover::after {
            transform: translateX(200%) rotate(25deg)
        }

        .abadge {
            position: absolute;
            top: 50%;
            left: 65%;
            background: linear-gradient(135deg, #0a1c10, #153024);
            color: #fff;
            border-radius: var(--RMD);
            padding: 1.8rem 2.2rem;
            box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
            z-index: 4;
            min-width: 160px;
            border: 1px solid rgba(198, 168, 124, .25)
        }

        .abn {
            font-family: var(--FH);
            font-size: 3.5rem;
            font-weight: 400;
            background: linear-gradient(135deg, var(--G), #e8c98a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1
        }

        .abl {
            font-size: .75rem;
            font-weight: 800;
            color: rgba(255, 255, 255, .7);
            text-transform: uppercase;
            letter-spacing: .15em;
            margin-top: .4rem
        }

        .bg {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-top: 2.5rem
        }

        .bx {
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(11, 31, 23, .08);
            padding: 2rem 1.8rem;
            border-radius: var(--RMD);
            transition: transform .4s var(--EX), box-shadow .4s;
            box-shadow: 0 4px 20px rgba(11, 31, 23, .06);
            cursor: default;
            position: relative;
            overflow: hidden
        }

        .bx::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(198, 168, 124, .12), transparent 60%);
            opacity: 0;
            transition: opacity .5s;
            pointer-events: none
        }

        .bx:hover {
            transform: translateY(-8px);
            background: #fff;
            box-shadow: 0 20px 50px rgba(11, 31, 23, .12)
        }

        .bx:hover::after {
            opacity: 1
        }

        .bi {
            font-size: 1.8rem;
            margin-bottom: 1.2rem;
            background: var(--SG);
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background .5s, transform .5s;
            animation: fiA 4s ease-in-out infinite
        }

        @keyframes fiA {

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

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

        .bx:hover .bi {
            background: var(--S);
            animation: none
        }

        .bt2 {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--F);
            margin-bottom: .4rem
        }

        .bd2 {
            font-size: .9rem;
            color: var(--M);
            line-height: 1.7
        }

        /* NUMBERS */
        .ns {
            background: linear-gradient(135deg, #071510 0%, #0f2a1c 50%, #071510 100%);
            padding: var(--SEC) var(--PX);
            position: relative;
            overflow: hidden
        }

        .ns::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0, rgba(255, 255, 255, .02) 1px, transparent 1px, transparent 120px)
        }

        .ns::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 50% 50%, rgba(198, 168, 124, .15), transparent 70%)
        }

        .ng {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 2
        }

        .ni {
            text-align: center;
            padding: 3rem 1.5rem;
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--RMD);
            background: rgba(255, 255, 255, .02);
            backdrop-filter: blur(15px);
            transition: border-color .4s, transform .4s var(--EX), box-shadow .4s;
            cursor: default
        }

        .ni:hover {
            border-color: rgba(198, 168, 124, .4);
            transform: translateY(-8px);
            box-shadow: 0 0 0 1px rgba(198, 168, 124, .2), 0 30px 60px rgba(0, 0, 0, .5)
        }

        .nv {
            font-family: var(--FH);
            font-size: clamp(4rem, 6vw, 7rem);
            font-weight: 300;
            color: var(--G);
            line-height: 1;
            margin-bottom: .8rem;
            background: linear-gradient(135deg, var(--G), #e8c98a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: filter .5s
        }

        .ni:hover .nv {
            filter: drop-shadow(0 0 12px rgba(198, 168, 124, .5))
        }

        .nl2 {
            font-size: .85rem;
            font-weight: 800;
            color: rgba(255, 255, 255, .55);
            text-transform: uppercase;
            letter-spacing: .18em
        }

        .nic {
            font-size: 2rem;
            width: 64px;
            height: 64px;
            background: rgba(255, 255, 255, .05);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(198, 168, 124, .2);
            margin: 0 auto 1.2rem;
            transition: transform .5s var(--SP)
        }

        .ni:hover .nic {
            transform: rotate(360deg) scale(1.2)
        }

        /* ═══════════════════════════
   PRICING SECTION — DETAILED
═══════════════════════════ */
        .pricing-sec {
            background: linear-gradient(160deg, #071510 0%, #0d2218 60%, #071510 100%);
            padding: var(--SEC) var(--PX);
            position: relative;
            overflow: hidden
        }

        .pricing-sec::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 15% 20%, rgba(82, 107, 87, .25), transparent 50%), radial-gradient(ellipse at 85% 80%, rgba(198, 168, 124, .15), transparent 50%)
        }

        .pricing-sec .sh {
            color: #fff
        }

        .pricing-sec .sh em {
            background: linear-gradient(135deg, var(--G), #e8c98a, var(--GD));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .pricing-sec .sey {
            color: var(--G)
        }

        .pricing-sec .sey::before {
            background: var(--G)
        }

        .pricing-offer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.2rem;
            background: linear-gradient(135deg, rgba(198, 168, 124, .18), rgba(154, 111, 58, .1));
            border: 1px solid rgba(198, 168, 124, .4);
            border-radius: var(--RMD);
            padding: 1.2rem 2rem;
            margin: 0 auto 3rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
            max-width: 900px
        }

        .pricing-offer::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(198, 168, 124, .08), transparent);
            animation: tbS 3s ease-in-out infinite
        }

        .pricing-offer-emoji {
            font-size: 2rem;
            animation: fiA 3s ease-in-out infinite
        }

        .pricing-offer-txt {
            font-size: 1.05rem;
            color: #fff;
            font-weight: 600;
            text-align: center;
            position: relative;
            z-index: 1
        }

        .pricing-offer-txt strong {
            color: var(--G);
            font-size: 1.3rem
        }

        .pricing-offer-badge {
            background: var(--G);
            color: var(--F);
            font-size: .75rem;
            font-weight: 800;
            padding: .4rem 1rem;
            border-radius: 100px;
            text-transform: uppercase;
            letter-spacing: .1em;
            white-space: nowrap;
            animation: pulseBadge 2s ease-in-out infinite;
            position: relative;
            z-index: 1
        }

        @keyframes pulseBadge {

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

            50% {
                transform: scale(1.06)
            }
        }

        .pricing-tabs {
            display: flex;
            gap: .6rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 2.5rem;
            position: relative;
            z-index: 5
        }

        .pricing-tab {
            padding: .65rem 1.8rem;
            border-radius: 100px;
            font-size: .78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .12em;
            border: 1.5px solid rgba(255, 255, 255, .18);
            background: transparent;
            color: rgba(255, 255, 255, .65);
            cursor: pointer;
            transition: all .35s var(--EX);
            position: relative;
            z-index: 5
        }

        .pricing-tab:hover {
            border-color: rgba(198, 168, 124, .4);
            color: rgba(255, 255, 255, .9);
            transform: scale(1.06)
        }

        .pricing-tab.active {
            background: var(--G);
            color: var(--F);
            border-color: var(--G);
            box-shadow: 0 8px 25px rgba(198, 168, 124, .35)
        }

        .pricing-panel {
            display: none
        }

        .pricing-panel.active {
            display: block
        }

        /* Category header */
        .pricing-cat-header {
            margin-bottom: 2rem;
            padding: 1.5rem 2rem;
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--RMD);
            position: relative;
            z-index: 2
        }

        .pricing-cat-title {
            font-family: var(--FH);
            font-size: 2rem;
            color: #fff;
            margin-bottom: .4rem
        }

        .pricing-cat-desc {
            font-size: .9rem;
            color: rgba(255, 255, 255, .55);
            line-height: 1.7;
            max-width: 800px
        }

        .pricing-cat-includes {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-top: 1rem
        }

        .pci {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            background: rgba(82, 107, 87, .15);
            border: 1px solid rgba(82, 107, 87, .3);
            color: rgba(255, 255, 255, .75);
            font-size: .74rem;
            font-weight: 700;
            padding: .3rem .8rem;
            border-radius: 100px
        }

        /* Price grid */
        .pricing-grid-inner {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 1.4rem;
            position: relative;
            z-index: 2
        }

        .pc-card {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--RMD);
            padding: 2rem 1.8rem;
            position: relative;
            overflow: hidden;
            transition: all .4s var(--EX);
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, .2)
        }

        .pc-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(198, 168, 124, .08), transparent 60%);
            opacity: 0;
            transition: opacity .5s;
            pointer-events: none;
            z-index: 0
        }

        .pc-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
            transform: skewX(-20deg);
            animation: pcShimmer 5s ease-in-out infinite;
            pointer-events: none;
            z-index: 1
        }

        @keyframes pcShimmer {

            0%,
            100% {
                left: -100%;
                opacity: 0
            }

            40% {
                opacity: 1
            }

            60% {
                left: 150%;
                opacity: 1
            }

            61%,
            100% {
                opacity: 0
            }
        }

        .pc-card:hover {
            border-color: rgba(198, 168, 124, .35);
            transform: translateY(-8px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
            background: rgba(255, 255, 255, .08)
        }

        .pc-card:hover::before {
            opacity: 1
        }

        .pc-card.featured {
            border-color: rgba(198, 168, 124, .45);
            background: rgba(198, 168, 124, .1);
            animation: featuredPulse 3s ease-in-out infinite
        }

        .pc-card.featured:hover {
            background: rgba(198, 168, 124, .14);
            box-shadow: 0 25px 70px rgba(198, 168, 124, .3)
        }

        @keyframes featuredPulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(198, 168, 124, 0)
            }

            50% {
                box-shadow: 0 0 0 6px rgba(198, 168, 124, .12)
            }
        }

        .pc-featured-tag {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--G);
            color: var(--F);
            font-size: .65rem;
            font-weight: 800;
            padding: .3rem .8rem;
            border-radius: 100px;
            text-transform: uppercase;
            letter-spacing: .1em;
            z-index: 2
        }

        .pc-icon {
            font-size: 1.6rem;
            margin-bottom: .8rem;
            display: block
        }

        .pc-name {
            font-family: var(--FH);
            font-size: 1.5rem;
            color: #fff;
            margin-bottom: .4rem;
            line-height: 1.1;
            position: relative;
            z-index: 2
        }

        .pc-sub {
            font-size: .78rem;
            color: rgba(255, 255, 255, .5);
            margin-bottom: 1.3rem;
            line-height: 1.4;
            position: relative;
            z-index: 2
        }

        .pc-divider {
            height: 1px;
            background: rgba(255, 255, 255, .08);
            margin: 1rem 0;
            position: relative;
            z-index: 2
        }

        .pc-prices {
            display: flex;
            flex-direction: column;
            gap: .3rem;
            margin-bottom: 1rem;
            position: relative;
            z-index: 2
        }

        .pc-discounted {
            font-size: 1.8rem;
            font-family: var(--FH);
            font-weight: 400;
            background: linear-gradient(135deg, var(--G), #e8c98a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1
        }

        .pc-unit {
            font-size: .75rem;
            color: rgba(255, 255, 255, .5);
            margin-top: .4rem;
            text-transform: uppercase;
            letter-spacing: .05em
        }

        .pc-includes {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, .07);
            position: relative;
            z-index: 2
        }

        .pc-includes-title {
            font-size: .7rem;
            font-weight: 800;
            color: rgba(255, 255, 255, .4);
            text-transform: uppercase;
            letter-spacing: .12em;
            margin-bottom: .6rem
        }

        .pc-includes-list {
            display: flex;
            flex-direction: column;
            gap: .3rem
        }

        .pc-inc-item {
            display: flex;
            align-items: flex-start;
            gap: .5rem;
            font-size: .78rem;
            color: rgba(255, 255, 255, .6);
            line-height: 1.4
        }

        .pc-inc-item::before {
            content: '✓';
            color: #4ade80;
            font-weight: 800;
            flex-shrink: 0;
            margin-top: .05rem
        }

        .pc-book {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            margin-top: 1.5rem;
            background: linear-gradient(135deg, rgba(198, 168, 124, .18), rgba(154, 111, 58, .1));
            color: var(--G);
            font-size: .75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .1em;
            padding: .85rem 1.6rem;
            border-radius: 100px;
            text-decoration: none;
            cursor: pointer;
            transition: all .3s var(--EX);
            border: 1px solid rgba(198, 168, 124, .35);
            position: relative;
            z-index: 10;
            pointer-events: auto !important
        }

        .pc-book:hover {
            background: var(--G);
            color: var(--F);
            border-color: var(--G);
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(198, 168, 124, .4)
        }

        .pricing-note {
            text-align: center;
            margin-top: 2.5rem;
            position: relative;
            z-index: 2
        }

        .pricing-note p {
            color: rgba(255, 255, 255, .45);
            font-size: .83rem;
            margin-bottom: 1.8rem;
            line-height: 1.7
        }

        .pricing-ctas {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap
        }

        /* AREA SECTION */
        .area-sec {
            background: var(--W);
            padding: var(--SEC) var(--PX);
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(11, 31, 23, .06);
            border-bottom: 1px solid rgba(11, 31, 23, .06)
        }

        .area-sec::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--G), transparent)
        }

        .area-sec::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 30% 50%, rgba(82, 107, 87, .04), transparent 60%), radial-gradient(ellipse at 70% 50%, rgba(198, 168, 124, .04), transparent 60%);
            pointer-events: none
        }

        .area-inner {
            max-width: 1500px;
            margin: 0 auto;
            position: relative;
            z-index: 2
        }

        .area-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 2rem;
            margin-bottom: 3.5rem
        }

        .area-search-wrap {
            position: relative;
            width: 400px;
            max-width: 100%
        }

        .area-search-input {
            width: 100%;
            padding: 1.1rem 1.5rem 1.1rem 3.4rem;
            border-radius: 100px;
            border: 1.5px solid var(--BD);
            font-family: var(--FB);
            font-size: .9rem;
            font-weight: 500;
            background: var(--BG);
            color: var(--T);
            outline: none;
            transition: border-color .3s, box-shadow .3s, transform .3s;
            cursor: text
        }

        .area-search-input:focus {
            border-color: var(--S);
            box-shadow: 0 0 0 4px var(--SG);
            transform: translateY(-2px);
            background: #fff
        }

        .area-si {
            position: absolute;
            left: 1.2rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            pointer-events: none
        }

        .area-banner {
            display: none;
            align-items: center;
            gap: 1.2rem;
            padding: 1.2rem 1.8rem;
            border-radius: var(--RMD);
            margin-bottom: 2rem;
            animation: bIn .4s var(--EX)
        }

        @keyframes bIn {
            from {
                opacity: 0;
                transform: translateY(12px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .area-banner-yes {
            background: linear-gradient(135deg, rgba(74, 222, 128, .12), rgba(34, 197, 94, .06));
            border: 1.5px solid rgba(74, 222, 128, .4)
        }

        .area-banner-call {
            background: linear-gradient(135deg, rgba(198, 168, 124, .12), rgba(154, 111, 58, .06));
            border: 1.5px solid rgba(198, 168, 124, .4)
        }

        .ab-icon {
            font-size: 1.8rem;
            flex-shrink: 0
        }

        .ab-text {
            flex: 1;
            font-size: .92rem;
            color: var(--T);
            line-height: 1.5
        }

        .ab-text strong {
            color: var(--F);
            font-size: 1rem
        }

        .ab-text em {
            font-style: normal;
            color: var(--S);
            font-weight: 700
        }

        .ab-btn {
            background: var(--F);
            color: #fff;
            font-size: .75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .1em;
            padding: .6rem 1.4rem;
            border-radius: 100px;
            white-space: nowrap;
            transition: all .3s var(--EX);
            text-decoration: none;
            cursor: none;
            display: inline-block
        }

        .ab-btn:hover {
            background: var(--S);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, .2)
        }

        .area-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
            gap: .85rem
        }

        .area-chip {
            display: flex;
            align-items: center;
            gap: .7rem;
            padding: .85rem 1.1rem;
            background: rgba(255, 255, 255, .8);
            border: 1px solid rgba(11, 31, 23, .1);
            border-radius: var(--RMD);
            cursor: pointer;
            transition: all .35s var(--EX);
            text-align: left;
            color: var(--T);
            position: relative;
            overflow: hidden;
            opacity: 0;
            width: 100%;
            font-family: var(--FB)
        }

        .area-chip::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--F);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .4s var(--EX);
            z-index: 0
        }

        .area-chip:hover::before {
            transform: scaleX(1)
        }

        .area-chip:hover {
            color: #fff;
            border-color: var(--F);
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(11, 31, 23, .2)
        }

        .acd {
            width: 8px;
            height: 8px;
            background: var(--S);
            border-radius: 50%;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
            transition: background .3s
        }

        .area-chip:hover .acd {
            background: var(--G)
        }

        .acc {
            flex: 1;
            position: relative;
            z-index: 1;
            min-width: 0
        }

        .acn {
            display: block;
            font-size: .84rem;
            font-weight: 800;
            line-height: 1.2;
            color: #0a1c10
        }

        .acp {
            display: block;
            font-size: .71rem;
            color: #777;
            margin-top: .2rem;
            transition: color .3s;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .area-chip:hover .acn {
            color: #fff
        }

        .area-chip:hover .acp {
            color: rgba(255, 255, 255, .65)
        }

        .aca {
            margin-left: auto;
            font-size: .8rem;
            opacity: 0;
            transform: translateX(-6px) translateY(6px);
            transition: opacity .3s, transform .3s;
            position: relative;
            z-index: 1;
            flex-shrink: 0
        }

        .area-chip:hover .aca {
            opacity: 1;
            transform: translateX(0) translateY(0)
        }

        .area-chip.hidden {
            display: none
        }

        .area-chip .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(82, 107, 87, .25);
            transform: scale(0);
            animation: chipRipple .6s ease-out forwards;
            pointer-events: none;
            z-index: 10
        }

        @keyframes chipRipple {
            to {
                transform: scale(4);
                opacity: 0
            }
        }

        .area-cta {
            margin-top: 3rem;
            background: linear-gradient(135deg, #0a1c10, #153024);
            border-radius: var(--RMD);
            padding: 2.5rem 3rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 2rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .2)
        }

        .area-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 80% 50%, rgba(198, 168, 124, .1), transparent 60%)
        }

        .act {
            font-family: var(--FH);
            font-size: 2rem;
            color: #fff;
            position: relative;
            z-index: 1
        }

        .act em {
            font-style: italic;
            color: var(--G)
        }

        .acs {
            font-size: .9rem;
            color: rgba(255, 255, 255, .6);
            margin-top: .3rem;
            position: relative;
            z-index: 1
        }

        /* PROCESS */
        .proc-sec {
            background: linear-gradient(135deg, #071510 0%, #0f2a1c 50%, #071510 100%);
            padding: var(--SEC) var(--PX);
            position: relative;
            overflow: hidden
        }

        .proc-sec::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(82, 107, 87, .1), transparent 50%), radial-gradient(ellipse at 100% 50%, rgba(198, 168, 124, .12), transparent 60%)
        }

        .proc-sec .sh {
            color: #fff
        }

        .proc-sec .sh em {
            background: linear-gradient(135deg, var(--G), #e8c98a, var(--GD));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .proc-sec .sey {
            color: var(--G)
        }

        .proc-sec .sey::before {
            background: var(--G)
        }

        .proc-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            max-width: 1500px;
            margin: 4rem auto 0;
            position: relative
        }

        .proc-grid::before {
            content: '';
            position: absolute;
            top: 80px;
            left: 12.5%;
            right: 12.5%;
            height: 1.5px;
            background: linear-gradient(90deg, transparent, rgba(198, 168, 124, .6), rgba(198, 168, 124, 1), rgba(198, 168, 124, .6), transparent)
        }

        .pstep {
            text-align: center;
            padding: 0 2.5rem;
            position: relative;
            z-index: 1
        }

        .pstep-num {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 1px solid rgba(198, 168, 124, .4);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 2rem;
            position: relative;
            background: rgba(255, 255, 255, .03);
            transition: border-color .6s, background .6s, transform .6s var(--SP), box-shadow .6s;
            backdrop-filter: blur(10px)
        }

        .pstep:hover .pstep-num {
            border-color: var(--G);
            background: rgba(198, 168, 124, .15);
            transform: scale(1.12);
            box-shadow: 0 20px 50px rgba(198, 168, 124, .3)
        }

        .pstep-n {
            font-family: var(--FH);
            font-size: 4rem;
            font-weight: 300;
            background: linear-gradient(135deg, var(--G), #e8c98a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1
        }

        .pstep:hover .pstep-n {
            filter: drop-shadow(0 0 15px rgba(198, 168, 124, .5))
        }

        .pstep-icon {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--G);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
            border: 3px solid var(--F);
            transition: transform .5s var(--SP);
            animation: fiA 3.5s ease-in-out infinite alternate
        }

        .pstep:nth-child(1) .pstep-icon {
            animation-delay: 0s
        }

        .pstep:nth-child(2) .pstep-icon {
            animation-delay: .4s
        }

        .pstep:nth-child(3) .pstep-icon {
            animation-delay: .8s
        }

        .pstep:nth-child(4) .pstep-icon {
            animation-delay: 1.2s
        }

        .pstep:hover .pstep-icon {
            transform: scale(1.3) rotate(20deg);
            animation: none
        }

        .pstep-title {
            font-family: var(--FH);
            font-size: 1.8rem;
            color: #fff;
            margin-bottom: .6rem
        }

        .pstep-desc {
            font-size: .9rem;
            color: rgba(255, 255, 255, .65);
            line-height: 1.85;
            max-width: 260px;
            margin: 0 auto
        }

        /* REVIEWS */
        .review-strip {
            background: linear-gradient(135deg, #0a1c10 0%, #122a1a 100%);
            padding: clamp(60px, 8vh, 90px) var(--PX);
            position: relative;
            overflow: hidden
        }

        .review-strip::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 60% 50%, rgba(198, 168, 124, .1), transparent 70%)
        }

        .review-inner {
            max-width: 1500px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 4vw;
            position: relative;
            z-index: 2
        }

        .review-score {
            flex-shrink: 0;
            text-align: center;
            border-right: 1px solid rgba(255, 255, 255, .1);
            padding-right: 4vw
        }

        .review-score-num {
            font-family: var(--FH);
            font-size: 7rem;
            font-weight: 300;
            background: linear-gradient(135deg, var(--G), #e8c98a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1
        }

        .review-score-stars {
            color: #c4a055;
            font-size: 1.4rem;
            letter-spacing: 4px;
            margin: .5rem 0
        }

        .review-score-label {
            font-size: .8rem;
            font-weight: 700;
            color: rgba(255, 255, 255, .5);
            text-transform: uppercase;
            letter-spacing: .2em
        }

        .review-list {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem
        }

        .review-item {
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--RMD);
            padding: 1.5rem;
            transition: border-color .4s, background .4s, transform .4s var(--EX);
            overflow: hidden;
            position: relative
        }

        .review-item::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -60%;
            width: 40%;
            height: 200%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
            transform: skewX(-20deg);
            animation: revShimmer 6s ease-in-out infinite;
            pointer-events: none
        }

        @keyframes revShimmer {

            0%,
            100% {
                left: -60%;
                opacity: 0
            }

            40% {
                opacity: 1
            }

            55% {
                left: 120%;
                opacity: 1
            }

            56%,
            100% {
                opacity: 0
            }
        }

        .review-item:hover {
            background: rgba(255, 255, 255, .09);
            border-color: rgba(198, 168, 124, .4);
            transform: translateY(-6px)
        }

        .review-item-stars {
            color: #c4a055;
            font-size: 1rem;
            letter-spacing: 2px;
            margin-bottom: .8rem
        }

        .review-item-text {
            font-size: .9rem;
            color: rgba(255, 255, 255, .65);
            line-height: 1.7;
            font-style: italic;
            margin-bottom: 1rem
        }

        .review-item-author {
            font-size: .8rem;
            font-weight: 800;
            color: rgba(255, 255, 255, .8)
        }

        /* VALUES */
        .vs {
            background: var(--BG);
            position: relative;
            overflow: hidden;
            padding: var(--SEC) var(--PX)
        }

        .vsd {
            position: absolute;
            right: -5vw;
            top: 50%;
            transform: translateY(-50%);
            font-family: var(--FH);
            font-size: 26vw;
            color: rgba(82, 107, 87, .03);
            line-height: 1;
            pointer-events: none;
            white-space: nowrap;
            letter-spacing: -.03em;
            z-index: 0
        }

        .vg {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5vw;
            max-width: 1500px;
            margin: 4rem auto 0;
            z-index: 2;
            position: relative
        }

        .vc {
            background: rgba(255, 255, 255, .85);
            backdrop-filter: blur(20px);
            padding: 3.5rem 3rem;
            border-radius: var(--RMD);
            border: 1px solid rgba(255, 255, 255, 1);
            height: 100%;
            position: relative;
            overflow: hidden;
            transition: transform .4s var(--EX), box-shadow .4s;
            box-shadow: 0 8px 30px rgba(11, 31, 23, .08)
        }

        .vc:hover {
            transform: translateY(-12px) rotateX(3deg) rotateY(-3deg);
            background: #fff;
            box-shadow: 0 40px 80px rgba(0, 0, 0, .12)
        }

        .vc::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(82, 107, 87, .03), rgba(198, 168, 124, .03));
            opacity: 0;
            transition: opacity .6s;
            border-radius: inherit;
            pointer-events: none
        }

        .vc:hover::before {
            opacity: 1
        }

        .vn {
            font-family: var(--FH);
            font-size: 7rem;
            line-height: 1;
            color: var(--SG);
            position: absolute;
            top: -1rem;
            right: 1rem;
            transition: color .6s;
            pointer-events: none
        }

        .vc:hover .vn {
            color: var(--SL)
        }

        .vi {
            font-size: 2.5rem;
            color: var(--S);
            margin-bottom: 2rem;
            display: inline-block
        }

        .vtit {
            font-family: var(--FH);
            font-size: 1.9rem;
            color: var(--F);
            margin-bottom: 1rem
        }

        .vdc {
            font-size: .95rem;
            color: var(--M);
            line-height: 1.8
        }

        /* TESTIMONIALS */
        .tw {
            background: linear-gradient(180deg, var(--BG) 0%, #eaede8 100%);
            border-top: 1px solid var(--BD);
            border-bottom: 1px solid var(--BD);
            padding: var(--SEC) var(--PX)
        }

        .tg {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5vw;
            max-width: 1500px;
            margin: 4rem auto 0
        }

        .tc {
            background: #fff;
            border-radius: var(--RMD);
            padding: 2.5rem;
            border: 1px solid rgba(11, 31, 23, .06);
            position: relative;
            overflow: hidden;
            transition: transform .4s var(--EX), box-shadow .4s;
            box-shadow: 0 4px 20px rgba(11, 31, 23, .06)
        }

        .tc:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: var(--FL)
        }

        .tc::before {
            content: '\201C';
            font-size: 10rem;
            color: rgba(82, 107, 87, .15);
            position: absolute;
            top: -2rem;
            left: .5rem;
            font-family: serif;
            line-height: 1;
            opacity: .25;
            transition: color .5s, font-size .6s var(--EX), opacity .4s
        }

        .tc:hover::before {
            color: rgba(198, 168, 124, .25);
            font-size: 12rem;
            opacity: .35
        }

        .tst {
            color: #c4a055;
            font-size: 1.2rem;
            margin-bottom: 1.2rem;
            letter-spacing: 4px
        }

        .ttx {
            font-size: 1rem;
            font-style: italic;
            margin-bottom: 2rem;
            line-height: 1.85;
            color: var(--T)
        }

        .tau {
            font-weight: 800;
            color: var(--F);
            font-size: .9rem
        }

        .tlc {
            font-size: .82rem;
            color: var(--M)
        }

        .tc-badge {
            display: inline-block;
            margin-top: 1rem;
            background: var(--SG);
            color: var(--S);
            font-size: .7rem;
            font-weight: 800;
            padding: .35rem 1rem;
            border-radius: 100px;
            text-transform: uppercase;
            letter-spacing: .12em
        }

        /* GALLERY */
        .gw {
            background: linear-gradient(180deg, #eaede8 0%, var(--BG) 100%);
            padding: var(--SEC) var(--PX)
        }

        .gg {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 320px;
            gap: 1.5rem;
            max-width: 1500px;
            margin: 3.5rem auto 0
        }

        .gi {
            position: relative;
            border-radius: var(--RSM);
            overflow: hidden;
            background: var(--F);
            opacity: 0;
            transform: scale(.95) translateY(40px);
            transition: transform .4s var(--EX)
        }

        .gi:hover {
            transform: scale(1) translateY(-4px)
        }

        .gi img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .85;
            transform: scale(1.3);
            transition: transform 1.5s var(--EX), opacity .6s
        }

        .gi:hover img {
            transform: scale(1.1);
            opacity: 1
        }

        .gov {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(7, 21, 16, .98), rgba(7, 21, 16, .5) 50%, transparent);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 2rem;
            opacity: 0;
            transition: opacity .6s var(--EX)
        }

        .gi:hover .gov {
            opacity: 1
        }

        .gh {
            color: #fff;
            font-family: var(--FH);
            font-size: 1.7rem;
            margin-bottom: .3rem;
            transform: translateY(20px);
            transition: transform .6s var(--EX)
        }

        .gc {
            color: var(--G);
            font-size: .72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .18em;
            transform: translateY(20px);
            transition: transform .6s var(--EX) .05s
        }

        .gi:hover .gh,
        .gi:hover .gc {
            transform: translateY(0)
        }

        .s2r {
            grid-row: span 2
        }

        .s2c {
            grid-column: span 2
        }

        .g-filters {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            max-width: 1500px;
            margin: 2.5rem auto 0
        }

        .gf {
            padding: .7rem 1.8rem;
            border-radius: 100px;
            font-size: .78rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .14em;
            border: 1px solid var(--BD);
            background: transparent;
            color: #555;
            transition: all .4s var(--EX);
            cursor: pointer
        }

        .gf:hover,
        .gf.active {
            background: #0a1c10;
            color: #fff;
            border-color: #0a1c10;
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(11, 31, 23, .3)
        }

        /* FAQ */
        .faq-sec {
            background: var(--BG);
            padding: var(--SEC) var(--PX)
        }

        .faq-wrap {
            max-width: 900px;
            margin: 4rem auto 0
        }

        .faq-item {
            border-bottom: 1px solid var(--BD);
            overflow: hidden
        }

        .faq-q {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.8rem 0;
            font-family: var(--FH);
            font-size: 1.55rem;
            font-weight: 400;
            color: var(--F);
            cursor: pointer;
            transition: color .3s;
            gap: 2rem;
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            letter-spacing: -.01em
        }

        .faq-q:hover {
            color: #3d6648
        }

        .faq-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(11, 31, 23, .04);
            border: 1.5px solid rgba(11, 31, 23, .12);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
            transition: all .4s var(--EX);
            color: var(--F)
        }

        .faq-item.open .faq-icon {
            background: var(--F);
            color: #fff;
            border-color: var(--F);
            transform: rotate(45deg)
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .5s var(--EX)
        }

        .faq-a-inner {
            padding: 0 0 1.8rem;
            font-size: 1rem;
            color: var(--M);
            line-height: 1.9;
            max-width: 750px
        }

        .faq-item.open .faq-a {
            max-height: 400px
        }

        /* WHY */
        .why-sec {
            background: linear-gradient(180deg, #fff 0%, #f0f2ef 100%);
            padding: var(--SEC) var(--PX)
        }

        .why-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8vw;
            max-width: 1500px;
            margin: 4rem auto 0;
            align-items: center
        }

        .why-img {
            width: 100%;
            aspect-ratio: 4/3;
            border-radius: var(--RLG);
            overflow: hidden;
            box-shadow: var(--FL)
        }

        .why-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1.5s var(--EX)
        }

        .why-img:hover img {
            transform: scale(1.05)
        }

        .why-vis {
            position: relative
        }

        .why-pill {
            position: absolute;
            bottom: -1.5rem;
            left: -1.5rem;
            background: linear-gradient(135deg, #d4a85a, var(--G));
            color: var(--F);
            padding: 1.5rem 2rem;
            border-radius: var(--RMD);
            box-shadow: 0 20px 50px rgba(198, 168, 124, .45);
            font-weight: 800;
            font-size: .85rem;
            text-transform: uppercase;
            letter-spacing: .12em;
            z-index: 2;
            border: 3px solid #fff;
            animation: pilFloat 4s ease-in-out infinite
        }

        @keyframes pilFloat {

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

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

        .why-pill span {
            display: block;
            font-family: var(--FH);
            font-size: 2.5rem;
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0;
            line-height: 1;
            margin-bottom: .3rem
        }

        .why-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-top: 2.5rem
        }

        .why-item {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            padding: 1.5rem;
            background: var(--BG);
            border-radius: var(--RMD);
            border: 1px solid var(--BD);
            transition: all .4s var(--EX);
            position: relative;
            overflow: hidden
        }

        .why-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(82, 107, 87, .06), transparent);
            transform: translateX(-100%);
            transition: transform .6s var(--EX)
        }

        .why-item:hover::before {
            transform: translateX(0)
        }

        .why-item:hover {
            background: var(--F);
            border-color: var(--F);
            transform: translateX(12px)
        }

        .why-item:hover .wi-title {
            color: #fff
        }

        .why-item:hover .wi-desc {
            color: rgba(255, 255, 255, .7)
        }

        .wi-icon {
            font-size: 1.8rem;
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            background: var(--SG);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .4s;
            position: relative;
            z-index: 1
        }

        .why-item:hover .wi-icon {
            background: rgba(255, 255, 255, .1)
        }

        .wi-title {
            font-weight: 900;
            color: var(--F);
            margin-bottom: .3rem;
            font-size: 1rem;
            transition: color .4s;
            position: relative;
            z-index: 1;
            letter-spacing: .02em
        }

        .wi-desc {
            font-size: .92rem;
            color: #666;
            line-height: 1.7;
            transition: color .4s;
            position: relative;
            z-index: 1
        }

        /* B&A */
        .bas {
            background: var(--F);
            padding: var(--SEC) var(--PX);
            overflow: hidden;
            position: relative
        }

        .bas::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 15% 50%, rgba(82, 107, 87, .3), transparent 60%), radial-gradient(ellipse at 85% 50%, rgba(198, 168, 124, .2), transparent 60%)
        }

        .bas .sh {
            color: #fff
        }

        .bas .sh em {
            background: linear-gradient(135deg, var(--G), #e8c98a, var(--GD));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .bas .sey {
            color: var(--G)
        }

        .bas .sey::before {
            background: var(--G)
        }

        .bag {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3vw;
            max-width: 1500px;
            margin: 3.5rem auto 0
        }

        .bac {
            position: relative;
            border-radius: var(--RLG);
            overflow: hidden;
            aspect-ratio: 4/3;
            box-shadow: 0 50px 100px rgba(0, 0, 0, .7);
            user-select: none;
            cursor: col-resize;
            touch-action: none;
            border: 1px solid rgba(255, 255, 255, .1)
        }

        .bac img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            -webkit-user-drag: none
        }

        .bab {
            z-index: 1
        }

        .baa {
            z-index: 2;
            clip-path: inset(0 50% 0 0);
            filter: brightness(1.15) contrast(1.05)
        }

        .bad {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 4px;
            background: var(--G);
            z-index: 4;
            transform: translateX(-50%);
            box-shadow: 0 0 30px rgba(198, 168, 124, 1)
        }

        .bah {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--G), var(--GD));
            border-radius: 50%;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 40px rgba(198, 168, 124, .9), 0 10px 30px rgba(0, 0, 0, .6);
            border: 4px solid #fff
        }

        .ball {
            position: absolute;
            top: 1.5rem;
            z-index: 5;
            background: rgba(0, 0, 0, .7);
            backdrop-filter: blur(15px);
            color: #fff;
            font-size: .75rem;
            font-weight: 800;
            letter-spacing: .2em;
            text-transform: uppercase;
            padding: .6rem 1.4rem;
            border-radius: 100px;
            pointer-events: none;
            border: 1px solid rgba(255, 255, 255, .2)
        }

        .balb {
            left: 1.5rem
        }

        .bala {
            right: 1.5rem
        }

        .bahint {
            position: absolute;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            background: rgba(198, 168, 124, .95);
            color: var(--F);
            font-size: .75rem;
            font-weight: 800;
            letter-spacing: .15em;
            text-transform: uppercase;
            padding: .6rem 1.5rem;
            border-radius: 100px;
            pointer-events: none;
            white-space: nowrap;
            animation: bhF 4s ease forwards;
            box-shadow: 0 15px 40px rgba(0, 0, 0, .4)
        }

        @keyframes bhF {
            0% {
                opacity: 1;
                transform: translate(-50%, 15px)
            }

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

            70% {
                opacity: 1
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -15px)
            }
        }

        /* SERVICES */
        .sv {
            background: var(--F);
            position: relative;
            overflow: hidden;
            width: 100%
        }

        @media(min-width:801px) {
            .sv-pin-wrap {
                height: 400vh
            }

            .sv-sticky {
                position: sticky;
                top: 0;
                height: 100vh;
                overflow: clip;
                display: flex;
                align-items: stretch
            }

            .hs {
                display: flex;
                height: 100%;
                will-change: transform
            }

            .hp {
                width: 100vw;
                flex-shrink: 0;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 var(--PX)
            }

            .svp {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: rgba(255, 255, 255, .05);
                z-index: 10
            }

            .svpf {
                height: 100%;
                background: linear-gradient(90deg, var(--GD), var(--G), #fff);
                width: 0%;
                box-shadow: 0 0 20px rgba(198, 168, 124, .6)
            }

            .sv .fade-up {
                opacity: 1 !important;
                transform: translateY(0) !important
            }

            .sv .split-heading .word {
                opacity: 1 !important;
                transform: none !important;
                filter: blur(0) !important
            }
        }

        @media(max-width:800px) {
            .sv-pin-wrap {
                height: auto
            }

            .sv-sticky {
                position: static;
                height: auto
            }

            .hs {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: auto
            }

            .hp {
                width: 100%;
                height: auto;
                padding: 5rem var(--PX)
            }

            .svp {
                display: none
            }

            /* Fix service section image visibility on mobile */
            .pc2 {
                flex-direction: column;
            }
            .pv {
                width: 100%;
                height: 55vw;
                min-height: 220px;
            }
            .pv img {
                transform: scale(1) !important;
                object-position: center;
            }
            .pt {
                flex: none;
                width: 100%;
            }
        }

        .pc2 {
            display: flex;
            align-items: center;
            gap: 4vw;
            width: 100%;
            max-width: 1300px;
            margin: 0 auto
        }

        .pt {
            flex: 0 0 40%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start
        }

        .pt h2 {
            font-family: var(--FH);
            font-size: clamp(4rem, 6vw, 6.5rem);
            line-height: .85;
            margin-bottom: 1rem;
            color: #fff;
            letter-spacing: -.02em;
            text-shadow: 0 2px 20px rgba(0, 0, 0, .3)
        }

        .pt p {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, .8);
            margin-bottom: 2rem;
            max-width: 420px;
            line-height: 1.8
        }

        .pv {
            flex: 1;
            position: relative;
            height: 60vh;
            border-radius: var(--RLG);
            overflow: hidden;
            box-shadow: 0 50px 100px rgba(0, 0, 0, .7)
        }

        .pv-inner {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            border-radius: inherit
        }

        .pv-inner::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, .2);
            z-index: 1;
            transition: opacity 1s
        }

        .pv:hover .pv-inner::after {
            opacity: 0
        }

        .pv img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.2);
            transition: transform 1.5s var(--EX)
        }

        .pv:hover img {
            transform: scale(1.05)
        }

        .ptg {
            position: absolute;
            top: 2.5rem;
            left: 2.5rem;
            background: rgba(255, 255, 255, .12);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, .25);
            padding: .6rem 1.8rem;
            border-radius: 100px;
            font-size: .8rem;
            font-weight: 800;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: #fff;
            z-index: 2
        }

        .pno {
            position: absolute;
            bottom: 3rem;
            right: var(--PX);
            font-family: var(--FH);
            font-size: 12rem;
            font-weight: 300;
            color: rgba(255, 255, 255, .05);
            line-height: 1;
            pointer-events: none
        }

        /* PARALLAX */
        .ps {
            height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .psi {
            position: absolute;
            inset: -20%;
            z-index: 0
        }

        .psi img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(.35)
        }

        .psc {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #fff;
            max-width: 1000px;
            padding: 0 var(--PX)
        }

        .psc h2 {
            font-family: var(--FH);
            font-size: clamp(4rem, 7vw, 8.5rem);
            line-height: .9;
            font-weight: 300;
            margin-bottom: 2rem;
            animation: pscFloat 8s ease-in-out infinite
        }

        @keyframes pscFloat {

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

            50% {
                transform: translateY(-8px)
            }
        }

        .psc h2 em {
            background: linear-gradient(135deg, var(--G), #e8c98a, var(--GD));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .psc p {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, .8);
            margin-bottom: 3rem;
            line-height: 1.9;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto
        }

        /* CTA */
        .cs {
            background: linear-gradient(160deg, #071510 0%, #0f2518 60%, #071510 100%);
            padding: var(--SEC) var(--PX);
            position: relative;
            overflow: hidden;
            text-align: center
        }

        .cs-o {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(80px)
        }

        .cs-o1 {
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(198, 168, 124, .18), transparent 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: csP 7s ease-in-out infinite
        }

        .cs-o2 {
            width: 1200px;
            height: 1200px;
            background: radial-gradient(circle, rgba(82, 107, 87, .12), transparent 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: csP 9s ease-in-out infinite reverse
        }

        .cs::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 50% 50%, rgba(198, 168, 124, .04) 0%, transparent 60%);
            animation: csPulse 4s ease-in-out infinite;
            pointer-events: none;
            z-index: 1
        }

        @keyframes csP {

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

            50% {
                transform: translate(-50%, -50%) scale(1.25)
            }
        }

        @keyframes csPulse {

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

            50% {
                transform: scale(1.3);
                opacity: 1
            }
        }

        .csh {
            font-family: var(--FH);
            font-size: clamp(4rem, 7vw, 8.5rem);
            font-weight: 300;
            color: #fff;
            line-height: .95;
            margin-bottom: 1.8rem;
            position: relative;
            z-index: 2
        }

        .csh em {
            background: linear-gradient(135deg, var(--G), #e8c98a, var(--GD));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .csp {
            color: rgba(255, 255, 255, .7);
            font-size: 1.2rem;
            max-width: 650px;
            margin: 0 auto 3rem;
            line-height: 1.9;
            position: relative;
            z-index: 2
        }

        .csb {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 2
        }

        .trust-badges {
            display: flex;
            gap: 2rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 4rem;
            position: relative;
            z-index: 2
        }

        .tbadge {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: rgba(255, 255, 255, .65);
            font-size: .88rem;
            font-weight: 700;
            padding: .7rem 1.5rem;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 100px;
            background: rgba(255, 255, 255, .04);
            backdrop-filter: blur(15px);
            transition: all .5s var(--SP)
        }

        .tbadge:hover {
            transform: translateY(-8px) scale(1.05);
            background: rgba(255, 255, 255, .1);
            border-color: rgba(198, 168, 124, .5);
            color: #fff;
            box-shadow: 0 15px 30px rgba(0, 0, 0, .3)
        }

        .tbadge span {
            font-size: 1.3rem
        }

        .tbadge-icon {
            font-family: var(--FH);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--G);
            letter-spacing: 0
        }

        /* MAP */
        .mw {
            background: var(--W);
            padding: var(--SEC) var(--PX)
        }

        .mb {
            max-width: 1500px;
            margin: 0 auto;
            border-radius: var(--RLG);
            overflow: hidden;
            box-shadow: 0 40px 90px rgba(0, 0, 0, .18);
            border: 1px solid var(--BD)
        }

        .mb iframe {
            width: 100%;
            height: 480px;
            border: 0;
            display: block;
            filter: grayscale(.3) contrast(1.1) brightness(.95)
        }

        /* FOOTER */
        .ft {
            background: linear-gradient(160deg, #060e0a 0%, #0d2018 100%);
            color: #fff;
            padding: clamp(80px, 12vh, 130px) var(--PX) 3rem;
            position: relative;
            overflow: hidden
        }

        .ft::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 0% 0%, rgba(82, 107, 87, .25), transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(198, 168, 124, .2), transparent 50%)
        }

        .fg {
            display: grid;
            grid-template-columns: 2.5fr 1fr 1fr 1fr;
            gap: 6vw;
            max-width: 1500px;
            margin: 0 auto;
            position: relative;
            z-index: 1
        }

        .fli {
            height: 70px;
            width: auto;
            margin-bottom: 1.8rem;
            transition: filter .5s, transform .5s var(--SP);
            cursor: none
        }

        .fli:hover {
            filter: drop-shadow(0 0 12px rgba(198, 168, 124, .6));
            transform: scale(1.06) rotate(-1deg)
        }

        .fd {
            color: rgba(255, 255, 255, .6);
            max-width: 350px;
            margin-bottom: 2.5rem;
            font-size: .95rem;
            line-height: 1.85
        }

        .fh {
            font-size: .8rem;
            font-weight: 800;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--G);
            margin-bottom: 2rem
        }

        .fls {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1.2rem
        }

        .fls a {
            color: rgba(255, 255, 255, .5);
            transition: color .3s, transform .4s var(--EX);
            font-size: .88rem;
            display: inline-block;
            text-decoration: none;
            cursor: none
        }

        .fls a:hover {
            color: rgba(198, 168, 124, .9);
            transform: translateX(10px)
        }

        .social-row {
            display: flex;
            gap: .8rem;
            margin-top: 2rem
        }

        .soc {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .12);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, .6);
            transition: all .4s var(--EX);
            text-decoration: none;
            cursor: pointer;
            position: relative;
            z-index: 2
        }

        .soc:hover {
            background: var(--G);
            border-color: var(--G);
            color: var(--F);
            transform: translateY(-6px) scale(1.1);
            box-shadow: 0 15px 30px var(--GG)
        }

        .ftb {
            margin-top: 5rem;
            padding-top: 2.5rem;
            border-top: 1px solid rgba(255, 255, 255, .1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 1;
            font-size: .88rem;
            color: rgba(255, 255, 255, .45);
            flex-wrap: wrap;
            gap: 1rem
        }

        /* CHAT */
        .chat-widget {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            z-index: 8999;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: .85rem;
            pointer-events: none;
        }

        .chat-tooltip {
            position: absolute;
            right: calc(100% + 14px);
            top: 50%;
            transform: translateY(-50%);
            background: var(--F);
            color: #fff;
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .08em;
            white-space: nowrap;
            padding: .5rem 1rem;
            border-radius: 100px;
            pointer-events: none;
            opacity: 0;
            transition: opacity .3s;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
            border: 1px solid rgba(255, 255, 255, .1)
        }

        .chat-tooltip::after {
            content: "";
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-left-color: var(--F)
        }

        .chat-widget:not(.open) .chat-btn:hover .chat-tooltip {
            opacity: 1
        }

        .chat-btn {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--S), var(--F));
            border: 3px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: none;
            box-shadow: 0 12px 36px rgba(11, 31, 23, .45);
            transition: all .4s var(--SP);
            position: relative;
            animation: chatP 3.5s ease-in-out infinite 4s;
            pointer-events: auto;
        }

        @keyframes chatP {

            0%,
            100% {
                box-shadow: 0 12px 36px rgba(11, 31, 23, .45)
            }

            50% {
                box-shadow: 0 12px 36px rgba(11, 31, 23, .45), 0 0 0 14px rgba(82, 107, 87, .12)
            }
        }

        .chat-btn:hover {
            transform: scale(1.08) translateY(-3px)
        }

        .chat-btn svg {
            width: 30px;
            height: 30px;
            position: absolute;
            transition: opacity .25s, transform .25s
        }

        .chat-close-icon {
            opacity: 0;
            transform: rotate(-80deg) scale(.6)
        }

        .chat-widget.open .chat-btn .chat-icon {
            opacity: 0;
            transform: rotate(80deg) scale(.6)
        }

        .chat-widget.open .chat-btn .chat-close-icon {
            opacity: 1;
            transform: rotate(0) scale(1)
        }

        .chat-widget.open .chat-btn {
            background: #c0392b
        }

        .chat-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 22px;
            height: 22px;
            background: #E84B4B;
            border-radius: 50%;
            border: 2.5px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .68rem;
            font-weight: 800;
            color: #fff;
            transform: scale(0);
            transition: transform .5s var(--SP);
            font-family: var(--FB);
            pointer-events: none;
            box-shadow: 0 0 0 0 rgba(232, 75, 75, .4);
            animation: badgePulse 2s ease-in-out infinite 3.5s
        }

        @keyframes badgePulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(232, 75, 75, .4)
            }

            50% {
                box-shadow: 0 0 0 8px rgba(232, 75, 75, 0)
            }
        }

        .chat-badge.show {
            transform: scale(1)
        }

        .chat-panel {
            width: 360px;
            background: var(--W);
            border-radius: 22px;
            box-shadow: 0 28px 75px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06);
            overflow: clip;
            display: flex;
            flex-direction: column;
            max-height: min(620px, calc(100vh - 100px));
            height: min(580px, calc(100vh - 120px));
            transform: translateY(18px) scale(.94);
            opacity: 0;
            pointer-events: none;
            transition: all .42s var(--EX);
            transform-origin: bottom left;
            border: 1px solid rgba(11, 31, 23, .12)
        }

        .chat-widget.open .chat-panel {
            transform: translateY(0) scale(1);
            opacity: 1;
            pointer-events: auto
        }

        .chat-header {
            background: linear-gradient(135deg, #071510, #153024);
            padding: 1.1rem 1.3rem;
            display: flex;
            align-items: center;
            gap: .9rem;
            flex-shrink: 0
        }

        .chat-av {
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, var(--G), var(--GD));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            border: 2px solid rgba(255, 255, 255, .2);
            flex-shrink: 0
        }

        .chat-hi {
            flex: 1;
            min-width: 0
        }

        .chat-hn {
            font-weight: 800;
            color: #fff;
            font-size: .9rem
        }

        .chat-hs {
            font-size: .73rem;
            color: rgba(255, 255, 255, .6);
            display: flex;
            align-items: center;
            gap: .45rem;
            margin-top: .1rem
        }

        .chat-sd {
            width: 7px;
            height: 7px;
            background: #4ade80;
            border-radius: 50%;
            flex-shrink: 0;
            animation: sB 2s ease infinite
        }

        @keyframes sB {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .35
            }
        }

        .chat-hc {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: none;
            flex-shrink: 0;
            transition: background .2s
        }

        .chat-hc:hover {
            background: rgba(255, 255, 255, .22)
        }

        .chat-messages {
            flex: 1 1 0;
            min-height: 0;
            overflow-y: scroll;
            overflow-x: hidden;
            padding: 1.1rem 1.1rem .5rem;
            display: flex;
            flex-direction: column;
            gap: .7rem;
            scroll-behavior: smooth;
            background: #f7f8f6;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch
        }

        .chat-messages::-webkit-scrollbar {
            width: 4px
        }

        .chat-messages::-webkit-scrollbar-track {
            background: transparent
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(11, 31, 23, .15);
            border-radius: 4px
        }

        .chat-msg {
            display: flex;
            flex-direction: column;
            gap: .25rem
        }

        .chat-msg-user {
            align-items: flex-end
        }

        .chat-msg-bot {
            align-items: flex-start
        }

        .cbb,
        .cbu {
            max-width: 85%;
            padding: .75rem 1rem;
            border-radius: 18px;
            font-size: .88rem;
            line-height: 1.65;
            animation: bIn .35s var(--EX) both
        }

        @keyframes bIn {
            from {
                opacity: 0;
                transform: translateY(8px) scale(.96)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .cbb {
            background: #fff;
            color: var(--T);
            border-radius: 4px 18px 18px 18px;
            border: 1px solid rgba(0, 0, 0, .07);
            box-shadow: 0 2px 10px rgba(0, 0, 0, .05)
        }

        .cbb strong {
            color: var(--F)
        }

        .cbb a {
            color: var(--S);
            font-weight: 700
        }

        .cbu {
            background: var(--F);
            color: #fff;
            border-radius: 18px 4px 18px 18px
        }

        .wa-link {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            margin-top: .5rem;
            background: #25D366;
            color: #fff;
            padding: .5rem 1rem;
            border-radius: 100px;
            font-size: .8rem;
            font-weight: 800;
            transition: transform .3s, box-shadow .3s;
            text-decoration: none
        }

        .wa-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(37, 211, 102, .4)
        }

        .chat-quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
            padding: .2rem 0 .4rem
        }

        .chat-qr {
            padding: .45rem 1rem;
            border-radius: 100px;
            border: 1.5px solid var(--BD);
            background: #fff;
            color: var(--F);
            font-size: .78rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .3s var(--EX);
            white-space: nowrap
        }

        .chat-qr:hover {
            background: var(--F);
            color: #fff;
            border-color: var(--F);
            transform: translateY(-2px)
        }

        .chat-typing {
            display: none;
            align-items: center;
            gap: .7rem;
            padding: .6rem 1.1rem;
            background: #f7f8f6;
            flex-shrink: 0
        }

        .chat-typing.show {
            display: flex
        }

        .chat-typing-dots {
            display: flex;
            gap: 4px
        }

        .chat-typing-dots span {
            width: 7px;
            height: 7px;
            background: var(--SL);
            border-radius: 50%;
            animation: tB 1.2s ease-in-out infinite
        }

        .chat-typing-dots span:nth-child(2) {
            animation-delay: .18s
        }

        .chat-typing-dots span:nth-child(3) {
            animation-delay: .36s
        }

        @keyframes tB {

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

            30% {
                transform: translateY(-6px)
            }
        }

        .chat-typing-text {
            font-size: .74rem;
            color: var(--M);
            font-style: italic
        }

        .chat-input-row {
            display: flex;
            align-items: center;
            gap: .6rem;
            padding: .7rem .9rem;
            background: #fff;
            border-top: 1px solid var(--BD);
            flex-shrink: 0
        }

        .chat-input {
            flex: 1;
            border: 1.5px solid var(--BD);
            border-radius: 100px;
            padding: .6rem 1rem;
            font-family: var(--FB);
            font-size: .86rem;
            color: var(--T);
            background: #f7f8f6;
            outline: none;
            transition: border-color .25s, box-shadow .25s;
            cursor: text
        }

        .chat-input:focus {
            border-color: var(--S);
            box-shadow: 0 0 0 3px var(--SG);
            background: #fff
        }

        .chat-send {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--F);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background .3s, transform .3s var(--SP);
            cursor: pointer
        }

        .chat-send:hover {
            background: var(--S);
            transform: scale(1.1)
        }

        .chat-send:disabled {
            opacity: .4;
            pointer-events: none
        }

        .chat-footer-bar {
            text-align: center;
            padding: .4rem .9rem .55rem;
            font-size: .68rem;
            color: rgba(0, 0, 0, .3);
            background: #fff;
            letter-spacing: .04em;
            flex-shrink: 0
        }

        /* FADE UP */
        .fade-up,
        .bx,
        .vc,
        .tc,
        .bac,
        .pstep,
        .mb,
        .fg>div,
        .ftb,
        .faq-item,
        .why-item,
        .review-item {
            opacity: 0
        }

        /* RESPONSIVE */
        @media(max-width:1200px) {
            .review-list {
                grid-template-columns: 1fr 1fr
            }

            .why-grid {
                gap: 5vw
            }
        }

        @media(max-width:1100px) {
            .aw {
                grid-template-columns: 1fr;
                gap: 4rem
            }

            .av {
                height: 450px;
                order: -1
            }

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

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

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

            .fg {
                grid-template-columns: 1fr 1fr;
                gap: 3.5rem
            }

            .bag {
                grid-template-columns: 1fr
            }

            .ng,
            .proc-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .proc-grid::before {
                display: none
            }

            .why-grid {
                grid-template-columns: 1fr
            }

            .review-inner {
                flex-direction: column;
                text-align: center
            }

            .review-score {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, .1);
                padding-right: 0;
                padding-bottom: 2rem
            }
        }

        @media(max-width:900px) {
            .review-list {
                grid-template-columns: 1fr
            }

            .area-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))
            }
        }

        @media(max-width:800px) {
            .pv img, .iw img, .gi img, .why-img img {
                transform: scale(1) !important;
            }
            .nm {
                display: none
            }

            .ham {
                display: flex
            }

            #NAV .btn {
                display: none
            }

            .ht {
                font-size: 4.5rem
            }

            .fab {
                display: none !important;
            }

            .faq-q {
                font-size: 1.3rem
            }

            .chat-panel {
                width: 300px
            }

            .pricing-grid-inner {
                grid-template-columns: 1fr
            }
        }

        @media(max-width:680px) {

            .vg,
            .tg {
                grid-template-columns: 1fr
            }

            .gg {
                grid-template-columns: 1fr
            }

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

            .s2c,
            .s2r {
                grid-column: span 1;
                grid-row: span 1
            }

            .ng,
            .proc-grid {
                grid-template-columns: 1fr;
                gap: 2rem
            }

            .av {
                height: 320px
            }

            .bg {
                grid-template-columns: 1fr
            }

            .spills {
                gap: 1rem
            }

            .sp {
                padding: .6rem 1.5rem
            }

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

            .area-cta {
                padding: 2rem;
                flex-direction: column
            }

            .area-header {
                flex-direction: column;
                align-items: flex-start
            }

            .area-search-wrap {
                width: 100%
            }
        }

        @media(max-width:480px) {
            .chat-widget {
                left: 1rem;
                bottom: 1.5rem
            }

            .fab {
                bottom: 5rem
            }
        }

        @keyframes ping {

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

        /* ── SCROLL TO TOP ── */
        #stt {
            position: fixed;
            bottom: 8rem;
            right: 1.8rem;
            width: 44px;
            height: 44px;
            background: var(--F);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
            transform: scale(.7);
            transition: opacity .35s, transform .35s var(--SP);
            z-index: 800;
            box-shadow: 0 4px 20px rgba(11,31,23,.25)
        }
        #stt.visible { opacity: 1; pointer-events: auto; transform: scale(1) }
        #stt:hover { background: var(--S); transform: scale(1.12) !important }

        /* ── QUICK BOOK FORM ── */
        .qb-sec {
            background: linear-gradient(135deg, #f7f9f6 0%, #eef4ec 100%);
            padding: 7rem var(--PX)
        }
        .qb-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 5rem;
            align-items: start
        }
        .qb-left .sh { margin-bottom: 1.5rem }
        .qb-trust {
            display: flex;
            flex-wrap: wrap;
            gap: .75rem;
            margin: 2rem 0
        }
        .qb-trust-item {
            background: #fff;
            border: 1px solid var(--BD);
            border-radius: 50px;
            padding: .4rem 1rem;
            font-size: .82rem;
            font-weight: 700;
            color: var(--F);
            display: flex;
            align-items: center;
            gap: .4rem
        }
        .qb-contact-row {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1.5rem
        }
        .qb-contact-link {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .75rem 1.5rem;
            border: 2px solid var(--F);
            border-radius: 50px;
            color: var(--F);
            font-weight: 700;
            font-size: .9rem;
            text-decoration: none;
            transition: background .25s, color .25s
        }
        .qb-contact-link:hover { background: var(--F); color: #fff }
        .qb-right {
            background: #fff;
            border-radius: 24px;
            padding: 2.5rem;
            box-shadow: 0 20px 60px rgba(11,31,23,.1)
        }
        .qb-form { display: flex; flex-direction: column; gap: 1.2rem }
        .qb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
        .qb-field { display: flex; flex-direction: column; gap: .4rem }
        .qb-label {
            font-size: .8rem;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--F)
        }
        .qb-input {
            padding: .85rem 1rem;
            border: 1.5px solid var(--BD);
            border-radius: 10px;
            font-family: var(--FB);
            font-size: .92rem;
            color: var(--T);
            background: #fafbf9;
            outline: none;
            transition: border-color .25s, box-shadow .25s;
            width: 100%;
            box-sizing: border-box
        }
        .qb-input:focus {
            border-color: var(--S);
            box-shadow: 0 0 0 3px var(--SG);
            background: #fff
        }
        .qb-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B1F17' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem }
        .qb-textarea { resize: vertical; min-height: 90px }
        .qb-submit {
            margin-top: .5rem;
            width: 100%;
            justify-content: center;
            font-size: 1rem;
            padding: 1rem 2rem
        }
        .qb-disclaimer {
            text-align: center;
            font-size: .75rem;
            color: rgba(0,0,0,.4);
            margin-top: .25rem
        }
        .qb-success {
            text-align: center;
            padding: 3rem 2rem
        }
        .qb-success-icon {
            width: 70px;
            height: 70px;
            background: var(--G);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 1.5rem
        }
        .qb-success h3 {
            font-family: var(--FH);
            font-size: 1.8rem;
            margin-bottom: .5rem
        }
        @media(max-width: 900px) {
            .qb-inner { grid-template-columns: 1fr; gap: 3rem }
        }
        @media(max-width: 600px) {
            .qb-form-row { grid-template-columns: 1fr }
            .qb-right { padding: 1.8rem 1.4rem }
        }
    

/* ===== added: subpage hero band ===== */
.phero{background:linear-gradient(160deg,#071510 0%,#0d2218 60%,#071510 100%);color:#fff;padding:calc(var(--SEC) + 70px) var(--PX) 70px;text-align:center;position:relative;overflow:hidden}
.phero-crumb{font-family:var(--FB);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1.4rem;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.phero-crumb a{color:rgba(255,255,255,.6);text-decoration:none}
.phero-crumb a:hover{color:var(--G)}
.phero h1{font-family:var(--FH);font-weight:300;font-size:clamp(2.3rem,5vw,3.8rem);line-height:1.12;max-width:900px;margin:0 auto 1.1rem}
.phero h1 em{font-style:italic;color:var(--G)}
.phero p{max-width:640px;margin:0 auto;color:rgba(255,255,255,.72);font-size:1.05rem;line-height:1.8}
.svc-lead{max-width:720px;margin:0 auto 3rem;text-align:center}
.svc-lead p{font-size:1.05rem;line-height:1.85;color:var(--M)}
.svc-band-title{text-align:center;max-width:700px;margin:0 auto 2.5rem;position:relative;z-index:2}
.addon-note{max-width:900px;margin:2rem auto 0;text-align:center;color:rgba(255,255,255,.55);font-size:.92rem;position:relative;z-index:2}
.qb-error{display:none;background:rgba(198,90,74,.1);border:1px solid rgba(198,90,74,.35);color:#8a2c1d;padding:.9rem 1.1rem;border-radius:var(--RSM);font-size:.88rem;margin-top:1rem}
.legal-sec{padding:var(--SEC) var(--PX);max-width:820px;margin:0 auto}
.legal-sec h2{font-family:var(--FH);font-weight:500;font-size:1.6rem;margin:2.4rem 0 .9rem;color:var(--F)}
.legal-sec h2:first-child{margin-top:0}
.legal-sec p,.legal-sec li{color:var(--M);font-size:1rem;line-height:1.85;margin-bottom:.9rem}
.legal-sec ul{padding-left:1.4rem}
.legal-sec .legal-updated{color:var(--S);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2.5rem}


/* Accessibility contrast hardening — 2026-09-06 */
.pc-discounted { color: #E8C98A; }
.pc-sub,
.pc-unit { color: rgba(255, 255, 255, .72); }
.pc-includes-title { color: rgba(255, 255, 255, .70); }
.pc-inc-item { color: rgba(255, 255, 255, .78); }
.pricing-note p { color: rgba(255, 255, 255, .72); }