.site-loading { display: none; }
html.is-loading { overflow: hidden; }
.is-loading .site-loading {
    display: flex; position: fixed; inset: 0; z-index: 10000;
    flex-direction: column; align-items: center; justify-content: center;
    background: #f7f8f2; color: #02321f;
    opacity: 1; transition: background-color .9s ease;
}
.is-loading .site-loading.is-leaving { background-color: transparent; pointer-events: none; }
.site-loading.is-leaving .loading-logo {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 0;
}
.site-loading.is-leaving .loading-caption,
.site-loading.is-leaving .loading-line,
.site-loading.is-leaving .loading-continue { opacity: 0; }
.site-loading {
    --loading-logo-width: clamp(40px, 5rem, 70px);
    --loading-logo-gap: 2.4rem;
}
.loading-logo {
    width: var(--loading-logo-width); height: auto;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    transition: transform .9s cubic-bezier(.22,1,.36,1), opacity .8s ease;
}
.loading-line {
    position: absolute; left: 0; right: 0; top: 50%;
    height: .2rem; min-height: 1px;
    transform: translateY(-50%);
    transition: opacity .35s ease;
}
.loading-line::before,
.loading-line::after {
    content: ''; position: absolute; top: 0;
    width: max(0px, calc((100% - var(--loading-logo-width)) / 2 - var(--loading-logo-gap)));
    height: 100%; background: #02321f;
    transform: scaleX(var(--loading-progress, 0));
    transition: transform .4s ease-out;
}
.loading-line::before { left: 0; transform-origin: left center; }
.loading-line::after { right: 0; transform-origin: right center; }
.loading-caption {
    position: absolute; top: calc(50% + var(--loading-logo-width) / 2 + 3rem);
    left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
    width: max(var(--loading-logo-width), 14rem); gap: 2.4rem;
    color: rgba(2,50,31,.48);
    transition: opacity .35s ease;
}
.site-loading .loading-message {
    margin: 0; font: 400 max(10px, 1.1rem)/1.6 sans-serif;
    letter-spacing: .28em; white-space: nowrap;
}
.loading-percent {
    display: flex; align-items: baseline; gap: .35rem;
    font: 400 max(12px, 1.3rem)/1.6 sans-serif;
    font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.loading-percent > span { font-size: .75em; opacity: .7; }
.site-loading .loading-continue {
    position: absolute; top: calc(50% + var(--loading-logo-width) / 2 + 7rem);
    margin: 0; padding: .5rem 0; color: rgba(2,50,31,.65);
    font: 400 max(11px, 1.1rem)/1.8 sans-serif; letter-spacing: .15em;
    border: 0; border-bottom: .1rem solid rgba(2,50,31,.25); border-radius: 0;
}
.site-loading [hidden] { display: none; }
.is-loading .group_3 > * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .loading-line::before, .loading-line::after { transition-duration: .1s; }
}