/* @font-face { font-family: Lora; src: url('src/fonts/lora.woff2') format('woff2'), url('src/fonts/lora.woff') format('woff'); font-display: swap; } */

:root {
	--base:				1.25rem;
	--brand: 			rgba(170,50,50,1);
	--fground: 			rgba(66,66,66,1);
	--fground-alt: 		rgba(20,20,20,0.5);
	--mground:			#eae5e4;
	--mground-alt:		rgba(227,222,219,0.5);
	--bground: 			rgba(250,250,250,1);
	--bground-alt: 		rgba(250,250,250,0.5);
	--hground: 			rgba(194,188,185,1);
	--light: 			rgba(240,240,240,1);
	--light-alt: 		rgba(240,240,240,.5);
	--xlight: 			rgb(240,240,240);
	--dark: 			rgb(120,120,120);
	--xdark: 			rgb(105,105,105);
	--white: 			rgb(250,250,250);
	--black: 			rgb(10,10,10);
	
	--width:			125rem;
	--fade:				all 0.5s ease; 
	--x1:				calc(var(--base) * 1);
	--x2:				calc(var(--base) * 2);
	--x3:				calc(var(--base) * 3);
	--x4:				calc(var(--base) * 4);
	}
	
@media screen and (min-width: 960px) { 
	:root {
		--base:			2.5rem;
	}
}
	
/* @media (prefers-color-scheme: dark) { */
	/* :root { */
		/* --brand: 			rgba(170,50,50,1); */
		/* --bground: 			rgba(45,45,45,1); */
		/* --bground-alt: 		rgba(45,45,45,0.5); */
		/* --bmground:			rgba(95,95,95,1); */
		/* --mground:			rgba(145,145,145,1); */
		/* --mfground:			rgba(195,195,195,1); */
		/* --fground: 			rgba(245,245,245,1); */
		/* --fground-alt: 		rgba(245,245,245,0.5); */
	/* } */
/* }	 */

*, *::before, *::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 62.5%; }

body { min-height: 100vh; background-color: var(--bground); color: var(--fground); font-size: 2rem; font-weight: 300; line-height: 1.5; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; }
body { font-family: "Poppins", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; }
a { color: var(--brand); text-decoration: none; transition: var(--fade); }
a:focus, a:hover, a:active { color: var(--fground); transition: var(--fade); }
a.button { padding: var(--x1); border-radius: var(--x1); background-color: var(--brand); color: var(--light); display: inline-block; }
a.button:focus, a.button:hover, a.button:active { background-color: var(--fground); color: var(--bground); text-decoration: none; }
img { width: 100%; height: auto; }
p { padding-bottom: var(--x1); }
p:last-of-type { padding-bottom: 0; }

ul { list-style: none; padding-bottom: var(--x1); }
menu { list-style: none; }
li {  }

select, textarea, input, button { font-family: inherit; background: var(--bground); font-size: 2rem; width: 100%; padding: 1.25rem; margin-bottom: 1.25rem; border-radius: 1.25rem; }

h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.25; }
h1 { font-size: 5rem; text-align: center; }
h2 { font-size: 4rem; margin-bottom: var(--x2); text-align: left; }
h3 { font-size: 2rem; }
h4 { font-size: 1.75rem; }

.background { width: 100vw; height: 100vh; position: fixed; z-index: -1; background-color: #000000; }
.background img { width: 100%; height: 100%; object-fit: cover; }
.background video { width: 100vw; height: auto; position: absolute; bottom: 0;}
.stretch { width: calc(100% + var(--x2)); margin-left: -var(--x1); }


/*** nav ***/

nav { background: var(--mground); position: fixed; top: 0; left: 0; width: 100%; padding: 1.25rem var(--x2);  z-index: 100; height: var(--x3); /*font-family: var(--title);*/ font-weight: 500; }
nav-box { display: flex; flex-direction: row; align-items: center; justify-content: space-between; max-width: var(--width); margin: 0 auto; height: var(--x2); padding: 0 var(--x2); }
nav menu { display: flex; flex-direction: row; justify-content: space-around; align-items: center; font-size: 2rem; padding-bottom: 0; gap: var(--x1); }
nav ul li { list-style: none; font-weight: 800; }
nav a { padding: .5rem; }
nav a:hover, nav a:active, nav a:focus { color: var(--fground); }
nav .logo svg { height: 6rem; width: auto; }
nav .logo:hover, nav .logo:active, nav .logo:focus {  }
nav .logo-graphic { fill: var(--brand); }
nav .logo-text { fill: var(--fground); }
nav .logo:hover .logo-graphic, nav .logo:active .logo-graphic, nav .logo:focus .logo-graphic { drop-shadow: (0 0 .5rem var(--brand)); }


/***  HEADER ***/

header { height: calc(50vh); max-width: 100vw; margin-top: var(--x3); display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--bground); background-color: transparent; }
header a { display: block; }
header a span { display: block; }
header div { }

body.home header { height: calc(100vh - var(--x3)); }

body.catalog.page header { background: var(--fground); }
body.catalog.page header this-contain { padding: 0 var(--x2); }
body.catalog.page header this-matter { display: flex;  align-items: center; justify-content: space-between; gap: var(--x2); width: 100%; }
body.catalog.page header h1 { width: 100%; text-align: left; }
body.catalog.page header figure { padding-bottom: 0; max-height: 100%; display: grid; place-items: self-end; }
body.catalog.page section { margin-bottom: var(--x2); }
body.catalog.page header svg { fill: transparent; height: 50vh; width: auto; }
body.catalog.page header svg path.fill { stroke: var(--bground); stroke-width: 0.05rem; }
body.catalog.page header svg path.glow { stroke: var(--brand);  stroke-width: 0.05rem;}


/*** CUSTOM ELEMENTS ***/

this-contain { display: block; padding: var(--x2); border-radius: var(--x1); width: 100%; max-width: var(--width); margin: 0 auto;}
this-matter { display: block; }
link-more { display: block; text-align: center; margin-top: var(--x2); text-transform: uppercase; font-weight: 500; line-height: 1;  }

/*** MAIN  ***/

main { padding: var(--x3) 0; background-color: var(--bground); }

main section { width: 100%; margin: 0 auto var(--x3) auto; }
main this-contain { color: var(--fground); }
main section:target { scroll-margin-top: 12.5rem; }
main hgroup { margin-bottom: var(--x2); width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
main hgroup p { display: block; font-size: 2rem; padding-bottom: 0; }
main hgroup.sticky { position: sticky; background: var(--mground); top: calc(var(--x3) - 1px); z-index: 60;  }
main section p { line-height: 1.5; }
main section div { margin: 0 auto; width: 100%; background: var(--label); border-radius: var(--x1); }
main small { text-transform: uppercase; }

body.page.catalog section h3 { margin-bottom: var(--x1); font-size: 2.5rem; }
body.page.catalog section h4 { font-size: 2rem; }


main aside { width: 100%; margin: 0 auto var(--x3) auto; color: var(--fground); background-color: transparent; }
main aside this-contain { max-width: var(--width); border-radius: var(--x1); margin: 0 auto; display: block; }
main aside this-matter { display: block; }


body.home .intro { }
body.home .intro this-matter { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--x2); }
body.home .intro h2 { max-width: 50%; font-size: 3rem; line-height: 1.25; text-align: left; margin-bottom: 0; }
body.home .intro p { max-width: 50%; line-height: 1.5; font-size: 2.5rem; padding-bottom: 0; }
@media screen and (max-width: 960px) {
	body.home .intro this-matter { flex-direction: column; }
	body.home .intro h2 { max-width: 100%; }
	body.home .intro p { max-width: 100%; }
}

body.home .catalog { }
body.home .catalog this-contain { background: var(--mground); }
body.home .catalog this-matter {  }
body.home .catalog h2 { line-height: 1.25; text-align: left;  }
@media screen and (max-width: 960px) {
	body.home .catalog h2 { font-size: 3rem; width: 100%; margin-bottom: var(--x2);}
}

body.home .features { padding: var(--x2) 0; }
body.home .features this-matter { display: flex; flex-direction: row; gap: var(--x2); }
body.home .features h2 { margin-bottom: 0; text-align: left; max-width: 50%; width: 100%; }
body.home .features ul { width: 100%; max-width: 50%; display: flex; justify-content: space-between; gap: 2.5rem; padding-bottom: 0; align-items: center; flex-direction: row; gap: var(--x2); }
body.home .features li { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 2.5rem; }
body.home .features li img { width: 10rem; height: auto; padding: 2rem; border: .25rem solid var(--fground); border-radius: 2.5rem; margin-bottom: var(--x1); background: var(--bground); }
body.home .features li h4 { white-space: pre-line; }
@media screen and (max-width: 960px) {
	body.home .features this-matter { flex-direction: column; }
	body.home .features h2 { max-width: 100%; font-size: 3rem; margin-bottom: var(--x2); }
	body.home .features ul { flex-direction: column; max-width: 100%; }
	body.home .features li { flex-direction: row; width: 100%; gap: var(--x2); }
	body.home .features li img { margin-bottom: 0; }
	body.home .features li h4 { text-align: left; font-size: 2rem; }
}


body.home section.process this-contain { background: var(--mground); }
body.home section.process ul { display: flex; justify-content: space-between; align-items: center; gap: var(--x1); padding-bottom: 0; }
body.home section.process li { text-align: center; }
body.home section.process li img { width: 12.5rem; height: 12.5rem; background: var(--fground); border-radius: var(--x1); padding: 1.25rem; margin-bottom: var(--x1); }
body.home section.process li h4 { font-size: 1.75rem; margin-bottom: 2rem; }
body.home section.process li p { font-size: 1.625rem; padding-bottom: 0; }

body.home .industries {  }
body.home .industries h2 {  }
body.home .industries {  }


/*** FOOTER ***/

footer { padding: 3rem 1rem; background-color: var(--fground); text-align: center; color: var(--bground); font-size: 1.5rem; }
footer a { color: var(--label); }
footer a:hover, #footer a:active, #footer a:focus  { color: var(--brand); }
footer a.logo { display: block; margin-bottom: 2rem; }
footer .logo svg { width: 12rem; height: 12rem; }
footer .logo svg .logo-text { fill: var(--light); }
footer .logo svg .logo-graphic { fill: var(--brand); }
footer ul.socials { display: flex; flex-direction: row; justify-content: center; }
footer ul.socials li { margin: 0 1rem; }
footer ul.socials a { display: block; padding: 1rem; border-radius: 1rem; line-height: 0; }
footer ul.socials a:hover, #footer ul.socials a:active, #footer ul.socials a:focus  { background: var(--fground); }
footer ul.socials li img { width: 3.2rem; }
footer menu { width: 36rem; display: grid; grid-auto-columns: 1fr; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 1em 1em; grid-template-areas: ". ."; margin: auto; padding: 2rem 0; }
footer menu li { text-align: left; }
footer menu li:nth-child(odd) { text-align: right }
a.go { display: block; height: 6rem; width: 6rem; text-align: center; margin: 1rem auto; }
a.go span { display: block; height: 6rem; width: 6rem; margin: 0 auto; padding: 1rem; background-color: var(--light); border-radius: 50%; }
a.go:hover span, a.go:active span, a.go:focus span { background: var(--brand); }

.section {  }

body.home {  }
body.home section.intro { }
body.home section.intro div { display: grid; place-items: center; background: gray; }
body.home section.image { background: transparent; padding: 0; }
body.home section.image img { border-radius: 2.5rem; display: block; }
body.home section.features { }
body.home section.contact this-contain { background: var(--mground); }


.page.contact {  }

.page.about {  }

.section.catalog section.products this-contain { background: var(--mground); }
.card { background: var(--fground); }
.card svg { background: var(--bground); }
.card svg .fill { stroke: var(--mground); fill: var(--bground); } 
.card:hover svg .fill { stroke: var(--fground);  } 
.card:hover h3 { color: var(--fground); } 


.cards { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-columns: 1fr; gap: var(--x1); grid-auto-flow: row; grid-template-areas: "."; text-align: center; padding: 0; background: transparent;  }
.card { background: var(--bground); border-radius: var(--x1); position: relative; aspect-ratio: 1 / 1; transition: var(--fade); }
/* .card:hover { background: transparent;  } */
.card a { color: var(--brand); display: block; }
.card figure { width: 100%; overflow: hidden; }
.card img { border-radius: var(--x1); background: var(--bground); aspect-ratio: 4 / 3; transition: var(--fade); object-fit: contain; position: relative; display: block; }
.card svg { border-radius: var(--x1); background: var(--fground); aspect-ratio: 4 / 3; transition: var(--fade); object-fit: contain; position: relative; display: block; }
.card svg path { transition: var(--fade); }
.card:hover img { aspect-ratio: 1 / 1; }
.card:hover svg { aspect-ratio: 1 / 1; }
.card svg .void { fill: transparent; }
.card svg .fill { fill: var(--mground); stroke: var(--mground); stroke-width: .05rem; }
.card:hover svg .fill { fill: var(--bground); stroke: var(--bground); /*filter: drop-shadow(0 0 .25rem var(--brand)); */}
.card svg .glow { fill: var(--mground); stroke: var(--mground); stroke-width: .05rem; }
.card:hover svg .glow { fill: var(--brand); stroke: var(--brand); stroke-width: .1rem;}
/* .card svg .bhs { fill: var(--mground); stroke: none; } */
/* .card:hover svg .bhs { fill: var(--fground) } */
.card h3 { transition: var(--fade); position: absolute; bottom: 0; width: 100%; padding: 3.2rem 0; font-size: 2rem; }
.card:hover h3 { color: var(--bground); }

.grid-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-auto-columns: 1fr 1f 1fr 1fr; gap: var(--x1); grid-auto-flow: row; grid-template-areas: "."; text-align: center; padding: 0; background: transparent;  }
.grid-gallery li { border-radius: var(--x1); position: relative; }
.grid-gallery li img { border-radius: var(--x1); display: block; filter: grayscale(100%); transition: var(--fade); }
.grid-gallery li:hover img { filter: grayscale(0%); }
.grid-gallery li h3 { border-radius: 0; background-color: var(--bground); color: var(--brand); padding: var(--x1) 0; position: absolute; bottom: calc(50% - 2.25rem); left: 0; width: 100%; margin-top: -5rem; transition: var(--fade); }
.grid-gallery li:hover h3 { bottom: 0; color: var(--fground); }
@media screen and (max-width: 960px) {
	.grid-gallery  { grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr 1f; }
	.grid-gallery li h3 { font-size: 1.6rem; }
}



.gallery { padding-bottom: 5rem; width: 100%; max-width: 40rem; z-index: 10; margin: 0 auto; aspect-ratio: 10/13 auto; }
.gallery .viewer-wrap img { border-radius: 2.5rem; display: block; }
.gallery .thumbnails-wrap { border-radius: 2.5rem; }
.gallery .thumbnails-wrap button { border: none; }

@media screen and (min-width: 640px) {
	ul.cards { grid-template-columns: 1fr 1fr 1fr; gap: var(--x2); }
}

@media screen and (min-width: 960px) {
	ul.cards { grid-template-columns: 1fr 1fr 1fr; }
	#main { }
	#main section { }
	#main section.catalog { }

	main hgroup { flex-direction: row; align-items: center; }
	main hgroup h2 {  }
	main hgroup p { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:focus, *:focus, *:active { transition: none; }
}