/* urbanist-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/urbanist-v15-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* urbanist-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/urbanist-v15-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* urbanist-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/urbanist-v15-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* urbanist-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/urbanist-v15-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* waiting-for-the-sunrise-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Waiting for the Sunrise";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/waiting-for-the-sunrise-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@layer reset {
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  strong,
  b {
    font-weight: 700;
  }
  i,
  em {
    font-style: italic;
  }
  .invisible {
    display: none;
  }
  button,
  input.submit {
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    appearance: none;
    border-radius: 0;
  }
  sub,
  sup {
    font-size: 70%;
    line-height: 0;
    position: relative;
  }
  sup {
    top: -0.4em;
  }
  sub {
    bottom: -0.25em;
  }
  * {
    box-sizing: border-box;
  }
}
/**
 * Breakpoints
*/
/**
 * Icons for usage with the sprite-sheet mixin
*/
/**
 * Colors
*/
@layer typography {
  h1,
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 0.75rem;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.3;
    font-weight: 600;
  }
  p {
    font-size: 1rem;
  }
}
:root {
  --col-white: #ffffff;
  --col-white-rgb: 255, 255, 255;
  --col-black: #000000;
  --col-black-rgb: 0, 0, 0;
  --col-neutral: #1d1d1d;
  --col-neutral-rgb: 29, 29, 29;
  --col-text: #1d1d1d;
  --col-text-rgb: 29, 29, 29;
  --col-neutral-light: #323232;
  --col-neutral-light-rgb: 50, 50, 50;
  --col-primary: #1f72ee;
  --col-primary-rgb: 31, 114, 238;
  --col-primary-light: #317ef3;
  --col-primary-light-rgb: 49, 126, 243;
  --col-primary-dark: #1162DA;
  --col-primary-dark-rgb: 17, 98, 218;
  --col-border: rgba(0, 0, 0, 0.1);
  --col-border-rgb: 0, 0, 0;
  --col-border-dark: rgba(0, 0, 0, 0.2);
  --col-border-dark-rgb: 0, 0, 0;
  --filter-primary: saturate(100%) invert(22%) sepia(79%) saturate(3942%) hue-rotate(213deg) brightness(106%) contrast(102%);
  --font-family: "Urbanist", sans-serif;
  --font-size: 20px;
  --text-gap: 0.5rem;
  --section-gap: 12.5rem;
  --content-gap: 3rem;
  --blob-size: 30vw;
  --shadow-sm: 0px 4px 4px 0px rgba(0, 0, 0, 0.002), 0px 8px 8px 0px rgba(0, 0, 0, 0.004), 0px 12px 12px 0px rgba(0, 0, 0, 0.006), 0px 16px 16px 0px rgba(0, 0, 0, 0.008), 0px 20px 20px 0px rgba(0, 0, 0, 0.01);
  --shadow-lg: 0 1000px 250px 0 rgba(0, 0, 0, 0),
  	0 680px 250px 0 rgba(0, 0, 0, 0.01), 0 380px 230px 0 rgba(0, 0, 0, 0.05),
  	0 170px 170px 0 rgba(0, 0, 0, 0.09), 0 45px 100px 0 rgba(0, 0, 0, 0.1);
}

@layer reset, typography, base, layout, utils;
@layer base {
  body {
    min-height: 100dvh;
    overflow-x: clip;
    line-height: 1.75;
    font-family: var(--font-family);
    font-size: var(--font-size);
    color: var(--col-text);
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-image: url(../img/noise.png);
    background-repeat: repeat;
    pointer-events: none;
    z-index: 9999999;
  }
  img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
@layer layout {
  .loader {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 9999999;
    background-color: var(--col-primary-light);
    color: var(--col-white);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .loader.loaded {
    transform: translateY(-100%);
  }
  .loader.loaded::before, .loader.loaded::after {
    transform: translateY(-200px);
  }
  .loader .logo {
    display: block;
    background-image: url(../img/logo-black.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 200px;
    height: 200px;
    filter: invert(1);
  }
  .loader span:last-of-type {
    font-size: 3rem;
    font-weight: bold;
  }
  #header {
    --scroll-progress: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding-inline: var(--content-gap);
    padding-block: calc(var(--content-gap) * clamp(0.25, 0.5 * (1 - var(--scroll-progress)), 1));
    backdrop-filter: blur(calc(0.5rem * var(--scroll-progress)));
    background-color: rgba(var(--col-primary-rgb), calc(0.95 * var(--scroll-progress)));
    border-bottom: 2px solid rgba(var(--col-primary-light-rgb)/var(--scroll-progress));
  }
  #header::before {
    opacity: var(--scroll-progress);
  }
  #header::after {
    opacity: var(--scroll-progress);
    box-shadow: var(--shadow-sm);
  }
  #header .inside {
    max-width: 1248px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--col-white);
  }
  #header .inside .logo span:first-of-type {
    font-size: 1.5rem;
    font-weight: bold;
  }
  #header .inside a {
    color: var(--col-white);
    text-decoration: none;
  }
  #header .inside .mod_navigation ul {
    display: flex;
    align-items: center;
    gap: var(--content-gap);
  }
  #header .inside .mod_navigation ul a {
    position: relative;
  }
  #header .inside .mod_navigation ul a::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--col-white);
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: right;
  }
  #header .inside .mod_navigation ul a:hover::before, #header .inside .mod_navigation ul a:focus::before {
    transform: scaleX(1);
    transform-origin: left;
  }
  #header .inside .nav-toggle {
    display: none;
  }
  .mod_article:not(.cta) {
    padding-inline: var(--content-gap);
  }
  .mod_article:not(.cta) .inside {
    width: 100%;
    max-width: 1248px;
    margin-inline: auto;
    padding-block: calc(var(--content-gap) * 2);
  }
  .mod_article:not(.cta) .inside > .content-text .rte > h2 {
    font-weight: bold;
    font-size: 3rem;
  }
  .mod_article:not(.cta) .inside > .content-text .rte > p {
    font-size: var(--font-size);
    opacity: 0.6;
  }
  .mod_article:not(.cta) .inside > .content-text:has(+ .content-element-group, + .content-accordion) {
    margin-bottom: var(--content-gap);
  }
  .mod_article:not(.cta) .inside .content-element-group.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
    gap: 20px;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text {
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid var(--col-border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s, background-color 0.3s, color 0.3s;
    position: relative;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text:hover, .mod_article:not(.cta) .inside .content-element-group.cards .content-text:focus {
    transform: rotate(-2.5deg);
    background-color: var(--col-neutral);
    color: var(--col-white);
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text:hover .rte::before, .mod_article:not(.cta) .inside .content-element-group.cards .content-text:focus .rte::before {
    filter: invert(1);
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text .rte {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 10px;
    height: 100%;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text .rte h3 {
    font-weight: 600;
    font-size: 1.75rem;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text .rte p {
    font-size: var(--font-size);
    opacity: 0.6;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text .rte p:has(+ p > a) {
    margin-bottom: var(--text-gap);
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text .rte a {
    color: var(--col-primary);
    text-decoration: none;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text .rte a:hover, .mod_article:not(.cta) .inside .content-element-group.cards .content-text .rte a:focus {
    text-decoration: underline;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text .rte > *:last-child {
    margin-top: auto;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text.ico-hand-arrow .rte::before {
    content: "";
    display: block;
    background: url("../img/sprite-icons.svg?uijzp2d") no-repeat scroll;
    width: 2rem;
    height: 2rem;
    background-position: -0rem -0rem;
    background-size: auto 10rem;
    transition: filter 0.3s;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text.ico-globe .rte::before {
    content: "";
    display: block;
    background: url("../img/sprite-icons.svg?uijzp2d") no-repeat scroll;
    width: 2rem;
    height: 2rem;
    background-position: -0rem -2rem;
    background-size: auto 10rem;
    transition: filter 0.3s;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text.ico-brush .rte::before {
    content: "";
    display: block;
    background: url("../img/sprite-icons.svg?uijzp2d") no-repeat scroll;
    width: 2rem;
    height: 2rem;
    background-position: -0rem -4rem;
    background-size: auto 10rem;
    transition: filter 0.3s;
  }
  .mod_article:not(.cta) .inside .content-element-group.cards .content-text.ico-blocks .rte::before {
    content: "";
    display: block;
    background: url("../img/sprite-icons.svg?uijzp2d") no-repeat scroll;
    width: 2rem;
    height: 2rem;
    background-position: -0rem -6rem;
    background-size: auto 10rem;
    transition: filter 0.3s;
  }
  .mod_article:not(.cta) .inside .content-accordion {
    border-bottom: unset !important;
  }
  .mod_article:not(.cta) .inside .content-accordion:has(+ .content-accordion) {
    margin-bottom: calc(var(--text-gap) * 2);
  }
  .mod_article:not(.cta) .inside .content-accordion .handorgel__header {
    border: 1px solid var(--col-border);
    box-shadow: var(--shadow-sm);
    border-radius: 1rem;
    padding: unset;
    transition: border-radius 0.3s;
  }
  .mod_article:not(.cta) .inside .content-accordion .handorgel__header:has([aria-expanded=true]) {
    border-radius: 1rem 1rem 0 0;
  }
  .mod_article:not(.cta) .inside .content-accordion .handorgel__header .handorgel__header__button {
    padding: calc(var(--text-gap) * 2) !important;
    border-top: unset !important;
    background-color: unset !important;
    font-size: 1.5rem !important;
  }
  .mod_article:not(.cta) .inside .content-accordion .handorgel__content {
    border-radius: 0 0 1rem 1rem;
  }
  .mod_article.cta {
    background: linear-gradient(to bottom, var(--col-primary), var(--col-primary-dark));
    padding-inline: var(--content-gap);
    position: relative;
  }
  .mod_article.cta .inside {
    padding-block: calc(var(--content-gap) * 1);
  }
  .mod_article.cta .inside .rte {
    color: var(--col-white);
    max-width: 700px;
    margin-inline: auto;
  }
  .mod_article.cta .inside .rte p {
    font-size: 2.5rem;
    font-weight: bold;
  }
  .mod_article.cta .inside .rte a {
    margin-top: var(--content-gap);
    margin-inline: auto;
    display: block;
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--col-text);
    background-color: var(--col-white);
    padding: var(--text-gap) var(--content-gap);
    border-radius: 9999px;
    width: fit-content;
    font-weight: 500;
    border: 1px solid var(--col-border);
    box-shadow: var(--shadow-sm);
  }
  #hero {
    background-color: var(--col-neutral);
    color: var(--col-white);
    padding-inline: var(--content-gap);
    min-height: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: var(--shadow-lg);
  }
  #hero .inside {
    max-width: 1440px;
  }
  #hero .content-element-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--content-gap);
    position: relative;
  }
  #hero .content-element-group > .content-text {
    max-width: 855px;
  }
  #hero .content-element-group > .content-text h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: bold;
  }
  #hero .content-element-group > .content-text strong {
    color: var(--col-primary);
  }
  #hero .content-element-group > .content-text p:not(:has(> a)) {
    font-size: var(--font-size);
    opacity: 0.6;
  }
  #hero .content-element-group > .content-text p:not(:has(> a)):has(+ p) {
    margin-bottom: calc(var(--content-gap) * 1);
  }
  #hero .content-element-group > .content-text a:has(+ a) {
    margin-right: calc(var(--text-gap) * 2);
  }
  #hero .content-element-group > .content-text a:first-of-type {
    width: 150px;
    height: 40px;
    border-radius: 9999px;
    color: var(--col-white);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size);
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
    background-color: var(--col-primary);
  }
  #hero .content-element-group > .content-text a:first-of-type:hover {
    transform: translateY(-2px);
  }
  #hero .content-element-group > .content-text a:first-of-type:hover {
    background-color: var(--col-primary-dark);
  }
  #hero .content-element-group > .content-text a:last-of-type {
    width: 150px;
    height: 40px;
    border-radius: 9999px;
    color: var(--col-white);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size);
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
    background-color: var(--col-neutral-light);
  }
  #hero .content-element-group > .content-text a:last-of-type:hover {
    transform: translateY(-2px);
  }
  #hero .content-element-group > .content-text a:last-of-type:hover {
    background-color: var(--col-white);
    color: var(--col-neutral);
  }
  #hero .content-element-group > .content-text pre {
    position: relative;
    font-family: "Waiting for the Sunrise";
    font-size: var(--font-size);
    width: 200px;
    text-wrap: pretty;
    padding-left: var(--content-gap);
    padding-top: var(--text-gap);
    transform: translate(var(--content-gap), var(--text-gap));
  }
  #hero .content-element-group > .content-text pre::before {
    content: "";
    display: block;
    position: absolute;
    background: url("../img/sprite-icons.svg?uijzp2d") no-repeat scroll;
    width: 3rem;
    height: 3rem;
    background-position: -0rem -0rem;
    background-size: auto 15rem;
    filter: invert(1);
    top: 0;
    left: 0;
  }
  @media (width <= 1248px) {
    #hero .blob {
      display: none !important;
    }
    #hero .content-element-group {
      justify-content: center;
    }
  }
  .wip {
    width: 100%;
    background-color: var(--col-neutral);
    color: var(--col-white);
  }
  .wip > .inside {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100dvh;
    gap: var(--content-gap);
  }
  .wip h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    text-wrap: balance;
    text-align: center;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: var(--content-gap);
  }
  .wip .blob {
    --blob-size: clamp(400px, 50vw, 600px);
    width: var(--blob-size);
    height: var(--blob-size);
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.1));
  }
  .wip .blob span {
    width: calc(var(--blob-size) * 0.5);
    height: calc(var(--blob-size) * 0.5);
    background-image: url(../img/logo-black.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1) drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.1));
  }
  .wip .blob svg {
    z-index: -1;
    position: absolute;
    width: var(--blob-size);
    height: var(--blob-size);
  }
  #footer {
    border-top: 1px solid var(--col-border-dark);
  }
  #footer .inside {
    width: 100%;
    max-width: 1248px;
    margin-inline: auto;
    padding-block: calc(var(--content-gap) * 2);
    padding: calc(var(--content-gap) * 0.25);
    border: 1px solid var(--col-border-dark);
    border-top: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #footer .inside .col:nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: calc(var(--text-gap) * 2);
  }
  #footer .inside .col:nth-child(1)::before {
    content: "";
    display: inline-block;
    background-image: url(../img/logo-black.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 52px;
  }
  #footer .inside .col:nth-child(1) p:first-of-type {
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1;
  }
  #footer .inside a {
    color: var(--col-text);
    text-underline-offset: 2px;
  }
}
@layer utils {
  @keyframes zoom {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
}