:root {
            --bg: #fafaf8;
            --bg2: #f3f2ee;
            --card: #ffffff;
            --ink: #0d0d0b;
            --ink2: #3a3a36;
            --muted: #8a8a82;
            --faint: #e8e7e2;
            --teal: #00a87a;
            --teal-light: #e6f5f0;
            --orange: #e85c1a;
            --orange-light: #fdf0e8;
            --b1: rgba(0, 0, 0, 0.07);
            --b2: rgba(0, 0, 0, 0.12);
            --g1: linear-gradient(135deg, #00a87a, #0055cc);
            --g2: linear-gradient(135deg, #e85c1a, #cc2266);
        }

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

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: 'Bricolage Grotesque', sans-serif;
            background: var(--bg);
            color: var(--ink);
            overflow-x: hidden;
            cursor: none
        }

        /* CURSOR */
        #cur {
            position: fixed;
            width: 10px;
            height: 10px;
            background: var(--teal);
            border-radius: 50%;
            z-index: 9999;
            pointer-events: none;
            top: 0;
            left: 0;
            transition: transform .1s
        }

        #ring {
            position: fixed;
            width: 34px;
            height: 34px;
            border: 1.5px solid rgba(0, 168, 122, .35);
            border-radius: 50%;
            z-index: 9998;
            pointer-events: none;
            top: 0;
            left: 0
        }

        /* HIDE CUSTOM CURSOR ON MOBILE / TOUCH DEVICES */
        @media (hover: none), (pointer: coarse) {
            body { cursor: auto !important; }
            #cur, #ring { display: none !important; }
        }

        /* NAV */
        nav {
            position: fixed;
            inset: 0 0 auto;
            z-index: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.1rem 5rem;
            background: rgba(250, 250, 248, .92);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--b1);
        }

        .logo {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.3rem;
            color: var(--ink);
            cursor: pointer;
            text-decoration: none;
            letter-spacing: -.02em;
        }

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

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

        .nav-links a {
            font-size: .78rem;
            font-weight: 500;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--muted);
            text-decoration: none;
            cursor: pointer;
            transition: color .2s;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--ink)
        }

        .nav-cta {
            background: var(--ink) !important;
            color: #fff !important;
            padding: .5rem 1.3rem;
            border-radius: 100px;
            transition: background .2s !important;
        }

        .nav-cta:hover {
            background: var(--teal) !important
        }

        .page {
            display: none
        }

        .page.active {
            display: block
        }

        /* ANIMATIONS */


        @keyframes float {

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

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

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

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

        @keyframes shimmer {
            0% {
                background-position: 0% 50%
            }

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

        @keyframes scan {
            from {
                top: -5%
            }

            to {
                top: 105%
            }
        }

        /* SCROLL REVEAL - disabled */
        /* SCROLL REVEAL - disabled */
        .sr, .sr-l, .sr-r {
            transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
        }
        /* Only hide when JS has confirmed it's running */
        
        
        
        /* Revealed state */
        .sr.in, .sr-l.in, .sr-r.in {
            opacity: 1 !important;
            transform: none !important;
        }

        /* ═══ HERO ═══ */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 9rem 5rem 5rem;
            position: relative;
            overflow: hidden;
            background: var(--bg);
        }

        .hero-noise {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .018;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            background-size: 200px 200px;
        }

        .hero-circle {
            position: absolute;
            top: -18%;
            right: -12%;
            width: 680px;
            height: 680px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 168, 122, .06) 0%, transparent 70%);
            animation: float 10s ease-in-out infinite;
            pointer-events: none;
        }

        .hero-circle2 {
            position: absolute;
            bottom: -22%;
            left: -8%;
            width: 550px;
            height: 550px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(232, 92, 26, .05) 0%, transparent 70%);
            animation: float 13s ease-in-out infinite reverse;
            pointer-events: none;
        }

        /* hero inner layout */
        .hero-inner {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .hero-right {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            align-items: flex-end;
            min-width: 220px;
        }

        .hero-stat-box {
            background: #fff;
            border: 1.5px solid var(--faint);
            border-radius: 14px;
            padding: 1.5rem 1.8rem;
            text-align: center;
            width: 180px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
;
        }

        .hero-stat-box .hsn {
            font-family: 'Fraunces', serif;
            font-weight: 900;
            font-size: 2.2rem;
            color: var(--ink);
            letter-spacing: -.04em;
            line-height: 1;
        }

        .hero-stat-box .hsn span {
            color: var(--teal)
        }

        .hero-stat-box .hsl {
            font-size: .65rem;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--muted);
            margin-top: .35rem
        }

        .hero-badge {
            background: var(--ink);
            color: #fff;
            border-radius: 12px;
            padding: 1.2rem 1.5rem;
            width: 180px;
            text-align: center;

        }

        .hero-badge p {
            font-size: .72rem;
            font-weight: 500;
            letter-spacing: .04em;
            line-height: 1.6;
            color: rgba(255, 255, 255, .65)
        }

        .hero-badge strong {
            font-family: 'Fraunces', serif;
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            display: block;
            margin-bottom: .3rem
        }

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

            .hero-right {
                display: none
            }
        }

        /* EYEBROW TAG */
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            font-size: .68rem;
            font-weight: 500;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--teal);
            border: 1.5px solid rgba(0, 168, 122, .25);
            background: var(--teal-light);
            padding: .42rem 1rem;
            border-radius: 100px;
            width: fit-content;
            margin-bottom: 2rem;

        }

        .eyebrow-dot {
            width: 5px;
            height: 5px;
            background: var(--teal);
            border-radius: 50%
        }

        /* HERO HEADING — Fraunces serif display */
        .hero-h1 {
            font-family: 'Fraunces', serif;
            font-weight: 900;
            font-size: clamp(3.8rem, 8vw, 9rem);
            line-height: 1.0;
            letter-spacing: -.03em;
            margin-bottom: 1.6rem;

        }

        .hero-h1 .l1 {
            display: block;
            color: var(--ink);
            font-weight: 900;
        }

        .hero-h1 .l2 {
            display: block;
            font-style: italic;
            font-weight: 300;
            color: var(--teal);
            font-size: .95em;
        }

        .hero-h1 .l3 {
            display: block;
            font-weight: 900;
            color: var(--ink);
            opacity: .18;
            font-size: .9em;
        }

        /* HERO SUBTEXT */
        .hero-lead {
            font-size: 1.1rem;
            font-weight: 300;
            line-height: 1.75;
            color: var(--ink2);
            max-width: 480px;
            margin-bottom: 2.5rem;

        }

        .hero-lead strong {
            font-weight: 600;
            color: var(--ink)
        }

        .hero-btns {
            display: flex;
            gap: .9rem;
            flex-wrap: wrap;

        }

        /* HERO FOOTNOTE */
        .hero-note {
            margin-top: 3.5rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;

        }

        .hero-note-line {
            width: 36px;
            height: 1px;
            background: var(--faint)
        }

        .hero-note p {
            font-size: .72rem;
            font-weight: 400;
            letter-spacing: .04em;
            color: var(--muted)
        }

        /* BUTTONS */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-family: 'Bricolage Grotesque', sans-serif;
            font-size: .82rem;
            font-weight: 600;
            letter-spacing: .02em;
            padding: .85rem 1.9rem;
            border-radius: 100px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: transform .2s, box-shadow .2s, background .2s, color .2s;
        }

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

        .btn-dark {
            background: var(--ink);
            color: #fff
        }

        .btn-dark:hover {
            box-shadow: 0 8px 28px rgba(13, 13, 11, .2);
            background: var(--teal)
        }

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

        .btn-outline:hover {
            border-color: var(--ink);
            box-shadow: 0 4px 16px rgba(0, 0, 0, .08)
        }

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

        .btn-teal:hover {
            box-shadow: 0 8px 28px rgba(0, 168, 122, .3)
        }

        /* TICKER */
        .ticker {
            background: var(--ink);
            padding: .8rem 0;
            overflow: hidden;
            white-space: nowrap;
        }

        .ticker-track {
            display: inline-flex;
            animation: ticker 30s linear infinite
        }

        .t-item {
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            padding: 0 2.2rem;
            font-size: .65rem;
            font-weight: 500;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .45);
        }

        .t-dot {
            color: var(--teal);
            opacity: 1
        }

        /* STATS */
        .stats-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-top: 1px solid var(--b1);
            border-bottom: 1px solid var(--b1);
            background: var(--bg2);
        }

        .stat {
            padding: 3rem 2rem;
            text-align: center;
            border-right: 1px solid var(--b1);
            position: relative;
            overflow: hidden;
            transition: background .3s;
        }

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

        .stat::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--teal);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .4s
        }

        .stat:hover::after {
            transform: scaleX(1)
        }

        .stat:hover {
            background: #fff
        }

        .stat-n {
            font-family: 'Fraunces', serif;
            font-weight: 900;
            font-size: 3.2rem;
            color: var(--ink);
            letter-spacing: -.04em;
            line-height: 1;
        }

        .stat-n span {
            color: var(--teal)
        }

        .stat-l {
            font-size: .7rem;
            font-weight: 500;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--muted);
            margin-top: .5rem
        }

        /* SECTIONS */
        section {
            padding: 7rem 5rem
        }

        .section-bg {
            background: var(--bg2)
        }

        /* SECTION LABEL */
        .slabel {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-size: .65rem;
            font-weight: 600;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--teal);
            margin-bottom: 1.2rem;
        }

        .slabel::before {
            content: '';
            width: 16px;
            height: 1.5px;
            background: var(--teal);
            border-radius: 2px
        }

        /* SECTION HEADING — Fraunces */
        .sh {
            font-family: 'Fraunces', serif;
            font-weight: 900;
            font-size: clamp(2.8rem, 5vw, 5rem);
            line-height: .95;
            letter-spacing: -.035em;
            margin-bottom: 1.2rem;
        }

        .sh em {
            font-style: italic;
            font-weight: 300;
            color: var(--teal)
        }

        .sh .strike {
            position: relative;
            color: var(--muted);
        }

        .sh .strike::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 52%;
            height: 2px;
            background: var(--orange);
        }

        /* SECTION BODY — refined */
        .sbody {
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.8;
            color: var(--ink2);
            max-width: 480px;
            margin-bottom: 3rem;
        }

        .sbody strong {
            font-weight: 600;
            color: var(--ink)
        }

        /* PILL */
        .pill {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            font-size: .68rem;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            padding: .3rem .85rem;
            border-radius: 100px;
        }

        .pill-green {
            background: var(--teal-light);
            color: var(--teal)
        }

        .pill-orange {
            background: var(--orange-light);
            color: var(--orange)
        }

        /* ═══ SERVICE CARDS ═══ */
        .svc-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            background: var(--b1);
            border: 1px solid var(--b1);
            border-radius: 18px;
            overflow: hidden
        }

        .svc-card {
            background: #fff;
            padding: 2.8rem 2.4rem 3.5rem;
            position: relative;
            transition: background .25s;
            overflow: hidden;
        }

        .svc-card:hover {
            background: var(--bg2)
        }

        .svc-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--teal), #0055cc);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s;
        }

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

        .svc-card-n {
            font-family: 'Fraunces', serif;
            font-size: 4rem;
            font-weight: 900;
            color: var(--faint);
            line-height: 1;
            margin-bottom: 1.2rem;
            letter-spacing: -.04em;
        }

        .svc-ico {
            font-size: 1.6rem;
            margin-bottom: .8rem;
            display: block
        }

        .svc-card h3 {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.15rem;
            letter-spacing: -.02em;
            margin-bottom: .7rem;
            line-height: 1.2;
        }

        .svc-card p {
            font-size: .84rem;
            color: var(--ink2);
            line-height: 1.72;
            font-weight: 300
        }

        /* ═══ NICHES ═══ */
        .niche-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-top: 3rem
        }

        .niche-card {
            background: #fff;
            border: 1.5px solid var(--faint);
            border-radius: 14px;
            padding: 1.8rem 1.5rem;
            transition: border-color .25s, transform .25s, box-shadow .25s;
        }

        .niche-card:hover {
            border-color: var(--teal);
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, .08)
        }

        .n-ico {
            font-size: 1.7rem;
            margin-bottom: .8rem;
            display: block
        }

        .niche-card h4 {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: .95rem;
            letter-spacing: -.01em;
            margin-bottom: .35rem
        }

        .niche-card p {
            font-size: .77rem;
            color: var(--muted);
            line-height: 1.55;
            font-weight: 400
        }

        /* ═══ PROCESS ═══ */
        .steps-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            margin-top: 3.5rem;
            position: relative
        }

        .steps-grid::before {
            content: '';
            position: absolute;
            top: 1.5rem;
            left: 12%;
            right: 12%;
            height: 1px;
            background: repeating-linear-gradient(90deg, var(--teal) 0, var(--teal) 6px, transparent 6px, transparent 14px);
            opacity: .3
        }

        .step {
            position: relative
        }

        .step-circle {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: 1.5px solid var(--b2);
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Fraunces', serif;
            font-weight: 900;
            font-size: 1rem;
            color: var(--teal);
            margin-bottom: 1.4rem;
            transition: all .3s;
            position: relative;
            z-index: 1;
        }

        .step:hover .step-circle {
            background: var(--teal);
            color: #fff;
            border-color: var(--teal);
            box-shadow: 0 6px 24px rgba(0, 168, 122, .25)
        }

        .step h4 {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: .95rem;
            letter-spacing: -.01em;
            margin-bottom: .5rem
        }

        .step p {
            font-size: .81rem;
            color: var(--muted);
            line-height: 1.65;
            font-weight: 400
        }

        /* ═══ TESTIMONIALS ═══ */
        .testi-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.4rem;
            margin-top: 3rem
        }

        .testi-card {
            background: #fff;
            border: 1.5px solid var(--faint);
            border-radius: 16px;
            padding: 2.2rem;
            transition: border-color .25s, transform .25s, box-shadow .25s;
        }

        .testi-card:hover {
            border-color: var(--teal);
            transform: translateY(-4px);
            box-shadow: 0 10px 36px rgba(0, 0, 0, .07)
        }

        .testi-q {
            font-family: 'Fraunces', serif;
            font-size: 3.5rem;
            font-weight: 900;
            color: var(--teal);
            opacity: .2;
            line-height: 1;
            margin-bottom: .4rem;
        }

        .stars {
            color: var(--orange);
            font-size: .78rem;
            letter-spacing: .06em;
            margin-bottom: .9rem
        }

        .testi-card blockquote {
            font-family: 'Fraunces', serif;
            font-style: italic;
            font-weight: 300;
            font-size: .97rem;
            line-height: 1.72;
            color: var(--ink2);
            margin-bottom: 1.5rem;
        }

        .testi-author {
            display: flex;
            align-items: center;
            gap: .75rem
        }
        

        .ava {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--teal-light);
            border: 1.5px solid rgba(0, 168, 122, .25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Fraunces', serif;
            font-size: .78rem;
            font-weight: 700;
            color: var(--teal);
            flex-shrink: 0;
        }

        .ava-name {
            font-size: .83rem;
            font-weight: 600;
            letter-spacing: -.01em
        }

        .ava-role {
            font-size: .71rem;
            color: var(--muted)
        }

        /* ═══ CTA BAND ═══ */
        .cta-band {
            padding: 8rem 5rem;
            text-align: center;
            background: var(--ink);
            position: relative;
            overflow: hidden;
        }

        .cta-band::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 25% 50%, rgba(0, 168, 122, .12) 0%, transparent 55%),
                radial-gradient(ellipse at 75% 50%, rgba(0, 85, 204, .1) 0%, transparent 55%);
        }

        .cta-band>* {
            position: relative
        }

        .cta-band .sh {
            color: #fff
        }

        .cta-band .sh em {
            color: var(--teal)
        }

        .cta-band .sbody {
            color: rgba(255, 255, 255, .55);
            max-width: 400px;
            margin: 0 auto 2.5rem
        }

        /* ═══ ABOUT ═══ */
        .page-hero {
            padding: 10rem 5rem 5rem;
            position: relative;
            overflow: hidden
        }

        .page-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px);
            background-size: 22px 22px;
            pointer-events: none;
            opacity: .4
        }

        .about-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6rem;
            align-items: start;
            position: relative;
            z-index: 1
        }

        .about-body p {
            font-size: .92rem;
            color: var(--ink2);
            line-height: 1.8;
            margin-bottom: 1rem;
            font-weight: 300
        }

        .about-body p strong {
            font-weight: 600;
            color: var(--ink)
        }

        .about-nums {
            background: var(--ink);
            border-radius: 20px;
            padding: 2.8rem;
            overflow: hidden;
            position: relative
        }

        .about-nums::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--teal), #0055cc)
        }

        .an-row {
            display: flex;
            align-items: center;
            gap: 1.8rem;
            padding: 1.4rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, .07)
        }

        .an-row:last-child {
            border-bottom: none;
            padding-bottom: 0
        }

        .an-row:first-child {
            padding-top: 0
        }

        .an-n {
            font-family: 'Fraunces', serif;
            font-weight: 900;
            font-size: 2.8rem;
            color: var(--teal);
            min-width: 90px;
            line-height: 1;
            letter-spacing: -.04em
        }

        .an-d {
            font-size: .81rem;
            color: rgba(255, 255, 255, .5);
            line-height: 1.6
        }

        /* ═══ CLIENTS ═══ */
        .clients-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.3rem;
            margin-top: 3rem
        }

        .client-card {
            background: #fff;
            border: 1.5px solid var(--faint);
            border-radius: 14px;
            padding: 2rem;
            transition: border-color .25s, transform .25s, box-shadow .25s;
            position: relative;
            overflow: hidden;
        }

        .client-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2.5px;
            background: linear-gradient(90deg, var(--teal), #0055cc);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .4s
        }

        .client-card:hover {
            border-color: rgba(0, 168, 122, .25);
            transform: translateY(-4px);
            box-shadow: 0 10px 36px rgba(0, 0, 0, .08)
        }

        .client-card:hover::after {
            transform: scaleX(1)
        }

        .cbadge {
            display: inline-block;
            font-size: .62rem;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: .22rem .75rem;
            border-radius: 100px;
            background: var(--teal-light);
            color: var(--teal);
            margin-bottom: .9rem
        }

        .client-card h4 {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: -.01em;
            margin-bottom: .45rem
        }

        .client-card p {
            font-size: .8rem;
            color: var(--muted);
            line-height: 1.65;
            font-weight: 400
        }

        .rpill {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            margin-top: .85rem;
            background: var(--orange-light);
            border-radius: 100px;
            padding: .28rem .85rem;
            font-size: .68rem;
            font-weight: 600;
            color: var(--orange)
        }

        /* ═══ VALUES ═══ */
        .values-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2.5rem;
            margin-top: 3rem
        }

        .val {
            display: flex;
            gap: 1.4rem;
            padding: 2rem;
            background: #fff;
            border: 1.5px solid var(--faint);
            border-radius: 14px;
            transition: border-color .25s, box-shadow .25s
        }

        .val:hover {
            border-color: rgba(0, 168, 122, .25);
            box-shadow: 0 8px 28px rgba(0, 0, 0, .06)
        }

        .val-ico {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            flex-shrink: 0;
            background: var(--teal-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem
        }

        .val h4 {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: .95rem;
            letter-spacing: -.01em;
            margin-bottom: .35rem
        }

        .val p {
            font-size: .8rem;
            color: var(--muted);
            line-height: 1.6
        }

        /* ═══ CONTACT ═══ */
        .contact-hero {
            padding: 10rem 5rem 5rem;
            position: relative;
            overflow: hidden
        }

        .contact-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px);
            background-size: 22px 22px;
            pointer-events: none;
            opacity: .4
        }

        .contact-split {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 5rem;
            align-items: start;
            margin-top: 3rem;
            position: relative;
            z-index: 1
        }

        .ci-head {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.2rem;
            letter-spacing: -.02em;
            margin-bottom: .5rem;
            margin-top: 2rem;
            color: var(--ink)
        }

        .ci-head:first-child {
            margin-top: 0
        }

        .ci p {
            font-size: .88rem;
            color: var(--muted);
            line-height: 1.75
        }

        .cdet {
            display: flex;
            align-items: center;
            gap: .75rem;
            margin-top: .85rem;
            font-size: .86rem;
            color: var(--ink2)
        }

        .cdet-i {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--teal-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .85rem;
            flex-shrink: 0
        }

        .cf {
            background: #fff;
            border: 1.5px solid var(--faint);
            border-radius: 20px;
            padding: 2.8rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 40px rgba(0, 0, 0, .06)
        }

        .cf::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--teal), #0055cc)
        }

        .cf-head {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.4rem;
            letter-spacing: -.02em;
            margin-bottom: 1.6rem
        }

        .f-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .9rem;
            margin-bottom: .9rem
        }

        .fg {
            display: flex;
            flex-direction: column;
            margin-bottom: .9rem
        }

        .fg label {
            font-size: .63rem;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .1em;
            margin-bottom: .4rem
        }

        .fg input,
        .fg textarea,
        .fg select {
            background: var(--bg2);
            border: 1.5px solid var(--faint);
            border-radius: 8px;
            padding: .75rem .95rem;
            color: var(--ink);
            font-family: 'Bricolage Grotesque', sans-serif;
            font-size: .87rem;
            font-weight: 400;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
            appearance: none;
        }

        .fg input::placeholder,
        .fg textarea::placeholder {
            color: var(--muted)
        }

        .fg input:focus,
        .fg textarea:focus,
        .fg select:focus {
            border-color: rgba(0, 168, 122, .5);
            box-shadow: 0 0 0 3px rgba(0, 168, 122, .08);
            background: #fff
        }

        .fg textarea {
            resize: vertical;
            min-height: 110px
        }

        .fg select option {
            background: #fff
        }

        /* ═══ SERVICES DETAIL ═══ */
        .sdgrid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-top: 3rem
        }

        .sdcard {
            background: #fff;
            border: 1.5px solid var(--faint);
            border-radius: 16px;
            padding: 2.5rem;
            transition: border-color .25s, transform .25s, box-shadow .25s
        }

        .sdcard:hover {
            border-color: rgba(0, 168, 122, .25);
            transform: translateY(-4px);
            box-shadow: 0 10px 36px rgba(0, 0, 0, .07)
        }

        .sd-ico {
            font-size: 1.8rem;
            margin-bottom: 1.2rem;
            display: block
        }

        .sdcard h3 {
            font-family: 'Fraunces', serif;
            font-weight: 700;
            font-size: 1.15rem;
            letter-spacing: -.02em;
            margin-bottom: .7rem
        }

        .sdcard>p {
            font-size: .85rem;
            color: var(--muted);
            line-height: 1.72;
            margin-bottom: 1.4rem;
            font-weight: 300
        }

        .flist {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .5rem
        }

        .flist li {
            font-size: .8rem;
            color: var(--ink2);
            display: flex;
            align-items: flex-start;
            gap: .55rem
        }

        .flist li::before {
            content: '↗';
            color: var(--teal);
            flex-shrink: 0;
            font-size: .75rem
        }

        /* ═══ PRICING ═══ */
        .pgrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.3rem;
            margin-top: 3rem
        }

        .pcard {
            background: #fff;
            border: 1.5px solid var(--faint);
            border-radius: 16px;
            padding: 2.4rem;
            position: relative;
            transition: border-color .25s, transform .25s, box-shadow .25s
        }

        .pcard:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, .09)
        }

        .pcard.feat {
            border-color: var(--teal);
            box-shadow: 0 4px 30px rgba(0, 168, 122, .12)
        }

        .pcard.feat:hover {
            box-shadow: 0 14px 44px rgba(0, 168, 122, .2)
        }

        .pbadge {
            position: absolute;
            top: -13px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--teal);
            color: #fff;
            font-size: .63rem;
            font-weight: 700;
            padding: .26rem 1rem;
            border-radius: 100px;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: .08em
        }

        .pplan {
            font-size: .65rem;
            font-weight: 600;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: .5rem
        }

        .pprice {
            font-family: 'Fraunces', serif;
            font-weight: 900;
            font-size: 3rem;
            letter-spacing: -.04em;
            color: var(--ink);
            margin-bottom: .3rem;
            line-height: 1
        }

        .pprice span {
            font-family: 'Bricolage Grotesque', sans-serif;
            font-size: 1rem;
            font-weight: 400;
            color: var(--muted)
        }

        .pdesc {
            font-size: .8rem;
            color: var(--muted);
            margin-bottom: 1.8rem;
            padding-bottom: 1.4rem;
            border-bottom: 1px solid var(--faint)
        }

        .pfeats {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .7rem;
            margin-bottom: 1.8rem
        }

        .pfeats li {
            font-size: .83rem;
            color: var(--ink2);
            display: flex;
            align-items: center;
            gap: .55rem
        }

        .pfeats li::before {
            content: '✓';
            color: var(--teal);
            font-weight: 700;
            flex-shrink: 0
        }

        /* ═══ FOOTER ═══ */
        footer {
            background: var(--ink);
            padding: 4.5rem 5rem 2.5rem
        }

        .fgrid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 3rem;
            margin-bottom: 3rem
        }

        .fbrand .logo {
            color: #fff
        }

        .fbrand .logo em {
            color: var(--teal)
        }

        .fbrand p {
            font-size: .81rem;
            color: rgba(255, 255, 255, .4);
            line-height: 1.75;
            margin-top: .9rem;
            max-width: 240px
        }

        .fcol h5 {
            font-size: .65rem;
            font-weight: 600;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .4);
            margin-bottom: 1.2rem
        }

        .fcol ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .55rem
        }

        .fcol ul li,
        .fcol ul li a {
            font-size: .8rem;
            color: rgba(255, 255, 255, .4);
            text-decoration: none;
            cursor: pointer;
            transition: color .2s
        }

        .fcol ul li a:hover {
            color: var(--teal)
        }

        .fbot {
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding-top: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .fbot p {
            font-size: .74rem;
            color: rgba(255, 255, 255, .3)
        }

        @media(max-width:768px) {
            nav {
                padding: 1rem 1.5rem
            }

            .nav-links {
                display: none
            }

            .hero,
            .page-hero,
            .contact-hero {
                padding: 7rem 1.5rem 3.5rem
            }

            section {
                padding: 4.5rem 1.5rem
            }

            .hero-h1 {
                font-size: 4rem
            }

            .sh {
                font-size: 2.8rem
            }

            .stats-row,
            .svc-grid,
            .niche-grid,
            .steps-grid,
            .testi-grid,
            .clients-grid,
            .sdgrid,
            .pgrid,
            .about-split,
            .contact-split,
            .fgrid,
            .values-grid,
            .f-row {
                grid-template-columns: 1fr
            }

            .steps-grid::before {
                display: none
            }
        }
/* ══════════════════════════════════════
   PRICING — 4-Column Plan Grid
══════════════════════════════════════ */

/* 4-col grid */
.pgrid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
  align-items: start;
}

/* Plan card overrides for workflow cards */
.pcard {
  display: flex;
  flex-direction: column;
}

/* Plan header labels */
.plan-name {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
  margin-bottom: .3rem;
  line-height: 1;
}

.plan-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--faint);
}

/* Week blocks */
.pw-week {
  margin-bottom: 1.1rem;
}

.pw-label {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--teal-light);
  color: var(--teal);
  padding: .2rem .65rem;
  border-radius: 100px;
  margin-bottom: .5rem;
}

.pw-week .pfeats {
  margin-top: .35rem;
}

.pw-week .pfeats li {
  font-size: .76rem;
  color: var(--ink2);
  padding: .15rem 0;
}

/* Bulk notice bar */
.bulk-notice {
  margin-top: 2rem;
  padding: 1.3rem 1.8rem;
  background: var(--orange-light);
  border: 1.5px solid rgba(232, 92, 26, .2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bulk-notice-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--orange);
  margin-bottom: .2rem;
}

.bulk-notice-body {
  font-size: .8rem;
  color: var(--ink2);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1100px) {
  .pgrid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .pgrid-4 { grid-template-columns: 1fr; }
}


/* ── FORCE VISIBLE OVERRIDE ── */
.hero-inner, .hero-left, .hero-right,
.hero-h1, .hero-lead, .hero-btns, .hero-note,
.eyebrow, .hero-stat-box, .hero-badge,
.stat, .sh, .sbody, .svc-grid, .svc-card,
.niche-card, .step, .testi-card,
.cta-band, .about-split, .clients-grid,
.values-grid, .contact-split, .sdcard,
.pgrid, .pcard, .about-nums, .page-hero {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}