@media (max-width: 768px) {
    :root {
        --font-size-xs: 0.8rem;
        --font-size-base: 1rem;
        --font-size-lg: 1.4rem;
        --font-size-xl: 2.4rem;
    }
}

#menu-wrapper {
    position: relative;
    z-index: 1000;
}

.tags-container.mobile ul.open {
	transform: translateX(0);
	opacity: 1;
	transition: transform .35s ease, opacity .35s ease;
    }

#hamburger-menu {
    position: relative;
    z-index: 9999 !important;
}

/* MOBILE */
@media (min-width: 769px) {
    .mobile { display: none !important; }
}

@media (max-width: 768px) {
	body.menu-open {
    position: fixed;
    width: 100%;
}

	.nav__brand img {
    	display: block;
  		height: 60px;
	}
	.nav__brand {
		align-items: center;
	}
	.footer { padding: 1rem;}
	.pastille-group-content {
  flex-direction: row;
		flex-wrap: wrap;}
    #menu-wrapper { display: flex !important; align-items: center; }
    #hamburger-menu { display: block !important; }
    #cursor { display: none; }
    .desktop, .tool.desktop, .main_nav.desktop { display: none !important; }
    .main_nav { margin:0; padding:0; height: 4rem; top: 1.5rem; }
    .mobile, .main_nav.mobile { display: flex !important; align-items: center; }
    .view-toggle { margin: 0; }
    .nav { backdrop-filter: none !important; }
    .left-col { width: 40% !important; }
    .two-col { justify-content: center; }
    .team-grid { flex-direction: row !important; flex-wrap: nowrap !important; }
    section { margin-bottom: 0rem;}
    .container.description_text, .project-card, .tags-container, .projects-container, .desc, .tags-desc, .pastille-group, .metadata, .right-col, .services__illustration, .services__content, .quote_large, .hero__content { width: 100% !important; max-width: 100% !important; }
	.metadata {margin-bottom:1rem;}
	.nav__center { width: 20%; }
    .pastille-image { width: 80%; }
    .team-card button { padding: 0.5em; }
    .container { width: 100%; padding: 10px; }
    nav ul { flex-direction: column; gap: 10px; }
    .description-panel { width: 80%; }
    .nav-logo-gif { width: 100%; }
    .nav::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(245,245,245,0.3);
        border-radius: inherit;
        backdrop-filter: blur(12px) saturate(160%);
        pointer-events: none;
        z-index: -1;
    }
	.projects-dynamic { margin-top: 0;}
	.project-list.list-view .project-item {;
  		height: 60px;
	}
	.main_nav.mobile {
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
	}
	.hero {margin-bottom: 1.4rem;}
	body.menu-open .main_nav.mobile {
		background: transparent !important;
		backdrop-filter: none;
	}
	.tags-container {
  		display: none;
	}
	.team-bio-wrapper {
  	display: none;
	}
	.services__content.quote_large { padding:0; }
    .two-column { flex-direction: column; }
    .two-column .image-block, .two-column .text-block {
        width: 100%;
        margin-bottom: 1em;
    }
	.projects__grid { grid-template-columns: repeat(1, 1fr); }
    .bg-image-desktop { opacity: 0; z-index: 0; }
    .bg-image-mobile { opacity: 1; z-index: 1; }
    .left-panel, .right-panel { width: 100%; height: 50%; }
    .section-gallery { padding: 0 1rem; gap: 1rem !important; }
    .gallery-image { margin-bottom: 1.5rem; height: auto !important; }
    .gallery-image img {
        width: 100%;
        height: auto !important;
        object-fit: cover;
    }
    .gallery-caption {
        font-size: 0.6rem !important;;
        line-height: 1.2;
        margin-top: 6px;
        opacity: .6;
    }
    .drop-item { width: 100%; }
    .hero { padding: 1.4rem; }
    .left-col { width: 25%; }
    .hero__content { padding: 0 !important; max-width: 100% !important;padding-top: 5rem !important; }
    .main_nav.mobile, body[dark] .main_nav {
        z-index: 9999;
        /*background: transparent;*/
        box-shadow: none;
        /*backdrop-filter: none;*/
		padding: 0 1rem;
    }
    .grid_item_title { font-size: var(--font-size-xs); }
    .about-team, .about-section, .contact, .projects, .quote, .project-container, .section-quote, .related-projects {
        padding: 1.4rem;
    }
    .first-section { padding-top: 150px !important; }
	.mobile {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
	.main_nav.mobile {
		display: flex;
		flex-direction: row-reverse; 
		justify-content: space-between;
		align-items: center;
	}
	.network-filters.metadata{
		flex-direction: row;
	}
.description-default, .text-left h1 {
  padding: 0;
  width: 100% !important;
}
.description-default.aos-init.aos-animate {
  width: 100%;
  margin:0;
  padding: 0;
}
.container_list {
  width: 100%;
}
.text-left {
  width: 100%;
}
}

/* PROJECTS / SIDEBAR*/
projects-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}


.projects-sidebar {
	    width: 100%;
    margin-bottom: 15px;
    position: sticky;
    top: 7rem !important;      
    align-self: flex-start;
    height: fit-content;
    z-index: 20;
}

.sidebar-filters-mobile {
	    width: 100%;
    	margin-bottom: var(--margin-pastille);
    	position: sticky;
    	top: 0rem !important;      
    	align-self: flex-start;
    	height: fit-content;
    	z-index: 20;
		display: flex;
		gap: var(--margin-pastille);
		justify-content: flex-start;
	align-items: flex-start;
}

.projects-sidebar ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.projects-sidebar li { margin-bottom: 10px; }

.projects-grid { flex: 1; }

.project-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-list.grid-view {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

@media (max-width: 600px) {
   
    .team-card {
        flex: 1 1 100%;
        width: 100%;
    }
    .project-list.grid-view { grid-template-columns: 1fr; }
    .tags-container ul { display: flex; flex-wrap: wrap; }
    .services__inner, .services.quote.reverse .services__inner {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    .services__illustration, .services__content { max-width: 100% !important; }
    .services__content { align-content: flex-start !important; }
    .about-network {
        width: 100% !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px;
    }
    .about-network li { width: 100%; }
    .team-grid { flex-direction: column !important; }
    .left-col { margin-right: auto; }
		.project-taxonomies {
		width 60% !important;
		flex-direction: column;
 		 align-items: flex-start;
	}
}

.bio-left {
    width: 20%;
    color: #999;
}

.bio-right { width: 80%; }

@media (max-width: 900px) {
    .services.quote .services__inner,
    .services.quote.reverse .services__inner {
        flex-direction: column;
		gap: 1rem;
    }
    .services__content, .services__illustration {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .team-card { flex: 1 1 48%; }
    .team-bio-inner { flex-direction: column; }
    .bio-left, .bio-right { width: 100%; }
}

/* BURGER ICON*/

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.burger span {
    width: 25px;
    height: 2px;
    background: black;
}

/* MOBILE SIDE MENU */
/*.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 70%;
    height: 100vh;
    background: white;
    padding: 2rem;
    transform: translateX(-100%);
    transition: transform .3s ease;
}*/
/*
.mobile-menu.open { transform: translateX(0); }

.mobile-menu ul {
    list-style: none;
    padding: 0;
}

.mobile-menu a {
    display: block;
    padding: 1rem 0;
    font-size: 18px;
    color: black;
}*/



.mobile-filters-btn {
    display: none;
    cursor: pointer;
}

@media (max-width: 900px) {
    .mobile-filters-btn { display: inline-flex; align-items: center; }
}

.tags-container.mobile {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}



.main_nav_mobile {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.4rem;

  z-index: 9999;

  display: inline-flex;
  white-space: nowrap; 
  text-align: justify; 
}



#menu-wrapper {
  	max-width: 100%;
 	 display: flex;
 	 justify-content: right;
  	cursor: pointer;
	gap: 15px;
	flex-direction: row-reverse;
}

#hamburger-menu {
  width: 25px;
  height: 20px;
  position: relative;
  z-index: 999999999999;
}

#hamburger-menu span {
  width: 100%;
  height: 2px;
  background-color: black;
  position: absolute;
  border-radius: 10px;
  transition: .4s ease-in-out;
}



@media (max-width: 768px) {
  #menu-wrapper {
    display: flex !important;
    align-items: center;
    margin-left: auto;
  }
}


.slide-fade {
    opacity: 0;
	display: none;
    transform: translateY(-20px);
    pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
    position: fixed;
    inset: 0;
    background: rgba(200, 200, 200, 0.37);
    backdrop-filter: blur(10px) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    font-size:  var(--font-size-base);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
    z-index: 999;
	padding: 1.4rem;
    padding-top: 1.4rem;
  	padding-top: 8rem;
}


.slide-fade.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
	   overflow-y: auto;
    -webkit-overflow-scrolling: touch;
	display: flex;
}
#filters-panel { overflow-x: hidden;}
body.no-scroll {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

.tags-container.mobile .filter-btn {
  margin-bottom: var(--margin-pastille);
}
#hamburger-menu span:nth-child(1) { top: 0; }
#hamburger-menu span:nth-child(2) { top: 9px; }
#hamburger-menu span:nth-child(3) { top: 18px; }
#hamburger-menu span:nth-child(1) { top: 0; }
#hamburger-menu span:nth-child(2) { top: 9px; }
#hamburger-menu span:nth-child(3) { top: 18px; }

#hamburger-menu.open span:nth-child(1) {
  top: 9px;
  transform: rotate(135deg);
}
#hamburger-menu.open span:nth-child(2) {
  opacity: 0;
}
#hamburger-menu.open span:nth-child(3) {
  top: 9px;
  transform: rotate(-135deg);
}

@media (max-width: 1024px) {
    #cursor,
    #cursor-ring,
    #cursor-normal,
    #cursor-full,
    #eye {
        display: none !important;
    }
}
.team-bio-mobile .pastille {margin: 0 !important;}
.team-bio-mobile {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
  padding: 0 10px;
}

@media (min-width: 769px) {
  .team-bio-mobile {
    display: none !important;
  }
}
/
@media (max-width: 768px) {
    #team-bio {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
	
}


.projects-container,
.projects-grid,
#projects-list {
    max-width: 100vw;
    overflow-x: hidden;
	font-size: var(--font-size-base);

}
.tags-container.mobile {
  position: absolute;
}
.apply-filter-btn {
	font-size: var(--font-size-base);
}
body[dark] #hamburger-menu { filter: invert(1);}