/*
Indway  - http://indway.com
2026.03
PMZO - https://pmzo.com
*/

:root {
	--bground: rgba(245,245,245,1);
	--bground-alt: rgba(245,245,245,0.9);
	--mground: rgb(100,100,100);
	--fground: rgba(20,20,20,1);
	--fground-alt: rgba(20,20,20,0.9);
	--brand-red: rgba(220,70,0,1);
	--brand-red-alt: rgba(220,70,0,0.9);
	--brand-green: rgba(30,120,100,1);
	--brand-green-alt: rgba(30,120,100,0.9);
	--normal: 300;
	--bold: 400;
}

*, *::after, *::before { 
	margin: 0; 
	padding: 0; 
	border: 0; 
	box-sizing: border-box; 
	outline: none; 
}

html { 
	scroll-behavior: smooth; 
	font-size: 62.5%; 
}

body { 
	background-color: var(--bground); 
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: center center; 
	background-attachment: fixed; 
	font-family: 'Roboto', sans-serif; 
	font-weight: var(--normal); 
	color: var(--fground); 
	font-size: 1.6rem; 
	line-height: 1.25; 
	width: 100%; 
	margin: 0 auto; 
}

p { 
	margin-bottom: .8rem; 
	text-wrap: balance;

	&:last-of-type { 
		margin-bottom: 0; 
	}
}

strong, b { 
	font-weight: var(--bold); 
}

ul, menu, li { 
	list-style: none; 
}

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

img.icon { 
	width: 6rem; 
}

a { 
	color: var(--brand-red); 
	text-decoration: none;
	transition: all .5s ease-in-out;	
	
	&:hover, &:active, &:focus { 
		color: var(--brand-green); 
	}
}
a.button { 
	background-color: var(--brand-red); 
	color: var(--white-alt); 
	font-weight: var(--bold); 
	border-radius: 1.6rem; 
	display: inline-block; 
	padding: .8rem 1.6rem; 
	text-transform: uppercase; 
	
	&:hover, &:active, &:focus  { 
		background: var(--brand-green);
	}
}
a.button.alt { 
	background-color: var(--bground-alt); 
	color: var(--fground); 
	
	&:hover, &:active, &:focus  { 
		background-color: var(--fground-alt); 
		color: var(--bground);
	}
}
	
h1 { 
	font-size: 4rem;
	font-weight: var(--bold); 
	border-bottom: 1px solid var(--fground); 
	margin-bottom: 1.6rem; 
	padding-bottom: 1.2rem;
	text-align: left;
}
h2 { 
	font-weight: var(--bold); 
	width: 100%; 
	font-size: 3.2rem; 
	border-bottom: 1px solid var(--fground); 
	margin-bottom: 1.2rem; 
}
h3 { 
	font-size: 2.4rem;
	font-weight: var(--bold); 
	border-bottom: 1px solid var(--fground); 
	margin-bottom: 1.2rem; 
	padding-bottom: .4rem;
}
h4 { 
	font-weight: var(--bold); 
}

address {
	font-style: normal;
}

	
nav { 
	display: flex; 
	flex-direction: row; 
	justify-content: space-between; 
	position: sticky; 
	top: 0; 
	bottom: 0;
}


header { 
	text-align: center; 
	height: 40vh; 
	display: grid; 
	place-items: center; 
	padding: 4rem .8rem; 
	
	hgroup {
		max-width: 96rem; 
		width: 100%; 
		padding: 1.6rem;
		
		h1 {
			
		}
		p {
			text-align: right;
		}
	}
} 

main { 
	section { 
		background: var(--bground); 
		padding: 4rem .8rem; 
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
		width: 100%;
		
		section-content { 
			width: 100%;
			max-width: 96rem; 
			padding: 1.6rem; 
			margin: 0 auto; 
			display: flex; 
			flex-direction: column; 
			gap: .8rem; 
			border-radius: 1.6rem;
			
			section-header {
			}
			
			section-matter {
			}
			
			figure {
				display: block; 
				img { 
					object-fit: cover; 
					aspect-ratio: 3 / 2; 
					border-radius: 1.6rem;
				}
			}
		}
	}
}



/* section ul li { display: flex; flex-direction: column; align-items: center; justify-content: center; } */



/** HOME **/


/** SPACES **/
body.spaces { background-image: url('src/img/spaces-cover.webp'); }

/** OFFICES **/
body.offices { background-image: url('src/img/offices-cover.webp'); }

/** HEALTHCARE **/
body.healthcare { background-image: url('src/img/healthcare-cover.webp'); }

/** TRANSIT **/
body.transit { background-image: url('src/img/transit-cover.webp'); }

/** EDUCATION **/
body.education { background-image: url('src/img/education-cover.webp'); }

/** PRODUCTS **/
body.products { background-image: url('src/img/products-cover.webp'); }

/** DESKING **/
body.desking { background-image: url('src/img/desking-cover.webp'); }

/** WALLS **/
body.walls { background-image: url('src/img/walls-cover.webp'); }

/** STORAGE **/
body.storage { background-image: url('src/img/storage-cover.webp'); }

/** CEILINGS **/
body.ceilings { 
	background-image: url('src/img/ceilings-cover.webp'); 
}

/** ABOUT **/
body.about { 
	background-image: url('src/img/about-cover.webp'); 
}

/** CONTACT **/
body.contact { 
	background-image: url('src/img/contact-cover.webp'); 
	section-content {
		address {
		}
	}
}

/** WORK **/
body.work { 
	background-image: url('src/img/work-cover.webp'); 
}

	section ul li div { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background: var(--fground-alt); color: var(--bground); border-radius: 1rem;  }
	section ul li div img { width: 6rem; padding: 1rem; border-radius: 1rem; background: var(--bground); margin: 0 auto; }
	
	
body.home section#spaces section-content { background-image: url('src/img/spaces-cover.webp');  }
body.home section#products section-content { background-image: url('src/img/products-cover.webp'); }
body.home section#about section-content { width: 100%; max-width: 60rem; margin: 0 auto; flex-direction: column; text-align: center; }
body.home section#about h3 { text-transform: uppercase; font-size: 2.4rem; }
body.home section#about p { text-align: center; margin: 0 auto; width: 100%; font-size: 2rem; }


	


	.icon-contact { 
		width: 4rem; height: 4rem; display: inline; margin-right: 1rem; padding: .5rem; background: var(--bground-alt); border-radius: .5rem; 
	}
	
	.form-container { 
		background: var(--bground); padding: 1rem; border-radius: 1rem; 
	}
	
	
	
	
	
	
	
	
	
	
/*************************/


header { 
	height: 100vh; 
	
	hgroup {
		background: var(--bground-alt); 
		border-radius: 2rem;
	}
}

section {
	padding: 4rem .8rem;
	
	section-content {
		section-header {
			
		}
		section-matter {
			
		}	
	}
}

section.no-cover {
	section-matter {	
		width: 100%;
	}
}

aside { 
	color: var(--bground); 
	background: var(--fground-alt); 
	padding: 3.2rem 0; 
	
	div { 
		max-width: 96rem; 
		margin: 0 auto; 
		padding: 1.6rem; 
		text-align: right;
		
		p { 
			text-align: left; 
			font-weight: var(--bold); 
			font-size: 2rem; 
			margin-bottom: 1.6rem !important; 
		}
		
		a {  
			display: inline-block; 
			text-align: right;
		}
	}
}




body.home {



	
	#contact {
		section-content { 
			section-header {
				a {
					display: inline;
					img {
						background: none; border-radius: 0;
					}
				}
			}
		}
		section-matter { 
			background: var(--bground-alt);
			padding: .8rem;
			border-radius: .8rem;
		}
	}	
}


aside {
	
}

footer { 
	display: flex; flex-direction: column; gap: 2rem; align-items: center; padding: 2rem; background: var(--bground-alt); color: var(--fground); 
	div {
		width: 100%; display: flex; flex-direction: column; gap: 1rem;
		img {
			max-width: 24rem; 
		}
		p {
			width: 100%; text-align: right; font-size: 1.4rem;
		}
	}
	menu {
		width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: 1rem; 
		li {
			width: 100%; 
			h4 {
				text-align: left; padding-bottom: .5rem;
			}
			ul {
				padding: 1rem 0; border-top: 1px solid var(--fground);
				li {
					padding: .5rem 0; text-align: right;
					a {
						display: block;
					}
				}
			}
		}
	}
}

.copyright {
	text-align: center; 
	font-size: 1.2rem; 
	padding: 2rem; 
	display: block; 
	width: 100%; 
	background: var(--fground); 
	color: var(--bground);
}





@media screen and (min-width: 640px) {

main {
	section {  
		section-content { 
			flex-direction: row; gap: 2rem; 
			section-header { 
				width: 50%; 
				img {
					aspect-ratio: 1 / 1;
				}
			}
			section-matter {
				width: 50%; 
				div { 
					position: sticky; top: 2rem; 
				}
				
			}
			h3 {
				display: flex; flex-direction: row; align-items: center; gap: 1rem; width: 100%; /*background: var(--fground-alt); padding: 1rem; border-radius: 1rem;*/
			}
		}
	}		
}

	section.intro {
		padding-top: 4rem;
		section-content {
			align-items: flex-end;
			h2 {
				text-transform: none; text-align: right; align-items: center; margin-bottom: 0;
			}
		}
	}
	
	body.home {
		section-content {
			flex-direction: row;
			section-header {
				div {
					position: sticky; top: 2rem; 
				}
			}
			h2 {
			}
			h3 {
				border-bottom: none; padding-bottom: 0;
			}			
		}
		#intro {
			section-content {
				flex-direction: column;
				ul {
					flex-direction: row; width: 100%;
					li {
						width: 33.33%;
						h3 { 
							max-width: 100%;
							justify-content: flex-start;
						}
						p {
							text-align: right;
						}
					}
				}
			}
		}
		#products, #spaces {
			section-content {
				flex-direction: row;
				ul {
					width: 100%;
				}
			}
		}
		
		#contact {
			section-content { 
				flex-direction: row;
				hgroup {
					div { 
						background: transparent;  
						br {
							display: none;
						}
					}
				}
				section-header {
					br { display: none; }
				}
			}
		}
	}
	
body.contact { 
	section-content {
		address {
			width: 50%;
		}
		.contact-form {
			width: 50%;
		}
	}
}	
	footer { 
		flex-direction: row; 
		div {
			width: 40%; 
		}
		menu {
			width: 60%; max-width: 100%; display: flex; flex-direction: row; gap: 2rem; font-weight: var(--bold);
			li {
				display: flex; flex-direction: column; gap: 1rem; width: 33.33%; 
				ul {
					width: 100%;
					li {
						display: flex; flex-direction: column; width: 100%;
					}
				}
			}
		}
	}

}