:root {
    --bg-main: #FAF5F6;
    --bg-card: #FFFFFF;
    --bg-soft: #F0E4E7;
    --text-main: #29171D;
    --text-muted: rgba(41, 23, 29, 0.7);
    --text-light: rgba(41, 23, 29, 0.4);
    --gold: #B94E59;
    --gold-soft: #B94E59;
    --gold-deep: #B94E59;
    --coral: #B94E59;
    --forest: #485F59;
    --forest-2: #617A73;
    --steel: #66728A;
    --gray: #786E73;
    --line-gold: rgba(168, 120, 74, .3);
    --line-light: rgba(41, 23, 29, .12);

    --ff-display: 'Playfair Display', Georgia, serif;
    --ff-body: 'DM Sans', system-ui, sans-serif;
    --ff-mono: 'DM Mono', ui-monospace, monospace;

    --ease-luxe: cubic-bezier(.22, .61, .21, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    --sh-luxe: 0 20px 50px -20px rgba(41, 23, 29, 0.15);
    --sh-gold: 0 14px 34px -12px rgba(168, 120, 74, .45);
    --r-card: 22px;
}

        /* ---------- 2. BASE ---------- */
        * {
            -webkit-tap-highlight-color: transparent
        }

        html {
            scroll-behavior: smooth
        }

        body {
            background: var(--bg-main);
            color: var(--text-main);
            font-family: var(--ff-body);
            font-weight: 400;
            overflow-x: hidden;
            letter-spacing: .01em;
        }

        body.is-loading {
            overflow: hidden
        }

        ::selection {
            background: var(--gold);
            color: var(--bg-main)
        }

        ::-webkit-scrollbar {
            width: 10px
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-main)
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(var(--gold-deep), var(--gold));
            border-radius: 8px;
            border: 2px solid var(--bg-main);
        }

        :focus-visible {
            outline: 2px solid var(--gold-soft);
            outline-offset: 3px;
            border-radius: 4px
        }

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

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

        button {
            font-family: inherit
        }

        section {
            position: relative;
            scroll-margin-top: 96px
        }

        .container-lx {
            max-width: 1280px;
            margin-inline: auto;
            padding-inline: clamp(1.25rem, 4vw, 2.5rem)
        }

        .sec-pad {
            padding-block: clamp(5rem, 9vw, 8.5rem)
        }

        .sec-light {
            background: var(--bg-card);
            color: var(--text-main)
        }

        .sec-cream {
            background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-main) 100%);
            color: var(--text-main)
        }

        .sec-abyss {
            background: radial-gradient(1200px 600px at 85% -10%, rgba(92, 117, 163, .15), transparent 60%), var(--bg-card)
        }

        .mono {
            font-family: var(--ff-mono)
        }

        .font-display {
            font-family: var(--ff-display)
        }

        .display-xl {
            font-family: var(--ff-display);
            font-weight: 600;
            line-height: 1.04;
            letter-spacing: -.01em
        }

        .hl {
            font-style: italic;
            font-weight: 700;
            background: linear-gradient(115deg, var(--gold-soft) 10%, var(--gold) 50%, var(--gold-deep) 90%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .muted-gold {
            color: var(--text-muted)
        }

        .wm {
            position: absolute;
            inset-inline: 0;
            top: -.14em;
            z-index: 0;
            pointer-events: none;
            user-select: none;
            font-family: var(--ff-display);
            font-weight: 800;
            font-size: clamp(6rem, 21vw, 19rem);
            line-height: 1;
            text-align: center;
            color: transparent;
            -webkit-text-stroke: 1px rgba(15, 27, 45, .05);
        }

        .sec-divider {
            height: 1px;
            border: 0;
            margin: 0;
            background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
            background-size: 200% 100%;
            animation: shimmer 4s linear infinite;
            opacity: .5;
        }

        @keyframes shimmer {
            to {
                background-position: -200% 0
            }
        }

        /* ---------- 3. ATOMS ---------- */
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .9rem;
            font-family: var(--ff-mono);
            font-size: .72rem;
            letter-spacing: .38em;
            text-transform: uppercase;
            color: var(--gold-deep);
            font-weight: 500;
        }

        .eyebrow::before {
            content: "";
            width: 44px;
            height: 1px;
            background: linear-gradient(90deg, var(--gold), transparent)
        }

        .eyebrow.center {
            justify-content: center
        }

        .eyebrow.center::after {
            content: "";
            width: 44px;
            height: 1px;
            background: linear-gradient(270deg, var(--gold), transparent)
        }

        .eyebrow.on-light {
            color: var(--gold-deep)
        }

        .btn {
            border: none;
            border-radius: 999px;
            font-weight: 600;
            letter-spacing: .03em;
            position: relative;
            overflow: hidden;
            transition: transform .45s var(--ease-luxe), box-shadow .45s var(--ease-luxe), background .45s, color .45s, border-color .45s;
        }

        .btn-luxe {
            padding: .95rem 2.1rem;
            font-size: .9rem;
            color: var(--bg-main);
            background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
            background-size: 160% 160%;
            box-shadow: var(--sh-gold);
        }

        .btn-luxe::before {
            content: "";
            position: absolute;
            top: 0;
            left: -80%;
            width: 45%;
            height: 100%;
            background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .75), transparent);
            transform: skewX(-22deg);
            transition: left .7s var(--ease-luxe);
        }

        .btn-luxe:hover {
            background-position: 90% 60%;
            transform: translateY(-3px);
            box-shadow: 0 22px 44px -14px rgba(201, 162, 75, .55);
            color: var(--bg-main)
        }

        .btn-luxe:hover::before {
            left: 130%
        }

        .btn-ghost {
            padding: .95rem 2.1rem;
            font-size: .9rem;
            color: var(--text-main);
            background: rgba(15, 27, 45, .03);
            border: 1px solid rgba(15, 27, 45, .28);
            backdrop-filter: blur(6px);
        }

        .btn-ghost:hover {
            background: var(--text-main);
            color: var(--bg-main);
            border-color: var(--text-main);
            transform: translateY(-3px)
        }

        .btn-ghost .fa-arrow-right {
            transition: transform .4s var(--ease-spring)
        }

        .btn-ghost:hover .fa-arrow-right {
            transform: translateX(5px)
        }

        .btn-sm-luxe {
            padding: .62rem 1.4rem;
            font-size: .78rem
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, .5);
            transform: scale(0);
            animation: ripple .7s var(--ease-out) forwards;
            pointer-events: none
        }

        @keyframes ripple {
            to {
                transform: scale(3.2);
                opacity: 0
            }
        }

        .magnetic {
            will-change: transform
        }

        [data-rv] {
            opacity: 0;
            transform: translateY(38px);
            transition: opacity 1s var(--ease-luxe), transform 1s var(--ease-luxe);
            transition-delay: var(--d, 0s)
        }

        [data-rv="scale"] {
            transform: scale(.9) translateY(14px)
        }

        [data-rv="left"] {
            transform: translateX(-46px)
        }

        [data-rv="right"] {
            transform: translateX(46px)
        }

        [data-rv="clip"] {
            transform: none;
            clip-path: inset(0 0 100% 0);
            transition: clip-path 1.1s var(--ease-luxe), opacity .8s;
            transition-delay: var(--d, 0s)
        }

        [data-rv].rv-in {
            opacity: 1;
            transform: none;
            clip-path: inset(0 0 -8% 0)
        }

        /* ---------- 4. CHROME ---------- */
        #loader {
            position: fixed;
            inset: 0;
            z-index: 3000;
            background: var(--bg-main);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            transition: opacity .8s var(--ease-luxe), visibility .8s;
        }

        #loader.done {
            opacity: 0;
            visibility: hidden
        }

        .ld-mark {
            width: 74px;
            height: 74px;
            position: relative;
            display: grid;
            place-items: center
        }

        .ld-mark::before,
        .ld-mark::after {
            content: "";
            position: absolute;
            inset: 0;
            border: 1px solid var(--line-gold);
            transform: rotate(45deg)
        }

        .ld-mark::after {
            inset: 9px;
            border-color: var(--gold);
            animation: ldSpin 3.2s var(--ease-luxe) infinite
        }

        .ld-mark span {
            font-family: var(--ff-display);
            font-size: 1.7rem;
            color: var(--gold-soft);
            font-weight: 600;
            z-index: 2;
        }

        @keyframes ldSpin {
            50% {
                transform: rotate(225deg)
            }

            100% {
                transform: rotate(405deg)
            }
        }

        .ld-name {
            font-family: var(--ff-mono);
            letter-spacing: .55em;
            font-size: .72rem;
            color: var(--text-muted);
            text-transform: uppercase;
            padding-left: .55em
        }

        .ld-bar {
            width: 230px;
            height: 1px;
            background: rgba(15, 27, 45, .12);
            position: relative
        }

        .ld-bar i {
            position: absolute;
            inset: 0;
            right: auto;
            width: 0;
            background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft))
        }

        .ld-pct {
            font-family: var(--ff-mono);
            font-size: .72rem;
            color: var(--gold);
            letter-spacing: .2em
        }

        #curDot,
        #curRing {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 4000;
            pointer-events: none;
            border-radius: 50%;
            transform: translate(-50%, -50%)
        }

        #curDot {
            width: 6px;
            height: 6px;
            background: var(--gold-deep)
        }

        #curRing {
            width: 36px;
            height: 36px;
            border: 1px solid rgba(201, 162, 75, .55);
            transition: width .35s var(--ease-luxe), height .35s var(--ease-luxe), background .35s, border-color .35s
        }

        #curRing.hov {
            width: 58px;
            height: 58px;
            background: rgba(201, 162, 75, .1);
            border-color: var(--gold-soft)
        }

        @media (pointer:fine) {

            body.lx-cursor,
            body.lx-cursor a,
            body.lx-cursor button,
            body.lx-cursor label {
                cursor: none
            }
        }

        @media (pointer:coarse) {

            #curDot,
            #curRing {
                display: none
            }
        }

        #scrollProg {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0;
            z-index: 2500;
            background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft), var(--coral));
            box-shadow: 0 0 12px rgba(201, 162, 75, .7)
        }

        /* nav */
        #siteNav {
            position: fixed;
            inset-inline: 0;
            top: 14px;
            z-index: 1500;
            transition: top .4s var(--ease-luxe)
        }

        .nav-shell {
            max-width: 1280px;
            margin-inline: auto;
            padding-inline: clamp(.75rem, 2vw, 1.5rem);
        }

        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: .75rem .9rem .75rem 1.2rem;
            border-radius: 20px;
            border: 1px solid transparent;
            transition: background .5s, border-color .5s, box-shadow .5s, backdrop-filter .5s;
        }

        #siteNav.scrolled .nav-inner,
        #siteNav.force-glass .nav-inner {
            background: rgba(247, 244, 238, .75);
            backdrop-filter: blur(18px) saturate(150%);
            border-color: var(--line-light);
            box-shadow: 0 18px 50px -18px rgba(15, 27, 45, 0.1);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: .8rem
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            position: relative;
            display: grid;
            place-items: center;
            flex: none
        }

        .brand-mark::before {
            content: "";
            position: absolute;
            inset: 3px;
            border: 1px solid var(--gold);
            transform: rotate(45deg);
            transition: transform .6s var(--ease-spring)
        }

        .brand:hover .brand-mark::before {
            transform: rotate(135deg)
        }

        .brand-mark b {
            font-family: var(--ff-display);
            font-weight: 600;
            font-size: 1.05rem;
            color: var(--gold-deep)
        }

        .brand-txt {
            line-height: 1.05
        }

        .brand-txt strong {
            display: block;
            font-family: var(--ff-display);
            font-weight: 600;
            letter-spacing: .14em;
            font-size: 1.02rem;
            color: var(--text-main)
        }

        .brand-txt small {
            font-family: var(--ff-mono);
            font-size: .55rem;
            letter-spacing: .42em;
            color: var(--gold);
            text-transform: uppercase
        }

        .nav-menu {
            display: flex;
            align-items: center;
            gap: .35rem
        }

        .nv-link {
            position: relative;
            padding: .55rem .85rem;
            font-size: .86rem;
            font-weight: 500;
            color: var(--text-muted);
            transition: color .3s;
            display: inline-block;
        }

        .nv-link::after {
            content: "";
            position: absolute;
            left: .85rem;
            right: .85rem;
            bottom: .28rem;
            height: 1px;
            background: var(--gold);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform .45s var(--ease-luxe)
        }

        .nv-link:hover,
        .nv-link.active {
            color: var(--gold-deep)
        }

        .nv-link:hover::after,
        .nv-link.active::after {
            transform: scaleX(1);
            transform-origin: left
        }

        .has-drop {
            position: relative
        }

        .drop-caret {
            font-size: .6rem;
            margin-left: .3rem;
            transition: transform .35s var(--ease-luxe);
            color: var(--gold)
        }

        .has-drop:hover .drop-caret,
        .has-drop:focus-within .drop-caret {
            transform: rotate(180deg)
        }

        .drop-menu {
            position: absolute;
            top: calc(100% + 14px);
            left: 50%;
            transform: translate(-50%, 10px);
            min-width: 270px;
            padding: .8rem;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid var(--line-gold);
            box-shadow: var(--sh-luxe);
            opacity: 0;
            visibility: hidden;
            transition: opacity .4s var(--ease-luxe), transform .4s var(--ease-luxe), visibility .4s;
        }

        .drop-menu::before {
            content: "";
            position: absolute;
            top: -6px;
            left: 50%;
            width: 12px;
            height: 12px;
            transform: translateX(-50%) rotate(45deg);
            background: rgba(255, 255, 255, 0.95);
            border-left: 1px solid var(--line-gold);
            border-top: 1px solid var(--line-gold)
        }

        .has-drop:hover .drop-menu,
        .has-drop:focus-within .drop-menu {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, 0)
        }

        .drop-item {
            display: flex;
            align-items: center;
            gap: .85rem;
            padding: .65rem .8rem;
            border-radius: 12px;
            font-size: .85rem;
            color: var(--text-muted);
            transition: background .3s, transform .3s var(--ease-luxe), color .3s
        }

        .drop-item i {
            width: 16px;
            color: var(--gold);
            font-size: .8rem
        }

        .drop-item em {
            margin-left: auto;
            font-style: normal;
            font-family: var(--ff-mono);
            font-size: .6rem;
            color: var(--text-light)
        }

        .drop-item:hover {
            background: rgba(201, 162, 75, .12);
            transform: translateX(4px);
            color: var(--gold-deep)
        }

        .nav-cta {
            flex: none
        }

        .burger {
            display: none;
            width: 46px;
            height: 46px;
            border-radius: 14px;
            border: 1px solid var(--line-light);
            background: rgba(15, 27, 45, .03);
            position: relative
        }

        .burger i {
            position: absolute;
            left: 13px;
            right: 13px;
            height: 1.6px;
            background: var(--text-main);
            transition: .45s var(--ease-luxe)
        }

        .burger i:first-child {
            top: 17px
        }

        .burger i:last-child {
            bottom: 17px
        }

        .burger.open i:first-child {
            top: 22px;
            transform: rotate(45deg);
            background: var(--gold-deep)
        }

        .burger.open i:last-child {
            bottom: 22px;
            transform: rotate(-45deg);
            background: var(--gold-deep)
        }

        @media (max-width:991.98px) {

            .nav-menu,
            .nav-cta {
                display: none
            }

            .burger {
                display: block
            }
        }

        #drawer {
            position: fixed;
            inset: 0;
            z-index: 1400;
            background: radial-gradient(900px 500px at 90% 0%, rgba(92, 117, 163, .15), transparent 55%), var(--bg-main);
            padding: 7rem 2.2rem 3rem;
            transform: translateX(100%);
            transition: transform .65s var(--ease-luxe);
            display: flex;
            flex-direction: column;
        }

        #drawer.open {
            transform: none
        }

        #drawer .dw-link {
            font-family: var(--ff-display);
            font-size: clamp(1.9rem, 8vw, 2.6rem);
            font-weight: 500;
            padding: .35rem 0;
            color: var(--text-main);
            display: flex;
            align-items: baseline;
            gap: 1rem;
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .5s var(--ease-luxe), transform .5s var(--ease-luxe), color .3s
        }

        #drawer.open .dw-link {
            opacity: 1;
            transform: none
        }

        #drawer .dw-link:hover {
            color: var(--gold-deep)
        }

        #drawer .dw-link small {
            font-family: var(--ff-mono);
            font-size: .62rem;
            letter-spacing: .3em;
            color: var(--gold)
        }

        #drawer .dw-foot {
            margin-top: auto;
            display: flex;
            gap: .8rem
        }

        .dw-social {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--line-light);
            display: grid;
            place-items: center;
            color: var(--text-main);
            transition: .35s
        }

        .dw-social:hover {
            background: var(--gold);
            color: var(--bg-main);
            border-color: var(--gold);
            transform: translateY(-4px)
        }

        /* ---------- 5. HERO ---------- */
        #home {
            min-height: 100svh;
            display: flex;
            align-items: center;
            padding-top: 7.5rem;
            overflow: hidden;
            background: radial-gradient(1000px 560px at 88% -8%, rgba(201, 162, 75, .16), transparent 60%), radial-gradient(800px 500px at -10% 100%, rgba(30, 91, 68, .12), transparent 60%), var(--bg-main);
        }

        #home::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image: linear-gradient(rgba(15, 27, 45, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 27, 45, .028) 1px, transparent 1px);
            background-size: 58px 58px;
            mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
        }

        #dust {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1
        }

        .hero-grid {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: clamp(2rem, 5vw, 4.5rem);
            align-items: center
        }

        .hero-eyebrow {
            margin-bottom: 1.6rem
        }

        .hero-title {
            font-size: clamp(2.9rem, 6.2vw, 5.3rem);
            margin-bottom: 1.6rem
        }

        .hero-lead {
            max-width: 34rem;
            font-size: 1.02rem;
            line-height: 1.85;
            color: var(--text-muted);
            font-weight: 300;
            margin-bottom: 2.4rem
        }

        .hero-ctas {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 3rem
        }

        [data-intro] {
            opacity: 0;
            transform: translateY(34px);
            transition: opacity 1.1s var(--ease-luxe), transform 1.1s var(--ease-luxe);
            transition-delay: var(--d, 0s)
        }

        body.loaded [data-intro] {
            opacity: 1;
            transform: none
        }

        .hero-visual {
            position: relative;
            min-height: 440px
        }

        .hv-frame {
            position: absolute;
            inset: 0;
            clip-path: polygon(0 5.5%, 100% 0, 100% 94.5%, 0 100%);
            border: 1px solid rgba(201, 162, 75, .5);
            transform: translate(20px, 20px);
            opacity: .55
        }

        .hv-img {
            position: relative;
            clip-path: polygon(0 5.5%, 100% 0, 100% 94.5%, 0 100%);
            overflow: hidden;
            box-shadow: var(--sh-luxe)
        }

        .hv-img img {
            width: 100%;
            height: clamp(420px, 58vh, 620px);
            object-fit: cover;
            transform: scale(1.06);
            transition: transform 6s var(--ease-luxe);
            filter: saturate(.92) contrast(1.05) brightness(1.05)
        }

        body.loaded .hv-img img {
            transform: scale(1)
        }

        .hv-img::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(200deg, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.3) 100%), linear-gradient(35deg, rgba(201, 162, 75, .18), transparent 45%)
        }

        .orbit {
            position: absolute;
            border-radius: 50%;
            pointer-events: none
        }

        .orbit.o1 {
            width: min(300px, 46vw);
            height: min(300px, 46vw);
            right: -9%;
            top: -11%;
            border: 1px dashed rgba(201, 162, 75, .4);
            animation: spin 46s linear infinite
        }

        .orbit.o1::before {
            content: "";
            position: absolute;
            top: 14%;
            left: -4px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--gold-soft);
            box-shadow: 0 0 14px var(--gold-soft)
        }

        .orbit.o2 {
            width: 150px;
            height: 150px;
            left: -8%;
            bottom: 6%;
            border: 1px solid rgba(224, 107, 82, .35);
            animation: spin 30s linear infinite reverse
        }

        .orbit.o2::before {
            content: "";
            position: absolute;
            bottom: 10%;
            right: -3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--coral);
            box-shadow: 0 0 12px var(--coral)
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        .chip {
            position: absolute;
            display: flex;
            align-items: center;
            gap: .8rem;
            padding: .85rem 1.1rem;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(16px) saturate(140%);
            border: 1px solid var(--line-gold);
            box-shadow: var(--sh-luxe);
            z-index: 3;
            animation: floaty 7s ease-in-out infinite;
        }

        .chip .ic {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            font-size: .95rem;
            flex: none
        }

        .chip small {
            display: block;
            font-family: var(--ff-mono);
            font-size: .58rem;
            letter-spacing: .24em;
            text-transform: uppercase;
            color: var(--gray)
        }

        .chip b {
            font-size: .95rem;
            font-weight: 600;
            letter-spacing: .01em;
            color: var(--text-main)
        }

        .chip-a {
            top: 9%;
            left: -14%
        }

        .chip-a .ic {
            background: rgba(47, 122, 91, .22);
            color: var(--forest-2)
        }

        .chip-a svg {
            display: block;
            margin-top: 2px
        }

        .chip-a svg path {
            stroke: var(--gold-deep);
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-dasharray: 120;
            stroke-dashoffset: 120;
            animation: spark 3s var(--ease-out) 1.6s forwards
        }

        @keyframes spark {
            to {
                stroke-dashoffset: 0
            }
        }

        .chip-b {
            bottom: 14%;
            right: -7%;
            animation-delay: 1.6s
        }

        .chip-b .ic {
            background: rgba(201, 162, 75, .16);
            color: var(--gold-deep)
        }

        .chip-c {
            bottom: -5%;
            left: 6%;
            animation-delay: 3s;
            padding: .7rem 1rem
        }

        .chip-c .ic {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(224, 107, 82, .18);
            color: var(--coral);
            font-size: .8rem
        }

        @keyframes floaty {
            50% {
                transform: translateY(-13px)
            }
        }

        .scroll-cue {
            position: absolute;
            left: clamp(1.25rem, 4vw, 2.5rem);
            bottom: 2.2rem;
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .8rem
        }

        .scroll-cue span {
            font-family: var(--ff-mono);
            font-size: .58rem;
            letter-spacing: .4em;
            color: var(--gray);
            writing-mode: vertical-rl
        }

        .scroll-cue i {
            width: 1px;
            height: 52px;
            background: rgba(15, 27, 45, .15);
            position: relative;
            overflow: hidden
        }

        .scroll-cue i::after {
            content: "";
            position: absolute;
            top: -40%;
            left: 0;
            width: 100%;
            height: 40%;
            background: var(--gold-deep);
            animation: cueDrop 2.2s var(--ease-luxe) infinite
        }

        @keyframes cueDrop {
            to {
                top: 110%
            }
        }

        @media (max-width:1199.98px) {
            .chip-a {
                left: -4%
            }

            .chip-b {
                right: 0
            }
        }

        @media (max-width:991.98px) {
            .hero-grid {
                grid-template-columns: 1fr;
                gap: 3.2rem
            }

            .hero-visual {
                max-width: 560px
            }

            .scroll-cue {
                display: none
            }

            .chip-a {
                left: 2%
            }

            .chip-b {
                right: 2%
            }
        }

        /* ---------- 6. ABOUT ---------- */
        #about {
            overflow: hidden
        }

        #about .container-lx {
            position: relative;
            z-index: 1
        }

        .ab-visual {
            position: relative;
            max-width: 520px
        }

        .ab-img {
            border-radius: 230px 26px 230px 26px;
            overflow: hidden;
            box-shadow: var(--sh-luxe);
            position: relative
        }

        .ab-img img {
            width: 100%;
            height: clamp(430px, 52vw, 600px);
            object-fit: cover;
            transform: scale(1.05);
            transition: transform 1.4s var(--ease-luxe)
        }

        .ab-img:hover img {
            transform: scale(1.12)
        }

        .ab-img::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(20deg, rgba(255, 255, 255, 0.1), transparent 45%)
        }

        .ab-badge {
            position: absolute;
            top: 7%;
            left: -6%;
            padding: .7rem 1.15rem;
            border-radius: 14px;
            background: var(--text-main);
            color: var(--gold-soft);
            font-family: var(--ff-mono);
            font-size: .62rem;
            letter-spacing: .3em;
            box-shadow: var(--sh-luxe);
            animation: floaty 6s ease-in-out infinite;
            z-index: 3
        }

        .ab-card {
            position: absolute;
            right: -9%;
            bottom: -8%;
            z-index: 3;
            min-width: 230px;
            padding: 1.5rem 1.7rem;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(18px) saturate(150%);
            border: 1px solid var(--line-gold);
            box-shadow: 0 20px 40px -15px rgba(15, 27, 45, 0.1);
            animation: floaty 8s ease-in-out 1.2s infinite;
        }

        .ab-card .big {
            font-family: var(--ff-display);
            font-weight: 700;
            font-size: 2.5rem;
            color: var(--text-main);
            line-height: 1
        }

        .ab-card .big em {
            font-style: normal;
            color: var(--gold-deep)
        }

        .ab-card p {
            margin: .5rem 0 0;
            font-family: var(--ff-mono);
            font-size: .6rem;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: var(--gray)
        }

        .ab-card .bar {
            height: 4px;
            border-radius: 4px;
            background: rgba(15, 27, 45, .1);
            margin-top: 1rem;
            overflow: hidden
        }

        .ab-card .bar i {
            display: block;
            height: 100%;
            width: 0;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
            transition: width 1.6s var(--ease-out) .4s
        }

        .ab-card.rv-in .bar i {
            width: 82%
        }

        .ab-para {
            font-size: 1rem;
            line-height: 1.9;
            color: var(--text-muted);
            font-weight: 300;
            max-width: 36rem
        }

        .pill-row {
            display: flex;
            flex-wrap: wrap;
            gap: .7rem;
            margin: 1.9rem 0 2.6rem
        }

        .feat-pill {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            padding: .6rem 1.2rem;
            border-radius: 999px;
            border: 1px solid var(--line-light);
            font-size: .82rem;
            font-weight: 500;
            color: var(--text-main);
            transition: .4s var(--ease-luxe);
            background: #fff;
        }

        .feat-pill i {
            color: var(--gold-deep);
            font-size: .72rem;
            transition: transform .4s var(--ease-spring)
        }

        .feat-pill:hover {
            background: var(--text-main);
            color: var(--bg-main);
            border-color: var(--text-main);
            transform: translateY(-4px)
        }

        .feat-pill:hover i {
            color: var(--gold-soft);
            transform: rotate(90deg)
        }

        @media (max-width:1199.98px) {
            .ab-card {
                right: 0
            }

            .ab-badge {
                left: 0
            }
        }

        @media (max-width:991.98px) {
            .ab-visual {
                margin-inline: auto;
                margin-bottom: 3.5rem
            }
        }

        /* ---------- 7. SERVICES ---------- */
        #services {
            background: radial-gradient(900px 520px at 8% 6%, rgba(30, 91, 68, .1), transparent 55%), radial-gradient(900px 520px at 96% 90%, rgba(224, 107, 82, .06), transparent 55%), var(--bg-soft);
        }

        #services::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image: radial-gradient(rgba(15, 27, 45, .05) 1px, transparent 1px);
            background-size: 34px 34px;
            mask-image: linear-gradient(180deg, #000, transparent 70%)
        }

        .svc-head {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1.6rem;
            margin-bottom: 3.4rem;
            position: relative;
            z-index: 1
        }

        .svc-title {
            font-size: clamp(2.1rem, 4.4vw, 3.4rem)
        }

        .flt-row {
            display: flex;
            flex-wrap: wrap;
            gap: .55rem
        }

        .flt-btn {
            padding: .55rem 1.25rem;
            border-radius: 999px;
            border: 1px solid var(--line-light);
            background: transparent;
            color: var(--text-muted);
            font-family: var(--ff-mono);
            font-size: .66rem;
            letter-spacing: .22em;
            text-transform: uppercase;
            transition: .35s var(--ease-luxe);
        }

        .flt-btn:hover {
            border-color: var(--gold);
            color: var(--gold-deep);
            transform: translateY(-2px)
        }

        .flt-btn.active {
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            color: #fff;
            border-color: transparent;
            box-shadow: var(--sh-gold)
        }

        .svc-grid {
            position: relative;
            z-index: 1
        }

        .svc-card {
            --strip: var(--gold);
            position: relative;
            overflow: hidden;
            height: 100%;
            padding: 2.1rem 1.9rem 2.3rem;
            border-radius: var(--r-card);
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
            border: 1px solid var(--line-light);
            cursor: pointer;
            transition: transform .55s var(--ease-luxe), border-color .45s, box-shadow .55s var(--ease-luxe), opacity .4s;
        }

        .svc-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 8%;
            right: 8%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(15, 27, 45, 0.2), transparent);
            opacity: .5
        }

        .svc-strip {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--strip), transparent 85%);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .6s var(--ease-luxe)
        }

        .svc-glow {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity .45s;
            pointer-events: none;
            background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--strip) 16%, transparent), transparent 65%)
        }

        .svc-card:hover {
            transform: translateY(-11px);
            border-color: color-mix(in srgb, var(--strip) 45%, transparent);
            box-shadow: 0 20px 40px -20px rgba(15, 27, 45, 0.2)
        }

        .svc-card:hover .svc-strip {
            transform: scaleX(1)
        }

        .svc-card:hover .svc-glow {
            opacity: 1
        }

        .svc-ic {
            width: 58px;
            height: 58px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
            color: var(--strip);
            background: color-mix(in srgb, var(--strip) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--strip) 34%, transparent);
            transition: transform .5s var(--ease-spring), box-shadow .5s;
        }

        .svc-card:hover .svc-ic {
            transform: rotate(-8deg) scale(1.08);
            box-shadow: 0 0 26px color-mix(in srgb, var(--strip) 45%, transparent)
        }

        .svc-card h3 {
            font-family: var(--ff-display);
            font-weight: 600;
            font-size: 1.45rem;
            margin-bottom: .7rem;
            color: var(--text-main)
        }

        .svc-card>p {
            font-size: .88rem;
            line-height: 1.75;
            color: var(--text-muted);
            font-weight: 300;
            min-height: 4.6em
        }

        .svc-tags {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
            margin-bottom: 1.5rem
        }

        .svc-tags span {
            font-family: var(--ff-mono);
            font-size: .58rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            padding: .32rem .7rem;
            border-radius: 999px;
            border: 1px solid var(--line-light);
            color: var(--text-muted);
            transition: .3s
        }

        .svc-card:hover .svc-tags span {
            border-color: color-mix(in srgb, var(--strip) 40%, transparent)
        }

        .svc-foot {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-family: var(--ff-mono);
            font-size: .66rem;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--gold-deep)
        }

        .svc-foot i {
            transition: transform .4s var(--ease-spring)
        }

        .svc-card:hover .svc-foot i {
            transform: translateX(6px)
        }

        .svc-card.is-hidden {
            display: none
        }

        .svc-card.pop {
            animation: cardPop .7s var(--ease-out) both
        }

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

            to {
                opacity: 1;
                transform: none
            }
        }

        /* service detail modal */
        .svc-modal .modal-content {
            background: #fff;
            border: 1px solid var(--line-gold);
            border-radius: 26px;
            color: var(--text-main);
            box-shadow: var(--sh-luxe);
        }

        .svc-modal .modal-header {
            border-bottom: 1px solid var(--line-light);
            padding: 1.8rem 2rem
        }

        .svc-modal .modal-body {
            padding: 1.8rem 2rem 2.2rem
        }

        .sm-cat {
            font-family: var(--ff-mono);
            font-size: .6rem;
            letter-spacing: .3em;
            text-transform: uppercase;
            padding: .4rem .9rem;
            border-radius: 999px;
            border: 1px solid currentColor;
            color: var(--gold-deep);
        }

        .sm-close {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--line-light);
            background: transparent;
            color: var(--text-main);
            transition: .35s
        }

        .sm-close:hover {
            background: var(--coral);
            border-color: var(--coral);
            transform: rotate(90deg);
            color: #fff;
        }

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

        .sub-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.05rem 1.2rem;
            border-radius: 16px;
            background: var(--bg-main);
            border: 1px solid var(--line-light);
            opacity: 0;
            transform: translateY(20px);
            animation: subIn .65s var(--ease-out) forwards;
            animation-delay: var(--d, 0s);
            transition: border-color .3s, transform .3s var(--ease-luxe), background .3s;
        }

        .sub-item:hover {
            border-color: var(--gold);
            transform: translateX(6px) !important;
            background: rgba(201, 162, 75, .08)
        }

        .sub-item .si {
            width: 42px;
            height: 42px;
            flex: none;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: rgba(201, 162, 75, .14);
            color: var(--gold-deep)
        }

        .sub-item b {
            display: block;
            font-size: .92rem;
            font-weight: 600;
            color: var(--text-main)
        }

        .sub-item small {
            color: var(--text-muted);
            font-size: .74rem;
            font-weight: 300;
            line-height: 1.4;
            display: block;
        }

        .sub-item .go {
            margin-left: auto;
            color: var(--text-light);
            transition: .3s
        }

        .sub-item:hover .go {
            color: var(--gold-deep);
            transform: translateX(3px)
        }

        @keyframes subIn {
            to {
                opacity: 1;
                transform: none
            }
        }

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

            .svc-modal .modal-header,
            .svc-modal .modal-body {
                padding-left: 1.3rem;
                padding-right: 1.3rem
            }
        }

        /* ---------- 8. TESTIMONIALS ---------- */
        #testimonials {
            background: var(--bg-main);
            color: var(--text-main);
            overflow: hidden
        }

        .tst-head {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1.4rem;
            margin-bottom: 3rem
        }

        .tst-title {
            font-size: clamp(2.1rem, 4.4vw, 3.4rem)
        }

        .tst-nav {
            display: flex;
            gap: .7rem
        }

        .tst-btn {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            border: 1px solid var(--line-light);
            background: transparent;
            color: var(--text-main);
            transition: .35s var(--ease-luxe);
        }

        .tst-btn:hover {
            background: var(--text-main);
            color: var(--gold-soft);
            border-color: var(--text-main);
            transform: translateY(-3px)
        }

        .tst-view {
            overflow: hidden;
            cursor: grab;
            margin-inline: -.4rem;
            padding: .6rem .4rem 1.6rem;
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent)
        }

        .tst-view.dragging {
            cursor: grabbing
        }

        .tst-view.dragging .tst-track {
            transition: none
        }

        .tst-track {
            display: flex;
            gap: 1.6rem;
            transition: transform .8s var(--ease-luxe);
            will-change: transform
        }

        .tst-card {
            flex: 0 0 var(--tst-w, 440px);
            position: relative;
            padding: 2.4rem 2.2rem 2rem;
            border-radius: 24px;
            background: #fff;
            color: var(--text-main);
            border: 1px solid var(--line-light);
            box-shadow: 0 15px 30px -15px rgba(15, 27, 45, 0.1);
            transition: transform .5s var(--ease-luxe), box-shadow .5s;
            overflow: hidden;
        }

        .tst-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(201, 162, 75, .6), transparent)
        }

        .tst-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px -20px rgba(15, 27, 45, 0.2)
        }

        .tst-quote {
            position: absolute;
            top: .4rem;
            right: 1.4rem;
            font-family: var(--ff-display);
            font-size: 6.4rem;
            line-height: 1;
            color: rgba(201, 162, 75, .18);
            pointer-events: none;
            user-select: none
        }

        .tst-stars {
            color: var(--gold);
            font-size: .8rem;
            letter-spacing: .2em;
            margin-bottom: 1.2rem
        }

        .tst-card blockquote {
            font-size: 1rem;
            line-height: 1.85;
            font-weight: 300;
            color: var(--text-muted);
            margin-bottom: 1.8rem;
            min-height: 7.2em
        }

        .tst-who {
            display: flex;
            align-items: center;
            gap: .95rem;
            border-top: 1px solid var(--line-light);
            padding-top: 1.3rem
        }

        .tst-avatar {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
            color: #fff!important;
            font-family: var(--ff-display);
            font-size: 1.5rem;
            font-weight: 600;
            flex: none;
        }

        .tst-who b {
            font-family: var(--ff-display);
            font-weight: 600;
            font-size: 1.05rem;
            display: block;
            color: var(--text-main);
        }

        .tst-who span {
            font-family: var(--ff-mono);
            font-size: .6rem;
            letter-spacing: .24em;
            text-transform: uppercase;
            color: var(--gold-deep)
        }

        .tst-count {
            font-family: var(--ff-mono);
            font-size: .72rem;
            letter-spacing: .3em;
            color: var(--text-muted)
        }

        .tst-count b {
            color: var(--text-main);
            font-weight: 500
        }

        /* ---------- 9. FAQ ---------- */
        #faq {
            background: linear-gradient(180deg, var(--bg-main) 0%, var(--bg-soft) 100%);
            color: var(--text-main)
        }

        .faq-side {
            position: sticky;
            top: 120px
        }

        .faq-title {
            font-size: clamp(2.1rem, 4vw, 3.1rem);
            margin: 1.2rem 0 1.2rem
        }

        .faq-side p {
            color: var(--text-muted);
            line-height: 1.85;
            font-weight: 300;
            max-width: 24rem
        }

        .faq-cta {
            margin-top: 2.2rem;
            padding: 1.8rem;
            border-radius: 22px;
            color: var(--text-main);
            background: radial-gradient(320px 160px at 90% -10%, rgba(201, 162, 75, 0.2), transparent 60%), linear-gradient(160deg, var(--bg-card), var(--bg-main));
            border: 1px solid var(--line-gold);
            box-shadow: var(--sh-luxe);
        }

        .faq-cta b {
            font-family: var(--ff-display);
            font-size: 1.25rem;
            font-weight: 600;
            display: block;
            margin-bottom: .4rem
        }

        .faq-cta p {
            color: var(--text-muted) !important;
            font-size: .85rem;
            margin-bottom: 1.1rem
        }

        .faq-cta a {
            font-family: var(--ff-mono);
            font-size: .72rem;
            letter-spacing: .2em;
            color: var(--gold-deep)
        }

        .faq-cols {
            columns: 2;
            column-gap: 1.2rem
        }

        @media (max-width:767.98px) {
            .faq-cols {
                columns: 1
            }

            .faq-side {
                position: static
            }
        }

        .faq-item {
            break-inside: avoid;
            margin-bottom: 1.2rem;
            background: #fff;
            border: 1px solid var(--line-light);
            border-radius: 18px;
            padding: 1.35rem 1.5rem;
            transition: border-color .35s, box-shadow .45s, transform .45s var(--ease-luxe);
        }

        .faq-item:hover {
            border-color: rgba(201, 162, 75, 0.55);
            transform: translateY(-3px)
        }

        .faq-item.open {
            border-color: var(--gold);
            box-shadow: 0 10px 20px -10px rgba(158, 123, 44, 0.2)
        }

        .faq-q {
            display: flex;
            align-items: center;
            gap: .9rem;
            width: 100%;
            background: none;
            border: 0;
            text-align: left;
            padding: 0;
            color: var(--text-main)
        }

        .faq-q .no {
            font-family: var(--ff-mono);
            font-size: .62rem;
            color: var(--gold-deep);
            letter-spacing: .1em
        }

        .faq-q h3 {
            font-size: 1rem;
            font-weight: 600;
            margin: 0;
            flex: 1;
            font-family: var(--ff-body)
        }

        .faq-q .pm {
            width: 30px;
            height: 30px;
            flex: none;
            border-radius: 50%;
            border: 1px solid var(--line-light);
            display: grid;
            place-items: center;
            font-size: .7rem;
            color: var(--gold-deep);
            transition: transform .5s var(--ease-spring), background .35s, color .35s, border-color .35s
        }

        .faq-item.open .pm {
            transform: rotate(135deg);
            background: var(--text-main);
            color: var(--gold-soft);
            border-color: var(--text-main)
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .55s var(--ease-luxe)
        }

        .faq-a p {
            margin: 1rem 0 0;
            font-size: .88rem;
            line-height: 1.8;
            color: var(--text-muted);
            font-weight: 300;
            padding-left: 1.9rem
        }

        /* ---------- 10. CONTACT ---------- */
        #contact {
            background: var(--bg-soft)
        }

        .ct-shell {
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 20px 50px -20px rgba(15, 27, 45, 0.2);
            border: 1px solid var(--line-gold)
        }

        .ct-info {
            position: relative;
            height: 100%;
            padding: clamp(2.2rem, 4vw, 3.4rem);
            color: var(--text-main);
            background: linear-gradient(165deg, var(--bg-card), var(--bg-soft));
            overflow: hidden;
        }

        .ct-info::after {
            content: "";
            position: absolute;
            right: -1.2rem;
            bottom: -4.5rem;
            font-family: var(--ff-display);
            font-size: 16rem;
            line-height: 1;
            color: rgba(15, 27, 45, 0.035);
            font-weight: 700
        }

        .ct-info h3 {
            font-family: var(--ff-display);
            font-weight: 600;
            font-size: clamp(1.7rem, 2.6vw, 2.3rem);
            margin: 1.1rem 0 1rem;
            color: var(--text-main);
        }

        .ct-info>p {
            color: var(--text-muted);
            font-weight: 300;
            line-height: 1.8;
            font-size: .92rem;
            max-width: 26rem
        }

        .ct-row {
            display: flex;
            gap: 1.1rem;
            align-items: flex-start;
            padding: 1rem 0;
            border-bottom: 1px solid var(--line-light)
        }

        .ct-row:last-of-type {
            border-bottom: 0
        }

        .ct-ic {
            width: 46px;
            height: 46px;
            flex: none;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: rgba(201, 162, 75, 0.1);
            border: 1px solid var(--line-gold);
            color: var(--gold-deep);
            transition: .4s var(--ease-spring)
        }

        .ct-row:hover .ct-ic {
            transform: rotate(-8deg) scale(1.07);
            box-shadow: 0 0 22px rgba(201, 162, 75, .4)
        }

        .ct-row small {
            font-family: var(--ff-mono);
            font-size: .58rem;
            letter-spacing: .26em;
            text-transform: uppercase;
            color: var(--gray);
            display: block;
            margin-bottom: .25rem
        }

        .ct-row b {
            font-weight: 500;
            font-size: .95rem
        }

        .ct-social {
            display: flex;
            gap: .7rem;
            margin-top: 1.6rem
        }

        .ct-social a {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--line-light);
            display: grid;
            place-items: center;
            color: var(--text-main);
            transition: .35s var(--ease-luxe)
        }

        .ct-social a:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff;
            transform: translateY(-4px)
        }

        .ct-form {
            background: #fff;
            padding: clamp(2.2rem, 4vw, 3.4rem);
            color: var(--text-main)
        }

        .ct-form h3 {
            font-family: var(--ff-display);
            font-weight: 600;
            font-size: 1.7rem;
            margin-bottom: .4rem
        }

        .ct-form>p {
            color: var(--text-muted);
            font-weight: 300;
            font-size: .9rem;
            margin-bottom: 2rem
        }

        .ff {
            position: relative;
            margin-bottom: 1.35rem
        }

        .ff input,
        .ff select,
        .ff textarea {
            width: 100%;
            padding: 1.05rem 1.15rem .8rem;
            border-radius: 14px;
            border: 1px solid var(--line-light);
            background: #fff;
            font-size: .92rem;
            color: var(--text-main);
            transition: border-color .3s, box-shadow .3s;
            font-family: var(--ff-body);
        }

        .ff textarea {
            min-height: 120px;
            resize: vertical
        }

        .ff label {
            position: absolute;
            left: 1.15rem;
            top: .95rem;
            font-size: .9rem;
            color: var(--gray);
            pointer-events: none;
            transition: .28s var(--ease-luxe);
            background: transparent;
        }

        .ff input:focus,
        .ff select:focus,
        .ff textarea:focus {
            outline: none;
            border-color: var(--gold);
            box-shadow: 0 0 0 4px rgba(201, 162, 75, .18)
        }

        .ff input:focus~label,
        .ff input:not(:placeholder-shown)~label,
        .ff textarea:focus~label,
        .ff textarea:not(:placeholder-shown)~label,
        .ff.filled label {
            top: .32rem;
            font-size: .62rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--gold-deep);
            font-family: var(--ff-mono)
        }

        .ff select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239E7B2C' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1.1rem center
        }

        .ff .err {
            position: absolute;
            left: .2rem;
            bottom: -1.15rem;
            font-size: .68rem;
            color: var(--coral);
            font-family: var(--ff-mono);
            opacity: 0;
            transform: translateY(-4px);
            transition: .3s
        }

        .ff.invalid .err {
            opacity: 1;
            transform: none
        }

        .ff.invalid input,
        .ff.invalid select,
        .ff.invalid textarea {
            border-color: var(--coral);
            box-shadow: 0 0 0 4px rgba(224, 107, 82, .14);
            animation: shake .4s
        }

        @keyframes shake {
            25% {
                transform: translateX(-5px)
            }

            75% {
                transform: translateX(5px)
            }
        }

        .btn-submit {
            width: 100%;
            justify-content: center;
            display: inline-flex;
            align-items: center;
            gap: .7rem
        }

        .btn-submit .spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: #fff;
            border-radius: 50%;
            display: none;
            animation: spin 1s linear infinite
        }

        .btn-submit.loading .spinner {
            display: block
        }

        .btn-submit.loading .lbl {
            opacity: .6
        }

        /* ---------- 11. NEWSLETTER ---------- */
        #newsletter {
            background: var(--bg-main);
            overflow: hidden
        }

        .nl-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(70px);
            opacity: .5;
            pointer-events: none
        }

        .nl-orb.a {
            width: 340px;
            height: 340px;
            background: rgba(201, 162, 75, 0.2);
            top: -18%;
            left: 8%;
            animation: floaty 12s ease-in-out infinite
        }

        .nl-orb.b {
            width: 280px;
            height: 280px;
            background: rgba(30, 91, 68, 0.2);
            bottom: -22%;
            right: 6%;
            animation: floaty 14s ease-in-out 2s infinite
        }

        .nl-card {
            position: relative;
            z-index: 1;
            max-width: 780px;
            margin-inline: auto;
            text-align: center;
            padding: clamp(2.4rem, 5vw, 3.8rem);
            border-radius: 30px;
            background: #fff;
            border: 1px solid var(--line-gold);
            box-shadow: var(--sh-luxe);
        }

        .nl-card::before {
            content: "";
            position: absolute;
            inset: 10px;
            border: 1px solid var(--line-light);
            border-radius: 22px;
            pointer-events: none
        }

        .nl-title {
            font-size: clamp(1.9rem, 3.6vw, 2.9rem);
            margin: 1.1rem 0 .8rem;
            color: var(--text-main);
        }

        .nl-sub {
            color: var(--text-muted);
            font-weight: 300;
            max-width: 32rem;
            margin: 0 auto 2.2rem;
            line-height: 1.8
        }

        .nl-views {
            display: grid
        }

        .nl-view {
            grid-area: 1/1;
            transition: opacity .55s var(--ease-luxe), transform .55s var(--ease-luxe)
        }

        .nl-view:not(.show) {
            opacity: 0;
            transform: translateY(18px) scale(.98);
            pointer-events: none
        }

        .nl-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            text-align: left;
            margin-bottom: 1.5rem;
        }

        .nl-field {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .nl-label {
            font-family: var(--ff-mono);
            font-size: .66rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .nl-input {
            width: 100%;
            padding: .95rem 1.3rem;
            border-radius: 12px;
            border: 1px solid var(--line-light);
            background: var(--bg-main);
            color: var(--text-main);
            font-size: .9rem;
            transition: .3s;
        }

        .nl-input:focus {
            outline: none;
            border-color: var(--gold);
            box-shadow: 0 0 0 4px rgba(201, 162, 75, .16)
        }

        .nl-dob-row {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: .5rem;
        }

        .consent {
            display: flex;
            align-items: center;
            gap: .7rem;
            justify-content: center;
            margin-top: 1.2rem;
            font-size: .76rem;
            color: var(--text-muted);
            cursor: pointer;
            user-select: none
        }

        .consent input {
            position: absolute;
            opacity: 0;
            pointer-events: none
        }

        .consent .box {
            width: 19px;
            height: 19px;
            flex: none;
            border-radius: 6px;
            border: 1px solid var(--line-light);
            display: grid;
            place-items: center;
            transition: .3s;
            font-size: .6rem;
            color: transparent
        }

        .consent input:checked~.box {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff
        }

        .consent input:focus-visible~.box {
            outline: 2px solid var(--gold-soft);
            outline-offset: 2px
        }

        .nl-switch {
            margin-top: 1.6rem;
            background: none;
            border: 0;
            color: var(--text-muted);
            font-family: var(--ff-mono);
            font-size: .68rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            border-bottom: 1px dashed var(--line-light);
            padding-bottom: 2px;
            transition: .3s
        }

        .nl-switch:hover {
            color: var(--gold-deep);
            border-color: var(--gold-deep)
        }

        .nl-fine {
            margin-top: 1.4rem;
            font-family: var(--ff-mono);
            font-size: .6rem;
            letter-spacing: .2em;
            color: var(--text-light);
            text-transform: uppercase
        }

        /* ---------- 12. FOOTER ---------- */
        footer {
            background: var(--bg-main);
            border-top: 1px solid var(--line-light)
        }

        .ft-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 2.6rem;
            padding-block: 4.2rem 3rem
        }

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

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

        .ft-brand p {
            color: var(--text-muted);
            font-weight: 300;
            font-size: .88rem;
            line-height: 1.85;
            max-width: 22rem;
            margin: 1.2rem 0 1.5rem
        }

        .ft-h {
            font-family: var(--ff-mono);
            font-size: .66rem;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--gold-deep);
            margin-bottom: 1.4rem
        }

        .ft-link {
            display: block;
            padding: .34rem 0;
            color: var(--text-muted);
            font-size: .88rem;
            transition: .3s var(--ease-luxe);
            width: fit-content
        }

        .ft-link:hover {
            color: var(--gold-deep);
            transform: translateX(6px)
        }

        .ft-bottom {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding-block: 1.6rem;
            font-size: .78rem;
            color: var(--text-muted)
        }

        .ft-legal button {
            background: none;
            border: 0;
            color: var(--text-muted);
            padding: 0 .7rem;
            font-size: .78rem;
            transition: .3s;
            border-right: 1px solid var(--line-light)
        }

        .ft-legal button:last-child {
            border-right: 0
        }

        .ft-legal button:hover {
            color: var(--gold-deep)
        }

        /* floating actions */
        #toTop {
            position: fixed;
            right: 1.4rem;
            bottom: 1.4rem;
            z-index: 1200;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            border: 0;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            color: var(--gold-deep);
            border: 1px solid var(--line-gold);
            display: grid;
            place-items: center;
            opacity: 0;
            transform: translateY(20px);
            pointer-events: none;
            transition: .45s var(--ease-luxe);
        }

        #toTop.show {
            opacity: 1;
            transform: none;
            pointer-events: auto
        }

        #toTop:hover {
            background: var(--gold);
            color: #fff;
            transform: translateY(-4px)
        }

        #toTop svg {
            position: absolute;
            inset: -1px;
            transform: rotate(-90deg)
        }

        #toTop circle {
            fill: none;
            stroke: var(--gold-deep);
            stroke-width: 2;
            stroke-dasharray: 170;
            stroke-dashoffset: 170;
            transition: stroke-dashoffset .2s
        }

        .fab-call {
            position: fixed;
            left: 1.4rem;
            bottom: 1.4rem;
            z-index: 1200;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 1.05rem;
            box-shadow: var(--sh-gold);
            transition: .35s var(--ease-luxe);
        }

        .fab-call::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1px solid var(--gold);
            animation: pulseRing 2.4s var(--ease-out) infinite
        }

        .fab-call:hover {
            transform: translateY(-4px) scale(1.05);
            color: #fff
        }

        @keyframes pulseRing {
            from {
                transform: scale(1);
                opacity: .8
            }

            to {
                transform: scale(1.9);
                opacity: 0
            }
        }

        /* ---------- 13. LEGAL MODALS + TOASTS ---------- */
        .legal-modal .modal-content {
            background: #fff;
            color: var(--text-main);
            border-radius: 26px;
            border: 1px solid var(--line-gold);
            box-shadow: var(--sh-luxe);
            overflow: hidden
        }

        .legal-head {
            padding: 2rem 2.2rem 1.6rem;
            background: linear-gradient(160deg, var(--bg-soft), #fff);
            color: var(--text-main);
            border-bottom: 1px solid var(--line-light);
        }

        .legal-head .tag {
            font-family: var(--ff-mono);
            font-size: .6rem;
            letter-spacing: .34em;
            text-transform: uppercase;
            color: var(--gold-deep)
        }

        .legal-head h2 {
            font-family: var(--ff-display);
            font-weight: 600;
            font-size: clamp(1.5rem, 3vw, 2.1rem);
            margin: .5rem 0 0;
            color: var(--text-main);
        }

        .legal-body {
            padding: 1.8rem 2.2rem 2.4rem;
            max-height: 60vh;
            overflow-y: auto
        }

        .lg-item {
            border: 1px solid var(--line-light);
            border-radius: 16px;
            background: var(--bg-main);
            margin-bottom: .9rem;
            overflow: hidden;
            transition: border-color .3s, box-shadow .3s
        }

        .lg-item.open {
            border-color: var(--gold);
            box-shadow: 0 10px 20px -10px rgba(158, 123, 44, 0.2)
        }

        .lg-q {
            display: flex;
            align-items: center;
            gap: .9rem;
            width: 100%;
            background: none;
            border: 0;
            padding: 1.1rem 1.3rem;
            text-align: left
        }

        .lg-q b {
            flex: 1;
            font-size: .94rem;
            font-weight: 600;
            font-family: var(--ff-body);
            color: var(--text-main);
        }

        .lg-q .pm {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid var(--line-light);
            display: grid;
            place-items: center;
            font-size: .62rem;
            color: var(--gold-deep);
            transition: transform .45s var(--ease-spring), background .3s, color .3s
        }

        .lg-item.open .pm {
            transform: rotate(135deg);
            background: var(--text-main);
            color: var(--gold-soft)
        }

        .lg-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .5s var(--ease-luxe)
        }

        .lg-a p,
        .lg-a li {
            font-size: .85rem;
            line-height: 1.8;
            color: var(--text-muted);
            font-weight: 300
        }

        .lg-a ul {
            padding-left: 1.2rem;
            margin: 0 0 .4rem
        }

        .lg-a>div {
            padding: 0 1.3rem 1.2rem
        }

        .legal-foot {
            padding: 1.1rem 2.2rem;
            border-top: 1px solid var(--line-light);
            font-family: var(--ff-mono);
            font-size: .62rem;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--gray)
        }

        #toastDock {
            position: fixed;
            top: 92px;
            right: 1.2rem;
            z-index: 2600;
            display: flex;
            flex-direction: column;
            gap: .8rem;
            max-width: min(370px, calc(100vw - 2rem))
        }

        .toast-x {
            --tc: var(--gold);
            position: relative;
            overflow: hidden;
            display: flex;
            gap: .9rem;
            align-items: flex-start;
            padding: 1rem 1.1rem;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(18px);
            border: 1px solid var(--line-light);
            border-left: 3px solid var(--tc);
            box-shadow: var(--sh-luxe);
            animation: toastIn .55s var(--ease-spring);
        }

        .toast-x.out {
            animation: toastOut .4s var(--ease-luxe) forwards
        }

        .toast-x .ti {
            width: 34px;
            height: 34px;
            flex: none;
            border-radius: 10px;
            display: grid;
            place-items: center;
            color: var(--tc);
            background: color-mix(in srgb, var(--tc) 16%, transparent);
            font-size: .9rem
        }

        .toast-x b {
            display: block;
            font-size: .86rem;
            font-weight: 600;
            color: var(--text-main)
        }

        .toast-x p {
            margin: .15rem 0 0;
            font-size: .76rem;
            color: var(--text-muted);
            font-weight: 300;
            line-height: 1.55
        }

        .toast-x .tx {
            background: none;
            border: 0;
            color: var(--gray);
            font-size: .7rem;
            padding: .2rem;
            transition: .3s
        }

        .toast-x .tx:hover {
            color: var(--coral)
        }

        .toast-x .prog {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px;
            background: var(--tc);
            width: 100%;
            transform-origin: left;
            animation: toastProg var(--tt, 5s) linear forwards
        }

        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateX(60px) scale(.95)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @keyframes toastOut {
            to {
                opacity: 0;
                transform: translateX(60px) scale(.95)
            }
        }

        @keyframes toastProg {
            to {
                transform: scaleX(0)
            }
        }

        /* ---------- 14. RESPONSIVE ---------- */
        @media (max-width:575.98px) {
            .hero-ctas .btn {
                width: 100%;
                text-align: center
            }

            .chip {
                padding: .7rem .9rem
            }

            .tst-card {
                flex-basis: var(--tst-w, 84vw)
            }

            .nl-form-row {
                grid-template-columns: 1fr;
            }
        }

        @media (prefers-reduced-motion:reduce) {

            *,
            *::before,
            *::after {
                animation-duration: .001s !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001s !important
            }

            html {
                scroll-behavior: auto
            }

            [data-rv],
            [data-intro] {
                opacity: 1 !important;
                transform: none !important;
                clip-path: none !important
            }
        }

        /* Ensure modals and their dark backdrops appear above the navbar (z-index: 1500) */
.modal {
    z-index: 2000 !important;
}

.modal-backdrop {
    z-index: 1900 !important;
}


    

/* Standalone-page additions */
.inner-page-head { padding: clamp(8rem,14vw,11rem) 0 1.25rem; }
.inner-page-head .container-lx { max-width: 1280px; }
.inner-page-head h1 { font-family: var(--ff-display); font-size: clamp(2.5rem,6vw,5rem); line-height: 1.04; margin: .8rem 0; }
.inner-page-head p { max-width: 650px; color: var(--text-muted); line-height: 1.8; }
body.inner-page main > section:first-child { padding-top: 2rem; }
body.inner-page #toastDock { position: fixed; top: 92px; right: 1.2rem; bottom: auto; left: auto; z-index: 2600; display: flex; flex-direction: column; gap: .7rem; width: min(390px, calc(100vw - 2rem)); pointer-events: none; }
body.inner-page #toastDock .toast-x { pointer-events: auto; }
.legal-page { padding: clamp(2rem,5vw,4rem) 0 clamp(5rem,9vw,8rem); }
.legal-page .legal-head { max-width: 900px; margin: 0 auto 1.4rem; padding: clamp(1.5rem,4vw,2.5rem); background: var(--bg-card); border: 1px solid var(--line-gold); border-radius: var(--r-card); box-shadow: var(--sh-luxe); }
.legal-page .legal-head .tag { font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.legal-page .legal-head h1 { font-family: var(--ff-display); font-size: clamp(2.3rem,5vw,3.8rem); margin: .6rem 0 0; }
.legal-page .legal-body { max-height: none; overflow: visible; max-width: 900px; padding: 0; margin: auto; }
.legal-page .legal-foot { max-width: 900px; margin: 1.5rem auto 0; padding-inline: 0; }
#nlUnsubscribePage { display: block; }
#nlUnsubscribePage .nl-field { max-width: 400px; margin: 0 auto; }
#nlUnsubscribePage .nl-view { opacity: 1; transform: none; pointer-events: auto; }
@media(max-width:767px) { body.inner-page #toastDock { top: 82px; right: 1rem; width: calc(100vw - 2rem); } }