.site-nav-motion {
    transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
        backdrop-filter 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav-motion.is-scrolled {
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 36px rgba(26, 28, 28, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.motion-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}

.motion-reveal.motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.motion-card {
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 240ms ease;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.motion-card.motion-ready:hover {
    transform: translate3d(var(--card-shift-x, 0px), -6px, 0);
    box-shadow: 0 18px 42px rgba(26, 28, 28, 0.08);
    filter: saturate(1.01);
}

.motion-card.motion-ready:active {
    transform: translate3d(0, -2px, 0) scale(0.995);
}

.motion-button {
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-button:hover {
    transform: translate3d(0, -2px, 0);
}

.motion-button:active {
    transform: translate3d(0, 0, 0) scale(0.985);
}

.mobile-nav-panel {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav-panel.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.mobile-nav-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-submenu-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-submenu-panel > div {
    overflow: hidden;
}

.mobile-submenu-panel.is-open {
    grid-template-rows: 1fr;
}

@media (max-width: 767px) {
    .site-desktop-cta {
        display: none !important;
    }

    .site-mobile-toggle {
        display: inline-flex !important;
    }
}

@media (min-width: 768px) {
    .site-mobile-toggle {
        display: none !important;
    }
}

@media (orientation: landscape) and (max-height: 540px) {
    .site-desktop-nav,
    .site-desktop-cta {
        display: none !important;
    }

    nav.fixed.top-0 > div > .hidden.md\:flex,
    nav.fixed.top-0 a[href="contact.html"].bg-primary-container {
        display: none !important;
    }

    .site-mobile-toggle {
        display: inline-flex !important;
    }

    nav.fixed.top-0 button[data-mobile-nav-toggle] {
        display: inline-flex !important;
    }

    nav.fixed.top-0 .max-w-7xl {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .mobile-nav-panel {
        max-height: calc(100vh - 88px);
        overflow-y: auto !important;
    }
}

body.is-short-landscape .site-desktop-nav,
body.is-short-landscape .site-desktop-cta,
body.is-short-landscape nav.fixed.top-0 > div > .hidden.md\:flex,
body.is-short-landscape nav.fixed.top-0 a[href="contact.html"].bg-primary-container {
    display: none !important;
}

body.is-short-landscape .site-mobile-toggle,
body.is-short-landscape nav.fixed.top-0 button[data-mobile-nav-toggle] {
    display: inline-flex !important;
}

body.is-short-landscape nav.fixed.top-0 .max-w-7xl {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

body.is-short-landscape .mobile-nav-panel {
    max-height: calc(100vh - 88px);
    overflow-y: auto !important;
}

body.is-short-landscape main > header[class*="relative"],
body.is-short-landscape main > section[class*="min-h-[819px]"],
body.is-short-landscape main > section[class*="min-h-[870px]"],
body.is-short-landscape main > section[class*="h-[409px]"] {
    min-height: auto !important;
    height: auto !important;
    padding-top: 6.25rem !important;
    padding-bottom: 2rem !important;
}

body.is-short-landscape main > header[class*="relative"] .max-w-7xl,
body.is-short-landscape main > section[class*="min-h-[819px]"] .max-w-7xl,
body.is-short-landscape main > section[class*="min-h-[870px]"] .max-w-7xl,
body.is-short-landscape main > section[class*="h-[409px]"] .max-w-7xl {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

body.is-short-landscape main > header[class*="relative"] .grid,
body.is-short-landscape main > section[class*="min-h-[819px]"] .grid,
body.is-short-landscape main > section[class*="min-h-[870px]"] .grid {
    display: grid !important;
    gap: 1.25rem !important;
    align-items: start !important;
}

body.is-short-landscape main > header[class*="relative"] h1,
body.is-short-landscape main > section[class*="min-h-[819px]"] h1,
body.is-short-landscape main > section[class*="min-h-[870px]"] h1,
body.is-short-landscape main > section[class*="h-[409px]"] h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
    line-height: 0.95 !important;
    margin-bottom: 1rem !important;
    max-width: 12ch !important;
}

body.is-short-landscape main > header[class*="relative"] p.text-xl,
body.is-short-landscape main > section[class*="min-h-[819px]"] p.text-xl,
body.is-short-landscape main > section[class*="min-h-[870px]"] p.text-xl,
body.is-short-landscape main > section[class*="h-[409px]"] p.text-xl {
    font-size: 1rem !important;
    line-height: 1.45 !important;
    margin-bottom: 1rem !important;
    max-width: 42rem !important;
}

body.is-short-landscape main > header[class*="relative"] .flex.flex-col.sm\:flex-row,
body.is-short-landscape main > header[class*="relative"] .flex.gap-4,
body.is-short-landscape main > section[class*="min-h-[819px]"] .flex.gap-4,
body.is-short-landscape main > section[class*="min-h-[870px]"] .flex.flex-col.sm\:flex-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

body.is-short-landscape main > header[class*="relative"] .lg\:col-span-5,
body.is-short-landscape main > section[class*="h-[409px]"] .absolute.inset-0 {
    display: none !important;
}

body.is-short-landscape main > section[class*="min-h-[819px]"] .space-y-8,
body.is-short-landscape main > section[class*="min-h-[870px]"] .max-w-2xl {
    max-width: 46rem !important;
}

body.is-short-landscape main > section[class*="min-h-[819px]"] .aspect-\[4\/5\],
body.is-short-landscape main > section[class*="min-h-[870px]"] .absolute.inset-0.z-0 {
    display: none !important;
}

body.is-short-landscape main > section[class*="min-h-[819px]"] .relative > .absolute.-bottom-8,
body.is-short-landscape main > section[class*="min-h-[870px]"] .absolute.inset-0.z-0 + .relative.z-20 .max-w-2xl + * {
    display: none !important;
}

body.is-short-landscape main > section[class*="min-h-[819px]"] .max-w-7xl,
body.is-short-landscape main > section[class*="min-h-[870px]"] .max-w-7xl {
    padding-top: 0 !important;
}

body.is-short-landscape main > section[class*="min-h-[819px]"] .space-y-8 > .inline-block,
body.is-short-landscape main > section[class*="min-h-[870px]"] .max-w-2xl > .inline-block {
    margin-bottom: 0.75rem !important;
}

body.is-short-landscape main > section[class*="min-h-[819px]"] .max-w-7xl > .relative:last-child {
    display: none !important;
}

body.is-short-landscape main > section[class*="min-h-[819px]"] .space-y-8 {
    max-width: 44rem !important;
}

body.is-short-landscape main > section[class*="h-[409px]"] {
    padding-top: 6rem !important;
    padding-bottom: 1.5rem !important;
}

body.is-short-landscape main > section[class*="h-[409px]"] .max-w-2xl {
    max-width: 42rem !important;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-motion,
    .motion-reveal,
    .motion-card,
    .motion-button,
    .mobile-nav-panel,
    .mobile-nav-backdrop,
    .mobile-submenu-panel {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }

    .motion-reveal {
        opacity: 1 !important;
    }
}