@font-face {
    font-family: 'Gabarito';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYtz_0dZAGKJJ4t3HtmW4XUng.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Gabarito';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYtz_0dZAGKJJ4t3HtoW4U.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/onest/v11/gNMKW3F-SZuj7xmS-HY6EQ.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/onest/v11/gNMKW3F-SZuj7xmb-HY6EQ.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/onest/v11/gNMKW3F-SZuj7xnj-HY6EQ.woff2) format('woff2');
    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/onest/v11/gNMKW3F-SZuj7xnx-HY6EQ.woff2) format('woff2');
    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/onest/v11/gNMKW3F-SZuj7xmQ-HY6EQ.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/onest/v11/gNMKW3F-SZuj7xmR-HY6EQ.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/onest/v11/gNMKW3F-SZuj7xmf-HY.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens, base, atoms, layout, sections, scenes;

@layer tokens {
    :root {
        --color-1: #000000;
        --color-2: #ffffff;
        --color-3: #ff0000;
        --color-4: #ffffff;
        --color-5: #ffffff;
        --color-6: #000000;
        --color-7: #000000;
        --font-1: "Gabarito", "Gabarito Fallback", "Arial Black", Arial, sans-serif;
        --font-2: "Onest", "Onest Fallback", Arial, sans-serif;
        --radius-1: 28px;
        --radius-2: 999px;
        --radius-3: 14px;
        --shadow-1: 0 -18px 50px color-mix(in srgb, var(--color-1) 45%, transparent);
        --shadow-2: 0 2px 0 var(--color-3);
        --space-1: clamp(16px, 3.4vw, 48px);
        --space-2: clamp(96px, 15vh, 200px);
    }
}

@font-face {
    font-family: "Gabarito Fallback";
    src: local("Arial Black"), local("Arial-Black"), local("Arial Bold");
    font-weight: 800 1000;
    size-adjust: 79.7%;
    ascent-override: 117.9%;
    descent-override: 32.6%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Gabarito Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 550 799;
    size-adjust: 92.5%;
    ascent-override: 101.7%;
    descent-override: 28.1%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Onest Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 100 549;
    size-adjust: 106.2%;
    ascent-override: 91.4%;
    descent-override: 29.2%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Onest Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 550 799;
    size-adjust: 101.9%;
    ascent-override: 95.2%;
    descent-override: 30.4%;
    line-gap-override: 0%;
}

@layer base {

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

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
        background: var(--color-2);
        color: var(--color-1);
        overflow-x: clip;
    }

    img {
        display: block;
        max-width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    ul,
    ol,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    ul,
    ol {
        padding: 0;
        list-style: none;
    }

    a {
        color: inherit;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

    :focus-visible {
        outline: 3px solid var(--color-3);
        outline-offset: 3px;
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    main {
        overflow-x: clip;
    }
}

@layer atoms {
    .m-text-black {
        color: var(--color-1);
    }

    .m-text {
        font-family: var(--font-2);
        font-size: 17px;
        font-weight: 400;
        line-height: 1.55;
        letter-spacing: 0;
        text-transform: none;
        font-style: normal;
    }

    .m-text-2 {
        font-family: var(--font-1);
        font-size: min(40vw, calc((100vw - 2 * var(--space-1)) / (var(--len, 5) * 0.47)));
        font-weight: 800;
        line-height: 0.8;
        letter-spacing: -0.065em;
        text-transform: none;
        font-style: normal;
    }

    .m-text-3 {
        font-family: var(--font-1);
        font-size: clamp(50px, 9.2vw, 150px);
        font-weight: 800;
        line-height: 0.88;
        letter-spacing: -0.055em;
        text-transform: none;
        font-style: normal;
    }

    .m-text-4 {
        font-family: var(--font-1);
        font-size: clamp(30px, 3.9vw, 58px);
        font-weight: 700;
        line-height: 0.96;
        letter-spacing: -0.04em;
        text-transform: none;
        font-style: normal;
    }

    .m-text-5 {
        font-family: var(--font-2);
        font-size: clamp(19px, 1.7vw, 25px);
        font-weight: 500;
        line-height: 1.28;
        letter-spacing: -0.015em;
        text-transform: none;
        font-style: normal;
    }

    .m-text-6 {
        font-family: var(--font-2);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: 0.01em;
        text-transform: none;
        font-style: normal;
    }

    .m-text-7 {
        font-family: var(--font-1);
        font-size: clamp(22px, 2.05vw, 30px);
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: -0.025em;
        text-transform: none;
        font-style: normal;
    }

    .m-dot {
        display: inline-block;
        width: 0.19em;
        height: 0.19em;
        margin-left: 0.035em;
        border-radius: var(--radius-2);
        background: var(--color-3);
        vertical-align: baseline;
    }

    .m-btn {
        position: relative;
        isolation: isolate;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 0 22px 0 18px;
        overflow: hidden;
        border: 0;
        border-radius: var(--radius-2);
        background: var(--color-3);
        color: var(--color-2);
        font-family: var(--font-2);
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.01em;
        text-decoration: none;
        cursor: pointer;
    }

    .m-btn::before {
        content: "";
        width: 8px;
        height: 8px;
        flex: none;
        border-radius: var(--radius-2);
        background: currentColor;
    }

    .m-btn::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 22px;
        top: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border-radius: var(--radius-2);
        background: var(--color-1);
        transform: scale(0);
        transition: transform .5s cubic-bezier(.7, 0, .2, 1);
    }

    .m-btn__label {
        position: relative;
    }

    @media (hover: hover) {
        .m-btn:hover::after {
            transform: scale(60);
        }
    }

    .m-btn-2 {
        position: relative;
        isolation: isolate;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 0 22px 0 18px;
        overflow: hidden;
        border: 0;
        border-radius: var(--radius-2);
        background: var(--color-2);
        color: var(--color-1);
        font-family: var(--font-2);
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.01em;
        text-decoration: none;
        cursor: pointer;
        transition: color .35s;
    }

    .m-btn-2::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 22px;
        top: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border-radius: var(--radius-2);
        background: var(--color-1);
        transform: scale(0);
        transition: transform .5s cubic-bezier(.7, 0, .2, 1);
    }

    .m-btn-2 .m-btn__label {
        position: relative;
    }

    @media (hover: hover) {
        .m-btn-2:hover {
            color: var(--color-2);
        }

        .m-btn-2:hover::after {
            transform: scale(60);
        }
    }

    .m-link {
        display: inline-flex;
        align-items: center;
        gap: 0.45em;
        font-family: var(--font-2);
        font-size: clamp(15px, 1.3vw, 18px);
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.015em;
        text-decoration: none;
        position: relative;
        isolation: isolate;
        padding: 10px 22px 10px 14px;
        border-radius: var(--radius-2);
        overflow: hidden;
        transition: color .35s;
    }

    .m-link::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 14px;
        top: 50%;
        width: 6px;
        height: 6px;
        margin: -3px 0 0 -3px;
        border-radius: var(--radius-2);
        background: var(--color-3);
        transform: scale(0);
        transition: transform .5s cubic-bezier(.7, 0, .2, 1);
    }

    .m-link__label {
        position: relative;
        padding-block: 3px;
    }

    .m-link__label::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: var(--radius-2);
        background: currentColor;
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform .45s cubic-bezier(.7, 0, .2, 1);
    }

    .m-link__arrow {
        width: 0.8em;
        height: 0.8em;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        transition: transform .45s cubic-bezier(.7, 0, .2, 1);
    }

    @media (hover: hover) {
        .m-link:hover {
            color: var(--color-2);
        }

        .m-link:hover::before {
            transform: scale(100);
        }

        .m-link:hover .m-link__label::after {
            transform: scaleX(0);
        }

        .m-link:hover .m-link__arrow {
            transform: translateX(4px);
        }
    }

    .m-link-2 {
        position: relative;
        display: inline-block;
        padding-block: 4px;
        font-family: var(--font-2);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.005em;
        text-decoration: none;
    }

    .m-link-2::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1.5px;
        border-radius: var(--radius-2);
        background: currentColor;
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform .45s cubic-bezier(.7, 0, .2, 1);
    }

    .m-icon {
        position: relative;
        isolation: isolate;
        display: inline-grid;
        place-items: center;
        width: 48px;
        height: 48px;
        flex: none;
        padding: 0;
        border: 1.5px solid currentColor;
        border-radius: var(--radius-2);
        background: transparent;
        color: inherit;
        cursor: pointer;
        transition: color .35s;
    }

    .m-icon::after {
        content: "";
        position: absolute;
        inset: 3px;
        z-index: -1;
        border-radius: var(--radius-2);
        background: var(--color-3);
        transform: scale(0);
        transition: transform .45s cubic-bezier(.7, 0, .2, 1);
    }

    .m-icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }

    .m-surface {
        border-radius: var(--radius-1);
        background: var(--color-4);
        color: var(--color-1);
    }

    .m-badge {
        display: inline-flex;
        align-items: center;
        min-height: 35px;
        padding: 0 15px;
        border-radius: var(--radius-2);
        font-family: var(--font-2);
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
        font-style: normal;
        white-space: nowrap;
    }

    .m-field {
        display: block;
        width: 100%;
        min-height: 48px;
        padding: 10px 0;
        border: 0;
        border-bottom: 1.5px dashed color-mix(in srgb, currentColor 40%, transparent);
        border-radius: 0;
        background: transparent;
        color: inherit;
        font-family: var(--font-2);
        font-size: 17px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0;
        text-transform: none;
        font-style: normal;
    }

    .m-field:focus-visible {
        outline: none;
        border-bottom-color: var(--color-3);
        box-shadow: var(--shadow-2);
    }

    textarea.m-field {
        min-height: 112px;
        resize: vertical;
    }
}

@layer sections {
    #navigation {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 40;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25px 30px var(--space-1);
        pointer-events: none;
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #navigation.nav--compact {
        justify-content: center;
    }

    #navigation.nav--compact::before {
        opacity: 1;
    }

    .nav__container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 16px;
        height: 60px;
        padding: 0 6px;
        border-radius: var(--radius-2);
        pointer-events: auto;
        transition: width 2s cubic-bezier(0.16, 1, 0.3, 1),
            background 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            backdrop-filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            border 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            padding 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #navigation.nav--compact .nav__container {
        width: auto;
        justify-content: center;
        background: var(--color-1);
        padding: 0 8px;
    }

    #navigation .nav__brand {
        display: inline-flex;
        align-items: baseline;
        justify-content: center;
        padding-left: 10px;
        height: 48px;
        color: var(--color-2);
        font-family: var(--font-1);
        font-size: 42px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.05em;
        text-decoration: none;
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #navigation.nav--compact .nav__brand {
        font-size: 42px;
    }

    #navigation .nav__links {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        height: 48px;
        padding: 0 8px;
        color: var(--color-2);
    }

    #navigation.nav--compact .nav__links {
        position: static;
        transform: none;
    }

    #navigation .nav__links ul {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #navigation .nav__links a {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 14px;
        color: inherit;
        text-decoration: none;
        position: relative;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #navigation .nav__links a.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 14px;
        right: 14px;
        height: 2px;
        background: var(--color-3);
    }

    #navigation .nav__links a::after {
        display: none;
    }

    #navigation .nav__cta {
        height: 48px;
        display: inline-flex;
        align-items: center;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #navigation .nav__menu {
        display: none;
        height: 48px;
        width: 48px;
        pointer-events: auto;
        justify-content: center;
        align-items: center;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #navigation .nav__menu svg {
        width: 42px;
        height: 42px;
        stroke: var(--color-2);
        stroke-width: 2;
        stroke-linecap: round;
        fill: none;
    }

    .menu {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: grid;
        grid-template-rows: auto 1fr auto auto;
        padding: 14px var(--space-1) 32px;
        background: var(--color-1);
        color: var(--color-2);
        overflow-y: auto;
    }

    .menu[hidden] {
        display: none;
    }

    .menu__top {
        display: flex;
        justify-content: flex-end;
    }

    .menu__list {
        align-self: center;
        display: grid;
        gap: 6px;
    }

    .menu__list a {
        font-family: var(--font-1);
        font-size: clamp(42px, 13vw, 72px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.05em;
        text-decoration: none;
    }

    .menu__cta {
        display: flex;
        justify-content: center;
        margin-top: 32px;
        margin-bottom: 24px;
    }

    .menu__cta .m-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .menu__foot {
        color: var(--color-5);
    }

    @media (max-width: 899px) {
        #navigation {
            padding: 10px;
            justify-content: center;
        }

        #navigation .nav__container {
            gap: 0;
            padding: 0;
        }

        #navigation .nav__links,
        #navigation .nav__cta {
            display: none;
        }

        #navigation .nav__menu {
            display: none;
        }
    }
}

@layer sections {
    .mobile-nav {
        width: 90%;
        display: none;
        position: fixed;
        bottom: 10px;
        border-radius: 50px;
        left: 50%;
        right: 0;
        transform: translateX(-50%);
        z-index: 50;
        background: var(--color-1);
        padding: 8px max(env(safe-area-inset-right), 12px) max(env(safe-area-inset-bottom, 12px), 12px) max(env(safe-area-inset-left), 12px);
    }

    .mobile-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 1;
        min-width: 0;
        padding: 10px 4px;
        color: var(--color-2);
        text-decoration: none;
        border: none;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        border-radius: 12px;
        position: relative;
    }

    .mobile-nav__item svg {
        width: 28px;
        height: 28px;
        stroke: var(--color-2);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-nav__item span {
        display: none;
    }

    .mobile-nav__item--primary svg {
        width: 30px;
        height: 30px;
    }

    .mobile-nav__item.active::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--color-3);
    }

    @media (max-width: 899px) {
        .mobile-nav {
            display: flex;
        }

        #footer {
            padding-bottom: 120px !important;
        }
    }
}

@layer sections {
    .contact-canvas {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100;
    }

    .contact-canvas[hidden] {
        display: none;
    }

    .contact-canvas__overlay {
        position: absolute;
        inset: 0;
        background: var(--color-1);
        animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .contact-canvas__content {
        position: relative;
        height: 100%;
        background: var(--color-1);
        display: flex;
        flex-direction: column;
        animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
    }

    .contact-canvas__header {
        padding: clamp(32px, 6vh, 32px) var(--space-1) 32px;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .contact-canvas__header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 35px;
        min-height: 25px;
    }

    .contact-canvas__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 25px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: opacity 0.3s ease;
        flex-shrink: 0;
    }

    .contact-canvas__close:active {
        opacity: 0.6;
    }

    .contact-canvas__close svg {
        width: 24px;
        height: 24px;
        stroke: var(--color-2);
        stroke-width: 2;
        stroke-linecap: round;
    }

    .contact-canvas__subtitle {
        display: inline-block;
        font-family: var(--font-2);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.06em;
        color: var(--color-2);
        margin: 0;
    }

    .contact-canvas__title h2 {
        font-family: var(--font-1);
        font-size: clamp(42px, 9vw, 56px);
        font-weight: 800;
        line-height: 0.95;
        letter-spacing: -0.045em;
        color: var(--color-2);
        margin: 0 0 20px;
    }

    .contact-canvas__title .highlight {
        color: var(--color-3);
    }

    .contact-canvas__title p {
        font-family: var(--font-2);
        font-size: clamp(17px, 3.8vw, 21px);
        font-weight: 400;
        line-height: 1.4;
        color: var(--color-2);
        max-width: 26em;
    }

    .contact-canvas__options {
        flex: 1;
        padding: 8px var(--space-1) clamp(32px, 6vh, 48px);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .contact-option {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 22px 24px;
        background: color-mix(in srgb, var(--color-2) 4%, transparent);
        border: none;
        border-radius: var(--radius-1);
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        width: 100%;
        text-align: left;
    }

    .contact-option:active {
        background: color-mix(in srgb, var(--color-2) 6%, transparent);
    }

    .contact-option__icon {
        width: 56px;
        height: 56px;
        border-radius: var(--radius-2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: color-mix(in srgb, var(--color-2) 8%, transparent);
    }

    .contact-option__icon svg {
        width: 24px;
        height: 24px;
        stroke: var(--color-2);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    .contact-option--call {
        background: color-mix(in srgb, var(--color-3) 6%, transparent);
    }

    .contact-option--call:active {
        background: color-mix(in srgb, var(--color-3) 10%, transparent);
    }

    .contact-option--call .contact-option__icon {
        background: var(--color-3);
    }

    .contact-option--call .contact-option__icon svg {
        stroke: var(--color-2);
        fill: var(--color-2);
    }

    .contact-option--whatsapp {
        background: linear-gradient(135deg, rgba(37, 211, 102, 0.08) 0%, rgba(32, 186, 90, 0.08) 100%);
    }

    .contact-option--whatsapp:active {
        background: linear-gradient(135deg, rgba(37, 211, 102, 0.12) 0%, rgba(32, 186, 90, 0.12) 100%);
    }

    .contact-option--whatsapp .contact-option__icon {
        background: linear-gradient(135deg, #25d366 0%, #20ba5a 100%);
    }

    .contact-option--whatsapp .contact-option__icon svg {
        stroke: var(--color-2);
    }

    .contact-option--form,
    .contact-option--email {
        background: color-mix(in srgb, var(--color-2) 6%, transparent);
    }

    .contact-option--form:active,
    .contact-option--email:active {
        background: color-mix(in srgb, var(--color-2) 10%, transparent);
    }

    .contact-option--form .contact-option__icon,
    .contact-option--email .contact-option__icon {
        background: var(--color-2);
    }

    .contact-option--form .contact-option__icon svg,
    .contact-option--email .contact-option__icon svg {
        stroke: var(--color-1);
    }

    .contact-option__content {
        flex: 1;
        min-width: 0;
    }

    .contact-option__content h3 {
        font-family: var(--font-2);
        font-size: 17px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--color-2);
        margin: 0 0 5px;
    }

    .contact-option__content p {
        font-family: var(--font-2);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
        color: color-mix(in srgb, var(--color-2) 60%, transparent);
        margin: 0;
    }

    .contact-option__arrow {
        width: 18px;
        height: 18px;
        stroke: color-mix(in srgb, var(--color-2) 35%, transparent);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        flex-shrink: 0;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .contact-option:active .contact-option__arrow {
        transform: translateX(3px);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    @media (max-width: 899px) {
        .contact-canvas:not([hidden]) {
            display: block;
        }
    }

    @media (min-width: 900px) {
        .contact-canvas {
            display: none !important;
        }
    }
}

@layer sections {
    #hero {
        --ap: min(74vw, 44svh);
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-rows: 1fr auto;
        min-height: max(100svh, 560px);
        padding: 0 var(--space-1);
        background: var(--color-1);
        color: var(--color-2);
        overflow: clip visible;
    }

    #hero .hero__intro {
        display: grid;
        justify-items: start;
        align-content: start;
        gap: 18px;
        max-width: 32rem;
        padding-top: clamp(92px, 14svh, 150px);
    }

    #hero .hero__lead {
        color: var(--color-2);
    }

    #hero .hero__title {
        position: static;
        align-self: end;
        padding-bottom: clamp(18px, 5svh, 52px);
        white-space: nowrap;
    }

    #hero .hero__word,
    #hero .hero__mask,
    #hero .hero__glyphs {
        display: inline-block;
    }

    #hero .hero__period {
        position: static;
        display: inline-block;
        width: 0.19em;
        height: 0.19em;
        margin-left: 0.035em;
        border-radius: var(--radius-2);
        background: var(--color-3);
        vertical-align: baseline;
    }

    #hero .hero__stage {
        position: absolute;
        left: calc(50% - var(--ap) / 2);
        top: calc(57% - var(--ap) / 2);
        width: var(--ap);
        height: var(--ap);
        font-size: 16px;
        line-height: 0;
    }

    #hero .hero__aperture {
        position: absolute;
        inset: 0;
        display: block;
        overflow: hidden;
        border-radius: var(--radius-2);
        background: var(--color-3);
    }

    #hero .hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #hero .hero__tint {
        position: absolute;
        inset: 0;
        background: var(--color-3);
        opacity: 0;
    }

    #hero .hero__orbit {
        position: absolute;
        inset: -9%;
        display: block;
        border-radius: var(--radius-2);
        border: 1px solid color-mix(in srgb, var(--color-2) 16%, transparent);
    }

    #hero .hero__moon {
        position: absolute;
        left: 50%;
        top: 0;
        width: 9%;
        height: 9%;
        margin: -4.5% 0 0 -4.5%;
        border-radius: var(--radius-2);
        background: var(--color-3);
    }

    @media (min-width: 900px) and (orientation: landscape) {
        #hero {
            --ap: min(36vw, 60svh);
        }

        #hero .hero__title {
            font-size: min(26.5vw, 43svh);
        }

        #hero .hero__period {
            position: relative;
            background: transparent;
        }

        #hero .hero__stage {
            left: 0;
            top: auto;
            bottom: 0;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        #hero .hero__mask {
            animation: hero-mask .95s linear backwards;
        }

        #hero .hero__glyphs {
            animation: hero-rise .95s cubic-bezier(.16, .84, .24, 1) backwards;
        }

        #hero .hero__stage {
            transform-origin: 50% 50%;
            animation: hero-swell 1.1s cubic-bezier(.2, .9, .25, 1.12) backwards;
        }

        #hero .hero__intro {
            animation: hero-lift .9s .12s cubic-bezier(.16, .84, .24, 1) backwards;
        }

        #hero .hero__img {
            animation: hero-turn 46s linear infinite;
        }

        #hero .hero__orbit {
            animation: hero-orbit 13s linear infinite;
        }

        #hero.is-offscreen .hero__img,
        #hero.is-offscreen .hero__orbit {
            animation-play-state: paused;
        }

        @media (min-width: 900px) and (orientation: landscape) {
            #hero .hero__stage {
                transform-origin: 0 100%;
                animation-name: hero-inflate;
            }
        }

        @keyframes hero-mask {

            from,
            to {
                clip-path: inset(-40% -8% 0 -8%);
            }
        }

        @keyframes hero-rise {
            from {
                transform: translateY(92%);
            }
        }

        @keyframes hero-swell {
            from {
                transform: scale(.72);
            }
        }

        @keyframes hero-inflate {
            from {
                transform: scale(.36);
            }
        }

        @keyframes hero-lift {
            from {
                transform: translateY(26px);
            }
        }

        @keyframes hero-turn {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes hero-orbit {
            to {
                transform: rotate(360deg);
            }
        }
    }
}

@layer sections {
    #statement {
        position: relative;
        padding: var(--space-2) var(--space-1) calc(var(--space-2) * 0.9);
        background: var(--color-2);
    }

    #statement .statement__title {
        font-size: clamp(40px, 8.7vw, 140px);
    }

    #statement .statement__line {
        display: block;
    }

    #statement .statement__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        margin-top: clamp(56px, 11vh, 120px);
    }

    #statement .statement__lead {
        max-width: 75rem;
    }

    #statement .statement__index ul {
        display: grid;
        gap: 12px;
    }

    @media (min-width: 900px) {
        #statement .statement__body {
            grid-template-columns: minmax(0, 15fr) minmax(0, 4fr);
            align-items: start;
        }

        #statement .statement__lead {
            font-size: clamp(24px, 2.35vw, 34px);
            line-height: 1.16;
            letter-spacing: -0.025em;
        }
    }
}

@layer sections {
    #work {
        position: relative;
        color: var(--color-2);
    }

    #work .work__plate {
        position: absolute;
        inset: 0 0 -2px;
        background: var(--color-1);
    }

    #work .work__stage {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: clamp(28px, 4vh, 48px);
        padding: var(--space-2) var(--space-1);
    }

    #work .work__head {
        display: flex;
        align-items: flex-start;
        gap: 40px;
        flex-direction: column;
    }

    #work .work__lead {
        max-width: 45rem;
        color: var(--color-5);
    }

    #work .work__track {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    #work .case {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: var(--radius-1);
        background: var(--color-7);
        aspect-ratio: 4 / 3;
    }

    #work .case__media {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    #work .case__img {
        position: absolute;
        top: 0;
        left: -7%;
        width: 114%;
        max-width: none;
        height: 100%;
        object-fit: cover;
        filter: grayscale(200%) brightness(80%) contrast(120%);
        transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #work .case:hover .case__img {
        filter: grayscale(0%) brightness(100%) contrast(100%);
    }

    #work .case__media::after {
        content: "";
        position: absolute;
        inset: 40% 0 0;
        background: linear-gradient(to top, color-mix(in srgb, var(--color-1) 100%, transparent), transparent);
    }

    #work .case__tag {
        position: absolute;
        left: clamp(25px, 2.5vw, 35px);
        top: clamp(25px, 2.5vw, 35px);
        background: color-mix(in srgb, var(--color-1) 62%, transparent);
    }

    #work .case__text {
        position: absolute;
        left: clamp(18px, 2.4vw, 36px);
        right: clamp(18px, 2.4vw, 36px);
        bottom: clamp(18px, 2.4vw, 36px);
        display: grid;
        gap: 10px;
    }

    #work .case__line {
        max-width: 30rem;
        color: var(--color-2);
    }

    @media (min-width: 700px) {
        #work .work__track {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        #work .case {
            aspect-ratio: 4 / 3;
        }

        #work .case:last-child:nth-child(odd) {
            grid-column: span 2;
            aspect-ratio: 4 / 3;
        }
    }
}

@layer sections {
    #again {
        position: relative;
        background: var(--color-1);
        color: var(--color-2);
    }

    #again .again__stage {
        position: relative;
        padding: calc(var(--space-2) * 0.7) var(--space-1) var(--space-2);
    }

    #again .again__head {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: 16px 40px;
    }

    #again .again__lead {
        max-width: 27rem;
        color: var(--color-5);
    }

    #again .again__swing {
        margin-top: clamp(40px, 7vh, 72px);
    }

    #again .again__wheel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    #again .partner__card {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: var(--radius-1);
        background: var(--color-7);
        aspect-ratio: 4 / 3;
    }

    #again .partner__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #again .partner__card::after {
        content: "";
        position: absolute;
        inset: 35% 0 0;
        background: linear-gradient(to top, color-mix(in srgb, var(--color-1) 86%, transparent), transparent);
    }

    #again .partner__text {
        position: absolute;
        z-index: 1;
        left: clamp(16px, 1.8vw, 26px);
        right: clamp(16px, 1.8vw, 26px);
        bottom: clamp(16px, 1.8vw, 26px);
        display: grid;
        justify-items: start;
        gap: 10px;
    }

    #again .partner__year {
        background: color-mix(in srgb, var(--color-1) 62%, transparent);
    }

    #again .partner__name {
        font-size: clamp(28px, 2.6vw, 40px);
    }

    #again .partner__line {
        color: var(--color-2);
    }

    @media (min-width: 640px) {
        #again .again__wheel {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1000px) {
        #again .again__wheel {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}

@layer sections {
    #capabilities {
        position: relative;
        padding: calc(var(--space-2) * 0.6) var(--space-1) var(--space-2);
        background: var(--color-1);
        color: var(--color-2);
    }

    #capabilities .capabilities__head {
        display: flex;
        align-items: flex-end;
        gap: 40px;
        flex-direction: column;
        margin-bottom: clamp(40px, 7vh, 80px);
    }

    #capabilities .capabilities__lead {
        max-width: 45rem;
        text-align: right;
        color: var(--color-5);
    }

    #capabilities .capabilities__deck {
        display: grid;
        gap: 20px;
    }

    #capabilities .service {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: clamp(18px, 2.4vw, 34px);
        overflow: hidden;
        box-shadow: var(--shadow-1);
        transform-origin: center top;
    }

    #capabilities .service__text {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    #capabilities .service__line {
        max-width: 30rem;
        color: var(--color-6);
    }

    #capabilities .service__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: auto;
        padding-top: 8px;
        color: var(--color-6);
    }

    #capabilities .service__media {
        overflow: hidden;
        border-radius: var(--radius-3);
        aspect-ratio: 4 / 3;
    }

    #capabilities .service__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%) brightness(80%) contrast(120%);
        transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #capabilities .service:hover .service__media img {
        filter: grayscale(0%) brightness(100%) contrast(100%);
    }

    #capabilities .service__shade {
        position: absolute;
        inset: 0;
        background: var(--color-1);
        opacity: 0;
        pointer-events: none;
    }

    @media (min-width: 900px) {
        #capabilities .service {
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
            gap: clamp(24px, 3vw, 48px);
            height: auto;
            min-height: 450px;
        }

        #capabilities .service__media {
            aspect-ratio: 4 / 3;
            height: auto;
        }
    }
}

@layer sections {
    #method {
        position: relative;
        padding: var(--space-2) var(--space-1);
        background: var(--color-2);
    }

    #method .method__head {
        display: grid;
        gap: 24px;
        max-width: 60rem;
        margin-bottom: clamp(48px, 9vh, 110px);
    }

    #method .method__lead {
        max-width: 34rem;
    }

    #method .method__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 92px;
        gap: 20px;
        align-items: start;
    }

    #method .method__ring {
        position: relative;
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        aspect-ratio: 1;
    }

    #method .method__svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        rotate: -90deg;
    }

    #method .method__track {
        fill: none;
        stroke: color-mix(in srgb, var(--color-1) 14%, transparent);
        stroke-width: 1.5;
    }

    #method .method__arc {
        fill: none;
        stroke: var(--color-3);
        stroke-width: 5;
        stroke-linecap: round;
    }

    #method .method__station {
        position: absolute;
        left: calc(50% + 42.5% * var(--x));
        top: calc(50% + 42.5% * var(--y));
        width: 25px;
        height: 25px;
        margin: -13px 0 0 -13px;
        border-radius: var(--radius-2);
        background: var(--color-3);
    }

    #method .method__arm {
        position: absolute;
        inset: 7.5%;
    }

    #method .method__runner {
        position: absolute;
        left: 50%;
        top: 0;
        width: 25px;
        height: 25px;
        margin: -13px 0 0 -13px;
        border: 3px solid var(--color-3);
        border-radius: var(--radius-2);
        background: var(--color-2);
    }

    #method .method__steps {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        gap: clamp(56px, 18vh, 120px);
    }

    #method .step {
        display: grid;
        gap: 14px;
        max-width: 34rem;
    }

    #method .step__text {
        color: var(--color-6);
    }

    @media (min-width: 900px) {
        #method .method__body {
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
            gap: 7vw;
        }

        #method .method__ring {
            grid-column: 1;
            width: min(100%, 50svh);
            justify-self: center;
        }

        #method .method__steps {
            grid-column: 2;
            padding-block: 8svh 14svh;
        }
    }

    @media (max-width: 899px) {
        #method .method__body {
            position: relative;
            display: block;
            padding-top: 40px;
        }

        #method .method__ring {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: min(90vw, 450px);
            max-width: 450px;
            opacity: 0.12;
            z-index: 0;
            pointer-events: none;
            grid-column: unset;
            grid-row: unset;
        }

        #method .method__steps {
            position: relative;
            z-index: 1;
            grid-column: unset;
            grid-row: unset;
            padding: 0;
        }
    }
}

@layer sections {
    #studio {
        position: relative;
        padding: var(--space-2) var(--space-1);
        background: var(--color-2);
    }

    #studio .studio__head {
        display: grid;
        gap: 28px;
        margin-bottom: clamp(48px, 8vh, 96px);
    }

    #studio .studio__lead {
        max-width: 42rem;
    }

    #studio .studio__collage {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #studio .shot {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-3);
        background: var(--color-4);
    }

    #studio .shot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #studio .shot--wide {
        grid-column: span 2;
        aspect-ratio: 4 / 3;
    }

    #studio .shot--tall {
        aspect-ratio: 4 / 3;
    }

    #studio .studio__roles {
        grid-column: span 2;
        display: grid;
        align-content: start;
        gap: 18px;
        padding-top: 24px;
    }

    #studio .studio__roles ul {
        display: grid;
    }

    #studio .role {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 16px;
        padding: 14px 0;
        border-top: 1px dashed color-mix(in srgb, var(--color-1) 16%, transparent);
    }

    #studio .role__place {
        color: var(--color-6);
    }

    @media (min-width: 900px) {
        #studio .studio__head {
            grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
            align-items: end;
            column-gap: 6vw;
        }

        #studio .studio__collage {
            display: block;
            aspect-ratio: 4 / 3;
        }

        #studio .shot {
            position: absolute;
        }

        #studio .shot:nth-child(1) {
            left: 0;
            top: 0;
            width: 34%;
        }

        #studio .shot:nth-child(2) {
            left: 37%;
            top: 5.5%;
            width: 19%;
        }

        #studio .shot:nth-child(3) {
            left: 8%;
            top: 47%;
            width: 20%;
        }

        #studio .shot:nth-child(4) {
            left: 59%;
            top: 0;
            width: 41%;
        }

        #studio .shot:nth-child(5) {
            left: 31%;
            top: 53.3%;
            width: 36%;
        }

        #studio .studio__roles {
            position: absolute;
            left: 71%;
            top: 55%;
            width: 29%;
            padding-top: 0;
        }
    }
}

@layer sections {
    #journal {
        position: relative;
        padding: calc(var(--space-2) * 0.6) var(--space-1) var(--space-2);
        background: var(--color-2);
    }

    #journal .journal__head {
        margin-bottom: clamp(40px, 7vh, 88px);
    }

    #journal .journal__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        align-items: start;
    }

    #journal .journal__frame {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-1);
        background: var(--color-4);
        aspect-ratio: 4 / 3;
    }

    #journal .journal__shot {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #journal .journal__shot:first-child {
        z-index: 1;
    }

    #journal .journal__list {
        display: grid;
        gap: clamp(36px, 8vh, 72px);
    }

    #journal .story {
        display: grid;
        gap: 12px;
        max-width: 36rem;
        padding-top: 20px;
        border-top: 1px dashed color-mix(in srgb, var(--color-1) 16%, transparent);
    }

    #journal .story__meta {
        color: var(--color-6);
    }

    #journal .story__meta span {
        color: var(--color-3);
    }

    #journal .story__text {
        color: var(--color-6);
    }

    @media (min-width: 900px) {
        #journal .journal__body {
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
            gap: 7vw;
        }

        #journal .journal__frame {
            aspect-ratio: 4 / 3;
        }

        #journal .journal__list {
            gap: clamp(64px, 18vh, 170px);
            padding-block: 6svh 10svh;
        }
    }
}

@layer sections {
    #faq {
        position: relative;
        display: grid;
        gap: 40px;
        padding: var(--space-2) var(--space-1);
        background: var(--color-2);
        border-top: 1px dashed color-mix(in srgb, var(--color-1) 12%, transparent);
        max-width: 1420px;
        margin: 0 auto;
    }

    #faq .faq__title {
        font-size: clamp(48px, 7.2vw, 116px);
        margin: 0;
    }

    #faq .faq__list {
        max-width: 100%;
        display: grid;
        gap: 0;
    }

    #faq .faq__item {
        border-bottom: 1px dashed color-mix(in srgb, var(--color-1) 16%, transparent);
    }

    #faq .faq__item:first-child {
        border-top: 1px dashed color-mix(in srgb, var(--color-1) 16%, transparent);
    }

    .faq__item {
        border-bottom: 1px dashed color-mix(in srgb, var(--color-1) 16%, transparent);
    }

    .faq__item:first-child {
        border-top: 1px dashed color-mix(in srgb, var(--color-1) 16%, transparent);
    }

    .faq__item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 22px 0;
        cursor: pointer;
        list-style: none;
    }

    .faq__item summary::-webkit-details-marker {
        display: none;
    }

    .faq__mark {
        position: relative;
        flex: none;
        width: 34px;
        height: 34px;
        border: 1.5px solid var(--color-1);
        border-radius: var(--radius-2);
    }

    .faq__mark::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 10px;
        height: 10px;
        border-radius: var(--radius-2);
        background: var(--color-3);
        transition: transform .45s cubic-bezier(.7, 0, .2, 1);
    }

    .faq__item[open] .faq__mark::after {
        transform: scale(3.1);
    }

    .faq__answer {
        max-width: 55rem;
        padding: 0 0 26px;
        color: var(--color-6);
        line-height: 1.65;
    }

    #faq summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 22px 0;
        cursor: pointer;
        list-style: none;
    }

    #faq summary::-webkit-details-marker {
        display: none;
    }

    #faq .faq__mark {
        position: relative;
        flex: none;
        width: 34px;
        height: 34px;
        border: 1.5px solid var(--color-1);
        border-radius: var(--radius-2);
    }

    #faq .faq__mark::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 10px;
        height: 10px;
        border-radius: var(--radius-2);
        background: var(--color-3);
        transition: transform .45s cubic-bezier(.7, 0, .2, 1);
    }

    #faq details[open] .faq__mark::after {
        transform: scale(3.1);
    }

    #faq .faq__answer {
        max-width: 55rem;
        padding: 0 0 26px;
        color: var(--color-6);
        line-height: 1.65;
    }

    @media (min-width: 900px) {
        #faq {
            grid-template-columns: 2fr 3fr;
            gap: 48px;
        }

        #faq .faq__list {
            max-width: none;
            margin: 0;
        }
    }
}

@layer sections {
    #contact {
        position: relative;
        padding: var(--space-2) var(--space-1);
        background: var(--color-3);
        color: var(--color-2);
    }

    #contact :focus-visible {
        outline-color: var(--color-2);
    }

    #contact .contact__title {
        font-size: min(19vw, calc((100vw - 2 * var(--space-1)) / (var(--len) * 0.5)));
        line-height: 0.86;
        white-space: nowrap;
    }

    #contact .contact__title .m-dot {
        background: var(--color-2);
    }

    #contact .contact__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        margin-top: clamp(40px, 8vh, 88px);
    }

    #contact .contact__info {
        display: grid;
        align-content: start;
        gap: 32px;
    }

    #contact .contact__lead {
        max-width: 30rem;
    }

    #contact .contact__mail {
        font-family: var(--font-1);
        font-size: clamp(28px, 3.4vw, 50px);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.035em;
        text-decoration: none;
    }

    #contact .contact__mail span {
        background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
        padding-bottom: 4px;
    }

    #contact .contact__places {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 24px;
    }

    #contact .contact__places dt {
        margin-bottom: 6px;
    }

    #contact .contact__places dd a {
        text-decoration: none;
    }

    #contact .contact__form {
        display: grid;
        gap: 18px;
        padding: clamp(22px, 3vw, 40px);
    }

    #contact .contact__form label {
        display: grid;
        gap: 2px;
        color: var(--color-6);
    }

    #contact .contact__form .m-field {
        color: var(--color-1);
    }

    #contact .contact__form :focus-visible {
        outline-color: var(--color-3);
    }

    #contact .contact__pair {
        display: grid;
        gap: 18px;
    }

    #contact .contact__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        padding-top: 6px;
    }

    #contact .contact__status {
        color: var(--color-1);
    }

    @media (min-width: 640px) {
        #contact .contact__pair {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1000px) {
        #contact .contact__grid {
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
            gap: 6vw;
        }
    }
}

@layer sections {
    #footer {
        --ap: min(30vw, 44svh);
        position: relative;
        padding: clamp(80px, 12vh, 140px) var(--space-1) 28px;
        background: var(--color-1);
        color: var(--color-2);
        overflow: clip;
    }

    #footer .footer__bye {
        position: relative;
        padding-top: calc(var(--ap) - 250px);
        white-space: nowrap;
        font-size: min(36vw, 40svh);
    }

    #footer .footer__word {
        display: inline-block;
    }

    #footer .footer__period {
        position: relative;
        display: inline-block;
        width: 0.19em;
        height: 0.19em;
        margin-left: 0.035em;
        vertical-align: baseline;
    }

    #footer .footer__aperture {
        position: absolute;
        left: 0;
        bottom: 0;
        width: var(--ap);
        height: var(--ap);
        overflow: hidden;
        border-radius: var(--radius-2);
        background: var(--color-3);
        transform-origin: 0 100%;
    }

    #footer .footer__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #footer .footer__tint {
        position: absolute;
        inset: 0;
        background: var(--color-3);
        opacity: 0;
    }

    #footer .footer__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
        margin-top: clamp(48px, 9vh, 96px);
        padding-top: 32px;
        border-top: 1px dashed color-mix(in srgb, var(--color-2) 16%, transparent);
    }

    #footer .footer__col {
        display: grid;
        align-content: start;
        gap: 6px;
    }

    #footer .footer__label {
        margin-bottom: 8px;
        color: var(--color-5);
    }

    #footer .footer__news {
        grid-column: 1 / -1;
        display: grid;
        gap: 14px;
    }

    #footer .footer__field {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #footer .footer__field .m-field {
        flex: 1;
    }

    #footer .footer__note {
        color: var(--color-5);
    }

    #footer .footer__legal {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px 24px;
        margin-top: 56px;
        color: var(--color-5);
    }

    @media (min-width: 900px) {
        #footer .footer__bye {
            font-size: min(24vw, 40svh);
        }

        #footer .footer__grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr);
        }

        #footer .footer__news {
            grid-column: auto;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        #footer .footer__img {
            animation: footer-turn 46s linear infinite;
        }

        #footer.is-offscreen .footer__img {
            animation-play-state: paused;
        }

        @keyframes footer-turn {
            to {
                transform: rotate(360deg);
            }
        }
    }
}

@layer scenes {
    [data-live] [data-motion~="rise"] {
        animation-name: motion-rise;
        animation-duration: 0.95s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        animation-fill-mode: both;
        animation-play-state: paused;
    }

    [data-live] [data-motion~="rise"] .m-dot {
        animation-name: motion-rise-dot;
        animation-duration: 0.75s;
        animation-delay: 0.42s;
        animation-timing-function: linear(0, 0.1254, 0.2419, 0.3497, 0.4492, 0.5406, 0.6243, 0.7005, 0.7696, 0.8318, 0.8875, 0.9369, 0.9804, 1.0182, 1.0507, 1.0781, 1.1008, 1.119, 1.1331, 1.1433, 1.15, 1.1534, 1.1539, 1.1517, 1.1472, 1.1406, 1.1323, 1.1225, 1.1116, 1.0998, 1.0875, 1.0749, 1.0624, 1.0502, 1.0387, 1.0281, 1.0188, 1.011, 1.0051, 1.0013, 1);
        animation-fill-mode: both;
        animation-play-state: paused;
    }

    [data-live] [data-motion~="rise"].is-in,
    [data-live] [data-motion~="rise"].is-in .m-dot {
        animation-play-state: running;
    }

    @keyframes motion-rise {
        0% {
            translate: 0 38%;
            clip-path: inset(0% -6% 100% -6%);
        }

        99.998% {
            clip-path: inset(-30% -6% -30% -6%);
        }

        100% {
            translate: 0 0;
            clip-path: none;
        }
    }

    @keyframes motion-rise-dot {
        0% {
            scale: 0;
            translate: 0 -260%;
        }

        100% {
            scale: 1;
            translate: 0 0;
        }
    }

    [data-live] [data-motion~="ink"] {
        view-timeline: --motion-ink block;
    }

    [data-live] [data-motion~="ink"] .w {
        --motion-ink-total: calc(0.3 + 0.06 * (var(--n) - 1));
        animation-name: motion-ink;
        animation-timeline: --motion-ink;
        animation-range: cover calc(12vh + 0.06 * var(--i) / var(--motion-ink-total) * (100% - 80vh)) cover calc(12vh + (0.06 * var(--i) + 0.3) / var(--motion-ink-total) * (100% - 80vh));
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    @keyframes motion-ink {
        0% {
            opacity: 0.16;
        }

        100% {
            opacity: 1;
        }
    }

    [data-live] [data-motion~="arrive"] [data-items]>* {
        animation-name: motion-arrive;
        animation-duration: 0.8s;
        animation-delay: calc(var(--i, 0) * 0.07s);
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        animation-fill-mode: both;
        animation-play-state: paused;
    }

    [data-live] [data-motion~="arrive"].is-in [data-items]>* {
        animation-play-state: running;
    }

    @keyframes motion-arrive {
        0% {
            translate: 0 70%;
            opacity: 0;
        }

        100% {
            translate: 0 0;
            opacity: 1;
        }
    }

    [data-live] [data-motion~="iris"] {
        animation-name: motion-iris-clippath;
        animation-duration: 1.15s;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
        animation-fill-mode: both;
        animation-play-state: paused;
    }

    [data-live] [data-motion~="iris"].is-in {
        animation-play-state: running;
    }

    [data-live] [data-motion~="iris"] img {
        animation-name: motion-iris-img-scale;
        animation-duration: 1.5s;
        animation-delay: 0.15s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        animation-fill-mode: both;
        animation-play-state: paused;
        transform: none;
    }

    [data-live] [data-motion~="iris"].is-in img {
        animation-play-state: running;
    }

    @keyframes motion-iris-clippath {
        0% {
            clip-path: circle(0% at 50% 50%);
        }

        99.998% {
            clip-path: circle(75% at 50% 50%);
        }

        100% {
            clip-path: none;
        }
    }

    @keyframes motion-iris-img-scale {
        0% {
            scale: 1.2;
        }

        100% {
            scale: 1;
        }
    }
}

@layer scenes {
    [data-live] {
        --ease-power1-inout: linear(0, 0.0013, 0.005, 0.0112, 0.02, 0.0313, 0.045, 0.0612, 0.08, 0.1013, 0.125, 0.1512, 0.18, 0.2112, 0.245, 0.2813, 0.32, 0.3613, 0.405, 0.4512, 0.5, 0.5487, 0.595, 0.6388, 0.68, 0.7188, 0.755, 0.7887, 0.82, 0.8488, 0.875, 0.8988, 0.92, 0.9387, 0.955, 0.9688, 0.98, 0.9888, 0.995, 0.9988, 1);
        --ease-power3-in: linear(0, 0, 0, 0, 0.0001, 0.0002, 0.0005, 0.0009, 0.0016, 0.0026, 0.0039, 0.0057, 0.0081, 0.0112, 0.015, 0.0198, 0.0256, 0.0326, 0.041, 0.0509, 0.0625, 0.076, 0.0915, 0.1093, 0.1296, 0.1526, 0.1785, 0.2076, 0.2401, 0.2763, 0.3164, 0.3608, 0.4096, 0.4632, 0.522, 0.5862, 0.6561, 0.7321, 0.8145, 0.9037, 1);
    }

    [data-live] #hero {
        view-timeline: --hero-t1 block;
        view-timeline-inset: 0;
    }

    [data-live] #hero .hero__aperture,
    [data-live] #hero .hero__word,
    [data-live] #hero .hero__tint {
        animation-timeline: --hero-t1;
        animation-fill-mode: both;
    }

    [data-live] #hero .hero__aperture {
        animation-name: hero-aperture-move, hero-aperture-shrink;
        animation-range: cover calc(100% - 100vh) cover calc(100% - 30vh);
        animation-timing-function: var(--ease-power1-inout), var(--ease-power3-in);
        transform: none;
    }

    [data-live] #hero .hero__orbit {
        animation-name: hero-orbit, hero-orbit-fade;
        animation-duration: 13s, auto;
        animation-iteration-count: infinite, 1;
        animation-timing-function: linear, linear;
        animation-timeline: auto, --hero-t1;
        animation-range: normal, cover calc(100% - 100vh) cover calc(100% - 79vh);
        animation-fill-mode: none, both;
    }

    [data-live] #hero .hero__intro {
        animation-name: hero-lift, hero-intro-exit;
        animation-duration: 0.9s, auto;
        animation-delay: 0.12s, 0s;
        animation-timing-function: cubic-bezier(.16, .84, .24, 1), cubic-bezier(0.3333, 0, 0.6667, 0.3333);
        animation-timeline: auto, --hero-t1;
        animation-range: normal, cover calc(100% - 100vh) cover calc(100% - 30vh);
        animation-fill-mode: backwards, both;
    }

    [data-live] #hero .hero__tint {
        animation-name: hero-tint-flood;
        animation-range: cover calc(100% - 72vh) cover calc(100% - 30vh);
        animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
    }

    @keyframes hero-aperture-move {
        0% {
            translate: 0px 0px;
        }

        100% {
            translate: var(--hero-dx, 0px) var(--hero-dy, 0px);
        }
    }

    @keyframes hero-aperture-shrink {
        0% {
            scale: 1;
        }

        100% {
            scale: var(--hero-s, 1);
        }
    }

    @keyframes hero-orbit-fade {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes hero-word-aside {
        0% {
            translate: 0px 0px;
        }

        100% {
            translate: -14% 0px;
        }
    }

    @keyframes hero-intro-exit {
        0% {
            translate: 0px 0px;
        }

        100% {
            translate: 0px -70px;
        }
    }

    @keyframes hero-tint-flood {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @media (min-width: 900px) and (orientation: landscape) {
        [data-live] #hero .hero__word {
            animation-name: hero-word-aside;
            animation-range: cover calc(100% - 100vh) cover calc(100% - 30vh);
            animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0.3333);
            transform: none;
        }
    }
}

@layer scenes {
    [data-live] #statement {
        view-timeline: --statement-t1 block;
        view-timeline-inset: 0;
    }

    [data-live] #statement-title>span:nth-of-type(-n+2),
    [data-live] #statement .m-dot {
        animation-timeline: --statement-t1;
        animation-fill-mode: both;
        transform: none;
    }

    [data-live] #statement-title>span:nth-of-type(-n+2) {
        animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
    }

    [data-live] #statement-title>span:nth-of-type(1) {
        animation-name: statement-span-statement-line-translate;
        animation-range: cover 0% cover 56vh;
    }

    [data-live] #statement-title>span:nth-of-type(2) {
        animation-name: statement-span-statement-line-translate-2;
        animation-range: cover 8.4vh cover 64.4vh;
    }

    [data-live] #statement .m-dot {
        animation-name: statement-span-m-dot-scale;
        animation-range: cover 63vh cover 70vh;
        animation-timing-function: linear;
    }

    @keyframes statement-span-statement-line-translate {
        0% {
            translate: -6% 85%;
        }

        100% {
            translate: 0px 0px;
        }
    }

    @keyframes statement-span-statement-line-translate-2 {
        0% {
            translate: 9% 85%;
        }

        100% {
            translate: 0px 0px;
        }
    }

    @keyframes statement-span-m-dot-scale {
        0% {
            scale: 0;
        }

        99.998% {
            scale: 0.999;
        }

        100% {
            scale: 1;
        }
    }
}

@layer scenes {
    @media (prefers-reduced-motion: no-preference) {
        [data-live] #work {
            height: calc(100svh + var(--run, 0px));
        }

        [data-live] #work .work__stage {
            position: sticky;
            top: 0;
            height: 100svh;
            min-height: 560px;
            padding-top: clamp(84px, 13svh, 120px);
            padding-bottom: clamp(24px, 5svh, 48px);
            grid-template-rows: auto minmax(0, 1fr);
            overflow: clip;
        }

        [data-live] #work .work__window {
            display: flex;
            align-items: center;
            min-height: 0;
            transform-origin: 0 50%;
        }

        [data-live] #work .work__track {
            display: flex;
            gap: clamp(14px, 1.6vw, 24px);
            width: max-content;
            height: min(100%, 64svh);
        }

        [data-live] #work .case {
            width: auto;
            height: 100%;
            aspect-ratio: 4 / 3;
            flex: none;
        }

        @media (min-width: 700px) {
            [data-live] #work .case {
                aspect-ratio: 4 / 3;
            }
        }
    }
}

@layer scenes {
    [data-live] #work {
        view-timeline: --work-t1 block;
        view-timeline-inset: 0;
    }

    [data-live] #work .work__plate,
    [data-live] #work .work__track,
    [data-live] #work .case__img,
    [data-live] #work .work__window,
    [data-live] #work .case {
        animation-timeline: --work-t1;
        animation-fill-mode: both;
    }

    [data-live] #work .work__plate {
        animation-name: work-plate-grow;
        animation-range: cover 0% cover 85vh;
        animation-timing-function: cubic-bezier(0.3333, 0.6667, 0.6667, 1);
    }

    [data-live] #work .work__track {
        animation-name: work-track-slide;
        animation-range: cover 100vh cover calc(100% - 100vh);
        animation-timing-function: linear;
        transform: none;
    }

    [data-live] #work .case__img {
        animation-name: work-img-drift;
        animation-range: cover 100vh cover calc(100% - 100vh);
        animation-timing-function: linear;
        transform: none;
    }

    [data-live] #work .work__window,
    [data-live] #work .case {
        animation-range: cover calc(100% - 100vh) cover calc(100% - 30vh);
        animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0.3333);
        transform: none;
    }

    [data-live] #work .work__window {
        animation-name: work-window-sweep;
    }

    [data-live] #work .case {
        animation-name: work-case-bend;
    }

    @keyframes work-plate-grow {
        0% {
            clip-path: inset(0% 3.2% round 44px);
        }

        100% {
            clip-path: inset(0%);
        }
    }

    @keyframes work-track-slide {
        0% {
            translate: 0px 0px;
        }

        100% {
            translate: calc(-1 * var(--work-run, 0px)) 0px;
        }
    }

    @keyframes work-img-drift {
        0% {
            translate: -5% 0px;
        }

        100% {
            translate: 5% 0px;
        }
    }

    @keyframes work-window-sweep {
        0% {
            translate: 0px 0px;
        }

        100% {
            translate: -20vw 0px;
        }
    }

    @keyframes work-case-bend {
        0% {
            translate: 0px 0px;
            rotate: 0deg;
        }

        100% {
            translate: var(--work-x, 0px) var(--work-y, 0px);
            rotate: var(--work-r, 0deg);
        }
    }
}

@layer scenes {
    @media (prefers-reduced-motion: no-preference) {
        [data-live] #again {
            height: calc(100svh + var(--spin, 0px));
        }

        [data-live] #again .again__stage {
            position: sticky;
            top: 0;
            height: 100svh;
            min-height: 560px;
            overflow: clip;
            padding-top: clamp(84px, 13svh, 120px);
        }

        [data-live] #again .again__swing {
            position: absolute;
            left: 50%;
            top: calc(var(--arc-top) + var(--radius));
            width: 0;
            height: 0;
            margin: 0;
        }

        [data-live] #again .again__wheel {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 0;
            height: 0;
        }

        [data-live] #again .partner {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            rotate: calc(var(--i) * var(--step));
        }

        [data-live] #again .partner__card {
            position: absolute;
            left: calc(var(--card) / -2);
            top: calc(var(--radius) * -1);
            width: var(--card);
        }
    }
}

@layer scenes {
    [data-live] #again {
        view-timeline: --again-t1 block;
        view-timeline-inset: 0;
    }

    [data-live] #again .again__wheel,
    [data-live] #again .again__swing,
    [data-live] #again .again__head {
        animation-timeline: --again-t1;
        animation-fill-mode: both;
        transform: none;
    }

    [data-live] #again .again__wheel {
        animation-name: again-wheel-turn;
        animation-range: cover 70vh cover calc(100% - 100vh);
        animation-timing-function: linear;
    }

    [data-live] #again .again__swing {
        animation-name: again-swing-turn, again-swing-rise;
        animation-range: cover 0% cover 70vh;
        animation-timing-function: cubic-bezier(0.3333, 0.6667, 0.6667, 1), cubic-bezier(0.3333, 0, 0.6667, 0);
    }

    [data-live] #again .again__head {
        animation-name: again-head-rise;
        animation-range: cover 0% cover 70vh;
        animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
    }

    @keyframes again-wheel-turn {
        0% {
            rotate: var(--again-from, 0deg);
        }

        100% {
            rotate: var(--again-to, 0deg);
        }
    }

    @keyframes again-swing-turn {
        0% {
            rotate: var(--again-swing-r, 0deg);
        }

        100% {
            rotate: 0deg;
        }
    }

    @keyframes again-swing-rise {
        0% {
            translate: 0px var(--again-swing-y, 0px);
        }

        100% {
            translate: 0px 0px;
        }
    }

    @keyframes again-head-rise {
        0% {
            translate: 0px 45%;
        }

        100% {
            translate: 0px 0px;
        }
    }
}

@layer scenes {
    @media (prefers-reduced-motion: no-preference) {
        [data-live] #capabilities .service {
            position: sticky;
            top: calc(clamp(80px, 12svh, 108px) + var(--i) * 14px);
            transform-origin: 50% 0;
        }
    }
}

@layer scenes {
    [data-live] #capabilities .capabilities__deck>.service {
        --i: calc(0 + var(--i) * 1);
    }

    [data-live] #capabilities {
        timeline-scope: --capabilities-t1, --capabilities-t2, --capabilities-t3, --capabilities-t4;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(-n+4) {
        animation-name: capabilities-li-service-scale;
        transform: none;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(-n+4),
    [data-live] #capabilities .capabilities__deck>li:nth-of-type(-n+4)>.service__shade {
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(2) {
        view-timeline: --capabilities-t1 block;
        view-timeline-inset: 0;
        animation-timeline: --capabilities-t2;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(3) {
        view-timeline: --capabilities-t2 block;
        view-timeline-inset: 0;
        animation-timeline: --capabilities-t3;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(4) {
        view-timeline: --capabilities-t3 block;
        view-timeline-inset: 0;
        animation-timeline: --capabilities-t4;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(5) {
        view-timeline: --capabilities-t4 block;
        view-timeline-inset: 0;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(1) {
        animation-timeline: --capabilities-t1;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(-n+4)>.service__shade {
        animation-name: capabilities-span-service-shade-opacity;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(1)>.service__shade {
        animation-timeline: --capabilities-t1;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(2)>.service__shade {
        animation-timeline: --capabilities-t2;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(3)>.service__shade {
        animation-timeline: --capabilities-t3;
    }

    [data-live] #capabilities .capabilities__deck>li:nth-of-type(4)>.service__shade {
        animation-timeline: --capabilities-t4;
    }

    @keyframes capabilities-li-service-scale {
        0% {
            scale: 1;
            filter: blur(0px);
        }

        100% {
            scale: 0.85;
            filter: blur(4px);
        }
    }

    @keyframes capabilities-span-service-shade-opacity {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 0.7;
        }
    }

    @media (min-width: 900px) {
        [data-live] #capabilities .capabilities__deck>li:nth-of-type(2) {
            animation-range: cover 0% cover calc(100vh - 124px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(3) {
            animation-range: cover 0% cover calc(100vh - 138px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(4) {
            animation-range: cover 0% cover calc(100vh - 152px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(1),
        [data-live] #capabilities .capabilities__deck>li:nth-of-type(1)>.service__shade {
            animation-range: cover 0% cover calc(100vh - 110px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(2)>.service__shade {
            animation-range: cover 0% cover calc(100vh - 124px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(3)>.service__shade {
            animation-range: cover 0% cover calc(100vh - 138px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(4)>.service__shade {
            animation-range: cover 0% cover calc(100vh - 152px);
        }
    }

    @media (max-width: 899px) {
        [data-live] #capabilities .capabilities__deck>li:nth-of-type(2) {
            animation-range: cover 0% cover calc(100vh - 125.4px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(3) {
            animation-range: cover 0% cover calc(100vh - 139.4px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(4) {
            animation-range: cover 0% cover calc(100vh - 153.4px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(1),
        [data-live] #capabilities .capabilities__deck>li:nth-of-type(1)>.service__shade {
            animation-range: cover 0% cover calc(100vh - 111.4px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(2)>.service__shade {
            animation-range: cover 0% cover calc(100vh - 125.4px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(3)>.service__shade {
            animation-range: cover 0% cover calc(100vh - 139.4px);
        }

        [data-live] #capabilities .capabilities__deck>li:nth-of-type(4)>.service__shade {
            animation-range: cover 0% cover calc(100vh - 153.4px);
        }
    }
}

@layer scenes {
    [data-live] #method .method__ring {
        position: sticky;
        top: 104px;
    }

    @media (min-width: 900px) {
        [data-live] #method .method__ring {
            top: calc(50svh - min(25svh, 21vw));
        }
    }

    [data-live] #method .method__body {
        timeline-scope: --method-steps;
    }

    [data-live] #method .method__steps {
        view-timeline: --method-steps block;
    }

    [data-live] #method .method__arc,
    [data-live] #method .method__arm {
        animation-timeline: --method-steps;
        animation-range: cover 38vh cover calc(100% - 62vh);
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    [data-live] #method .method__arc {
        animation-name: method-arc-draw;
    }

    [data-live] #method .method__arm {
        animation-name: method-arm-turn;
    }

    [data-live] #method .step {
        --method-from: max(0, var(--i) / var(--n) - 0.03);
        animation-name: method-step-light;
        animation-timeline: --method-steps;
        animation-range: cover calc(38vh + var(--method-from) * (100% - 100vh)) cover calc(38vh + (var(--method-from) + 0.07) * (100% - 100vh));
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    [data-live] #method .method__station {
        --method-at: calc(var(--i) / var(--n));
        animation-name: method-station-swell, method-station-settle;
        animation-timeline: --method-steps, --method-steps;
        animation-range: cover calc(38vh + var(--method-at) * (100% - 100vh)) cover calc(38vh + (var(--method-at) + 0.05) * (100% - 100vh)), cover calc(38vh + (var(--method-at) + 0.06) * (100% - 100vh)) cover calc(38vh + (var(--method-at) + 0.14) * (100% - 100vh));
        animation-timing-function: linear(0, 0.1444, 0.278, 0.4011, 0.514, 0.6172, 0.711, 0.7958, 0.872, 0.9399, 1, 1.0526, 1.098, 1.1367, 1.169, 1.1953, 1.216, 1.2314, 1.242, 1.2481, 1.25, 1.2482, 1.243, 1.2348, 1.224, 1.2109, 1.196, 1.1796, 1.162, 1.1437, 1.125, 1.1063, 1.088, 1.0704, 1.054, 1.0391, 1.026, 1.0152, 1.007, 1.0018, 1), linear;
        animation-fill-mode: both, forwards;
    }

    @keyframes method-arc-draw {
        0% {
            stroke-dashoffset: 1;
        }

        100% {
            stroke-dashoffset: 0;
        }
    }

    @keyframes method-arm-turn {
        0% {
            rotate: 0deg;
        }

        100% {
            rotate: 360deg;
        }
    }

    @keyframes method-step-light {
        0% {
            opacity: 0.2;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes method-station-swell {
        0% {
            scale: 0.4;
        }

        100% {
            scale: 1.35;
        }
    }

    @keyframes method-station-settle {
        0% {
            scale: 1.35;
        }

        100% {
            scale: 1;
        }
    }
}

@layer scenes {
    [data-live] #studio .studio__collage {
        view-timeline: --studio-t1 block;
        view-timeline-inset: 0;
    }

    [data-live] #studio .shot {
        animation-name: studio-shot-deal;
        animation-timeline: --studio-t1;
        animation-range: cover calc(18vh + var(--studio-a, 0) * (50% - 23vh)) cover calc(18vh + var(--studio-b, 1) * (50% - 23vh));
        animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
        animation-fill-mode: both;
        transform: none;
    }

    @media (max-width: 899px) {
        [data-live] #studio .shot {
            animation-range: cover calc(18vh + var(--studio-a, 0) * 72vh) cover calc(18vh + var(--studio-b, 1) * 72vh);
        }
    }

    @keyframes studio-shot-deal {
        0% {
            translate: var(--studio-x, 0px) var(--studio-y, 0px);
            rotate: var(--studio-tilt, 0deg);
            scale: 0.66;
        }

        100% {
            translate: 0px 0px;
            rotate: 0deg;
            scale: 1;
        }
    }
}

@layer scenes {
    @media (prefers-reduced-motion: no-preference) {
        [data-live] #journal .journal__frame {
            position: sticky;
            z-index: 1;
            top: 80px;
        }

        [data-live] #journal .journal__shot:first-child {
            z-index: auto;
        }

        @media (min-width: 900px) {
            [data-live] #journal .journal__frame {
                top: calc(50svh - min(30svh, 22vw));
                max-height: 60svh;
            }
        }
    }
}

@layer scenes {
    [data-live] #journal {
        timeline-scope: --journal-t2, --journal-t3, --journal-t4;
    }

    [data-live] #journal .journal__list>.story {
        view-timeline-inset: 0;
        animation-name: journal-li-story-opacity;
        animation-timeline: --journal-item;
        animation-range: cover 16vh cover 43.2vh;
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    [data-live] #journal .journal__list>li:first-of-type {
        animation-range: cover 16vh cover 50vh;
    }

    [data-live] #journal .journal__list>li:nth-of-type(1) {
        view-timeline: --journal-item block;
    }

    [data-live] #journal .journal__list>li:nth-of-type(2) {
        view-timeline: --journal-item block, --journal-t2 block;
    }

    [data-live] #journal .journal__list>li:nth-of-type(3) {
        view-timeline: --journal-item block, --journal-t3 block;
    }

    [data-live] #journal .journal__list>li:nth-of-type(4) {
        view-timeline: --journal-item block, --journal-t4 block;
    }

    [data-live] #journal .journal__frame>img:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4)) {
        animation-name: journal-img-journal-shot-clippath;
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }

    [data-live] #journal .journal__frame>img:nth-of-type(2) {
        animation-timeline: --journal-t2;
        animation-range: cover 16vh cover 50vh;
        animation-fill-mode: both;
    }

    [data-live] #journal .journal__frame>img:nth-of-type(3) {
        animation-timeline: --journal-t3;
        animation-range: cover 16vh cover 50vh;
        animation-fill-mode: both;
    }

    [data-live] #journal .journal__frame>img:nth-of-type(4) {
        animation-timeline: --journal-t4;
        animation-range: cover 16vh cover 50vh;
        animation-fill-mode: both;
    }

    @keyframes journal-li-story-opacity {
        0% {
            opacity: 0.25;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes journal-img-journal-shot-clippath {
        0% {
            clip-path: circle(0% at 50% 50%);
        }

        100% {
            clip-path: circle(75% at 50% 50%);
        }
    }
}

@layer scenes {
    [data-live] {
        --ease-power2-in: linear(0, 0, 0.0001, 0.0004, 0.001, 0.0019, 0.0034, 0.0054, 0.008, 0.0114, 0.0156, 0.0208, 0.027, 0.0343, 0.0429, 0.0527, 0.064, 0.0768, 0.0911, 0.1072, 0.125, 0.1447, 0.1664, 0.1901, 0.216, 0.2441, 0.2746, 0.3075, 0.343, 0.3811, 0.4219, 0.4655, 0.512, 0.5615, 0.6141, 0.6699, 0.729, 0.7914, 0.8574, 0.9269, 1);
    }

    [data-live] #contact {
        view-timeline: --contact-t1 block;
        view-timeline-inset: 0;
    }

    [data-live] #contact .contact__voice,
    [data-live] #contact .m-dot {
        animation-timeline: --contact-t1;
        animation-fill-mode: both;
        transform: none;
    }

    [data-live] #contact .contact__voice {
        animation-name: contact-span-contact-voice-fontweight, contact-span-contact-voice-scale;
        animation-range: cover 0% cover 85vh;
        animation-timing-function: linear;
    }

    [data-live] #contact .m-dot {
        animation-name: contact-span-m-dot-scale, contact-span-m-dot-translate;
        animation-range: cover 63.75vh cover 85vh;
        animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0), var(--ease-power2-in);
    }

    @keyframes contact-span-contact-voice-fontweight {
        0% {
            font-weight: 400;
        }

        100% {
            font-weight: 800;
        }
    }

    @keyframes contact-span-contact-voice-scale {
        0% {
            scale: 0.82;
        }

        100% {
            scale: 1;
        }
    }

    @keyframes contact-span-m-dot-scale {
        0% {
            scale: 0;
        }

        99.998% {
            scale: 0.9988;
        }

        100% {
            scale: 1;
        }
    }

    @keyframes contact-span-m-dot-translate {
        0% {
            translate: 0px -400%;
        }

        99.998% {
            translate: 0px -0.48%;
        }

        100% {
            translate: 0px 0px;
        }
    }
}

@layer scenes {
    [data-live] {
        --ease-power2-inout: linear(0, 0.0001, 0.0005, 0.0017, 0.004, 0.0078, 0.0135, 0.0214, 0.032, 0.0456, 0.0625, 0.0832, 0.108, 0.1373, 0.1715, 0.2109, 0.256, 0.3071, 0.3645, 0.4287, 0.5, 0.5713, 0.6355, 0.6929, 0.744, 0.7891, 0.8285, 0.8627, 0.892, 0.9168, 0.9375, 0.9544, 0.968, 0.9786, 0.9865, 0.9922, 0.996, 0.9983, 0.9995, 0.9999, 1);
    }

    [data-live] #footer .m-text-2 {
        view-timeline: --footer-t1 block;
        view-timeline-inset: 0;
    }

    [data-live] #footer .footer__aperture {
        animation-name: footer-aperture-swell;
        animation-timeline: --footer-t1;
        animation-range: cover calc(100% - 100vh) cover calc(100% - 55vh);
        animation-timing-function: var(--ease-power2-inout);
        animation-fill-mode: both;
        transform: none;
    }

    [data-live] #footer .footer__word {
        animation-name: footer-word-rise;
        animation-timeline: --footer-t1;
        animation-range: cover calc(100% - 100vh) cover calc(100% - 64vh);
        animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
        animation-fill-mode: both;
        transform: none;
    }

    [data-live] #footer .footer__tint {
        animation-name: footer-tint-clear;
        animation-timeline: --footer-t1;
        animation-range: cover calc(100% - 79.75vh) cover calc(100% - 57.25vh);
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    @keyframes footer-aperture-swell {
        0% {
            scale: var(--footer-dot, 1);
        }

        100% {
            scale: 1;
        }
    }

    @keyframes footer-word-rise {
        0% {
            translate: 0px 30%;
        }

        100% {
            translate: 0px 0px;
        }
    }

    @keyframes footer-tint-clear {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}

.page-head {
    position: relative;
    padding: clamp(140px, 18vh, 240px) 0 clamp(100px, 14vh, 140px);
    background: var(--color-1);
    color: var(--color-2);
    border-bottom: 1px dashed color-mix(in srgb, var(--color-2) 8%, transparent);
    text-align: center;
}

.page-head>div,
.page-section>div {
    margin: 0 auto;
    padding: 0 var(--space-1);
}

.page-head__tag {
    display: none;
}

.page-head__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: clamp(20px, 3vh, 32px);
    color: color-mix(in srgb, var(--color-2) 70%, transparent);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.page-head__back:hover {
    color: var(--color-2);
}

.page-head__back svg {
    flex-shrink: 0;
}

.page-head__title {
    font-size: clamp(36px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: clamp(16px, 2.5vh, 24px);
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
}

.page-head__lead {
    max-width: 55rem;
    color: var(--color-2);
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.6;
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
}

.page-section {
    position: relative;
    padding: calc(var(--space-2) * 0.7) 0 calc(var(--space-2) * 0.5);
    background: var(--color-2);
    color: var(--color-1);
}

.page-section--surface {
    background: color-mix(in srgb, var(--color-1) 2%, var(--color-2));
}

.page-filter {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: clamp(32px, 4vh, 48px);
    padding: 6px 0 clamp(16px, 2.5vh, 24px);
    border-bottom: 1px dashed color-mix(in srgb, var(--color-1) 8%, transparent);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.page-filter::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1025px) {
    .page-filter {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .page-filter {
        padding-left: var(--space-1);
        padding-right: var(--space-1);
        margin-left: calc(var(--space-1) * -1);
        margin-right: calc(var(--space-1) * -1);
    }
}

.page-filter__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-1) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-1) 12%, transparent);
    color: var(--color-1);
    text-decoration: none;
    font-family: var(--font-2);
    font-size: 13px;
    letter-spacing: -0.01em;
    font-weight: 500;
    line-height: 1.3;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.page-filter__item:hover {
    border-color: color-mix(in srgb, var(--color-1) 35%, transparent);
    background: color-mix(in srgb, var(--color-1) 7%, transparent);
    color: var(--color-1);
}

.page-filter__item.is-active {
    background: var(--color-1);
    color: var(--color-2);
    border-color: var(--color-1);
}

.page-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 768px) {
    .page-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: calc(var(--space-1) * -1);
        margin-right: calc(var(--space-1) * -1);
        padding-left: var(--space-1);
        padding-right: var(--space-1);
    }

    .page-tags::-webkit-scrollbar {
        display: none;
    }

    .page-tags .m-badge {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

.page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 2.5vw, 36px);
}

@media (min-width: 768px) {
    .page-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .page-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.project-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-1);
    background: var(--color-7);
    aspect-ratio: 4 / 3;
    color: var(--color-2);
    text-decoration: none;
}

.project-card__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--color-1);
}

.project-card__img {
    position: absolute;
    top: 0;
    left: -7%;
    width: 114%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    filter: grayscale(200%) brightness(80%) contrast(120%);
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-card__img {
    filter: grayscale(0%) brightness(100%) contrast(100%);
}

.project-card__media::after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-1) 100%, transparent), transparent);
}

.project-card__tag {
    position: absolute;
    left: clamp(20px, 2.5vw, 35px);
    top: clamp(20px, 2.5vw, 35px);
    background: color-mix(in srgb, var(--color-1) 62%, transparent);
    color: var(--color-2);
    z-index: 2;
}

.project-card__content {
    position: absolute;
    left: clamp(18px, 2.4vw, 36px);
    right: clamp(18px, 2.4vw, 36px);
    bottom: clamp(18px, 2.4vw, 36px);
    display: grid;
    gap: 10px;
    z-index: 2;
}

.project-card__meta {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-2);
}

.project-card__title {
    margin: 0;
    color: var(--color-2);
}

.project-card__desc {
    max-width: 34rem;
    color: var(--color-2);
    margin: 0;
    line-height: 1.45;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.project-card__cta {
    display: none;
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: clamp(32px, 4vw, 48px);
    overflow: hidden;
    border-radius: var(--radius-1);
    background: color-mix(in srgb, var(--color-1) 2%, transparent);
    height: 100%;
}

@media (min-width: 900px) {
    .service-card {
        min-height: auto;
    }
}

.service-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 4px;
}

.service-card__num {
    font-family: var(--font-1);
    font-size: 24px;
    font-weight: 800;
    color: color-mix(in srgb, var(--color-1) 20%, transparent);
    line-height: 1;
}

.service-card__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.service-card__text h2 {
    min-height: 2.4em;
    display: flex;
    align-items: flex-start;
}

.service-card__text h2 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.service-card__text h2 a:hover {
    color: var(--color-3);
}

.service-card__desc {
    max-width: 100%;
    color: var(--color-6);
    line-height: 1.6;
    margin: 0;
    font-size: clamp(15px, 1.4vw, 17px);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-card__deliverables {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.service-card__deliverable {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--color-6);
    line-height: 1.5;
}

.service-card__deliverable svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    stroke: var(--color-3);
    stroke-width: 2.5;
    margin-top: 2px;
}

.service-card__media {
    overflow: hidden;
    border-radius: var(--radius-3);
    aspect-ratio: 4 / 3;
    width: 100%;
    margin-top: auto;
}

@media (min-width: 900px) {
    .service-card__media {
        aspect-ratio: 4 / 3;
    }
}

.service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(80%) contrast(120%);
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .service-card__media img {
    filter: grayscale(0%) brightness(100%) contrast(100%);
}

.service-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 8px;
    margin-top: auto;
}

.blog-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-1);
    background: var(--color-7);
    aspect-ratio: 4 / 3;
    color: var(--color-2);
    text-decoration: none;
}

.blog-card__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--color-1);
}

.blog-card__img {
    position: absolute;
    top: 0;
    left: -7%;
    width: 114%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    filter: grayscale(200%) brightness(80%) contrast(120%);
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-card__img {
    filter: grayscale(0%) brightness(100%) contrast(100%);
}

.blog-card__media::after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-1) 100%, transparent), transparent);
}

.blog-card__content {
    position: absolute;
    left: clamp(18px, 2.4vw, 32px);
    right: clamp(18px, 2.4vw, 32px);
    bottom: clamp(18px, 2.4vw, 32px);
    display: grid;
    gap: 8px;
    z-index: 2;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-2);
    margin: 0;
}

.blog-card__title {
    margin: 0;
    color: var(--color-2);
    line-height: 1.25;
}

.blog-card__summary {
    color: var(--color-2);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-detail {
    margin: 0 auto;
    padding: 0 var(--space-1);
    display: grid;
    gap: clamp(40px, 5vw, 64px);
    align-items: start;
}

@media (min-width: 1024px) {
    .page-detail {
        grid-template-columns: 5fr 7fr;
    }
}

.page-detail__hero {
    position: relative;
    border-radius: var(--radius-1);
    overflow: hidden;
    background: var(--color-7);
    aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
    .page-detail__hero {
        position: sticky;
        top: clamp(100px, 12vh, 140px);
    }
}

.page-detail__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(200%) brightness(80%) contrast(120%);
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-detail__hero:hover img {
    filter: grayscale(0%) brightness(100%) contrast(100%);
}

.page-detail__content {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vh, 56px);
    min-width: 0;
}

.page-detail__lead {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.55;
    margin-top: 16px;
    font-weight: 400;
    color: var(--color-1);
}

.page-detail__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    padding: 32px;
    border-radius: var(--radius-1);
    background: color-mix(in srgb, var(--color-1) 3%, #f8f8fb);
    border: 1px solid color-mix(in srgb, var(--color-1) 8%, transparent);
}

.page-detail__meta-item dt {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--color-1) 50%, transparent);
    margin-bottom: 6px;
}

.page-detail__meta-item dd {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-1);
}

.page-detail__results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.page-detail__stat {
    padding: 32px;
    border-radius: var(--radius-1);
    background: var(--color-1);
    color: var(--color-2);
    text-align: center;
}

.page-detail__stat-num {
    font-family: var(--font-1);
    font-size: clamp(36px, 4.5vw, 54px);
    font-weight: 800;
    color: var(--color-3);
    line-height: 1;
    margin-bottom: 8px;
}

.page-detail__stat-label {
    font-size: 15px;
    color: var(--color-2);
}

.page-detail__article {
    line-height: 1.7;
    font-size: 17px;
}

.page-detail__article h3 {
    margin-bottom: 16px;
}

.page-detail__article p {
    margin-bottom: 24px;
    color: var(--color-1);
}

.page-detail__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px dashed color-mix(in srgb, var(--color-1) 12%, transparent);
    gap: 20px;
}

.page-cta {
    position: relative;
    padding: clamp(48px, 7vw, 80px) clamp(32px, 5vw, 60px);
    background: var(--color-3);
    color: var(--color-2);
    border-radius: var(--radius-1);
    margin: clamp(32px, 5vh, 48px) 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.page-cta__title {
    font-size: clamp(28px, 4.5vw, 54px);
    line-height: 1.05;
    margin-bottom: 18px;
    max-width: 20ch;
}

.page-cta__lead {
    max-width: 36rem;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.5;
    margin-bottom: 32px;
    color: var(--color-2);
}

.page-cta .m-btn {
    background: var(--color-2);
    color: var(--color-1);
}

.page-cta .m-btn::after {
    background: var(--color-1);
}

@media (hover: hover) {
    .page-cta .m-btn:hover {
        color: var(--color-2);
    }
}

.contact-map {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    background: var(--color-1);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(100%) invert(1) contrast(90%) brightness(95%);
    display: block;
}

@media (min-width: 768px) {
    .contact-map {
        height: 500px;
    }
}

@media (min-width: 1024px) {
    .contact-map {
        height: 550px;
    }
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader__text {
    font-family: 'Gabarito', system-ui, -apple-system, sans-serif;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #ffffff;
    display: flex;
    align-items: baseline;
}

.preloader__char {
    display: inline-block;
    opacity: 0;
    animation: preloader-char-in 0.4s ease-out forwards;
}

.preloader__char--dot {
    width: 0.19em;
    height: 0.19em;
    background: #ff0000;
    border-radius: 999px;
    margin-left: 0.035em;
    opacity: 0;
    animation: preloader-dot-scale 0.6s ease-out forwards;
    animation-delay: 0.3s;
    vertical-align: baseline;
}

.preloader__char:nth-child(1) {
    animation-delay: 0s;
}

.preloader__char:nth-child(2) {
    animation-delay: 0.03s;
}

.preloader__char:nth-child(3) {
    animation-delay: 0.06s;
}

.preloader__char:nth-child(4) {
    animation-delay: 0.09s;
}

.preloader__char:nth-child(5) {
    animation-delay: 0.12s;
}

.preloader__char:nth-child(6) {
    animation-delay: 0.15s;
}

.preloader__char:nth-child(7) {
    animation-delay: 0.18s;
}

.preloader__char:nth-child(8) {
    animation-delay: 0.21s;
}

.preloader__char:nth-child(9) {
    animation-delay: 0.24s;
}

@keyframes preloader-char-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes preloader-dot-scale {
    0% {
        opacity: 0;
        transform: scale(8);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

body.preloader-active {
    overflow: hidden;
}

@media (max-width: 1024px),
(hover: none) {

    #work .case__img,
    #capabilities .service__media img,
    .project-card__img,
    .service-card__media img,
    .blog-card__img,
    .page-detail__hero img {
        filter: none !important;
    }
}