:root {
    --bg: #FAF3F3;
    --bg2: #F5E6E6;
    --bg3: #ECD6D6;

    --dark: #111111;
    --dark2: #1A1A1A;
    --dark3: #2C2C2C;

    /* RED THEME */
    --sage: #7A1F1F;
    --sage2: #C62828;
    --sage3: rgba(198, 40, 40, .08);
    --sage4: rgba(198, 40, 40, .04);

    --stone: #8C5A5A;
    --stone2: #B07A7A;
    --stone3: #D2A3A3;

    --line: rgba(0, 0, 0, .06);
    --line2: rgba(0, 0, 0, .12);

    --error: #D32F2F;

    --fd: 'DM Serif Display', serif;
    --fb: 'Inter', sans-serif;
    --fm: 'Space Mono', monospace;
}

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

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: var(--fb);
            background: var(--bg);
            color: var(--dark);
            overflow-x: hidden;
            cursor: none
        }

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

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

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

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

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

        ::-webkit-scrollbar-thumb {
            background: var(--sage);
            border-radius: 2px
        }

        /* ═══ CURSOR ═══ */
        #cur {
            position: fixed;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--sage);
            pointer-events: none;
            z-index: 99998;
            transform: translate(-50%, -50%);
            transition: width .3s, height .3s, background .3s, border-radius .3s
        }

        #cur.hov {
            width: 50px;
            height: 50px;
            background: rgba(45, 90, 61, .1);
            border: 1px solid var(--sage);
            border-radius: 50%
        }

        /* ═══ LOADER ═══ */
        #loader {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: var(--dark);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity .8s, visibility .8s
        }

        #loader.done {
            opacity: 0;
            visibility: hidden;
            pointer-events: none
        }

        .loader-ring-wrap {
            width: 110px;
            height: 110px;
            position: relative
        }

        .loader-ring-wrap svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg)
        }

        .loader-ring-wrap circle {
            fill: none;
            stroke-width: 2;
            stroke-linecap: round
        }

        .lr-bg {
            stroke: rgba(255, 255, 255, .06)
        }

        .lr-fg {
            stroke: var(--sage);
            stroke-dasharray: 314;
            stroke-dashoffset: 314;
            animation: lrDraw 1.5s cubic-bezier(.4, 0, .2, 1) forwards
        }

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

        .loader-ring-center {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center
        }

        .loader-pct {
            font-family: var(--fm);
            font-size: .65rem;
            letter-spacing: 2px;
            color: var(--sage)
        }

        .loader-brand {
            font-family: var(--fd);
            font-size: 2.6rem;
            color: #fff;
            letter-spacing: 10px;
            margin-top: 32px;
            opacity: 0;
            animation: ldFade 1s .5s forwards
        }

        .loader-sub {
            font-family: var(--fm);
            font-size: .38rem;
            letter-spacing: 8px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .35);
            margin-top: 10px;
            opacity: 0;
            animation: ldFade 1s .8s forwards
        }

        .loader-line {
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--sage), transparent);
            margin-top: 24px;
            animation: ldLine 1.2s .3s forwards
        }

        @keyframes ldFade {
            to {
                opacity: 1
            }
        }

        @keyframes ldLine {
            to {
                width: 120px
            }
        }

        /* ═══ NAV ═══ */
        #nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 900;
            height: 80px;
            display: flex;
            align-items: center;
            background: rgba(244, 242, 238, .85);
            backdrop-filter: blur(16px);
            transition: all .4s
        }

        #nav.scrolled {
            background: rgba(244, 242, 238, .98);
            box-shadow: 0 4px 30px rgba(0, 0, 0, .04)
        }

        .nav-inner {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 48px
        }

        .nav-logo {
            font-family: var(--fd);
            font-size: 1.5rem;
            color: var(--dark)
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 32px
        }

        .nav-a {
            font-family: var(--fm);
            font-size: .48rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--stone);
            transition: color .25s
        }

        .nav-a:hover,
        .nav-a.on {
            color: var(--sage)
        }

        .nav-cta {
            font-family: var(--fm);
            font-size: .48rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 12px 24px;
            background: var(--dark);
            color: var(--bg);
            border: none;
            border-radius: 0;
            cursor: none;
            font-weight: 700;
            transition: all .3s
        }

        .nav-cta:hover {
            background: var(--sage)
        }

        .ham {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: none;
            padding: 8px
        }

        .ham span {
            width: 22px;
            height: 2px;
            background: var(--dark);
            transition: all .3s
        }

        .mob-menu {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 899;
            background: var(--bg);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0
        }

        .mob-menu.on {
            display: flex
        }

        .mob-menu a {
            font-family: var(--fd);
            font-size: 2rem;
            font-weight: 400;
            color: var(--stone2);
            padding: 14px 0;
            transition: color .25s
        }

        .mob-menu a:hover {
            color: var(--sage)
        }

        .mob-close {
            position: absolute;
            top: 28px;
            right: 28px;
            width: 40px;
            height: 40px;
            border: 1px solid var(--line2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--dark);
            cursor: none;
            font-size: .9rem;
            background: none
        }

        /* ═══ HERO — EDITORIAL NO-IMAGE ═══ */
        #hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            padding: 0 80px
        }

        .hero-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            max-width: 860px;
            padding-top: 80px
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 32px
        }

        .hero-eyebrow-line {
            width: 28px;
            height: 2px;
            background: var(--sage)
        }

        .hero-eyebrow-text {
            font-family: var(--fm);
            font-size: .48rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--sage)
        }

        .hero-h {
            font-family: var(--fd);
            font-weight: 400;
            font-size: clamp(3.5rem, 7vw, 7.5rem);
            line-height: .88;
            letter-spacing: -3px;
            color: var(--dark);
            margin-bottom: 32px
        }

        .hero-h em {
            font-style: italic;
            color: var(--sage)
        }

        .hero-h span {
            -webkit-text-stroke: 1.5px var(--dark);
            color: transparent
        }

        .hero-desc {
            font-family: var(--fd);
            font-size: 1.05rem;
            line-height: 1.9;
            color: var(--stone);
            max-width: 480px;
            margin-bottom: 36px
        }

        .hero-btns {
            display: flex;
            gap: 14px;
            margin-bottom: 64px;
            flex-wrap: wrap
        }

        .btn-s {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: var(--fm);
            font-size: .5rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 14px 28px;
            cursor: none;
            font-weight: 700;
            transition: all .3s
        }

        .btn-sage {
            background: var(--sage);
            color: #fff;
            border: none
        }

        .btn-sage:hover {
            background: var(--sage2);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(45, 90, 61, .2)
        }

        .btn-dark {
            background: var(--dark);
            color: var(--bg);
            border: none
        }

        .btn-dark:hover {
            background: var(--dark3);
            transform: translateY(-2px)
        }

        .btn-outline {
            background: transparent;
            color: var(--dark);
            border: 1.5px solid var(--line2)
        }

        .btn-outline:hover {
            border-color: var(--sage);
            color: var(--sage)
        }

        .hero-metrics {
            display: flex;
            gap: 48px
        }

        .hm-num {
            font-family: var(--fd);
            font-size: 2.4rem;
            color: var(--sage);
            line-height: 1
        }

        .hm-num sup {
            font-size: .8rem
        }

        .hm-label {
            font-family: var(--fm);
            font-size: .4rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--stone);
            margin-top: 6px
        }

        /* Hero decorative elements */
        .hero-deco-circle {
            position: absolute;
            top: 8%;
            right: 6%;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            border: 1px solid var(--line2);
            opacity: .5
        }

        .hero-deco-circle2 {
            position: absolute;
            top: 12%;
            right: 10%;
            width: 340px;
            height: 340px;
            border-radius: 50%;
            border: 1px solid rgba(45, 90, 61, .1);
            opacity: .4
        }

        .hero-deco-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--sage);
            opacity: .3
        }

        .hero-deco-dot:nth-child(1) {
            top: 25%;
            right: 4%
        }

        .hero-deco-dot:nth-child(2) {
            top: 40%;
            right: 28%
        }

        .hero-deco-dot:nth-child(3) {
            bottom: 30%;
            right: 8%
        }

        .hero-deco-grid {
            position: absolute;
            bottom: 18%;
            right: 5%;
            width: 100px;
            height: 100px;
            background-image: radial-gradient(var(--sage) 1px, transparent 1px);
            background-size: 14px 14px;
            opacity: .2
        }

        .hero-deco-vline {
            position: absolute;
            top: 0;
            right: 32%;
            width: 1px;
            height: 100%;
            background: linear-gradient(to bottom, transparent, var(--line2), transparent)
        }

        .hero-float-card {
            position: absolute;
            top: 28%;
            right: 14%;
            background: rgba(255, 255, 255, .8);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, .6);
            padding: 22px 28px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, .06);
            z-index: 2
        }

        .hfc-num {
            font-family: var(--fd);
            font-size: 2rem;
            color: var(--sage);
            line-height: 1
        }

        .hfc-label {
            font-family: var(--fm);
            font-size: .38rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--stone);
            margin-top: 4px
        }

        .hero-bottom-bar {
            display: flex;
            align-items: center;
            padding: 24px 0;
            border-top: 1px solid var(--line2);
            margin-top: auto;
            gap: 0;
            flex-wrap: wrap
        }

        .hbb-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--fm);
            font-size: .42rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--stone);
            padding: 8px 24px
        }

        .hbb-item i {
            color: var(--sage);
            font-size: .55rem
        }

        .hbb-sep {
            width: 1px;
            height: 16px;
            background: var(--line2)
        }

        /* ═══ TICKER ═══ */
        .ticker {
            background: var(--dark);
            height: 48px;
            overflow: hidden;
            display: flex;
            align-items: center
        }

        .ticker-track {
            display: flex;
            animation: tick 22s linear infinite;
            white-space: nowrap
        }

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

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

        .tk-item {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 0 24px;
            font-family: var(--fm);
            font-size: .44rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--stone3)
        }

        .tk-item i {
            color: var(--sage2);
            font-size: .3rem
        }

        .tk-item.hi {
            color: #fff
        }

        /* ═══ ABOUT — NEW LAYOUT ═══ */
        #about {
            padding: 120px 0;
            position: relative
        }

        .about-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 48px;
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 80px;
            align-items: center
        }

        .about-text-col {
            order: 1
        }

        .about-img-col {
            order: 2;
            position: relative
        }

        .about-label {
            font-family: var(--fm);
            font-size: .44rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            color: var(--sage);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px
        }

        .about-label::before {
            content: '';
            width: 24px;
            height: 2px;
            background: var(--sage)
        }

        .about-h {
            font-family: var(--fd);
            font-size: clamp(2.4rem, 3.5vw, 3.8rem);
            line-height: .95;
            letter-spacing: -1px;
            color: var(--dark);
            margin-bottom: 24px
        }

        .about-h em {
            font-style: italic;
            color: var(--sage)
        }

        .about-p {
            font-family: var(--fd);
            font-size: .9rem;
            line-height: 2;
            color: var(--stone);
            margin-bottom: 12px
        }

        .about-feats {
            margin-top: 28px;
            display: flex;
            flex-direction: column;
            gap: 0
        }

        .about-feat {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid var(--line);
            transition: all .3s
        }

        .about-feat:last-child {
            border-bottom: none
        }

        .about-feat:hover {
            padding-left: 8px
        }

        .about-feat i {
            color: var(--sage);
            font-size: .7rem;
            margin-top: 3px;
            flex-shrink: 0
        }

        .about-feat span {
            font-family: var(--fb);
            font-size: .78rem;
            color: var(--dark3);
            font-weight: 400;
            line-height: 1.5
        }

        .about-img-main {
            width: 100%;
            aspect-ratio: 3/4;
            object-fit: cover;
            filter: saturate(.7);
            position: relative;
            z-index: 1
        }

        .about-img-accent {
            position: absolute;
            bottom: -20px;
            left: -20px;
            right: 20px;
            top: 20px;
            border: 2px solid var(--sage);
            z-index: 0
        }

        .about-img-badge {
            position: absolute;
            bottom: 32px;
            left: -40px;
            background: var(--sage);
            color: #fff;
            padding: 20px 24px;
            z-index: 2
        }

        .about-img-badge-n {
            font-family: var(--fd);
            font-size: 2rem;
            line-height: 1
        }

        .about-img-badge-l {
            font-family: var(--fm);
            font-size: .36rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-top: 4px;
            opacity: .7
        }

        .about-stats-bar {
            max-width: 1200px;
            margin: 64px auto 0;
            padding: 0 48px;
        }

        .about-stats {
            display: flex;
            gap: 0;
            background: var(--dark);
        }

        .a-stat {
            flex: 1;
            padding: 32px 28px;
            border-right: 1px solid rgba(255, 255, 255, .08)
        }

        .a-stat:last-child {
            border-right: none
        }

        .a-stat-n {
            font-family: var(--fd);
            font-size: 2.2rem;
            color: var(--sage2);
            line-height: 1
        }

        .a-stat-n sup {
            font-size: .8rem
        }

        .a-stat-l {
            font-family: var(--fm);
            font-size: .38rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .4);
            margin-top: 6px
        }

        /* ═══ BENTO SYSTEM (SERVICES & TESTIMONIALS) ═══ */
        .bento-section {
            padding: 100px 0
        }

        .bento-head {
            text-align: center;
            margin-bottom: 56px;
            padding: 0 48px
        }

        .bento-label {
            font-family: var(--fm);
            font-size: .44rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            color: var(--sage);
            margin-bottom: 16px
        }

        .bento-h {
            font-family: var(--fd);
            font-size: clamp(2.2rem, 3.5vw, 3.5rem);
            line-height: .95;
            letter-spacing: -1px;
            color: var(--dark)
        }

        .bento-h em {
            font-style: italic;
            color: var(--sage)
        }

        .bento-grid {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 48px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: minmax(180px, auto);
            gap: 16px
        }

        .bento-card {
            background: #fff;
            border: 1px solid var(--line2);
            border-radius: 20px;
            padding: 32px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform .4s, box-shadow .4s, background .3s;
            position: relative;
            overflow: hidden;
            cursor: none
        }

        .bento-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, .06)
        }

        .bento-card.dark {
            background: var(--dark);
            color: #fff;
            border-color: transparent
        }

        .bento-card.sage {
            background: var(--sage);
            color: #fff;
            border-color: transparent
        }

        .bento-card.sage:hover {
            background: var(--sage2)
        }

        .bento-card.dark:hover {
            background: var(--dark2)
        }

        .bento-large {
            grid-column: span 2;
            grid-row: span 2
        }

        .bento-wide {
            grid-column: span 2
        }

        .b-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--sage3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--sage);
            font-size: 1rem;
            margin-bottom: 20px
        }

        .bento-card.sage .b-icon,
        .bento-card.dark .b-icon {
            background: rgba(255, 255, 255, .15);
            color: #fff
        }

        .b-title {
            font-family: var(--fd);
            font-size: 1.4rem;
            margin-bottom: 10px
        }

        .b-text {
            font-family: var(--fb);
            font-size: .78rem;
            line-height: 1.7;
            color: var(--stone);
            flex: 1;
            margin-bottom: 16px
        }

        .bento-card.dark .b-text,
        .bento-card.sage .b-text {
            color: rgba(255, 255, 255, .7)
        }

        .b-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 16px
        }

        .b-tag {
            font-family: var(--fm);
            font-size: .38rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 4px 10px;
            border: 1px solid var(--line2);
            border-radius: 20px;
            color: var(--stone2)
        }

        .bento-card.dark .b-tag,
        .bento-card.sage .b-tag {
            border-color: rgba(255, 255, 255, .2);
            color: rgba(255, 255, 255, .6)
        }

        .b-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--fm);
            font-size: .46rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--sage);
            transition: gap .3s
        }

        .bento-card.dark .b-link,
        .bento-card.sage .b-link {
            color: #fff
        }

        .b-link:hover {
            gap: 14px
        }

        .b-quote-mark {
            font-family: var(--fd);
            font-size: 4rem;
            color: var(--sage3);
            line-height: .5;
            margin-bottom: 16px
        }

        .bento-card.dark .b-quote-mark,
        .bento-card.sage .b-quote-mark {
            color: rgba(255, 255, 255, .1)
        }

        .b-quote-text {
            font-family: var(--fd);
            font-style: italic;
            font-size: 1rem;
            line-height: 1.8;
            color: var(--dark2);
            flex: 1;
            margin-bottom: 20px
        }

        .bento-card.dark .b-quote-text,
        .bento-card.sage .b-quote-text {
            color: rgba(255, 255, 255, .9)
        }

        .b-author {
            display: flex;
            align-items: center;
            gap: 12px
        }

        .b-ava {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--sage3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--fd);
            font-size: .8rem;
            color: var(--sage)
        }

        .bento-card.dark .b-ava,
        .bento-card.sage .b-ava {
            background: rgba(255, 255, 255, .15);
            color: #fff
        }

        .b-name {
            font-family: var(--fb);
            font-size: .72rem;
            font-weight: 600;
            color: var(--dark)
        }

        .bento-card.dark .b-name,
        .bento-card.sage .b-name {
            color: #fff
        }

        .b-role {
            font-family: var(--fm);
            font-size: .36rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--stone);
            margin-top: 2px
        }

        .bento-card.dark .b-role,
        .bento-card.sage .b-role {
            color: rgba(255, 255, 255, .5)
        }

        .b-stat-n {
            font-family: var(--fd);
            font-size: 3.2rem;
            color: var(--sage);
            line-height: 1
        }

        .bento-card.dark .b-stat-n,
        .bento-card.sage .b-stat-n {
            color: #fff
        }

        .b-stat-l {
            font-family: var(--fm);
            font-size: .4rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--stone);
            margin-top: 6px
        }

        .bento-card.dark .b-stat-l,
        .bento-card.sage .b-stat-l {
            color: rgba(255, 255, 255, .6)
        }

        /* ═══ FAQ ═══ */
        #faq {
            background: var(--bg2);
            padding: 100px 0
        }

        .faq-inner {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 48px;
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 60px
        }

        .faq-left {
            position: sticky;
            top: 100px;
            align-self: start
        }

        .faq-label {
            font-family: var(--fm);
            font-size: .44rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            color: var(--sage);
            margin-bottom: 16px
        }

        .faq-h {
            font-family: var(--fd);
            font-size: 2.4rem;
            line-height: .95;
            color: var(--dark)
        }

        .faq-h em {
            font-style: italic;
            color: var(--sage)
        }

        .faq-item {
            border-bottom: 1px solid var(--line2)
        }

        .faq-q {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            cursor: none;
            gap: 16px;
            transition: color .3s
        }

        .faq-q-text {
            font-family: var(--fd);
            font-size: .95rem;
            color: var(--dark);
            transition: color .3s;
            flex: 1
        }

        .faq-q:hover .faq-q-text,
        .faq-q.on .faq-q-text {
            color: var(--sage)
        }

        .faq-q-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            border: 1px solid var(--line2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .4rem;
            color: var(--stone);
            transition: all .4s
        }

        .faq-q.on .faq-q-icon {
            background: var(--sage);
            color: #fff;
            border-color: var(--sage);
            transform: rotate(45deg)
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s cubic-bezier(.4, 0, .2, 1)
        }

        .faq-a.on {
            max-height: 300px
        }

        .faq-a-text {
            font-family: var(--fb);
            font-size: .82rem;
            line-height: 1.9;
            color: var(--stone);
            padding-bottom: 18px
        }

        /* ═══ CONTACT — NEW LAYOUT ═══ */
        #contact {
            padding: 100px 0;
            background: var(--bg);
            position: relative
        }

        .contact-wrap {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 48px
        }

        .contact-top {
            text-align: center;
            margin-bottom: 56px
        }

        .c-label {
            font-family: var(--fm);
            font-size: .44rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            color: var(--sage);
            margin-bottom: 16px
        }

        .c-h {
            font-family: var(--fd);
            font-size: clamp(2.2rem, 3.5vw, 3.2rem);
            line-height: .95;
            color: var(--dark)
        }

        .c-h em {
            font-style: italic;
            color: var(--sage)
        }

        .c-sub {
            font-family: var(--fd);
            font-size: .92rem;
            line-height: 1.9;
            color: var(--stone);
            margin-top: 14px;
            max-width: 540px;
            margin-left: auto;
            margin-right: auto
        }

        .contact-body {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 60px;
            align-items: start
        }

        .c-form-card {
            background: #fff;
            border: 1px solid var(--line2);
            padding: 48px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .04)
        }

        .c-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 28px
        }

        .c-field {
            padding: 14px 0;
            border-bottom: 1px solid var(--line2)
        }

        .c-field.full {
            grid-column: 1 / -1
        }

        .c-field label {
            font-family: var(--fm);
            font-size: .38rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--stone);
            display: block;
            margin-bottom: 8px
        }

        .c-field:focus-within label {
            color: var(--sage)
        }

        .c-field input,
        .c-field select,
        .c-field textarea {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            font-family: var(--fd);
            font-size: .9rem;
            color: var(--dark)
        }

        .c-field input::placeholder,
        .c-field textarea::placeholder {
            color: var(--stone3)
        }

        .c-field input.er,
        .c-field textarea.er {
            color: var(--error)
        }

        .c-field.bad label {
            color: var(--error)
        }

        .c-err {
            font-size: .44rem;
            color: var(--error);
            margin-top: 4px;
            display: none
        }

        .c-field.bad .c-err {
            display: block
        }

        .c-field select option {
            background: var(--bg2)
        }

        .c-foot {
            grid-column: 1 / -1;
            display: flex;
            gap: 12px;
            padding-top: 28px
        }

        .c-info-col {
            display: flex;
            flex-direction: column;
            gap: 16px
        }

        .ci-card {
            background: var(--sage);
            color: #fff;
            padding: 28px;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            transition: transform .3s
        }

        .ci-card:hover {
            transform: translateX(4px)
        }

        .ci-card-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem
        }

        .ci-card-label {
            font-family: var(--fm);
            font-size: .36rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            opacity: .6;
            margin-bottom: 4px
        }

        .ci-card-val {
            font-family: var(--fd);
            font-size: .92rem
        }

        .ci-card-dark {
            background: var(--dark)
        }

        /* ═══ NEWSLETTER — NEW LAYOUT ═══ */
        #newsletter {
            background: var(--dark);
            padding: 80px 48px;
            color: #fff
        }

        .nl-inner {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 64px;
            align-items: center
        }

        .nl-left .nl-h {
            font-family: var(--fd);
            font-size: 2.4rem;
            color: #fff;
            margin-bottom: 10px
        }

        .nl-left .nl-h em {
            font-style: italic;
            color: var(--sage2)
        }

        .nl-left .nl-sub {
            font-family: var(--fb);
            font-size: .88rem;
            color: rgba(255, 255, 255, .5);
            line-height: 1.8
        }

        .nl-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 24px;
            border-bottom: 1px solid rgba(255, 255, 255, .1)
        }

        .nl-tab {
            font-family: var(--fm);
            font-size: .42rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .4);
            padding: 10px 20px;
            cursor: none;
            border: none;
            background: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            transition: all .3s
        }

        .nl-tab.on {
            color: #fff;
            border-bottom-color: var(--sage)
        }

        .nl-sec {
            display: none
        }

        .nl-sec.on {
            display: block
        }

        .nl-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px
        }

        .nl-field {
            display: flex;
            flex-direction: column;
            gap: 6px
        }

        .nl-field.full {
            grid-column: 1 / -1
        }

        .nl-field label {
            font-family: var(--fm);
            font-size: .36rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .4)
        }

        .nl-field input {
            width: 100%;
            padding: 12px 16px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .1);
            font-family: var(--fb);
            font-size: .85rem;
            color: #fff;
            outline: none;
            transition: border-color .3s
        }

        .nl-field input:focus {
            border-color: var(--sage)
        }

        .nl-field input::placeholder {
            color: rgba(255, 255, 255, .25)
        }

        .nl-chk {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-top: 14px
        }

        .nl-chk input {
            accent-color: var(--sage);
            cursor: none;
            margin-top: 2px
        }

        .nl-chk label {
            font-family: var(--fb);
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            cursor: none;
            line-height: 1.5
        }

        .nl-chk a {
            color: var(--sage2);
            text-decoration: underline
        }

        .nl-btn-row {
            margin-top: 20px
        }

        .nl-unfield {
            margin-bottom: 16px
        }

        .nl-unfield label {
            font-family: var(--fm);
            font-size: .36rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .4);
            display: block;
            margin-bottom: 6px
        }

        .nl-unfield input {
            width: 100%;
            padding: 12px 16px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .1);
            font-family: var(--fb);
            font-size: .85rem;
            color: #fff;
            outline: none;
            transition: border-color .3s
        }

        .nl-unfield input:focus {
            border-color: var(--sage)
        }

        .nl-unfield input::placeholder {
            color: rgba(255, 255, 255, .25)
        }

        /* ═══ FOOTER — NEW LAYOUT ═══ */
        #footer {
            background: var(--dark2);
            color: rgba(255, 255, 255, .4);
            padding: 0
        }

        .footer-main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 48px
        }

        .footer-top-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 48px;
            padding-bottom: 48px;
            border-bottom: 1px solid rgba(255, 255, 255, .06)
        }

        .ft-brand {
            max-width: 300px
        }

        .f-logo {
            font-family: var(--fd);
            font-size: 1.8rem;
            color: #fff;
            margin-bottom: 12px
        }

        .f-desc {
            font-size: .78rem;
            line-height: 1.8;
            margin-bottom: 20px
        }

        .f-soc {
            display: flex;
            gap: 8px
        }

        .f-soc-a {
            width: 34px;
            height: 34px;
            border: 1px solid rgba(255, 255, 255, .15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .65rem;
            color: #fff;
            transition: all .3s
        }

        .f-soc-a:hover {
            background: var(--sage);
            border-color: var(--sage)
        }

        .ft-links-row {
            display: flex;
            gap: 64px;
            align-items: flex-start
        }

        .ft-col {}

        .ftc-head {
            font-family: var(--fm);
            font-size: .38rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--sage2);
            margin-bottom: 16px
        }

        .ftc-links a {
            display: block;
            font-size: .78rem;
            margin-bottom: 8px;
            transition: color .25s
        }

        .ftc-links a:hover {
            color: #fff
        }

        .footer-mid {
            padding: 40px 0 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px 32px
        }

        .footer-mid-a {
            font-family: var(--fm);
            font-size: .38rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .3);
            transition: color .3s
        }

        .footer-mid-a:hover {
            color: var(--sage2)
        }

        .footer-bot {
            padding: 20px 48px;
            border-top: 1px solid rgba(255, 255, 255, .06);
            display: flex;
            justify-content: space-between;
            font-size: .38rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-family: var(--fm);
            max-width: 1200px;
            margin: 0 auto
        }

        /* ═══ MODALS ═══ */
        .overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 3000;
            background: rgba(0, 0, 0, .7);
            backdrop-filter: blur(8px);
            align-items: center;
            justify-content: center;
            padding: 32px
        }

        .overlay.on {
            display: flex
        }

        .modal-box {
            background: #fff;
            max-width: 600px;
            width: 100%;
            max-height: 85vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            animation: mIn .4s cubic-bezier(.4, 0, .2, 1)
        }

        @keyframes mIn {
            from {
                opacity: 0;
                transform: translateY(20px) scale(.98)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .modal-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 24px;
            border-bottom: 1px solid var(--line2)
        }

        .modal-title {
            font-family: var(--fm);
            font-size: .46rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--sage)
        }

        .modal-x {
            width: 30px;
            height: 30px;
            border: none;
            background: var(--bg2);
            cursor: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem;
            color: var(--stone);
            transition: all .25s
        }

        .modal-x:hover {
            background: var(--sage);
            color: #fff
        }

        .modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1
        }

        .mti {
            padding: 16px 0;
            border-bottom: 1px solid var(--line)
        }

        .mti:last-child {
            border-bottom: none
        }

        .mti-q {
            font-family: var(--fd);
            font-style: italic;
            font-size: .88rem;
            line-height: 1.8;
            color: var(--dark2);
            margin-bottom: 8px
        }

        .mti-name {
            font-family: var(--fb);
            font-size: .74rem;
            font-weight: 600;
            color: var(--dark)
        }

        .mti-role {
            font-family: var(--fm);
            font-size: .36rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--sage)
        }

        .ph {
            font-family: var(--fb);
            font-size: .74rem;
            font-weight: 600;
            color: var(--dark);
            margin: 14px 0 6px
        }

        .pp {
            font-family: var(--fb);
            font-size: .78rem;
            line-height: 1.9;
            color: var(--stone)
        }

        .mff {
            border-bottom: 1px solid var(--line);
            padding: 12px 0
        }

        .mff label {
            font-family: var(--fm);
            font-size: .38rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--stone);
            display: block;
            margin-bottom: 6px
        }

        .mff input,
        .mff textarea {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            font-family: var(--fb);
            font-size: .88rem;
            color: var(--dark)
        }

        .mff input::placeholder,
        .mff textarea::placeholder {
            color: var(--stone3)
        }

        .mff input.er {
            color: var(--error)
        }

        .mff.bad label {
            color: var(--error)
        }

        .mff-err {
            font-size: .44rem;
            color: var(--error);
            display: none;
            margin-top: 4px
        }

        .mff.bad .mff-err {
            display: block
        }

        .modal-foot {
            padding: 16px 24px;
            border-top: 1px solid var(--line);
            display: flex;
            gap: 10px;
            justify-content: flex-end
        }

        /* ═══ TOAST ═══ */
        .toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9999;
            background: var(--dark);
            color: #fff;
            border-left: 4px solid var(--sage);
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 22px;
            font-family: var(--fb);
            font-size: .76rem;
            font-weight: 500;
            box-shadow: 0 16px 48px rgba(0, 0, 0, .2);
            transform: translateX(130%);
            opacity: 0;
            transition: all .5s cubic-bezier(.4, 0, .2, 1);
            max-width: 340px;
            border-radius: 4px
        }

        .toast.on {
            transform: none;
            opacity: 1
        }

        .toast i {
            color: var(--sage2)
        }

        /* ═══ ANIMATIONS ═══ */
        .anim {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .7s ease, transform .7s ease
        }

        .anim.vis {
            opacity: 1;
            transform: none
        }

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

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

            .ham {
                display: flex
            }

            #hero {
                padding: 0 48px
            }

            .hero-deco-circle,
            .hero-deco-circle2,
            .hero-deco-vline,
            .hero-float-card {
                display: none
            }

            .about-inner {
                grid-template-columns: 1fr;
                gap: 48px
            }

            .about-text-col {
                order: 0
            }

            .about-img-col {
                order: 0
            }

            .about-img-badge {
                left: 16px;
                bottom: 16px
            }

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

            .bento-large {
                grid-column: span 2;
                grid-row: span 1
            }

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

            .faq-left {
                position: static;
                margin-bottom: 32px
            }

            .contact-body {
                grid-template-columns: 1fr
            }

            .c-info-col {
                flex-direction: row;
                flex-wrap: wrap
            }

            .ci-card {
                flex: 1;
                min-width: 200px
            }

            .nl-inner {
                grid-template-columns: 1fr;
                gap: 40px
            }

            .ft-links-row {
                gap: 32px
            }
        }

        @media(max-width:768px) {
            #hero {
                padding: 0 24px
            }

            .hero-deco-grid,
            .hero-deco-dot {
                display: none
            }

            .hero-h {
                font-size: clamp(2.8rem, 10vw, 4.5rem)
            }

            .hero-bottom-bar {
                gap: 0;
                justify-content: center;
            }

            .hbb-sep {
                display: none
            }

            .about-inner {
                padding: 0 24px
            }

            .about-stats-bar {
                padding: 0 24px
            }

            .about-stats {
                flex-direction: column
            }

            .a-stat {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, .08)
            }

            .a-stat:last-child {
                border-bottom: none
            }

            .bento-grid {
                grid-template-columns: 1fr;
                padding: 0 24px
            }

            .bento-large,
            .bento-wide {
                grid-column: span 1
            }

            #faq,
            #contact,
            #newsletter {
                padding: 60px 24px
            }

            .contact-wrap {
                padding: 0 24px
            }

            .c-form-card {
                padding: 28px
            }

            .c-form-grid {
                grid-template-columns: 1fr
            }

            .c-info-col {
                flex-direction: column
            }

            .nl-fields {
                grid-template-columns: 1fr
            }

            .footer-top-row {
                flex-direction: column;
                padding: 40px 24px 20px
            }

            .ft-links-row {
                flex-direction: column;
                gap: 24px
            }

            .footer-bot {
                flex-direction: column;
                gap: 8px;
                text-align: center;
                padding: 20px 24px
            }

            #footer {
                padding: 0
            }

            .footer-main {
                padding: 40px 0 0
            }
        }

        /* ═══ TYPOGRAPHY SIZE BOOST OVERRIDES ═══ */

/* Navigation & Buttons */
.nav-a, .nav-cta, .btn-s { 
    font-size: 0.9rem; 
}

/* Section Labels, Eyebrows & Small Stats */
.hero-eyebrow-text, .about-label, .bento-label, .faq-label, .c-label, 
.ftc-head, .hfc-label, .hbb-item, .a-stat-l, .b-stat-l, .ci-card-label, 
.footer-bot, .loader-sub, .loader-pct {
    font-size: 0.85rem;
}

/* Ticker */
.tk-item { font-size: 0.95rem; }
.tk-item i { font-size: 0.8rem; }

/* Paragraphs & Descriptions */
.hero-desc, .about-p, .b-text, .faq-a-text, .c-sub, 
.ci-card-val, .nl-sub, .f-desc, .pp, .b-quote-text {
    font-size: 1.15rem;
}

/* Specific Content Elements */
.about-feat span { font-size: 1.05rem; }
.about-feat i { font-size: 1.1rem; }
.b-tag { font-size: 0.85rem; }
.b-link { font-size: 0.9rem; }

/* Testimonials / Bento Authors */
.b-name { font-size: 1.1rem; }
.b-role { font-size: 0.85rem; }
.b-ava { font-size: 1.3rem; }

/* FAQ */
.faq-q-text { font-size: 1.25rem; }
.faq-q-icon { font-size: 0.8rem; }

/* Form Fields & Modals */
.c-field label, .nl-field label, .nl-unfield label, .mff label { font-size: 0.9rem; }
.c-field input, .c-field select, .c-field textarea, 
.nl-field input, .nl-unfield input, .mff input, .mff textarea { 
    font-size: 1.15rem; 
}
.c-err, .nl-ferr, .mff-err { font-size: 0.85rem; }
.nl-chk label { font-size: 1rem; }
.nl-tab { font-size: 0.95rem; }
.modal-title { font-size: 1rem; }
.mti-q { font-size: 1.15rem; }
.mti-name { font-size: 1.1rem; }
.mti-role { font-size: 0.85rem; }
.ph { font-size: 1.2rem; }

/* Footer Links */
.f-logo { font-size: 2.2rem; }
.ftc-links a { font-size: 1rem; }

/* Toast */
.toast { font-size: 1.05rem; }
.toast i { font-size: 1.2rem; }

/* Multi-page additions */
html { scroll-padding-top: 96px; }
body { cursor: auto; }
a, button, input, select, textarea, .ham, .mob-close, .nav-cta, .btn-s { cursor: pointer; }
#cur { display: none; }
#nav { height: 80px; }
.nav-inner { max-width: 1500px; margin: 0 auto; }
.nav-a[aria-current="page"] { color: var(--sage); }
.page-banner { min-height: 330px; padding: 145px 8vw 70px; background: var(--dark); color: var(--bg); display:flex; flex-direction:column; justify-content:center; }
.page-banner .page-kicker { color:var(--sage3); font-family:var(--fm); font-size:.56rem; letter-spacing:4px; text-transform:uppercase; margin-bottom:18px; }
.page-banner h1 { font-family:var(--fd); font-size:clamp(3rem,7vw,6rem); font-weight:400; line-height:.98; color:var(--bg); max-width:1000px; }
.page-banner p { max-width:700px; color:rgba(250,243,243,.7); font-family:var(--fd); line-height:1.8; margin-top:20px; }
.policy-page { padding:80px 8vw 110px; background:var(--bg); }
.policy-page-inner { max-width:950px; margin:0 auto; }
.policy-page .policy-updated { color:var(--stone); font-family:var(--fm); font-size:.65rem; letter-spacing:1px; margin-bottom:36px; }
.policy-page .ph { margin-top:28px; }
.policy-page .pp { max-width:900px; }
.utility-main { padding:80px 8vw 110px; }
.utility-card { width:min(100%,780px); margin:0 auto; padding:clamp(28px,5vw,64px); background:#fff; border:1px solid var(--line); }
.utility-card h2 { font:400 clamp(2rem,4vw,3.6rem)/1.05 var(--fd); margin-bottom:18px; }
.utility-card p { font-family:var(--fd); line-height:1.8; color:var(--stone); margin:0 0 24px; }
.utility-card label { display:block; font-family:var(--fm); font-size:.55rem; text-transform:uppercase; letter-spacing:2px; color:var(--stone); margin-bottom:10px; }
.utility-card input { width:100%; padding:14px 12px; border:0; border-bottom:1px solid var(--line2); background:transparent; outline:none; margin-bottom:22px; }
.utility-card input:focus { border-bottom-color:var(--sage); }
.utility-card .hint { font: .7rem/1.7 var(--fm); color:var(--stone); background:var(--bg2); padding:15px; margin-top:28px; }
#unsubscribeMailLink { display:none; margin-top:22px; }
#unsubscribeMailLink.ready { display:inline-flex; }
.policy-page .modal-body { max-height:none; overflow:visible; }
@media(max-width:900px) { .page-banner { padding:125px 7vw 58px; } .policy-page,.utility-main { padding-left:7vw;padding-right:7vw; } }
@media(max-width:600px) { .nav-inner { padding:0 22px; } .nav-logo { font-size:1.15rem; } .page-banner { min-height:290px; } }