@media only screen and (max-width: 540px) {
    h2 {
        font-size: 16px;
    }
    
    .navigation_header {
        z-index: 99;
        width: calc(100% - 32px);
        height: 80px;
        background-color: #EFE8E1;
        padding:16px;
        padding-bottom: 8px;
        transition: height 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
    }

    .header_left {
        height: 100%;
    }

    .home.desktop {
        display: none;
    }

    .home.mobile {
        display: block;
        z-index: 1000;
        position: fixed;
    }

    img.home {
        width: auto;
        height: 48px;
        padding-top: 0px;
        transition: height 0.3s ease, padding-top 0.3s ease;
    }

    ul#topitem {
        text-align: end;
    }

    .header_right {
        position: fixed;
        top: 16px;
        text-align: left;
        right: 16px;
    }

    ul {
        line-height: 120%;
      }

    .header_right a {
        font-size: 14px;
    }

    .left_side {
        width: 100%;
        height: calc(100vh - 104px);
    }
    
    .right_side {
        width: fit-content;
        height: fit-content;
        padding-left: 16px;
        position: absolute;
        top: 80px;
        z-index: 99;
    }

    h1 {
        font-size: 14px;
    }

    .only_left {
        text-align: center;
        padding-bottom: 16px;
        margin-left: 0;
        width: calc(100vw - 32px);
    }

    .only_right {
        width: calc(100% - 16px);
      }

    .only_left p {
        text-align: left;
    }

    .left_review p {
        font-size: 20px;
      }

    h2 {
        padding-top: 32px;
        width: calc(100vw - 32px);
      }

    .doublegrid {
        margin-right: 16px;
        width: calc(100% - 16px);
        gap: 32px;
    }

    .triplegrid {
        grid-template-columns: repeat(2, 1fr);
        margin-right: 16px;
        width: 100%;
    }

    .snapshots {
        margin-right: 16px;
        width: calc(100% - 16px);
    }

    .fourgrid {
        margin-right: 16px;
        width: calc(100% - 16px);
        gap: 48px;
    }

    .mission_values {
        width: calc(100% - 16px);
        padding-right: 16px;
      }

    main {
        margin-left: 16px;
        min-height: calc(100vh - 80px);
    }

    footer {
        margin-left: 0;
    }

    .left_right_footer{
        display: none;
    }

    .home_footer.browser {
        height: 120px;
    }

    section.first_section {
        margin-left: -16px;
        width: calc(100% + 20px);
        padding-top: 104px;
    }

    .temporary {
        width: 100%;
        left: 0;
        padding-top: 104px;
        height: calc(100vh - 104px);
        position: absolute;
    }

    .opening_fourofour {
        margin-left: 0;
        height: 100vh;
    }

    .fourofour {
        font-size: 14px;
    }

    .toggles {
        width: calc(100% - 16px);
        padding-right: 16px;
    }

    .snapshots {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }

    .container {
    top: 104px;
    width: calc(100% - 16px);
    left: 0;
    height: 32px;
    transition: top 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
    padding-left: 16px;
  }

    .projects_grid {
        margin-top: 140px;
    }

    .project_intro {
        margin-top: 140px;
        height: auto;
    }

    .left_project_image {
        display: block;
        width: calc(100% - 16px);
        height: calc(100vh - 140px - 16px);
    }

    .right_project_info {
        width: calc(100% - 16px);
    }

    .arrow.left, .arrow.right{
        display: none !important;
    }

    .image-gallery {
        height: auto;
        display: block;
        overflow-x: hidden;
        width: calc(100vw - 32px);
    }

    figure {
        height: auto;
        width: 100%;
        padding-bottom: 8px;
    }

    .scroll_image {
        height: auto;
        width: 100%;
    }

    /* On scroll: show hamburger, hide nav */
    .navigation_header.scrolled .header_right {
        display: none;
    }
    .navigation_header.scrolled .hamburger {
        display: block;
    }

    /* Fullscreen nav when active */
    .navigation_header.scrolled .header_right.fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: calc(100vw - 32px);
        height: calc(100vh - 32px);
        background-color: #EFE8E1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 999;
        padding: 16px;
      }

    .header_right.fullscreen .close_menu {
        display: block;
    }

    .navigation_header.scrolled .header_right.fullscreen #topitem {
        text-align: center;
    }

    /* When scrolled — smaller and blurred */
    .navigation_header.scrolled {
        height: 32px;
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        padding: 16px;
    }

    .navigation_header.scrolled img.home {
        height: 32px;
        padding-top: 0px;
    }
      
    .navigation_header.scrolled .header_right.fullscreen a {
        font-size: 16px;
    }
    
    .container.shifted {
        top: 64px;  /* New top position when scrolled */
        background-color: rgba(255, 255, 255, 0.5); /* Change background when scrolled */
        backdrop-filter: blur(10px); /* Apply the same blur effect */
        -webkit-backdrop-filter: blur(10px); /* Safari support */
        z-index: 5; /* Lower z-index to be behind the header_right */
      }
    
      .navigation_header.scrolled + .container {
        top: 64px;  /* Optional fallback if you're not using the JS class toggle */
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
}