@charset "UTF-8";
@font-face {
  font-family: "Dienstag";
  src: url("/assets/fonts/Dienstag_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dienstag";
  src: url("/assets/fonts/Dienstag_Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dienstag";
  src: url("/assets/fonts/Dienstag_Bold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root {
  --white: #FFF;
  --black: #545454;
  --gray-blue: #b6b8de;
  --yellow-orange: #fcdfbf;
  --orange: #f48033;
  --sidepad-lr: 6rem;
  --sidepad-tb: 8rem;
  --radius: 2rem;
}
@media (orientation: portrait) {
  :root {
    --sidepad-lr: 2rem;
    --sidepad-tb: 5rem;
  }
}

.back-white {
  background: var(--white);
}

.back-gray-blue {
  background: var(--gray-blue);
}

.back-yellow-orange {
  background: var(--yellow-orange);
}

.back-orange {
  background: var(--orange);
}

.color-white {
  color: var(--white);
}

.color-gray {
  color: var(--black);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
}

html {
  font-size: 1vw;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}
@media (orientation: portrait) {
  html {
    font-size: 2.7vw;
  }
}

body {
  font-family: "Dienstag", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  color: var(--black);
  background: var(--gray-blue);
  width: 100vw;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
}

h1 {
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 100%;
  color: var(--black);
  text-transform: uppercase;
}
@media (orientation: portrait) {
  h1 {
    font-size: 4rem;
  }
}

h2 {
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 130%;
  color: var(--black);
  text-transform: uppercase;
}
@media (orientation: portrait) {
  h2 {
    font-size: 3rem;
  }
}

h3 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 100%;
  color: var(--black);
  text-transform: uppercase;
}
@media (orientation: portrait) {
  h3 {
    font-size: 2.5rem;
  }
}

p {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 100%;
  color: var(--black);
}
p.small {
  font-size: 1.2rem;
}
p b {
  font-weight: 600;
}

a {
  text-decoration: none;
}
a:hover, a:focus, a:active {
  text-decoration: none;
}
a.btn {
  padding: 1rem 1.5rem;
  color: var(--white);
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 600;
  border-radius: 5rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
a.btn.back-white {
  color: var(--orange);
}
a.btn:hover {
  box-shadow: 0 0.625rem 1.25rem -0.625rem rgba(0, 0, 0, 0.6);
}
@media (orientation: portrait) {
  a.btn {
    font-size: 1.3rem;
  }
  a.btn.less-padding {
    padding: 1rem 1rem;
  }
}

main, section, header, footer, nav, div, form, menu, summary, label, button, fieldset {
  display: flex;
}

header, section, footer {
  width: 100%;
}

header {
  justify-content: center;
  padding: 1.5rem 2rem;
  background: var(--gray-blue);
  z-index: 9999;
}
header img {
  width: 7rem;
  height: auto;
}

footer {
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem 1rem;
}
footer > div {
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 1.5rem;
}
footer > div a, footer > div span {
  display: flex;
  align-items: center;
  color: var(--black);
}
footer > div a:not(:first-of-type)::before, footer > div span:not(:first-of-type)::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  height: 105%;
  width: 2px;
  background: var(--black);
}
footer p.small {
  text-transform: uppercase;
  font-size: 0.85rem;
}

span.check {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
}
span.check::before {
  content: "✓";
  position: absolute;
  color: var(--gray-blue);
  font-size: 2rem;
}
span.check.large {
  width: 8rem;
  height: 8rem;
}
span.check.large::before {
  font-size: 7rem;
}

section.splitted-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 55rem;
}
section.splitted-half:has(div > div.faq) {
  height: 60rem;
}
section.splitted-half > div {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}
section.splitted-half > div:first-of-type {
  width: 100%;
  padding: var(--sidepad-tb) 3rem var(--sidepad-tb) var(--sidepad-lr);
  gap: 3rem;
  text-align: center;
}
section.splitted-half > div:first-of-type h1, section.splitted-half > div:first-of-type h2, section.splitted-half > div:first-of-type h3, section.splitted-half > div:first-of-type p {
  color: inherit;
}
section.splitted-half > div:first-of-type h1, section.splitted-half > div:first-of-type h2 {
  max-width: 25rem;
}
section.splitted-half > div:first-of-type h3 {
  max-width: 30rem;
}
section.splitted-half > div:first-of-type p {
  max-width: 30rem;
}
section.splitted-half > div:first-of-type .faq {
  flex-direction: column;
  gap: 1rem;
}
section.splitted-half > div:first-of-type .faq .accordion {
  flex-direction: column;
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  background: var(--white);
  text-align: left;
}
section.splitted-half > div:first-of-type .faq .accordion details {
  margin-bottom: 0;
}
section.splitted-half > div:first-of-type .faq .accordion details summary {
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 100%;
  color: var(--black);
}
section.splitted-half > div:first-of-type .faq .accordion details summary > div {
  width: 1.5rem;
  height: 1.5rem;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  rotate: 45deg;
  transition: rotate 0.5s ease-in-out;
}
section.splitted-half > div:first-of-type .faq .accordion details summary::marker, section.splitted-half > div:first-of-type .faq .accordion details summary::-webkit-details-marker {
  content: none;
  display: none;
}
section.splitted-half > div:first-of-type .faq .accordion > div {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 0.5s ease-in-out;
  overflow: hidden;
}
section.splitted-half > div:first-of-type .faq .accordion > div p {
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-in-out;
}
section.splitted-half > div:first-of-type .faq .accordion:has(details[open]) details {
  margin-bottom: 1.5rem;
}
section.splitted-half > div:first-of-type .faq .accordion:has(details[open]) details summary > div {
  rotate: -45deg;
}
section.splitted-half > div:first-of-type .faq .accordion:has(details[open]) > div {
  grid-template-rows: 1fr;
}
section.splitted-half > div:first-of-type .faq .accordion:has(details[open]) > div p {
  opacity: 1;
}
section.splitted-half > div:last-of-type {
  height: 100%;
}
section.splitted-half > div:last-of-type > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (orientation: portrait) {
  section.splitted-half {
    grid-template-columns: 1fr;
    height: auto;
  }
  section.splitted-half:has(div > div.faq) {
    height: auto;
  }
  section.splitted-half > div:first-of-type h1, section.splitted-half > div:first-of-type h2, section.splitted-half > div:first-of-type h3, section.splitted-half > div:first-of-type p {
    max-width: 100%;
  }
}

section.vertical-checklist {
  flex-direction: column;
  align-items: center;
  padding: var(--sidepad-tb) var(--sidepad-lr);
  gap: 3rem;
}
section.vertical-checklist h2 {
  text-align: center;
  margin-bottom: 2rem;
  max-width: 69rem;
  align-self: center;
}
section.vertical-checklist > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}
section.vertical-checklist > div > div {
  align-items: flex-start;
  max-width: 43rem;
  gap: 1rem;
}
@media (orientation: portrait) {
  section.vertical-checklist h2 {
    max-width: 100%;
    font-size: 2.5rem;
  }
  section.vertical-checklist > div > div {
    max-width: 100%;
  }
}

section.horizontal-checklist {
  flex-direction: column;
  align-items: center;
  padding: var(--sidepad-tb) var(--sidepad-lr);
  gap: 5rem;
}
section.horizontal-checklist > div {
  color: var(--black);
}
section.horizontal-checklist > div:first-of-type {
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
  max-width: 48rem;
}
section.horizontal-checklist > div:last-of-type {
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
section.horizontal-checklist > div:last-of-type > div {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  max-width: 21rem;
}
section.horizontal-checklist > div:last-of-type > div:first-of-type {
  text-align: left;
}
section.horizontal-checklist > div:last-of-type > div:last-of-type {
  text-align: right;
}
@media (orientation: portrait) {
  section.horizontal-checklist > div:first-of-type {
    max-width: 100%;
  }
  section.horizontal-checklist > div:last-of-type {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  section.horizontal-checklist > div:last-of-type > div:first-of-type, section.horizontal-checklist > div:last-of-type > div:last-of-type {
    text-align: center;
  }
}

section.results {
  align-items: center;
  justify-content: space-between;
  padding: var(--sidepad-tb) var(--sidepad-lr);
}
section.results > div:first-of-type {
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 37rem;
  text-align: center;
}
section.results > div:first-of-type .splide-wrapper {
  width: 100%;
  height: 17rem;
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  background: var(--white);
  text-align: left;
}
section.results > div:first-of-type .splide-wrapper .splide, section.results > div:first-of-type .splide-wrapper .splide__track, section.results > div:first-of-type .splide-wrapper .splide__list, section.results > div:first-of-type .splide-wrapper .splide__slide {
  width: 100%;
  height: 100%;
}
section.results > div:first-of-type .splide-wrapper .contents {
  flex-direction: column;
  font-size: 1rem;
  font-weight: 600;
  line-height: 120%;
  color: var(--black);
}
section.results > div:first-of-type .splide-wrapper .contents span {
  margin-top: 2rem;
}
section.results > div:last-of-type {
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  overflow: hidden;
}
section.results > div:last-of-type > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (orientation: portrait) {
  section.results {
    flex-direction: column;
    gap: 4rem;
  }
  section.results > div {
    width: 100%;
    max-width: 100%;
  }
  section.results > div:first-of-type {
    max-width: 100%;
  }
  section.results > div:last-of-type {
    width: 25rem;
    height: 25rem;
  }
}

section.arch-image {
  height: 60rem;
  overflow: hidden;
}
section.arch-image > div {
  width: 100%;
  height: 100%;
}
section.arch-image > div:first-of-type {
  align-items: flex-start;
  text-align: center;
  padding: 6rem var(--sidepad-lr);
}
section.arch-image > div:first-of-type h3 {
  color: var(--white);
}
section.arch-image > div:last-of-type {
  position: absolute;
  bottom: -3%;
  clip-path: circle(70% at 50% 120%);
}
section.arch-image > div:last-of-type img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (orientation: portrait) {
  section.arch-image {
    height: 40rem;
  }
}

section.vertical-checklist-with-image {
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  padding: var(--sidepad-tb) var(--sidepad-lr);
}
section.vertical-checklist-with-image > div {
  align-items: flex-start;
  max-width: 50rem;
  gap: 1rem;
}
section.vertical-checklist-with-image > img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30rem;
  height: auto;
  z-index: -1;
}
@media (orientation: portrait) {
  section.vertical-checklist-with-image > img {
    opacity: 0.5;
  }
}

section.offer {
  flex-direction: column;
  align-items: flex-start;
  color: var(--white);
  padding: var(--sidepad-tb) var(--sidepad-lr);
}
section.offer h1, section.offer h2, section.offer h3, section.offer p {
  color: inherit;
}
section.offer h3 {
  margin-bottom: 1rem;
}
section.offer h2 {
  margin-bottom: 1.5rem;
}
section.offer h1 {
  margin-bottom: 2rem;
}
section.offer .btn {
  font-size: 2.5rem;
  padding: 1.5rem 3rem;
  margin-bottom: 17rem;
}
section.offer img {
  position: absolute;
  right: 3rem;
  bottom: 0;
  width: 40%;
  height: auto;
}
@media (orientation: portrait) {
  section.offer .btn {
    font-size: 2rem;
    padding: 1.5rem 3rem;
  }
  section.offer p {
    margin-top: 17rem;
    z-index: 2;
  }
  section.offer img {
    width: 70%;
    opacity: 0.5;
  }
}/*# sourceMappingURL=styles.css.map */