:root {
      --bs-body-font-family: 'DM Sans', sans-serif;
      --bs-body-bg: #0a0a0a;
      --bs-body-color: #e8e0d0;
      --accent: #c8b560;
      --accent-dim: #8a7a3a;
      --surface: #111108;
      --surface-2: #181810;
      --border-col: rgba(200,181,96,.18);
    }
    body { background: #0a0a0a; color: #e8e0d0; font-family: 'DM Sans', sans-serif; overflow-x: hidden; }

    /* ── Utility ── */
    .font-display { font-family: 'Playfair Display', serif; }
    .text-accent   { color: var(--accent) !important; }
    .bg-surface    { background: var(--surface) !important; }
    .bg-surface-2  { background: var(--surface-2) !important; }
    .border-accent { border-color: var(--border-col) !important; }

    /* ── Scroll-reveal ── */
    .reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
    .reveal-left.visible { opacity: 1; transform: translateX(0); }
    .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease; }
    .reveal-right.visible { opacity: 1; transform: translateX(0); }

    /* ── Stagger delays ── */
    .delay-1 { transition-delay: .1s !important; }
    .delay-2 { transition-delay: .2s !important; }
    .delay-3 { transition-delay: .3s !important; }
    .delay-4 { transition-delay: .4s !important; }
    .delay-5 { transition-delay: .5s !important; }

    /* ── Navbar ── */
    .navbar { background: rgba(10,10,10,.92) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-col); }
    .navbar-brand .brand-b { color: var(--accent); font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 900; letter-spacing: -1px; }
    .navbar-brand .brand-rest { color: #e8e0d0; font-size: .85rem; font-weight: 500; letter-spacing: 3px; vertical-align: middle; }
    .nav-link {text-transform: uppercase; color: #c8c0aa !important; letter-spacing: .5px; font-size: .88rem; font-weight: 500; position: relative; padding-bottom: 4px !important; }
    .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--accent); transition: width .3s; }
    .nav-link:hover::after, .nav-link.active::after { width: 100%; }
    .nav-link:hover { color: var(--accent) !important; }
    .btn-nav-cta { background: var(--accent); color: #0a0a0a; border-radius: 2px; font-weight: 600; font-size: .82rem; letter-spacing: 1px; padding: 8px 20px; transition: background .25s, transform .2s; }
    .btn-nav-cta:hover { background: #e0ca70; transform: translateY(-1px); }

    /* ── Hero ── */
    .hero-section { min-height: 100vh; background: radial-gradient(ellipse 70% 60% at 60% 40%, rgba(200,181,96,.08) 0%, transparent 70%), linear-gradient(160deg, #0a0a0a 60%, #111108 100%); position: relative; overflow: hidden; }
    .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(200,181,96,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(200,181,96,.04) 1px, transparent 1px); background-size: 60px 60px; }
    .hero-tagline { font-size: clamp(.7rem,.9vw,.85rem); letter-spacing: 4px; color: var(--accent); font-weight: 600; text-transform: uppercase; }
    .hero-title { font-family: 'Playfair Display', serif; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 1.08; font-weight: 900; }
    .hero-title .line-gold { color: var(--accent); }
    .hero-sub { font-size: clamp(.95rem,1.1vw,1.1rem); color: #a09880; max-width: 480px; line-height: 1.8; }
    .hero-badge { background: rgba(200,181,96,.1); border: 1px solid var(--border-col); border-radius: 40px; padding: 6px 18px; font-size: .78rem; color: var(--accent); letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; }
    .btn-primary-gold { background: var(--accent); color: #0a0a0a; border: none; border-radius: 3px; font-weight: 700; letter-spacing: 1.2px; padding: 14px 36px; font-size: .88rem; text-transform: uppercase; transition: background .25s, transform .2s, box-shadow .25s; }
    .btn-primary-gold:hover { background: #dac96a; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(200,181,96,.3); color: #0a0a0a; }
    .btn-outline-gold { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 3px; font-weight: 600; letter-spacing: 1px; padding: 13px 30px; font-size: .88rem; text-transform: uppercase; transition: background .25s, color .25s, transform .2s; }
    .btn-outline-gold:hover { background: var(--accent); color: #0a0a0a; transform: translateY(-2px); }
    .hero-stat-card { transition: border-color .3s, transform .3s, box-shadow .3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;border: 1px solid var(--border-col); background: rgba(17,17,8,.8); border-radius: 6px; padding: 20px 28px; backdrop-filter: blur(8px); }
    .hero-stat-card:hover { border-color: rgba(200, 181, 96, .4);
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }

.hero-stat-card:hover::after {
    width: 100%;
}
.hero-stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width .4s;
}



    .hero-stat-num { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--accent); line-height: 1; }
    .hero-stat-lbl { font-size: .75rem; letter-spacing: 1.5px; color: #7a7060; text-transform: uppercase; margin-top: 4px; }
    .scroll-cue { animation: bounce 2s infinite; }
    @keyframes bounce { 0%,100%{transform:translateY(0)}50%{transform:translateY(8px)} }
    /* Floating circles */
    .hero-circle { position: absolute; border-radius: 50%; border: 1px solid rgba(200,181,96,.1); animation: floatCircle 8s ease-in-out infinite; }
    .hero-circle-1 { width: 400px; height: 400px; top: -80px; right: -100px; animation-delay: 0s; }
    .hero-circle-2 { width: 220px; height: 220px; bottom: 120px; right: 60px; animation-delay: -3s; }
    .hero-circle-3 { width: 100px; height: 100px; top: 200px; right: 300px; animation-delay: -5s; }
    @keyframes floatCircle { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.03)} }

    /* ── Section headings ── */
    .section-eyebrow { font-size: .75rem; letter-spacing: 4px; color: var(--accent); font-weight: 600; text-transform: uppercase; }
    .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700; }

    /* ── Why Different ── */
    .diff-card { border: 1px solid var(--border-col); border-radius: 8px; padding: 32px 28px; background: var(--surface); transition: border-color .3s, transform .3s, box-shadow .3s; position: relative; overflow: hidden; }
    .diff-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(200,181,96,.06), transparent); opacity: 0; transition: opacity .3s; }
    .diff-card:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
    .diff-card:hover::before { opacity: 1; }
    .diff-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(200,181,96,.12); border: 1px solid var(--border-col); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--accent); margin-bottom: 16px; }
    .diff-title { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 600; color: var(--accent); margin-bottom: 10px; }

    /* ── Services ── */
    .service-card { padding: 9px 30px 30px 30px;border: 1px solid var(--border-col); border-radius: 8px; background: var(--surface); padding: 36px 30px; height: 100%; transition: border-color .3s, transform .3s, box-shadow .3s; cursor: pointer; position: relative; overflow: hidden; }
    .service-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent); transition: width .4s; }
    .service-card:hover::after { width: 100%; }
    .service-card:hover { border-color: rgba(200,181,96,.4); transform: translateY(-8px); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
    .service-num { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 900; color: rgba(200,181,96,.12); line-height: 1; margin-bottom: 16px; }
    .service-title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
    .service-arrow { color: var(--accent); font-size: 1.2rem; transition: transform .3s; }
    .service-card:hover .service-arrow { transform: translateX(6px); }

    /* ── Approach ── */
    .approach-step { display: flex; gap: 24px; align-items: flex-start; padding: 24px 16px; border-bottom: 1px solid var(--border-col); }
    .approach-step:hover {
      background: linear-gradient(45deg, #1a1010, #55450c96); border-radius: 6px;
    }
    .approach-step:last-child { border-bottom: none; }
    .step-num { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 900; color: var(--accent); opacity: .3; min-width: 48px; line-height: 1; }
    .step-title { font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
    .step-desc { font-size: .88rem; color: #7a7060; line-height: 1.7; }

    /* ── Who We Serve chips ── */
    .serve-chip { background: rgba(200,181,96,.1); border: 1px solid var(--border-col); border-radius: 40px; padding: 10px 22px; font-size: .85rem; display: inline-flex; align-items: center; gap: 8px; transition: background .25s, border-color .25s; }
    .serve-chip:hover { background: rgba(200,181,96,.2); border-color: var(--accent); }
    .serve-chip i { color: var(--accent); }

    /* ── Contact ── */
    .contact-section { background: linear-gradient(135deg, #0d0d06 0%, #111108 100%); border-top: 1px solid var(--border-col); }
    .form-control-dark { background: rgba(255,255,255,.04) !important; border: 1px solid var(--border-col) !important; color: #e8e0d0 !important; border-radius: 4px !important; padding: 14px 18px !important; font-family: 'DM Sans', sans-serif !important; font-size: .9rem !important; transition: border-color .25s, box-shadow .25s !important; }
    .form-control-dark:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(200,181,96,.12) !important; outline: none !important; background: rgba(255,255,255,.07) !important; }
    .form-control-dark::placeholder { color: #4a4438 !important; }

    /* ── Footer ── */
    footer { background: #060603; border-top: 1px solid var(--border-col); }
    .footer-brand { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 900; }
    .footer-link { color: #6a6050; font-size: .85rem; text-decoration: none; transition: color .2s; display: block; margin-bottom: 8px; }
    .footer-link:hover { color: var(--accent); }
    .footer-col-title { font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 16px; }
    .footer-contact-item { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: #6a6050; margin-bottom: 12px; }
    .footer-contact-item i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
    .social-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-col); display: inline-flex; align-items: center; justify-content: center; color: #6a6050; font-size: .9rem; text-decoration: none; transition: border-color .25s, color .25s, transform .2s; }
    .social-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }

    /* ── Divider line ── */
    .gold-divider { width: 60px; height: 2px; background: var(--accent); border-radius: 2px; }

    /* ── Ticker strip ── */
    .ticker-strip { background: var(--accent); overflow: hidden; }
    .ticker-inner { display: flex; gap: 0; animation: ticker 22s linear infinite; white-space: nowrap; }
    .ticker-item { padding: 10px 40px; font-size: .78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #0a0a0a; }
    .ticker-dot { padding: 10px 10px; color: rgba(10,10,10,.4); }
    @keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* ── Pulse badge ── */
    .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(200,181,96,.6)} 50%{box-shadow:0 0 0 8px rgba(200,181,96,0)} }

    /* ── Responsive tweaks ── */
    @media(max-width:768px){
      .hero-title{font-size:2.4rem;}
      .hero-stat-card{padding:14px 18px;}
    }