/* ------------------------- Fonts -------------------------------------------------- */

@font-face {
  font-family: 'sf-pro';
  src: url('../font/sf-pro/SF-Pro-Display-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
 
@font-face {
  font-family: 'sf-pro';
  src: url('../font/sf-pro/SF-Pro-Display-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
 
 /* ------------------------- Lenis -------------------------------------------------- */
 
 html.lenis {height: auto;}
 .lenis.lenis-smooth {scroll-behavior: auto;}
 .lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
 .lenis.lenis-stopped {overflow: hidden;}
 .lenis.lenis-scrolling iframe {pointer-events: none;}
 
 /* ------------------------- Variables -------------------------------------------------- */
 
 :root {
 
    --color-dark-rgb: 0, 0, 0; 
    --color-dark: rgba(var(--color-dark-rgb), 1);
 
    --color-light-rgb: 239, 238, 236;
    --color-light: rgba(var(--color-light-rgb), 1);
 
    --color-white-rgb: 255, 255, 255;
    --color-white: rgba(var(--color-white-rgb), 1);
 
    --color-black-rgb: 0, 0, 0;
    --color-black: rgba(var(--color-black-rgb), 1);

    --color-high-rgb: 255, 76, 36;
    --color-high: rgba(var(--color-high-rgb), 1);
 
    --color-primary: var(--color-dark);
    --color-secondary: var(--color-light);
    --color-gray: var(--color-light);
    --color-lightgray: var(--color-light);
 
    --color-border: rgba(var(--color-dark-rgb), 0.25);
    --color-border-light: rgba(var(--color-light-rgb), 0.25);
    --color-text: rgba(var(--color-dark-rgb), 1);
    --color-text-light: rgba(var(--color-light-rgb), 1);
 
    --color-alert-error: #ff213e;
    --color-alert-success: #46d054;
 
    --animation-primary: 0.4s cubic-bezier(.75, 0, .25, 1);
    --animation-smooth: 0.6s cubic-bezier(.75, 0, .25, 1);
 
    --section-padding: calc(var(--row-gap) + 1em + var(--row-gap) + 1em + var(--row-gap));
    --container-padding: calc(var(--title-size) * 0.25);
 
    --row-gap: calc(var(--title-size) * 0.25);
    --col-gap: calc(var(--title-size) * 0.25);
 
    --title-size: clamp(5em, 7.5vw, 7.5em);
 
    --border-radius: calc(var(--btn-height) * 0.5);
 
    --btn-height: 2.75em;
    --nav-bar-height: calc(var(--btn-height) + (var(--row-gap * 2)));

    --opacity-nature: 0.5;
 }
 
 [data-theme-section="dark"] {
    --color-border: rgba(var(--color-light-rgb), 0.25);
    --color-text: rgba(var(--color-light-rgb), 1);
 }
 
 @media screen and (max-width: 1024px) {
    :root {
       --container-padding: var(--col-gap);
    }
 }
 
 @media screen and (max-width: 540px) {
    :root {
       --container-padding: clamp(1.25em, 4vw, 2.5em);
    }
 }
 
 /* ------------------------- Hide Scrollbar -------------------------------------------------- */
 
 body::-webkit-scrollbar{display: none;} /* Chrome, Safari, Opera */
 body {-ms-overflow-style: none;} /* IE & Edge */
 html {scrollbar-width: none;} /* Firefox */
 
 /* ------------------------- Body -------------------------------------------------- */
 
 *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
 li, ul, figure { padding: 0; margin: 0; list-style: none;}
 
 html {
    scroll-behavior: initial;
 }
 
 body {
    -webkit-font-smoothing: antialiased;
    font-family: 'sf-pro', sans-serif;
    color: var(--color-light);
    line-height: 1.5;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-size: clamp(16px, 1.2vw, 19px);
    background-color: var(--color-dark);
 }
 
 html, body {
    width: 100%;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    position: relative;
 }
 
 main {
    overflow: hidden;
    box-sizing: border-box;
 }
 
 /* Selection */
 ::selection {
    background-color: var(--color-light);
    color: var(--color-high);
    text-shadow: none;
 }
 
 ::-moz-selection {
    background-color: var(--color-light);
    color: var(--color-high);
    text-shadow: none;
 }
 
 /* General */
 canvas, img, video, picture, figure {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    display: block;
 }
 
 svg {
    max-width: none;
    height: auto;
    box-sizing: border-box;
 }
 
 audio, canvas, iframe, img, svg, video, picture, figure {
    vertical-align: middle;
 }
 
 /* ------------------------- Typography -------------------------------------------------- */
 
 h1, h2, h3, h4, h5, h6, p, a, li, ul, ol, span, strong, em, figcaption  {padding: 0; margin: 0; font-style: normal; letter-spacing: normal; font-weight: unset; line-height: unset;}
 
 h1 {
    font-weight: 400;
    font-size: calc(var(--title-size) * 1.25);
    line-height: 0.8;
    color: var(--color-light);
    text-transform: uppercase;
 }
 
 h1.medium {
    font-size: calc(var(--title-size) * 1);
 }
 
 @media screen and (max-width: 720px) {
    h1 {
       font-size: 15vw;
    }
 
    h1.medium {
       font-size: 12.5vw;
    }
 }
 
 h2 {
    font-weight: 400;
    font-size: calc(var(--title-size) * 0.55);
    line-height: 1;
    color: var(--color-light);
    text-transform: uppercase;
 }
 
 h3 {
    font-weight: 400;
    font-size: calc(var(--title-size) * 0.35);
    line-height: 1;
    color: var(--color-light);
 }
 
 
 h5 {
    font-weight: 400;
    font-size: 0.75em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-light);
 }
 
 p {
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    line-height: 1.5;
    color: var(--color-light);
 }
 
 p.big {
    font-size: 1.15em;
 }
 
 span {
    font-weight: inherit;
    color: inherit;
 }
 
 span.italic {
    font-family: 'Fraunces', sans-serif;
    font-style: italic;
    transform: translateY(-12%);
    position: relative;
    display: inline-block;
    font-size: 0.95em;
 }
 
 strong {
    font-weight: 400;
    color: var(--color-dark);
 }
 
 [data-theme-section="dark"] strong {
    color: var(--color-light);
 }
 
 em {
    font-style: italic;
 }
 
 a {
    color: unset;
    text-decoration: none;
 }
 
 .eyebrow {
    font-size: 1em;
    color: rgba(var(--color-dark-rgb), 0.5);
 }
 
 /* ------------------------- Main Elements -------------------------------------------------- */
 
 /* Section */
 
 .section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    position: relative;
 }
 
 .section-wrap {
    position: relative;
 }
 
 .section.full-height {
    padding-top: 0;
    padding-bottom: 0;
 }
 
 .section.full-height .container > .row {
    min-height: 100vh;
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
 }
 
 @media (hover: none) { 
    @media screen and (max-width: 1024px) {
       .section.full-height .container > .row {
          min-height: 100vh;
          min-height: calc(var(--vh, 1vh) * 100);
       }
    }
 }
 
 /* Section Colors */
 
 [data-bg-section="dark"] {
    background-color: var(--color-dark);
 }
 
 [data-bg-section="lightgray"] {
    background-color: var(--color-lightgray);
 }
 
 /* Header (floating bar at the top) */
 
 header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 200;
    pointer-events: none;
 }
 
 /* Floating Elements */
 
 .floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 300;
    pointer-events: none;
 }
 
 /* Container */
 
 .container {
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    max-width: calc(var(--title-size) * 11);
 }
 
 .container.wide {
    max-width: 100%;
 }
 
 .container.medium {
    max-width: calc(var(--title-size) * 9);
 }
 
 .container.small {
    max-width: calc(var(--title-size) * 7);
 }
 
 .container.full {
    max-width: 100vw;
    padding-left: 0;
    padding-right: 0;
 }
 
 /* Row/Col */
 
 .row {
    display: flex;
    width: 100%;
    position: relative;
 }
 
 .col {
    display: flex;
    flex-direction: column;
    position: relative;
 }
 
 .row.grid {
    flex-wrap: wrap;
    gap: var(--row-gap) var(--gap);
    --gap: var(--col-gap);
    --columns: 3;
 }
 
 .row.grid > .col {
    width: calc((99.99% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
 }
 
 /* Overlay */
 
 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
 }
 
 .overlay.overlay-dark {
    background-color: rgba(var(--color-black-rgb), 0.5);
 }
 
 img.overlay,
 video.overlay {
    object-fit: cover;
 }
 
 /* No select */
 
 .no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 }
 
 /* ------------------------- Buttons -------------------------------------------------- */
 
 .col-row-btn {
    display: flex;
    gap: 0.5em;
    flex-direction: row;
 }
 
 .btn {
    position: relative;
    border: 0;
    outline: 0;
 }
 
 .btn input {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
 }
 
 .btn .btn-click {
    cursor: pointer;
    background-color: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--color-primary);
    border-radius: var(--border-radius);
    height: var(--btn-height);
 }
 
 .btn .btn-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5em;
    transition: transform var(--animation-primary);
    transform: scale(1) rotate(0.001deg);
 }
 
 .btn .btn-content span {
    font-size: 1em;
    color: var(--color-light);
    padding-top: 0.1em;
 }
 
 /* Secondary */
 
 .btn.secondary .btn-click {
    background-color: var(--color-secondary);
 }
 
 .btn.secondary .btn-content span {
    color: var(--color-dark);
 }
 
 /* Outline */
 
 .btn.outline .btn-click {
    background-color: transparent;
 }
 
 .btn.outline .btn-click::before {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
 }
 
 .btn.outline .btn-content span {
    color: var(--color-dark);
 }
 
 /* ------------------------- Links -------------------------------------------------- */
 
 .link {
    position: relative;
 }
 
 .link .link-click {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
 }
 
 .link .link-click::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(var(--color-dark-rgb), 1);
    transform: scale(0, 1) rotate(0.001deg);
    transform-origin: right top;
    transition: transform var(--animation-primary);
 }
 
 .link .link-click .link-content > span {
    display: flex;
    font-size: 0.75em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.3em 0;
    color: var(--color-dark)
 }
 
 .link .link-click .link-content > span .italic {
    margin-right: 0.3em;
    transform: translateY(-5%);
 }
 
 .link .link-click:hover::before {
    transform: scale(1, 1) rotate(0.001deg);
    transform-origin: left top;
    transition: transform var(--animation-primary);
 }
 
 [data-theme-section="dark"] .link .link-click span,
 [data-theme-nav="dark"] .link .link-click span {
    color: var(--color-light);
 }
 
 [data-theme-section="dark"] .link .link-click::before,
 [data-theme-nav="dark"] .link .link-click::before {
    background-color: var(--color-light);
 }
 
 /* ------------------------- Icon -------------------------------------------------- */
 
 i {
    width: 1em;
    height: 1em;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 
 i svg {
    width: 100%;
 }
 
 i svg :is(path, line, polyline) {
    stroke: var(--color-light);
    stroke-width: 2px;
 }
 
 /* ------------------------- Styled Content -------------------------------------------------- */
 
 .styled-content :is(h1, h2, h3, p, figure) {
    margin-bottom: 1.25rem;
 }
 
 .styled-content > *:first-child {
    margin-top: 0;
 }
 
 .styled-content h1 {
    margin-top: 2rem;
 }
 
 .styled-content :is(h1, h2, h3, p):last-child {
    margin-bottom: 0;
 }
 
 .styled-content p > a {
    color: var(--color-dark);
    text-decoration: underline;
    transition: var(--animation-primary);
 }
 
 .styled-content p > a:hover {
    opacity: 0.5;
 }
 
 .styled-content ul {
    display: flex;
    flex-direction: column;
    padding-left: 0.75em;
    gap: 0.5em;
    padding-bottom: 1.25rem;
 }
 
 .styled-content ul li {
    position: relative;
 }
 
 .styled-content ul li::before {
    content: "";
    left: -0.75em;
    top: 0.5rem;
    height: 0.2em;
    width: 0.2em;
    background: var(--color-dark);
    position: absolute;
 }
 
 /* ------------------------- Styled Figure -------------------------------------------------- */
 
 .styled-figure {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    position: relative;
 }
 
 .styled-figure figcaption {
    font-weight: 400;
    font-style: normal;
    font-size: 0.8em;
    line-height: 1.3;
    color: var(--color-text);
 }
 
 /* ------------------------- Styled Image / Video -------------------------------------------------- */
 
 .styled-image,
 .styled-video {
    display: flex;
    flex-direction: column;
    position: relative;
 }
 
 .styled-image[data-ratio-status="true"] img,
 .styled-video[data-ratio-status="true"] video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
 }
 
 .styled-image.overlay,
 .styled-video.overlay {
    object-fit: cover;
 }
 
 /* ------------------------- Styled Form -------------------------------------------------- */
 
 .styled-form {
    display: flex;
    flex-direction: column;
    width: 100%;
 }
 
 .styled-form .form-col {
    width: 100%;
    padding-bottom: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
 }
 
 .styled-form .form-label {
    margin-bottom: 0.5em; 
 }
 
 .styled-form .form-label span {
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: 500;
 }
 
 .styled-form abbr[title] {
    color: var(--color-alert-error);
    text-decoration: none;
    padding-left: 0.25em;
 }
 
 .styled-form input {
    display: block;
 }
 
 /* Text */
 
 .styled-form input:is([type="text"], [type="email"], [type="tel"]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 1em 1em;
    width: 100%;
    border-radius: var(--border-radius);
 }
 
 /* Textarea */
 
 .styled-form textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: 0;
    border-bottom: 1px solid transparent;
    resize: vertical;
    min-height: 10em;
    padding: 1em 1em;
    width: 100%;
    border-radius: var(--border-radius);
 }
 
 /* Checkbox */
 
 .styled-form .form-col-checkbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
 }
 
 .styled-form input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: 0;
    width: 1em;
    height: 1em;
    border: 1px solid var(--color-border);
    transition: background-color .3s ease-in-out;
    background-color: var(--color-light);
    margin-right: 0.5em;
    border-radius: calc(var(--border-radius) * 0.33);
 }
 
 .styled-form input[type="checkbox"]:focus {
    border-radius: calc(var(--border-radius) * 0.33);  
 }
 
 .styled-form input[type="checkbox"]:checked {
    background: var(--color-light) url("../icons/check.svg") center center no-repeat;
    background-size: 100%;
 }
 
 .styled-form .form-col-checkbox label {
    font-weight: 400;
    font-size: 0.8em;
 }
 
 /* Error */
 
 .styled-form :is(input, textarea).has-error {
    border-bottom: 1px solid var(--color-alert-error);
 }
 
 .styled-form input[type="checkbox"].has-error{
    border: 1px solid var(--color-alert-error);
 }
 
 .styled-form .has-error + .form-error-message {
    display: flex;
 }
 
 .form-error-message {
    width: 100%;
    display: none;
    color: var(--color-alert-error);
    font-size: 0.8em;
    font-weight: 500;
 }
 
 /* Focus */
 
 .styled-form :is(input, textarea):focus {
    outline: 0;
    outline-width: 1px !important;
    outline-offset: 0px;
    border-bottom: 1px solid var(--color-dark);
 }
 
 .styled-form input[type="checkbox"]:focus {
    border: 1px solid var(--color-dark);
 }
 
 /* Submit */
 
 .styled-form input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: 0;
    padding: 1em;
    background: var(--color-primary);
    color: var(--color-light);
    cursor: pointer;
    border-radius: var(--border-radius);
 }
 
 /* Autofill */
 
 input:-webkit-autofill,
 input:-webkit-autofill:hover, 
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
 textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
 }
 
 /* ------------------------- Borders -------------------------------------------------- */
 
 .border-box {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 1px solid var(--color-border);
    transition: border var(--animation-primary);
 }
 
 .border-static-y {
    width: 1px;
    height: 100%;
    background-color: var(--color-border);
    flex-shrink: 0;
    transition: background-color var(--animation-primary);
 }
 
 .border-static-x {
    height: 1px;
    width: 100%;
    background-color: var(--color-border);
    flex-shrink: 0;
    transition: background-color var(--animation-primary);
 }
 
 .border-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    transition: background-color var(--animation-primary);
 }
 
 .border-left {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 1px;
    background-color: var(--color-border);
    transition: background-color var(--animation-primary);
 }
 
 .border-right {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background-color: var(--color-border);
    transition: background-color var(--animation-primary);
 }
 
 .border-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    transition: background-color var(--animation-primary);
 }
 
 /* ------------------------- Section - Styleguide -------------------------------------------------- */
 
 .section-styleguide-content .row {
    border-bottom: 1px solid var(--color-border);
    padding: calc(var(--row-gap) * 1) 0;
    flex-wrap: wrap;
    gap: 1em 0;
 }
 
 .section-styleguide-content .row:first-child {
    padding-top: 0;
 }
 
 .section-styleguide-content .row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
 }
 
 .section-styleguide-content .row .col:nth-child(1) {
    width: 30%;
 }
 
 .section-styleguide-content .row .col:nth-child(2) {
    width: 70%;
 }
 
 @media screen and (max-width: 1024px) {
    .section-styleguide-content .row .col:nth-child(1),
    .section-styleguide-content .row .col:nth-child(2) {
       width: 100%;
    }
 }