/* @import url("https://unpkg.com/open-props"); */
/* @import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap"); */

@font-face {
  font-family: "Saira Condensed";
  font-style: normal;
  font-weight: 300;
  /* font-display: swap; */
  src: url("../fonts/saira.woff2") format("woff2");
}

:root {
  --page-width: min(1200px, 80vw);

  /* --color-default: hsl(75, 70%, 89%); */
  /* --color-default: hsl(75, 70%, 93%); */
  --color-default: hsl(54, 100%, 96%);
  --color-accent: #d2ff4d;

  --color-success: hsl(75, 100%, 65%);
  --color-error: hsl(0, 90%, 60%);
  --color-warning: hsl(30, 90%, 60%);
  --color-info: hsl(240, 100%, 60%);

  /* ink, charcoal, stone, ash, smoke, cloud, fog */

  --color-gray-ink: hsl(0, 0%, 14%); /* dark */
  --color-gray-stone: hsl(0, 0%, 20%); /* medium */
  --color-gray-ash: hsl(30, 3%, 24%); /* light */
  --color-gray-smoke: hsl(30, 3%, 45%); /* very light */

  --gradient-dark: linear-gradient(hsl(0, 0%, 43%), hsl(0, 0%, 23%));
  --gradient-light: linear-gradient(hsl(0, 0%, 53%), hsl(0, 0%, 33%));

  --shadow-small: 0 0 0 clamp(1px, 0.2vmin, 2px) var(--color-gray-ink);
  --shadow-large: 0 clamp(5px, 1vmin, 10px) clamp(20px, 3vmin, 30px) var(--color-gray-ash);

  --font-stack: "Saira Condensed", sans-serif;

  --size-relative-0: 0.1em;
  --size-relative-1: 0.3em;
  --size-relative-2: 0.5em;
  --size-relative-3: 0.8em;

  --size-relative-4: 1.5em;
  --size-relative-5: 2em;
  --size-relative-6: 3em;

  --font-size-fluid-1: clamp(1.25rem, 2vw, 1.5rem);
  --font-size-fluid-2: clamp(1.5rem, 3vw, 2rem);
  --font-size-fluid-3: clamp(2rem, 4vw, 3rem);
  --font-size-fluid-4: clamp(2.5rem, 5vw, 3.5rem);
  --font-size-fluid-5: clamp(3rem, 6vw, 5rem);
}

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

  font-family: var(--font-stack);
  font-weight: var(--font-weight-3);
  line-height: 1.3;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5em;
}

body {
  display: grid;
  place-items: center;

  background-color: var(--color-gray-ash);
  color: var(--color-default);

  overflow-x: hidden;
}

body::before {
  position: fixed;
  z-index: -1;
  content: "";

  height: 100vh;
  width: 100%;

  top: 0;

  background-image: url("../images/noise.svg");
  /* background-image: url("../images/noise.jpeg"); */
  opacity: 0.3;

  pointer-events: none;
}

/*
------------------------------
ICONS
------------------------------
*/

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon::before {
  height: var(--icon-size);
  width: var(--icon-size);

  background-color: var(--icon-color);
}

.icon::before {
  display: inline-block;
  content: "";

  mask-size: contain;
  mask-repeat: no-repeat;

  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.icon-spinner::before {
  mask-image: url("../icons/hourglass.svg");
  -webkit-mask-image: url("../icons/hourglass.svg");
}

.icon-home::before {
  mask-image: url("../icons/marker.svg");
  -webkit-mask-image: url("../icons/marker.svg");
}

.icon-burger-open::before {
  mask-image: url("../icons/burger-open.svg");
  -webkit-mask-image: url("../icons/burger-open.svg");
}

.icon-burger-close::before {
  mask-image: url("../icons/burger-close.svg");
  -webkit-mask-image: url("../icons/burger-close.svg");
}

.icon-infos::before {
  mask-image: url("../icons/user.svg");
  -webkit-mask-image: url("../icons/user.svg");
}

.icon-demos::before {
  mask-image: url("../icons/wrench.svg");
  -webkit-mask-image: url("../icons/wrench.svg");
}

.icon-contact::before {
  mask-image: url("../icons/envelope.svg");
  -webkit-mask-image: url("../icons/envelope.svg");
}

.icon-chevron-up::before {
  mask-image: url("../icons/up.svg");
  -webkit-mask-image: url("../icons/up.svg");
}

.icon-chevron-down::before {
  mask-image: url("../icons/down.svg");
  -webkit-mask-image: url("../icons/down.svg");
}

.icon-send::before {
  mask-image: url("../icons/send.svg");
  -webkit-mask-image: url("../icons/send.svg");
}

.icon-phone::before {
  mask-image: url("../icons/phone.svg");
  -webkit-mask-image: url("../icons/phone.svg");
}

.icon-fax::before {
  mask-image: url("../icons/fax.svg");
  -webkit-mask-image: url("../icons/fax.svg");
}

.icon-mobile::before {
  mask-image: url("../icons/mobile.svg");
  -webkit-mask-image: url("../icons/mobile.svg");
}

.icon-email::before {
  mask-image: url("../icons/mail.svg");
  -webkit-mask-image: url("../icons/mail.svg");
}

.icon-close::before {
  mask-image: url("../icons/close.svg");
  -webkit-mask-image: url("../icons/close.svg");
}

.icon-imprint::before {
  mask-image: url("../icons/gavel.svg");
  -webkit-mask-image: url("../icons/gavel.svg");
}

.icon-disclaimer::before {
  mask-image: url("../icons/shield.svg");
  -webkit-mask-image: url("../icons/shield.svg");
}

.icon-cookies::before {
  mask-image: url("../icons/check.svg");
  -webkit-mask-image: url("../icons/check.svg");
}

.icon-thumb-up::before {
  mask-image: url("../icons/thumb-up.svg");
  -webkit-mask-image: url("../icons/thumb-up.svg");
}

.icon-thumb-down::before {
  mask-image: url("../icons/thumb-down.svg");
  -webkit-mask-image: url("../icons/thumb-down.svg");
}

/*
------------------------------
SCROLLBARS
------------------------------
*/

::-webkit-resizer {
  display: none;
}

::-webkit-scrollbar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 1em;
}

::-webkit-scrollbar-thumb {
  background-image: linear-gradient(
    to right,
    hsl(75, 100%, 75%),
    hsl(75, 100%, 55%),
    hsl(75, 100%, 36%)
  );
}

::-webkit-scrollbar-track {
  background-color: hsl(0, 0%, 4%);
}

@-moz-document url-prefix() {
  html {
    scrollbar-color: var(--color-accent) hsl(0, 0%, 4%);
    scrollbar-width: thin; /* auto, thin, none*/
  }

  :root {
    scrollbar-color: var(--color-accent) hsl(0, 0%, 4%) !important;
    scrollbar-width: thin !important;
  }
}

/*
------------------------------
TYPOGRAPHY
------------------------------
*/

p,
a,
ul,
li,
label,
input,
textarea,
button {
  font-size: var(--font-size-fluid-1);
}

h4 {
  font-size: var(--font-size-fluid-2);
  font-weight: var(--font-weight-4);
}

h3 {
  font-size: var(--font-size-fluid-3);
  font-weight: var(--font-weight-4);
}

h2 {
  font-size: var(--font-size-fluid-4);
  font-weight: var(--font-weight-4);
}

h1 {
  font-size: var(--font-size-fluid-5);
  font-weight: var(--font-weight-4);
}

blockquote {
  position: relative;
  padding: var(--size-relative-2) var(--size-relative-3);
  background-color: var(--color-gray-smoke);
  border: var(--border-size-2) solid var(--color-gray-stone);
}

blockquote::before {
  content: "";
  position: absolute;

  width: var(--border-size-3);
  /* height: calc(100% + var(--border-size-2) * 2); */
  height: 100%;

  left: calc(var(--border-size-2) * -1);
  /* top: calc(var(--border-size-2) * -1); */
  top: 0;

  background-color: var(--color-warning);
}

/*
------------------------------
CONTROLS
------------------------------
*/

/* Buttons */

button {
  padding: var(--size-relative-2) var(--size-relative-3);

  color: var(--color-default);
  background-color: var(--color-gray-ink);
  background-image: var(--gradient-dark);
  box-shadow: var(--shadow-small);
  border-radius: var(--size-relative-1);

  outline: none;
  cursor: pointer;
}

button span {
  font-weight: var(--font-weight-4);
}

button:hover {
  background-image: var(--gradient-light);
}

/* Links */

a {
  color: var(--color-default);
  text-decoration: none;
  outline: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: var(--size-relative-1);
  text-decoration-thickness: var(--border-size-2);
}

/* Textareas */

input,
textarea {
  padding: var(--size-relative-2) var(--size-relative-3);

  color: var(--color-default);
  background-color: var(--color-gray-smoke);

  outline: var(--border-size-2) solid transparent;
  box-shadow: 0 0 0 var(--border-size-2) var(--color-gray-stone);

  caret-color: var(--color-accent);
}

textarea {
  resize: none;
}

input {
  margin-bottom: var(--size-relative-2);
}

input:autofill {
  color: var(--color-default);
  box-shadow: inset 0 0 0 100pxvar (--color-gray-smoke),
    0 0 0 var(--border-size-2) var(--color-gray-stone);
  -webkit-text-fill-color: var(--color-default);
}

input:focus-visible,
textarea:focus-visible {
  outline-color: var(--color-accent);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-default);
  opacity: 0.5;
}

/* Checkboxes */

input[type="checkbox"] {
  display: none;
  appearance: none;
  outline: none;
  -webkit-appearance: none;
}

input[type="checkbox"] + label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-relative-1);

  font-weight: var(--font-weight-4);

  width: max-content;

  background-image: var(--gradient-dark);
  box-shadow: var(--shadow-small);

  cursor: pointer;
}

input[type="checkbox"]:hover + label {
  background-image: var(--gradient-light);
}

input[type="checkbox"] + label span {
  --icon-size: 1em;
  --icon-color: var(--color-accent);
}

/* Radios */

input[type="radio"] {
  display: none;
  appearance: none;
  -webkit-appearance: none;
}

input[type="radio"] + label {
  padding-block: var(--size-relative-0);
  border-bottom: var(--border-size-2) solid transparent;
  cursor: pointer;
}

input[type="radio"]:checked + label {
  color: var(--color-accent);
  border-bottom: var(--border-size-2) solid var(--color-accent);
}

/*
------------------------------
PRELOADER
------------------------------
*/

.preloader {
  position: fixed;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(7, 1fr);
  place-items: center;
  overflow: hidden;

  inset: 0;

  background-color: var(--color-gray-ink);

  z-index: var(--layer-important);
}

.preloader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-relative-3);
  grid-row: 4;
}

.preloader p {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/*
------------------------------
TOAST
------------------------------
*/

.toast {
  position: fixed;
  display: none;
  z-index: var(--layer-5);

  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  border: var(--border-size-2) solid var(--color-success);
  background-color: var(--color-gray-stone);

  padding: var(--size-fluid-2) var(--size-fluid-3);
}

.toast.is-error {
  border: var(--border-size-2) solid var(--color-error);
}

/*
------------------------------
BANNER
------------------------------
*/

.banner {
  position: fixed;
  /* display: grid; */
  display: none;
  grid-template-columns: 1fr max-content;
  z-index: var(--layer-5);

  width: calc(var(--page-width) - 2 * var(--size-fluid-3));

  bottom: var(--size-relative-4);
  left: 50%;
  transform: translateX(-50%);

  background-color: var(--color-gray-ash);
  border: var(--border-size-2) solid var(--color-default);
  box-shadow: var(--shadow-large);

  padding: var(--size-fluid-3);
  gap: var(--size-relative-4);
}

.banner-caption h3 {
  --font-size-fluid-3: clamp(2.5rem, 4vw, 3rem);
  line-height: 0.9;
}

.banner-flag {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: var(--size-relative-1);
}

.banner-flag span {
  --icon-size: 1.5em;
  --icon-color: var(--color-accent);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-relative-1);
}

.banner-choice {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: left;
  gap: var(--size-relative-3);
}

.banner-choice span {
  --icon-size: 1em;
  --icon-color: var(--color-default);

  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--size-relative-1);
}

.banner-flag[data-status="true"] span {
  --icon-color: var(--color-accent);
}

.banner-flag[data-status="false"] span {
  --icon-color: var(--color-error);
}

@media (width <= 1000px) {
  .banner {
    grid-template-columns: 1fr;
    width: var(--page-width);

    top: 50%;
    bottom: unset;
    left: 50%;
    transform: translate(-50%, -50%);

    outline: none;
  }

  .banner-content {
    max-height: 300px;
    padding-right: var(--size-fluid-3);
    overflow-y: auto;
  }

  .banner-choice {
    flex-direction: row;
    justify-content: center;
  }
}

@media (width <= 750px) {
  .banner-choice span::before {
    display: none;
  }
}

/*
------------------------------
POPUP
------------------------------
*/

.overlay {
  display: none;
  position: fixed;
  z-index: var(--layer-4);

  inset: 0;

  background-color: hsla(0, 0%, 0%, 0.7);
}

.popup {
  position: fixed;
  display: none;
  flex-direction: column;
  z-index: var(--layer-5);

  width: calc(var(--page-width) - 2 * var(--size-fluid-2));
  height: 75%;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: var(--color-gray-ash);
  border: var(--border-size-2) solid var(--color-default);
  box-shadow: var(--shadow-large);

  padding: var(--size-fluid-3);
  gap: var(--size-relative-4);
}

.popup-close {
  --icon-size: max(2rem, min(3vw, 2.5rem));
  --icon-color: var(--color-default);

  position: absolute;

  top: calc(var(--icon-size) / 2 * -1 - 1px);
  right: calc(var(--icon-size) / 2 * -1 - 1px);

  background-color: var(--color-gray-ink);
  border-radius: 50%;

  cursor: pointer;
  transition: rotate 0.2s ease-in-out;
}

.popup-close:hover {
  rotate: 180deg;
}

.popup-caption {
  line-height: 0.9;
}

.popup-content {
  --font-size-fluid-3: clamp(2rem, 4vw, 2.5rem);

  overflow-x: hidden;
  height: 100%;

  padding-right: var(--size-fluid-3);
}

.popup-content p {
  text-wrap: pretty;
}

@media (width <= 1000px) {
  .popup {
    width: var(--page-width);
  }
}

/*
------------------------------
MAIN
------------------------------
*/

main {
  container-type: inline-size;
  width: var(--page-width);
}

/*
------------------------------
SECTIONS
------------------------------
*/

section {
  position: relative;
  display: grid;
  padding-block: clamp(3rem, 5vw, 6rem);
  border-bottom: var(--border-size-2) dotted var(--color-accent);
}

.section-icon {
  --icon-size: var(--font-size-fluid-3);
  --icon-color: var(--color-gray-ash);

  place-items: center;

  padding: var(--size-fluid-1);
  padding-right: calc(var(--size-fluid-1) * 2.3);

  background-color: var(--color-default);

  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.section-title {
  align-self: center;
  color: var(--color-default);
}

.section-content {
  display: flow-root;
  max-width: 85%;
  grid-column: 2;

  padding-top: var(--size-fluid-3);

  font-size: var(--font-size-fluid-1);
  text-wrap: pretty;
}

@media (width <= 1000px) {
  section {
    grid-template-columns: max-content 1fr;
  }

  .section-content {
    grid-column: 1 / span 2;
    max-width: 100%;
  }
}

/*
------------------------------
HEADER
------------------------------
*/

header {
  display: grid;
  grid-template-columns: 1fr var(--page-width) 1fr;

  position: sticky;
  z-index: var(--layer-1);

  top: 0;
  width: 100%;
  padding: var(--size-relative-4);

  background-color: var(--color-gray-stone);
  box-shadow: var(--shadow-small);
}

/* Navigation */

.navigation {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  grid-column: 2;
}

.navigation a {
  font-weight: var(--font-weight-4);
}

.navigation a:hover {
  text-decoration: none;
}

.navigation-large {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  box-shadow: var(--shadow-small);
  border-radius: var(--size-relative-1);

  list-style-type: none;
}

.navigation-large a {
  --icon-size: 1em;
  --icon-color: var(--color-accent);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-relative-1);

  padding: var(--size-relative-2) var(--size-relative-3);

  color: var(--color-default);
  background-color: var(--color-gray-ink);
  background-image: var(--gradient-dark);

  outline: none;
  cursor: pointer;
}

.navigation-large a:hover {
  background-image: var(--gradient-light);
}

.navigation-large :first-child a {
  border-radius: var(--size-relative-1) 0 0 var(--size-relative-1);
}

.navigation-large :last-child a {
  border-radius: 0 var(--size-relative-1) var(--size-relative-1) 0;
}

.navigation-large :not(:last-child) a::after {
  position: absolute;
  z-index: 1;
  content: "";

  right: -1.5px;
  height: 1.2em;

  border-right: 3px solid var(--color-accent);
}

@media (width <= 750px) {
  .navigation-large {
    display: none;
  }
}

/* Burger Menu */

.navigation-small {
  display: none;
}

#burger-check + label {
  padding: var(--size-relative-2);
  border-radius: var(--size-relative-1);
}

.dropdown {
  position: absolute;
  display: none;
  margin-top: var(--size-relative-4);
  top: calc(100% + var(--border-size-4));
  left: 0;
  outline: var(--border-size-2) solid var(--color-default);
  box-shadow: var(--shadow-large);
}

.dropdown ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;

  padding: var(--size-relative-3);

  background-color: var(--color-gray-stone);

  list-style-type: none;
}

.dropdown a {
  display: block;
  width: 100%;
  font-size: var(--font-size-fluid-2);
  padding: var(--size-relative-2) var(--size-relative-3);
  cursor: pointer;
}

.dropdown a:hover {
  text-decoration: unset;
  background-color: hsla(75, 70%, 89%, 0.3);
}

@media (width <= 750px) {
  .navigation-small {
    display: block;
  }
}

/* Language */

.language {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-relative-3);
  margin-left: auto;
}

.language label {
  font-weight: var(--font-weight-4);
}

/*
------------------------------
FOOTER
------------------------------
*/

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--size-relative-5);

  width: 100%;
  padding-block: var(--size-relative-5);
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--size-relative-3);
}

.links div {
  display: flex;
  align-items: center;
  font-size: var(--font-size-fluid-1);
  cursor: pointer;
}

.links span {
  --icon-size: max(2rem, min(3vw, 2.5rem));
  --icon-color: var(--color-accent);

  padding: var(--size-relative-1);
  border-radius: 50%;
}

.links div:hover {
  text-decoration: underline;
  text-underline-offset: var(--size-relative-1);
  text-decoration-thickness: var(--border-size-2);
}

@media (width <= 750px) {
  .address {
    flex-direction: column;
    align-items: start;
    gap: unset;
    margin: 0 auto;
  }

  .address > *:not(:last-child) {
    padding-right: unset;
    border-right: unset;
  }
}

/*
------------------------------
INTRO
------------------------------
*/

#intro {
  grid-template-columns: auto;
  justify-content: center;
  align-content: start;
  user-select: none;
  height: 85vh;
  max-height: 1200px;
}

.intro-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: var(--size-relative-1);

  padding-block: 0.2em;

  border-top: 0.08em solid var(--color-accent);
  border-bottom: 0.08em solid var(--color-accent);

  transform: rotate(-3deg) skewX(-3deg);

  overflow: hidden;
  text-align: center;
}

.intro-arrow {
  --arrow-width: var(--size-fluid-6);
  --arrow-height: calc(var(--arrow-width) * 0.7);
  --line-width: clamp(0.25rem, 0.5vw, 0.5rem);

  position: absolute;

  width: var(--arrow-width);
  height: var(--arrow-height);

  margin-block: clamp(3rem, 4vw, 5rem);

  align-self: end;
  justify-self: center;
}

.intro-arrow > * {
  position: absolute;

  top: 35%;

  opacity: 0;

  width: 100%;
  height: 100%;

  clip-path: polygon(
    100% 0,
    100% var(--line-width),
    50% calc(30% + var(--line-width)),
    0 var(--line-width),
    0 0,
    50% 30%
  );
}

.intro-arrow-1 {
  background-color: var(--color-default);
  animation: roll 2s ease-in-out infinite;
}

.intro-arrow-2 {
  background-color: var(--color-accent);
  animation: roll 2s 1s ease-in-out infinite;
}

@keyframes roll {
  0% {
    opacity: 0;
    top: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*
------------------------------
CLIPPING
------------------------------
*/

.read-more {
  display: none;
  flex-direction: column;
  gap: 1em;
}

.read-more::before {
  content: "...";
}

@media (width <= 750px) {
  .clip-text {
    --preview-lines: 35;
    --line-height: 1.3;

    overflow: hidden;
    height: calc(var(--preview-lines) * var(--line-height) * 1em);
  }

  .read-more {
    display: flex;
  }
}

/*
------------------------------
INFOS
------------------------------
*/

#infos {
  grid-template-columns: max-content 1fr;
  place-content: start;
  gap: var(--size-fluid-2);
}

.infos-avatar {
  display: block;
  float: right;

  min-width: 150px;
  max-width: 18cqi;

  aspect-ratio: 4 / 5;
  object-fit: cover;

  margin-top: calc(3cap + 1em);
  margin-left: var(--size-fluid-3);
  margin-bottom: var(--size-fluid-3);

  background-color: var(--color-default);
  border: var(--border-size-2) solid var(--color-default);
}

/* Signature */

.signature-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-relative-2);

  width: var(--size-fluid-7);

  padding-block: var(--size-relative-2);
  margin-top: var(--size-fluid-1);
}

.signature-container::after {
  content: attr(data-signature);
  bottom: 0;
  font-size: var(--font-size-fluid-1);
  text-wrap: nowrap;
}

.signature-container svg {
  width: auto;
  height: auto;
  border-bottom: var(--border-size-2) dotted var(--color-default);
}

#signature {
  stroke: var(--color-accent);
}

@media (width <= 1000px) {
  .infos-avatar {
    display: none;
  }
}

/*
------------------------------
DEMOS
------------------------------
*/

#demos {
  grid-template-columns: max-content 1fr;
  place-content: start;
  gap: var(--size-fluid-2);
}

#demos-check + label {
  margin-top: var(--size-fluid-3);
  padding: var(--size-relative-2) var(--size-relative-3);
  border-radius: var(--size-relative-1);
}

/* Timeline */

.timeline {
  --card-width: 400px;
  --card-height: 300px;
  --card-offset: 8em;

  --column-gap: 8em;
  --row-gap: 5em;

  --line-color-width: var(--border-size-2);
  --line-color-overflow: 4em;

  position: relative;
  display: none;
  grid-template-columns: repeat(2, var(--card-width));
  grid-template-rows: 0fr;
  column-gap: var(--column-gap);

  grid-column: 2;
  justify-self: start;

  justify-content: center;
  align-content: start;

  margin: var(--line-color-overflow) 0 calc(var(--line-color-overflow) + 10em);
  scroll-margin-top: calc(var(--line-color-overflow) + 2em);
}

.timeline::before {
  position: absolute;
  content: "";

  width: var(--line-color-width);
  height: calc(100% + 4 * var(--line-color-overflow));

  top: calc(var(--line-color-overflow) * -1);
  left: 50%;
  transform: translateX(-50%);

  border-left: var(--line-color-width) dotted var(--color-accent);
}

.timeline::after {
  position: absolute;
  content: "";

  width: 15px;
  height: 26px;

  top: calc(100% + 3 * var(--line-color-overflow));
  left: 50%;
  transform: translateX(-50%);

  background-color: var(--color-accent);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

.timeline-card {
  display: flex;
  flex-direction: column;
  gap: 1em;

  width: var(--card-width);
  height: var(--card-height);
}

.timeline-card:nth-child(even) {
  margin-top: var(--card-offset);
}

.timeline-card-head {
  display: flex;
  align-items: center;
  gap: 1em;
}

.timeline-card-head h3 {
  color: var(--color-accent);
}

.timeline-card-image {
  position: relative;
}

.timeline-card-image::before {
  position: absolute;
  content: "";
  z-index: -1;

  width: calc(var(--column-gap) / 2);
  height: var(--line-color-width);

  transform: translate(-100% -50%);

  border-top: var(--line-color-width) dotted var(--color-accent);
}

.timeline-card:nth-child(even) .timeline-card-image::before {
  top: 50%;
  right: 100%;
}

.timeline-card:nth-child(odd) .timeline-card-image::before {
  top: 50%;
  left: 100%;
}

.timeline-card-image::after {
  --dot-size: var(--size-px-3);

  position: absolute;
  content: "";

  width: var(--dot-size);
  height: var(--dot-size);

  transform: translate(-100% -50%);

  background-color: var(--color-accent);
}

.timeline-card:nth-child(even) .timeline-card-image::after {
  top: calc(50% - var(--dot-size) / 2 + 1px);
  right: calc(100% + var(--column-gap) / 2 - var(--dot-size) / 2);
}

.timeline-card:nth-child(odd) .timeline-card-image::after {
  top: calc(50% - var(--dot-size) / 2 + 1px);
  left: calc(100% + var(--column-gap) / 2 - var(--dot-size) / 2);
}

.timeline-card-image img {
  display: block;
  width: 100%;
  /* aspect-ratio: 16 / 9; */

  filter: grayscale(1);
  object-fit: cover;

  cursor: var(--cursor-pointer), auto;
  transition: outline-offset 0.1s cubic-bezier(0.25, 0.46, 0.68, 0.98), filter 0.2s ease;

  outline: var(--border-size-2) solid var(--color-default);
  box-shadow: 0 0 0 var(--border-size-2) var(--color-gray-ink);
}

.timeline-card img:hover {
  filter: grayscale(0);

  outline: var(--border-size-2) solid var(--color-accent);
  outline-offset: 6px;
  box-shadow: 0 0 0 6px var(--color-gray-ash);
}

.timeline-card-link {
  display: block;
}

@media (width <= 1000px) {
  .timeline {
    grid-column: 1 / span 2;
    grid-template-columns: 1fr;
    row-gap: var(--row-gap);
  }

  .timeline::before,
  .timeline::after,
  .timeline-card-image::before,
  .timeline-card-image::after {
    display: none;
  }

  .timeline-card {
    width: unset;
    height: unset;
  }

  .timeline-card:nth-child(even) {
    margin-top: 0;
  }
}

/*
------------------------------
CONTACT
------------------------------
*/

#contact {
  grid-template-columns: max-content 1fr;
  place-content: start;
  gap: var(--size-fluid-2);
}

#contact .section-content {
  max-width: 75%;
}

.contact-map {
  margin-bottom: var(--size-fluid-5);
}

.contact-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  filter: grayscale(1) sepia(0.1);

  transition: outline-offset 0.1s cubic-bezier(0.25, 0.46, 0.68, 0.98), filter 0.2s ease;
  outline: var(--border-size-2) solid var(--color-default);
}

.contact-iframe:hover {
  filter: grayscale(0) sepia(0);
  outline-offset: 6px;
  box-shadow: 0 0 0 6px var(--color-gray-ash);
  outline: var(--border-size-2) solid var(--color-accent);
}

.contact-address,
.contact-numbers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--size-relative-6);
  row-gap: var(--size-relative-4);
  margin-bottom: var(--size-fluid-5);
}

.contact-address > *,
.contact-numbers > * {
  display: flex;
  flex-direction: column;
  align-items: start;
  font-size: var(--font-size-fluid-2);
  font-weight: var(--font-weight-4);
}

.contact-address span,
.contact-numbers span {
  font-size: var(--font-size-fluid-1);
}

.contact-text {
  margin-bottom: var(--size-fluid-3);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
}

.contact-form label {
  display: none;
}

.contact-form-send {
  --icon-size: 1em;
  --icon-color: var(--color-accent);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-relative-1);

  width: fit-content;

  margin-top: var(--size-fluid-3);
}

@media (width <= 1000px) {
  #contact .section-content {
    max-width: 100%;
  }

  .contact-map {
    display: none;
  }
}

/*
------------------------------
DRONE
------------------------------
*/

#drone {
  position: fixed;
  inset: 0;
  pointer-events: none;
}