/* Base Styles */
        * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--sans);
            background: var(--bg);
            color: var(--ink);
            overflow-x: hidden;
            font-weight: 400;
            line-height: var(--lh-base);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        .serif,
        .display-font {
            font-family: var(--serif);
            font-weight: 500;
            letter-spacing: -0.02em;
            line-height: var(--lh-heading);
        }

        a {
            text-decoration: none;
            transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
        }

        ::selection {
            background: var(--gold);
            color: #1a150e;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--sand);
        }

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

        /* Utilities & Typography Component Fixes */
        .text-gold {
            color: var(--gold-deep) !important;
        }

        .text-sage {
            color: var(--sage) !important;
        }

        .text-rose {
            color: var(--rose) !important;
        }

        .text-muted-2 {
            color: var(--muted) !important;
        }

        .bg-cream {
            background: var(--ivory) !important;
        }

        .bg-cream-2 {
            background: var(--sand) !important;
        }

        .bg-olive {
            background: var(--sage) !important;
        }

        .italic {
            font-style: italic;
        }

        .section {
            padding: clamp(var(--space-12), 8vw, var(--space-15)) 0;
            position: relative;
        }

        .section-sm {
            padding: clamp(var(--space-6), 5vw, var(--space-13)) 0;
        }

        .h-title,
        .section-title {
            font-family: var(--serif);
            font-size: clamp(2.2rem, 5vw, 3.8rem);
            line-height: var(--lh-tight);
            font-weight: 500;
            color: var(--ink);
        }

        .lead-muted {
            font-size: var(--fs-lg);
            color: var(--muted);
            line-height: var(--lh-relaxed);
        }

        .eyebrow {
            display: inline-block;
            font-size: var(--fs-sm);
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--sage);
            font-weight: 600;
            padding-bottom: var(--space-2);
            border-bottom: 1.5px solid var(--sage);
            margin-bottom: var(--space-6);
        }

        /* Preloader */
        #preloader {
            position: fixed;
            inset: 0;
            background: var(--ivory);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #preloader.done {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }

        .loader {
            width: 42px;
            height: 42px;
            border: 2px solid var(--line);
            border-top-color: var(--sage);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

                /* Buttons & Elements */
        .btn {
            font-weight: 600;
            letter-spacing: 0.01em;
            border-radius: 60px;
            padding: 0.85rem 1.7rem;
            transition: background-color 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
                color 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
        }

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

        .btn-primary:hover {
            background: var(--ink);
            border-color: var(--ink);
            transform: translateY(-2px);
            box-shadow: var(--shadow);
            color: #fff;
        }

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

        .btn-outline:hover {
            background: var(--ink);
            color: var(--ivory);
            border-color: var(--ink);
        }

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

        .btn-ghost:hover {
            background: var(--ink);
            color: var(--ivory);
        }

        .btn-olive {
            background: var(--sage);
            color: #fff;
            border: 1.5px solid var(--sage);
        }

        .btn-olive:hover {
            background: var(--olive-2);
            border-color: var(--olive-2);
            color: #fff;
            transform: translateY(-1px);
        }

        .btn-gold {
            background: var(--gold);
            color: #1d160b;
            border: 1px solid var(--gold);
        }

        .btn-gold:hover {
            background: var(--gold-deep);
            border-color: var(--gold-deep);
            color: #fff;
            transform: translateY(-3px);
        }