/* ════════════════════════════════════════════════════
   RESPONSIVE — all @media breakpoints (consolidated)
   Edit this file to adjust responsive behaviour.
   Loaded after brandim.css so specificity is correct.
   ════════════════════════════════════════════════════ */

@media screen and (min-width: 2000px) {
	.bi-nav.stickyNav{
		background-size: cover;
	}
}

@media screen and (max-width: 1800px) {
	.about-section-main-title h3,
	.banner-content h1{
		font-size: 70px;
	}
	.bi-about-intro-title{
		font-size: 28.2px;
	}
	.bi-about-intro-title strong{
		font-size: 27.691px;
	}
	.bi-inner-container{
		font-size: 30.691px;
	}
	.bi-title svg{
		width: 325px;
	}
}

@media screen and (max-width: 1700px) {
	.bi-showcase-box.box-align-center.index-5 {
		position: relative;
		left: -290px;
	}
	/*.bi-showcase-box.box-align-left.index-7{*/
		/*margin-top: 0;*/
	/*}*/
	/*.bi-showcase-box.box-align-right.index-8 {*/
		/*margin-top: 0;*/
	/*}*/
}

/* index-7 / index-8 sit side by side (negative margin) — shrink index-7 video so they don't overlap */
@media screen and (min-width: 1441px) and (max-width: 1800px) {
	.index-7 .bi-showcase-item-cover{
		width: calc(100vw - 400px - min(637px, (100vw - 300px) / 2));
	}
}

@media screen and (max-width: 1600px) {
	.about-section-main-title h3,
	.banner-content h1{
		font-size: 60px;
	}
	.about-area-here{
		max-width: 836px;
	}
	.about-with-img img {
		width: 284.223px;
		height: 234px;
	}
	.awi-content p,
	.about-description p {
		margin-bottom: 0;
		font-size: 22.691px;
		line-height: 42.472px;
	}
	.bi-about{
		padding-bottom: 170px;
		margin-top: 128px;
	}
	.banner-content .banner-img svg {
		width: 417px;
	}
	.banner-content h2{
		font-size: 67.717px;
	}
	.bi-about-intro-title{
		font-size: 24.2px;
		line-height: 40.472px;
	}
	.bi-inner-container{
		font-size: 26.691px;
		line-height: 46.472px;
	}
	.bi-about-intro-title strong{
		font-size: 23.891px;
	}
	.bi-title svg{
		width: 300px;
	}
	.menu-area.menu-open {
		width: 100%;
	}
	.bi-showcase-item{
		max-width: 50%;
	}

	/*.bi-showcase-box.box-align-right.index-6{*/
		/*margin-top: 0;*/
	/*}*/
}

@media screen and (max-width: 1440px) {
	.about-section-main-title h3,
	.banner-content h1{
		font-size: 50px;
	}
	.bi-showcase-item{
		max-width: 45%;
	}
	.banner-content h2{
		font-size: 57.717px;
	}
	.bi-about-intro-title{
		font-size: 20.2px;
		line-height: 36.472px;
	}
	.bi-about-intro-title strong{
		font-size: 20px;
	}
	.bi-inner-container{
		font-size: 22.691px;
		line-height: 42.472px;
	}
	.bi-title svg{
		width: 250px;
	}
	.bi-project-content h3,
	.filters-wrap h1{
		font-size: 30px;
		line-height: 30px;
	}
	.about-area-here{
		max-width: 836px;
	}
	.bi-about{
		margin-top: 0;
	}
}

@media screen and (max-width: 1366px) {
	.about-area-here{
		max-width: 736px;
	}

	.bi-nav-subitem,
	.bi-nav-item{
		font-size: 18px;
	}
	.bi-showcase-item{
		max-width: 100%;
	}
	.bi-showcase-box.box-align-right.index-6,
	.bi-showcase-box.box-align-left.index-7,
	.bi-showcase-box.box-align-right.index-8{
		margin-top: 0;
	}
	.bi-about{
		padding-bottom: 170px;
		margin-top: 0px;
	}
	.bi-title-svg{
		justify-content: end;
	}
	.bi-contact{
		padding-top: clamp(40px, 24vw, 100px);
	}
	footer h3.form__title{
		font-size: 23.691px;
		line-height: 41.472px;
	}
	.bi-contact-details{
		justify-content: end;
	}
	.banner-content h2 {
		font-size: 47.717px;
	}
	.filters-wrap ul li{
		font-size: 18px;
		line-height: 36px;
	}
	.bi-project-subtitle{
		font-size: 22px;
	}
}

@media screen and (max-width: 1280px) {
	.about-section-main-title h3,
	.banner-content h1{
		font-size: 40px;
	}
	.bi-project-nav-box.bi-project-nav-box-right {
		padding-left: 80px;
	}
	.bi-about-intro-title{
		font-size: 20.2px;
		line-height: 36.472px;
	}
	.bi-inner-container{
		font-size: 20.691px;
		line-height: 40.472px;
	}
	.bi-about-intro-title strong{
		font-size: 19.891px;
	}
	.bi-title svg{
		width: 200px;
	}
	.banner-content .banner-img svg{
		width: 317px;
	}
	.bi-title{
		left: 100px;
	}
	.bi-container{
		padding-left: 100px;
		padding-right: 100px;
	}
	.about-description p {
		padding-bottom: 30px;
	}
	.about-with-img img{
		height: 264px;
	}
	.bi-about{
		padding-bottom: 120px;
		margin-top: 128px;
	}
	.bi-showcase-item-bg{
		width: 70%;
	}
	.bi-project-list-content,
	.bi-showcase-container{
		gap:88px;
	}
	.bi-about-trg {
		height: 10vh;
	}
	.bi-project-subtitle{
		font-size: 20px;
	}
	.taxonomy-content{
		width: calc(100% - 200px);
	}
	.bi-container.bi-project-info{
		width: calc(100% - 200px);
	}
	.bi-project-nav-btn{
		font-size: 22px;
		line-height: 41.472px;
	}
}

@media screen and (max-width: 1100px) {
	.bi-about-intro-title strong{
		padding-left: 5px;
		display: inline;
	}
	.bi-about-intro-title{
		width: clamp(524px, 24vw, 520px);
	}
	footer .bi-title{
		bottom: 40px;
	}
	.bi-showcase-box.box-align-center.index-5{
		left: 0;
	}
	.footer-links{
		top:0;
	}
}

@media screen and (max-width: 991px) {

	.about-area-here {
		padding-right: 0;
	}
	.taxonomy-page .bi-project-content {
		width: 100%;
		padding-bottom: 0;
		justify-content: space-between;
	}

	.bi-project-nav-btn{
		font-size: 20px;
		line-height: 31.472px;
	}
	.filters-wrap h1{
		font-size: 26px;
	}
	.filters-wrap ul li{
		font-size: 16px;
	}
	.filters-wrap ul span{
		padding: 0px 10px;
	}
	.bi-state-projects .bi-project-content{
		width: 100%;
		padding-bottom: 0;
	}
	.bi-showcase-item-title{
		font-size: 26px;
		line-height: 41.472px;
	}
	.preview-more{
		font-size: 18px;
	}
	.about-section-main-title h3, .banner-content h1{
		font-size: 36px;
	}
	.banner-content .banner-img svg {
		width: 317px;
	}
	.wpcf7-form input:not([type="submit"]):not([type="checkbox"]), .wpcf7-form textarea{
		font-size: 18px;
		width: 100%;
	}
	.wpcf7-form .fieldWrap.last{
		margin-bottom: 20px;
	}
	.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item-label a{
		line-height: 20.472px;
	}
	.wpcf7-form-control.wpcf7-acceptance input{
		width: 16px;
	}
	.wpcf7-form-control.wpcf7-acceptance label{
		align-items: flex-start;
	}
	.wpcf7-form input[type="submit"]{
		font-size: 18px;
		margin-top: 35px;
	}
	.footer-links ul a {
		font-size: 18px;
		line-height: 41.472px;
	}
	.bi-contact-item .contact-item__value,
	.bi-contact-item a.contact-item__value{
		font-size: 18px;
		line-height: 28px;
	}
	.bi-inner-container {
		font-size: 18.691px;
		line-height: 38.472px;
	}
	.bi-inner-container br {
		display: none;
	}
	.banner-content h2 {
		font-size: 37.717px;
	}
	.bi-about-intro-title {
		width: 90%;
	}


	.bi-container.bi-container-contacts {
		grid-column-gap: clamp(40px, 8vw, 56px);
		grid-row-gap: clamp(40px, 8vw, 56px);
		flex-flow: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.bi-container.bi-container-works-grid {
		flex-flow: column;
	}
	.bi-container.bi-project-info {
		flex: 0 auto;
	}
	.bi-hero-bg {
		height: 150vh;
	}
	.bi-hero-bg-canvas {
		z-index: 10;
	}
	.bi-nav-menu-list {
		display: flex;
	}
	.box.bi-contact-box {
		height: auto;
	}
	.bi-inner-container {
		width: 100%;
		max-width: 560px;
	}
	.bi-showcase-box {
		min-height: auto;
	}
	.bi-showcase-box.bi-projects-box-top.bi-projects-box-m-left {
		min-height: auto;
	}
	.bi-loader {
		font-size: 1rem;
	}
	.bi-about-intro {
		bottom: 0;
	}
	.bi-showcase {
		grid-column-gap: 5vh;
		grid-row-gap: 5vh;
		margin-bottom: 0;
	}
	.bi-about {
		padding-bottom: 80px;
		margin-top: 50px;
	}
	.bi-contact {
		padding-top: 50px;
	}
	.form {
		width: 100%;
		max-width: 560px;
		height: auto;
		max-height: none;
	}
	.bi-contact-details {
		max-width: 560px;
		height: auto;
		max-height: none;
		padding-top: 0;
	}
	.bi-project-head {
		width: auto;
	}
	.bi-project-description {
		width: auto;
		height: auto;
	}
	.bi-project-gallery {
		height: clamp(320px, 80vh, 600px);
	}
	.bi-project-extra {
		display: none;
	}
	.bi-project-content {
		width: 60%;
		padding-bottom: 80px;
	}
	.bi-hero-bg-plane {
		z-index: 20;
		height: 70%;
	}
	.bi-about-quote {
		width: 0%;
		display: none;
	}
	.bi-nav-menu {
		display: flex;
	}
	.bi-title.title__mobile {
		width: clamp(480px, 60vw, 580px);
		margin-bottom: 24px;
		padding-bottom: 0;
		padding-left: 0;
		display: flex;
		position: relative;
	}
	.bi-title.title__desktop {
		display: none;
	}
	.bi-title.title__contact {
		width: clamp(480px, 60vw, 580px);
		padding-bottom: 0;
		padding-left: 0;
		display: flex;
		position: relative;
	}
	.bi-title.bi-title-intro {
		padding-bottom: 120px;
		padding-left: clamp(16px, 2vw, 24px);
		position: fixed;
	}
	.bi-title.bi-title-about {

	}
	.bi-title.bi-title-contacts {
		padding-bottom: 0;
		padding-left: 0;
	}
	.bi-nav-view {
		justify-content: center;
		align-items: center;
		display: flex;
	}
	.bi-project-gallery-next.bi-project-gallery-item {
		max-width: 98vw;
	}
	.bi-projects {
		position: relative;
	}
	.bi-social {
		left: 0;
	}
	.bi-contact-info.bi-contact-box,
	.bi-contact-form.bi-contact-box {
		height: auto;
	}
	.bi-title-shape.bi-title-shape-about {
		display: none;
	}
	.bi-title-shape.bi-title-shape-about.bi-title-shape-mobile {
		display: block;
		position: relative;
	}
	.bi-title-shape.bi-title-shape-contacts,
	.bi-title-shape.bi-title-shape-contacts.title-shape__mobile {
		opacity: 1;
		position: relative;
	}
	.cases__contacts {
		padding-top: 0;
	}
	.img-box {
		display: none;
	}
	.shakuro {
		display: flex;
	}

	.bi-fullscreen-project .bi-project-gallery-content {
		flex-flow: column;
		width: 100%;
	}
	.bi-fullscreen-project .bi-project-gallery-item {
		width: 100%;
		margin-right: 0;
		margin-bottom: 4px;
	}
	.bi-fullscreen-project .bi-project-gallery-next {
		min-height: 40vh;
	}
}

@media screen and (max-width: 768px) {

	.footer-links {
		position: relative;
		top: 0;
	}

	header .bi-nav-item{
		font-size: 44px;
	}

	html.lenis-stopped body.bi-fullscreen-project .bi-project-gallery,
	html.lenis-stopped body.bi-fullscreen-project .bi-project-gallery-content {
		touch-action: pan-y !important;
		pointer-events: auto !important;
		overflow: visible !important;
	}

	body.bi-fullscreen-project .bi-project-gallery {

		position: unset !important;
		background: #fff !important;
		z-index: 9999;
		overflow: hidden;
		min-height: auto;
		padding-right: 0;
		touch-action: pan-y !important;
		overscroll-behavior: contain;
	}
	body.bi-fullscreen-project .bi-project-gallery-item{
		height: 100% !important;
	}
	body.bi-fullscreen-project .bi-project-gallery-content {
		touch-action: pan-y !important;
	}


	.bi-container.bi-project-info{
		padding-bottom: 40px;
	}

	.taxonomy-content h1{
		font-size: 26px;
	}

	body.bi-state-project-details .bi-about-intro,
	body.bi-state-projects .bi-about-intro {
		opacity: 0 !important;
		visibility: hidden !important;
	}

	.bi-nav-item{
		display: flex;
		width: 100%;
	}

	.bi-submenu-arrow {
		display: inline-block;
		margin-right: 8px;
		cursor: pointer;
		font-size: 30px;
		vertical-align: middle;
		width: 100%;
		text-align: left;
		transition: transform 0.3s ease;
	}

	/*.bi-submenu-arrow.open {*/
		/*transform: rotate(180deg);*/
	/*}*/

	.sub-menu {
		overflow: hidden;
		position: static !important;
		max-height: 0;
		opacity: 0;
		display: none;
		transition: max-height 0.35s ease, opacity 0.35s ease;
	}

	.bi-contact-form,
	.bi-contact-box,
	.bi-contact-item,
	.bi-contact-info {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}

	.bi-showcase-box.box-align-center.index-5 {
		position: relative;
		left: 0px;
	}
	.bi-showcase-box.box-align-right.index-6 {
		margin-top: 0px;
	}
	.bi-showcase-box.box-align-left.index-7 {
		margin-top: 0px;
	}
	.bi-showcase-box.box-align-right.index-8 {
		margin-top: 0px;
	}
	.bi-showcase-box.box-align-right.index-10 {
		padding-right: 0px;
	}

	.bi-nav-toggle{
		background-image: url("../images/hamburger.svg");
		background-size: contain;
		width: 19px;
		height: 20px;
		background-position: center;
		background-repeat: no-repeat;
	}
	.bi-nav-toggle-text.text100{
		text-indent: -1000000px;
	}
	.bi-nav-toggle.open-menu{
		background-image: url("../images/close_menu.svg");
		width: 10px;
		height: 10px;
		background-size: auto;
		background-position: center;
	}

	body.bi-state-project-details .bi-nav-menu-list,
	body.bi-state-projects .bi-nav-menu-list {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	body.bi-state-project-details .bi-nav-item,
	body.bi-state-projects .bi-nav-item {
		display: flex !important;
		visibility: visible !important;
	}

	/* Hide inner controls completely on mobile */
	.bi-inner-nav-controls {
		display: none !important;
	}

	.bi-about-intro-title {
		font-size: 16.2px;
		line-height: 26.472px;
	}
	.bi-inner-nav-controls{
		display: none !important;
	}


	.bi-nav-container.bi-container{
		position: unset;
	}
	.bi-project-nav-btn{
		font-size: 18px;
	}
	.bi-container.filters-wrap{
		flex-direction: column;
		gap: 0;
		height: 80px;
	}

	.taxonomy-page .bi-project-content{
		width: 100%;
		padding-bottom: 0;
		justify-content: space-between;
		flex-direction: column;
	}
	.bi-project-nav-box.bi-project-nav-box-right {
		justify-content: flex-end;
		padding-left: 60px;
	}
	.taxonomy-page {
		padding-top: 84px;
		padding-bottom: 90px;
	}
	.bi-nav{
		padding-top: 51px;
	}
	.bi-nav-toggle{
		top: auto;
	}

	.taxonomy-content{
		width: calc(100% - 140px);
	}
	.bi-container.bi-project-info{
		width: calc(100% - 140px);
	}
	.bi-projects-filters{
		margin-top: 120px;
		padding-bottom: 30px;
	}
	.case-chevron svg {
		width: 50px;
		height: 50px;
	}
	.bi-project-subtitle {
		font-size: 18px;
	}
	.bi-project-content h3, .filters-wrap h1 {
		font-size: 26px;
		line-height: 26px;
	}
	.bi-about-intro-title strong {
		font-size: 16.691px;
	}
	.bi-hero-bg-plane{
		height: 100%;
	}
	.banner-content .banner-img svg {
		width: 250px;
	}
	.bi-inner-container {
		font-size: 16.691px;
		line-height: 36.472px;
	}
	.bi-contact-info {
		flex-direction: column-reverse;
	}
	.bi-contact-details{
		max-width: 100%;
		justify-content: flex-start;
	}
	.wpcf7-form-control.wpcf7-acceptance label {
		align-items: center;
	}
	.wpcf7-form input[type="submit"] {
		font-size: 16px;
		margin-top: 25px;
	}
	.wpcf7-form input:not([type="submit"]):not([type="checkbox"]), .wpcf7-form textarea{
		font-size: 16px;
	}
	.wpcf7-form textarea {
		height: 100px;
	}
	.footer-links, .footer-links ul{
		margin-top: 20px;
	}
	.footer-links ul a {
		font-size: 16px;
		line-height: 31.472px;
	}
	.bi-contact-item .contact-item__value, .bi-contact-item a.contact-item__value {
		font-size: 16px;
		line-height: 26px;
	}
	.bi-title.bi-title-intro{
		padding-bottom: 70px;
	}
	.banner-content h1{
		padding-top: 265px;
	}
	.bi-container {
		padding-left: 70px;
		padding-right: 70px;
	}
	.bi-title {
		left: 55px;
	}
	.bi-about-intro-title {
		font-size: 16.2px;
		line-height: 26.472px;
	}
	.bi-about-intro-title strong {
		font-size: 16.691px;
	}
	.bi-showcase-item{
		min-height: auto !important;
	}

	.bi-hero-bg {
		height: 130vh;
	}
	.bi-nav-menu-list {
		padding-top: var(--size--gap-200);
		padding-right: var(--size--gap-200);
		padding-bottom: var(--size--gap-200);
		padding-left: var(--size--gap-200);
		grid-column-gap: clamp(2rem, 1.1155rem + 3.9312vw, 3rem);
		grid-row-gap: clamp(2rem, 1.1155rem + 3.9312vw, 3rem);
		flex-flow: column;
		justify-content: center;
		align-self: flex-end;
		align-items: flex-start;
		height: 100%;
		display: flex;
		width: 100%;
	}
	.bi-nav-item {
		line-height: 1;
	}
	.bi-nav-item.text100 {
		font-size: clamp(3.5rem, 2.1732rem + 5.8968vw, 5rem);
	}
	.box {
		width: auto;
		position: relative;
	}
	.bi-showcase-item {
		max-height: 100%;
	}
	.index-8 .bi-showcase-item,
	.index-6 .bi-showcase-item,
	.index-3 .bi-showcase-item,
	.index-1 .bi-showcase-item{
		justify-content: flex-start;
		align-items: center;
	}
	.index-9 .bi-showcase-item,
	.index-7 .bi-showcase-item,
	.index-4 .bi-showcase-item,
	.index-2 .bi-showcase-item{
		justify-content: end;
		align-items: center;
	}
	.bi-showcase-box {
		min-height: auto;
	}
	.bi-showcase-box.bi-projects-box-top.bi-projects-box-m-left {
		justify-content: flex-start;
		align-items: flex-start;
	}
	.bi-showcase-box.bi-projects-box-bottom.bi-projects-box-m-right {
		justify-content: flex-end;
		align-items: flex-end;
	}
	.bi-showcase-box.bi-projects-box-m-left {
		justify-content: flex-start;
		align-items: center;
	}
	.bi-showcase {
		grid-column-gap: 12vh;
		grid-row-gap: 12vh;
	}
	.bi-project-description {
		width: auto;
	}
	.bi-project-gallery {
		height: clamp(320px, 70vh, 520px);
	}
	.taxonomy-page .bi-project-gallery {
		height: clamp(320px, 70vh, 300px);
	}
	.bi-project-extra {
		width: 0%;
		height: 0;
		display: none;
	}
	.bi-project-content {
		width: auto;
	}
	.bi-nav-menu {
		z-index: 5;
		width: 0%;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		overflow: hidden;
		justify-content: center;
	}
	.bi-nav-menu .sub-menu{
		position: unset;
		background: transparent;
		padding-right: 0;
		display: none;
		overflow: hidden;
		position: static !important;
		width: 100%;
		background: transparent;
		list-style: none;
		margin: 0;
		padding: 0;
		direction: rtl;
	}
	.bi-nav-menu-social {
		padding: var(--size--gap-200);
		grid-column-gap: var(--size--gap-200);
		grid-row-gap: var(--size--gap-200);
		display: flex;
	}
	.bi-title.title__mobile,
	.bi-title.title__contact {
		width: clamp(420px, 80vw, 580px);
	}
	.bi-title.bi-title-contacts {
		width: clamp(440px, 39.1vw, 980px);
	}
	.bi-nav-view {
		width: 100%;
		position: absolute;
		inset: 0;
	}
	.bi-nav-toggle {
		visibility: visible;
		display: flex;
		right: 60px;
	}
	.bi-nav-view-btn {
		line-height: 1;
	}
	.bi-nav-menu-overlay {
		grid-template-rows: auto;
		/*grid-template-columns: 1fr;*/
		grid-auto-columns: 1fr;
		display: grid;
	}
	.bi-nav-box {
		width: auto;
		position: relative;
	}
	.bi-showcase-container {
		flex-flow: column;
	}
	.bi-showcase-container.bi-container {
		grid-column-gap: 12vh;
		grid-row-gap: 12vh;
		flex-flow: column;
	}
	.bi-nav-close-btn {
		display: flex;
	}
	.bi-social {
		grid-column-gap: var(--size--gap-200);
		grid-row-gap: var(--size--gap-200);
		display: flex;
	}
	.bi-contact-box {
		min-width: 180px;
		position: relative;
	}
	.bi-contact-info,
	.bi-contact-form {
		width: auto;
		position: relative;
	}
	.shakuro {
		display: none;
	}
}

@media screen and (max-width: 680px) {
	.bi-title.bi-title-intro {
		padding-bottom: 100px;
	}
	.bi-nav-menu-list .bi-nav-item::after{
		bottom: -10px;
	}
	.banner-content{
		margin: 0 30px;
	}
	header .bi-nav-item{
		font-size: 34px;
	}
	.bi-nav-item-value, .bi-social-item-value{
		width: 100%;
	}
	.ios .bi-contact {
		padding-bottom: clamp(106px, 6vw, 64px);
	}
	.bi-project-gallery{
		padding-right: 30px;
	}
	.bi-state-project-details .bi-project-gallery{
		padding-right: 0px;
		height: auto;
	}
	.bi-state-project-details .bi-project-gallery-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex: auto;
	}
	.about-area-here {
		padding-right: 0;
	}
	.banner-content h1 {
		padding-top: 325px;
	}
	.about-with-img{
		flex-direction: column;
	}
	.about-with-img img {
		height: 100%;
		width: 100%;
	}
	.bi-nav.stickyNav .stick-logo{
		width: 146.993px;
	}
	svg.large-logo {
		width: 146px;
	}
	.bi-project-meta-date, .bi-project-meta-type,
	.bi-project-description p:last-child{
		font-size: 16px;
	}
}

@media screen and (max-width: 580px) {
	.filters-wrap ul li {
		font-size: 14px;
	}
	.filters-wrap ul span {
		padding: 0px 6px;
	}
	.bi-title.bi-title-intro{
		display: none;
	}
	.bi-showcase{
		margin-top: 25px;
	}
	.bi-about-intro-title .for-mobile {
		display: flex;
		flex-direction: column;
	}
	.bi-about-intro-title .for-desktop{
		display: none;
	}
	.bi-about-intro {
		right: 13%;
	}
	.bi-about-intro-title {
		width: 253px;
	}
	.bi-showcase-container.bi-container {
		padding-left: 18px;
		padding-right: 18px;
	}
	.bi-showcase-container.bi-container{
		gap:50px;
	}
	.index-1 .bi-showcase-item-bg{
		width: 215px;
		height: 238px;
		aspect-ratio: 215/238;
	}
	.index-2 .bi-showcase-item-bg{
		width: 223px;
		height: 135px;
		aspect-ratio: 223/135;
	}
	.index-3 .bi-showcase-item-bg{
		width: 221px;
		height: 147px;
		aspect-ratio: 221/147;
	}
	.index-4 .bi-showcase-item-bg{
		width: 254.1px;
		height: 109px;
		aspect-ratio: 254.10/109.00;
	}
	.index-5 .bi-showcase-item-bg{
		width: 122.94px;
		height: 144.455px;
		aspect-ratio: 40/47;
	}
	.index-6 .bi-showcase-item-bg{
		width: 130px;
		height: 195px;
		aspect-ratio: 2/3;
	}
	.index-7 .bi-showcase-item-bg{
		width: 224.226px;
		height: 134px;
		aspect-ratio: 169/101;
	}
	.index-8 .bi-showcase-item-bg{
		width: 188.451px;
		height: 188.451px;
		aspect-ratio: 1/1;
	}
	.bi-showcase-box.box-align-center.index-5{
		justify-content: left;
	}
	.bi-showcase-box.box-align-right.index-6 {
		margin-top: -120px;
		margin-right: 20px;
	}
	.bi-about{
		margin-top: 0;
	}
	.about-section-main-title h3{
		font-size: 25px !important;
		margin-bottom: 12px;
	}
	.awi-content p,
	.about-description p {
		font-size: 15px;
		line-height: 21px;
	}
	.about-description p {
		padding-bottom: 30px !important;
	}
	.about-with-img img {
		width: 123px;
		height: 149px;
		aspect-ratio: 123/149;
	}
	.about-with-img {
		gap: 14px;
	}
	.bi-about{
		padding-bottom: 40px;
	}
	.index-7 .bi-showcase-item-cover{
		width: 100%;
	}
	.bi-about-intro-title .for-mobile,
	.bi-about-intro-title strong {
		font-size: 15px;
		line-height: 20px;
	}

}

@media screen and (max-width: 480px) {
	.bi-nav {
		padding-top: 21px;
	}
	.bi-about-intro {
		bottom: 260px; /* fallback for browsers without dvh */
		/* pin the intro text's BOTTOM edge 28px above the end of the 572px mobile banner, on every phone height.
		   If the text gets taller (e.g. Samsung/Android larger system font) it grows upwards into the space under
		   "Bigger" (which ends ~431px from the top) instead of running out of the banner. */
		bottom: max(16px, calc(100dvh - 554px));
	}
	.banner-content {
		margin: 0 auto !important;
	}
	.bi-hero,
	.bi-hero-bg {
		height: 572px;
	}

	.bi-container {
		padding-left: 30px;
		padding-right: 30px;
	}
	.bi-project-nav-box.bi-project-nav-box-right {
		padding-left: 15px;
	}

	.bi-nav-close-btn{
		bottom: 10px;
		right: 30px;
	}
	.bi-container.bi-project-info{
		padding-bottom: 20px;
	}
	.taxonomy-content{
		width: calc(100% - 60px);
	}
	.bi-container.bi-project-info {
		width: calc(100% - 60px);
	}
	.case-chevron svg {
		width: 40px;
		height: 40px;
	}
	.bi-project-list-content, .bi-showcase-container {
		gap: 68px;
	}
	.bi-nav-toggle {
		right: 30px;
	}
	.footer-links ul {
		gap: 15px;
	}
	.footer-links ul a {
		font-size: 13px;
		line-height: 21.472px;
	}
	.wpcf7-form-control.wpcf7-acceptance label,
	.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item-label a{
		font-size: 11px;
		gap: 5px;
	}
	.wpcf7-form-control.wpcf7-acceptance input {
		width: 14px;
		height: 14px;
	}
	.filters-wrap ul li {
		font-size: 12px;
	}
	footer h3.form__title {
		font-size: 20.691px;
		line-height: 38.472px;
	}
	.about-section-main-title h3, .banner-content h1 {
		font-size: 28px;
	}
	.banner-content h2 {
		color: #000;
		text-align: center;
		font-size: 30px;
		font-style: normal;
		font-weight: 500;
		line-height: 35px;
		width: 179px;
		margin: 0 auto;
		margin-top: 10px;
	}
	.banner-content .banner-img svg {
		width: 286px;
		height: 114px;
	}
	.bi-title {
		left: 12px;
	}

	.about-description p{
		padding-bottom: 20px;
	}
	.bi-title svg {
		width: 180px;
	}
	.bi-title.bi-title-contacts{
		padding-left: 20px;
	}
	.filters-wrap ul li {
		font-size: 12px;
	}
	.footer-links ul a{
		font-size: 11px;
	}
	.bi-project-gallery{
		margin-bottom: 50px;
	}
	.bi-project-gallery {
		height: clamp(320px, 40vh, 420px);
	}
	.banner-content h1 {
		padding-top: 105px;
		font-size: 40px;
		line-height: 44px;
		font-weight: 200;
		width: 218px;
		text-align: center;
		margin: 0 auto;
	}
	.ios .bi-about-intro{
		bottom: max(16px, calc(100dvh - 544px));
	}
}

@media screen and (max-width: 380px) {
	.wpcf7-form-control.wpcf7-acceptance label,
	.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item-label a{
		font-size: 10px;
	}
	.footer-links ul a {
		font-size: 11px;
		line-height: 21.472px;
	}
	.bi-title svg {
		width: 150px;
	}
	.bi-nav-toggle{
		right: 32px;
	}
	.filters-wrap ul li {
		font-size: 11px;
	}
	.filters-wrap ul span {
		padding: 0px 5px;
		font-size: 16px;
	}
	.bi-project-nav-box.bi-project-nav-box-right {
		padding-left: 20px;
	}
}

@media screen and (max-width: 479px) {


	.bi-nav-item {
		line-height: 1.2;
	}
	.bi-nav-item.w--current {
		color: var(--color--txt-900);
	}
	.bi-nav-item.text100.w--current {
		color: var(--color--txt-300);
	}
	.text100 {
		font-size: 14px;
	}
	.text400 {
		font-size: clamp(16px, 4.8vw, 24px);
	}
	.text400.bi-about-intro-title {
		width: 100%;
	}
	.bi-about-intro {
		width: calc(100% - 32px);
	}
	.bi-contact-details {
		grid-column-gap: clamp(16px, 10vw, 24px);
		grid-row-gap: clamp(16px, 10vw, 24px);
		flex-flow: wrap;
		justify-content: space-between;
		align-items: stretch;
	}
	.bi-nav-menu-social {
		grid-column-gap: 1rem;
		grid-row-gap: 1rem;
		flex-flow: row;
		display: flex;
	}
	.textarea {
		min-height: 10vh;
	}
	.bi-title.title__mobile,
	.bi-title.title__contact {
		width: 100%;
	}
	.bi-title.bi-title-intro {
		width: calc(100% - 20px);
		padding-bottom: clamp(96px, 28vw, 132px);
	}
	.bi-title.bi-title-contacts {
		width: 100%;
	}
	.bi-nav-view {
		display: flex;
	}
	.bi-nav-view-btn {
		line-height: 1.2;
	}
	.bi-nav-view-btn.w--current {
		color: var(--color--txt-900);
	}
	.bi-showcase-container {
		flex-flow: column;
	}
	.bi-social {
		grid-column-gap: 1rem;
		grid-row-gap: 1rem;
		flex-flow: row;
		display: flex;
	}
	.bi-contact-box {
		width: auto;
		min-width: 160px;
	}
	.text100-2 {
		font-size: 14px;
	}
	.text900 {
		font-size: clamp(96px, 32vw, 200px);
	}
	.text900.bi-about-intro-title {
		width: 100%;
	}
	.shakuro {
		grid-column-gap: 1rem;
		grid-row-gap: 1rem;
		flex-flow: row;
		display: none;
	}
}

@media (min-width: 769px) {
	.bi-inner-nav-controls{
		display: none;
	}
	body.bi-state-project-details .bi-nav-menu,
	body.bi-state-projects .bi-nav-menu {
		display: none;
		overflow: hidden;
	}

	body.bi-state-project-details .bi-nav-menu.is-open,
	body.bi-state-projects .bi-nav-menu.is-open {
		display: block;
		overflow: visible;
	}
	body.bi-state-project-details .bi-inner-nav-controls,
	body.bi-state-projects .bi-inner-nav-controls {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/* Both buttons sit in same position so swap is seamless */
	.bi-inner-menu-toggle,
	.bi-inner-menu-close {
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		width: 30px;
		height: 40px;
		position: absolute;
		top: 0;
		right: 0;
	}
	.bi-inner-menu-toggle{
		top: -5px;
	}
	button.bi-inner-menu-toggle img{
		width: 100%;
		height: 100%;
	}

	/* Hide menu on inner pages by default */
	body.bi-state-project-details .bi-nav-menu,
	body.bi-state-projects .bi-nav-menu {
		display: none;
		top: 100%;
		z-index: 999;
		overflow: hidden;
	}

	body.bi-state-project-details .bi-nav-menu.is-open,
	body.bi-state-projects .bi-nav-menu.is-open {
		display: block;
	}

	/* Nav list layout in inner menu */
	body.bi-state-project-details .bi-nav-menu-list,
	body.bi-state-projects .bi-nav-menu-list {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: right;
		padding: 30px 0;
		gap: 0;
		direction: rtl;
	}

	/* Nav items */
	body.bi-state-project-details .bi-nav-item,
	body.bi-state-projects .bi-nav-item {
		font-size: 24px;
		font-weight: 700;
		padding: 0;
		display: block;
	}

	/* Sub-menu — hidden by default, show on hover */
	body.bi-state-project-details .sub-menu,
	body.bi-state-projects .sub-menu {
		position: static !important;
		display: block !important; /* always block, use max-height instead */
		width: 100%;
		background: transparent !important;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s ease;
	}

	body.bi-state-project-details .bi-nav-item:hover + .sub-menu,
	body.bi-state-project-details .sub-menu:hover,
	body.bi-state-projects .bi-nav-item:hover + .sub-menu,
	body.bi-state-projects .sub-menu:hover {
		max-height: 400px; /* large enough to fit all items */
		transition: max-height 0.4s ease;
	}

	/* Sub items */
	body.bi-state-project-details .bi-nav-subitem,
	body.bi-state-projects .bi-nav-subitem {
		display: block;
		text-align: right;
		/*border-bottom: 2px solid #000;*/
		padding: 0;
		font-size: 20px;
		font-weight: 400;
		color: #000;
		text-decoration: none;
	}

	body.bi-state-project-details .sub-menu li:last-child .bi-nav-subitem,
	body.bi-state-projects .sub-menu li:last-child .bi-nav-subitem {

	}
}

@media screen and (min-width: 1280px) {
	.form {
		width: clamp(424px, 24vw, 520px);
	}

	.bi-project-extra {
		width: 100%;
		height: 100%;
		display: flex;
	}
	.bi-project-gallery-next.bi-project-gallery-item {
		max-width: 720px;
	}
	.bi-nav-item-value,
	.bi-social-item-value {
		display: block;
	}
	.textbox.status-info {
		max-width: 400px;
	}
	.shakuro {
		display: flex;
		position: absolute;
	}
}

@media screen and (min-width: 1440px) {
	.bi-project-gallery-next.bi-project-gallery-item {
		max-width: 860px;
	}
	.place-content-center {
		flex-flow: column;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	.textbox.status-info {
		max-width: 480px;
	}
	.shakuro__text.text100 {
		color: var(--color--txt-300);
	}
}

@media (hover: none) and (pointer: coarse) {
	.bi-cursor {
		display: none;
	}

	.bi-showcase-item-info {
		display: none;
	}
}

/* project details — fit one screen, gallery scrolls horizontally only (no vertical scroll) */
@media screen and (min-width: 992px) {
	body.bi-state-project-details .taxonomy-page {
		padding-top: 0;
		padding-bottom: 0;
	}
	body.bi-state-project-details .taxonomy-content {
		display: none;
	}
	body.bi-state-project-details .bi-projects,
	body.bi-state-project-details .bi-projects-content {
		height: 100svh;
		overflow: hidden;
	}
	body.bi-state-project-details .bi-project-list,
	body.bi-state-project-details .bi-project-list-content {
		height: 100%;
	}
	body.bi-state-project-details .bi-project {
		height: 100svh !important;
		min-height: 0 !important;
	}
	body.bi-state-project-details .bi-project-gallery {
		flex: 1 1 auto;
		height: auto;
		min-height: 0;
	}
	body.bi-state-project-details .bi-project-info {
		flex: none;
	}
	/* logged in: the WP admin bar pushes the page down 32px — pull the open project back up so it still fits one screen */
	body.admin-bar.bi-state-project-details .bi-projects {
		margin-top: -32px;
	}

	/* projects list — start each gallery where its Figma row starts (offset is in px of the 1920 design) */
	body:not(.bi-state-project-details):not(.bi-fullscreen-project) .bi-project-gallery-content {
		margin-left: calc(var(--fig-offset, 0) * 1px);
	}
}
/* Mobile menu sub-menu ("Projects"): a simple open / close with one tap — the .is-open class is set by
   initSubMenu() in index.js. No hover, no slide/fade, no hover underline: on phones the hover state took the
   first tap(s) and the menu needed 2-3 taps to open. */
@media screen and (max-width: 768px) {
	.bi-nav-menu .sub-menu,
	.bi-nav-item:hover + .sub-menu,
	.sub-menu:hover {
		display: none !important;
		max-height: none !important;
		opacity: 1 !important;
		transition: none !important;
	}
	.bi-nav-menu .sub-menu.is-open {
		display: block !important;
	}
	.bi-nav-menu-list .bi-nav-item::after {
		display: none;
	}
}