/*
 Theme Name:   CZA Bouwbedrijf
 Description:  Custom CZA Bouwbedrijf theme
 Author:       Active-Bits voor Marketing Smartheads
 Author URI:   https://www.active-bits.nl
 Version:      0.7.5
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  cza
*/
@font-face { font-display: swap; font-family: 'Heebo'; font-style: normal; font-weight: 300; src: url('fonts/heebo-v26-latin-300.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Heebo'; font-style: normal; font-weight: 400; src: url('fonts/heebo-v26-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Heebo'; font-style: normal; font-weight: 500; src: url('fonts/heebo-v26-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Heebo'; font-style: normal; font-weight: 600; src: url('fonts/heebo-v26-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('fonts/roboto-v32-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('fonts/roboto-v32-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url('fonts/roboto-v32-latin-900.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'TheSignature'; font-style: normal; font-weight: 400; src: url('fonts/Thesignature.woff2') format('woff2'); }

:root {
 --bg: #F0F0F0;
 --bg-d: #DCE5F4;
 
 --white: #FFF;
 --dark: #1c1c1c;
 --gray: #464646;
 --light: #717171;
 --lightest: #919191;

 --beige: #E7D0A2;
 --btn: #E3D1A7;
 --beige-dark: #C7AC74;
 --brown: #B2975E;

 --shadow: drop-shadow(0em 0em 0.4em hsla(0deg, 0%, 0%, 0.25));
 --pad: max(5%, calc((100% - 102.5rem) / 2));
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
input, button, textarea, select, input::placeholder { font: inherit; }
svg.icon { width: 1em; height: 1em; margin: 0 1em 0 0; vertical-align: middle; }

html { font-family: 'Heebo'; font-size: 100%; font-weight: 400; background-color: var(--bg); color: var(--c); }
body { font-size: 0.9375rem; padding: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; background-color: var(--bg); display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; min-height: 100vh; min-height: 100svh; min-height: 100dvh; }
h1, h2, h3 { font-family: 'Roboto'; font-weight: 900; text-wrap: balance; }
h1 { font-size: 4.375rem; }
h2 { font-size: clamp(2rem, 6vw, 3.25rem); }
p, ul, ol { padding-bottom: 1.5em; }
p:empty { display: none; }
p > a { color: inherit; }
img { max-width: 100%; height: auto; vertical-align: middle; }
address { font-style: normal; }
.visually-hidden { position: absolute; height: 0.1rem; width: 0.1rem; overflow: hidden; clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem); white-space: nowrap; background-color: #FFF; color: #000; }
.skip-link { border: 0; display: block; text-decoration: none; top: -10rem; left: 0.5rem; position: absolute; }
.skip-link:focus { top: 0.5rem; z-index: 100000; }

.clip-1 { clip-path: polygon(0 2em,2em 0,100% 0,100% 100%,0 100%); }
.clip-2 { clip-path: polygon(0 0,calc(100% - 2em) 0,100% 2em,100% 100%,0 100%); }
.clip-3 { clip-path: polygon(0 0,100% 0,100% calc(100% - 2em),calc(100% - 2em) 100%,0 100%); }
.clip-4 { clip-path: polygon(0 0,100% 0,100% 100%,2em 100%,0 calc(100% - 2em)); }

a.btn { display: inline-block; background-color: var(--btn); color: #000; padding: 0.5em 2em; text-decoration: none; border-radius: 0.25em; font-size: 1.125rem; font-weight: 500; cursor: pointer; }
a.btn.black { color: #fff; background-color: #000; }

.corners, header nav > ul > li.current-menu-item > a, header nav ul li:hover > a { position: relative; }
.corners:before, header nav > ul > li.current-menu-item > a:before, header nav ul li:hover > a:before { content: ''; font-size: 1.2rem; position: absolute; inset: 0; margin: -0.5em; background-image: url('img/border-1.svg'), url('img/border-2.svg'), url('img/border-3.svg'), url('img/border-4.svg'); background-size: 0.5em, 0.5em, 0.5em, 0.5em; background-position: top left, top right, bottom right, bottom left; background-repeat: no-repeat; }


header { background-color: #000; padding: 1em 0; color: #fff; height: 7rem; }
header.home { background-color: hsla(0deg, 0%, 0%, 0.15); margin-bottom: -7rem; z-index: 100; }
header > button { display: none; position: absolute; top: 1.5rem; right: 5%; appearance: none; width: 4rem; height: 4rem; border: 0; margin: 0; background-color: transparent; color: #FFF; z-index: 9999; }
header.home > button { color: #000; }
header > button svg { width: 4em; height: 4em; }
#menu-toggle .line { transform-origin: center; transition: y .1s .1s ease-in, rotate .1s ease-in; }
#menu-toggle[aria-expanded="true"] { color: #FFF; }
#menu-toggle[aria-expanded="true"] .line { transition: y .1s ease-in, rotate .1s .1s ease-in; }
#menu-toggle[aria-expanded="true"] .line:not(.middle) { y: 45; rotate: -45deg; }
#menu-toggle[aria-expanded="true"] .line.bottom { rotate: 45deg; }
#menu-toggle[aria-expanded="true"] .line.middle { opacity: 0; }
header > button[aria-expanded="true"] span.open { display: none; }
header > button[aria-expanded="false"] span.close { display: none; }
header nav { width: 90%; max-width: 102.5rem; height: 5rem; margin: 0 auto; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; font-size: 1.125rem; }
header a.logo { margin-right: auto; position: absolute; top: 1.5rem; left: var(--pad); z-index: 100; }
header a.logo img { width: 17.5rem; filter:invert(); }
header.home a.logo img { filter: unset; }
header nav ul { position: relative; display: inline-block; list-style: none; width: fit-content; padding: 0; }
header nav ul li { position: relative; padding: 0.5em 0; display: inline-block; }
header nav ul li a { display: block; height: 1.5em; line-height: 1.5em; padding: 0 0.25em; margin: 0 1em 0 0; color: #FFF; font-weight: 700; text-decoration: none; }
header nav ul li > ul { position: absolute; left: -9999rem; width: auto; background-color: #000; margin: 0; }
header nav ul li > ul li { display: block; white-space: nowrap; }
header nav ul li:hover > ul, nav ul li:focus > ul, nav ul li:focus-within > ul, nav ul li.focus > ul { left: auto; }
header nav ul li > ul li > ul { display: none; }
header nav a.phone { background-image: url('img/iphone-white.png'); background-position: right center; padding-inline: 0 2em; margin: 0 1em; background-size: auto 100%; background-repeat: no-repeat; color: inherit; text-decoration: none; }
header.home nav a.phone { background-image: url('img/iphone.png'); background-position: left center; padding-inline: 2em 0; }
header nav > div.socials { display: none; }
header nav > div.socials a { display: inline-block; font-size: 1.5rem; margin: 1.5em 1em 0 0; color: #FFF; }
header nav > div.socials a svg { width: 1em; height: 1em; }
@media screen and (max-width: 75rem) {
    header > button, header > button > svg { display: block; }
    header a.logo { top: 2rem; }
    header a.logo img { width: 10rem; }
    header nav { display: none; flex-direction: column; }
    header:has(button[aria-expanded="true"]) a.logo img { filter:invert(); }
    header > button[aria-expanded="true"] + nav { display: block; background-color: #000; position: absolute; top: 0; left: 0; width: 100%; height: auto; min-height: 50vh; min-height: 50svh; min-height: 50dvh; padding: 10rem 5% 2rem; border-bottom: 2px solid var(--beige); z-index: 75; }
    header.home nav > a.phone { display: block; background-image: url('img/iphone-white.png'); background-position: left center; padding-inline: 2em 0; margin: 0; }
    header nav > ul li, header nav > ul li.menu-item-has-children, header nav > a.btn { display: block; background: none; color: #FFF; padding: 0; margin: 0 0 1em; }
    header nav > ul li a { padding: 0; }
    header nav > ul li a:before, header nav > ul li.menu-item-has-children a:before { display: none; }
    header nav > div.socials { display: block; }
}

section.white { background-color: #FFF; }
section.hero + section.white { background-color: transparent; background-image: linear-gradient(180deg, transparent 8rem, #FFF 8rem); }

/* Hero (home) */
section.home-hero { position: relative; background-color: #FFF; background-image: var(--landscape); background-size: cover; background-position: center bottom 2rem; background-repeat: no-repeat; padding: 0; margin: 0; /*clip-path: polygon(0 0,100% 0,100% 100%,10em 100%,0 calc(100% - 8em));*/ display: flex; flex-direction: column; justify-content: space-between; overflow-x: hidden; }
section.home-hero[style*="--landscape"] { color: #FFF; min-height: 100vh; }
section.home-hero:after { content: ''; position: absolute; left: 0; bottom: 0; width: 8rem; height: 8rem; background-color: #FFF; clip-path: polygon(0 0,100% 100%,0 100%); }
section.home-hero > div { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; z-index: 10; }
section.home-hero > div > div.title { margin: 30vh 0 0 var(--pad); }
section.home-hero > div > div.title p { font-size: 1.875rem; font-weight: 500; }
section.home-hero > div:last-child > a { margin: 0 2rem 4rem var(--pad); }
section.home-hero > div:last-child > div { background-color: var(--beige); color:#000; display: flex; flex-direction: row-reverse; align-items: flex-start; padding: 1rem var(--pad) 1rem 1rem; clip-path: polygon(0 0,100% 0,100% 100%,2em 100%,0 calc(100% - 2em)); }
section.home-hero > div:last-child > div > div { padding: 3rem 7rem 3rem 2rem; background-image: url('img/icon_tel.png'); background-position: top right 1rem; background-size: 8rem; background-repeat: no-repeat; border-right: 1px solid #FFF; }
section.home-hero > div:last-child > div > div:first-child { background-image: url('img/icon_location.png'); border: 0; }
section.home-hero > div:last-child > div > div:last-child { background-image: url('img/icon_mail.png'); }
section.home-hero > div:last-child > div h2, section.home-hero > div:last-child > div a { display: block; font-family: 'Roboto'; font-weight: 500; /*600*/ font-size: 1.125rem; }
section.home-hero > div:last-child > div a { color: inherit; text-decoration: none; }
section.home-hero > video.landscape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
section.home-hero > video.portrait { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/*section.home-hero > div > div.title span.terms { position: relative; }
section.home-hero > div > div.title span.terms > span { position: absolute; width: fit-content; height: 0; opacity: 0; transition: height 0.2s, opacity 0.2s; }
section.home-hero > div > div.title span.terms > span.active { height: auto; opacity: 1; }*/

section.home-hero > div > div.title span.terms_slide { display: inline-block; height: 1.5em; vertical-align: bottom; overflow: hidden; }
section.home-hero > div > div.title span.terms_slide > span { display: block; height: 1.5em; overflow: hidden; opacity: 1; transition: height 0.4s, opacity 0.3s; }
section.home-hero > div > div.title span.terms_slide > span:first-child { height: 0; opacity: 0; }

main > aside { position: fixed; top: 8rem; right: -100vw; max-width: 75vw; background-color: #000; color: #FFF; clip-path: polygon(0 2em,2em 0,100% 0,100% 100%,0 100%); padding: 4em 8rem 2rem 4rem; transition: right 1s; transition-delay: 0s; z-index: 50; }
main > aside.show { right: 0; transition-delay: 1s; }
main > aside h2 { font-size: 1.625rem; }
main > aside p { font-weight: 300; }
main > aside > button { position: absolute; top: 1rem; right: 1rem; color: #FFF; background-color: transparent; border: 0; cursor: pointer; }

@media screen and (max-width: 60rem) {
    section.home-hero > div, section.home-hero > div:last-child > div { flex-direction: column; }
/*     section.home-hero > div:last-child > div { margin: 0 0 0 auto; align-items: flex-end; } */
	section.home-hero > div:last-child > div { width:fit-content; margin-left:auto; }
    section.home-hero > div:last-child > div > div { border: 0; width:100%; }
}
@media screen and (max-width: 30rem) {
	section.home-hero > div:last-child > div { width:100%; }
}
@media (orientation: portrait) {
    section.home-hero > div > div.title h1 { font-size: 10vw; text-wrap: unset; }
    section.home-hero.has-portrait { background-image: var(--portrait); }
    section.home-hero > video.landscape { display: none; }
    section.home-hero > video.portrait { display: block; }
    main > aside { max-width: 80vw; padding: 4em 2rem 2rem 2rem; }
    main > aside.show { right: 0; transition-delay: 15s; }
}
/* Hero */
section.hero { color: #000; background-color: #FFF; background-size: cover; background-position: center bottom; background-repeat: no-repeat; padding: 2rem 0 8rem; margin: 0 0 -8rem; }
section.hero[style*="background-image"] { color: #FFF; background-color: var(--gray); height: 25vw; min-height: 25rem; }
section.hero > div { width: 90%; max-width: 102.5rem; height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; }
section.hero > div > div:last-child { padding: 2rem 0; }
section.hero > div > div:last-child p { font-size: 1.375rem; font-weight: 500; }
section.hero > div > div.parent { text-align: center; }
section.hero > div > div.parent p { font-size: 0.9375rem; }
section.hero > div > div.parent p:first-child { font-family: 'Roboto'; font-size: 1.375rem; font-weight: 400; }

/* Breadcrumbs */
#breadcrumbs { font-weight: 500; }
#breadcrumbs a { color: inherit; text-decoration: none; }

/* text_image */
section.text-image { padding: 8rem 0; }
section.text-image > div { width: 90%; max-width: 102.5rem; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
section.text-image.align_right > div { flex-direction: row-reverse; }
section.text-image > div > figure { flex: 1 1 50%; padding: 6vw; }
section.text-image > div > figure > img { width: 100%; clip-path: polygon(0 0,calc(100% - 8em) 0,100% 8em,100% 100%,0 100%); }
section.text-image.align_right > div > figure > img { clip-path: polygon(0 8em,8em 0,100% 0,100% 100%,0 100%); }
section.text-image > div > div { flex: 1 1 50%; padding: 12vw; }
section.text-image.align_right > div > div { text-align: right; }
section.text-image > div > div > h2 { position: relative; padding: 0 0 0.5em; margin: 0 0 1.5em; }
section.text-image > div > div > h2:after { content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 1.5em; height: 0.125rem; background-color: currentColor; }
section.text-image.align_right > div > div > h2:after { left: unset; right: 0; }
section.text-image > div > div > p { color: var(--lightest); font-weight: 500; }
@media screen and (max-width: 50rem) {
    section.text-image > div { flex-direction: column; }
}

/* text_image_full */
section.text-image-full { padding: 0; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; }
section.text-image-full.home { padding: 2rem 0; align-items: center; }
section.text-image-full.align_right { flex-direction: row-reverse; }
section.text-image-full > figure { position: relative; flex: 1 1 50%; min-width: min(100vw, 28rem); }
section.text-image-full > figure > img { width: 100%; min-height: 100%; max-width: 100%; object-fit: cover; object-position: center; }
section.text-image-full > figure > span { position: absolute; bottom: 3em; right: 3em; font-family: 'Roboto'; color: #FFF; font-size: clamp(1.5rem, 3vw, 2.325rem); font-weight: 900; padding: 1rem; max-width: 10em; }
section.text-image-full > figure > span:before { content: ''; font-size: 4rem; position: absolute; inset: 0; margin: -0.5em; background-image: url('img/border-1-white.svg'), url('img/border-2-white.svg'), url('img/border-3-white.svg'), url('img/border-4-white.svg'); background-size: 0.5em, 0.5em, 0.5em, 0.5em; background-position: top left, top right, bottom right, bottom left; background-repeat: no-repeat; }
section.text-image-full > div { flex: 1 1 50%; padding: 4rem var(--pad) 4rem 4rem; overflow:hidden }
section.text-image-full > div > p.tagline { font-size: 1.325rem; padding: 0 0 0.5em; color: var(--light); }
section.text-image-full.home > div > p.tagline { font-family: 'TheSignature'; font-size: 2rem; color: #000; }
section.text-image-full > div > h2 { padding: 0 0 1.5em; }
section.text-image-full.home > div > h2 { font-size: 2rem; }
section.text-image-full > div > p { font-weight: 500; }
section.text-image-full > div > ol.list { list-style-type: none; padding: 0; }
section.text-image-full > div > ol.list li { position: relative; padding: 0 2em 0 8rem; margin: 0 0 4em; }
section.text-image-full > div > ol.list li:last-child { margin: 0; }
section.text-image-full > div > ol.list > li::before { position: absolute; top: 0; left: 0; content: '0'counter(list-item); height: 100%; font-size: 3.75rem; font-weight: 500; color: hsla(0deg, 0%, 0%, 0.18); padding: 0 2rem 0 0; border-right: 1px solid #000; }
section.text-image-full > div > ol.list > li:nth-child(1n+10):before { content: counter(list-item); }
section.text-image-full > div > ol.list li h3 { font-family: 'Heebo'; font-size: 1.825rem; font-weight: 600; padding: 0 0 0.5em; }
section.text-image-full > div > ol.list li p { color: var(--lightest); font-weight: 500; padding: 0; }
@media screen and (max-width: 30rem) {
    section.text-image-full > div { padding: 4rem 2rem; }
}

/* List dark */
section.list-dark { padding: 0; }
section.list-dark > div { width: 95%; max-width: calc(102.5rem + ((100% - 102.5rem) / 2)); padding: 4rem 2rem 4rem var(--pad); margin: 0 auto 0 0; background-color:#000; color: #FFF; clip-path: polygon(0 0,100% 0,100% calc(100% - 4em),calc(100% - 4em) 100%,0 100%); }
section.list-dark > div > h2 { font-family: 'Heebo'; font-weight: 500; }
section.list-dark > div > ol { padding: 0; list-style-type: leading-zero; list-style-position: inside; columns: 2; column-gap: 2rem; }
section.list-dark > div > ol > li { position: relative; padding: 2rem 0 0; }
section.list-dark > div > ol > li::marker { position: absolute; top: 0; left: 0; font-weight: 500; color: var(--beige); }
section.list-dark > div > ol > li > div { display: block; }
section.list-dark > div > ol > li > div > h3 { font-size: 2.25rem; } 
section.list-dark > div > ol > li > div > p { font-weight: 500; }
@counter-style leading-zero { system: fixed; symbols: "01" "02" "03" "04" "05" "06" "07" "08" "09"; suffix: " "; }
@media screen and (max-width: 42rem) {
    section.list-dark > div > ol { columns: 1; }
}

/* USPs */
section.usps { padding: 2rem 0; }
section.usps > div { display: flex; flex-direction: row; gap: 4rem; align-items: flex-start; }
section.usps > div > div:first-child { flex: 1 1 60%; background-color: var(--beige); padding: 4rem 4rem 4rem max(5vw, calc((100% - 102.5rem) / 2)); clip-path: polygon(0 0,calc(100% - 4em) 0,100% 4em,100% 100%,0 100%); }
section.usps > div > div > p { font-family: Roboto; font-size: 1.625rem; font-weight: 500; }
section.usps > div > div > h2 { font-size: 4.375rem; line-height: 1.1em; padding: 0 0 4rem; }
section.usps > div > div > ul { list-style: none; padding: 0; }
section.usps > div > div > ul > li { font-size: 1.125rem; font-weight: 500; line-height: 3em; }
section.usps > div > div > ul > li span.check { display: inline-block; background-color: #FFF; border-radius: 10em; width: 1em; height: 1em; padding: 0.5em; margin: 0 1em 0 0; box-sizing: content-box; vertical-align: middle; }
section.usps > div > div > ul > li svg.check { width: 1em; height: 1em; margin: 0; vertical-align: top; }
section.usps > div > div:last-child { flex: 1 1 40%; clip-path: polygon(0 0,100% 0,100% 100%,4em 100%,0 calc(100% - 4em)); }
section.usps > div > div > img { display: block; width: 100%; }
@media screen and (max-width: 50rem) {
    section.usps > div { flex-wrap: wrap; }
    section.usps > div > div:first-child { flex: 0 1 90%; padding: 4rem 2rem; }
    section.usps > div > div:last-child { flex: 0 1 90%; order: -1; margin: 0 0 0 auto; }
    section.usps > div > div > h2 { font-size: 10vw; }
    section.usps > div > div > ul > li { font-size: 1rem; clear: both; line-height: 2; margin: 0 0 1em; } 
    section.usps > div > div > ul > li span.check { float: left; margin: 0 1em 2em 0; }
}

/* Icon text */
section.icon-text, section.icon-text-image { padding: 2rem 0 0; }
section.icon-text > ul, section.icon-text-image > div { width: 90%; max-width: 102.5rem; margin: 0 auto; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; filter: var(--shadow); }
section.icon-text > ul li, section.icon-text-image > div > div { flex: 0 0 30%; display: flex; flex-direction: column; justify-content: space-between; background-color: #FFF; padding: 4rem 2rem 2rem; margin: 0 0 4rem; clip-path: polygon(0 4em,4em 0,100% 0,100% 100%,0 100%); }
section.icon-text-image > div > figure { flex: 0 1 65%; }
section.icon-text-image > div > figure img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
section.icon-text > ul li div.icon, section.icon-text-image > div > div div.icon { margin: 0 0 2rem; }
section.icon-text > ul li div.icon img, section.icon-text-image > div > div div.icon img { width: 7.5rem; height: 7.5rem; object-fit: contain; }
section.icon-text > ul li h2, section.icon-text-image > div > div h2 { font-size: 1.625rem; }
section.icon-text > ul li p, section.icon-text-image > div > div p { font-weight: 500; color: var(--lightest); }
section.icon-text > ul li a, section.icon-text-image > div > div a { display: block; color: inherit; text-decoration: none; font-size: 1.125rem; font-weight: 500; border-top: 1px solid var(--light); padding: 1em 0 0; }
section.icon-text > ul li a svg, section.icon-text-image > div > div a svg { float: right; width: 1em; height: 1em; }
@media screen and (max-width: 50rem) {
    section.icon-text > ul li, section.icon-text-image > div > div, section.icon-text-image > div > figure { flex: 0 0 100%; }
}

/* Steps */
section.steps { padding: 2rem 0; }
section.steps > ul { width: 90%; max-width: 102.5rem; margin: 0 auto; padding: 0; list-style: none; justify-content: space-evenly; flex-wrap: wrap; }
@media(min-width:60rem) {
	section.steps > ul {
		display:flex;
	}	
}

section.steps > ul li { flex: 0 0 30%; min-width: 12rem; font-size: 1.625rem; font-weight: 600; margin: 0 0 2rem; }
section.steps > ul li img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center; clip-path: polygon(0 0,calc(100% - 2em) 0,100% 2em,100% 100%,0 100%); }
section.steps > ul li small { display: block; position: relative; font-size: 1.125rem; color: var(--light); font-weight: 400; padding: 1em 0 0 0; margin: 1em 0 0 0; }
section.steps > ul li small:before { content: ''; position: absolute; top: 0; left: 0; display: block; width: 1.5em; height: 0.125rem; background-color: currentColor; }

/* Title text */
section.title-text { padding: 2rem 0; }
section.title-text > div { width: 90%; max-width: 102.5rem; margin: 0 auto; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: center; padding: 4rem 0; gap: 4rem; }
section.title-text > div > div { flex: 1; }
section.title-text > div > div p { color: var(--lightest); font-weight: 500; }
@media screen and (max-width: 42rem) {
    section.title-text > div > div { flex: 1 1 100%; }
}

/* Image blocks */
section.image-blocks { padding: 2rem 0; }
section.image-blocks > div { width: 90%; max-width: 102.5rem; margin: 0 auto; text-align: center; }
section.image-blocks.small > div { width: min(calc(90% + 8rem), 100%); max-width: 110.5rem; background-color: #FFF; text-align: left; clip-path: polygon(0 0, calc(100% - 6em) 0, 100% 6em, 100% 100%, 0 100%); padding: 6rem 1.25rem; }
@media(min-width:60rem){
	section.image-blocks.small > div {
		padding:4rem;
	}
}
section.image-blocks > div > p { color: var(--light); font-size: 1.375rem; padding: 0; }
section.image-blocks > div > ul { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; list-style: none; padding: 4rem 0; gap: 4rem; }
section.image-blocks > div > ul li { flex: 0 1 40%; position: relative; aspect-ratio: 1/1; background-color: var(--lightest); background-size: cover; background-position: center; background-repeat: no-repeat; clip-path: polygon(0 4rem,4rem 0,100% 0,100% 100%,0 100%); }
section.image-blocks.small > div > ul li { flex: 0 1 30%; padding: 0 0 30%; }
section.image-blocks > div > ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.image-blocks > div > ul li a span { position: absolute; bottom: 0; right: 0; width: 60%; background-color: #fff; clip-path: polygon(0 2em,2em 0,100% 0,100% 100%,0 100%); color: #000; text-decoration: none; font-size: 1.25rem; font-weight: 500; padding: 2em 1em 2em 2em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
section.image-blocks > div > a.btn { font-size: 1.875rem; }
@media screen and (max-width: 42rem) {
    section.image-blocks > div > ul li, section.image-blocks.small > div > ul li { flex: 1 1 100%; }
}

/* Image columns */
section.image-columns { padding: 0; display: flex; flex-wrap: wrap; }
section.image-columns div[style*="background-image"] { background-size: cover; background-position: center; background-repeat: no-repeat; width:100%; height:100vh; }
section.image-columns > div { aspect-ratio: 1/1; background-size: cover; background-position: center; background-repeat: no-repeat; display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; }

@media (min-width:60rem) {
section.image-columns div[style*="background-image"] { width:inherit; height:inherit; }
section.image-columns > div { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); flex: 1 1 50%;  }
	
}
section.image-columns > div > div { padding: min(4vw, 4rem); background-color: transparent; }
section.image-columns > div > div.white { background-color: #FFF; }
section.image-columns > div > div.beige { background-color: var(--beige); }
section.image-columns > div > div.black { background-color: #000; }
section.image-columns > div > div p { color: var(--lightest); font-weight: 500; }
section.image-columns > div > div p:first-child { text-transform: uppercase; color: var(--lightest); font-weight: 500; }
section.image-columns > div > div h2 { font-size: 1.875rem; padding: 0 0 1.5em; position: relative; margin: 0 0 1em; }
section.image-columns > div > div h2:after { content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 2rem; height: 0.25rem; background-color: currentColor; }

/* Specs */
section.specs { padding: 8rem 0 0; }
section.specs > div, section.specs > h2 { width: 90%; max-width: 102.5rem; margin: 0 auto; }
section.specs > div { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
section.specs > div > div { flex: 1 1 50%; padding: 6rem 8vw 0; }
section.specs > div > div > h3 { position: relative; font-size: 1.625rem; padding: 0 0 0.5em; margin: 0 0 1.5em; }
section.specs > div > div > h3:after { content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 2rem; height: 0.125rem; background-color: currentColor; }
section.specs > div > div > p { color: var(--lightest); font-weight: 500; }
section.specs > div > div:first-child { filter: var(--shadow); width: 100%; padding: 0; margin: 0; }
section.specs > div > div:first-child > ul { position: relative; top: 4rem; list-style: none; background-color: #FFF; font-size: clamp(0.935rem, 2vw, 1.375rem); padding: 3.5rem 0; clip-path: polygon(0 0,100% 0,100% calc(100% - 4rem),calc(100% - 4rem) 100%,0 100%); }
section.specs > div > div:first-child > ul li { padding: 0.5em 0; }
section.specs > div > div:first-child > ul li span { display: inline-block; vertical-align: top; width: 45%; padding: 0 5% 0 0; text-align: right; }
section.specs > div > div:first-child > ul li span:nth-child(even) { width: 50%; padding: 0; text-align: left; }
section.specs + section { padding-top: 8rem; }
@media screen and (max-width: 42rem) {
    section.specs > div { flex-direction: column; }
}

/* About */
section.about { background-color: #FFF; }
section.about > div { position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
section.about h1 { padding: 4rem 0 0 var(--pad); font-family: 'Thesignature'; font-size: 2rem; font-weight: 400; line-height: 2em; }
section.about h1 > span { display: block; font-size: 9.375rem; font-family: 'Roboto'; font-weight: 900; color: #C3C3C3; text-transform: uppercase; margin: 0 0 0 -0.5em; }
section.about div.gray { background-color: #F7F7F7; padding: 0 60% 0 0; margin: 0 0 0 var(--pad); clip-path: polygon(0 2em,2em 0,100% 0,100% 100%,0 100%); }
section.about div.gray > p { padding: 4rem; color: var(--lightest); }
section.about div > img { position: absolute; left: 50%; top: 0; max-height: calc(100% - 4rem); max-width: 80%; clip-path: polygon(0 0,100% 0,100% 100%,2em 100%,0 calc(100% - 2em)); }
section.about div.link_block { position: absolute; right: 0; bottom: 0; padding: 2rem 2rem 2rem 3rem; clip-path: polygon(0 4em,4em 0,100% 0,100% 100%,0 100%); background-color: var(--beige); }
section.about div.link_block > h2 { font-size: 1.625rem; color: #FFF; }
section.about div.link_block > div { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; aspect-ratio: 1/1; }
section.about div.link_block a { background-color: var(--beige-dark); color: #FFF; text-decoration: none; font-weight: 500; width: 10rem; padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
section.about div.link_block a:first-child { background-color: var(--brown); }
/* section.about div.link_block a:last-child { background-color: var(--beige); } */
section.about div.link_block a:last-child { background-color: #202020; }
section.about div.link_block a > svg { display: block; width: 1rem; height: 1rem; }
section.about div.link_block a.icon { font-family: 'Roboto'; font-size: 1.125rem; font-weight: 900; }
section.about div.link_block a.icon > img { display: block; width: 3rem; height: 3rem; filter:invert(); }
@media screen and (max-width: 50rem) {
    section.about h1 { font-size: 12vw; text-align: center; padding: 4rem 0 0; }
    section.about h1 > span { font-size: 34vw; margin: 0; }
    section.about div.gray { padding: 0 0 8rem; }
    section.about div > img { position: relative; left: unset; top: unset; margin: -8rem auto 2rem; }
    section.about div.link_block {position: relative; right: unset; bottom: unset; width: 90%; margin: 0 0 0 auto; padding-top:4rem; }
    section.about div.link_block a { width: unset; }
}
@media screen and (max-width: 30rem) {
    section.about div.link_block { width: 100%; }
    section.about div.link_block > div { grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(4, 1fr); }
    section.about div.link_block a:first-child { background-color: var(--beige-dark); }
    section.about div.link_block a:nth-child(2) { background-color: var(--brown); }
    section.about div.link_block a > svg { display: block; width: 2rem; height: 2rem; }
}

/* Form */
section.form { padding: 4rem 0 0rem; }
section.form > div { width: 90%; max-width: 102.5rem; padding: 0; margin: 0 auto; }
section.form > div > h2 > span { display: block; font-size: 1.5rem; font-weight: normal; color: var(--light); }
section.form > div > p { display: block; font-size: 1.125rem; font-weight: 500; color: var(--light); }
section.form > div > div { display: flex; padding: 2rem 0 0; gap:2rem; }
section.form > div > div > div { flex: 1 1 60%; }
section.form > div > div > div:last-child { flex: 1 1 40%; }
section.form > div > div > div:last-child p { color: var(--lightest); font-weight: 500; }
section.form > div > div > div:last-child h3 { font-family: 'Heebo'; font-size: 1.5rem; font-weight: 600; }
section.form > div > div > div:last-child a { text-decoration: none; }
section.form form > p { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
section.form form > p > br { display: none; }
section.form form > p label { flex: 1 1 40%; font-size: 1.125rem; padding: 1em 0; min-width: 15rem; }
section.form form > p label.wide { flex: 1 1 100%; }
section.form form > p input { width: 100%; border: 1px solid #000; border-width: 0 0 1px; background-color: var(--bg); transition: background-color 0.2s; }
section.form form > p textarea { width: calc(100% - 2px); display: block; margin: 1px; border: 0; background-color: var(--bg); transition: background-color 0.2s; clip-path: polygon(0 0,100% 0,100% calc(100% - 2em),calc(100% - 2em) 100%,0 100%); }
section.form form > p span { position: relative; display: inline-block; width: 75%; margin: 0; padding: 0; }
section.form form > p span[data-name=message]:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; clip-path: polygon(0 0,100% 0,100% calc(100% - 2em),calc(100% - 2em) 100%,0 100%); }
section.form form > p input:hover, section.form form > p input:focus, section.form form > p textarea:hover, section.form form > p textarea:focus { background-color: #fff; outline: 0; }
section.form form > p input[type=submit] { display: inline-block; width: auto; background-color: var(--btn); color: #000; padding: 1em 4em; border: 0; clip-path: polygon(0 0,100% 0,100% calc(100% - 1em),calc(100% - 1em) 100%,0 100%); font-size: 1.125rem; font-weight: 500; cursor: pointer; }
section.hero + section.form { background-color: #FFF; }
section.hero + section.form form > p input:not([type=submit]) { background-color: #FFF; }
section.hero + section.form form > p textarea { background-color: #FFF; }
@media screen and (max-width: 50rem) {
    section.form > div > div { flex-wrap: wrap; }
    section.form > div > div > div:first-child, section.form > div > div > div:last-child { flex-basis: 100%; }
}

/* Carousel */
section.carousel-text { padding: 2rem 0; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4rem; }
section.carousel-text > div:first-child { filter: var(--shadow); }
section.carousel-text div.scroll { width: 95%; max-width: 95%; overflow: hidden; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; clip-path: polygon(0 0,100% 0,100% calc(100% - 4rem),calc(100% - 4rem) 100%,0 100%); }
section.carousel-text div.controls { text-align: right; padding: 1rem 4rem 4rem 0; }
section.carousel-text div.controls button { position: relative; width: 3rem; height: 3rem; background-color: transparent; border: 0; border-radius: 50%; padding: 0; margin: 0 0 0 1rem; }
section.carousel-text div.controls button > svg { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; }
section.carousel-text div.controls button:first-of-type > svg { transform: rotate(180deg); }
section.carousel-text ul { display: flex; padding: 0; margin: 0; list-style: none; }
section.carousel-text ul li { position: relative; flex: 0 0 100%; width: 100%; padding: 0 0 56.25%; scroll-snap-align: center; }
section.carousel-text ul li img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
section.carousel-text > div { flex: 1 1 calc(50% - 2rem); }
section.carousel-text > div:last-child { padding: 0 var(--pad) 0 5%; }
section.carousel-text > div > p.tagline { font-family: 'Roboto'; font-size: 1.375rem; color: var(--light); padding: 0 0 0.5em; }
section.carousel-text > div > h1 { padding: 0 0 0.5em; }
section.carousel-text > div > p { font-size: 1.375rem; color: var(--lightest); font-weight: 500; }

/* Team */
section.carousel-team { overflow:hidden; padding: 8rem 0 2rem; width: 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 4rem; }

section.carousel-team > div:last-child { position: relative; filter: var(--shadow); overflow-x: clip; }
section.carousel-team div.scroll { width: 100%; max-width: 100%; overflow: hidden; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
section.carousel-team > div:last-child:after { content: 'swipe'; text-transform: uppercase; position: absolute; bottom: -0.65em; right: 0; font-family: 'Roboto'; font-size: 9.375rem; font-weight: 900; color: #000; opacity: 0.24; }
section.carousel-team div.controls { text-align: left; padding: 1rem 4rem 4rem 0; }
section.carousel-team div.controls button { position: relative; width: 3rem; height: 3rem; background-color: transparent; border: 0; border-radius: 50%; padding: 0; margin: 0 0 0 1rem; }
section.carousel-team div.controls button > svg { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; }
section.carousel-team div.controls button:first-of-type > svg { transform: rotate(180deg); }
section.carousel-team ul { display: flex; padding: 0; margin: 0; list-style: none; gap: 2rem; }
section.carousel-team ul li { position: relative; flex: 0 0 30%; width: 30%; min-width: 12rem; aspect-ratio: 3/4; scroll-snap-align: center; clip-path: polygon(0 2em,2em 0,100% 0,100% 100%,0 100%); }
section.carousel-team ul li img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
section.carousel-team ul li span { position: absolute; bottom: 0; right: 0; width: 80%; background-color: #fff; clip-path: polygon(0 2em,2em 0,100% 0,100% 100%,0 100%); color: #000; text-decoration: none; padding: 2em 1em 2em 2em; text-align: left; }
section.carousel-team ul li span b { font-size: 1.25rem; font-weight: 500; }
section.carousel-team > div { flex: 1 1 calc(50% - 4rem); width: calc(50% - 4rem); min-width: 25rem; }
section.carousel-team > div:first-child { padding: 0 0 0 var(--pad); }
section.carousel-team > div > p.tagline { font-family: 'Roboto'; font-size: 1.375rem; color: var(--light); padding: 0 0 0.5em; }
section.carousel-team > div > h1 { padding: 0 0 0.5em; }
section.carousel-team > div > p { font-size: 1.375rem; color: var(--lightest); font-weight: 500; }
@media screen and (max-width: 30rem) {
    section.carousel-team > div:first-child { padding: 0 2rem; }
    section.carousel-team > div > h1 { font-size: 11vw; }
    section.carousel-team > div > p { font-size: unset; }
}

/* Scroll */
section.scroll { padding: 4rem 0 0; overflow: hidden; text-align: center; }
section.scroll > hgroup { width: 90%; max-width: 102.5rem; margin: 0 auto 8rem; text-align: center; }
section.scroll > hgroup p { color: var(--light); font-size: 1.375rem; padding: 0; max-width: 50rem; margin: 0 auto; }
section.scroll div.scroll { width: 100%; max-width: 100%; overflow: hidden; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
section.scroll div.controls { text-align: right; padding: 1rem 4rem 4rem 0; }
section.scroll div.controls button { position: relative; width: 3rem; height: 3rem; background-color: #fff; border: 1px solid var(--bl-t); border-radius: 50%; box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.16); padding: 0; margin: 0 0 0 1rem; }
section.scroll div.controls button > svg { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; color: var(--beige); }
section.scroll div.controls button:first-of-type > svg { transform: rotate(180deg); }
section.scroll div.controls button:disabled { opacity: 0.25; }
section.scroll ul { display: flex; gap: 2rem; align-items: center; padding: 0 0 40px; margin: 0 auto; filter: var(--shadow); list-style: none; }
section.scroll div.scroll.center ul { justify-content: center; }
section.scroll ul li { position: relative; flex: 0 0 25vw; aspect-ratio: 4/5; min-width: 14rem; max-width: 30rem; background-color: var(--bl-l); overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; scroll-snap-align: center; z-index: 10; }
section.scroll ul li img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; object-fit: cover; object-position: center; -webkit-transform: translate3d(0, 0, 0); /* Fix for Safari bug */ } 
section.scroll ul li a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0; margin: 0; text-decoration: none; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
section.scroll ul li a > h3, section.scroll ul li a > span { display: block; width: 80%; font-family: 'Heebo'; font-weight: 600; text-align: center; padding: 0.2em 1em; box-shadow: 0 0 0.2em 0 hsla(0deg, 0%, 0%, 0.25); }
section.scroll ul li a > h3 { font-size: 1.8rem; line-height: 1.2; font-weight: 600; margin: 0 0 0.2em 0; background-color: var(--dark); color: var(--beige); }
section.scroll ul li a > h3 > span { display: inline-block; width: 100%; color: #FFF; font-size: 1.4rem; }
section.scroll ul li a > span { background-color: var(--beige); color: var(--dark); margin: 0 0 10%; font-size: 1.4rem; }
/* CTA */
section.cta { padding: 4rem 0; }
section.cta > div { width: 90%; max-width: 102.5rem; padding: 0; margin: 0 auto; color: #FFF; filter: var(--shadow); }
section.cta > div > div { position: relative; width: 100%; aspect-ratio: 3/1; /*padding: 0 0 33.33%;*/ clip-path: polygon(0 0,calc(100% - 4em) 0,100% 4em,100% 100%,0 100%); background-size: cover; background-position: center; background-repeat: no-repeat; }
section.cta > div > div > div { padding-left:1rem; height: 100%; display: flex; flex-direction: column; justify-content: center; filter: var(--shadow); }
section.cta > div > div > div h2 { font-size: clamp(1rem, 4vw, 3.25rem); }
section.cta > div > div > div p { font-size: clamp(1rem, 4vw, 1.5rem); font-weight: 400; padding: 0; }
@media(min-width:60rem){
	section.cta > div > div > div { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; filter: var(--shadow); }
	section.cta > div > div > div h2 { width: 55%; text-align: right; font-size: clamp(1rem, 4vw, 3.25rem); }
	section.cta > div > div > div p { width: 55%; font-size: clamp(1rem, 4vw, 1.5rem); font-weight: 600; padding: 0; text-align: right; }
}
footer { padding: 5em 0 2em; background-color: var(--beige); color: #000; clip-path: polygon(0 5em,5em 0,100% 0,100% 100%,0 100%); }
footer > div:first-child { padding: 0 0 2rem; }
footer > div:first-child img.logo { width: 17.5rem; }
footer > div { width: 90%; max-width: 102.5rem; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 2rem; }
footer > div.columns > div { flex: 1 1 25%; padding: 0; }
footer > div.columns > div a { color: inherit; font-weight: 600; text-decoration: none; }
footer > div.columns > div.socials { flex: 1 1 1em; }
footer > div.columns > div.socials a { display: block; font-size: 1.5rem; margin: 0 0 0.5em; }
footer > div.columns > div.socials a svg { width: 1em; height: 1em; }
@media screen and (max-width: 50rem) {
    footer { padding: 5em 0 0; }
    footer > div.columns { width: 100%; }
    footer > div.columns > div { flex: 1 1 100%; padding: 0 5%; }
    footer > div.columns > div.socials { background-color: #000; color: #FFF; }
    footer > div.columns > div.socials a { display: inline-block; margin: 0.5em 0.5em 0.5em 0; }
}
@media (prefers-reduced-motion: no-preference) {
	/* Fade ins */
	main > section:not(.hero, .home-hero, .image-columns) > *, main > section.image-columns > div > div { opacity: 1; transform: translateY(0); transition: opacity 0.75s ease-in-out 0s, transform 0.75s ease-in-out 0s; }
	main > section.faded:not(.hero, .home-hero, .image-columns) > *, footer.faded { opacity: 0; transform: translateY(25vw); }
    main > section.image-columns.faded > div > div { opacity: 0; }
}

section.video-grid { color: #000; background-color: #FFF; background-size: cover; background-position: center bottom; background-repeat: no-repeat; padding: 2rem 0 8rem; }
section.video-grid > div { height: 100%; margin: 0 auto; display: grid; gap:8em; padding:0 1rem; }
section.video-grid .video-item { position: relative; }
section.video-grid .video-item iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
section.video-grid .video-title { position: relative; margin-top: 2em; font-size: 1.625rem; font-weight: 600; display: flex; flex-direction: column; }
section.video-grid .video-title::before { content: ''; position: absolute; top:-1.5rem; left: 0; display: block; width: 1.5em; height: 0.125rem; background-color: currentColor; }
@media (min-width:60rem) {
    section.video-grid > div {
        grid-template-columns: repeat(3, minmax(0, 1fr)); width: 90%;
    }
    section.video-grid .video-item {
        aspect-ratio: 3 / 4; clip-path: polygon(0 0, calc(100% - 2em) 0, 100% 2em, 100% 100%, 0 100%);
    }
}