* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Overpass Mono', monospace;
}

/* Logo */
.logo-container {
    position: fixed;
    top: 0;
    left: 0;
    padding: 2rem 2rem;
    z-index: 2000;
}

.logo-svg {
    width: 32px;
    height: 32px;
    overflow: visible;
    display: block;
}

.logo-face {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: center;
}

.logo-container:hover .logo-face.top {
    transform: translateY(-10px);
}

.logo-container:hover .logo-face.left {
    transform: translate(-10px, 6px);
}

.logo-container:hover .logo-face.right {
    transform: translate(10px, 6px);
}

/* Navigation Menu */
.nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    padding: 2rem 3rem;
    display: flex;
    gap: 2rem;
    z-index: 1000;
}

.nav-link {
    color: #2D2D2D;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.nav-link:hover {
    opacity: 0.7;
}

/* Nav Bar Background */
.nav-menu::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: #FAFAFA;
    z-index: -1;
    pointer-events: none;
}

/* Copyright Footer */
.copyright {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    color: #2D2D2D;
    opacity: 0.4;
    z-index: 100;
}

/* Project Navigation */
.project-navigation {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    margin-bottom: 1rem;
}

.nav-project-link {
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    color: #2D2D2D;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.nav-project-link:hover:not(.disabled) {
    opacity: 0.7;
}

.nav-project-link.disabled {
    opacity: 0;
    pointer-events: none;
}

/* Mobile-only Gallery Navigation */
.project-navigation-mobile {
    display: none;
    /* Hidden on desktop */
}

/* Hero Section */
.hero {
    background-color: #FAFAFA;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    max-width: 100%;
    padding: 2rem;
    text-align: center;
}

.hero-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 158px;
    letter-spacing: -0.05em;
    color: #2D2D2D;
    margin-bottom: 0;
    text-align: center;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.2s forwards;
}

.hero-subtitle-container {
    overflow: hidden;
    width: 100%;
    margin-top: -32px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.hero-subtitle-marquee {
    display: flex;
    width: fit-content;
    /* No animation on desktop */
}

.hero-subtitle {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 36px;
    letter-spacing: -0.05em;
    color: #2D2D2D;
    text-transform: lowercase;
    white-space: nowrap;
    text-align: center;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

/* Show desktop subtitle, hide mobile subtitle by default */
.hero-subtitle-desktop {
    display: block;
}

.hero-subtitle-mobile {
    display: none;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Hero Gallery */
.hero-gallery {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.gallery-link {
    text-decoration: none;
}

.gallery-item-wrapper {
    position: relative;
    display: block;
    overflow: visible;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Staggered animation delays for each gallery item */
.gallery-link:nth-child(1) .gallery-item-wrapper {
    animation-delay: 0.8s;
}

.gallery-link:nth-child(2) .gallery-item-wrapper {
    animation-delay: 0.95s;
}

.gallery-link:nth-child(3) .gallery-item-wrapper {
    animation-delay: 1.1s;
}

.gallery-link:nth-child(4) .gallery-item-wrapper {
    animation-delay: 1.25s;
}

.gallery-link:nth-child(5) .gallery-item-wrapper {
    animation-delay: 1.4s;
}

.gallery-link:nth-child(6) .gallery-item-wrapper {
    animation-delay: 1.55s;
}

.gallery-link:nth-child(7) .gallery-item-wrapper {
    animation-delay: 1.7s;
}

.gallery-link:nth-child(8) .gallery-item-wrapper {
    animation-delay: 1.85s;
}

.gallery-item {
    width: 80px;
    height: 470px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: width 0.3s ease;
}

.project-name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    color: #2D2D2D;
    text-align: center;
    letter-spacing: 0.02em;
    margin-top: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    background-color: #FAFAFA;
    padding: 2px 6px;
}

.gallery-item-wrapper.expanded .project-name {
    opacity: 1;
}

/* Hide mobile overlays on desktop */
.mobile-overlay {
    display: none;
}

/* Centered Project Gallery */
.project-gallery-centered {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
}

.project-image {
    height: 60vh;
    max-height: 600px;
    width: auto;
    object-fit: cover;
    display: block;
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

.project-image:nth-child(1) {
    animation-delay: 0.1s;
}

.project-image:nth-child(2) {
    animation-delay: 0.15s;
}

.project-image:nth-child(3) {
    animation-delay: 0.2s;
}

.project-image:nth-child(4) {
    animation-delay: 0.25s;
}

.project-image:nth-child(5) {
    animation-delay: 0.3s;
}

.project-image:nth-child(6) {
    animation-delay: 0.35s;
}

.project-image:nth-child(7) {
    animation-delay: 0.4s;
}

.project-image:nth-child(8) {
    animation-delay: 0.45s;
}


/* Project Page Styles */
.project-page-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 80px;
    letter-spacing: -0.05em;
    color: #2D2D2D;
    margin-bottom: 24px;
    text-align: center;
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

/* Slider Component */
.slider-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-wrapper {
    position: relative;
    display: inline-block;
}

.slider-image {
    height: 60vh;
    max-height: 600px;
    width: auto;
    object-fit: cover;
    display: none;
    /* Hidden by default */
}

.slider-image.active {
    display: block;
    animation: fadeIn 0.5s ease-out;
}

/* Reusing nav-arrow styles but ensuring positioning relative to wrapper */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #2D2D2D;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.2s ease;
    z-index: 10;
}

.slider-nav:hover {
    transform: translateY(-50%) scale(1.1);
}

.slider-wrapper:hover .slider-nav {
    opacity: 1;
}

.slider-nav.prev {
    left: -60px;
}

.slider-nav.next {
    right: -60px;
}

/* Bridge for hover continuity */
.slider-nav::before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    width: 40px;
}

.slider-nav.prev::before {
    left: 100%;
}

.slider-nav.next::before {
    right: 100%;
}


/* About Page */
.about-section {
    background-color: #FAFAFA;
    min-height: 100vh;
    width: 100%;
    padding: calc(8rem - 16px) 3rem 3rem 72px;
}

.about-content {
    max-width: 1200px;
    text-align: left;
}

.about-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 96px;
    letter-spacing: -0.05em;
    color: #2D2D2D;
    margin-bottom: 16px;
}

.about-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.about-photo {
    width: 261px;
    height: 417px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}



.about-text {
    max-width: 380px;
    min-height: 417px;
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    color: #2D2D2D;
    line-height: 1.5;
}

.about-text p {
    margin: 0 0 1rem 0;
}

.about-text p:last-child {
    margin-bottom: 0;
}

.about-email {
    display: block;
    margin-top: 32px;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.05em;
    color: #2D2D2D;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.about-email:hover {
    opacity: 0.6;
}

/* Contact Page */
.contact-section {
    background-color: #FAFAFA;
    min-height: 100vh;
    width: 100%;
    padding: calc(8rem - 16px) 3rem 3rem 72px;
}

.contact-content {
    max-width: 1200px;
    text-align: left;
}

.contact-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 96px;
    letter-spacing: -0.05em;
    color: #2D2D2D;
    margin-bottom: 16px;
}

.contact-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.contact-photo {
    width: 345px;
    height: 417px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.contact-text {
    max-width: 360px;
    min-height: 417px;
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    color: #2D2D2D;
    line-height: 1.6;
}

.contact-text p {
    margin: 0 0 1rem 0;
}

.contact-text p:last-child {
    margin-bottom: 0;
}

/* Back Link */
.back-link {
    display: inline-block;
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    color: #2D2D2D;
    text-decoration: none;
    margin-bottom: 2rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.back-link:hover {
    opacity: 1;
}

/* Katowicka Apartment Page */
.katowicka-apartment-section {
    background-color: #FAFAFA;
    min-height: 100vh;
    width: 100%;
    padding: calc(8rem - 16px) 3rem 3rem 72px;
}

.katowicka-apartment-content {
    max-width: 1200px;
    text-align: left;
}

.katowicka-apartment-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 96px;
    letter-spacing: -0.05em;
    color: #2D2D2D;
    margin-bottom: 48px;
    line-height: 1;
}

.katowicka-apartment-layout {
    display: flex;
    gap: 96px;
    align-items: flex-start;
}


.katowicka-apartment-text {
    width: 380px;
    height: 470px;
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: -0.05em;
    color: #2D2D2D;
    line-height: 1.5;
    flex-shrink: 0;
}

.katowicka-apartment-text p {
    margin: 0 0 1rem 0;
}

.katowicka-apartment-text p:last-child {
    margin-bottom: 0;
}

.katowicka-apartment-text strong {
    font-weight: 700;
}

.katowicka-apartment-gallery {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
}

.gallery-progress {
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    color: #2D2D2D;
    text-align: center;
    margin-top: 16px;
    opacity: 0.6;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes slideInSoft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

/* Apply Animations */
.about-title,
.contact-title,
.katowicka-apartment-title {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

.about-photo,
.contact-photo {
    animation: slideInSoft 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    animation-delay: 0.2s;
}



.katowicka-apartment-text p {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

.about-text p:nth-child(1),
.contact-text p:nth-child(1),
.katowicka-apartment-text p:nth-child(1) {
    animation-delay: 0.4s;
}

.about-text p:nth-child(2),
.contact-text p:nth-child(2),
.katowicka-apartment-text p:nth-child(2) {
    animation-delay: 0.5s;
}

.about-text p:nth-child(3),
.contact-text p:nth-child(3) {
    animation-delay: 0.6s;
}

.katowicka-apartment-text p:nth-child(3) {
    animation-delay: 0.6s;
}

.katowicka-apartment-text p:nth-child(4) {
    animation-delay: 0.7s;
}

.katowicka-apartment-gallery {
    animation: slideInSoft 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    animation-delay: 0.3s;
}



/* Spatial Design Page */
.spatial-section {
    background-color: #FAFAFA;
    min-height: 100vh;
    width: 100%;
    padding: 3rem 3rem 3rem 72px;
}

.spatial-content {
    max-width: 1200px;
    text-align: left;
}

.spatial-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 96px;
    letter-spacing: -0.05em;
    color: #2D2D2D;
    margin-bottom: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

/* Hero Animations */
.hero-title {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

.gallery-item {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

.gallery-item:nth-child(1) {
    animation-delay: 0.1s;
}

.gallery-item:nth-child(2) {
    animation-delay: 0.15s;
}

.gallery-item:nth-child(3) {
    animation-delay: 0.2s;
}

.gallery-item:nth-child(4) {
    animation-delay: 0.25s;
}

.gallery-item:nth-child(5) {
    animation-delay: 0.3s;
}

.gallery-item:nth-child(6) {
    animation-delay: 0.35s;
}

.gallery-item:nth-child(7) {
    animation-delay: 0.4s;
}

.gallery-item:nth-child(8) {
    animation-delay: 0.45s;
}

.spatial-layout {
    display: flex;
    gap: 120px;
    /* Gap between list and gallery */
    margin-top: 48px;
    align-items: flex-start;
}

.list-container {
    flex-shrink: 0;
    width: 300px;
    /* Fixed width for list to ensure stability */
}

.project-list {
    list-style: none;
    margin-top: 0;
    /* Reset since margin is now handled by layout */
}

/* Simple Fade Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.project-item {
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 16px;
    color: #2D2D2D;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

.project-item:hover {
    opacity: 1;
    transform: translateX(10px);
    /* Subtle move on hover */
}

.project-item.active {
    opacity: 1;
    font-weight: 700;
    /* Bold for active element */
}

/* Gallery Container */
.project-gallery {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    /* Align images to the left */
    gap: 24px;
    margin-top: 0;
    /* Removed overflow and scroll-snap for click interaction */
}

/* Hide scrollbar styles as they are no longer needed */
.project-gallery::-webkit-scrollbar {
    display: none;
}

.gallery-image {
    width: auto;
    height: 60vh;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

.image-wrapper {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

/* Navigation Arrows */
.prev {
    left: -60px;
}

.next {
    right: -60px;
}

/* Ensure arrows are clickable even if outside hover zone logic, 
   but since they are children of wrapper, we need to ensure the hover logic 
   doesn't make them flicker if there's a gap. 
   We'll make them always visible but separate, or keep the hover logic if the gap is bridged.
   For now, let's keep them always visible at low opacity so users know they exist outside.
*/
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #2D2D2D;
    opacity: 0;
    /* Keep hover effect as requested originally? Or change? */
    /* Let's try to keep the hover effect but bridge the gap if needed, or better:
       Start with opacity 0, but maybe the user wants them always there? 
       "Subtle arrow" was the prompt. 
       Let's stick to hover, but we need to ensure they don't disappear.
       If I set right: -60px, there is a 20px gap (since width is 40px).
       To fix the gap, I'll add a pseudo element to the arrow to bridge it.
    */
    transition: opacity 0.3s ease, transform 0.2s ease;
    z-index: 10;
}

/* Bridge the gap for hover continuity */
.nav-arrow::before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    width: 40px;
    /* Bridge distance */
}

.prev::before {
    left: 100%;
}

.next::before {
    right: 100%;
}

.nav-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.image-wrapper:hover .nav-arrow {
    opacity: 1;
}

/* Mobile Breakpoint */
@media (max-width: 440px) {

    /* Global Section Padding */
    .about-section,
    .contact-section,
    .katowicka-apartment-section,
    .spatial-section {
        padding: 5rem 20px 3rem 20px;
    }

    /* Mobile Navigation Optimization */
    .logo-container {
        padding: 20px;
    }

    .nav-menu {
        padding: 20px;
        gap: 16px;
    }

    .nav-menu::before {
        height: 56px;
        /* Adjusted for mobile padding */
    }

    .nav-link {
        font-size: 12px;
    }

    /* Hero Title and Subtitle */
    .hero {
        padding: 0 20px;
    }

    .hero-content {
        padding: 5rem 1rem 1rem 1rem;
    }

    .hero-title {
        font-size: 64px;
        /* Adjusted for mobile */
    }

    .hero-subtitle-container {
        margin-top: -16px;
    }

    /* Hide desktop subtitle, show mobile subtitle on mobile */
    .hero-subtitle-desktop {
        display: none;
    }

    .hero-subtitle-mobile {
        display: block;
    }

    .hero-subtitle-marquee {
        animation: marquee 20s linear infinite;
        will-change: transform;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 2rem;
    }

    .gallery-item-wrapper {
        position: relative;
        display: block;
    }

    .gallery-item {
        width: 100%;
        height: auto;
        max-height: none;
        display: block;
    }

    /* Hide desktop project names on mobile */
    .project-name {
        display: none !important;
    }

    /* Mobile overlay styling */
    .mobile-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(45, 45, 45, 0.8);
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-family: 'Overpass Mono', monospace;
        font-weight: 500;
        font-size: 14px;
        color: #FAFAFA;
        text-align: center;
        letter-spacing: 0.02em;
        padding: 0 12px;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 10;
    }

    /* Show overlay on tap (active state for touch) */
    .gallery-item-wrapper:active .mobile-overlay {
        opacity: 1;
    }

    /* Also support hover for testing in desktop DevTools */
    .gallery-item-wrapper:hover .mobile-overlay {
        opacity: 1;
    }

    /* JavaScript-toggled show class for mobile tap */
    .mobile-overlay.show {
        opacity: 1 !important;
    }

    /* Project Gallery - Mobile Single Column */
    .katowicka-apartment-gallery {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .image-wrapper {
        display: block !important;
        width: 100%;
        position: relative;
    }

    .gallery-image {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Hide navigation arrows and progress on mobile */
    .nav-arrow {
        display: none !important;
    }

    .gallery-progress {
        display: none !important;
    }

    /* Show mobile navigation below gallery */
    .project-navigation-mobile {
        display: flex !important;
        justify-content: flex-start;
        gap: 24px;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #E0E0E0;
    }

    /* Titles */
    .about-title,
    .katowicka-apartment-title,
    .spatial-title {
        font-size: 48px;
        /* Adjusted for mobile */
        margin-bottom: 36px;
    }

    /* Contact title same size as about */
    .contact-title {
        font-size: 48px;
        margin-bottom: 24px;
    }

    /* Contact subtitle mobile */
    .contact-subtitle {
        font-size: 12px;
        margin: 24px 0 36px 0;
    }

    /* Layouts Column Directon */
    .katowicka-apartment-layout,
    .about-layout,
    .contact-layout {
        flex-direction: column;
        gap: 48px;
    }

    /* Text Container */
    .katowicka-apartment-text,
    .about-text,
    .contact-text {
        width: 100%;
        height: auto;
    }

    /* Mobile Images */
    .about-photo,
    .contact-photo {
        width: 100%;
        max-width: 400px;
        height: auto;
    }

    /* Contact form matches photo width on mobile */
    .contact-form {
        max-width: 400px;
        width: 100%;
    }

    /* Send button only as wide as needed */
    .form-button {
        width: auto;
        align-self: flex-start;
    }

    /* Gallery Column Layout */
    .katowicka-apartment-gallery {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* Vertical padding between images */
        width: 100%;
    }

    /* Image Wrappers - Show All */
    .katowicka-apartment-gallery .image-wrapper {
        display: block !important;
        /* Override JS hiding */
        width: 100%;
        margin-bottom: 0px;
        animation: none !important;
        /* Disable fade animation on scroll if desired, or keep it */
        opacity: 1 !important;
    }

    /* Hide the first image (cover image) on mobile */
    .katowicka-apartment-gallery .image-wrapper:first-child {
        display: none !important;
    }

    .katowicka-apartment-gallery .gallery-image {
        width: 100%;
        height: auto;
        max-height: none;
    }

    /* Hide Navigation Arrows */
    .nav-arrow {
        display: none !important;
    }
}

/* Contact Form Styles */
.contact-subtitle {
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    color: #2D2D2D;
    margin: 36px 0 48px 0;
    line-height: 1.6;
}

.contact-form {
    flex: 1;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    color: #2D2D2D;
    background-color: #FAFAFA;
    border: 1px solid #2D2D2D;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #888888;
}

.form-input:focus,
.form-textarea:focus {
    border-color: #000000;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-button {
    width: auto;
    align-self: flex-start;
    padding: 12px 24px;
    font-family: 'Overpass Mono', monospace;
    font-weight: 500;
    font-size: 14px;
    color: #FAFAFA;
    background-color: #2D2D2D;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: lowercase;
}

.form-button:hover {
    background-color: #000000;
}

.form-button:active {
    transform: translateY(1px);
}