/* Shared animation hooks — used on every page.
   Ports the reveal/parallax/circle-reveal system + nav current-state
   that lived in Webflow's site head + per-page freeform code blocks. */

/* Base body font — Webflow's compiled CSS only sets this on body.page,
   and that class never made it into the static markup, so nav/footer
   text (and anything else without its own font-family) fell back to
   the browser default. Set it here once, globally. */
body {
    font-family: var(--font-body);
    color: var(--ink);
}

/* Current-page nav highlight (desktop pill + mobile underline) */
.vm-nav-link.is-current,
.vm-nav-cta.is-current {
    background-color: var(--green) !important;
    color: var(--cream) !important;
    border-color: var(--green) !important;
}

/* Sticky header: pinned to the top, aligned to the page container.
   Transparent at the top of the page; a cream bar fades in once scrolled
   (nav.js toggles .is-scrolled). The bar lives on ::before so the header
   itself never gets a backdrop-filter — that would trap the fixed mobile
   menu panel inside the bar. */
.vm-nav {
    top: 0;
}

.vm-nav::before {
    content: "";
    display: block; /* Webflow's .w-nav clearfix sets display:table, which won't stretch */
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(255, 245, 236, .94);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 10px 30px -22px rgba(11, 19, 17, .5);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.vm-nav.is-scrolled::before {
    opacity: 1;
}

.vm-nav-inner {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px clamp(20px, 5vw, 80px);
    transition: padding .35s ease;
}

.vm-nav.is-scrolled .vm-nav-inner {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Logo: brand-orange by default; the white version sits on top and is
   faded in while the header floats over a photo hero. */
.vm-nav-brand {
    position: relative;
}

.vm-nav-logo-img {
    transition: opacity .35s ease;
}

.vm-nav-logo-img--light {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.vm-nav--over-photo:not(.is-scrolled) .vm-nav-logo-img {
    opacity: 0;
}

.vm-nav--over-photo:not(.is-scrolled) .vm-nav-logo-img--light {
    opacity: 1;
}

/* Desktop: links sit on the right, no pill container */
@media (min-width: 992px) {
    .vm-nav-menu {
        position: static;
        transform: none;
        margin-left: auto;
        padding: 0;
        background-color: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .vm-nav-link,
    .vm-nav-cta {
        transition: background-color .25s, color .35s, border-color .35s, transform .5s;
    }

    /* Over the photo hero: white text */
    .vm-nav--over-photo:not(.is-scrolled) .vm-nav-link,
    .vm-nav--over-photo:not(.is-scrolled) .vm-nav-cta {
        color: var(--white);
        text-shadow: 0 1px 14px rgba(0, 0, 0, .25);
    }

    .vm-nav--over-photo:not(.is-scrolled) .vm-nav-cta {
        border-color: rgba(255, 255, 255, .75);
    }

    .vm-nav--over-photo:not(.is-scrolled) .vm-nav-link:hover,
    .vm-nav--over-photo:not(.is-scrolled) .vm-nav-cta:hover {
        background-color: rgba(255, 255, 255, .16);
    }

    /* Scrolled: orange text on the cream bar */
    .vm-nav.is-scrolled .vm-nav-link,
    .vm-nav.is-scrolled .vm-nav-cta {
        color: var(--orange-text);
    }

    .vm-nav.is-scrolled .vm-nav-cta {
        border-color: rgba(181, 84, 26, .45);
    }

    .vm-nav.is-scrolled .vm-nav-link:hover,
    .vm-nav.is-scrolled .vm-nav-cta:hover {
        background-color: rgba(226, 125, 47, .12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-nav::before,
    .vm-nav-inner,
    .vm-nav-logo-img {
        transition: none;
    }
}

/* Mobile nav: sliding off-canvas panel (replaces the desktop frosted pill below 991px) */
.vm-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(31, 27, 22, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    /* Below .vm-nav (z 100): the menu panel lives inside the header's
       stacking context, so a higher value would dim the panel too. */
    z-index: 90;
    opacity: 0;
    transition: opacity .4s ease;
}

.vm-nav-backdrop.is-visible {
    display: block;
}

.vm-nav-backdrop.is-on {
    opacity: 1;
}

@media (max-width: 991px) {
    .vm-nav-menu {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(84vw, 380px);
        height: 100vh;
        max-width: none;
        background-color: var(--green);
        border: none;
        border-radius: 0;
        box-shadow: -24px 0 60px -20px rgba(11, 19, 17, .45);
        padding: 100px 40px 48px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .45s cubic-bezier(.22, 1, .36, 1);
        z-index: 150;
    }

    .vm-nav-menu[data-nav-menu-open] {
        transform: translateX(0);
    }

    .vm-nav-list {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 10px;
        width: 100%;
    }

    .vm-nav-link {
        color: var(--cream);
        border-radius: 0;
        padding: 6px 0;
        font-size: 34px;
        font-weight: 600;
    }

    .vm-nav-cta {
        color: var(--cream);
        background-color: transparent;
        border-color: rgba(255, 245, 236, .45);
        margin-top: 18px;
        margin-left: 0;
    }

    .vm-nav-burger {
        position: relative;
        z-index: 160;
    }

    .vm-nav-menu .vm-nav-link.is-current,
    .vm-nav-menu .vm-nav-cta.is-current {
        background-color: transparent !important;
        color: var(--cream) !important;
        border-color: transparent !important;
        text-decoration: underline;
        text-underline-offset: 7px;
        text-decoration-thickness: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-nav-menu {
        transition: none;
    }
}

.vm-foot-link.is-current {
    opacity: 1;
    text-decoration: underline;
}

/* Scroll-reveal: fade + rise */
html.vm-anim .vm-rev {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}

html.vm-anim .vm-rev.is-in {
    opacity: 1;
    transform: none;
}

html.vm-anim .vm-rev.vm-rev-d1 { transition-delay: .08s; }
html.vm-anim .vm-rev.vm-rev-d2 { transition-delay: .16s; }
html.vm-anim .vm-rev.vm-rev-d3 { transition-delay: .24s; }

/* Line-by-line text rise (hero title) */
html.vm-anim .vm-tr .vm-line__i {
    transform: translateY(110%);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

html.vm-anim .vm-tr.is-in .vm-line__i {
    transform: none;
}

.vm-tr.is-in .vm-line:nth-child(2) .vm-line__i { transition-delay: .09s; }
.vm-tr.is-in .vm-line:nth-child(3) .vm-line__i { transition-delay: .18s; }

/* Circle-reveal (About teaser on Home) */
html.vm-anim .vm-circle__disc {
    transform: translate(-50%, -50%) scale(0);
    transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}

html.vm-anim .vm-circle.is-in .vm-circle__disc {
    transform: translate(-50%, -50%) scale(1);
}

html.vm-anim .vm-circle__inner {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1) .35s, transform .7s cubic-bezier(.22, 1, .36, 1) .35s;
}

html.vm-anim .vm-circle.is-in .vm-circle__inner {
    opacity: 1;
    transform: none;
}

/* Common hovers used across pages */
.vm-btn:hover { transform: translateY(-3px); }
.vm-btn--accent:hover { background-color: var(--cta-accent-hover); }
.vm-btn--primary:hover { background-color: var(--cta-primary-hover); }
.vm-btn--orange:hover { background-color: #9c4613; }
.vm-link { transition: opacity .3s; }
.vm-link:hover { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
    html.vm-anim .vm-rev,
    html.vm-anim .vm-line__i {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    html.vm-anim .vm-circle__disc { display: none; }
    html.vm-anim .vm-circle__inner {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* CTA banner on phones: copy wraps to more lines, give the corner art a
   little more room than on tablet (style.css sets 21% below 992px). */
@media (max-width: 767px) {
    .vm-cta {
        padding-bottom: 28%;
    }
}