@import"https://use.typekit.net/pmn6ngx.css";

:root {
    --vh: 1vh;
    --display-font: "halyard-display-variable";
    --text-font: "halyard-text-variable";
    --site-padding-x: 3.125vw;
    --site-row-height: calc(var(--site-padding-x) * 8 / 60);
    --site-padding-y: calc(var(--site-row-height) * 4);
    --grid-columns: 16;
    --grid-rows: 1;
    --grid-gap-scale: calc(24 / 90);
    --grid-gap-width: calc((100vw - var(--site-padding-x) * 2) / ((var(--grid-columns) / var(--grid-gap-scale)) + var(--grid-columns) - 1));
    --grid-column-width: calc(var(--grid-gap-width) / var(--grid-gap-scale));
    --grid-span-width: calc(var(--grid-gap-width) + var(--grid-column-width));
    --grid-span-1: var(--grid-column-width);
    --grid-span-2: calc(var(--grid-span-width) * 1 + var(--grid-column-width));
    --grid-span-3: calc(var(--grid-span-width) * 2 + var(--grid-column-width));
    --grid-span-4: calc(var(--grid-span-width) * 3 + var(--grid-column-width));
    --grid-span-5: calc(var(--grid-span-width) * 4 + var(--grid-column-width));
    --grid-span-6: calc(var(--grid-span-width) * 5 + var(--grid-column-width));
    --grid-span-7: calc(var(--grid-span-width) * 6 + var(--grid-column-width));
    --grid-span-8: calc(var(--grid-span-width) * 7 + var(--grid-column-width));
    --grid-span-9: calc(var(--grid-span-width) * 8 + var(--grid-column-width));
    --grid-span-10: calc(var(--grid-span-width) * 9 + var(--grid-column-width));
    --grid-span-11: calc(var(--grid-span-width) * 10 + var(--grid-column-width));
    --grid-span-12: calc(var(--grid-span-width) * 11 + var(--grid-column-width));
    --grid-span-13: calc(var(--grid-span-width) * 12 + var(--grid-column-width));
    --grid-span-14: calc(var(--grid-span-width) * 13 + var(--grid-column-width));
    --grid-span-15: calc(var(--grid-span-width) * 14 + var(--grid-column-width));
    --grid-span-16: calc(var(--grid-span-width) * 15 + var(--grid-column-width));
    --color-white: #ffedd7;
    --color-white-transparent: #ffedd700;
    --color-black: #100904;
    --color-black-transparent: #10090400;
    --color-grey-brown: #6c5f51;
    --color-green: #445231;
    --color-green-light: #5d6c49;
    --color-green-lightest: #f6e0c6;
    --color-pure-white: #fff;
    --color-pure-black: #000;
    --color-orange: #dc5000;
    --color-brown: #382416;
    --inner-width: calc(100vw - var(--site-padding-x) * 2);
    --screen-unit: min(var(--inner-width) / (1920 - 60 * 2), calc(var(--vh) * 100) / 1024 * 1.25);
    --h1: calc(164 * var(--screen-unit));
    --h2: calc(68 * var(--screen-unit));
    --h3: calc(45 * var(--screen-unit));
    --h4: calc(32 * var(--screen-unit));
    --h5: calc(20 * var(--screen-unit));
    --sub1: calc(24 * var(--screen-unit));
    --sub2: calc(16 * var(--screen-unit));
    --body1: calc(38 * var(--screen-unit));
    --body2: calc(24 * var(--screen-unit));
    --body3: calc(18 * var(--screen-unit));
    --link-header: calc(16 * var(--screen-unit));
    --quote: calc(30 * var(--screen-unit));
    --default: calc(18 * var(--screen-unit));
    --btn: calc(16 * var(--screen-unit))
}

@media (max-width: 767.98px) {
    :root {
        --grid-columns: 4;
        --site-padding-x: calc(16 * 100vw / 375);
        --site-row-height: 5px;
        --screen-unit: calc(var(--inner-width) / (375 - 16 * 2));
        --h1: calc(96 * var(--screen-unit));
        --h2: calc(38 * var(--screen-unit));
        --h3: calc(26 * var(--screen-unit));
        --h4: calc(16 * var(--screen-unit));
        --h5: calc(14 * var(--screen-unit));
        --body1: calc(18 * var(--screen-unit));
        --body2: calc(16 * var(--screen-unit));
        --body3: calc(14 * var(--screen-unit));
        --sub1: calc(16 * var(--screen-unit));
        --sub2: calc(12 * var(--screen-unit));
        --link-header: calc(12 * var(--screen-unit));
        --quote: calc(28 * var(--screen-unit));
        --default: calc(12 * var(--screen-unit));
        --btn: calc(10 * var(--screen-unit))
    }
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0;
    font-weight: 500
}

h2,
h3,
h4 {
    text-transform: uppercase
}

.sub1,
.sub2 {
    font-weight: 500;
    line-height: 1.09;
    text-transform: uppercase
}

h1 {
    font-size: var(--h1);
    line-height: .9
}

@media (max-width: 767.98px) {
    h1 {
        line-height: .802
    }
}

h2 {
    font-size: var(--h2);
    line-height: .9
}

h3 {
    font-size: var(--h3);
    line-height: 1
}

@media (max-width: 767.98px) {
    h3 {
        line-height: 1.07
    }
}

h4 {
    font-size: var(--h4);
    line-height: 1.09
}

h5 {
    font-size: var(--h5);
    line-height: 1.2;
    font-weight: 600
}

.sub1 {
    font-size: var(--sub1)
}

.sub2 {
    font-size: var(--sub2)
}

.sub3 {
    font-size: var(--sub3)
}

.body1 {
    font-weight: 400;
    font-size: var(--body1);
    line-height: 1.263
}

@media (max-width: 767.98px) {
    .body1 {
        line-height: 1.222
    }
}

.body2 {
    font-weight: 400;
    font-size: var(--body2);
    line-height: 1.333
}

@media (max-width: 767.98px) {
    .body2 {
        line-height: 1.5
    }
}

.body3 {
    font-weight: 400;
    font-size: var(--body3);
    line-height: 1.777
}

@media (max-width: 767.98px) {
    .body3 {
        line-height: 1.142
    }
}

.link-header {
    font-weight: 500;
    font-size: var(--link-header);
    line-height: 1;
    text-transform: uppercase
}

.quote {
    font-weight: 500;
    font-size: var(--quote);
    line-height: 1.2
}

.default {
    font-weight: 500;
    font-size: var(--default);
    line-height: 1.2
}

@font-face {
    font-family: Literata;
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(/fonts/Literata.woff2) format("woff2")
}

@font-face {
    font-family: DM Mono;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/DM-Mono-400-Latin.woff2) format("woff2")
}

html::-webkit-scrollbar {
    display: none
}

::-moz-selection {
    background-color: var(--color-orange);
    color: var(--color-white)
}

::selection {
    background-color: var(--color-orange);
    color: var(--color-white)
}

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: auto !important
}

html {
    width: 100%;
    font-family: var(--display-font);
    color: var(--color-white);
    background-color: var(--color-black)
}

body {
    width: 100%;
    margin: 0;
    overscroll-behavior: none;
    touch-action: none;
    font-weight: 500;
    font-size: var(--default);
    line-height: 1.2
}

a {
    pointer-events: auto
}

* {
    box-sizing: border-box
}

sup {
    position: relative;
    display: inline-block;
    font-size: .6em
}

@media (max-width: 767.98px) {
    .desktop-only {
        display: none !important
    }
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important
    }
}

.o-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-template-rows: repeat(var(--rows, 1), 1fr);
    grid-column-gap: var(--grid-gap-width);
    grid-row-gap: 0px;
    height: 100%
}

.o-grid>* {
    grid-column: auto/span var(--grid-column-span, var(--grid-columns));
    grid-column-start: var(--grid-column-start, auto)
}

.prevent-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.o-dashline {
    --dashline-color: var(--color-white);
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--dashline-color) 0 2px, var(--color-white-transparent) 0 4px)
}

#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#site-content {
    position: relative;
    width: 100%;
    overflow-x: clip
}

#pages-container {
    position: relative;
    width: 100%;
    z-index: 1;
    min-height: calc(var(--vh) * 100);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.page {
    opacity: 0
}

.section {
    position: relative;
    width: 100%
}

.section__inner {
    position: relative
}

.o-container {
    width: 100%;
    padding: 0 var(--site-padding-x)
}

#ui input {
    pointer-events: auto
}

.btn {
    --btn-color: var(--color-white);
    --btn-active-color: var(--color-black);
    --btn-text-color: var(--color-black);
    --btn-active-text-color: var(--color-white);
    line-height: 1;
    position: relative;
    text-transform: uppercase;
    padding: 1.2em 2em;
    overflow: hidden;
    background-color: var(--btn-color);
    color: var(--btn-text-color);
    border: 0;
    z-index: 0;
    cursor: pointer;
    white-space: nowrap;
    pointer-events: auto;
    border-radius: 3em;
    font-weight: 500;
    font-size: var(--btn);
    line-height: 1.1
}

.btn svg {
    position: relative;
    height: 1em;
    left: -.75em;
    top: .2em;
    padding-left: .75em
}

.btn path {
    fill: var(--btn-text-color)
}

.btn.is-large {
    padding: 1.5em 3em
}

.btn:hover:not(.is-active),
.btn.is-active:not(:hover) {
    transition: background-color .18s ease-in-out, color .18s;
    background-color: var(--btn-active-color);
    color: var(--btn-active-text-color)
}

.btn:hover:not(.is-active) path,
.btn.is-active:not(:hover) path {
    fill: var(--btn-active-text-color)
}

.btn.is-dark {
    --glow-color: rgba(220, 80, 0, 0);
    --btn-color: var(--color-brown);
    --btn-active-color: var(--color-brown);
    --btn-text-color: var(--color-white);
    --btn-active-text-color: var(--color-white);
    border: 2px solid var(--glow-color);
    transition: border-color .25s
}

.btn.is-dark:hover,
.btn.is-dark.is-active {
    --glow-color: rgba(220, 80, 0, 1)
}

.btn.is-dark:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2em;
    box-shadow: inset 0 0 .75em var(--glow-color);
    transition: box-shadow .25s
}

.btn.is-orange {
    --btn-color: var(--color-orange);
    --btn-active-color: var(--color-white);
    --btn-text-color: var(--color-black);
    --btn-active-text-color: var(--color-black)
}

#ui input {
    font-weight: 500;
    font-size: var(--btn);
    line-height: 1.1;
    background-color: transparent;
    border: none;
    outline: none;
    text-transform: uppercase;
    color: var(--color-white)
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4b5c3d
}

.is-ready #preloader {
    background-color: transparent
}

#preloader {
    z-index: 100
}

#preloader canvas {
    width: 100%;
    height: 100%
}

:root {
    --site-header: 21px
}

#site-header {
    position: fixed;
    left: var(--site-padding-x);
    right: var(--site-padding-x);
    top: var(--site-padding-y);
    z-index: 10
}

#site-header.is-light {
    color: var(--color-black)
}

#site-header.is-light .o-dashline {
    --dashline-color: var(--color-black)
}

#site-header.is-light #site-header-logo,
#site-header.is-light #site-header-nav a {
    color: var(--color-black)
}

#site-header.is-light #site-header-mobile-btn {
    border-color: var(--color-black)
}

#site-header.is-light #site-header-mobile-btn:before {
    background-color: var(--color-black)
}

#site-header-blocker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #201914bf;
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s
}

#site-header-nav:hover~#site-header-blocker {
    opacity: 1
}

@media (max-width: 767.98px) {
    #site-header.is-menu-active #site-header-blocker {
        opacity: 1;
        pointer-events: auto
    }
}

#site-header-logo {
    transform-origin: 0 .03em;
    position: absolute;
    color: var(--color-white);
    opacity: 0
}

#site-header-logo div {
    width: 94px;
    height: 21px
}

#site-header-logo svg {
    width: 100%;
    height: 100%
}

#site-header-nav {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11
}

#site-header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2em
}

#site-header-nav li {
    transition: opacity .18s
}

#site-header-nav:hover li {
    opacity: .5
}

#site-header-nav:hover li.is-active,
#site-header-nav:hover li:hover {
    opacity: 1
}

#site-header-nav a {
    color: var(--color-white);
    text-decoration: none
}

#site-header-line {
    position: absolute;
    top: 100%;
    margin-top: .2em;
    left: 0;
    width: 0;
    height: 1px
}

#site-header-mobile-btn {
    position: absolute;
    right: 0;
    top: -.5em;
    z-index: 11;
    font-size: var(--btn);
    padding: 1em 1.75em 1em 2.5em;
    border: 1px dashed var(--color-white);
    border-radius: 3em
}

#site-header-mobile-btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1.5em;
    width: .5em;
    height: .5em;
    margin-top: -.25em;
    background-color: var(--color-white);
    border-radius: 3em
}

#site-header-mobile-btn span:nth-child(2) {
    display: none
}

#site-header.is-menu-active #site-header-mobile-btn {
    background-color: var(--color-white);
    color: var(--color-black)
}

#site-header.is-menu-active #site-header-mobile-btn:before {
    background-color: var(--color-black)
}

#site-header.is-menu-active #site-header-mobile-btn span:nth-child(2) {
    display: block
}

#site-header.is-menu-active #site-header-mobile-btn span:nth-child(1) {
    display: none
}

#site-header-mobile-menu {
    position: absolute;
    top: calc(var(--site-padding-y) * -1);
    right: calc(var(--site-padding-x) * -1);
    width: calc(var(--site-padding-x) + var(--grid-span-3));
    height: calc(var(--vh) * 100);
    background-color: var(--color-black);
    z-index: 11;
    padding: var(--site-padding-y) calc(var(--site-padding-x) * 1.5);
    transition: transform .5s;
    transform: translate(101%);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

#site-header.is-menu-active #site-header-mobile-menu {
    transform: translate(0)
}

#site-header-mobile-menu a {
    color: var(--color-white);
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px dashed transparent
}

#site-header-mobile-menu a.is-active {
    border-bottom-color: var(--color-white)
}

#site-header-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-size: calc(var(--screen-unit) * 37);
    line-height: 1.3
}

#site-header-mobile-menu li {
    transition: opacity .18s
}

#site-header-mobile-menu .sub2 {
    color: var(--color-grey-brown)
}

#site-header-mobile-bottom {
    margin-bottom: .5em
}

#site-footer {
    position: fixed;
    left: var(--site-padding-x);
    right: var(--site-padding-x);
    bottom: var(--site-padding-y)
}

#site-footer.is-light {
    color: var(--color-black)
}

#site-footer-scroll {
    position: absolute;
    left: 0;
    bottom: 0;
    visibility: hidden;
    display: flex;
    flex-direction: row;
    gap: .7em
}

@media (max-width: 767.98px) {
    #site-footer-scroll {
        font-size: calc(var(--screen-unit) * 11)
    }
}

#site-footer-scroll-text {
    font-weight: 500
}

#site-footer-scroll-text>div {
    will-change: opacity
}

#site-footer-scroll-icon {
    position: relative;
    width: 2em;
    height: 1em
}

#site-footer-scroll-icon>svg {
    position: absolute;
    width: 100%;
    height: 200%;
    left: 0;
    top: -50%
}

@media (max-width: 767.98px) {
    #site-footer-scroll-icon {
        order: 2
    }
}

#site-footer-scroll-arrow {
    position: absolute;
    left: .65em;
    width: .7em;
    height: .7em
}

#site-footer-scroll-arrow svg {
    position: relative;
    width: .7em;
    height: .7em
}

#site-footer-scroll-arrow svg:nth-child(1) {
    position: absolute;
    top: -.3em;
    opacity: 0
}

#site-footer-scroll-arrow svg:nth-child(2) {
    position: absolute;
    top: .2em
}

#scroll-indicator {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: calc(var(--vh) * 100);
    z-index: 20
}

#scroll-indicator__bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 200px;
    background-color: var(--color-white);
    pointer-events: auto
}

@media (max-width: 767.98px) {
    #scroll-indicator__bar {
        height: 100px
    }
}

#scroll-indicator__bar-inner {
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    transform-origin: 0 0;
    transform: rotate(90deg) translateY(-100%);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-black);
    font-size: 15px;
    pointer-events: none
}

@media (max-width: 767.98px) {
    #scroll-indicator__bar-inner {
        width: 100px;
        color: transparent
    }
}

#scroll-indicator__bar-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: var(--color-black);
    border-radius: 50%;
    margin-top: -3px;
    margin-right: .6em;
    vertical-align: middle
}

#scroll-indicator__bar-text {
    display: inline-block
}

#video-overlay {
    position: fixed;
    z-index: 99;
    background-color: #000000e6;
    inset: 0;
    opacity: 0;
    display: none;
    cursor: none
}

@media (max-width: 767.98px) {
    #video-overlay {
        cursor: auto;
        background-color: var(--color-black)
    }
}

#video-overlay__inner {
    --r: 2.5rem;
    --pulse: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    transform-style: preserve-3d;
    width: min(80%, 133.3333333333vh);
    aspect-ratio: 16/9;
    border-radius: var(--r)
}

@media (max-width: 767.98px) {
    #video-overlay__inner {
        --r: 1.5rem;
        width: min(90%, 142.2222222222vh)
    }
}

#video-overlay__vimeo-video {
    width: 100%;
    height: 100%;
    border-radius: var(--r);
    overflow: hidden
}

#video-overlay__controls {
    position: absolute;
    bottom: 2em;
    right: 2em;
    z-index: 20;
    display: flex;
    align-items: center;
    cursor: auto
}

#video-overlay__mute-btn {
    width: 2.5em;
    height: 2.5em;
    background: #00000080;
    border: none;
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer !important;
    transition: background-color .2s ease;
    display: flex;
    align-items: center;
    justify-content: center
}

#video-overlay__mute-btn:hover {
    background: #000000b3
}

#video-overlay__mute-btn svg {
    width: 1.2em;
    height: 1.2em
}

#video-overlay__mute-btn #video-overlay__unmute-icon,
#video-overlay__mute-btn.is-muted #video-overlay__mute-icon {
    display: none
}

#video-overlay__mute-btn.is-muted #video-overlay__unmute-icon {
    display: block
}

#video-overlay-cursor {
    background: var(--color-white);
    width: 3.5em;
    height: 3.5em;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    color: var(--color-black)
}

#video-overlay-cursor svg {
    position: absolute;
    width: 40%;
    height: auto;
    opacity: 0;
    transition: opacity .15s ease
}

#video-overlay-cursor[data-state=play] #video-overlay-cursor__play,
#video-overlay-cursor[data-state=pause] #video-overlay-cursor__pause {
    opacity: 1
}

#video-overlay-cursor[data-state=close] {
    background: var(--color-black);
    color: var(--color-white)
}

#video-overlay-cursor[data-state=close] #video-overlay-cursor__close {
    opacity: 1
}

@media (max-width: 767.98px) {
    #video-overlay-cursor {
        display: none
    }
}

#video-overlay__mobile-close-btn {
    position: absolute;
    top: var(--site-padding-y);
    right: var(--site-padding-x);
    width: 3em;
    height: 3em;
    border-radius: 100%;
    background: var(--color-brown);
    justify-content: center;
    align-items: center;
    display: none;
    cursor: pointer;
    border: none;
    transition: background-color .2s ease
}

#video-overlay__mobile-close-btn:hover {
    background: var(--color-grey-brown)
}

@media (max-width: 767.98px) {
    #video-overlay__mobile-close-btn {
        display: flex
    }
}

#video-overlay__mobile-close-btn svg {
    width: 40%;
    height: auto
}

#video-overlay__mobile-close-btn path {
    stroke: var(--color-white)
}

.video-overlay__glow {
    position: absolute;
    inset: 1px;
    border-radius: var(--r);
    pointer-events: none;
    box-shadow: 0 0 10px 3px #ff8c0099, 0 0 60px 45px #e6500a40;
    opacity: calc(.3 + var(--pulse) * .7);
    filter: saturate(calc(.4 + var(--pulse) * 1.6)) brightness(calc(.6 + var(--pulse) * .6));
    will-change: filter, opacity
}

.video-overlay__border {
    position: absolute;
    inset: -1px;
    border-radius: var(--r);
    pointer-events: none;
    z-index: 10;
    box-shadow: inset 0 0 5px 2px #ffa00099, inset 0 0 15px 8px #e07010, inset 0 0 35px 15px #e6640a73, inset 0 0 45px 20px #e6500a59;
    opacity: calc(.4 + var(--pulse) * .6);
    filter: saturate(calc(.4 + var(--pulse) * 1.6)) brightness(calc(.7 + var(--pulse) * .5));
    will-change: filter, opacity
}

#hero {
    --active-ratio: 1;
    position: relative;
    height: calc(var(--vh) * 100)
}

#hero .section__inner {
    position: fixed;
    top: 0;
    height: calc(var(--vh) * 100);
    padding-top: var(--site-padding-y);
    padding-bottom: var(--site-padding-y)
}

#hero-top {
    position: absolute;
    left: var(--site-padding-x);
    top: var(--site-padding-y)
}

#hero-top:before {
    position: relative;
    display: block;
    content: "";
    margin-bottom: .25em;
    width: .6em;
    height: .6em;
    background: var(--color-white);
    border-radius: 50%;
    transform: scale(var(--active-ratio))
}

@media (max-width: 767.98px) {
    #hero-top {
        position: relative;
        left: 0;
        top: 0
    }

    #hero-top:before {
        display: none
    }
}

#hero-top-tagline {
    margin-right: 1em;
    line-height: 1;
    margin-bottom: .5em;
    text-align: right
}

@media (max-width: 767.98px) {
    #hero-top-tagline {
        padding-top: 2em;
        margin-right: 0
    }
}

#hero-top-tagline div div {
    will-change: transform
}

#hero-logo-ref {
    position: relative;
    --width: calc(var(--grid-span-width) * 7 + var(--grid-column-width) * .5);
    left: calc(var(--grid-gap-width) * -.5);
    width: var(--width);
    height: calc(var(--width) * 174 / 809)
}

@media (max-width: 767.98px) {
    #hero-logo-ref {
        left: calc(var(--grid-gap-width) * -.2);
        --width: calc(var(--grid-span-4) + var(--grid-gap-width) * .4)
    }
}

#hero-copy {
    position: absolute;
    left: calc(var(--site-padding-x) + var(--grid-span-width) * 10 + var(--grid-column-width) * .4);
    top: 50%;
    width: calc(var(--grid-span-width) * 5 + var(--grid-column-width) * .5);
    transform: translateY(-50%)
}

@media (max-width: 767.98px) {
    #hero-copy {
        position: relative;
        left: calc(var(--site-padding-x) + var(--grid-span-width) * 1 + var(--grid-column-width) * .5);
        top: 0;
        margin-top: .5em;
        width: calc(var(--grid-span-2) + var(--grid-column-width) * .65);
        transform: none
    }
}

#hero-copy>div {
    will-change: transform
}

#hero-copy>div div {
    will-change: transform, opacity
}

#hero-card {
    position: absolute;
    left: var(--site-padding-x);
    bottom: var(--site-padding-y);
    height: 50%;
    width: calc(var(--grid-span-width) * 3 + var(--grid-gap-width) * .6);
    max-height: calc(var(--grid-span-3) * 427 / 329)
}

@media (max-width: 767.98px) {
    #hero-card {
        height: 28%;
        width: calc(var(--grid-span-width) * 2)
    }
}

#hero-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: calc(var(--site-row-height) * 3) var(--grid-gap-width)
}

#hero-card-inner .o-dashline {
    margin: calc(var(--site-padding-y) * .4) 0
}

#hero-card-header {
    position: relative;
    flex-grow: 1;
    text-transform: uppercase;
    width: var(--grid-span-3)
}

#hero-card-header>div {
    will-change: transform, opacity
}

#hero-card-header>div div {
    will-change: transform
}

@media (max-width: 767.98px) {
    #hero-card-header {
        width: var(--grid-span-2);
        font-size: calc(15 * var(--screen-unit))
    }
}

#hero-card-desc {
    text-align: right
}

#hero-card-desc span {
    display: block
}

@media (max-width: 767.98px) {
    #hero-card-desc {
        text-align: left;
        font-weight: 400;
        font-size: var(--body3);
        line-height: 1.777
    }
}

@media (max-width: 767.98px) and (max-width: 767.98px) {
    #hero-card-desc {
        line-height: 1.142
    }
}

#hero-video-wrapper {
    --r: .75rem;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: var(--site-padding-x);
    bottom: var(--site-padding-y);
    width: var(--grid-span-2);
    aspect-ratio: 16/9;
    cursor: pointer;
    border-radius: var(--r);
    overflow: visible;
    opacity: 0
}

#hero-video-wrapper:hover .hero-video__glow,
#hero-video-wrapper:hover .hero-video__border {
    opacity: 1;
    filter: saturate(1) brightness(1)
}

#hero-video-wrapper:hover #hero-video-thumbnail {
    transform: scale(1.2)
}

@media (max-width: 767.98px) {
    #hero-video-wrapper {
        aspect-ratio: 9/16;
        width: calc(var(--grid-span-1) + var(--grid-gap-width));
        bottom: calc(var(--site-padding-y) * 2.5)
    }
}

#hero-video-thumbnail-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--r);
    overflow: clip
}

#hero-video-thumbnail {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .3s ease
}

.hero-video__glow {
    position: absolute;
    inset: 1px;
    border-radius: var(--r);
    pointer-events: none;
    box-shadow: 0 0 10px 3px #ff8c0099;
    opacity: .4;
    transition: opacity .3s ease, filter .3s ease
}

.hero-video__border {
    position: absolute;
    inset: -1px;
    border-radius: var(--r);
    pointer-events: none;
    z-index: 10;
    box-shadow: inset 0 0 3px 2px #ffa000, inset 0 0 8px 4px #e07010;
    opacity: .65;
    transition: opacity .3s ease, filter .3s ease
}

#hero-video-play {
    position: relative;
    z-index: 20;
    font-family: var(--body-font);
    font-weight: 500;
    font-size: calc(var(--sub2) * .8);
    text-transform: uppercase;
    color: var(--color-white);
    transition: transform .3s ease
}

@keyframes hero-card-dot-blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: .2
    }

    to {
        opacity: 1
    }
}

#ai {
    position: relative;
    height: calc(var(--vh) * 800)
}

#ai .section__inner {
    position: fixed;
    top: 0;
    height: calc(var(--vh) * 100)
}

#ai-pre {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    left: calc(var(--site-padding-x) + var(--grid-span-width));
    right: calc(var(--site-padding-x) + var(--grid-span-width));
    top: 50%;
    transform: translateY(-50%)
}

#ai-pre .body1 span {
    display: block
}

#ai-pre .body1 {
    will-change: transform
}

#ai-pre .body1 div div {
    will-change: opacity
}

#ai-pre h2 {
    line-height: 1;
    text-transform: uppercase;
    will-change: transform
}

#ai-pre h2 div {
    will-change: opacity
}

@media (max-width: 767.98px) {
    #ai-pre {
        display: block;
        position: absolute;
        left: var(--site-padding-x);
        right: var(--site-padding-x);
        top: calc(var(--site-padding-y) + var(--site-header));
        height: calc(var(--vh) * 100 - (var(--site-padding-y) + var(--site-header)) * 2);
        transform: none
    }

    #ai-pre h2 {
        position: absolute;
        left: 0;
        top: 20%;
        transform: translateY(-50%)
    }

    #ai-pre .body1 {
        position: absolute;
        right: 0;
        top: 85%;
        text-align: right;
        transform: translateY(-50%)
    }

    #ai-pre .body1 span {
        display: inline
    }
}

#ai-header {
    position: absolute;
    left: 50%;
    text-align: center;
    top: var(--site-padding-y);
    justify-content: center;
    transform: translate3d(-50%, calc(var(--vh) * 8), 0)
}

#ai-title {
    position: relative;
    letter-spacing: -.018em
}

#ai-title sup {
    position: absolute;
    font-size: .4em;
    margin-top: .2em
}

#ai-title>div {
    white-space: nowrap
}

#ai-title>div div {
    will-change: opacity
}

@media (max-width: 767.98px) {
    #ai-title {
        text-align: left
    }
}

@media (min-width: 768px) {
    #ai-title {
        white-space: nowrap
    }
}

#ai-tagline {
    position: absolute;
    color: var(--color-orange);
    right: 2.75em;
    bottom: -1.25em;
}

@media (max-width: 767.98px) {
    #ai-tagline {
        /* Pushes it below the entire three-line heading block */
        position: relative; 
        display: block;
        
        /* Resets the right alignment so it reads naturally left-to-right */
        right: auto;
        left: 0;
        
        /* Adds a clean gap below the main text */
        margin-top: -15px; 
    }
}

#ai-tagline div div {
    will-change: transform
}

#ai-instruction {
    position: absolute;
    left: calc(var(--site-padding-x) + var(--grid-span-4));
    top: 80%;
    width: var(--grid-span-2);
    text-align: right;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .5em;
    opacity: .5
}

#ai-instruction .o-dashline {
    width: 100%;
    will-change: width
}

#ai-instruction-icon {
    --size: 2em;
    width: var(--size);
    height: calc(var(--size) * 40 / 32);
    margin: 0 auto 2em
}

#ai-instruction-text,
#ai-instruction-text div div {
    will-change: transform
}

#ai-desc {
    position: absolute;
    left: calc(var(--site-padding-x) + var(--grid-span-width) * 9);
    top: 80%;
    width: calc(var(--grid-span-width) * 3);
    text-align: right;
    transform: translateY(-50%)
}

#ai-desc span {
    display: block
}

@media (max-width: 767.98px) {
    #ai-desc {
        top: 85%;
        left: var(--site-padding-x);
        width: var(--grid-span-2);
        text-align: left
    }

    #ai-desc span {
        display: inline
    }
}

#ai-desc div div {
    will-change: transform
}

#ai-disclaimer-wrapper {
    position: absolute;
    text-align: right;
    right: var(--site-padding-x);
    width: var(--grid-span-1);
    bottom: var(--site-padding-y);
    white-space: nowrap
}

#ai-disclaimer-wrapper .o-dashline {
    display: inline-block;
    margin-top: 1em;
    opacity: .5;
    will-change: width
}

#ai-disclaimer-wrapper span {
    position: relative;
    display: block;
    width: var(--grid-span-2);
    right: var(--grid-span-width)
}

#ai-disclaimer {
    margin-top: 1em;
    opacity: .5;
    will-change: opacity
}

@media (max-width: 767.98px) {
    #ai-disclaimer {
        opacity: 1
    }
}

#wearable {
    --small-size: calc(var(--vh) * 80 * .6);
    --main-width: calc(var(--vh) * 80 * 85 / 110);
    --main-height: calc(var(--vh) * 80);
    --px: calc(var(--main-width) / 850);
    --thumb-scale: .35;
    --thumb-width: calc(var(--thumb-scale) * var(--main-width));
    --thumb-height: calc(var(--thumb-scale) * var(--main-height));
    --thumb-gap: calc(var(--thumb-width) * .08);
    position: relative;
    height: calc(var(--vh) * 1325)
}

#wearable .section__inner {
    position: fixed;
    top: 0;
    height: calc(var(--vh) * 100)
}

@media (max-width: 767.98px) {
    #wearable {
        --small-size: min(var(--vh) * 80 * .6, 80vw);
        --main-width: var(--small-size);
        --main-height: calc(var(--small-size) * 110 / 85)
    }

    #wearable .section__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }
}

#wearable-copy {
    --desc-aspect: 7.311;
    --desc-from-width: calc(100vw - var(--site-padding-x) * 2);
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--desc-from-width);
    height: calc(var(--desc-from-width) / var(--desc-aspect));
    transform: translate(-50%, -64%)
}

@media (max-width: 767.98px) {
    #wearable-copy {
        position: relative;
        left: 0;
        top: 0;
        width: var(--small-size);
        transform: none;
        margin-bottom: 3em;
        --desc-from-width: var(--small-size)
    }
}

#wearable-title-2-dummy {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--desc-from-width);
    height: calc(var(--desc-from-width) / var(--desc-aspect))
}

#wearable-title {
    position: absolute;
    left: 0;
    top: -1.8em
}

#wearable-title span {
    display: block
}

#wearable-title span:nth-child(1) {
    line-height: 1.5;
    will-change: transform, opacity;
    color: #bbac97
}

#wearable-title span:nth-child(1) div div {
    will-change: transform
}

#wearable-title span:nth-child(2) {
    display: inline-block;
    opacity: 0;
    font-size: 1.5em;
    margin-top: .05em;
    text-transform: none
}

@media (max-width: 767.98px) {
    #wearable-title {
        position: relative;
        top: 0
    }

    #wearable-title span:nth-child(1) {
        text-transform: uppercase
    }

    #wearable-title span:nth-child(2) {
        position: absolute;
        font-size: 2em;
        margin-top: -.05em
    }
}

#wearable-main {
    position: absolute;
    width: var(--main-width);
    height: var(--main-height);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

@media (max-width: 767.98px) {
    #wearable-main {
        position: relative;
        left: 0;
        top: 0;
        transform: none
    }
}

#wearable-main-small {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--small-size);
    height: var(--small-size);
    transform: translate(-50%, -50%)
}

#wearable-main-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

#wearable-gallery-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

#wearable-gallery-move-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    width: 800%;
    height: 100%
}

.wearable-gallery-item {
    position: relative;
    width: var(--main-width);
    height: 100%;
    overflow: hidden
}

.wearable-gallery-item img,
.wearable-gallery-item video {
    height: 100%
}

.wearable-gallery-item-inner {
    position: relative;
    height: 100%;
    will-change: transform
}

.wearable-gallery-thumbs-wrapper {
    position: absolute;
    width: calc((100vw - var(--main-width)) / 2 - var(--thumb-gap) - 7px);
    height: 100%;
    overflow: hidden;
    pointer-events: none
}

.wearable-gallery-thumbs-wrapper.is-left {
    left: 0
}

.wearable-gallery-thumbs-wrapper.is-left .wearable-gallery-thumbs-move-container {
    left: 100%
}

.wearable-gallery-thumbs-wrapper.is-left .wearable-gallery-thumbs-move-container .wearable-gallery-thumb-item {
    margin-left: var(--thumb-gap)
}

.wearable-gallery-thumbs-wrapper.is-left .wearable-gallery-thumbs-move-container .wearable-gallery-thumb-item:last-child {
    display: none
}

.wearable-gallery-thumbs-wrapper.is-right {
    right: 0
}

.wearable-gallery-thumbs-wrapper.is-right .wearable-gallery-thumb-item {
    margin-right: var(--thumb-gap)
}

.wearable-gallery-thumbs-wrapper.is-right .wearable-gallery-thumb-item:first-child {
    display: none
}

.wearable-gallery-thumbs-move-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    width: calc(var(--thumb-width) * 7 + var(--thumb-gap) * 7);
    height: var(--thumb-height);
    top: 50%;
    transform: translateY(-50%)
}

.wearable-gallery-thumb-item {
    position: relative;
    width: var(--thumb-width);
    height: var(--thumb-height);
    opacity: .5
}

.wearable-gallery-thumb-item img {
    width: 100%;
    height: 100%
}

#wearable-magazine {
    font-family: Literata;
    font-size: calc(var(--px) * 16);
    overflow: hidden;
    font-weight: 300
}

#wearable-magazine-title {
    position: absolute;
    left: calc(var(--px) * 45.19);
    top: calc(var(--px) * 24.85);
    width: calc(var(--px) * 754.4);
    height: calc(var(--px) * 268.72)
}

#wearable-magazine-issue {
    position: absolute;
    left: calc(var(--px) * 630.36);
    top: calc(var(--px) * 308.75);
    width: calc(var(--px) * 167.25);
    height: calc(var(--px) * 15.94);
    font-weight: 400;
    font-size: calc(var(--px) * 21.69);
    white-space: nowrap;
    text-align: right;
    line-height: calc(var(--px) * 10);
    will-change: transform, opacity;
    opacity: 0
}

#wearable-magazine-idea {
    position: absolute;
    right: calc(var(--px) * 50);
    top: calc(var(--px) * 378.22);
    width: calc(var(--px) * 155.9);
    height: calc(var(--px) * 191.15);
    border: calc(var(--px) * 2) solid var(--color-white);
    text-align: center;
    will-change: transform, opacity;
    opacity: 0
}

#wearable-magazine-idea-num {
    margin-top: calc(var(--px) * 18);
    font-weight: 500;
    font-size: calc(var(--px) * 66.47)
}

#wearable-magazine-idea-num-inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 1em;
    line-height: 1em
}

#wearable-magazine-idea-num-inner span {
    height: 1em;
    line-height: 1em
}

#wearable-magazine-idea-num-inner>span:nth-child(2) {
    visibility: hidden
}

#wearable-magazine-idea-num-inner>span:nth-child(3) {
    position: absolute;
    right: calc(var(--px) * -1);
    top: calc(var(--px) * .5);
    display: block
}

#wearable-magazine-idea-num-inner>span:nth-child(3) span {
    display: block
}

#wearable-magazine-idea-num-inner>span:nth-child(3) {
    will-change: transform
}

#wearable-magazine-idea-text {
    font-size: calc(var(--px) * 18.98)
}

#wearable-magazine-main {
    position: absolute;
    left: calc(var(--px) * 58.65);
    top: calc(var(--px) * 547.69);
    width: calc(var(--px) * 367.7);
    white-space: nowrap
}

#wearable-magazine-main-title-1 {
    font-size: calc(var(--px) * 42.28);
    will-change: transform, opacity;
    opacity: 0
}

#wearable-magazine-main-title-2 {
    margin-top: -.1em;
    margin-bottom: .25em;
    font-weight: 400;
    font-size: calc(var(--px) * 73.7);
    text-align: right;
    will-change: transform, opacity;
    opacity: 0
}

#wearable-magazine-main-desc {
    font-size: calc(var(--px) * 19.5);
    line-height: 1.5;
    text-transform: uppercase
}

#wearable-magazine-main-desc span {
    display: block;
    will-change: transform, opacity;
    opacity: 0
}

#wearable-magazine-num {
    position: absolute;
    left: calc(var(--px) * 60.99);
    bottom: calc(var(--px) * 50);
    width: calc(var(--px) * 138.28);
    height: calc(var(--px) * 138.28);
    font-size: calc(var(--px) * 55.89);
    font-weight: 200;
    text-align: center;
    line-height: calc(var(--px) * 132);
    border-radius: 50%;
    border: calc(var(--px) * 2) solid var(--color-white)
}

#wearable-magazine-num svg {
    position: relative;
    top: -.3em;
    height: calc(var(--px) * 24.48)
}

#wearable-magazine-num {
    will-change: transform, opacity;
    opacity: 0
}

#wearable-magazine-corner {
    position: absolute;
    right: calc(var(--px) * 50);
    bottom: calc(var(--px) * 50);
    width: calc(var(--px) * 335.08);
    text-align: right;
    white-space: nowrap;
    text-transform: uppercase
}

#wearable-magazine-corner-title {
    font-size: calc(var(--px) * 37.66);
    line-height: 1;
    will-change: transform, opacity;
    opacity: 0
}

#wearable-magazine-corner-desc {
    margin: 1.5em 0 3.5em;
    font-size: calc(var(--px) * 10.85);
    line-height: 1.5
}

#wearable-magazine-corner-desc span {
    display: block;
    will-change: transform, opacity;
    opacity: 0
}

#wearable-magazine-barcode {
    height: calc(var(--px) * 46.9);
    transform-origin: center bottom;
    will-change: transform;
    transform: scaleY(0)
}

#wearable-gallery-warning {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--px) * 18);
    padding: calc(var(--px) * 14);
    left: calc(var(--px) * 48);
    right: calc(var(--px) * 48);
    bottom: calc(var(--px) * 18);
    background-color: #0c0a0aeb
}

#wearable-gallery-warning h5 {
    font-size: calc(var(--px) * 28)
}

#wearable-gallery-warning-icon-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: calc(var(--px) * 18) calc(var(--px) * 28) calc(var(--px) * 18) calc(var(--px) * 24);
    border: 1px dashed rgba(255, 237, 215, .4)
}

#wearable-gallery-warning-icon-wrapper svg {
    width: calc(var(--px) * 48);
    margin-right: calc(var(--px) * 18)
}

#wearable-gallery-warning-message {
    text-transform: uppercase;
    text-align: center;
    flex-grow: 1
}

#wearable-gallery-bikini-overlay {
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%
}

#wearable-gallery-bikini-overlay img {
    filter: blur(.75em);
    transition: filter .5s
}

#wearable-gallery-bikini-overlay:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: .3;
    transition: opacity 1s, background-color 1s
}

.wearable-gallery-item.is-added #wearable-gallery-bikini-overlay {
    top: 0
}

.wearable-gallery-item.is-added #wearable-gallery-bikini-overlay img {
    filter: blur(0)
}

.wearable-gallery-item.is-added #wearable-gallery-bikini-overlay:after {
    opacity: 0;
    background-color: #000
}

#wearable-gallery-bikini-message {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: calc(var(--px) * 24);
    text-transform: uppercase;
    padding: calc(var(--px) * 24);
    padding-left: calc(var(--px) * 48);
    left: calc(var(--px) * 48);
    right: calc(var(--px) * 48);
    bottom: calc(var(--px) * 18);
    background-color: #0c0a0aeb;
    transition: transform .5s cubic-bezier(.3, 0, .66, -.3)
}

#wearable-gallery-bikini-message span {
    color: var(--color-orange)
}

#wearable-gallery-bikini-message span span {
    position: relative;
    top: -.1em
}

.wearable-gallery-item.is-added #wearable-gallery-bikini-message {
    transform: translateY(120%)
}

#wearable-gallery-bikini-send-btn-wrapper {
    position: relative
}

#wearable-gallery-bikini-send-btn-wrapper:before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 1.75em;
    box-shadow: 0 0 1em var(--color-orange);
    animation: bikini-btn-pulse-animation 1s ease-in-out infinite
}

@media (max-width: 767.98px) {
    #wearable-gallery-bikini-send-btn-wrapper:before {
        border-radius: 2em
    }
}

.wearable-gallery-item.is-added #wearable-gallery-bikini-send-btn-wrapper:before {
    animation: none;
    visibility: hidden
}

@keyframes bikini-btn-pulse-animation {
    0% {
        transform: scale(.8)
    }

    50% {
        transform: scale(1)
    }

    to {
        transform: scale(.8)
    }
}

#features {
    --icon-size: 60px;
    position: relative;
    height: calc(var(--vh) * 1050)
}

#features .section__inner {
    position: fixed;
    top: 0;
    height: calc(var(--vh) * 100)
}

@media (max-width: 767.98px) {
    #features {
        --icon-size: 37px
    }
}

#features-items {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--grid-span-5) + var(--site-padding-x));
    height: calc(var(--vh) * 100)
}

#features-items:after {
    content: "";
    position: absolute;
    left: var(--site-padding-x);
    bottom: var(--site-padding-y);
    width: 5px;
    height: 5px;
    background: var(--color-white);
    border-radius: 50%
}

@media (max-width: 767.98px) {
    #features-items {
        width: 100%
    }
}

.features-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-left: var(--site-padding-x);
    padding-right: calc(var(--grid-span-1) + var(--grid-gap-width));
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

@media (max-width: 767.98px) {
    .features-item {
        padding-right: var(--site-padding-x)
    }

    .features-item .o-dashline {
        visibility: hidden;
        flex-grow: 1
    }
}

.features-item-top {
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--site-padding-y) * 3.5 + var(--site-header))
}

@media (max-width: 767.98px) {
    .features-item-top {
        position: absolute;
        left: 50%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        transform: translate(-50%);
        padding: .75em 1.5em .75em .75em
    }
}

.features-item-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    margin-bottom: calc(var(--site-padding-y) * 1.5)
}

@media (max-width: 767.98px) {
    .features-item-icon {
        margin-bottom: 0
    }
}

.features-item-tagline {
    margin-bottom: calc(var(--site-padding-y) * .6);
    text-transform: none;
}

@media (max-width: 767.98px) {
    .features-item-tagline {
        margin-left: .75em;
        margin-bottom: 0
    }
}

.features-item-tagline div {
    will-change: transform, opacity
}

.features-item-desc {
    flex-grow: 1
}

@media (max-width: 767.98px) {
    .features-item-desc {
        order: 1;
        flex-grow: 0;
        padding: calc(var(--h3) * .75) calc(var(--site-padding-x) * 2);
        padding-top: 0;
        text-align: center;
        width: 100%;
        margin-bottom: 3em
    }
}

.features-item-desc div div {
    will-change: transform, opacity
}

.features-item-title {
    padding: 1em 0 calc(var(--site-padding-y) + 1.5em) 0;
    width: var(--grid-span-4);
    text-align: right
}

@media (max-width: 767.98px) {
    .features-item-title {
        text-align: center;
        padding: .75em calc(var(--site-padding-x) * 2)
    }
}

.features-item-title div div div {
    will-change: transform, opacity
}

#features-curve-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

#features-circular-logo-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none
}

#features-circular-logo-wrapper svg {
    width: 94vw;
    aspect-ratio: 809/174
}

#features-temperature-slider {
    --slider-height: calc(var(--vh) * 50);
    position: absolute;
    right: var(--site-padding-x);
    top: 50%;
    transform: translateY(-50%);
    height: var(--slider-height)
}

@media (max-width: 767.98px) {
    #features-temperature-slider {
        --slider-height: calc(var(--vh) * 30);
        top: 42%
    }
}

#features-temperature-slider__text-container {
    position: absolute;
    top: 0;
    right: calc(13px + 2em);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

@media (max-width: 767.98px) {
    #features-temperature-slider__text-container {
        right: calc(13px + .75em)
    }
}

.features-temperature-slider__text {
    text-align: right
}

#features-temperature-slider__bar-wrapper {
    position: relative;
    width: 9px;
    height: 100%
}

#features-temperature-slider__bar-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: -4px;
    width: 4px;
    height: 100%;
    background: repeating-linear-gradient(0deg, var(--color-white) 0, var(--color-white) 1px, transparent 1px, transparent 8px)
}

#features-temperature-slider__bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #fdfeed, #ffbf02 17%, #e9500e 32%, #cd197d, #8c019c, #250187, #030310);
    transform-origin: left center;
    transform: scaleX(1)
}

#features-extra-wrapper {
    position: absolute;
    right: var(--site-padding-x);
    bottom: var(--site-padding-y);
    text-align: right
}

.features-extra-item {
    opacity: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3em
}

.features-extra-item:nth-child(1) svg {
    height: 2.5em
}

.features-extra-item:nth-child(2) svg {
    height: 3.8em
}

.features-extra-item:nth-child(3) svg {
    height: 3.5em
}

#encryption {
    position: relative;
    height: calc(var(--vh) * 400)
}

#encryption .section__inner {
    position: fixed;
    top: 0;
    height: calc(var(--vh) * 100)
}

#encryption-main {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    left: 0;
    top: calc(var(--site-padding-y) + var(--vh) * 8);
    width: 100%;
    height: calc(var(--vh) * 48);
    text-align: center
}

@media (max-width: 767.98px) {
    #encryption-main {
        justify-content: flex-start
    }
}

#encryption-header {
    flex-grow: 1
}

@media (max-width: 767.98px) {
    #encryption-header {
        flex-grow: 0
    }
}

#encryption-tagline div div {
    will-change: transform, opacity
}

#encryption-title {
    margin: .45em 0
}

#encryption-title div div {
    will-change: opacity
}

#encryption-desc div div {
    will-change: transform, opacity
}

#encryption-field {
    position: relative;
    margin-top: .25em
}

#encryption-field .encryption-field-line:nth-child(1),
#encryption-field .encryption-field-line:nth-child(3) {
    position: absolute;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--color-white) 0 3px, var(--color-white-transparent) 0 6px)
}

#encryption-field .encryption-field-line:nth-child(2),
#encryption-field .encryption-field-line:nth-child(4) {
    position: absolute;
    width: 1px;
    height: 100%;
    background: repeating-linear-gradient(0deg, var(--color-white) 0 3px, var(--color-white-transparent) 0 6px)
}

#encryption-field .encryption-field-line:nth-child(1) {
    left: 0;
    top: 0
}

#encryption-field .encryption-field-line:nth-child(2) {
    right: 0;
    top: 0
}

#encryption-field .encryption-field-line:nth-child(3) {
    bottom: 0;
    right: 0;
    transform: scaleX(-1)
}

#encryption-field .encryption-field-line:nth-child(4) {
    bottom: 0;
    left: 0;
    transform: scaleY(-1)
}

@media (max-width: 767.98px) {
    #encryption-field {
        margin-top: 2em
    }
}

#encryption-field-input {
    left: 0;
    top: 0;
    padding: 1em 1.5em;
    text-align: center;
    text-transform: unset
}

#encryption-field-flip-btn {
    position: relative;
    margin-top: 1.5em;
    display: flex;
    align-items: center
}

#encryption-field-flip-btn.is-active #encryption-field-flip-btn-inner {
    transform: translateY(-2.5em)
}

#encryption-field-flip-btn-inner {
    position: relative;
    display: block;
    line-height: 1;
    transition: transform .18s ease-in-out
}

#encryption-field-flip-btn-inner span {
    position: relative
}

#encryption-field-flip-btn-inner span:nth-child(2) {
    position: absolute;
    top: 2.5em;
    left: 0
}

#grip {
    --box-width: calc(var(--vh) * 35);
    position: relative;
    height: calc(var(--vh) * 400)
}

#grip .section__inner {
    position: fixed;
    top: 0;
    height: calc(var(--vh) * 100)
}

#grip-header {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 0;
    top: calc(var(--site-padding-y) + var(--vh) * 8);
    width: 100%;
    height: calc(var(--vh) * 60);
    text-align: center
}

#grip-tagline div div {
    will-change: transform, opacity
}

#grip-title {
    margin: .45em 0
}

#grip-title div div {
    will-change: opacity
}

#grip-desc div div {
    will-change: transform, opacity
}

#grip-zoom-box {
    position: absolute;
    left: 50%;
    top: calc(71.5% - var(--box-width) / 2 * 380 / 512);
    margin-left: calc(var(--box-width) / -2);
    width: var(--box-width);
    pointer-events: auto
}

#grip-zoom-box__inner {
    position: relative;
    width: 100%;
    cursor: grab
}

#grip-zoom-box__image {
    width: 100%;
    aspect-ratio: 2
}

#grip-zoom-box__content {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    bottom: 100%;
    left: 0;
    color: var(--color-black);
    padding: .5em 1em
}

#grip-zoom-box__content-bg {
    position: absolute;
    background-color: var(--color-white);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

#grip-instruction {
    --width: calc(var(--box-width) * 1.2);
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    top: calc(71.5% - var(--box-width) / 2 * 380 / 512 + var(--box-width) / 2);
    width: var(--width);
    height: calc(var(--width) * 15 / 100)
}

#grip-instruction-wheel {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    top: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%)
}

#grip-instruction-wheel path {
    opacity: .6;
    animation: grip-instruction-wheel-dash 1s linear infinite
}

@keyframes grip-instruction-wheel-dash {
    0% {
        stroke-dashoffset: 2
    }

    to {
        stroke-dashoffset: 0
    }
}

#grip-instruction-icon {
    position: absolute;
    --size: 2em;
    left: 50%;
    top: 100%;
    width: var(--size);
    height: calc(var(--size) * 40 / 32);
    margin-top: 1em;
    transform: translate(-50%);
    opacity: .5
}

#sustainability {
    position: relative;
    color: var(--color-black)
}

#sustainability-hero {
    height: calc(var(--vh) * 500)
}

#sustainability-hero-inner {
    position: sticky;
    top: 0;
    height: calc(var(--vh) * 100)
}

#sustainability-header {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 0;
    top: calc(var(--site-padding-y) + var(--vh) * 10);
    width: 100%;
    height: calc(var(--vh) * 60);
    text-align: center
}

#sustainability-tagline {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(var(--vh) * 5 + var(--site-padding-y));
    text-align: center;
    will-change: transform, opacity
}

@media (max-width: 767.98px) {
    #sustainability-tagline {
        top: calc(var(--vh) * 5 + var(--site-padding-y) * 4)
    }
}

#sustainability-title {
    position: absolute;
    left: 0;
    bottom: 50%;
    width: 100%;
    height: calc((100vw - var(--site-padding-x) * 2) * 291.94 / 1799.07);
    margin-bottom: -7%
}

#sustainability-title-pre {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: -.75em;
    will-change: transform, opacity
}

@media (max-width: 767.98px) {
    #sustainability-title-pre {
        width: 100%;
        text-align: center;
        margin-bottom: 1em
    }
}

#sustainability-title-main {
    font-size: 15vw;
    text-indent: -.03em;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .018em;
    visibility: hidden
}

#sustainability-desc {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(var(--vh) * 68);
    text-align: center;
    transform: translateY(-50%)
}

@media (max-width: 767.98px) {
    #sustainability-desc {
        top: calc(var(--vh) * 80)
    }
}

#sustainability-desc div div div {
    will-change: transform, opacity
}

#sustainability-items {
    margin-top: calc(var(--site-padding-y) * 2);
    padding-bottom: calc(var(--site-padding-y) * 2)
}

@media (max-width: 767.98px) {
    #sustainability-items {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
        padding-bottom: calc(var(--site-padding-y) * 5)
    }
}

.sustainability-item {
    --item-padding: calc(var(--site-padding-x) * .5);
    position: relative;
    background-color: var(--color-green-lightest);
    height: var(--grid-span-6);
    padding: var(--item-padding) var(--item-padding)
}

@media (max-width: 767.98px) {
    .sustainability-item {
        --item-padding: calc(var(--site-padding-x) * 1.25);
        height: calc(var(--grid-column-width) * 6.5)
    }
}

.sustainability-item:nth-child(1) {
    --grid-columns: 4;
    background-color: var(--color-green);
    overflow: hidden;
    color: var(--color-white)
}

.sustainability-item:nth-child(1) .sustainability-item-title {
    margin-bottom: 1em
}

.sustainability-item:nth-child(1) .sustainability-item-desc {
    padding-right: calc(var(--grid-span-1) * .5)
}

.sustainability-item:nth-child(2),
.sustainability-item:nth-child(3) {
    --grid-columns: 6;
    color: var(--color-green)
}

@media (max-width: 767.98px) {

    .sustainability-item:nth-child(2) .sustainability-item-title br,
    .sustainability-item:nth-child(3) .sustainability-item-title br {
        display: none
    }
}

.sustainability-item:nth-child(2) .sustainability-item-desc,
.sustainability-item:nth-child(3) .sustainability-item-desc {
    position: absolute;
    left: var(--item-padding);
    bottom: var(--item-padding);
    padding-right: calc(var(--grid-span-1) * 1)
}

@media (max-width: 767.98px) {

    .sustainability-item:nth-child(2) .sustainability-item-desc,
    .sustainability-item:nth-child(3) .sustainability-item-desc {
        padding-right: var(--item-padding)
    }
}

.sustainability-item:nth-child(2) #sustainability-rive-canvas-harvesting {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%
}

.sustainability-item:nth-child(3) #sustainability-rive-canvas-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    height: 65%
}

@media (max-width: 767.98px) {
    .sustainability-item {
        width: 100%
    }
}

.sustainability-item-title div div,
.sustainability-item-desc div div {
    will-change: opacity
}

.sustainability-item-num {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%);
    font-size: calc(var(--grid-span-5));
    text-align: center;
    line-height: 1;
    color: var(--color-green-light)
}

@media (max-width: 767.98px) {
    .sustainability-item-num {
        top: 40%;
        font-size: calc(var(--grid-span-5))
    }
}

#testimonies {
    position: relative
}

#testimonies-hero {
    position: relative;
    height: calc(var(--vh) * 100)
}

#testimonies-hero-title {
    position: absolute;
    left: 0;
    top: calc(var(--site-padding-y) * 2 + var(--site-header) + .5em);
    width: var(--grid-span-6)
}

@media (max-width: 767.98px) {
    #testimonies-hero-title {
        width: var(--grid-span-3);
        top: calc(var(--site-padding-y) * 2 + var(--site-header) + .25em)
    }
}

#testimonies-hero-title div div div {
    will-change: opacity
}

#testimonies-hero-desc {
    position: absolute;
    left: calc(var(--grid-span-11) + var(--grid-gap-width));
    width: var(--grid-span-4);
    top: 50%;
    transform: translateY(-50%)
}

@media (max-width: 767.98px) {
    #testimonies-hero-desc {
        left: auto;
        right: 0;
        width: var(--grid-span-3);
        text-align: right;
        top: 80%
    }
}

#testimonies-hero-desc div div div {
    will-change: opacity
}

#testimonies-table-header {
    position: relative;
    height: 3em;
    line-height: 3em
}

#testimonies-table-header-title {
    position: absolute;
    left: 0
}

#testimonies-table-header-center {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    gap: 2em
}

@media (max-width: 767.98px) {
    #testimonies-table-header-center {
        display: none
    }
}

.testimonies-table-rating {
    display: flex;
    align-items: center;
    gap: .5ex;
    will-change: opacity
}

@media (max-width: 767.98px) {
    .testimonies-table-rating {
        justify-content: space-between
    }
}

#testimonies-table-header-right {
    position: absolute;
    right: 0;
    width: var(--grid-span-4);
    text-align: right
}

.testimonies-table-item {
    display: flex;
    justify-content: space-between;
    padding: 1em 0
}

@media (max-width: 767.98px) {
    .testimonies-table-item {
        position: relative;
        display: block
    }
}

.testimonies-table-item-content {
    position: relative
}

@media (max-width: 767.98px) {
    .testimonies-table-item-content {
        width: 100%
    }
}

.testimonies-table-item-content-title {
    margin-top: .5em;
    width: calc(var(--grid-span-3) + var(--grid-span-width) * 1)
}

.testimonies-table-item-content-title span {
    color: var(--color-orange)
}

@media (max-width: 767.98px) {
    .testimonies-table-item-content-title {
        width: 100%;
        padding-left: var(--grid-span-1);
        margin-bottom: 2em
    }
}

.testimonies-table-item-content-title div div {
    will-change: opacity
}

.testimonies-table-item-content-author {
    position: absolute;
    bottom: 0;
    left: 0
}

@media (max-width: 767.98px) {
    .testimonies-table-item-content-author {
        position: relative;
        bottom: auto;
        padding-left: var(--grid-span-1);
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }
}

.testimonies-table-item-image-wrapper {
    position: relative;
    width: var(--grid-span-4);
    aspect-ratio: 4/3;
    background-color: #ff00001a;
    overflow: hidden;
    transform-origin: 100% 0;
    will-change: transform, opacity
}

.testimonies-table-item-image-wrapper:after {
    content: "";
    display: block;
    height: 0;
    padding-top: 56.25%
}

.testimonies-table-item-image-wrapper img,
.testimonies-table-item-image-wrapper picture {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1)
}

@media (max-width: 767.98px) {
    .testimonies-table-item-image-wrapper {
        position: absolute;
        left: 0;
        top: calc(var(--grid-column-width) * .6);
        width: calc(var(--grid-column-width) * .7);
        height: calc(var(--grid-column-width) * .7);
        overflow: hidden;
        border-radius: 50%
    }

    .testimonies-table-item-image-wrapper img,
    .testimonies-table-item-image-wrapper picture {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }

    .testimonies-table-item-image-wrapper img:after,
    .testimonies-table-item-image-wrapper picture:after {
        display: none
    }
}

#social-content {
    position: relative
}

#social-content .section__inner {
    position: sticky;
    top: 0;
    width: 100%;
    height: calc(var(--vh) * 100);
    overflow: hidden
}

@media (max-width: 767.98px) {
    #social-content .section__inner {
        left: var(--site-padding-x);
        width: calc(100vw - var(--site-padding-x) * 2)
    }

    #social-content .section__inner:before {
        content: "";
        position: absolute;
        top: calc(10% + var(--site-padding-y));
        left: var(--site-padding-x);
        width: calc(100vw - var(--site-padding-x) * 4);
        height: calc(80% - var(--site-padding-y) * 2);
        border: 1px dashed rgba(255, 237, 215, .5);
        z-index: 1;
        pointer-events: none
    }
}

#social-content-items-wrapper {
    --px: calc(var(--vh) * 80 / 1080);
    pointer-events: auto;
    position: absolute;
    display: flex;
    top: 10%;
    left: 0;
    height: 80%;
    flex-direction: row;
    gap: calc(var(--px) * 24);
    will-change: transform
}

@media (max-width: 767.98px) {
    #social-content-items-wrapper {
        will-change: auto;
        gap: 0
    }
}

#social-content-items-wrapper [data-id=edge] {
    aspect-ratio: 1500/1080
}

#social-content-items-wrapper [data-id=edge] .social-content-item-inner {
    aspect-ratio: 1700/1080
}

#social-content-items-wrapper [data-id=edge] .social-content-item-title {
    font-size: calc(var(--px) * 96.43);
    left: calc(var(--px) * 50);
    top: calc(var(--px) * 54)
}

#social-content-items-wrapper [data-id=edge] .social-content-item-note {
    left: calc(var(--px) * 50);
    bottom: calc(var(--px) * 54)
}

#social-content-items-wrapper [data-id=sticker_1],
#social-content-items-wrapper [data-id=color],
#social-content-items-wrapper [data-id=perfect],
#social-content-items-wrapper [data-id=sticker_2] {
    aspect-ratio: 700/1080
}

#social-content-items-wrapper [data-id=sticker_1] .social-content-item-inner,
#social-content-items-wrapper [data-id=color] .social-content-item-inner,
#social-content-items-wrapper [data-id=perfect] .social-content-item-inner,
#social-content-items-wrapper [data-id=sticker_2] .social-content-item-inner {
    aspect-ratio: 900/1080
}

#social-content-items-wrapper [data-id=always_on] {
    aspect-ratio: 1720/1080
}

#social-content-items-wrapper [data-id=always_on] .social-content-item-inner {
    aspect-ratio: 1920/1080
}

#social-content-items-wrapper [data-id=always_on] .social-content-item-cover {
    left: calc(var(--px) * 1415);
    top: calc(var(--px) * 498);
    width: calc(var(--px) * 398);
    height: calc(var(--px) * 283)
}

#social-content-items-wrapper [data-id=always_on] .social-content-item-title {
    font-size: calc(var(--px) * 340);
    left: calc(var(--px) * 50);
    top: calc(var(--px) * 316)
}

#social-content-items-wrapper [data-id="3090"] {
    aspect-ratio: 2050/1080
}

#social-content-items-wrapper [data-id="3090"] .social-content-item-inner {
    aspect-ratio: 2250/1080
}

#social-content-items-wrapper [data-id="3090"] .social-content-item-cover {
    left: calc(var(--px) * 829);
    top: calc(var(--px) * 276);
    width: calc(var(--px) * 588);
    height: calc(var(--px) * 154)
}

#social-content-items-wrapper [data-id="3090"] .social-content-item-title {
    font-size: calc(var(--px) * 220);
    left: 0;
    top: calc(var(--px) * 100);
    width: calc(var(--px) * 2050);
    text-align: center
}

#social-content-items-wrapper [data-id="3090"] .social-content-item-note {
    left: calc(var(--px) * 97);
    top: calc(var(--px) * 54);
    bottom: auto
}

#social-content-items-wrapper [data-id=drop_test] {
    aspect-ratio: 1935/1080
}

#social-content-items-wrapper [data-id=drop_test] .social-content-item-inner {
    aspect-ratio: 2135/1080
}

#social-content-items-wrapper [data-id=drop_test] .social-content-item-cover {
    left: calc(var(--px) * 750);
    top: calc(var(--px) * 258);
    width: calc(var(--px) * 528);
    height: calc(var(--px) * 176)
}

#social-content-items-wrapper [data-id=drop_test] .social-content-item-title {
    font-size: calc(var(--px) * 220);
    left: 0;
    top: calc(var(--px) * 100);
    width: calc(var(--px) * 1935);
    text-align: center
}

#social-content-items-wrapper [data-id=drop_test] .social-content-item-note {
    left: calc(var(--px) * 97);
    top: calc(var(--px) * 54);
    bottom: auto
}

@media (min-width: 768px) {
    #social-content-items-wrapper [data-id=drop_test] .social-content-item-note span {
        position: absolute
    }

    #social-content-items-wrapper [data-id=drop_test] .social-content-item-note span:nth-child(2) {
        left: calc(var(--px) * 1000)
    }

    #social-content-items-wrapper [data-id=drop_test] .social-content-item-note span:nth-child(3) {
        left: calc(var(--px) * 1480)
    }
}

@media (max-width: 767.98px) {
    #social-content-items-wrapper [data-id=drop_test] .social-content-item-note span {
        display: block
    }
}

#social-content-items-wrapper [data-id=legacy_support] {
    aspect-ratio: 2050/1080
}

#social-content-items-wrapper [data-id=legacy_support] .social-content-item-inner {
    aspect-ratio: 2250/1080;
    z-index: 1
}

#social-content-items-wrapper [data-id=legacy_support] .social-content-item-title {
    font-size: calc(var(--px) * 220);
    left: 0;
    top: calc(var(--px) * 100);
    width: calc(var(--px) * 2050);
    text-align: center;
    z-index: 1
}

#social-content-items-wrapper [data-id=legacy_support] .social-content-item-note {
    left: 0;
    width: calc(var(--px) * 2050);
    top: calc(var(--px) * 54);
    bottom: auto;
    text-align: center;
    z-index: 1
}

@media (max-width: 767.98px) {

    #social-content-items-wrapper [data-id=edge],
    #social-content-items-wrapper [data-id=sticker_1],
    #social-content-items-wrapper [data-id=color],
    #social-content-items-wrapper [data-id=perfect],
    #social-content-items-wrapper [data-id=sticker_2],
    #social-content-items-wrapper [data-id=always_on],
    #social-content-items-wrapper [data-id="3090"],
    #social-content-items-wrapper [data-id=drop_test],
    #social-content-items-wrapper [data-id=legacy_support],
    #social-content-items-wrapper [data-id=edge] .social-content-item-inner,
    #social-content-items-wrapper [data-id=sticker_1] .social-content-item-inner,
    #social-content-items-wrapper [data-id=color] .social-content-item-inner,
    #social-content-items-wrapper [data-id=perfect] .social-content-item-inner,
    #social-content-items-wrapper [data-id=sticker_2] .social-content-item-inner,
    #social-content-items-wrapper [data-id=always_on] .social-content-item-inner,
    #social-content-items-wrapper [data-id="3090"] .social-content-item-inner,
    #social-content-items-wrapper [data-id=drop_test] .social-content-item-inner,
    #social-content-items-wrapper [data-id=legacy_support] .social-content-item-inner {
        aspect-ratio: auto
    }

    #social-content-items-wrapper [data-id=edge] .social-content-item-title,
    #social-content-items-wrapper [data-id=sticker_1] .social-content-item-title,
    #social-content-items-wrapper [data-id=color] .social-content-item-title,
    #social-content-items-wrapper [data-id=perfect] .social-content-item-title,
    #social-content-items-wrapper [data-id=sticker_2] .social-content-item-title,
    #social-content-items-wrapper [data-id=always_on] .social-content-item-title,
    #social-content-items-wrapper [data-id="3090"] .social-content-item-title,
    #social-content-items-wrapper [data-id=drop_test] .social-content-item-title,
    #social-content-items-wrapper [data-id=legacy_support] .social-content-item-title {
        left: calc(var(--site-padding-x) * 2);
        top: calc(var(--site-padding-y) * 2);
        font-size: var(--h3);
        text-transform: uppercase;
        width: calc(100vw - var(--site-padding-x) * 6);
        text-align: left
    }

    #social-content-items-wrapper [data-id=edge] .social-content-item-note,
    #social-content-items-wrapper [data-id=sticker_1] .social-content-item-note,
    #social-content-items-wrapper [data-id=color] .social-content-item-note,
    #social-content-items-wrapper [data-id=perfect] .social-content-item-note,
    #social-content-items-wrapper [data-id=sticker_2] .social-content-item-note,
    #social-content-items-wrapper [data-id=always_on] .social-content-item-note,
    #social-content-items-wrapper [data-id="3090"] .social-content-item-note,
    #social-content-items-wrapper [data-id=drop_test] .social-content-item-note,
    #social-content-items-wrapper [data-id=legacy_support] .social-content-item-note {
        left: calc(var(--site-padding-x) * 2);
        bottom: calc(var(--site-padding-y) * 2);
        font-size: var(--sup2);
        text-transform: uppercase;
        width: calc(100vw - var(--site-padding-x) * 6);
        text-align: left;
        top: auto
    }
}

.social-content-item {
    position: relative;
    width: auto;
    height: 100%
}

@media (max-width: 767.98px) {
    .social-content-item {
        position: absolute;
        aspect-ratio: auto;
        width: calc(100vw - var(--site-padding-x) * 2);
        background-color: var(--color-black)
    }
}

.social-content-item-clipper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: width
}

@media (max-width: 767.98px) {
    .social-content-item-clipper {
        will-change: auto
    }
}

.social-content-item-inner {
    position: absolute;
    height: 100%;
    will-change: opacity
}

.social-content-item-title {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap
}

.social-content-item-note {
    position: absolute;
    left: calc(var(--px) * 50);
    bottom: calc(var(--px) * 54);
    text-transform: uppercase;
    font-size: calc(var(--px) * 25.7)
}

.social-content-item-note span {
    white-space: nowrap
}

.social-content-item-bg {
    display: block;
    width: 100%;
    height: 100%;
    will-change: transform
}

.social-content-item-bg img {
    width: 100%;
    height: auto
}

@media (max-width: 767.98px) {
    .social-content-item-bg {
        will-change: auto
    }

    .social-content-item-bg img {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.social-content-item-cover {
    position: absolute
}

.social-content-item-cover img {
    width: 100%;
    height: auto
}

#social-content-progress {
    position: absolute;
    top: calc(90% + 1.25em);
    width: 45%;
    right: .2em;
    height: 2px;
    display: flex;
    flex-direction: row;
    gap: 4px
}

.social-content-progress-item {
    height: 100%;
    background-color: var(--color-grey-brown);
    flex-grow: 1;
    transition: flex-grow .3s, background-color .3s
}

.social-content-progress-item.is-active {
    background-color: var(--color-orange);
    flex-grow: 3
}

#product:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px
}

#product-hero {
    position: relative;
    height: calc(var(--vh) * 100)
}

#product-hero-inner {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center
}

#product-hero-caption {
    left: 0;
    margin-bottom: .75em
}

#product-hero-title-wrapper {
    height: 100%;
    width: 50vw;
    aspect-ratio: 809/174;
    margin: 0 auto
}

@media (max-width: 767.98px) {
    #product-hero-title-wrapper {
        width: 80%
    }
}

#product-hero-title {
    width: 100%;
    height: 100%
}

#product-hero-options {
    display: flex;
    margin-top: 2em;
    justify-content: center;
    flex-direction: row;
    gap: 8px
}

@media (max-width: 767.98px) {
    #product-hero-options .btn {
        width: 100%;
        padding: 1.5em
    }
}

#product-details {
    position: relative;
    padding: var(--site-padding-y) 0;
    margin-top: calc(var(--vh) * 50);
    margin-bottom: calc(var(--vh) * 75);
    pointer-events: none
}

@media (max-width: 767.98px) {
    #product-details {
        text-align: center;
        width: 100%
    }
}

#product-details-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    justify-content: space-between
}

#product-details-main {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 25%
}

@media (max-width: 767.98px) {
    #product-details-main {
        width: 80%;
        margin: 0 auto;
        text-align: center
    }
}

#product-details-title-wrapper {
    height: 1em;
    margin-bottom: .5em
}

#product-details-title-wrapper span {
    position: absolute;
    display: block;
    will-change: transform
}

#product-details-title-wrapper span div {
    will-change: opacity
}

@media (max-width: 767.98px) {
    #product-details-title-wrapper span {
        text-align: center;
        width: 100%
    }
}

@media (max-width: 767.98px) {
    #product-details-title-wrapper {
        font-size: var(--h3)
    }
}

#product-details-desc-wrapper {
    height: 4em;
    opacity: .6
}

#product-details-desc-wrapper>div {
    position: absolute;
    will-change: transform
}

#product-details-desc-wrapper>div div div {
    will-change: opacity
}

#product-details-extra {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 25%
}

@media (max-width: 767.98px) {
    #product-details-extra {
        display: none
    }
}

.product-details-extra-item {
    position: relative;
    line-height: 2.5;
    height: 2.5em
}

.product-details-extra-item svg {
    position: absolute;
    height: 1em;
    top: 50%;
    transform: translateY(-50%)
}

.product-details-extra-item>div {
    position: absolute;
    top: 0;
    left: 2.5em;
    will-change: transform
}

.product-details-extra-item>div div div {
    will-change: opacity
}

#product-compare {
    text-align: center;
    width: var(--grid-span-14);
    margin: 0 auto;
    border-spacing: 0;
    padding-bottom: calc(var(--site-padding-y) * 3)
}

#product-compare h4,
#product-compare h5 {
    text-transform: none
}

#product-compare h5 {
    color: var(--color-orange);
    margin: 1em 0
}

#product-compare td {
    width: 33.33%;
    padding: calc(var(--sub1) * 1) 0
}

#product-compare .body3 {
    text-transform: none;
    color: #ffedd680
}

#product-compare .body3 span {
    display: block;
    width: var(--grid-span-3);
    margin: 0 auto
}

#product-compare tr {
    position: relative
}

#product-compare tr:nth-child(odd):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--sub1) * 3) calc(var(--sub1) * 3);
    background-color: #ffedd605;
    z-index: -1
}

#product-compare tr:nth-child(1):after,
#product-compare tr:nth-child(2):after {
    background-color: transparent
}

#product-compare div {
    color: #ffedd680;
    margin-bottom: .5em
}

@media (max-width: 767.98px) {
    #product-compare {
        display: none
    }
}

#open-weight {
    position: relative
}

#open-weight .section__inner {
    width: calc(var(--grid-span-6) + var(--grid-gap-width) * 2);
    margin: 0 auto;
    padding-top: calc(var(--site-padding-y) * 5)
}

@media (max-width: 767.98px) {
    #open-weight .section__inner {
        width: calc(var(--grid-span-4));
        padding-top: calc(var(--site-padding-y) * 4)
    }
}

#open-weight h5 {
    color: #ffedd680
}

#open-weight-header {
    display: flex;
    flex-direction: column;
    align-items: center
}

#open-weight-title {
    white-space: nowrap;
    margin-top: .4em;
    margin-bottom: .7em
}

#open-weight-title svg {
    height: 100px
}

#open-weight-title svg:nth-child(2) {
    margin-left: .3em
}

@media (max-width: 767.98px) {
    #open-weight-title svg {
        height: 40px
    }
}

#open-weight-btns-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .5em;
    flex-wrap: wrap
}

#open-weight-btns-wrapper a {
    text-decoration: none
}

.open-weight-cat {
    margin-top: 3em;
    margin-bottom: .75em
}

#open-weight-bibtex {
    background-color: #ffedd61c;
    padding: 1.5em;
    margin: 0;
    font-family: DM Mono, monospace;
    font-size: calc(18 * var(--screen-unit));
    white-space: pre-wrap
}

@media (max-width: 767.98px) {
    #open-weight-bibtex {
        font-size: calc(12 * var(--screen-unit))
    }
}

.open-weight-article span {
    color: var(--color-orange)
}

span.open-weight-article-small {
    font-size: .75em;
    color: var(--color-white)
}

#footer {
    padding-bottom: var(--site-padding-y)
}

@media (max-width: 767.98px) {
    #footer .section__inner {
        display: block
    }
}

#footer .o-dashline {
    opacity: .6
}

#footer-top {
    position: relative;
    margin-left: var(--grid-span-5);
    width: calc(var(--grid-span-width) * 11);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: calc(var(--h2) * 4)
}

@media (max-width: 767.98px) {
    #footer-top {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: center
    }
}

#footer-lusion-logo {
    --block-size: calc(var(--grid-column-width) / 3);
    position: relative;
    width: calc(var(--block-size) * 3);
    height: calc(var(--block-size) * 4)
}

#footer-lusion-logo:before,
#footer-lusion-logo:after {
    content: "";
    position: absolute;
    background: var(--color-white)
}

#footer-lusion-logo:before {
    width: calc(var(--block-size) * 1);
    height: calc(var(--block-size) * 3)
}

#footer-lusion-logo:after {
    top: calc(var(--block-size) * 3);
    left: calc(var(--block-size) * 1);
    width: calc(var(--block-size) * 2);
    height: calc(var(--block-size) * 1)
}

#footer-title {
    width: calc(var(--grid-span-8) + var(--grid-column-width) / 2)
}

#footer-title span {
    display: block;
    font-size: .8em;
    margin-bottom: .75em
}

#footer-title span:nth-child(2) {
    text-align: right
}

@media (max-width: 767.98px) {
    #footer-title {
        margin-top: 1em;
        width: 100%
    }
}

#footer-lusion-link {
    display: block;
    margin-left: calc(var(--grid-span-width) * 14);
    width: var(--grid-span-2);
    text-align: center;
    margin-bottom: calc(var(--h2) * 4);
    margin-top: 2.5em;
    text-decoration: none
}

@media (max-width: 767.98px) {
    #footer-lusion-link {
        margin-left: auto;
        margin-right: auto;
        width: var(--grid-span-width);
        margin-bottom: calc(var(--h2) * 2)
    }
}

#footer-love {
    --grid-column-start: 1;
    --grid-column-span: 3;
    display: none;
    flex-direction: column;
    padding: var(--grid-gap-width);
    border: 1px dashed rgba(255, 237, 215, .2);
    align-self: start;
    width: calc(var(--grid-span-width) * 3);
    gap: .5em
}

@media (max-width: 767.98px) {
    #footer-love {
        width: 100%;
        margin-bottom: 3em;
        font-size: calc(var(--screen-unit) * 24)
    }
}

#footer-love>div {
    width: calc(var(--grid-column-width) * 1.7);
    white-space: nowrap
}

#footer-love>div:nth-child(2) span {
    display: block
}

#footer-love span:nth-child(2) {
    text-align: right
}

#footer-love a,
#footer-love>div:nth-child(1) {
    color: var(--color-orange);
    text-decoration: none
}

#footer-love svg {
    width: .7em;
    margin-left: .35em
}

#footer-love button {
    position: relative;
    padding: 1em 0;
    border: 1px dashed var(--color-white);
    border-radius: 3em;
    background-color: transparent;
    color: var(--color-white);
    text-transform: uppercase;
    width: var(--grid-span-1);
    cursor: pointer;
    font-size: calc(var(--screen-unit) * 10);
    font-weight: 500;
    align-self: flex-end
}

@media (max-width: 767.98px) {
    #footer-love button {
        width: calc(var(--grid-column-width) * 1.5)
    }
}

#footer-love button:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 3em;
    background-color: var(--color-orange);
    opacity: 0;
    z-index: -1;
    transition: opacity 3s ease
}

#footer-love button.copied:before {
    opacity: 1;
    transition: unset
}

#footer-email {
    --grid-column-start: 5;
    --grid-column-span: 5;
    margin-left: var(--grid-column-width);
    padding-bottom: 4em
}

@media (max-width: 767.98px) {
    #footer-email {
        margin-left: 0
    }
}

#footer-newsletter-form {
    position: relative
}

#footer-email-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 1em;
    font-size: var(--body2);
    height: 3em;
    line-height: 1
}

#footer-email-input-wrapper input {
    flex: 1;
    height: 100%;
    padding-right: 3em
}

#footer-email-input-wrapper input::-moz-placeholder {
    color: var(--color-white)
}

#footer-email-input-wrapper input::placeholder {
    color: var(--color-white)
}

#footer-email-input-wrapper input[aria-invalid=true] {
    color: var(--color-error, #ff6b6b)
}

#footer-email-input-wrapper .o-dashline {
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0
}

#footer-email-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease
}

#footer-email-btn:hover {
    opacity: .7
}

#footer-email-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

#footer-email-btn[aria-busy=true] svg {
    animation: newsletter-btn-loading 1s ease-in-out infinite
}

#footer-email-btn svg {
    width: 2em;
    height: 2em
}

@keyframes newsletter-btn-loading {

    0%,
    to {
        transform: translate(0)
    }

    50% {
        transform: translate(.25em)
    }
}

#footer-newsletter-message {
    margin-top: .75em;
    font-family: var(--display-font);
    font-weight: 500;
    font-size: var(--sub2);
    text-transform: uppercase;
    height: 1.25em;
    line-height: 1.09;
    color: transparent;
    transition: color .2s ease
}

#footer-newsletter-message.is-error {
    color: var(--color-error, #ff6b6b)
}

#footer-newsletter-message.is-success {
    color: var(--color-white)
}

#footer-contact-wrapper,
#footer-social-wrapper,
#footer-extra-wrapper {
    display: flex;
    justify-content: flex-end
}

#footer-contact-wrapper {
    flex-direction: column;
    gap: 3em;
    --grid-column-start: 5;
    --grid-column-span: 4;
    margin-left: var(--grid-column-width)
}

@media (max-width: 767.98px) {
    #footer-contact-wrapper {
        margin-left: 0;
        margin-bottom: 4em
    }
}

#footer-social-wrapper {
    flex-direction: column;
    gap: 1em;
    --grid-column-start: 9;
    --grid-column-span: 2
}

.footer-item-caption {
    opacity: .6
}

@media (max-width: 767.98px) {
    .footer-item-caption {
        margin-bottom: .5em
    }
}

.footer-item-link {
    font-size: var(--default);
    text-transform: uppercase;
    color: var(--color-white);
    text-decoration: none
}

@media (max-width: 767.98px) {
    .footer-item-link {
        font-size: var(--sub1)
    }
}

#footer-extra-wrapper {
    position: absolute;
    left: var(--site-padding-x);
    bottom: 0;
    gap: 3em
}

@media (max-width: 767.98px) {
    #footer-extra-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-top: 1em;
        gap: 1em;
        left: 0
    }
}

#footer-caption {
    --grid-column-start: 12;
    --grid-column-span: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
    opacity: .6
}

@media (max-width: 767.98px) {
    #footer-caption {
        margin-top: 3em;
        text-align: left
    }

    #footer-caption .o-dashline {
        width: 100%;
        height: 1px;
        margin-bottom: 1em
    }
}

.dg.ac {
    z-index: 1000;
    pointer-events: auto
}