html {
    scroll-behavior: smooth
}

body {
    font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif
}

.font-serif {
    font-family: Georgia,'Times New Roman',serif
}

.glass {
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 24px 80px rgba(21,4,7,.18)
}

.glass-dark {
    background: rgba(45,5,12,.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.14)
}

.maroon-grad {
    background: linear-gradient(135deg,#3a0610,#6f1522 45%,#9b6b45)
}

.green-grad {
    background: linear-gradient(135deg,#064e3b,#15803d 50%,#84cc16)
}

.hero-overlay {
    background: linear-gradient(90deg,rgba(47,7,13,.88),rgba(47,7,13,.48),rgba(255,255,255,.08))
}

.soft-card {
    transition: .35s ease
}

.soft-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(73,10,21,.22)
}

.reveal {
    animation: fadeUp .85s ease both
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.float {
    animation: float 5s ease-in-out infinite
}

@keyframes float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

.slider-track {
    display: flex;
    width: max-content;
    animation: scroll 28s linear infinite
}

.slider-track:hover {
    animation-play-state: paused
}

@keyframes scroll {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .45rem .85rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase
}

.page-hero {
    min-height: 72vh;
    background-size: cover;
    background-position: center
}

.nav-link {
    position: relative
}

.nav-link:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: currentColor;
    transition: .25s
}

.nav-link:hover:after {
    width: 100%
}

/* Mobile image fixes: wide desktop banners were getting cropped on phone screens.
   These rules keep the complete image visible and move content below the image area. */
@media (max-width: 767px) {
    header .glass {
        padding:.7rem .85rem
    }

    header img {
        height: 3rem;
        width: 3rem
    }

    header span {
        font-size: 1.05rem;
        line-height: 1.2
    }

    header a.rounded-full {
        padding: .65rem 1.05rem
    }

    .home-hero {
        min-height: 860px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
        align-items: flex-end;
        background-color: #4b0a15;
    }

    .home-hero .hero-overlay {
        background: linear-gradient(180deg,rgba(47,7,13,.10) 0%,rgba(47,7,13,.25) 33%,rgba(47,7,13,.93) 57%,rgba(47,7,13,.98) 100%);
    }

    .home-hero .relative.mx-auto {
        padding-top: 390px;
        padding-bottom: 54px
    }

    .home-hero h1 {
        font-size: 3rem;
        line-height: 1.05
    }

    .home-hero p {
        max-width: 100%
    }

    .z-future-page-hero {
        min-height: 850px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
        background-color: #4b0a15;
    }

    .z-future-page-hero > .absolute {
        background: linear-gradient(180deg,rgba(58,6,16,.05) 0%,rgba(58,6,16,.20) 34%,rgba(58,6,16,.94) 61%,rgba(58,6,16,.98) 100%) !important;
    }

    .z-future-page-hero .relative.mx-auto {
        padding-top: 420px;
        padding-bottom: 56px
    }

    .z-future-page-hero h1 {
        font-size: 2.8rem;
        line-height: 1.08
    }

    .project-card {
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
        background-color: #3a0610;
        min-height: 560px;
    }

    .project-card:nth-child(2) {
        background-color: #064e3b
    }

    .project-card > .relative {
        padding-top: 270px
    }

    .slider-track {
        animation: none;
        overflow-x: auto;
        width: 100%;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem
    }

    .slider-track > div {
        display: flex
    }

    .slider-track .w-80 {
        width: 82vw;
        scroll-snap-align: start
    }

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

@media (max-width: 420px) {
    .home-hero {
        min-height:810px
    }

    .home-hero .relative.mx-auto {
        padding-top: 340px
    }

    .z-future-page-hero {
        min-height: 800px
    }

    .z-future-page-hero .relative.mx-auto {
        padding-top: 365px
    }

    .home-hero h1 {
        font-size: 2.75rem
    }

    .z-future-page-hero h1 {
        font-size: 2.45rem
    }
}

/* Final mobile header + hero image fix */
.hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 999px;
    transition: .25s
}

.mobile-menu a {
    display: block;
    padding: .85rem 1rem;
    border-radius: 1rem;
    font-weight: 700;
    color: #111827
}

.mobile-menu a:hover {
    background: rgba(93,13,25,.10)
}

.mobile-menu-btn.active .hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg)
}

.mobile-menu-btn.active .hamburger span:nth-child(2) {
    opacity: 0
}

.mobile-menu-btn.active .hamburger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg)
}

.hero-mobile-photo {
    display: none
}

@media (max-width: 767px) {
    header .glass {
        background:rgba(255,255,255,.82);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px)
    }

    header .glass span {
        color: #111827
    }

    header {
        position: fixed
    }

    .hero-mobile-photo {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        position: relative;
        z-index: 1;
        background: #fff
    }

    .home-hero,.z-future-page-hero {
        display: block!important;
        min-height: auto!important;
        background-image: none!important;
        background-color: #4b0a15!important;
        padding-top: 92px!important;
        overflow: hidden
    }

    .home-hero .hero-overlay,.z-future-page-hero > .absolute {
        display: none!important
    }

    .home-hero .relative.mx-auto,.z-future-page-hero .relative.mx-auto {
        background: linear-gradient(180deg,#4b0a15,#26050b)!important;
        padding-top: 2rem!important;
        padding-bottom: 3.5rem!important;
        position: relative;
        z-index: 2
    }

    .home-hero h1,.z-future-page-hero h1 {
        font-size: 2.65rem!important;
        line-height: 1.08!important
    }

    .home-hero .badge {
        font-size: .68rem;
        max-width: 100%;
        white-space: normal;
        text-align: center
    }

    .home-hero p,.z-future-page-hero p {
        font-size: 1rem!important;
        line-height: 1.75!important
    }

    .home-hero .flex.flex-wrap,.z-future-page-hero .inline-flex {
        gap: .75rem
    }

    .home-hero a.rounded-full {
        width: 100%;
        justify-content: center;
        text-align: center
    }

    .project-card {
        background-size: cover!important;
        background-position: center!important;
        min-height: 420px!important
    }

    .project-card > .relative {
        padding-top: 14rem!important
    }
}

@media (max-width: 420px) {
    header .mx-auto {
        padding-left:.55rem;
        padding-right: .55rem
    }

    header nav {
        padding: .65rem!important
    }

    header img {
        height: 2.65rem!important;
        width: 2.65rem!important
    }

    header span {
        font-size: 1rem!important;
        max-width: 160px
    }

    .home-hero,.z-future-page-hero {
        padding-top: 82px!important
    }

    .home-hero h1,.z-future-page-hero h1 {
        font-size: 2.35rem!important
    }
}

/* FINAL RESPONSIVE FIX - prevents mobile horizontal overflow and hero side-by-side layout */
* {
    box-sizing: border-box
}

html,body {
    max-width: 100%;
    overflow-x: hidden
}

.site-hero {
    position: relative;
    overflow: hidden;
    background: #4b0a15
}

.site-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center
}

.site-hero-mobile {
    display: none
}

.site-hero-content {
    position: relative;
    z-index: 2
}

.site-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,rgba(47,7,13,.90),rgba(47,7,13,.45),rgba(255,255,255,.08))
}

.mobile-menu {
    max-width: 100%
}

@media(max-width: 767px) {
    body {
        width:100%;
        overflow-x: hidden!important
    }

    header {
        width: 100%;
        max-width: 100%;
        overflow: visible
    }

    header>.mx-auto {
        width: 100%;
        max-width: 100%;
        padding-left: 12px!important;
        padding-right: 12px!important
    }

    header nav {
        width: 100%;
        max-width: 100%;
    }

    .site-hero {
        display: block!important;
        min-height: auto!important;
        padding-top: 88px!important;
        background: #4b0a15!important;
        width: 100%;
        max-width: 100%
    }

    .site-hero-bg,.site-hero-shade {
        display: none!important
    }

    .site-hero-mobile {
        display: block!important;
        width: 100%!important;
        max-width: 100%!important;
        height: auto!important;
        object-fit: contain!important;
        background: #fff!important
    }

    .site-hero-content {
        display: block!important;
        width: 100%!important;
        max-width: 100%!important;
        margin: 0!important;
        padding: 28px 22px 46px!important;
        background: linear-gradient(180deg,#4b0a15,#27050b)!important;
        color: #fff!important;
    }

    .site-hero-content h1 {
        font-size: 42px!important;
        line-height: 1.08!important;
        word-break: normal!important;
        overflow-wrap: normal!important;
        max-width: 100%!important
    }

    .site-hero-content p {
        font-size: 16px!important;
        line-height: 1.75!important;
        max-width: 100%!important
    }

    .site-hero-content .badge {
        font-size: 11px!important;
        white-space: normal!important;
        text-align: center!important;
        max-width: 100%!important
    }

    .site-hero-content a {
        max-width: 100%
    }
}

@media(max-width: 420px) {
    .site-hero {
        padding-top:82px!important
    }

    .site-hero-content h1 {
        font-size: 36px!important
    }

    header span {
        max-width: 150px!important
    }
}

/* Home vision banner and responsive work showcase */
.vision-banner-section {
    padding: 1rem 0 2.5rem;
    background: #faf7f4
}

.vision-banner-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2rem;
    box-shadow: 0 28px 80px rgba(59,8,17,.18)
}

.showcase-section {
    background: linear-gradient(180deg,#faf7f4 0%,#fff 100%)
}

.showcase-slider {
    overflow: hidden;
    border-radius: 1.75rem
}

.showcase-track {
    display: flex;
    transition: transform .65s cubic-bezier(.22,.61,.36,1);
    will-change: transform
}

.showcase-item {
    flex: 0 0 25%;
    padding: .55rem
}

.showcase-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 1.35rem;
    box-shadow: 0 16px 40px rgba(35,10,14,.14);
    transition: transform .35s ease,box-shadow .35s ease
}

.showcase-item img:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 55px rgba(35,10,14,.22)
}

.showcase-controls {
    display: flex;
    gap: .75rem
}

.showcase-controls button {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: #5d0d19;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(93,13,25,.25);
    transition: .25s
}

.showcase-controls button:hover {
    transform: translateY(-2px);
    background: #7b1423
}

.showcase-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.25rem
}

.showcase-dots button {
    width: .65rem;
    height: .65rem;
    border-radius: 999px;
    background: #d4c5c8;
    transition: .25s
}

.showcase-dots button.active {
    width: 1.8rem;
    background: #5d0d19
}

@media(max-width: 1023px) {
    .showcase-item {
        flex-basis:50%
    }

    .showcase-item img {
        height: 280px
    }
}

@media(max-width: 639px) {
    .vision-banner-section {
        padding-top:.5rem
    }

    .vision-banner-image {
        border-radius: 1.25rem
    }

    .showcase-item {
        flex-basis: 100%;
        padding: .25rem
    }

    .showcase-item img {
        height: auto;
        aspect-ratio: 4/3
    }

    .showcase-controls {
        align-self: flex-start
    }
}