/* ============================================================
   VASTUMITRA 2026 — ENTERPRISE DESIGN SYSTEM
   Light/white base. Single gold accent. Hairline geometry.
   ============================================================ */

/* --- Design Tokens ------------------------------------------ */
:root {
    --vm-bg: #FFFFFF;
    --vm-bg-warm: #FBFAF7;
    --vm-bg-alt: #F4F2ED;
    --vm-bg-ink: #0B0B0C;
    --vm-bg-ink-2: #14141A;
    --vm-surface: #FFFFFF;
    --vm-hairline: rgba(11, 11, 12, 0.08);
    --vm-hairline-strong: rgba(11, 11, 12, 0.16);
    --vm-hairline-dark: rgba(255, 255, 255, 0.08);

    --vm-ink: #0B0B0C;
    --vm-ink-2: #2A2A2D;
    --vm-ink-3: #5C5C60;
    --vm-ink-4: #8A8A8E;
    --vm-ink-5: #B5B5B8;

    --vm-gold: #B8873A;
    --vm-gold-2: #C99545;
    --vm-gold-soft: rgba(184, 135, 58, 0.08);
    --vm-gold-line: rgba(184, 135, 58, 0.32);

    --vm-font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --vm-font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --vm-font-serif: "Fraunces", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
    --vm-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

    --vm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --vm-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

    --vm-nav-h: 72px;
    --vm-topline-h: 36px;
    --vm-container: 1320px;
    --vm-gutter: clamp(20px, 4vw, 56px);

    color-scheme: light;
}

/* --- Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    padding: 0;
    background: var(--vm-bg);
    color: var(--vm-ink);
    font-family: var(--vm-font-body);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-feature-settings: "ss01", "cv11", "kern";
}
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select {
    font: inherit; color: inherit;
    background: transparent;
    border: 0;
    outline: 0;
}
::selection { background: var(--vm-gold); color: #fff; }

/* --- Layout primitives -------------------------------------- */
.vm-container {
    width: 100%;
    max-width: var(--vm-container);
    margin: 0 auto;
    padding: 0 var(--vm-gutter);
    position: relative;
}

/* --- Eyebrow / kicker --------------------------------------- */
.vm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--vm-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vm-ink-3);
    line-height: 1;
}
.vm-eyebrow--gold { color: var(--vm-gold); }
.vm-eyebrow .dot {
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--vm-gold);
    border-radius: 50%;
    margin-right: 10px;
    transform: translateY(-1px);
}

/* --- Section heads ------------------------------------------ */
.vm-section__head {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}
.vm-section__head .vm-eyebrow { margin-bottom: 18px; }
.vm-section__head h2 {
    font-family: var(--vm-font-display);
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 280;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
    color: var(--vm-ink);
}
.vm-section__head h2 em {
    font-family: var(--vm-font-serif);
    font-style: italic;
    font-weight: 300;
    color: var(--vm-gold);
}
.vm-section__head p {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.6;
    color: var(--vm-ink-3);
    margin: 0 auto;
    max-width: 60ch;
}

/* --- Buttons ------------------------------------------------- */
.vm-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-family: var(--vm-font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1;
    transition: all 240ms var(--vm-ease);
    white-space: nowrap;
    border: 1px solid transparent;
    will-change: transform;
}
.vm-btn--lg { height: 52px; padding: 0 28px; font-size: 15px; }
.vm-btn--primary {
    background: var(--vm-ink);
    color: #fff;
}
.vm-btn--primary:hover { background: #1F1F22; transform: translateY(-1px); }
.vm-btn--ghost {
    background: transparent;
    color: var(--vm-ink);
    border-color: var(--vm-hairline-strong);
}
.vm-btn--ghost:hover { border-color: var(--vm-ink); }
.vm-btn--gold {
    background: var(--vm-gold);
    color: #fff;
}
.vm-btn--gold:hover { background: var(--vm-gold-2); }
.vm-btn svg { flex: 0 0 auto; }

/* ============================================================
   PRELOADER
   ============================================================ */
.vm-preload {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #FFFFFF;
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: opacity 600ms var(--vm-ease);
}
.vm-preload.is-done { opacity: 0; pointer-events: none; }
.vm-preload__stage {
    position: relative;
    width: min(82vw, 520px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}
.vm-preload__stage svg.vm-preload__compass {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.vm-preload__panel {
    position: absolute;
    left: 0; right: 0;
    bottom: -110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
@media (max-width: 640px) {
    .vm-preload__panel { bottom: -88px; }
}
.vm-preload__pct {
    font-family: var(--vm-font-display);
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--vm-ink);
    line-height: 1;
}
.vm-preload__pct .u { font-size: 14px; color: var(--vm-ink-4); margin-left: 4px; }
.vm-preload__bar {
    width: 240px;
    max-width: 60vw;
    height: 1px;
    background: var(--vm-hairline-strong);
    overflow: hidden;
    position: relative;
}
.vm-preload__bar > i {
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(0);
    background: var(--vm-gold);
}
.vm-preload__label {
    font-family: var(--vm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vm-ink-3);
    height: 14px;
    overflow: hidden;
    text-align: center;
}
.vm-preload__hint {
    font-size: 11px;
    color: var(--vm-ink-4);
    letter-spacing: 0.04em;
    text-align: center;
    max-width: 70vw;
}

/* ============================================================
   HEADER (topline + nav + mega)
   ============================================================ */
.vm-topline {
    position: relative;
    height: var(--vm-topline-h);
    overflow: hidden;
    background: #0B0B0C;
    color: #E8E8EA;
    z-index: 90;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vm-topline__track {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 40px;
    padding: 0;
    white-space: nowrap;
    animation: vm-marquee 60s linear infinite;
}
.vm-topline__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--vm-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}
.vm-topline__item .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--vm-gold); }
@keyframes vm-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.vm-nav {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--vm-hairline);
    transition: background 220ms var(--vm-ease), box-shadow 220ms var(--vm-ease);
    /* IMPORTANT: relative so absolutely-positioned mega panels anchor here */
}
.vm-nav > .vm-mega { /* ensure relative context */ }
.vm-nav.is-scrolled {
    background: rgba(255,255,255,0.96);
    box-shadow: 0 1px 0 var(--vm-hairline);
}
.vm-nav__inner {
    display: flex;
    align-items: center;
    height: var(--vm-nav-h);
    gap: 24px;
}
.vm-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.vm-logo__mark { width: 36px; height: 36px; }
.vm-logo__word {
    font-family: var(--vm-font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--vm-ink);
    line-height: 1;
}
.vm-logo__word em {
    font-family: var(--vm-font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--vm-gold);
}
.vm-logo__tag {
    font-family: var(--vm-font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
    margin-top: 3px;
}

.vm-nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 24px;
    flex: 1;
}
.vm-nav__item {
    position: relative;
}
.vm-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 450;
    color: var(--vm-ink-2);
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 200ms var(--vm-ease), color 200ms var(--vm-ease);
}
.vm-nav__link:hover,
.vm-nav__item.is-open .vm-nav__link {
    background: var(--vm-bg-warm);
    color: var(--vm-ink);
}
.vm-nav__link .chev {
    width: 10px; height: 10px;
    transition: transform 240ms var(--vm-ease);
    opacity: 0.55;
}
.vm-nav__item.is-open .vm-nav__link .chev { transform: rotate(180deg); opacity: 1; }

.vm-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* Mega menu — panels are siblings inside <header class="vm-nav"> */
.vm-mega {
    position: absolute;
    top: calc(var(--vm-nav-h) + 12px);
    left: 50%;
    transform: translate(-50%, 8px);
    width: min(1080px, calc(100vw - 48px));
    background: #fff;
    border: 1px solid var(--vm-hairline);
    border-radius: 18px;
    box-shadow: 0 24px 48px -24px rgba(11,11,12,0.18), 0 0 0 0.5px var(--vm-hairline);
    padding: 28px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms var(--vm-ease), transform 220ms var(--vm-ease), visibility 220ms;
    z-index: 60;
}
.vm-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.vm-mega__feature {
    background: var(--vm-bg-warm);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 0.5px solid var(--vm-hairline);
}
.vm-mega__feature .ic {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #fff;
    display: grid; place-items: center;
    color: var(--vm-gold);
    border: 0.5px solid var(--vm-hairline);
}
.vm-mega__feature h4 {
    font-family: var(--vm-font-display);
    font-size: 17px;
    font-weight: 500;
    margin: 0;
    color: var(--vm-ink);
    letter-spacing: -0.01em;
}
.vm-mega__feature p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--vm-ink-3); }
.vm-mega__feature .lk {
    font-family: var(--vm-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vm-gold);
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
}
.vm-mega__col h5 {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
    margin: 0 0 12px;
}
.vm-mega__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-mega__col li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--vm-ink-2);
    transition: background 180ms var(--vm-ease), color 180ms var(--vm-ease);
}
.vm-mega__col li a:hover { background: var(--vm-bg-warm); color: var(--vm-ink); }
.vm-mega__col li a svg { color: var(--vm-gold); flex: 0 0 auto; }
.vm-mega__aside {
    background: linear-gradient(135deg, var(--vm-bg-warm), #fff);
    border-radius: 14px;
    padding: 18px;
    border: 0.5px solid var(--vm-hairline);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vm-mega__aside .stat {
    display: flex; flex-direction: column; gap: 4px;
}
.vm-mega__aside .stat .v {
    font-family: var(--vm-font-display);
    font-size: 22px;
    font-weight: 350;
    letter-spacing: -0.02em;
    color: var(--vm-ink);
}
.vm-mega__aside .stat .l {
    font-size: 11px;
    color: var(--vm-ink-3);
    letter-spacing: 0.04em;
}

/* Mobile drawer */
.vm-burger {
    display: none;
    width: 44px; height: 44px;
    border-radius: 999px;
    align-items: center; justify-content: center;
    border: 1px solid var(--vm-hairline-strong);
    margin-left: auto;
}
.vm-burger span {
    width: 18px; height: 1.4px; background: var(--vm-ink);
    position: relative;
    transition: transform 240ms var(--vm-ease);
}
.vm-burger span::before, .vm-burger span::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 1.4px; background: var(--vm-ink);
    transition: transform 240ms var(--vm-ease);
}
.vm-burger span::before { top: -6px; }
.vm-burger span::after  { top: 6px; }

.vm-drawer {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 70;
    transform: translateY(-100%);
    transition: transform 360ms var(--vm-ease);
    overflow-y: auto;
    padding: 80px var(--vm-gutter) 40px;
}
.vm-drawer.is-open { transform: translateY(0); }
.vm-drawer__close {
    position: absolute;
    top: 18px; right: var(--vm-gutter);
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid var(--vm-hairline-strong);
    display: grid; place-items: center;
}
.vm-drawer__group { border-top: 1px solid var(--vm-hairline); padding: 18px 0; }
.vm-drawer__group h6 {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
    margin: 0 0 12px;
}
.vm-drawer__group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.vm-drawer__group li a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    font-size: 16px;
    color: var(--vm-ink);
}
.vm-drawer__group li a svg { color: var(--vm-gold); }

@media (max-width: 1080px) {
    .vm-nav__menu { display: none; }
    .vm-nav__cta .vm-btn:not(.vm-btn--primary) { display: none; }
    .vm-burger { display: inline-flex; }
}
@media (max-width: 640px) {
    .vm-nav__cta .vm-btn--primary { display: none; }
    .vm-logo__tag { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.vm-hero {
    position: relative;
    overflow: hidden;
    background: var(--vm-bg);
    padding: clamp(56px, 9vw, 120px) 0 clamp(64px, 10vw, 140px);
    isolation: isolate;
}
.vm-hero__ambient {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    opacity: 0.6;
    pointer-events: none;
}
.vm-hero__compass {
    position: absolute;
    inset: 0;
    margin: auto;
    width: clamp(420px, 65vw, 820px);
    height: clamp(420px, 65vw, 820px);
    z-index: 0;
    opacity: 0.55;
    pointer-events: none;
    display: grid; place-items: center;
}
@media (max-width: 768px) {
    .vm-hero {
        padding: clamp(32px, 8vw, 56px) 0 clamp(48px, 10vw, 80px);
    }
    .vm-hero__compass {
        width: 140vw; height: 140vw;
        opacity: 0.08;
        inset: auto 0 -30% 0;
        margin: 0 auto;
        top: auto;
    }
    .vm-hero__inner {
        padding-top: 16px;
    }
    .vm-hero__title {
        font-size: clamp(34px, 9vw, 48px);
        line-height: 1.02;
    }
    .vm-hero__lede { font-size: 15px; }
    .vm-hero__actions { margin-bottom: 32px; }
    .vm-hero__actions .vm-btn { flex: 1 1 auto; justify-content: center; }
}

.vm-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vm-hero__inner > .vm-eyebrow { margin-bottom: 28px; }

.vm-hero__title {
    font-family: var(--vm-font-display);
    font-size: clamp(40px, 6.4vw, 92px);
    font-weight: 250;
    line-height: 1.0;
    letter-spacing: -0.035em;
    color: var(--vm-ink);
    margin: 0 0 28px;
    max-width: 16ch;
}
.vm-hero__title em {
    font-family: var(--vm-font-serif);
    font-style: italic;
    font-weight: 300;
    color: var(--vm-gold);
}
.vm-hero__title .word { display: inline-block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.vm-hero__title .word > span { display: inline-block; }

.vm-hero__lede {
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.6;
    color: var(--vm-ink-3);
    max-width: 60ch;
    margin: 0 0 36px;
}

.vm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 56px;
}

.vm-hero__proof {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 820px;
    border-top: 1px solid var(--vm-hairline);
    border-bottom: 1px solid var(--vm-hairline);
    padding: 28px 0;
}
.vm-hero__proof .stat {
    text-align: center;
    border-right: 1px solid var(--vm-hairline);
    padding: 0 16px;
}
.vm-hero__proof .stat:last-child { border-right: 0; }
.vm-hero__proof .stat .num {
    font-family: var(--vm-font-display);
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--vm-ink);
}
.vm-hero__proof .stat .num .u {
    font-size: 0.55em;
    color: var(--vm-ink-4);
    margin-left: 2px;
    font-weight: 400;
}
.vm-hero__proof .stat .lbl {
    font-family: var(--vm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
    margin-top: 10px;
    line-height: 1.3;
}
@media (max-width: 720px) {
    .vm-hero__proof { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 24px 0; }
    .vm-hero__proof .stat:nth-child(2) { border-right: 0; }
    .vm-hero__proof .stat:nth-child(3) { border-top: 1px solid var(--vm-hairline); padding-top: 24px; }
    .vm-hero__proof .stat:nth-child(4) { border-top: 1px solid var(--vm-hairline); padding-top: 24px; }
}

.vm-hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 3;
}
.vm-hero__scroll .line {
    width: 1px; height: 30px;
    background: linear-gradient(to bottom, transparent, var(--vm-gold), transparent);
    animation: vm-scroll-line 2.4s ease-in-out infinite;
}
@keyframes vm-scroll-line {
    0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
    50% { opacity: 1; transform: scaleY(1.2); }
}
.vm-hero__scroll .lbl {
    font-family: var(--vm-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
}
@media (max-width: 768px) {
    .vm-hero__scroll { display: none; }
}

/* ============================================================
   ROSTER
   ============================================================ */
.vm-roster {
    background: var(--vm-bg-warm);
    border-top: 1px solid var(--vm-hairline);
    border-bottom: 1px solid var(--vm-hairline);
    padding: 40px 0;
    overflow: hidden;
}
.vm-roster__label {
    text-align: center;
    font-family: var(--vm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
    margin-bottom: 24px;
}
.vm-roster__track {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vm-roster__row {
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    animation: vm-marquee 50s linear infinite;
}
.vm-roster__item {
    font-family: var(--vm-font-display);
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 400;
    color: var(--vm-ink-2);
    letter-spacing: -0.005em;
}
.vm-roster__sep {
    color: var(--vm-gold);
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   MODULE GRID (Services)
   ============================================================ */
.vm-module {
    padding: clamp(72px, 10vw, 140px) 0;
    background: var(--vm-bg);
}
.vm-module__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--vm-hairline);
    border: 1px solid var(--vm-hairline);
    border-radius: 24px;
    overflow: hidden;
}
@media (max-width: 1024px) { .vm-module__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .vm-module__grid { grid-template-columns: 1fr; } }

.vm-module__card {
    background: var(--vm-bg);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background 280ms var(--vm-ease);
    position: relative;
}
.vm-module__card:hover { background: var(--vm-bg-warm); }
.vm-module__card .ic {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--vm-bg-warm);
    border: 0.5px solid var(--vm-hairline);
    display: grid; place-items: center;
    color: var(--vm-gold);
    margin-bottom: 4px;
    transition: transform 280ms var(--vm-ease);
}
.vm-module__card:hover .ic { transform: scale(1.05) rotate(-3deg); }
.vm-module__card h3 {
    font-family: var(--vm-font-display);
    font-size: 22px;
    font-weight: 450;
    letter-spacing: -0.018em;
    line-height: 1.2;
    margin: 0;
    color: var(--vm-ink);
}
.vm-module__card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--vm-ink-3);
}
.vm-module__card .meta {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vm-module__card .meta li {
    font-family: var(--vm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--vm-ink-4);
    padding: 4px 10px;
    border: 0.5px solid var(--vm-hairline);
    border-radius: 999px;
    background: var(--vm-bg);
}
.vm-module__card .lk {
    margin-top: auto;
    padding-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--vm-font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vm-gold);
    transition: gap 200ms var(--vm-ease);
}
.vm-module__card:hover .lk { gap: 10px; }

/* ============================================================
   METHOD ROWS
   ============================================================ */
.vm-method {
    padding: clamp(72px, 10vw, 140px) 0;
    background: var(--vm-bg-warm);
    border-top: 1px solid var(--vm-hairline);
    border-bottom: 1px solid var(--vm-hairline);
}
.vm-method__rows {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--vm-hairline);
}
.vm-method__row {
    display: grid;
    grid-template-columns: 80px 1fr 280px;
    gap: 32px;
    padding: 36px 0;
    border-bottom: 1px solid var(--vm-hairline);
    align-items: start;
}
.vm-method__row .num {
    font-family: var(--vm-font-mono);
    font-size: 12px;
    color: var(--vm-gold);
    letter-spacing: 0.2em;
    padding-top: 6px;
}
.vm-method__row .body { display: flex; flex-direction: column; gap: 12px; }
.vm-method__row .body .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--vm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
}
.vm-method__row .body .tag svg { color: var(--vm-gold); }
.vm-method__row .body h3 {
    font-family: var(--vm-font-display);
    font-size: clamp(20px, 2.2vw, 27px);
    font-weight: 350;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
    color: var(--vm-ink);
}
.vm-method__row .body p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--vm-ink-3);
    max-width: 60ch;
}
.vm-method__row .aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-left: 1px solid var(--vm-hairline);
    padding-left: 24px;
}
.vm-method__row .aside .kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vm-method__row .aside .kpi .v {
    font-family: var(--vm-font-display);
    font-size: 26px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--vm-ink);
    line-height: 1;
}
.vm-method__row .aside .kpi .l {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
}
@media (max-width: 880px) {
    .vm-method__row { grid-template-columns: 60px 1fr; gap: 20px; }
    .vm-method__row .aside {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid var(--vm-hairline);
        padding: 16px 0 0;
        flex-direction: row;
        gap: 32px;
    }
}

/* ============================================================
   PRINCIPLES
   ============================================================ */
.vm-principles {
    padding: clamp(72px, 10vw, 140px) 0;
    background: var(--vm-bg);
}
.vm-principles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--vm-hairline);
    border: 1px solid var(--vm-hairline);
    border-radius: 24px;
    overflow: hidden;
}
@media (max-width: 768px) { .vm-principles__grid { grid-template-columns: 1fr; } }

.vm-principle {
    background: var(--vm-bg);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background 280ms var(--vm-ease);
}
.vm-principle:hover { background: var(--vm-bg-warm); }
.vm-principle .head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vm-principle .head .ic {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--vm-bg-warm);
    border: 0.5px solid var(--vm-hairline);
    display: grid; place-items: center;
    color: var(--vm-gold);
}
.vm-principle .head .nm {
    font-family: var(--vm-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vm-ink-3);
}
.vm-principle h3 {
    font-family: var(--vm-font-display);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 350;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin: 4px 0 0;
    color: var(--vm-ink);
}
.vm-principle p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--vm-ink-3);
}
.vm-principle .foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--vm-hairline);
    font-family: var(--vm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vm-gold);
}

/* ============================================================
   ROI CALCULATOR (dark inset)
   ============================================================ */
.vm-calc {
    padding: clamp(64px, 9vw, 120px) 0;
    background: var(--vm-bg);
}
.vm-calc .vm-section__head h2 { color: var(--vm-ink); }
.vm-calc__card {
    background: linear-gradient(160deg, #0B0B0C 0%, #14141A 100%);
    border-radius: 28px;
    padding: clamp(28px, 4vw, 48px);
    color: #E8E8EA;
    border: 0.5px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 48px -28px rgba(11,11,12,0.4);
    overflow: hidden;
    position: relative;
}
.vm-calc__card::before {
    content: "";
    position: absolute;
    top: -200px; right: -200px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(184,135,58,0.18), transparent 60%);
    pointer-events: none;
}
.vm-calc__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    position: relative;
    z-index: 1;
}
@media (max-width: 980px) { .vm-calc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .vm-calc__grid { grid-template-columns: 1fr; } }

.vm-calc .fld {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-calc .fld .lb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--vm-font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.vm-calc .fld .lb svg { color: var(--vm-gold-2); }
.vm-calc .fld input,
.vm-calc .fld select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px 14px;
    color: #fff;
    font-family: var(--vm-font-display);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.01em;
    transition: border-color 200ms var(--vm-ease), background 200ms var(--vm-ease);
    appearance: none;
    -webkit-appearance: none;
}
.vm-calc .fld input:focus,
.vm-calc .fld select:focus {
    border-color: var(--vm-gold);
    background: rgba(255,255,255,0.06);
}
.vm-calc .fld select {
    background-image: linear-gradient(45deg, transparent 50%, var(--vm-gold-2) 50%), linear-gradient(135deg, var(--vm-gold-2) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
}
.vm-calc .fld select option { background: #14141A; color: #fff; }

.vm-calc__out {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
@media (max-width: 980px) { .vm-calc__out { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .vm-calc__out { grid-template-columns: 1fr; } }

.vm-calc__out .cell {
    background: #0F0F14;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-calc__out .cell .lb {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.vm-calc__out .cell .vl {
    font-family: var(--vm-font-display);
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -0.025em;
    color: #fff;
    line-height: 1;
}
.vm-calc__out .cell .vl .u {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin-left: 4px;
}
.vm-calc__out .cell .sub {
    font-size: 11.5px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.04em;
}
.vm-calc__out .cell--hero {
    background: linear-gradient(140deg, #1A1410 0%, #0F0F14 100%);
}
.vm-calc__out .cell--hero .lb { color: var(--vm-gold-2); }
.vm-calc__out .cell--hero .vl { color: var(--vm-gold-2); font-size: 36px; }

.vm-calc__foot {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.vm-calc__foot .disc {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    line-height: 1.55;
    max-width: 60ch;
}
.vm-calc__foot .vm-btn--primary {
    background: var(--vm-gold);
    color: #fff;
}
.vm-calc__foot .vm-btn--primary:hover { background: var(--vm-gold-2); }

/* ============================================================
   CASE STUDIES
   ============================================================ */
.vm-cases {
    padding: clamp(72px, 10vw, 140px) 0;
    background: var(--vm-bg-warm);
    border-top: 1px solid var(--vm-hairline);
    border-bottom: 1px solid var(--vm-hairline);
}
.vm-cases__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 1024px) { .vm-cases__grid { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; } }

.vm-case {
    background: #fff;
    border: 1px solid var(--vm-hairline);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 320ms var(--vm-ease), border-color 320ms var(--vm-ease), box-shadow 320ms var(--vm-ease);
}
.vm-case:hover {
    transform: translateY(-2px);
    border-color: var(--vm-gold-line);
    box-shadow: 0 12px 32px -16px rgba(11,11,12,0.12);
}
.vm-case__ribbon {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vm-gold);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--vm-gold-line);
    align-self: flex-start;
}
.vm-case__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--vm-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--vm-ink-4);
}
.vm-case__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.vm-case__meta svg { color: var(--vm-gold); }
.vm-case h3 {
    font-family: var(--vm-font-display);
    font-size: 18px;
    font-weight: 450;
    letter-spacing: -0.015em;
    line-height: 1.35;
    margin: 0;
    color: var(--vm-ink);
}
.vm-case__kpi {
    list-style: none;
    padding: 16px 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--vm-hairline);
    border-bottom: 1px solid var(--vm-hairline);
}
.vm-case__kpi li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.vm-case__kpi li .v {
    font-family: var(--vm-font-display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--vm-gold);
}
.vm-case__kpi li .l {
    font-size: 12.5px;
    color: var(--vm-ink-3);
    text-align: right;
}
.vm-case__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}
.vm-case__foot .d {
    font-family: var(--vm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--vm-ink-4);
}
.vm-case__foot .lk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--vm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vm-ink);
}

/* ============================================================
   SCRIPTURE
   ============================================================ */
.vm-scripture {
    padding: clamp(72px, 10vw, 140px) 0;
    background: var(--vm-bg);
}
.vm-scripture__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    background: var(--vm-bg-warm);
    border: 1px solid var(--vm-hairline);
    border-radius: 28px;
    padding: clamp(36px, 5vw, 64px);
}
@media (max-width: 880px) { .vm-scripture__inner { grid-template-columns: 1fr; gap: 32px; } }

.vm-scripture .side h2 {
    font-family: var(--vm-font-display);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 280;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 18px 0 16px;
    color: var(--vm-ink);
}
.vm-scripture .side h2 em {
    font-family: var(--vm-font-serif);
    font-style: italic;
    font-weight: 300;
    color: var(--vm-gold);
}
.vm-scripture .side p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--vm-ink-3);
    margin: 0 0 24px;
    max-width: 50ch;
}
.vm-scripture .verse {
    margin: 0;
    padding: 32px;
    background: #fff;
    border: 0.5px solid var(--vm-hairline);
    border-left: 2px solid var(--vm-gold);
    border-radius: 14px;
}
.vm-scripture .sanskrit {
    font-family: var(--vm-font-serif);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.55;
    color: var(--vm-ink);
    font-weight: 400;
    margin-bottom: 20px;
}
.vm-scripture figcaption {
    font-size: 14px;
    line-height: 1.6;
    color: var(--vm-ink-3);
    font-style: italic;
}
.vm-scripture cite {
    display: block;
    font-style: normal;
    font-family: var(--vm-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vm-gold);
    margin-top: 10px;
}

/* ============================================================
   QUOTES / TESTIMONIALS
   ============================================================ */
.vm-quote {
    padding: clamp(72px, 10vw, 140px) 0;
    background: var(--vm-bg-warm);
    border-top: 1px solid var(--vm-hairline);
}
.vm-quote__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1024px) { .vm-quote__grid { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto; } }

.vm-quote__card {
    background: #fff;
    border: 1px solid var(--vm-hairline);
    border-radius: 20px;
    padding: 28px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.vm-quote__card .mark {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--vm-bg-warm);
    border: 0.5px solid var(--vm-hairline);
    display: grid; place-items: center;
    color: var(--vm-gold);
}
.vm-quote__card blockquote {
    margin: 0;
    font-family: var(--vm-font-display);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.012em;
    color: var(--vm-ink);
}
.vm-quote__card figcaption {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--vm-hairline);
}
.vm-quote__card figcaption .n {
    font-family: var(--vm-font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--vm-ink);
    letter-spacing: -0.005em;
}
.vm-quote__card figcaption .o {
    font-family: var(--vm-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--vm-ink-4);
    margin-top: 4px;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.vm-cta-band {
    padding: clamp(64px, 9vw, 120px) 0;
    background: var(--vm-bg);
    border-top: 1px solid var(--vm-hairline);
}
.vm-cta-band .vm-container {
    text-align: center;
    max-width: 880px;
}
.vm-cta-band .vm-eyebrow { margin-bottom: 22px; }
.vm-cta-band h2 {
    font-family: var(--vm-font-display);
    font-size: clamp(30px, 4.8vw, 60px);
    font-weight: 250;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
    color: var(--vm-ink);
}
.vm-cta-band h2 em {
    font-family: var(--vm-font-serif);
    font-style: italic;
    font-weight: 300;
    color: var(--vm-gold);
}
.vm-cta-band .sub {
    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.6;
    color: var(--vm-ink-3);
    margin: 0 auto 32px;
    max-width: 64ch;
}
.vm-cta-band .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ============================================================
   FOOTER (dark)
   ============================================================ */
.vm-footer {
    background: #0B0B0C;
    color: #B5B5B8;
    padding: 0 0 32px;
}
.vm-footer__compass-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px var(--vm-gutter) 16px;
    max-width: var(--vm-container);
    margin: 0 auto;
}
.vm-footer__compass-row .line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.08);
}
.vm-footer__compass-art { flex: 0 0 auto; }

.vm-footer__top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    max-width: var(--vm-container);
    margin: 0 auto;
    padding: 32px var(--vm-gutter) 48px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 1024px) { .vm-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px)  { .vm-footer__top { grid-template-columns: 1fr; gap: 28px; } }

.vm-footer__brand .mark-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.vm-footer__brand .mark { display: inline-flex; }
.vm-footer__brand .wordmark {
    font-family: var(--vm-font-display);
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.02em;
}
.vm-footer__brand .wordmark em {
    font-family: var(--vm-font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--vm-gold);
}
.vm-footer__brand .tag {
    font-family: var(--vm-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}
.vm-footer__brand p {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255,255,255,0.55);
    margin: 0 0 20px;
    max-width: 36ch;
}
.vm-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vm-footer__badges .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    font-family: var(--vm-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
}
.vm-footer__badges .badge .dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--vm-gold);
}

.vm-footer__col h5 {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin: 0 0 16px;
}
.vm-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-footer__col li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.7);
    transition: color 200ms var(--vm-ease), gap 200ms var(--vm-ease);
}
.vm-footer__col li a:hover {
    color: var(--vm-gold);
    gap: 10px;
}
.vm-footer__col li a svg { opacity: 0.5; }

.vm-footer__bottom {
    max-width: var(--vm-container);
    margin: 0 auto;
    padding: 24px var(--vm-gutter) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.02em;
}
.vm-footer__bottom .legal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.vm-footer__bottom .legal a {
    color: rgba(255,255,255,0.55);
    transition: color 200ms var(--vm-ease);
}
.vm-footer__bottom .legal a:hover { color: var(--vm-gold); }

/* ============================================================
   REVEAL
   ============================================================ */
.vm-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms var(--vm-ease), transform 700ms var(--vm-ease);
}
.vm-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .vm-reveal { opacity: 1; transform: none; }
    .vm-topline__track, .vm-roster__row { animation: none; }
}

/* ============================================================
   HEADER BINDINGS — actual markup class names
   (These override/supplement the generic rules above)
   ============================================================ */

/* Small button variant */
.vm-btn--sm { height: 38px; padding: 0 16px; font-size: 13px; }

/* Utility: hide below md */
@media (max-width: 1080px) { .u-hide-md { display: none !important; } }

/* Pips (topline) */
.vm-topline__item .pip {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--vm-gold);
    flex: 0 0 auto;
}
.vm-topline__item .pip--live {
    background: #6CE0A6;
    box-shadow: 0 0 0 2px rgba(108, 224, 166, 0.18);
    animation: vm-pulse 1.6s ease-in-out infinite;
}
@keyframes vm-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Preloader — additional pieces from actual markup */
.vm-preload__brand {
    position: absolute;
    top: max(36px, 6vh);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--vm-ink);
}
.vm-preload__brand svg { width: 26px; height: 26px; color: var(--vm-ink); }
.vm-preload__brand span {
    font-family: var(--vm-font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--vm-ink);
}
.vm-preload__brand em {
    font-family: var(--vm-font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--vm-gold);
}
.vm-preload__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(11,11,12,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(11,11,12,0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at center, #000 20%, transparent 75%);
    pointer-events: none;
}
.vm-preload__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 260px;
    max-width: 70vw;
}
.vm-preload__percent {
    font-family: var(--vm-font-display);
    font-size: 26px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--vm-ink);
    line-height: 1;
}
.vm-preload__fill {
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(0);
    background: var(--vm-gold);
    transition: transform 280ms var(--vm-ease);
}
.vm-preload__bar {
    position: relative;
    width: 260px;
    max-width: 70vw;
}

/* Scrollbar indicator */
.vm-scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    z-index: 85;
    pointer-events: none;
}
.vm-scrollbar__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--vm-gold), var(--vm-gold-2));
    transition: width 80ms linear;
}

/* Nav brand (logo + wordmark) — header uses .vm-nav__brand + nested .mark, .wordmark, .tag */
.vm-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.vm-nav__brand .mark { display: inline-flex; }
.vm-nav__brand .wordmark {
    display: block;
    font-family: var(--vm-font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--vm-ink);
    line-height: 1.1;
}
.vm-nav__brand .wordmark em {
    font-family: var(--vm-font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--vm-gold);
}
.vm-nav__brand .tag {
    display: block;
    font-family: var(--vm-font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
    margin-top: 3px;
}
@media (max-width: 640px) {
    .vm-nav__brand .tag { display: none; }
}

/* Nav burger — header uses .vm-nav__burger */
.vm-nav__burger {
    display: none;
    width: 42px; height: 42px;
    border-radius: 999px;
    align-items: center; justify-content: center;
    border: 1px solid var(--vm-hairline-strong);
    color: var(--vm-ink);
    background: #fff;
    transition: border-color 200ms var(--vm-ease), background 200ms var(--vm-ease);
}
.vm-nav__burger:hover { border-color: var(--vm-ink); }
@media (max-width: 1080px) {
    .vm-nav__burger { display: inline-flex; }
}

/* Mega menu — header uses __inner, __columns, __visual, __link (single-pane) */
.vm-mega__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.9fr;
    gap: 28px;
}
@media (max-width: 1200px) {
    .vm-mega__inner { grid-template-columns: 1fr 1.3fr; }
    .vm-mega__aside { grid-column: 1 / -1; flex-direction: row; }
}

.vm-mega__feature {
    background: var(--vm-bg-warm);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 0.5px solid var(--vm-hairline);
}
.vm-mega__feature .label {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vm-gold);
}
.vm-mega__feature h3 {
    font-family: var(--vm-font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.018em;
    line-height: 1.2;
    margin: 0;
    color: var(--vm-ink);
}
.vm-mega__feature p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--vm-ink-3);
}
.vm-mega__visual {
    margin-top: auto;
    padding-top: 10px;
    height: 130px;
    display: grid; place-items: center;
    opacity: 0.85;
}

.vm-mega__columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 900px) {
    .vm-mega__columns { grid-template-columns: repeat(2, 1fr); }
}
.vm-mega__col h4 {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
    margin: 0 0 10px;
}
.vm-mega__link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 180ms var(--vm-ease);
    color: var(--vm-ink);
}
.vm-mega__link:hover { background: var(--vm-bg-warm); }
.vm-mega__link .ico {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--vm-bg-warm);
    border: 0.5px solid var(--vm-hairline);
    display: grid; place-items: center;
    color: var(--vm-gold);
    flex: 0 0 auto;
    margin-top: 1px;
}
.vm-mega__link .meta { display: flex; flex-direction: column; gap: 2px; }
.vm-mega__link .title {
    font-family: var(--vm-font-display);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--vm-ink);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.vm-mega__link .desc {
    font-size: 11.5px;
    color: var(--vm-ink-4);
    line-height: 1.4;
}

/* Mega aside */
.vm-mega__aside {
    background: linear-gradient(135deg, var(--vm-bg-warm), #fff);
    border-radius: 14px;
    padding: 20px;
    border: 0.5px solid var(--vm-hairline);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-mega__aside h4 {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
    margin: 0;
}
.vm-mega__aside .stat { display: flex; flex-direction: column; gap: 2px; }
.vm-mega__aside .stat .num {
    font-family: var(--vm-font-display);
    font-size: 22px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--vm-ink);
    line-height: 1;
}
.vm-mega__aside .stat .num em {
    font-family: var(--vm-font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--vm-gold);
    font-size: 0.7em;
    margin-left: 2px;
}
.vm-mega__aside .stat .label {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
    margin-top: 2px;
}

/* Drawer (mobile) actual markup */
.vm-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px var(--vm-gutter);
    border-bottom: 1px solid var(--vm-hairline);
}
.vm-drawer__body {
    padding: 24px var(--vm-gutter) 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.vm-drawer__sect {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vm-drawer__sect h5 {
    font-family: var(--vm-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vm-ink-4);
    margin: 0 0 8px;
}
.vm-drawer__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--vm-hairline);
    font-family: var(--vm-font-display);
    font-size: 17px;
    font-weight: 400;
    color: var(--vm-ink);
    letter-spacing: -0.01em;
}
.vm-drawer__link .ico {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--vm-bg-warm);
    border: 0.5px solid var(--vm-hairline);
    display: grid; place-items: center;
    color: var(--vm-gold);
}

/* Drawer full-screen override to match actual markup */
.vm-drawer {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 95;
    transform: translateY(-100%);
    transition: transform 380ms var(--vm-ease);
    overflow-y: auto;
    padding: 0;
}
.vm-drawer.is-open { transform: translateY(0); }

/* Nav item — ensure relative for mega positioning and room for mega */
.vm-nav { position: sticky; }
.vm-nav__item { position: relative; }

/* Main content gets natural background */
#vmMain { background: var(--vm-bg); }

/* Preloader stage on small screens */
@media (max-width: 640px) {
    .vm-preload__stage { width: 86vw; max-width: 360px; }
    .vm-preload__panel { bottom: -96px; }
}

/* Hero background safety — ensure hero always has intrinsic height on desktop so the compass doesn't collapse */
@media (min-width: 769px) {
    .vm-hero { min-height: min(92vh, 900px); display: grid; align-items: center; }
}