@font-face { font-family: 'MaisonNeue-Mono';  src: url('../fonts/MaisonNeue-Mono.woff'); src: url('../fonts/MaisonNeue-Mono.woff') format('woff'), url('../fonts/MaisonNeue-Mono.woff2') format('woff2'); font-weight: 400; font-style:normal; }
.font-default { font-family: "clarendon-text-pro",serif; }
.font-mono { font-family: "MaisonNeue-Mono",monospace; }
.fw-1 { font-weight: 100 !important }
.fw-2 { font-weight: 200 !important }
.fw-3 { font-weight: 300 !important }
.fw-4 { font-weight: 400 !important }
.fw-5 { font-weight: 500 !important }
.fw-6 { font-weight: 600 !important }
.fw-7 { font-weight: 700 !important }
.fw-8 { font-weight: 800 !important }
.fw-9 { font-weight: 900 !important }
body::before { display: none }
@media (max-width: 659px) { body::before { content:"phone"}}
@media (min-width: 660px) and (max-width: 1023px) { body::before { content:"tablet"}}
@media (min-width: 1024px) { body::before { content:"desktop"}}
@media (max-width: 659px) { .tablet-only,.phone-hide { display:none !important}}
@media (min-width: 660px) and (max-width: 1023px) { .phone-only,.tablet-hide { display:none !important}}
@media (min-width: 1024px) { .phone-only,.tablet-only,.desktop-hide { display:none !important}}
@media (max-width: 1023px) { .desktop-only { display:none !important}}
@media (pointer: coarse) { .touch-hide { display:none !important}}
@media not all and (pointer: coarse) { .touch-only { display:none !important}}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block }
body { line-height: 1 }
ol,ul { list-style: none }
blockquote,q { quotes: none }
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none }
table { border-collapse: collapse; border-spacing: 0 }
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus input:-webkit-autofill,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: white; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s }
::-moz-placeholder { color: transparent; opacity: 1 }
::placeholder { color: transparent; opacity: 1 }
:-ms-input-placeholder { color: transparent }
::-ms-input-placeholder { color: transparent }
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration { display: none }
button,[type="button"],[type="reset"],[type="submit"] { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none }
.sr-only { position: absolute; overflow: hidden; height: 1px; width: 1px; margin: -1px; padding: 0; border: none; clip: rect(0 0 0 0) }
@keyframes blink { from { opacity: 0 } to { opacity: 1 } }
@keyframes ripple { 0% { opacity: 0; transform: scale(0.5) } 35% { opacity: 1 } 65% { opacity: 1 } 100% { opacity: 0; transform: scale(1.5) } }
@keyframes dot { 0% { opacity: 0; transform: translateX(35px) } 30% { opacity: 1 }  65% { opacity: 1 }  100% { opacity: 0; transform: translateX(0) } }
@keyframes fade-out { 15% { opacity: 1 }  85% { opacity: 1 }  100% { opacity: 0 } }
@keyframes spin { from { transform: rotate(0deg) }  to { transform: rotate(359deg) } }
@keyframes pulse { 0% { transform: scale3d(1, 1, 1) }  50% { transform: scale3d(1.1, 1.1, 1.1) }  100% { transform: scale3d(1, 1, 1) } }
@keyframes up { from { transform: translateY(100%) }  to { transform: translateY(0)} }
@keyframes draw-loader { from { stroke-dashoffset: 546px }  to { stroke-dashoffset: 182px} }
@keyframes gradient { 0% { background-position: 0% 50% }  50% { background-position: 100% 50% }  100% { background-position: 0% 50% } }
:root {
    --app-height: 100svh;
    --grid-margin: 16px;
    --grid-gap: .75rem;
    --radius: 1.40625vw
}
@media (max-width: 659px) {
    :root {
        --grid-margin: 16px;
        --radius: .625rem
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    :root {
        --grid-margin: 18px
    }
}
@media (min-width: 1024px) {
    :root {
        --grid-margin: 22px
    }
}
@media (min-width: 1800px) {
    :root {
        --grid-margin: 25px;
        --grid-gap: 1rem
    }
}
*,*::before,*::after {
    box-sizing: border-box
}
html {
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll
}
@media (min-width: 1024px) {
    html {
        font-size:1.25vw
    }
}
@media (min-width: 1440px) {
    html {
        font-size:18px
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    html {
        font-size:2.15054vw
    }
}
@media (max-width: 659px) {
    html {
        font-size:4.26667vw
    }
}
body {
    font-family: "clarendon-text-pro","dnp-shuei-ymincho-std", serif;
    font-weight: 400;
    color: #dcdcdc
}
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none
}
* *:focus:not(.focus-visible) {
    outline: none
}
.is-resizing * {
    transition: none !important
}
::-moz-selection {
    background-color: #DB2F2F;
    color: #fff;
    text-shadow: none
}
::selection {
    background-color: #DB2F2F;
    color: #fff;
    text-shadow: none
}
input,textarea,button,select,a {
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}
button,a {
    cursor: pointer
}
a {
    text-decoration: none;
    color: inherit
}
h1,h2,h3,h4,h5,h6 {
    text-wrap: balance
}
h1 {
    margin: unset
}
p {
    max-width: 75ch;
    line-height: 1.5;
    letter-spacing: .01em
}
#content {
    transition: opacity 0.6s 0.6s
}
body.is-not-ready .s-trigger,body.is-not-ready .s-header__nav,body.is-not-ready .s-header__socials,body.is-not-ready .m-work,body.is-not-ready #contact,body.is-not-ready #content {
    opacity: 0
}
body.is-not-ready #content {
    transform: translateY(100px)
}
#content:has([data-gfx]),#content:has([data-gfx]) ~ #contact {
    pointer-events: none
}
#content:has([data-gfx]) a,#content:has([data-gfx]) label,#content:has([data-gfx]) button,#content:has([data-gfx]) ~ #contact a,#content:has([data-gfx]) ~ #contact label,#content:has([data-gfx]) ~ #contact button {
    pointer-events: auto
}
.local #content:has([data-gfx]),.local #content:has([data-gfx]) ~ #contact {
    pointer-events: all
}
.wrapper {
    min-height: 100svh;
    overflow: hidden
}
article[data-page] {
    position: relative;
    min-height: 100svh
}
[aria-hidden="true"] {
    visibility: hidden
}
@media (min-width: 1024px) {
    [text-indent] {
        text-indent:2rem
    }
}
.grid-wrap,.wrap {
    margin-inline:var(--grid-margin)}
.grid-wrap,.grid {
    --grid-column-start: auto;
    --grid-columns-span: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr))
}
@media (max-width: 659px) {
    .grid-wrap,.grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: var(--grid-gap)
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .grid-wrap,.grid {
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap: var(--grid-gap)
    }
}
@media (min-width: 1024px) {
    .grid-wrap,.grid {
        grid-template-columns:repeat(14, minmax(0, 1fr));
        gap: var(--grid-gap)
    }
}
@media (min-width: 1800px) {
    .grid-wrap,.grid {
        grid-template-columns:repeat(14, minmax(0, 1fr));
        gap: var(--grid-gap)
    }
}
.grid-wrap--no-offset,.grid--no-offset {
    margin-left: 0;
    margin-right: 0
}
.grid-wrap--no-gutter,.grid--no-gutter {
    -moz-column-gap: 0;
    column-gap: 0
}
@media (min-width: 1024px) {
    .grid-wrap--row-start div,.grid--row-start div {
        grid-row-start:1
    }
}
@media (min-width: 1024px) {
    [class*="col-span-"] {
        grid-column:var(--grid-column-start)/span var(--grid-columns-span)
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    [class*="col-span-"] {
        grid-column:var(--grid-column-start)/span var(--grid-columns-span)
    }
}
@media (max-width: 659px) {
    [class*="col-span-"] {
        grid-column:var(--grid-column-start)/span var(--grid-columns-span)
    }
}
@media (min-width: 1024px) {
    .col-span-1 {
        --grid-columns-span: 1
    }
    .col-start-1 {
        --grid-column-start: 1
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-1 {
        --grid-columns-span: 1
    }
    .col-start-1 {
        --grid-column-start: 1
    }
}
@media (max-width: 659px) {
    .col-span-1 {
        --grid-columns-span: 1
    }
    .col-start-1 {
        --grid-column-start: 1
    }
}
@media (min-width: 1024px) {
    .col-span-2 {
        --grid-columns-span: 2
    }
    .col-start-2 {
        --grid-column-start: 2
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-2 {
        --grid-columns-span:
    }
    .col-start-2 {
        --grid-column-start:
    }
}
@media (max-width: 659px) {
    .col-span-2 {
        --grid-columns-span: 1
    }
    .col-start-2 {
        --grid-column-start: 1
    }
}
@media (min-width: 1024px) {
    .col-span-3 {
        --grid-columns-span: 3
    }
    .col-start-3 {
        --grid-column-start: 3
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-3 {
        --grid-columns-span:
    }
    .col-start-3 {
        --grid-column-start:
    }
}
@media (max-width: 659px) {
    .col-span-3 {
        --grid-columns-span: 2
    }
    .col-start-3 {
        --grid-column-start: 2
    }
}
@media (min-width: 1024px) {
    .col-span-4 {
        --grid-columns-span: 4
    }
    .col-start-4 {
        --grid-column-start: 4
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-4 {
        --grid-columns-span: 2
    }
    .col-start-4 {
        --grid-column-start: 2
    }
}
@media (max-width: 659px) {
    .col-span-4 {
        --grid-columns-span: 2
    }
    .col-start-4 {
        --grid-column-start: 2
    }
}
@media (min-width: 1024px) {
    .col-span-5 {
        --grid-columns-span: 5
    }
    .col-start-5 {
        --grid-column-start: 5
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-5 {
        --grid-columns-span: 2
    }
    .col-start-5 {
        --grid-column-start: 2
    }
}
@media (max-width: 659px) {
    .col-span-5 {
        --grid-columns-span: 2
    }
    .col-start-5 {
        --grid-column-start: 2
    }
}
@media (min-width: 1024px) {
    .col-span-6 {
        --grid-columns-span: 6
    }
    .col-start-6 {
        --grid-column-start: 6
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-6 {
        --grid-columns-span:
    }
    .col-start-6 {
        --grid-column-start:
    }
}
@media (max-width: 659px) {
    .col-span-6 {
        --grid-columns-span:
    }
    .col-start-6 {
        --grid-column-start:
    }
}
@media (min-width: 1024px) {
    .col-span-7 {
        --grid-columns-span: 7
    }
    .col-start-7 {
        --grid-column-start: 7
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-7 {
        --grid-columns-span: 3
    }
    .col-start-7 {
        --grid-column-start: 3
    }
}
@media (max-width: 659px) {
    .col-span-7 {
        --grid-columns-span: 2
    }
    .col-start-7 {
        --grid-column-start: 2
    }
}
@media (min-width: 1024px) {
    .col-span-8 {
        --grid-columns-span: 8
    }
    .col-start-8 {
        --grid-column-start: 8
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-8 {
        --grid-columns-span: 4
    }
    .col-start-8 {
        --grid-column-start: 4
    }
}
@media (max-width: 659px) {
    .col-span-8 {
        --grid-columns-span: 2
    }
    .col-start-8 {
        --grid-column-start: 2
    }
}
@media (min-width: 1024px) {
    .col-span-9 {
        --grid-columns-span: 9
    }
    .col-start-9 {
        --grid-column-start: 9
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-9 {
        --grid-columns-span:
    }
    .col-start-9 {
        --grid-column-start:
    }
}
@media (max-width: 659px) {
    .col-span-9 {
        --grid-columns-span:
    }
    .col-start-9 {
        --grid-column-start:
    }
}
@media (min-width: 1024px) {
    .col-span-10 {
        --grid-columns-span: 10
    }
    .col-start-10 {
        --grid-column-start: 10
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-10 {
        --grid-columns-span: 4
    }
    .col-start-10 {
        --grid-column-start: 4
    }
}
@media (max-width: 659px) {
    .col-span-10 {
        --grid-columns-span: 2
    }
    .col-start-10 {
        --grid-column-start: 2
    }
}
@media (min-width: 1024px) {
    .col-span-11 {
        --grid-columns-span: 11
    }
    .col-start-11 {
        --grid-column-start: 11
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-11 {
        --grid-columns-span:
    }
    .col-start-11 {
        --grid-column-start:
    }
}
@media (max-width: 659px) {
    .col-span-11 {
        --grid-columns-span:
    }
    .col-start-11 {
        --grid-column-start:
    }
}
@media (min-width: 1024px) {
    .col-span-12 {
        --grid-columns-span: 12
    }
    .col-start-12 {
        --grid-column-start: 12
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-12 {
        --grid-columns-span:
    }
    .col-start-12 {
        --grid-column-start:
    }
}
@media (max-width: 659px) {
    .col-span-12 {
        --grid-columns-span: 2
    }
    .col-start-12 {
        --grid-column-start: 2
    }
}
@media (min-width: 1024px) {
    .col-span-13 {
        --grid-columns-span: 13
    }
    .col-start-13 {
        --grid-column-start: 13
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-13 {
        --grid-columns-span:
    }
    .col-start-13 {
        --grid-column-start:
    }
}
@media (max-width: 659px) {
    .col-span-13 {
        --grid-columns-span:
    }
    .col-start-13 {
        --grid-column-start:
    }
}
@media (min-width: 1024px) {
    .col-span-14 {
        --grid-columns-span: 14
    }
    .col-start-14 {
        --grid-column-start: 14
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .col-span-14 {
        --grid-columns-span:
    }
    .col-start-14 {
        --grid-column-start:
    }
}
@media (max-width: 659px) {
    .col-span-14 {
        --grid-columns-span:
    }
    .col-start-14 {
        --grid-column-start:
    }
}
.accessibility *,.accessibility *::before,.accessibility *::after {
    transition: none !important
}
.accessibility a:focus,.accessibility label:focus,.accessibility label:focus-within,.accessibility button:focus,.accessibility input:focus-visible+label {
    color: yellow !important;
    background: black !important;
    outline: 1px solid black;
    border-radius: .3125rem;
    outline-offset: .3125rem;
    opacity: 1
}
@media (min-width: 1024px) {
    [data-text] {
        height:inherit;
        line-height: inherit;
        position: relative;
        will-change: transform
    }
    [data-text],[data-text]::after {
        display: inline-flex;
        align-items: center
    }
    [data-text]::after {
        content: attr(data-text);
        position: absolute;
        left: 0;
        transform: translateY(100%);
        padding-inline:inherit}
    [data-text] span {
        position: relative
    }
    [data-text].is-animating span,[data-text].is-animating::after {
        transition: transform 0.6s cubic-bezier(0.5, 0, 0.2, 1),opacity 0.6s cubic-bezier(0.5, 0, 0.2, 1) !important
    }
    [data-text].is-animating span {
        transform: translateY(-100%)
    }
    [data-text].is-animating::after {
        transform: translateY(0)
    }
    button[data-cssanimate],a[data-cssanimate] {
        display: inline-flex;
        position: relative;
        overflow-y: clip
    }
}
[data-scroll="quote"] .quote__content>div,[data-scroll="quote"] .quote__content>span,[data-scroll="splitText"]>div,[data-scroll="splitText"]>span {
    display: inline-block;
    vertical-align: top;
    overflow-y: clip;
    padding-block:0.12em;margin-block:-0.24em}
[data-scroll="quote"] .quote__content span>span,[data-scroll="splitText"]>span>span {
    display: inline-block;
    vertical-align: top;
    position: relative;
    backface-visibility: hidden
}
.svg-quote path {
    fill: currentColor
}
.quote--big .quote__content,.m-hero__text,.s-footer__lead {
    font-size: 56px;
    font-size: 3.5rem;
    line-height: .92857;
    letter-spacing: -0.04em;
    font-weight: 800
}
@media (min-width: 660px) and (max-width: 1023px) {
    .quote--big .quote__content,.m-hero__text,.s-footer__lead {
        font-size:28px;
        font-size: 1.75rem;
        line-height: .92857
    }
}
@media (max-width: 659px) {
    .quote--big .quote__content,.m-hero__text,.s-footer__lead {
        font-size:36px;
        font-size: 2.25rem;
        line-height: .91667
    }
}
.m-work__name div:last-child,.m-work__detail div:last-child {
    line-height: 1.22222;
    font-weight: 300
}
.quote__caption {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.0625;
    letter-spacing: -0.02em;
    font-weight: 300
}
@media (max-width: 659px) {
    .quote__caption {
        font-size:15px;
        font-size: .9375rem;
        line-height: 1.06667
    }
}
.c-header,.m-work__name div:first-child,.m-work__detail div:first-child {
    font-size: 15px;
    font-size: .9375rem;
    line-height: 1.06667;
    letter-spacing: -0.02em;
    font-weight: 300
}
@media (max-width: 1023px) {
    .c-header,.m-work__name div:first-child,.m-work__detail div:first-child {
        font-size:13px;
        font-size: .8125rem;
        line-height: 1.07692
    }
}
.m-work__name div.font-mono,
.m-work__detail div.font-mono {
    font-size: 12px;
    font-size: .75rem
}
.quote svg {
    display: block;
    width: 3.1875rem;
    margin-bottom: 1rem
}
.quote--big .quote svg svg {
    margin-bottom: .625rem
}
@media (max-width: 659px) {
    .quote svg {
        margin-bottom:.4375rem;
        width: 2.4375rem
    }
}
.quote__content {
    font-size: 51px;
    font-size: 3.1875rem;
    line-height: .86275;
    font-weight: 800;
    letter-spacing: -0.04em
}
@media (max-width: 1023px) {
    .quote__content {
        font-size:26px;
        font-size: 1.625rem;
        line-height: .86
    }
}
@media (max-width: 659px) {
    .quote__content {
        max-width:18ch
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .quote--big .quote__content {
        max-width:27ch
    }
}
@media (max-width: 659px) {
    .quote--big .quote__content {
        font-size:26px;
        font-size: 1.625rem;
        line-height: .86;
        max-width: 20ch
    }
}
.quote__footer {
    position: relative;
    margin-top: .625rem
}
.quote__caption {
    display: inline-block;
    padding-left: 2.625rem
}
.quote__caption::before {
    content: "";
    position: absolute;
    top: .5rem;
    left: 0;
    height: 1px;
    width: 2.125rem;
    background: currentColor
}
.picture {
    position: relative;
    display: flex;
    flex-direction: column
}
.picture img,.picture video {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    /* border-radius: var(--radius) */
}
.c-header {
    padding-top: .4375rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem
}
@media (max-width: 1023px) {
    .c-header {
        margin-top:1.5rem;
        padding-top: .5rem;
        margin-bottom: 1.5rem;
    }
}
.m-hero {
    height: 100svh;
    padding-bottom: 1.25rem
}
.s-bg__wrap {
    height: 77.5svh;
    padding-bottom: 1.25rem
}
@media (min-width: 1024px) {
    .m-hero,.s-bg__wrap {
        max-height: 66.666vw
    }
}
@media (min-width: 1024px) {
    .s-bg__wrap {
        min-height: 38.375rem
    }
}
@media (max-width: 1023px) {
    #a-01 {
        height: 43.75rem !important;
        overflow: hidden
    }
}
@media (max-width: 1023px) {
    .m-hero,.s-bg__wrap {
        height:calc(var(--app-height) - var(--radius) * 2);
        padding-bottom: 1.125rem
    }
}
.module {
    position: relative;
    z-index: 0
}
.module:not(:last-child) {
    min-height: 43.75rem
}
@media (max-width: 1023px) {
    .module:not(:last-child).module--hero {
        min-height:43.75rem
    }
    .module--hero .m-hero {
        height: auto
    }
}
@media (max-width: 1023px) {
    .content:not(.is-home) .module:not(:last-child).module--quote {
        min-height:auto
    }
}
.module--work {
    margin-top: calc(-1 * var(--radius));
    z-index: 1
}
.module--work.has-next-sibling-work {
    margin-bottom: calc(-1 * var(--radius))
}
.module[data-observe]:not(:first-child) {
    margin-top: calc(-1 * var(--radius) - 3rem)
}
.module__wrap {
    color: #dcdcdc
}
.module--gray .module__wrap {
    background-color: #E3E1DE
}
.module--gray .module__wrap {
    color: #333
}
.has-next-sibling-work .module__wrap,.module--hero:has(+.module--default) .module__wrap,.module--quote:has(+.module--default) .module__wrap {
    padding-bottom: calc(var(--radius) + 5rem)
}
[data-observe] .module__wrap {
    transition: transform 1s cubic-bezier(0.5, 0, 0.2, 1) 0.2s
}
body.is-incoming [data-observe] .module__wrap {
    transition-delay: 0.4s;
    transition-duration: 0.8s
}
[data-observe].is-below .module__wrap {
    transform: translateY(5rem);
    transition: none
}
body.is-not-ready .module--hero+.module .module__wrap {
    transform: translateY(calc(1.6 * 5rem))
}
.module--work .module__wrap {
    border-radius: var(--radius);
    margin-top: -5rem
}
.m-hero {
    padding-top: 4.875rem;
    position: relative
}
@media (min-width: 660px) and (max-width: 1023px) {
    .m-hero {
        grid-template-rows:1fr auto
    }
}
@media (max-width: 1023px) {
    .module--hero:has(+.module--default) .m-hero {
        display:flex
    }
}
.m-hero__text {
    grid-column: 1 / span 6;
    margin-top: auto;
    place-self: flex-end flex-end;
    width: 100%;
    fill:#dcdcdc
}
.m-hero__text--left {
    grid-column: 3 / span 2;
}
.m-hero__text--right {
    grid-column: 11 / span 2;
}
@media (min-width: 1024px) {
    .m-hero__text {
        margin-bottom:-0.12em
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .m-hero__text {
        font-size:56px;
        font-size: 3.5rem;
        line-height: .92857;
        grid-column: 1 / span 3;
        margin-top: 8svh;
        margin-bottom: 6svh;
    }
    .m-hero__text--left {
        grid-column: 1 / span 1;
    }
    .m-hero__text--right {
        grid-column: 4 / span 1;
    }
}
@media (max-width: 659px) {
    .m-hero__text {
        grid-column:1 / span 2;
        margin-right: auto;
        max-width: 10ch;
        margin-top: 8svh;
        margin-bottom: 6svh;
    }
    .m-hero__text--left {
        grid-column: 1 / span 1;
    }
    .m-hero__text--right {
        grid-column: 2 / span 1;
    }
}
.module--hero:has(+.module--default) .m-hero__text {
    grid-column: 1 / span 5
}
@media (min-width: 660px) and (max-width: 1023px) {
    .module--hero:has(+.module--default) .m-hero__text {
        margin-bottom:0;
        max-width: 14ch
    }
}
body.is-not-ready .m-hero__text {
    opacity: 0
}
.m-hero__scroll {
    font-size: 12px;
    font-size: .75rem;
    line-height: 1.4;
    place-self: flex-end flex-end;
    margin-left: auto;
    white-space: nowrap;
    letter-spacing: -0.02em;
    height: auto;
    grid-column: 1 / 1;
    transition: transform 0s cubic-bezier(0.5, 0, 0.2, 1),opacity 0.4s
}
@media (min-width: 660px) and (max-width: 1023px) {
    .m-hero__scroll {
        grid-column:1 / span 2
    }
}
@media (max-width: 659px) {
    .m-hero__scroll {
        grid-column:1 / span 1
    }
}
.m-hero__scroll span {
    margin-right: .125rem
}
body.is-incoming .m-hero__scroll {
    transition-duration: 0.7s, 0.7s;
    transition-delay: 1.1s, 1.1s
}
body.is-not-ready .m-hero__scroll {
    opacity: 0;
    transform: translateY(.625rem)
}
body.is-scrolled .m-hero__scroll {
    opacity: 0;
    transform: translateY(1.25rem);
    transition-duration: 0.4s
}
.m-work {
    position: relative;
    overflow: hidden;
    padding-bottom: 1.5rem;
    transition: opacity 0.6s 1s
}
.module.has-next-sibling-work .m-work {
    padding-bottom: 3.75rem
}
.m-work__header {
    grid-template-rows: auto
}
@media (max-width: 659px) {
    .m-work__header {
        gap: 1.875rem .625rem;
    }
}
[data-observe] .m-work__header {
    transition: transform 1s cubic-bezier(0.5, 0, 0.2, 1) 0.1s,opacity 0.7s 0.6s
}
body.is-incoming [data-observe] .m-work__header {
    transition-delay: 0.6s;
    transition-duration: 0.7s
}
body.is-not-ready .m-work__header,[data-observe].is-below .m-work__header {
    transition: none;
    transform: translateY(2.5rem)
}
body.is-not-ready .m-work__header {
    opacity: 0
}
.m-work__name {
    grid-column: 1 / span 8;
    grid-row: 1
}
@media (min-width: 660px) and (max-width: 1023px) {
    .m-work__name {
        grid-column-end:span 2
    }
}
@media (max-width: 659px) {
    .m-work__name {
        grid-column:1 / span 2;
    }
}
.m-work__name div:last-child {
    display: block
}
.m-work__name h2 {
    margin:0 0 1.625rem;
    letter-spacing: -0.01em;
    font-size: 65px;
    font-size: 3.5625rem;
    font-weight: 400;
    line-height: .9;
    overflow: hidden;
}
@media (min-width: 660px) and (max-width: 1023px) {
    .m-work__name h2 {
        font-size:36px;
        font-size: 2.25rem
    }
}
@media (max-width: 659px) {
    .m-work__name h2 {
        font-size:36px;
        font-size: 2.25rem;
        margin-bottom: 1.25rem
    }
}
.m-work__name h4 {
    margin:0 0 1rem;
}
.m-work__name span {
    transition: transform 1s cubic-bezier(0.5, 0, 0.2, 1);
    display: inline-block
}
.m-work__name span:nth-child(2) {
    transition-delay: 0.1s
}
.m-work__name [data-observe].is-below span {
    transform: translateY(100%)
}
.m-work__name i {
    font-size: 0;
    width: 8.875rem;
    display: inline-block;
    position: relative
}
@media (min-width: 660px) and (max-width: 1023px) {
    .m-work__name i {
        width:5.0625rem
    }
}
@media (max-width: 659px) {
    .m-work__name i {
        width:1.6875rem
    }
}
.m-work__name i::after {
    content: "";
    position: absolute;
    height: 20.625rem;
    background: currentColor;
    width: 1px;
    bottom: 1px;
    left: .625rem;
    transform-origin: left bottom;
    transform: rotate(21deg)
}
@media (max-width: 659px) {
    .m-work__name i::after {
        height:3.75rem;
        bottom: auto;
        top: 0;
        left: .1875rem;
        transform: rotate(18deg)
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .m-work__name i::after {
        height:11.5rem;
        bottom: auto;
        top: -.4375rem;
        left: .4375rem;
        transform: rotate(21.2deg)
    }
}
.m-work__name div:first-child,.m-work__detail div:first-child {
    min-height: 2.25rem
}
@media (max-width: 1023px) {
    .m-work__name div:first-child,.m-work__detail div:first-child {
        min-height:1.6875rem
    }
}
.m-work__detail {
    grid-row: 1 / 1;
    grid-column-end: span 3
}
@media (max-width: 659px) {
    .m-work__detail {
        grid-column:span 1 / span 1;
        grid-row: auto;
        padding-left: .25rem;
        margin-bottom: 1.0625rem
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .m-work__detail {
        grid-column-end:span 1;
        grid-row: auto
    }
    .m-work__detail:nth-child(odd) {
        padding-left: 2.5rem
    }
    .m-work__detail:nth-child(even) {
        padding-left: .5rem
    }
}
.m-work__detail span {
    display: inline-block;
    transition: opacity 0.7s,transform 0.7s cubic-bezier(0.5, 0, 0.2, 1)
}
.m-work__detail:nth-child(3) span:nth-of-type(1) {
    transition-delay: .2s,.2s
}
.m-work__detail:nth-child(3) span:nth-of-type(2) {
    transition-delay: .3s,.3s
}
.m-work__detail:nth-child(3) span:nth-of-type(3) {
    transition-delay: .4s,.4s
}
.m-work__detail:nth-child(3) span:nth-of-type(4) {
    transition-delay: .5s,.5s
}
.m-work__detail:nth-child(3) span:nth-of-type(5) {
    transition-delay: .6s,.6s
}
.m-work__detail:nth-child(3) span:nth-of-type(6) {
    transition-delay: .7s,.7s
}
.m-work__detail:nth-child(4) span:nth-of-type(1) {
    transition-delay: .3s,.3s
}
.m-work__detail:nth-child(4) span:nth-of-type(2) {
    transition-delay: .4s,.4s
}
.m-work__detail:nth-child(4) span:nth-of-type(3) {
    transition-delay: .5s,.5s
}
.m-work__detail:nth-child(4) span:nth-of-type(4) {
    transition-delay: .6s,.6s
}
.m-work__detail:nth-child(4) span:nth-of-type(5) {
    transition-delay: .7s,.7s
}
.m-work__detail:nth-child(4) span:nth-of-type(6) {
    transition-delay: .8s,.8s
}
.m-work__detail:nth-child(5) span:nth-of-type(1) {
    transition-delay: .4s,.4s
}
.m-work__detail:nth-child(5) span:nth-of-type(2) {
    transition-delay: .5s,.5s
}
.m-work__detail:nth-child(5) span:nth-of-type(3) {
    transition-delay: .6s,.6s
}
.m-work__detail:nth-child(5) span:nth-of-type(4) {
    transition-delay: .7s,.7s
}
.m-work__detail:nth-child(5) span:nth-of-type(5) {
    transition-delay: .8s,.8s
}
.m-work__detail:nth-child(5) span:nth-of-type(6) {
    transition-delay: .9s,.9s
}
.m-work__detail[data-observe].is-below span {
    transition: none !important;
    transform: translateY(.625rem);
    opacity: 0
}
.m-work__tiles {
    margin-top: 4rem;
    position: relative
}
@media (max-width: 659px) {
    .m-work__tiles {
        margin-top:3rem
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .m-work__tiles {
        margin-top:2.25rem
    }
}
.m-work__tile {
    /* border-radius: var(--radius) */
    align-items: center;
    display: flex;
    justify-content: center;
}
.m-work__tile--video > .picture {
    width: 90%;
    aspect-ratio: 144 / 90;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    overflow: hidden;
}
.m-work__tile--video > .picture.youtube {
    aspect-ratio: 16 / 9;
}
.m-work__tile--picture-wide > .picture.poster {
    width: 90%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .m-work__tile--video {
        grid-column-end:span 8
    }
}
.m-work__tiles-cols {
    display:flex;
    align-items: center;
    width:80%;
    height:100%;
    margin:0 auto;
    gap: 1.5rem;
}
@media (max-width: 1023px) {
    .m-work__tiles-cols {
        width: 88%;
        gap: 0.85rem;
    }
}
.m-work__tiles-cols .picture {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1)
}
.m-work__tile--picture {
    aspect-ratio: 1 / 1;
    overflow: hidden
}
@media (min-width: 1024px) {
    .m-work__tile--picture {
        grid-column-end:span 4
    }
}
.m-work__tile--picture-wide {
    aspect-ratio: 526 / 340;
    overflow: hidden
}
@media (min-width: 1024px) {
    .m-work__tile--picture-wide {
        grid-column-end:span 6
    }
}
@media (max-width: 1023px) {
    .m-work__tile--screenshot,.m-work__tile--video,.m-work__tile--picture-wide {
        grid-column-end:span 2
    }
}
.m-work__tile:not(.m-work__tile--quote):not(.m-work__tile--quote-small):not(.m-work__tile--description):not(.m-work__tile--link):not(.m-work__tile--gap):not(.m-work__tile--gap-wide) {
    background: rgba(0,0,0,0.05)
}
.m-work__tile[data-observe] {
    transition: transform 0.8s cubic-bezier(0.5, 0, 0.2, 1)
}
.m-work__tile[data-observe] img,.m-work__tile[data-observe] video {
    transition: opacity 0.8s 0.2s
}
.m-work__tile[data-observe]:not(.m-work__tile--quote):not(.m-work__tile--quote-small):not(.m-work__tile--description):not(.m-work__tile--link).is-below {
    transition: none;
}
.m-work__tile[data-observe]:not(.m-work__tile--quote):not(.m-work__tile--quote-small):not(.m-work__tile--description):not(.m-work__tile--link).is-below img,.m-work__tile[data-observe]:not(.m-work__tile--quote):not(.m-work__tile--quote-small):not(.m-work__tile--description):not(.m-work__tile--link).is-below video {
    transition: none;
    opacity: 0
}
.m-work__tiles--slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--grid-gap);
    padding-inline: var(--grid-margin, 16px);
    scroll-padding-inline-start: var(--grid-margin, 16px)
}
.m-work__tiles--slider::-webkit-scrollbar {
    display: none
}
.m-work__tiles--slider .m-work__tile {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 38vw
}
.m-work__tiles--slider .m-work__tile--picture-wide,
.m-work__tiles--slider .m-work__tile--screenshot,
.m-work__tiles--slider .m-work__tile--video,
.m-work__tiles--slider .m-work__tile--video-sp {
    width: 56vw
}
@media (max-width: 1023px) {
    .m-work__tiles--slider .m-work__tile {
        width: 62vw
    }
    .m-work__tiles--slider .m-work__tile--picture-wide,
    .m-work__tiles--slider .m-work__tile--screenshot,
    .m-work__tiles--slider .m-work__tile--video,
    .m-work__tiles--slider .m-work__tile--video-sp {
        width: 92vw
    }
}
.m-work__slider-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem var(--grid-margin, 16px) 0
}
.m-work__slider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: 1px solid rgba(51, 51, 51, .3);
    border-radius: 50%;
    cursor: pointer;
    color: #333;
    transition: border-color .2s, opacity .2s;
    flex-shrink: 0
}
.m-work__slider-btn:hover {
    border-color: #333
}
.m-work__slider-btn:disabled {
    opacity: .25;
    cursor: default
}
.m-work__slider-btn svg {
    width: 1rem;
    height: 1rem
}
.m-work__slider-track {
    flex: 1;
    height: 2px;
    background: rgba(51, 51, 51, .2);
    border-radius: 1px;
    position: relative;
    overflow: hidden
}
.m-work__slider-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #333;
    border-radius: 1px;
    transition: width .1s, left .1s
}
.m-quote {
    overflow: hidden
}
.m-quote__grid {
    padding-top: 2.5rem;
    padding-bottom: 3.75rem
}
@media (max-width: 659px) {
    .m-quote__grid {
        padding-top:1.875rem;
        padding-bottom: 4.875rem
    }
}
.m-quote__grid .quote {
    grid-column-end: span 8;
    max-width: 70ch
}
.m-quote__grid:has(+.m-quote__link) {
    padding-bottom: 0
}
.m-profile {
    padding-top: 2.5rem;
    padding-bottom: 5rem
}
@media (max-width: 659px) {
    .m-profile {
        padding-top:1.875rem;
        padding-bottom: 3.75rem
    }
}
.m-profile__row {
    display: flex;
    align-items: baseline;
    padding-block: 1rem;
    gap: 3rem;
    transition: opacity 0.7s,transform 0.7s cubic-bezier(0.5, 0, 0.2, 1)
}
.m-profile__row[data-observe].is-below {
    opacity: 0;
    transform: translateY(.625rem)
}
body.is-not-ready .m-profile__row {
    opacity: 0
}
.m-profile__label {
    flex: 0 0 7em;
    font-size: .75rem
}
.m-profile__value {
    flex: 1;
    font-size: .9375rem;
    font-weight: 300;
    line-height: 1.22222
}
.m-services__grid {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
    align-items: start;
    row-gap: 2.5rem
}
@media (max-width: 659px) {
    .m-services__grid {
        padding-top:1.875rem;
        padding-bottom: 3.75rem;
        row-gap: 1.875rem
    }
}
.m-services__item {
    grid-column: span 4;
    border-top: 1px solid currentColor;
    padding-top: 1.25rem;
    transition: opacity 0.7s,transform 0.7s cubic-bezier(0.5, 0, 0.2, 1)
}
@media (max-width: 659px) {
    .m-services__item {
        grid-column:span 2
    }
}
.m-services__item[data-observe].is-below {
    opacity: 0;
    transform: translateY(.625rem)
}
body.is-not-ready .m-services__item {
    opacity: 0
}
.m-services__item .font-mono {
    display: block;
    margin-bottom: 1.375rem
}
.m-services__item h3 {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
    min-height: 5.025rem;
    margin: 0 0 1rem;
    letter-spacing: -0.02em
}
@media (max-width: 659px) {
    .m-services__item h3 {
        font-size:1.125rem;
        min-height: unset;
    }
}
.m-services__item p {
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.5
}
.m-stats__grid {
    justify-content: space-between;
    margin-block:3.75rem 0
}
@media (max-width: 659px) {
    .m-stats__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-block:2.125rem;
        gap: 1.25rem
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .m-stats__grid {
        grid-row-gap:3.75rem
    }
}
@media (max-width: 659px) {
    .m-text__header {
        margin-top:2rem
    }
}
.s-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100lvh + 2px);
    backface-visibility: hidden
}
.s-bg__wrap {
    position: relative;
    z-index: 1;
    align-items: flex-end
}
.s-bg__svg {
    grid-column: 9 / span 6;
    position: relative;
    align-self: stretch;
    transition: opacity 0.8s cubic-bezier(0.5, 0, 0.2, 1),translate 0.8s cubic-bezier(0.5, 0, 0.2, 1);
    --color: #333;
    --bg-color: #d0474e
}
body.is-not-ready .s-bg__svg {
    opacity: 0;
    translate: 0 100px
}
@media (min-width: 660px) and (max-width: 1023px) {
    .s-bg__svg {
        grid-column:3 / span 2
    }
}
@media (max-width: 659px) {
    .s-bg__svg {
        grid-column:2 / span 1
    }
}
.s-bg__svg svg {
    position: absolute;
    bottom: 0
}
.s-bg__svg svg,.s-bg__svg canvas {
    transition: opacity 0.3s
}
.s-bg__svg canvas {
    position: absolute;
    bottom: 0;
    display: none !important
}
body:not(.gfx-on) .s-bg__svg canvas {
    opacity: 0
}
.s-bg__svg canvas+svg {
    opacity: 0;
    pointer-events: none
}
.debug .s-bg__svg canvas+svg {
    opacity: 1;
    z-index: 100
}
.debug .s-bg__svg canvas+svg * {
    fill: none;
    stroke: cyan;
    stroke-width: 2px
}
body:not(.gfx-on) .s-bg__svg canvas+svg {
    opacity: 1
}
@media (max-width: 659px) {
    body.is-scrolled-to-footer .s-bg__svg canvas,body.is-scrolled-to-footer .s-bg__svg svg {
        opacity:0 !important
    }
}
.s-bg > .svg-h {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(38vw, 60svh);
    height: min(38vw, 60svh);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s
}
@media (max-width: 1023px) {
    .s-bg > .svg-h {
        width: min(100vw, 31.25rem);
        height: min(100vw, 31.25rem)
    }
}
.debug .s-bg > .svg-h {
    opacity: 1;
    z-index: 100
}
.debug .s-bg > .svg-h * {
    fill: none;
    stroke: cyan;
    stroke-width: 2px
}
body:not(.gfx-on) .s-bg > .svg-h {
    opacity: 1
}
.s-footer {
    z-index: 2;
    position: relative;
    height: 6.25rem
}
.s-footer:has(.s-footer__cta) {
    height: 99svh
}
@media (max-width: 1023px) {
    .s-footer {
        height:5.25rem
    }
}
.s-footer__cta {
    height: 100%;
    align-items: flex-end;
    padding-bottom: 9.25rem
}
@media (max-width: 659px) {
    .s-footer__cta {
        padding-bottom:16.25rem
    }
}
@media (min-width: 660px) and (max-width: 1023px) {
    .s-footer__cta {
        padding-bottom:37.5rem
    }
}
.s-footer__main {
    position: relative;
    width: -moz-fit-content;
    width: fit-content
}
.s-footer__lead {
    letter-spacing: -0.044em;
    max-width: 18ch
}
@media (max-width: 659px) {
    .s-footer__lead {
        font-size:26px;
        font-size: 1.625rem;
        line-height: .86;
        max-width: 20ch
    }
}
.s-footer__lead a {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    padding-bottom: 0.1em
}
.s-footer__lead a::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 1px;
    background-color: currentColor;
    transition: translate 0s,scale 0.3s cubic-bezier(0.5, 0, 0.2, 1);
    transform-origin: left;
    scale: 1 1
}
.accessibility .s-footer__lead a:focus::after {
    transition: translate 0.3s cubic-bezier(0.5, 0, 0.2, 1) 0s,scale 0s 0.3s;
    translate: 100% 0;
    scale: 0 1
}
.s-footer__bottom {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 3.125rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: .875rem
}
@media (max-width: 1023px) {
    .s-footer__bottom {
        bottom:1.875rem;
        padding-bottom: .5rem
    }
}
.s-footer__colophon {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: .94444;
    white-space: nowrap
}
@media (max-width: 1023px) {
    .s-footer__colophon {
        font-size:15px;
        font-size: .9375rem;
        line-height: 1.07;
        letter-spacing: -0.02em
    }
}
.s-header {
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding:0 var(--grid-margin);
    align-items: flex-start
}
.s-header__logo {
    grid-column: 1 / span 8
}
@media (max-width: 659px) {
    .s-header__logo {
        padding-top: 0;
        margin-left: 0;
        grid-column: auto
    }
}
.s-header__logo svg {
    margin-top: 1.75rem;
    width: 7.5rem;
    height: auto;
    fill: #dcdcdc
}
@media (max-width: 659px) {
    .s-header__logo svg {
        width: 6rem
    }
}
.s-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: #000;
    transition: transform 1.2s cubic-bezier(0.5, 0, 0.2, 1);
    transform-origin: left;
    backface-visibility: hidden
}
body.is-not-ready .s-header::before {
    transform: scaleX(0)
}
.s-header:has(.s-header__nav-item:first-child:last-child) {
    display: flex;
    justify-content: space-between;
    gap: 0
}
.s-header__nav {
    grid-column: auto / span 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: .1875rem;
    margin-top: 1.75rem
}
.s-header__nav:has(a:last-child:first-child) {
    justify-content: flex-end;
    margin-right: 0;
    margin-left: auto;
    padding-right: 0
}
@media (max-width: 659px) {
    .s-header__nav {
        display:none
    }
}
.s-header__nav-item {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 1.09091;
    letter-spacing: -0.02em;
    font-weight: 500;
    transition: opacity 0.6s 0.6s
}
.s-header__nav-item:nth-child(1) {
    transition-delay: .7s
}
.s-header__nav-item:nth-child(2) {
    transition-delay: .8s
}
.s-header__nav-item:nth-child(3) {
    transition-delay: .9s
}
body.is-not-ready .s-header__nav-item {
    opacity: 0
}
.s-header__nav-item:first-child:last-child {
    margin-top: .1875rem;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: .94444;
}
.s-header__socials {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: .625rem
}
.s-header__social-item {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.0625;
    letter-spacing: -0.02em;
    font-weight: 500;
    text-transform: uppercase;
    margin-left: .5rem;
    transition: opacity 0.6s 0.8s
}
@media (max-width: 1023px) {
    .s-header__social-item {
        font-weight:700
    }
}
.s-header__social-item:nth-child(1) {
    transition-delay: .9s
}
.s-header__social-item:nth-child(2) {
    transition-delay: 1s
}
.s-header__social-item:nth-child(3) {
    transition-delay: 1.1s
}
body.is-not-ready .s-header__social-item {
    opacity: 0
}
.s-trigger {
    z-index: 5;
    position: fixed !important;
    border-radius: 1.0625rem;
    top: 0;
    right: 0;
    margin: 1.3125rem 1.9375rem;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.5, 0, 0.2, 1) 0.4s,opacity 0.4s 0.4s;
    transform-origin: calc(100% - .75rem) 50%
}
@media (max-width: 659px) {
    .s-trigger {
        margin-right:1.0625rem
    }
}
.s-trigger__btn {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.88889;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: #333;
    height: 2.125rem;
    padding-inline:.75rem;letter-spacing: -0.02em;
    border-radius: inherit;
    transition: transform 0.5s cubic-bezier(0.5, 0, 0.2, 1) 0s;
    display: flex;
    align-items: center
}
.s-trigger__btn div {
    display: flex;
    align-items: center;
    gap: .375rem;
    transition: opacity 0.3s 0s,transform 0.5s cubic-bezier(0.5, 0, 0.2, 1) -.1s
}
body.is-scrolling-down .s-trigger,body.is-scrolled-to-footer .s-trigger,body:not(.is-scrolled) .s-trigger,body:not(.is-scrolled-hero-height) .s-trigger {
    transition-delay: 0.2s, 0.2s;
    transform: scale(0);
    pointer-events: none;
    opacity: 0
}
body.is-scrolling-down .s-trigger__btn,body.is-scrolled-to-footer .s-trigger__btn,body:not(.is-scrolled) .s-trigger__btn,body:not(.is-scrolled-hero-height) .s-trigger__btn {
    transition-delay: 0s;
    transform: translateX(calc(100% - 2.125rem))
}
body.is-scrolling-down .s-trigger__btn div,body.is-scrolled-to-footer .s-trigger__btn div,body:not(.is-scrolled) .s-trigger__btn div,body:not(.is-scrolled-hero-height) .s-trigger__btn div {
    opacity: 0;
    transform: translateX(-1.25rem);
    transition-delay: 0s, 0s
}