@keyframes float {
    from {
        translate: -50% -40%;
    } to {
        translate: -50% -25%;
    }
}

@supports (display:grid) or (display:-ms-grid){
    .notification--browser {
        display: none
    }
}

:root {
    --orange__hue: 23deg;
    --orange__sat: 90%;
    --orange__light: 55%;
    --blue__hue: 222deg;
    --blue__sat: 55%;
    --blue__light: 41%;
    --white__hue: 0deg;
    --white__sat: 0%;
    --white__light: 100%;
    --gray__hue: 0deg;
    --gray__sat: 0%;
    --gray__light: 37%;
    --orange: hsl( var(--orange__hue) var(--orange__sat) var(--orange__light) );
    --orange-light: hsl( var(--orange__hue) var(--orange__sat) calc(var(--orange__light) + 30%) );
    --blue: hsl( var(--blue__hue) var(--blue__sat) var(--blue__light) );
    --white: hsl( var(--white__hue) var(--white__sat) var(--white__light) );
    --gray: hsl( var(--gray__hue) var(--gray__sat) var(--gray__light) );
}

html {
    background-color: var(--blue)
}

* {
    margin: 0;
    padding: 0
}

*::before,
*::after {
    box-sizing: border-box
}

body {
    color: var(--white);
    display: flex;
    flex-direction: column;
    font-family: ff-dagny-web-pro, Avenir, Helvetica, sans-serif;
    block-size: 100dvb;
}

a {
    color: inherit
}

ul[class] {
    list-style-type: none;
    margin-block: 0;
    padding-inline-start: 0
}

.ff--special {
    font-family: azo-sans-web
}

.ff--serif {
    font-family: eb-garamond
}

.fw--300 {
    font-weight: 300
}





.page-header {
    transition: background-color 150ms ease-in-out;
}
.scrolled .page-header {
    background-color: var(--white);
}

.page-header-nav {
    inline-size: 80dvi;
    margin-inline: auto;
    max-inline-size: 80rem;
    padding-block: 1.5625rem;
}

.page-header-nav-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media (min-width:37.5em){
    .page-header-nav-list {
        flex-wrap: nowrap;
        gap: 3.125rem;
        justify-content: center;
    }
}
@media (min-width:60em){
    .page-header-nav-list {
        gap: 6.25rem;
    }
}

.page-header li:first-child,
.page-header li:last-child {
    flex: 1;
}
@media (min-width:37.5em){
    .page-header li:first-child,
    .page-header li:last-child {
        flex: initial;
        text-align: center;
    }
}

.page-header li:nth-child(2) {
    flex-basis: 100%;
    order: 1;
    padding-block-end: 1.25rem;
    text-align: center;
}
@media (min-width:37.5em){
    .page-header li:nth-child(2) {
        flex-basis: initial;
        padding-block-end: initial;
        text-align: initial;
    }
}

.page-header li:first-child {
    order: 2;
    text-align: start;
}

.page-header li:last-child {
    order: 3;
    text-align: end;
}

@media (min-width:37.5em){
    .page-header li:first-child,
    .page-header li:nth-child(2),
    .page-header li:last-child {
        order: initial;
        text-align: center;
    }
}

.page-header-nav-list a {
    font-family: azo-sans-web;
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: .1em;
    line-height: 1;
    text-box: trim-both cap alphabetic;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 250ms ease-in-out;
}
@media (min-width:37.5em){
    .page-header-nav-list a {
        font-size: 1rem;
    }
}
@media (min-width:60em){
    .page-header-nav-list a {
        font-size: 1.3125rem;
    }
}
@media (hover:hover) and (pointer:fine){
    .page-header-nav-list a:not(:has(svg)) {
        position: relative
    }
    .page-header-nav-list a:not(:has(svg))::after {
        background-color: var(--white);
        block-size: .0625rem;
        content: '';
        transform-origin: 50%;
        inset: auto 0 -.25em 0;
        opacity: 0;
        position: absolute;
        scale: 0;
        transition: opacity 250ms ease-in-out, scale 250ms ease-in-out
    }
    .scrolled .page-header-nav-list a:not(:has(svg))::after {
        background-color: var(--blue);
    }
    .page-header-nav-list a:not(:has(svg)):hover::after {
        opacity: 1;
        scale: 1
    }
    .page-header-nav-list a:not(:has(svg)):active::after {
        transition-duration: 50ms;
        scale: .65
    }
}
.scrolled .page-header a {
    color: var(--blue);
}

.page-header-nav-list svg {
    block-size: auto;
    fill: var(--white);
    inline-size: calc(80dvi * .3);
    min-inline-size: 15.625rem;
    transition: fill 250ms ease-in-out;
    vertical-align: middle;
}
.scrolled .page-header-nav-list svg {
    fill: var(--blue);
}

.page-body {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    overflow-y: hidden;
}
@media (min-width:37.5em){
    .page-body {
        scroll-snap-type: y mandatory;
    }
}

.page-body > * {
    flex: 1 0 100%;
}
@media (min-width:37.5em){
    .page-body > * {
        max-block-size: 100%;
        scroll-snap-align: start;
    }
}

.hero {
    display: flex;
}

@media (min-width:37.5em){
    .hero > :last-child {
        position: relative;
        overflow: hidden
    }
    .hero > :last-child > * {
        position: absolute;
    }
}

@media (min-width:37.5em){
    .hero > * {
        flex: 1
    }
}

@media (min-width:37.5em){
    .hero .primary {
        align-items: flex-start;
        container-type: inline-size;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: 3.125rem;
    }
}
@media (min-width:60em){
    .hero .primary {
        padding-block: 6.25rem;
    }
}

@media (min-width:37.5em){
    .hero .content {
        padding-inline: 1.25rem;
    }
}

.headline {
    font-feature-settings: 'dlig', 'liga';
    letter-spacing: -.025em;
    line-height: .95;
    line-height: 1.5cap;
    text-box: trim-both cap alphabetic;
}
@media (min-width:37.5em){
    .headline {
        font-size: clamp(2.275rem, -0.20714285714285774rem + 13.23809523809524cqi, 5.75rem);
    }
}

.headline-context {
    font-size: 1.125rem;
    inline-size: 70%;
    line-height: 1.45;
    line-height: 2cap;
    margin: 3em 0 0;
    text-box: trim-both cap alphabetic;
    text-wrap: pretty;
}
@media (min-width:37.5em){
    .headline-context {
        font-size: 1.3125rem;
    }
}

.hero .btn {
    align-items: center;
    background-color: var(--orange);
    border: .25rem solid var(--orange);
    display: inline-flex;
    fill: var(--white);
    font-size: 1.125rem;
    gap: 1.25rem;
    margin-block-start: 3em;
    padding: 1em 2em;
}
@media (min-width:37.5em){
    .hero .btn {
        font-size: 1.3125rem;
    }
}
@media (hover:hover) and (pointer:fine){
    .hero .btn {
        cursor: pointer;
        transition: border-color 250ms ease-in-out;
    }
    .hero .btn:hover {
        border-color: var(--white);
    }
    .hero .btn:active {
        background-color: var(--white);
    }
}
@media (hover:hover) and (pointer:fine){
    .hero .secondary .btn:active {
        background-color: var(--blue);
        border-color: var(--blue);
    }
}

.hero .btn span {
    color: var(--white);
    font-family: 'azo-sans-web';
    font-size: 1em;
    font-weight: 300;
    letter-spacing: .1em;
    text-box: trim-both cap alphabetic;
    text-transform: uppercase;
}

.hero .btn svg {
    aspect-ratio: 1 / 1;
    block-size: 1.25em;
    fill: var(--white);
}

@media (hover:hover) and (pointer:fine){
    .hero .btn:active span {
        color: var(--orange);
    }
    .hero .btn:active svg {
        fill: var(--orange);
    }
    .hero .secondary .btn:active span {
        color: var(--white);
    }
    .hero .btn:active svg {
        fill: var(--white);
    }
}

.hero video {
    mix-blend-mode: screen;
}
@media (min-width:37.5em){
    .hero video {
        block-size: 100%;
        inline-size: 100%;
        inset: 0;
        object-fit: cover;
        object-position: 0 100%;
    }
}

@media (min-width:37.5em) and (hover:hover) and (pointer:fine){
    .secondary .btn {
        align-self: center;
        font-size: 1rem;
        inset: 50% auto auto 50%;
        justify-self: center;
        margin: 0;
        opacity: 0;
        position: absolute;
        transition: opacity 250ms ease-in-out;
        translate: -50% -50%;
    }
}
@media (min-width:37.5em) and (hover:hover) and (pointer:fine){
    .secondary:hover .btn {
        opacity: 1
    }
}

.context {
    background-color: var(--white);
}
@media (min-width:37.5em){
    .context {
        display: flex;
    }
}

@media (min-width:37.5em){
    .context .panel {
        flex: 1;
        padding: 1.25rem;
    }
}
@media (min-width:60em){
    .context .panel {
        padding: 2rem;
    }
}
@media (min-width:80em){
    .context .panel {
        padding: 3.125rem;
    }
}
@media (min-width:37.5em){
    .context .panel:nth-child(2) {
        position: relative;
    }
}

.panel .return {
    align-items: center;
    animation: 500ms ease-in-out 0s infinite alternate float;
    background-color: transparent;
    border: 0;
    color: var(--blue);
    cursor: pointer;
    display: none;
    flex-direction: column;
    font-size: .875rem;
    gap: .25em;
    inset: .75em auto auto 50%;
    position: absolute;
    translate: -50% -40%;
}
@media (min-width:37.5em){
    .panel .return {
        display: inline-flex;
    }
}
@media (min-width:60em){
    .panel .return {
        font-size: 1.125rem;
        inset-block-start: .45em;
    }
}
@media (min-width:80em){
    .panel .return {
        font-size: 1.3125rem;
        inset-block-start: .75em;
    }
}
.panel .return svg {
    block-size: .6em;
    inline-size: auto;
}
.panel .return span {
    font-family: azo-sans-web;
    font-weight: 300;
    text-box: trim-both cap alphabetic;
}
@media (hover:hover) and (pointer:fine){
    .panel .return:hover span {
        font-weight: 400;
    }
}

@media (min-width:37.5em){
    .context .panel-body {
        background-color: hsl( from var(--gray) calc(h + 212) calc(s + 65) calc(l * 2.5) );
        block-size: calc(100% - 4.375rem);
        border-radius: .625rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        max-block-size: calc(100% - 4.375rem);
        overflow-y: auto;
        padding: 3.125rem 1.25rem 1.25rem;
    }
}
@media (min-width:60em){
    .context .panel-body {
        block-size: calc(100% - 5.125rem);
        gap: 2rem;
        max-block-size: calc(100% - 5.125rem);
        padding: 3.125rem 2rem 2rem;
    }
}
@media (min-width:80em){
    .context .panel-body {
        block-size: calc(100% - 6.25rem);
        gap: 3.125rem;
        max-block-size: calc(100% - 6.25rem);
        padding: 3.125rem;
    }
}

.panel-title {
    color: color-mix(in oklab, var(--blue), black 10%);
    font-family: eb-garamond;
    font-size: 1.875rem;
    line-height: 1.45;
    line-height: 2cap;
    text-box: trim-both cap alphabetic;
    text-wrap: pretty;
}
@media (min-width:37.5em){
    .panel-title {
        font-size: 1.3125rem;
        text-align: center
    }
}
@media (min-width:60em){
    .panel-title {
        font-size: 1.625rem;
    }
}
@media (min-width:80em){
    .panel-title {
        font-size: 1.875rem;
    }
}

.panel-detail {
    color: color-mix(in oklab, var(--blue), black 10%);
    font-size: 1.3125rem;
    line-height: 1.45;
    line-height: 2cap;
    text-wrap: pretty;
}
ul.panel-detail {
    list-style-type: disc;
    padding-inline-start: .8em;
}
@media (min-width:37.5em){
    .panel-detail {
        font-size: .875rem;
    }
}
@media (min-width:60em){
    .panel-detail {
        font-size: 1.125rem;
    }
}
@media (min-width:80em){
    .panel-detail {
        font-size: 1.3125rem;
    }
}

.lightbox {
    background-color: transparent;
    border: 0;
    inset: 50% auto auto 50%;
    overflow: visible;
    translate: -50% -50%;
}

.lightbox[open]::backdrop {
    webkit-backdrop-filter: blur(.375rem) brightness(1.1);
    backdrop-filter: blur(.375rem) brightness(1.1);
}

.lightbox button {
    cursor: pointer;
}

.lightbox__content:not(.is-active) {
    display: none;
}

.lightbox__gallery {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    inline-size: calc(100dvi - 6.25rem);
}
@media (min-width:37.5em){
    .lightbox__gallery {
        inline-size: calc(100dvi - 9.375rem);
    }
}
@media (min-width:60em){
    .lightbox__gallery {
        inline-size: 50dvmax;
    }
}

.lightbox__contact .lightbox__body__wrap {
    background-color: var(--white);
    inline-size: 90dvi;
    max-inline-size: 21.875rem;
    padding: 1.5625rem;
}
@media (min-width:37.5em){
    .lightbox__contact .lightbox__body__wrap {
        padding: 3.125rem;
    }
}

.lightbox__gallery .lightbox__body__wrap {
    position: relative;
}

.lightbox__gallery .lightbox__body__wrap::before,
.lightbox__gallery .lightbox__body__wrap::after {
    content: '';
    inset: 0;
    position: absolute;
    scale: 1.02;
    z-index: -1;
}
.lightbox__gallery .lightbox__body__wrap::before {
    background-color: var(--white);
    transform: rotateZ(2deg);
}
.lightbox__gallery .lightbox__body__wrap::after {
    background-color: color-mix( in oklab, var(--blue), var(--white) 30% );
    transform: rotateZ(-3deg);
}

.lightbox__gallery video {
    inline-size: 100%;
}

.nav--gallery {
    align-items: center;
    align-self: center;
    background-color: var(--orange);
    border-radius: 1.25rem;
    color: var(--white);
    display: inline-flex;
    gap: 1.25rem;
    justify-content: center;
    padding: .375rem 1.25rem;
}

.nav--direction {
    align-items: center;
    background-color: transparent;
    border: 0;
    color: inherit;
    display: flex;
    justify-content: center;
}
.nav--direction[disabled] {
    opacity: .3;
    pointer-events: none;
}

.nav--direction svg {
    block-size: 1.5rem;
    fill: currentColor;
    pointer-events: none;
}

.nav--status {
    align-items: center;
    display: inline-flex;
    text-box: trim-both cap alphabetic;
}
.nav--status em {
    font-family: eb-garamond;
    font-size: .75em;
}

form, .form-control {
    display: flex;
    flex-direction: column;
}

form {
    gap: 1.5625rem;
    inline-size: 100%;
}

.form-control {
    align-items: flex-start;
    gap: .375rem;
}

label {
    font-size: 1.3125rem;
    text-box: trim-both cap alphabetic
}

form :is(input, textarea) {
    align-self: stretch;
    border: .0625rem solid var(--blue);
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 1.3125rem;
    outline: 0;
    padding: .25em .75em;
}

form input {
    line-height: 1
}

form textarea {
    line-height: 1.5
}

.lightbox__close {
    aspect-ratio: 1 / 1;
    background-color: transparent;
    block-size: 1.5rem;
    border: 0;
    color: var(--orange);
    inset: 0 0 auto auto;
    position: absolute;
    translate: 50% -50%;
}

.lightbox__close svg {
    fill: currentColor;
}