/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
        :root {
            --ink: #07060A;
            --ink2: #100F14;
            --ink3: #19181F;
            --ink4: #231F30;
            --gold: #C8A84B;
            --gold-hi: #E8CC78;
            --gold-lo: #8A7030;
            --gold-g: rgba(200, 168, 75, .15);
            --cream: #F4EDD8;
            --cream2: #E8DEC5;
            --cream3: #CFC2A0;
            --mist: rgba(244, 237, 216, .55);
            --mist2: rgba(244, 237, 216, .35);
            --mist3: rgba(244, 237, 216, .14);
            --nav-h: 76px;
            --ease: cubic-bezier(.16, 1, .3, 1);
            --easeb: cubic-bezier(.34, 1.56, .64, 1);
            --t: .88s;
        }

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

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: 'Barlow', sans-serif;
            background: var(--ink);
            color: var(--cream);
            overflow-x: hidden;
            cursor: none;
            -webkit-font-smoothing: antialiased
        }

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

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

        /* grain overlay */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: 9997;
            pointer-events: none;
            background-image: 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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            opacity: .028;
        }

        /* ═══════════════════════════════════════════
   CURSOR
═══════════════════════════════════════════ */
        #cd {
            position: fixed;
            top: 0;
            left: 0;
            width: 9px;
            height: 9px;
            background: var(--gold);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: width .25s, height .25s, background .25s;
            will-change: left, top
        }

        #cr {
            position: fixed;
            top: 0;
            left: 0;
            width: 38px;
            height: 38px;
            border: 1px solid var(--gold);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            transform: translate(-50%, -50%);
            opacity: .48;
            transition: width .4s var(--ease), height .4s var(--ease), opacity .3s;
            will-change: left, top
        }

        body.ch #cd {
            width: 15px;
            height: 15px;
            background: var(--gold-hi)
        }

        body.ch #cr {
            width: 62px;
            height: 62px;
            opacity: .18
        }

        /* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--nav-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 5vw;
            z-index: 500;
            transition: background .5s, border-color .5s, backdrop-filter .5s;
        }

        nav.solid {
            background: rgba(7, 6, 10, .93);
            backdrop-filter: blur(22px);
            border-bottom: 1px solid rgba(200, 168, 75, .12)
        }

        .nav-logo img {
            width: 150px;
            height: auto;
            display: block
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 18px
        }

        .nav-phone {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: .05em;
            color: var(--mist);
            transition: color .2s
        }

        .nav-phone:hover {
            color: var(--gold)
        }

        .nav-cta {
            padding: 10px 28px;
            background: var(--gold);
            color: var(--ink);
            border-radius: 2px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            transition: transform .2s, box-shadow .2s, background .2s;
        }

        .nav-cta:hover {
            transform: translateY(-2px);
            background: var(--gold-hi);
            box-shadow: 0 8px 28px rgba(200, 168, 75, .35)
        }

        /* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
        #hero {
            min-height: 100vh;
            position: relative;
            /* display: flex; */
            align-items: center;
            overflow: hidden;
            padding: var(--nav-h) 5vw 0;
            padding-top: 200px;
        }

        .hbg {
            position: absolute;
            inset: 0;
            background: url('assets/images/banner.png') center/cover no-repeat;
            filter: brightness(.17) saturate(.5);
            transform: scale(1.06);
            transition: transform 12s ease-out;
        }

        .hbg.rdy {
            transform: scale(1)
        }

        .hvg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 62%, var(--ink) 100%), linear-gradient(90deg, var(--ink) 0%, transparent 46%);
        }

        .hgrid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image: linear-gradient(rgba(200, 168, 75, .033) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 168, 75, .033) 1px, transparent 1px);
            background-size: 88px 88px;
            animation: gdrift 22s linear infinite;
        }

        @keyframes gdrift {
            from {
                background-position: 0 0
            }

            to {
                background-position: 88px 88px
            }
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            width: 50%;
            padding: 90px 0 130px
        }

        .h-ey {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 38px;
            opacity: 0;
            animation: rise 1s .15s var(--ease) forwards
        }

        .h-eline {
            width: 36px;
            height: 1px;
            background: var(--gold);
            flex-shrink: 0
        }

        .h-etxt {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--gold)
        }

        .h1 {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(54px, 9vw, 124px);
            font-weight: 700;
            line-height: .95;
            letter-spacing: -.025em;
            margin-bottom: 38px
        }

        .h1 .ln {
            display: block;
            overflow: hidden
        }

        .h1 .lni {
            display: block;
            transform: translateY(115%);
            animation: lup 1s var(--ease) forwards
        }

        .h1 .ln:nth-child(1) .lni {
            animation-delay: .32s
        }

        .h1 .ln:nth-child(2) .lni {
            animation-delay: .48s
        }

        .h1 .ln:nth-child(3) .lni {
            animation-delay: .62s
        }

        .h1 em {
            font-style: italic;
            color: var(--gold)
        }

        @keyframes lup {
            from {
                transform: translateY(115%)
            }

            to {
                transform: translateY(0)
            }
        }

        .h-sub {
            font-size: clamp(15px, 1.6vw, 18px);
            font-weight: 300;
            line-height: 1.85;
            color: var(--mist);
            max-width: 530px;
            margin-bottom: 52px;
            opacity: 0;
            animation: rise 1s .78s var(--ease) forwards
        }

        .h-acts {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
            opacity: 0;
            animation: rise 1s .92s var(--ease) forwards
        }

        .btn-p {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 17px 26px;
            background: var(--gold);
            color: var(--ink);
            border-radius: 2px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            position: relative;
            overflow: hidden;
            transition: transform .25s var(--easeb), box-shadow .25s, background .2s;
        }

        .btn-p::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, .14);
            transform: translateX(-105%);
            transition: transform .4s var(--ease)
        }

        .btn-p:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 44px rgba(200, 168, 75, .38);
            background: var(--gold-hi)
        }

        .btn-p:hover::after {
            transform: translateX(0)
        }

        .btn-p .arr {
            transition: transform .2s
        }

        .btn-p:hover .arr {
            transform: translateX(5px)
        }

        .btn-g {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 34px;
            border: 1px solid rgba(200, 168, 75, .3);
            border-radius: 2px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--cream3);
            transition: border-color .2s, color .2s;
        }

        .btn-g:hover {
            border-color: var(--gold);
            color: var(--gold)
        }

        .h-trust {
            display: flex;
            gap: 52px;
            flex-wrap: wrap;
            margin-top: 68px;
            padding-top: 44px;
            border-top: 1px solid rgba(200, 168, 75, .1);
            opacity: 0;
            animation: rise 1s 1.06s var(--ease) forwards
        }

        .t-num {
            font-family: 'Cormorant Garamond', serif;
            font-size: 48px;
            font-weight: 700;
            color: var(--gold);
            line-height: 1;
            display: block
        }

        .t-lbl {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--mist2);
            margin-top: 6px;
            display: block
        }

        .h-scroll {
            position: absolute;
            bottom: 36px;
            right: 5vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            opacity: 0;
            animation: rise 1s 1.22s var(--ease) forwards;
            z-index: 2
        }

        .h-scroll span {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 10px;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--mist2);
            writing-mode: vertical-rl
        }

        .sbar {
            width: 1px;
            height: 56px;
            background: linear-gradient(to bottom, var(--gold), transparent);
            animation: spulse 2s ease-in-out infinite
        }

        @keyframes spulse {
            0% {
                transform: scaleY(0);
                transform-origin: top;
                opacity: 1
            }

            49% {
                transform: scaleY(1);
                transform-origin: top;
                opacity: 1
            }

            50% {
                transform: scaleY(1);
                transform-origin: bottom
            }

            100% {
                transform: scaleY(0);
                transform-origin: bottom;
                opacity: 0
            }
        }

        @keyframes rise {
            from {
                opacity: 0;
                transform: translateY(26px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        /* ═══════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════ */
        .mq-wrap {
            overflow: hidden;
            padding: 20px 0;
            background: var(--ink3);
            border-top: 1px solid rgba(200, 168, 75, .08);
            border-bottom: 1px solid rgba(200, 168, 75, .08)
        }

        .mq-track {
            display: flex;
            width: max-content;
            animation: mq 30s linear infinite
        }

        .mq-wrap:hover .mq-track {
            animation-play-state: paused
        }

        .mq-item {
            display: flex;
            align-items: center;
            gap: 28px;
            padding: 0 28px;
            white-space: nowrap
        }

        .mq-t {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            opacity: .37;
            transition: opacity .3s;
            color: #fff !important;
        }

        .mq-wrap:hover .mq-t {
            opacity: .64;
                
        }

        .mq-sep {
            font-size: 7px;
            color: var(--gold);
            opacity: .5
        }

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

            to {
                transform: translateX(-50%)
            }
        }
        
        .quote-popup-content p {
    color: #000 !important;
}

.quote-popup-content a {
    color: #000 !important;
}

        /* ═══════════════════════════════════════════
   SECTION COMMONS
═══════════════════════════════════════════ */
        .s-lbl {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 18px
        }

        .s-lbl::before {
            content: '';
            width: 26px;
            height: 1px;
            background: var(--gold);
            flex-shrink: 0
        }

        .s-h2 {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(34px, 4.8vw, 64px);
            font-weight: 700;
            line-height: 1.06;
            letter-spacing: -.015em
        }

        .s-h2 em {
            font-style: italic;
            color: var(--gold)
        }

        .rv {
            opacity: 0;
            transform: translateY(46px);
            transition: opacity var(--t) var(--ease), transform var(--t) var(--ease)
        }

        .rv.in {
            opacity: 1;
            transform: none
        }

        .d1 {
            transition-delay: .07s
        }

        .d2 {
            transition-delay: .14s
        }

        .d3 {
            transition-delay: .21s
        }

        .d4 {
            transition-delay: .28s
        }

        .d5 {
            transition-delay: .35s
        }

        .d6 {
            transition-delay: .42s
        }

        .s-div {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(200, 168, 75, .13), transparent);
            margin: 0 5vw
        }

        /* ═══════════════════════════════════════════
   COMPARE
═══════════════════════════════════════════ */
        #compare {
            padding: 136px 5vw;
            position: relative;
            overflow: hidden
        }

        #compare::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent)
        }

        .cmp-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 96px;
            align-items: start
        }

        .cmp-table {
            margin-top: 44px;
            border: 1px solid rgba(200, 168, 75, .13);
            border-radius: 6px;
            overflow: hidden
        }

        .cmp-row {
            display: grid;
            grid-template-columns: 1.3fr 1fr 1fr;
            border-bottom: 1px solid rgba(200, 168, 75, .07)
        }

        .cmp-row:last-child {
            border-bottom: none
        }

        .cmp-row.hd {
            background: rgba(200, 168, 75, .07);
            border-bottom: 1px solid rgba(200, 168, 75, .18)
        }

        .cmp-c {
            padding: 16px 20px;
            font-size: 18px;
            font-weight: 300;
            line-height: 1.5;
            color: var(--mist2);
            border-right: 1px solid rgba(200, 168, 75, .07)
        }

        .cmp-c:last-child {
            border-right: none
        }

        .cmp-row.hd .cmp-c {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--cream)
        }

        .cmp-c.us {
            color: var(--gold);
            font-weight: 500
        }

        .cmp-c.bad {
            color: rgba(244, 237, 216, .2);
            text-decoration: line-through;
            text-decoration-color: rgba(139, 31, 47, .5)
        }

        .cmp-feat {
            font-weight: 500;
            color: var(--cream2)
        }

        .cmp-q {
            margin-top: 44px;
            padding: 44px 40px;
            border: 1px solid rgba(200, 168, 75, .16);
            border-radius: 6px;
            background: rgba(200, 168, 75, .04);
            position: relative;
            overflow: hidden
        }

        .cmp-q::before {
            content: '"';
            position: absolute;
            top: -14px;
            left: 28px;
            font-family: 'Cormorant Garamond', serif;
            font-size: 130px;
            font-weight: 700;
            font-style: italic;
            color: var(--gold);
            opacity: .07;
            line-height: 1;
            pointer-events: none
        }

        .cq-t {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(18px, 2vw, 26px);
            font-style: italic;
            font-weight: 600;
            line-height: 1.48;
            color: var(--cream);
            margin-bottom: 22px;
            position: relative;
            z-index: 1
        }

        .cq-a {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--gold);
            opacity: .62
        }

        .mini-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2px;
            margin-top: 28px;
            border-radius: 6px;
            overflow: hidden
        }

        .ms {
            padding: 26px 22px;
            background: var(--ink3);
            text-align: center
        }

        .ms-n {
            font-family: 'Cormorant Garamond', serif;
            font-size: 36px;
            font-weight: 700;
            color: var(--gold);
            display: block;
            line-height: 1
        }

        .ms-l {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--mist2);
            margin-top: 7px;
            display: block
        }

        .cmp-trust-row {
            display: flex;
            gap: 0;
            margin-top: 28px;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid rgba(200, 168, 75, .1)
        }

        .ctr-item {
            flex: 1;
            padding: 24px 20px;
            text-align: center;
            border-right: 1px solid rgba(200, 168, 75, .1);
            background: var(--ink3)
        }

        .ctr-item:last-child {
            border-right: none
        }

        .ctr-num {
            font-family: 'Cormorant Garamond', serif;
            font-size: 34px;
            font-weight: 700;
            color: var(--gold);
            display: block;
            line-height: 1
        }

        .ctr-lbl {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--mist2);
            margin-top: 6px;
            display: block
        }

        /* ═══════════════════════════════════════════
   CHILDREN'S — BOOKSHELF
═══════════════════════════════════════════ */
        #children {
            padding: 0 0 136px
        }

        .ch-head {
            padding: 0 5vw 72px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: end
        }

        .ch-desc {
            font-size: 18px;
            line-height: 1.88;
            color: var(--mist2);
            font-weight: 300
        }

        .shelf-wrap {
            position: relative;
            padding: 0 5vw
        }

        .shelf-board {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--ink), var(--gold-lo), var(--ink));
            z-index: 4
        }

        .shelf-track {
            display: flex;
            gap: 22px;
            padding-bottom: 22px;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            cursor: grab
        }

        .shelf-track:active {
            cursor: grabbing
        }

        .shelf-track::-webkit-scrollbar {
            display: none
        }

        .bk {
            flex-shrink: 0;
            width: 255px;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            transition: transform .5s var(--ease), box-shadow .5s
        }

        .bk:hover {
            transform: translateY(-22px);
            box-shadow: 0 44px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(200, 168, 75, .18)
        }

        .bk img {
            width: 100%;
            aspect-ratio: 3/4;
            object-fit: cover;
            display: block;
            filter: brightness(.82) saturate(.85);
            transition: filter .5s
        }

        .bk:hover img {
            filter: brightness(1) saturate(1.1)
        }

        .bk-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 40px 22px 22px;
            background: linear-gradient(0deg, rgba(7, 6, 10, .97) 55%, transparent);
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .4s, transform .4s var(--ease)
        }

        .bk:hover .bk-info {
            opacity: 1;
            transform: none
        }

        .bk-badge {
            display: inline-block;
            padding: 3px 11px;
            background: var(--gold);
            color: var(--ink);
            border-radius: 2px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            margin-bottom: 9px
        }

        .bk-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 17px;
            font-weight: 700;
            color: var(--cream);
            margin-bottom: 5px;
            line-height: 1.2
        }

        .bk-desc {
            font-size: 12px;
            color: var(--mist2);
            line-height: 1.55
        }

        .illus-strip {
            margin-top: 96px;
            padding: 0 5vw;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center
        }

        .illus-canvas {
            position: relative;
            border-radius: 5px;
            overflow: hidden;
            aspect-ratio: 1
        }

        .illus-canvas img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(.75) saturate(.8)
        }

        .illus-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(200, 168, 75, .12), transparent 60%)
        }

        .illus-badge {
            position: absolute;
            bottom: 22px;
            left: 22px;
            padding: 9px 18px;
            background: rgba(7, 6, 10, .88);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(200, 168, 75, .22);
            border-radius: 3px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .08em;
            color: var(--gold);
            text-transform: uppercase
        }

        .if-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-top: 30px
        }

        .if-item {
            display: flex;
            gap: 17px;
            padding: 20px 22px;
            border: 1px solid rgba(200, 168, 75, .09);
            border-radius: 5px;
            transition: border-color .3s, background .3s;
            cursor: default
        }

        .if-item:hover {
            border-color: rgba(200, 168, 75, .28);
            background: rgba(200, 168, 75, .04)
        }

        .if-ico {
            width: 42px;
            height: 42px;
            flex-shrink: 0;
            background: rgba(200, 168, 75, .09);
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px
        }

        .if-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 15px;
            font-weight: 700;
            color: var(--cream);
            margin-bottom: 4px;
            letter-spacing: .02em
        }

        .if-sub {
            font-size: 18px;
            color: var(--mist2);
            line-height: 1.55
        }

        /* ═══════════════════════════════════════════
   PARALLAX QUOTE
═══════════════════════════════════════════ */
        #qs {
            height: 440px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .qs-bg {
            position: absolute;
            inset: 0;
                background-image: url("assets/images/A-great-children's-book-is-a-gift.png");
            filter: brightness(.15) saturate(.45);
            will-change: transform
        }

        .qs-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, var(--ink) 0%, transparent 28%, transparent 72%, var(--ink) 100%)
        }

        .qs-c {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 2;
            width: 80%;
            max-width: 720px;
            will-change: transform
        }

        .qs-mark {
            font-family: 'Cormorant Garamond', serif;
            font-size: 110px;
            font-weight: 700;
            font-style: italic;
            color: var(--gold);
            opacity: .08;
            line-height: .65;
            display: block;
            margin-bottom: 14px
        }

        .qs-text {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(22px, 3.4vw, 40px);
            font-style: italic;
            font-weight: 600;
            color: var(--cream);
            line-height: 1.38;
            margin-bottom: 18px
        }

        .qs-attr {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--gold);
            opacity: .6
        }

        /* ═══════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════ */
        #services {
            padding: 136px 5vw;
            position: relative
        }

        #services::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(200, 168, 75, .12), transparent)
        }

        .svc-head {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: end;
            margin-bottom: 76px
        }

        .svc-desc {
            font-size: 18px;
            line-height: 1.88;
            color: var(--mist2);
            font-weight: 300
        }

        .svc-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            background: rgba(200, 168, 75, .07);
            border-radius: 6px;
            overflow: hidden
        }

        .sc {
            padding: 50px 38px;
            background: var(--ink2);
            position: relative;
            overflow: hidden
        }

        .sc::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--ink3);
            clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%));
            transition: clip-path .55s var(--ease)
        }

        .sc:hover::before {
            clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%))
        }

        .sc>* {
            position: relative;
            z-index: 1
        }

        .sc-n {
            font-family: 'Cormorant Garamond', serif;
            font-size: 78px;
            font-weight: 700;
            color: #f7f7f7;
            line-height: 1;
            margin-bottom: 18px;
            transition: color .3s
        }

        .sc:hover .sc-n {
            color: rgba(200, 168, 75, .14)
        }

        .sc-ico {
            font-size: 24px;
            margin-bottom: 12px
        }

        .sc-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 21px;
            font-weight: 700;
            letter-spacing: .02em;
            color: var(--cream);
            margin-bottom: 10px
        }

        .sc-desc {
            font-size: 18px;
            line-height: 1.75;
            color: var(--mist2);
            font-weight: 300
        }

        .sc-lnk {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin-top: 22px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--gold);
            opacity: 0;
            transform: translateY(7px);
            transition: opacity .3s, transform .3s
        }

        .sc:hover .sc-lnk {
            opacity: 1;
            transform: none
        }

        /* ═══════════════════════════════════════════
   WHY US
═══════════════════════════════════════════ */
        #why {
            padding: 136px 5vw;
            background: var(--ink3)
        }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
            margin-top: 68px
        }

        .wc {
            padding: 38px 32px;
            border: 1px solid rgba(200, 168, 75, .09);
            border-radius: 5px;
            background: var(--ink2);
            transition: transform .4s var(--ease), box-shadow .4s, border-color .3s
        }

        .wc:hover {
            transform: translateY(-10px);
            box-shadow: 0 28px 60px rgba(0, 0, 0, .38);
            border-color: rgba(200, 168, 75, .26)
        }

        .wc-n {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .15em;
            color: var(--gold);
            margin-bottom: 16px
        }

        .wc-ico {
            font-size: 26px;
            margin-bottom: 12px;
            display: block
        }

        .wc-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 19px;
            font-weight: 700;
            letter-spacing: .02em;
            color: var(--cream);
            margin-bottom: 9px
        }

        .wc-desc {
            font-size: 18px;
            line-height: 1.75;
            color: var(--mist2);
            font-weight: 300
        }

        /* ═══════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════ */
        #testimonials {
            padding: 136px 5vw
        }

        .testi-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
            margin-top: 68px
        }

        .tc {
            padding: 38px 34px;
            border: 1px solid rgba(200, 168, 75, .09);
            border-radius: 5px;
            background: var(--ink3);
            position: relative;
            overflow: hidden;
            transition: transform .4s var(--ease), border-color .3s
        }

        .tc::before {
            content: '"';
            position: absolute;
            top: -8px;
            right: 18px;
            font-family: 'Cormorant Garamond', serif;
            font-size: 140px;
            font-weight: 700;
            font-style: italic;
            color: var(--gold);
            opacity: .05;
            line-height: 1;
            pointer-events: none
        }

        .tc:hover {
            transform: translateY(-8px);
            border-color: rgba(200, 168, 75, .22)
        }

        .tc-stars {
            color: var(--gold);
            letter-spacing: 3px;
            margin-bottom: 18px;
            font-size: 13px
        }

        .tc-text {
            font-family: 'Cormorant Garamond', serif;
            font-size: 16px;
            font-style: italic;
            font-weight: 400;
            line-height: 1.78;
            color: var(--cream2);
            margin-bottom: 26px
        }

        .tc-name {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: .04em;
            color: var(--cream)
        }

        .tc-loc {
            font-size: 12px;
            color: var(--mist2);
            margin-top: 4px
        }

        /* ═══════════════════════════════════════════
   PROCESS — VERTICAL TIMELINE
═══════════════════════════════════════════ */
        #process {
            padding: 136px 5vw;
            background: var(--ink3)
        }

        .proc-layout {
            display: grid;
            grid-template-columns: 1fr 1.35fr;
            gap: 96px;
            align-items: start;
            margin-top: 68px
        }

        .proc-tl {
            position: relative;
            display: flex;
            flex-direction: column
        }

        .tl-track {
            position: absolute;
            left: 21px;
            top: 0;
            bottom: 0;
            width: 1px;
            background: rgba(200, 168, 75, .1)
        }

        .tl-prog {
            position: absolute;
            left: 21px;
            top: 0;
            width: 1px;
            background: var(--gold);
            height: 0%;
            transition: height 1.4s var(--ease)
        }

        .ps {
            display: flex;
            gap: 26px;
            padding: 0 0 46px;
            position: relative
        }

        .ps:last-child {
            padding-bottom: 0
        }

        .ps-dot {
            width: 43px;
            height: 43px;
            border-radius: 50%;
            border: 1px solid rgba(200, 168, 75, .18);
            background: var(--ink3);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: var(--mist2);
            position: relative;
            z-index: 1;
            transition: border-color .4s, color .4s, background .4s
        }

        .ps.act .ps-dot {
            border-color: var(--gold);
            color: var(--gold);
            background: rgba(200, 168, 75, .07)
        }

        .ps-ico {
            font-size: 17px;
            margin-bottom: 7px;
            display: block
        }

        .ps-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 19px;
            font-weight: 700;
            letter-spacing: .02em;
            color: var(--cream);
            margin-bottom: 7px;
            transition: color .4s
        }

        .ps.act .ps-title {
            color: var(--gold)
        }

        .ps-desc {
            font-size: 18px;
            line-height: 1.72;
            color: var(--mist2);
            font-weight: 300
        }

        .proc-vis {
            position: sticky;
            top: 120px
        }

        .pv-img {
            width: 100%;
            aspect-ratio: 4/5;
            object-fit: cover;
            border-radius: 5px;
            filter: brightness(.68) saturate(.75);
            height: 500px;
        }

        .pv-cap {
            margin-top: 18px;
            padding: 18px 22px;
            border: 1px solid rgba(200, 168, 75, .1);
            border-radius: 5px;
            background: rgba(200, 168, 75, .03)
        }

        .pv-ct {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: var(--cream);
            margin-bottom: 4px;
            letter-spacing: .02em
        }

        .pv-cs {
            font-size: 18px;
            color: #fff;
        }

        /* ═══════════════════════════════════════════
   FAQ
═══════════════════════════════════════════ */
        #faq {
            padding: 136px 5vw
        }

        .faq-layout {
            display: grid;
            grid-template-columns: 1fr 1.6fr;
            gap: 96px;
            align-items: start;
            margin-top: 68px
        }

        .faq-simg {
            width: 100%;
            aspect-ratio: 3/4;
            object-fit: cover;
            border-radius: 5px;
            filter: brightness(.6) saturate(.65);
            position: sticky;
            top: 120px
        }

        .faq-list {
            display: flex;
            flex-direction: column
        }

        .faq-item {
            border-bottom: 1px solid rgba(200, 168, 75, .09);
            overflow: hidden
        }

        .faq-q {
            width: 100%;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 23px 0;
            font-family: 'Barlow', sans-serif;
            font-size: 18px;
            font-weight: 400;
            color: var(--cream);
            text-align: left;
            gap: 20px;
            transition: color .2s
        }

        .faq-q:hover {
            color: var(--gold)
        }

        .faq-ch {
            width: 27px;
            height: 27px;
            border-radius: 50%;
            border: 1px solid rgba(200, 168, 75, .22);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--gold);
            flex-shrink: 0;
            transition: transform .35s var(--ease), background .2s
        }

        .faq-item.open .faq-ch {
            transform: rotate(180deg);
            background: var(--gold);
            color: var(--ink)
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            font-size: 14px;
            line-height: 1.8;
            color: var(--mist2);
            font-weight: 300;
            padding: 0;
            transition: max-height .45s var(--ease), padding .3s
        }

        .faq-item.open .faq-a {
            max-height: 200px;
            padding: 0 0 22px
        }

        /* ═══════════════════════════════════════════
   CTA
═══════════════════════════════════════════ */
        #cta {
            margin: 0 5vw 136px;
            border-radius: 8px;
            overflow: hidden;
            position: relative
        }

        .cta-bg {
            position: absolute;
            inset: 0;
            background: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1600&q=80') center/cover no-repeat;
            filter: brightness(.11) saturate(.4)
        }

        .cta-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(7, 6, 10, .92) 38%, rgba(35, 22, 4, .88));
        }

        .cta-glow {
            position: absolute;
            top: -25%;
            left: 50%;
            transform: translateX(-50%);
            width: 55%;
            height: 55%;
            background: radial-gradient(ellipse, rgba(200, 168, 75, .16) 0%, transparent 70%);
            pointer-events: none
        }

        .cta-in {
            position: relative;
            z-index: 1;
            padding: 116px 80px;
            text-align: center
        }

        .cta-ey {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--gold);
            opacity: .62;
            margin-bottom: 22px
        }

        .cta-h2 {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(34px, 5vw, 62px);
            font-weight: 700;
            line-height: 1.08;
            letter-spacing: -.02em;
            color: var(--cream);
            margin-bottom: 22px
        }

        .cta-h2 em {
            font-style: italic;
            color: var(--gold)
        }

        .cta-sub {
            font-size: 18px;
            color: var(--mist2);
            line-height: 1.78;
            max-width: 480px;
            margin: 0 auto 50px;
            font-weight: 300
        }

        .cta-btns {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap
        }

        .cta-gh {
            padding: 16px 38px;
            border: 1px solid rgba(244, 237, 216, .18);
            border-radius: 2px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(244, 237, 216, .6);
            transition: border-color .2s, color .2s
        }

        .cta-gh:hover {
            border-color: rgba(244, 237, 216, .45);
            color: var(--cream)
        }

        .cta-ct {
            margin-top: 26px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 18px;
            letter-spacing: .07em;
            color: var(--mist2);
            opacity: .4
        }

        .cta-ct a {
            color: var(--gold);
            opacity: .75;
            transition: opacity .2s
        }

        .cta-ct a:hover {
            opacity: 1
        }

        /* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
        footer {
            padding: 76px 5vw 44px;
            border-top: 1px solid rgba(200, 168, 75, .09)
        }

        /*.ft-grid {*/
        /*    display: grid;*/
            /* grid-template-columns: auto; */
        /*    gap: 56px;*/
        /*    margin-bottom: 60px;*/
        /*    grid-auto-flow: column;*/
            /* align-items: start; */
        /*    justify-items: stretch;*/
            /* align-content: stretch; */
        /*    justify-content: space-between;*/
        /*}*/
        
        
       footer .ft-grid {
    padding: 30px 0;
}
        
        .termms ul {
    display: flex;
    gap: 22px;
}

.termms ul li {
    list-style-type: none;
}

        .ft-grid * {
            text-align: center;
            margin: auto;
        }

        .ft-logo img {
            width: 200px;
            height: auto;
            display: block;
            margin-bottom: 16px
        }

        .ft-tag {
            font-size: 14px;
            line-height: 1.82;
            color: var(--mist2);
            font-weight: 300;
            margin-bottom: 26px;
            max-width: 290px
        }

        .ft-soc {
            display: flex;
            gap: 9px
        }

        .soc-btn {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid rgba(200, 168, 75, .16);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            transition: border-color .2s, background .2s
        }

        .soc-btn:hover {
            border-color: var(--gold);
            background: rgba(200, 168, 75, .07)
        }

        .ft-ct {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 25px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 18px
        }

        .ft-col a {
            display: block;
            font-size: 14px;
            color: var(--mist2);
            margin-bottom: 12px;
            transition: color .2s
        }

        .ft-col a:hover {
            color: var(--gold)
        }

        .ft-bot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 28px;
            border-top: 1px solid rgba(200, 168, 75, .07);
            flex-wrap: wrap;
            gap: 14px
        }

        .ft-copy {
            font-size: 18px;
            color: rgb(244 237 216);
            /*opacity: .35*/
        }

        /* ═══════════════════════════════════════════
   MODAL
═══════════════════════════════════════════ */
        #vmod {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .92);
            backdrop-filter: blur(16px);
            display: none;
            place-items: center;
            z-index: 2000;
            padding: 40px 20px
        }

        #vmod.open {
            display: grid
        }

        .vm-wrap {
            position: relative;
            width: min(860px, 90vw)
        }

        .vm-close {
            position: absolute;
            top: -50px;
            right: 0;
            background: none;
            border: none;
            color: var(--cream2);
            font-size: 28px;
            cursor: pointer;
            opacity: .55;
            transition: opacity .2s;
            line-height: 1
        }

        .vm-close:hover {
            opacity: 1
        }

        .vm-box {
            background: var(--ink2);
            border-radius: 7px;
            aspect-ratio: 16/9;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(200, 168, 75, .12);
            overflow: hidden
        }

        .vm-box video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 7px
        }

        /* ═══════════════════════════════════════════
   COOKIE
═══════════════════════════════════════════ */
        .ck-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(16, 15, 20, .96);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(200, 168, 75, .14);
            padding: 18px 5vw;
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 22px;
            z-index: 1000;
            flex-wrap: wrap
        }

        .ck-text {
            font-size: 13px;
            color: var(--mist2);
            line-height: 1.65;
            flex: 1;
            min-width: 200px
        }

        .ck-text a {
            color: var(--gold);
            text-decoration: underline
        }

        .ck-btns {
            display: flex;
            gap: 9px;
            flex-shrink: 0
        }

        .ck-acc {
            padding: 9px 22px;
            background: var(--gold);
            color: var(--ink);
            border: none;
            border-radius: 2px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .09em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background .2s
        }

        .ck-acc:hover {
            background: var(--gold-hi)
        }

        .ck-dec {
            padding: 9px 22px;
            background: none;
            color: var(--mist2);
            border: 1px solid rgba(200, 168, 75, .18);
            border-radius: 2px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: border-color .2s, color .2s
        }

        .ck-dec:hover {
            border-color: rgba(200, 168, 75, .4);
            color: var(--cream)
        }

        /* ═══════════════════════════════════════════
   LOGO WHITE FILTER
═══════════════════════════════════════════ */
        .nav-logo img,
        .ft-logo img {
            filter: brightness(0) invert(1);
            opacity: 0.92;
        }

        /* ═══════════════════════════════════════════
   PRICING SECTION
═══════════════════════════════════════════ */
        #pricing {
            padding: 136px 5vw;
            position: relative;
            background: var(--ink2);
        }

        #pricing::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(200, 168, 75, .18), transparent);
        }

        #pricing::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(200, 168, 75, .18), transparent);
        }

        .pricing-head {
            text-align: center;
            margin-bottom: 72px;
        }

        .pricing-sub-text {
            font-size: 17px;
            line-height: 1.85;
            color: var(--mist2);
            font-weight: 300;
            max-width: 540px;
            margin: 16px auto 0;
        }

        .pricing-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2px;
            background: rgba(200, 168, 75, .07);
            border-radius: 8px;
            overflow: hidden;
            max-width: 1100px;
            margin: 0 auto;
        }

        .pr-col {
            display: flex;
            flex-direction: column;
            gap: 2px;
            background: transparent;
        }

        .pr-item {
            background: var(--ink3);
            overflow: hidden;
            transition: background .3s;
        }

        .pr-item.open {
            background: var(--ink4);
        }

        .pr-header {
            width: 100%;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 28px 32px;
            text-align: left;
            transition: background .2s;
        }

        .pr-header:hover {
            background: rgba(200, 168, 75, .04);
        }

        .pr-header-left {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .pr-tier {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--gold);
            opacity: .7;
        }

        .pr-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--cream);
            line-height: 1.15;
        }

        .pr-price {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 34px;
            font-weight: 500;
            color: var(--gold);
            letter-spacing: .04em;
            margin-top: 2px;
        }

        .pr-price span {
            color: var(--mist2);
            font-weight: 300;
            font-size: 22px;
        }

        .pr-chevron {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid rgba(200, 168, 75, .22);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: var(--gold);
            flex-shrink: 0;
            transition: transform .35s var(--ease), background .2s, border-color .2s;
        }

        .pr-item.open .pr-chevron {
            transform: rotate(180deg);
            background: var(--gold);
            color: var(--ink);
            border-color: var(--gold);
        }

        .pr-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height .45s var(--ease), padding .3s;
            padding: 0 32px;
        }

        .pr-item.open .pr-body {
            max-height: 500px;
            padding: 0 32px 28px;
        }

        .pr-divider {
            height: 1px;
            background: rgba(200, 168, 75, .1);
            margin-bottom: 20px;
        }

        .pr-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .pr-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            font-size: 18px;
            line-height: 1.55;
            color: var(--mist2);
            font-weight: 300;
        }

       .pr-list li::before {
    content: '✓';
    font-size: 6px;
    color: #fff;
    margin-top: 5px;
    flex-shrink: 0;
    opacity: .7;
    font-size: 16px;
}

        .pr-contact-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 18px;
            padding: 10px 24px;
            background: var(--gold);
            color: var(--ink);
            border-radius: 2px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            transition: background .2s, transform .2s;
        }

        .pr-contact-link:hover {
            background: var(--gold-hi);
            transform: translateY(-2px);
        }

        .pricing-note {
            text-align: center;
            margin-top: 44px;
            font-size: 18px;
            color: var(--mist2);
            opacity: .5;
            font-style: italic;
        }

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

        /* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
        @media(max-width:1024px) {

            .cmp-wrap,
            .illus-strip,
            .proc-layout,
            .faq-layout {
                grid-template-columns: 1fr
            }

            .proc-vis {
                position: relative;
                top: 0
            }

            .faq-simg {
                display: none
            }

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

        @media(max-width:768px) {
            .nav-links {
                display: none
            }

            .ch-head,
            .svc-head {
                grid-template-columns: 1fr;
                gap: 22px
            }

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

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

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

            .cta-in {
                padding: 68px 30px
            }

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

            .h-trust {
                gap: 30px
            }

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

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

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

            #cta {
                margin: 0 14px 80px
            }

            .cta-in {
                padding: 58px 22px
            }

            .h-trust {
                flex-direction: column;
                gap: 22px
            }
        }
        
        
        
        
        
        
        
/*====================================formcss================================================        */


  /* ── OUTER CARD ── */
    .card-outer {
      position:relative;
       transform:translateY(35px);
       padding: 0 5vw 136px;
    }
    /* Top gold rule */
    .card-outer::before {
      content:'';
      position:absolute; top:0; left:8%; right:8%;
      height:1px;
      background:linear-gradient(90deg, transparent, var(--gold), var(--gold-l), var(--gold), transparent);
    }
    /* Bottom gold rule */
    .card-outer::after {
      content:'';
      position:absolute; bottom:0; left:20%; right:20%;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(200,168,75,0.4), transparent);
    }
 
    /* ── CARD ── */
   .card {
    background: linear-gradient(135deg, rgba(7, 6, 10, .92) 38%, rgba(35, 22, 4, .88));
    border: 1px solid var(--border);
    border-top: none;
    border-bottom: none;
    padding: 4rem 4.5rem;
    position: relative;
    overflow: hidden;
}
    /* Side lines */
    .card::before {
      content:'';
      position:absolute; top:0; left:0;
      width:3px; height:100%;
      background:linear-gradient(180deg, transparent, var(--gold-d), transparent);
      opacity:0.5;
    }
    .card::after {
      content:'';
      position:absolute; top:0; right:0;
      width:3px; height:100%;
      background:linear-gradient(180deg, transparent, var(--gold-d), transparent);
      opacity:0.5;
    }
    /* Inner glow */
    .card-glow {
      position:absolute; top:-80px; left:50%;
      transform:translateX(-50%);
      width:500px; height:250px;
      background:radial-gradient(ellipse, rgba(200,168,75,0.08) 0%, transparent 70%);
      pointer-events:none;
    }
    /* Corner ornaments */
    .orn {
      position:absolute;
      width:28px; height:28px;
    }
    .orn-tl { top:1.5rem; left:1.5rem;
      border-top:1px solid var(--gold-d); border-left:1px solid var(--gold-d); }
    .orn-tr { top:1.5rem; right:1.5rem;
      border-top:1px solid var(--gold-d); border-right:1px solid var(--gold-d); }
    .orn-bl { bottom:1.5rem; left:1.5rem;
      border-bottom:1px solid var(--gold-d); border-left:1px solid var(--gold-d); }
    .orn-br { bottom:1.5rem; right:1.5rem;
      border-bottom:1px solid var(--gold-d); border-right:1px solid var(--gold-d); }
 
    /* ── HEADER ── */
    .hdr {
      text-align:center;
      margin-bottom:3.5rem;
      position:relative; z-index:1;
    }
    .hdr-eyebrow {
      display:inline-flex; align-items:center; gap:0.8rem;
      font-size:0.68rem; font-weight:600;
      letter-spacing:0.25em; text-transform:uppercase;
      color:var(--gold-d); margin-bottom:1.2rem;
    }
    .hdr-eyebrow::before,
    .hdr-eyebrow::after {
      content:''; width:28px; height:1px;
      background:linear-gradient(90deg, transparent, var(--gold-d));
    }
    .hdr-eyebrow::after {
      background:linear-gradient(270deg, transparent, var(--gold-d));
    }
    .hdr-title {
      font-family:'Cormorant Garamond', serif;
      font-size:clamp(2.2rem, 4vw, 3.2rem);
      font-weight:700; line-height:1.1;
      color:var(--white); margin-bottom:0.7rem;
    }
    .hdr-title em { font-style:italic; color:var(--gold); }
    .hdr-sub {
      font-family:'Cormorant Garamond', serif;
      font-style:italic;
      font-size: 18px;
      color:var(--muted);
      line-height:1.65;
      max-width:420px;
      margin:0 auto;
      font-style: normal;
    }
    /* Diamond divider */
    .hdr-div {
      display:flex; align-items:center; justify-content:center;
      gap:0.8rem; margin-top:1.8rem;
    }
    .hd-line {
      width:55px; height:1px;
      background:linear-gradient(90deg, transparent, var(--gold-d));
    }
    .hd-line.r { background:linear-gradient(270deg, transparent, var(--gold-d)); }
    .hd-diamond {
      width:6px; height:6px;
      background:var(--gold);
      transform:rotate(45deg); opacity:0.8;
    }
    .hd-dot {
      width:3px; height:3px;
      background:var(--gold-d);
      border-radius:50%; opacity:0.5;
    }
 
    /* ── FORM LAYOUT ── */
    .form-wrap { position:relative; z-index:1; }
 
    form { display:flex; flex-direction:column; gap:0; }
 
    .row {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1.5rem;
      margin-bottom:1.5rem;
    }
 
    .field {
      display:flex; flex-direction:column; gap:0.5rem;
      position:relative;
    }
    .field.full { grid-column:span 2; }
 
    /* Label */
    label.lbl {
      display:flex; align-items:center; gap:0.5rem;
      font-size:0.68rem; font-weight:600;
      letter-spacing:0.2em; text-transform:uppercase;
      color:var(--gold-d);
      transition:color 0.3s;
    }
    label.lbl svg { width:12px; opacity:0.75; }
    .opt {
      font-size:0.6rem; letter-spacing:0.06em;
      text-transform:none; font-weight:400;
      color:rgba(122,106,80,0.45); margin-left:0.2rem;
    }
 
    /* Input wrap */
    .iw { position:relative; }
 
    /* Icon */
    .ic {
      position:absolute; left:1rem; top:50%;
      transform:translateY(-50%);
      width:15px; color:rgba(139,105,20,0.5);
      pointer-events:none;
      transition:color 0.3s;
    }
    .ic.t { top:1rem; transform:none; }
 
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
      width:100%;
      background:rgba(255,255,255,0.025);
      border:1px solid var(--border);
      border-radius:3px;
      padding:0.9rem 1rem 0.9rem 2.7rem;
      font-family:'DM Sans', sans-serif;
      font-size:0.88rem; font-weight:400;
      color:var(--cream);
      outline:none;
      transition:border-color 0.35s, background 0.35s, box-shadow 0.35s;
      -webkit-appearance:none;
    }
    select { cursor:pointer; }
    select option { background:#1a1510; color:var(--cream); }
    textarea {
      resize:none; height:120px;
      padding-top:0.9rem; line-height:1.65;
    }
    input::placeholder, textarea::placeholder {
      font-family:'Cormorant Garamond', serif;
      font-style:italic; font-size:0.95rem;
      color:rgba(122,106,80,0.4);
    }
    input:hover, textarea:hover, select:hover {
      border-color:rgba(200,168,75,0.32);
    }
    input:focus, textarea:focus, select:focus {
      border-color:var(--border-h);
      background:rgba(200,168,75,0.04);
      box-shadow:0 0 0 4px rgba(200,168,75,0.07),
                 inset 0 1px 20px rgba(200,168,75,0.03);
    }
    input:focus ~ .ic,
    textarea:focus ~ .ic,
    select:focus ~ .ic { color:var(--gold-d); }
    .field:focus-within label.lbl { color:var(--gold); }
 
    /* Char counter */
    .cc {
      text-align:right; font-size:0.66rem;
      color:rgba(122,106,80,0.35);
      transition:color 0.3s;
    }
    .cc.warn { color:rgba(200,168,75,0.6); }
 
    /* Error */
    .err {
      font-size:0.7rem; color:rgba(220,120,80,0.85);
      display:none; align-items:center; gap:0.35rem;
      margin-top:0.1rem;
    }
    .err svg { width:11px; flex-shrink:0; }
    .field.bad input,
    .field.bad textarea,
    .field.bad select {
      border-color:rgba(220,100,60,0.5);
      box-shadow:0 0 0 3px rgba(220,100,60,0.07);
    }
    .field.bad .err { display:flex; }
    .field.bad label.lbl { color:rgba(220,120,80,0.8); }
 
    /* Separator */
    .sep {
      display:flex; align-items:center; gap:1rem;
      margin:0.5rem 0 1.5rem;
    }
    .sep-line {
      flex:1; height:1px;
      background:linear-gradient(90deg, transparent, var(--border), transparent);
    }
    .sep-txt {
      font-size:0.65rem; font-weight:600;
      letter-spacing:0.18em; text-transform:uppercase;
      color:rgba(122,106,80,0.4);
      white-space:nowrap;
    }
 
    /* ── CHECKBOX ── */
    .chk-row {
      display:flex; align-items:flex-start; gap:1rem;
      margin:0.4rem 0 1.8rem; cursor:pointer;
    }
    .chk-box {
      position:relative; flex-shrink:0; margin-top:1px;
    }
    .chk-box input[type="checkbox"] {
      width:18px; height:18px; padding:0;
      -webkit-appearance:none; appearance:none;
      background:rgba(255,255,255,0.03);
      border:1px solid var(--border);
      border-radius:2px;
      cursor:pointer;
      transition:all 0.25s;
    }
    .chk-box input[type="checkbox"]:checked {
      background:var(--gold-d);
      border-color:var(--gold);
      box-shadow:0 0 10px rgba(200,168,75,0.3);
    }
    .chk-tick {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:10px; height:7px;
      pointer-events:none; opacity:0;
      transition:opacity 0.2s;
    }
    .chk-tick path { stroke:#fdfaf4; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
    .chk-box input[type="checkbox"]:checked ~ .chk-tick { opacity:1; }
    .chk-lbl {
      font-size: 18px;
      color:#fff;
      line-height:1.6;
    }
    .chk-lbl a {
      color:var(--gold-d); text-decoration:none;
      border-bottom:1px solid rgba(139,105,20,0.25);
      transition:color 0.3s, border-color 0.3s;
    }
    .chk-lbl a:hover { color:var(--gold); border-color:rgba(200,168,75,0.5); }
    .chk-err {
      font-size:0.7rem; color:rgba(220,120,80,0.8);
      margin-bottom:1rem; display:none;
    }
    .chk-err.on { display:block; }
 
    /* ── SUBMIT ── */
    .sub-btn {
      width:100%; padding:1.1rem 2rem;
      border:1px solid var(--gold-d);
      border-radius:2px;
      background:linear-gradient(135deg, var(--gold-d) 0%, var(--gold) 100%);
      color:var(--black);
      font-family:'DM Sans', sans-serif;
      font-size:0.82rem; font-weight:600;
      letter-spacing:0.14em; text-transform:uppercase;
      cursor:pointer; position:relative; overflow:hidden;
      box-shadow:0 8px 30px rgba(200,168,75,0.2);
      transition:transform 0.3s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.3s;
      display:flex; align-items:center; justify-content:center; gap:0.7rem;
    }
    .sub-btn::before {
      content:''; position:absolute; inset:0;
      background:linear-gradient(135deg, var(--gold) 0%, var(--gold-l) 100%);
      opacity:0; transition:opacity 0.4s;
    }
    .sub-btn:hover {
      transform:translateY(-3px) scale(1.005);
      box-shadow:0 16px 45px rgba(200,168,75,0.35);
    }
    .sub-btn:hover::before { opacity:1; }
    .sub-btn:active { transform:translateY(-1px); }
    .sub-btn span, .sub-btn svg { position:relative; z-index:1; }
    .sub-btn svg { width:16px; }
    .sub-btn:disabled { opacity:0.55; cursor:not-allowed; transform:none; }
 
    .spinner {
      display:none; width:17px; height:17px;
      border:2px solid rgba(10,8,5,0.25);
      border-top-color:var(--black);
      border-radius:50%;
      animation:spin 0.7s linear infinite;
      position:relative; z-index:1;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
        
        
        /* ── FOOTER META ── */
    .fmeta {
      display:flex; align-items:center; justify-content:center;
      gap:2rem; margin-top:1.4rem;
      flex-wrap:wrap; position:relative; z-index:1;
    }
    .fm-item {
      display:flex; align-items:center; gap:0.4rem;
      font-size:0.68rem; color:rgba(122,106,80,0.35);
      font-weight:500; letter-spacing:0.05em;
    }
    .fm-item svg { width:12px; }
    .fm-sep { width:1px; height:14px; background:var(--border); }
 
    /* ── SUCCESS ── */
    .success {
      display:none; text-align:center;
      padding:2.5rem 1rem;
      position:relative; z-index:1;
    }
    .suc-icon {
      width:72px; height:72px; border-radius:50%;
      border:1px solid var(--border);
      background:rgba(200,168,75,0.06);
      display:flex; align-items:center; justify-content:center;
      margin:0 auto 2rem;
      position:relative;
    }
    .suc-icon::before {
      content:''; position:absolute; inset:-10px;
      border:1px solid rgba(200,168,75,0.1);
      border-radius:50%;
      animation:rpl 2.5s ease-out infinite;
    }
    @keyframes rpl {
      0%  { transform:scale(0.85); opacity:0.8; }
      100%{ transform:scale(1.3); opacity:0; }
    }
    .suc-icon svg { width:28px; color:var(--gold); }
    .suc-ornament {
      font-family:'Cormorant Garamond', serif;
      font-size:2rem; color:var(--gold-d);
      opacity:0.4; line-height:1;
      margin-bottom:0.5rem;
    }
    .suc-title {
      font-family:'Cormorant Garamond', serif;
      font-size:2rem; font-weight:700;
      color:var(--white); margin-bottom:0.6rem;
    }
    .suc-line {
      width:40px; height:1px;
      background:linear-gradient(90deg, transparent, var(--gold-d), transparent);
      margin:0.8rem auto;
    }
    .suc-quote {
      font-family:'Cormorant Garamond', serif;
      font-style:italic; font-size:1rem;
      color:var(--muted); line-height:1.7;
      max-width:360px; margin:0 auto;
    }
 
    /* ── RESPONSIVE ── */
    @media (max-width:680px) {
      .card { padding:2.5rem 1.8rem; }
      .row { grid-template-columns:1fr; }
      .field.full { grid-column:span 1; }
      .hdr-title { font-size:2rem; }
      .brand { flex-direction:column; gap:0.8rem; text-align:center; }
      .fmeta { gap:1rem; }
      .fm-sep { display:none; }
    }
    @media (max-width:400px) {
      .card { padding:2rem 1.2rem; }
      body { padding:2rem 1rem; }
    }
        
        
        .fm-item {
    color: #fff;
}
        
        input::placeholder,
textarea::placeholder {
  color: #fff;
  opacity: 1;
}

  .quote-popup-content input::placeholder,
textarea::placeholder {
  color: #000 !important;
  opacity: 1;
}
        
        p {color: #fff !important;}

li {color: #fff !important;}

.cmp-c.bad {
    color: #fff !important;
}
a {
    font-size: 16px !important;
    color:#fff !important;
}

   .pk-btn {
    margin-top: 40px;
}    


















/* ─── FORM (RIGHT) ─── */
    .hero-form-wrap {
      position: relative;
      padding: 60px;
    }
 
    /* Gold corner accent */
    .hero-form-wrap::before {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      background: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(0 0 0) 50%, transparent 100%);
      pointer-events: none;
    }
 
    .hero-form {
      background: rgb(0 0 0 / 3%);
      border: 1px solid rgba(201,168,76,0.2);
      padding: 40px 36px;
      position: relative;
    }
 
    .form-title {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      font-weight: 400;
      color: #f0ece2;
      margin-bottom: 6px;
    }
 
    .form-sub {
      font-size: 13px;
      color: rgba(240,236,226,0.4);
      font-weight: 300;
      margin-bottom: 24px;
    }
 
    .form-divider {
      width: 40px;
      height: 1px;
      background: #c9a84c;
      margin-bottom: 28px;
    }
 
    .form-group {
      margin-bottom: 18px;
    }
 
    .form-group label {
      display: block;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(240,236,226,0.45);
      margin-bottom: 8px;
      font-weight: 400;
    }
 
    .form-group input,
    .form-group textarea {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(201,168,76,0.15);
      color: #f0ece2;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 300;
      padding: 12px 14px;
      outline: none;
      transition: border-color 0.2s, background 0.2s;
      -webkit-appearance: none;
      appearance: none;
    }
 
    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: rgba(240,236,226,0.2);
    }
 
    .form-group input:focus,
    .form-group textarea:focus {
      border-color: rgba(201,168,76,0.5);
      background: rgba(255,255,255,0.07);
    }
 
    .form-group textarea {
      resize: vertical;
      min-height: 100px;
      line-height: 1.6;
    }
 
    /* Two-column row for Name + Email */
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
 
    .form-submit {
      width: 100%;
      background: #c9a84c;
      color: #0a0a0f;
      border: none;
      padding: 14px 24px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      margin-top: 8px;
      transition: background 0.2s, transform 0.1s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
 
    .form-submit:hover { background: #e0be66; }
    .form-submit:active { transform: scale(0.99); }
 
    .form-note {
      font-size: 11px;
      color: rgba(240,236,226,0.25);
      text-align: center;
      margin-top: 12px;
      font-weight: 300;
    }
 
    /* ─── SUCCESS MESSAGE ─── */
    .success-msg {
      display: none;
      text-align: center;
      padding: 32px 0 16px;
    }
 
    .success-msg .s-icon {
      width: 48px;
      height: 48px;
      border: 1px solid #c9a84c;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      color: #c9a84c;
      font-size: 22px;
    }
 
    .success-msg h3 {
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      font-weight: 400;
      color: #f0ece2;
      margin-bottom: 8px;
    }
 
    .success-msg p {
      color: rgba(240,236,226,0.5);
      font-size: 13px;
      font-weight: 300;
    }
 
    /* ─── RESPONSIVE ─── */
    @media (max-width: 900px) {
      #hero {
        padding: 60px 32px;
      }
 
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
      }
 
      .form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }
 
    @media (max-width: 540px) {
      #hero {
        padding: 60px 20px 80px;
      }
 
      .hero-form {
        padding: 28px 20px;
      }
 
      .h-acts {
        flex-direction: column;
        align-items: flex-start;
      }
 
      .btn-p {
        width: 100%;
        justify-content: center;
      }
    }
        .hero-form .form-row input, .form-row select, .form-row textarea {
    border: unset;
}
.hero-form input:focus {
    background: unset !important;
}
.hero-form label {
    color: #fff !important;
}
.hero-inner h1 {
    font-size: 100px;
}
#qs p
 {
    font-size: 50px !important;
}

#qs .h-acts {
    margin-top: 30px;
    justify-content: center;
}

.hero-form textarea::placeholder {
    color: #fff !important; 
    opacity: 1;  
}
.hero-form input::placeholder, 
textarea::placeholder {
    color: #fff;
    opacity: 1;     
}

#formWrap textarea::placeholder {
    color: #fff !important; 
    opacity: 1;  
}

.quote-popup-content input {
    color: #000;
}

.quote-popup-content textarea {
    color: #000;
}






/* ── Tablet: 992px se neeche ── */
@media (max-width: 991px) {
    .hero-container {
        padding: 60px 32px;
    }
 
    .hero-content-col {
        padding-right: 15px;
    }
 
    .hero-form-col {
        padding-left: 15px;
    }
 
    .h1 {
        font-size: clamp(30px, 5vw, 42px) !important;
    }
}
 
/* ── Mobile: 768px se neeche ── */
@media (max-width: 767px) {
    .hero-form-wrap {
            padding-top: 40px !important;
        padding: 0;
}
a {
    font-size: 13px !important;
}

.cmp-row.hd .cmp-c {
    font-size: 14px;
}
.ft-bot {
    text-align: center;
}
.ft-bot {
    text-align: center;
    justify-content: center;
}
.cmp-c {
    font-size: 13px;
}
    footer .ft-grid {
    display: block;
}
    #hero {
        min-height: auto;
    }
 
    .hero-container {
        padding: 50px 20px 60px;
    }
 
    /* Content col — center align on mobile */
    .hero-content-col {
        padding-right: 15px;
        text-align: center;
    }
 
    .hero-form-col {
        padding-left: 15px;
    }
 
    /* Eyebrow center */
    .h-ey {
        justify-content: center;
    }
 
    /* Heading */
    .h1 {
        font-size: clamp(28px, 8vw, 38px) !important;
        margin-bottom: 16px !important;
    }
 
    /* Subtext */
    .h-sub {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }
 
    /* Buttons — full width stacked */
    .h-acts {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
 
    .btn-p {
        width: 100% !important;
        justify-content: center !important;
    }
 
    /* Form */
    .hero-form-wrap::before {
        display: none;
    }
 
    .hero-form {
        padding: 28px 18px !important;
    }
 
    .form-title {
        font-size: 18px !important;
    }
 
    /* Scroll indicator hide */
    .h-scroll {
        display: none !important;
    }
}
 
/* ── Small Mobile: 480px se neeche ── */
@media (max-width: 480px) {
    .hero-container {
        padding: 40px 16px 50px;
    }
 
    .h1 {
        font-size: clamp(24px, 9vw, 32px) !important;
    }
 
    .h-sub {
        font-size: 13px !important;
    }
 
    .hero-form {
        padding: 22px 14px !important;
    }
 
    .form-title {
        font-size: 16px !important;
    }
 
    .form-group input,
    .form-group textarea {
        font-size: 13px;
        padding: 10px 12px;
    }
 
    .form-submit {
        font-size: 12px;
        padding: 12px 16px;
    }
 
    .checkbox-fix-container label {
        font-size: 11px !important;
    }
}
 














.bmh-testimonials {
    background: #07060a;
    padding: 80px 24px;
    font-family: 'Lato', sans-serif;
    color: #f0ece4;
}
 
    .bmh-eyebrow {
      text-align: center;
      font-size: 11px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: #c9a84c;
      margin-bottom: 12px;
    }
 
    .bmh-heading {
      text-align: center;
      font-family: 'Playfair Display', serif;
      font-size: clamp(28px, 5vw, 44px);
      font-weight: 400;
      color: #f0ece4;
      margin: 0 0 6px;
      line-height: 1.2;
    }
 
    .bmh-heading em {
      font-style: italic;
      color: #c9a84c;
    }
 
    .bmh-subtext {
      text-align: center;
      font-size: 15px;
      color: #8a8070;
      margin: 0 auto 52px;
      max-width: 480px;
      line-height: 1.7;
      font-weight: 300;
    }
 
    /*.bmh-grid {*/
    /*  display: grid;*/
    /*  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
    /*  gap: 20px;*/
    /*  max-width: 1060px;*/
    /*  margin: 0 auto 40px;*/
    /*}*/
    
    .bmh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1700px;
    margin: 0 auto 0px;
}
    
 
    .bmh-card {
      background: linear-gradient(135deg, rgba(7, 6, 10, .92) 38%, rgba(35, 22, 4, .88));
      border: 1px solid #c8a84b33;
      border-radius: 14px;
      padding: 32px 28px;
      position: relative;
      transition: border-color 0.3s, background 0.3s;
      overflow: hidden;
      height: 100%;
    }
 
    .bmh-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 14px;
      background: linear-gradient(135deg, transparent 60%, #c8a84b0d 100%);
      pointer-events: none;
    }
 
    .bmh-card:hover {
      border-color: #c8a84b88;
      background: linear-gradient(135deg, rgba(7, 6, 10, .92) 38%, rgba(35, 22, 4, .88));
    }
 
    .bmh-card.featured {
      background: linear-gradient(135deg, rgba(7, 6, 10, .92) 38%, rgba(35, 22, 4, .88));
      border-color: #c8a84b77;
    }
 
    .bmh-card.featured::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #c8a84b, transparent);
      border-radius: 14px 14px 0 0;
    }
 
    .bmh-quote-mark {
      font-family: 'Playfair Display', serif;
      font-size: 64px;
      line-height: 1;
      color: #c9a84c;
      opacity: 0.4;
      position: absolute;
      top: 16px;
      left: 24px;
      font-style: italic;
    }
 
    .bmh-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 16px;
    }
 
    .bmh-star {
      width: 14px;
      height: 14px;
      fill: #c9a84c;
    }
 
    .bmh-review-text {
      font-size: 14.5px;
      color: #cfc6b4;
      line-height: 1.8;
      margin: 0 0 24px;
      font-weight: 300;
      padding-top: 28px;
    }
 
    .bmh-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, #c8a84b44, transparent);
      margin-bottom: 20px;
    }
 
    .bmh-author-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }
 
    .bmh-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0;
      letter-spacing: 0.5px;
      border: 1px solid #c8a84b44;
    }
 
    .av-amber {background: linear-gradient(135deg, #2a200a, #3a2e0f);color: #c9a84c;}
    .av-teal  {background: linear-gradient(135deg, #2a200a, #3a2e0f);color: #c9a84c;}
    .av-rose  {background: linear-gradient(135deg, #2a200a, #3a2e0f);color: #c9a84c;}
    .av-blue  { background: linear-gradient(135deg, #0a1828, #0c1e3a); color: #5fa8e0; }
 
    .bmh-author-name {
      font-size: 14px;
      font-weight: 700;
      color: #f0ece4;
      margin: 0 0 2px;
    }
 
    .bmh-author-book {
      font-size: 12px;
      color: #8a7a5a;
      margin: 0;
      font-style: italic;
      font-family: 'Playfair Display', serif;
    }
 
    .bmh-service-badge {
      display: inline-block;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #c9a84c;
      background: linear-gradient(135deg, #c8a84b12, #c8a84b08);
      border: 0.5px solid #c8a84b44;
      border-radius: 20px;
      padding: 3px 10px;
      margin-bottom: 14px;
    }
 
    .bmh-bottom-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 24px;
      max-width: 700px;
      margin: 0 auto;
      border-top: 1px solid #c8a84b33;
      padding-top: 32px;
    }
 
    .bmh-stat { text-align: center; }
 
    .bmh-stat-num {
      font-family: 'Playfair Display', serif;
      font-size: 26px;
      color: #c9a84c;
      font-weight: 600;
      display: block;
    }
 
    .bmh-stat-label {
      font-size: 11px;
      color: #6b6050;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
 
    .bmh-sep {
      width: 1px;
      height: 36px;
      background: linear-gradient(180deg, transparent, #c8a84b44, transparent);
    }
 
    @media (max-width: 600px) {
      .bmh-testimonials { padding: 56px 16px; }
      .bmh-sep { display: none; }
    }







body{zoom:100%;}

  @media (-webkit-min-device-pixel-ratio: 1.5),
        (min-resolution: 144dpi) {
            body {
                zoom: 80% !important;
            }
            .bmh-grid {
    max-width: 1240px !important;
}

            
        }

        @media (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.49),
        (min-resolution: 120dpi) and (max-resolution: 143dpi) {
            body {
                zoom: 83% !important;
            }
        }