/*
Theme Name: Lance no Digital
Theme URI: https://lancenodigital.com.br
Author: Lance no Digital
Author URI: https://lancenodigital.com.br
Description: Tema one-page para a agência Lance no Digital — marketing digital em Brasília.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lance-no-digital
Tags: one-page, marketing, agency
*/

/* ===== fonts ===== */
    /* latin-ext */
    @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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @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;
    }

    /* cyrillic-ext */
    @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;
    }

    /* cyrillic */
    @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;
    }

    /* math */
    @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-208E, U+2090-209C, 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;
    }

    /* symbols */
    @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-1F1AD, 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-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB,
        U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
    }

    /* vietnamese */
    @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;
    }

    /* latin-ext */
    @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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @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;
    }

/* ===== layers ===== */
    @layer tokens, base, atoms, layout, sections, scenes;

/* ===== tokens ===== */
    @layer tokens {
      :root {
        /* --color-1: #0d0c11; */
        /* --color-1: #0a1627; */
        --color-1: #141821;
        --color-2: #ffffff;
        --color-3: #003cd3;
        --color-4: #efeef4;
        --color-5: #aaa7b4;
        --color-6: #5d5a67;
        --color-7: #1f1d26;
        --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);
        --shadow-3: 0 0 0 2px var(--color-1);
        --space-1: clamp(16px, 3.4vw, 48px);
        --space-2: clamp(96px, 15vh, 200px);
      }
    }

/* ===== base ===== */
    @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%;
      }

      html.lenis,
      html.lenis body {
        height: auto;
      }

      .lenis:not(.lenis-autoToggle).lenis-stopped {
        overflow: clip;
      }

      .lenis [data-lenis-prevent] {
        overscroll-behavior: contain;
      }

      .lenis.lenis-smooth iframe {
        pointer-events: none;
      }

      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;
      }

      .skip {
        position: fixed;
        left: var(--space-1);
        top: 12px;
        z-index: 100;
        padding: 10px 16px;
        border-radius: var(--radius-2);
        background: var(--color-2);
        color: var(--color-1);
        font-family: var(--font-2);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transform: translateY(-160%);
      }

      .skip:focus-visible {
        transform: none;
      }
    }

/* ===== system ===== */
    @layer atoms {
      .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: 600;
        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 0.5s cubic-bezier(0.7, 0, 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 0.35s;
      }

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

      .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 0.5s cubic-bezier(0.7, 0, 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(17px, 1.45vw, 21px);
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.015em;
        text-decoration: none;
      }

      .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 0.45s cubic-bezier(0.7, 0, 0.2, 1);
      }

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

      @media (hover: hover) {
        .m-link:hover .m-link__label::after {
          transform: scaleX(1);
        }

        .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 0.45s cubic-bezier(0.7, 0, 0.2, 1);
      }

      @media (hover: hover) {
        .m-link-2:hover::after {
          transform: scaleX(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 0.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 0.45s cubic-bezier(0.7, 0, 0.2, 1);
      }

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

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

        .m-icon:hover::after {
          transform: scale(1);
        }
      }

      .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: 30px;
        padding: 0 12px;
        border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
        border-radius: var(--radius-2);
        font-family: var(--font-2);
        font-size: 13px;
        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 solid 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;
      }
    }

/* ===== section:navigation ===== */
    @layer sections {
      #navigation {
        position: fixed;
        z-index: 40;
        inset: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px var(--space-1);
        pointer-events: none;
      }

      #navigation>* {
        pointer-events: auto;
      }

      #navigation .nav__brand {
        display: inline-flex;
        align-items: baseline;
        min-height: 48px;
        padding: 9px 18px 0;
        border-radius: var(--radius-2);
        background: var(--color-1);
        color: var(--color-2);
        font-family: var(--font-1);
        font-size: 25px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.05em;
        text-decoration: none;
      }

      #navigation .nav__links {
        margin-inline: auto;
        padding: 0 8px;
        border-radius: var(--radius-2);
        background: var(--color-1);
        color: var(--color-2);
      }

      #navigation .nav__links ul {
        display: flex;
      }

      #navigation .nav__cta {
        /* box-shadow: var(--shadow-3);  */
      }

      #navigation .nav__links a {
        display: block;
        margin: 0 14px;
        padding-block: 14px;
      }

      #navigation .nav__links a::after {
        bottom: 10px;
      }

      #navigation .nav__menu {
        display: none;
        margin-left: auto;
      }

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

      #navigation .menu[hidden] {
        display: none;
      }

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

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

      #navigation .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;
      }

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

      @media (max-width: 899px) {

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

        #navigation .nav__menu {
          display: inline-flex;
        }
      }
    }

/* ===== section:hero ===== */
    @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: linear-gradient(rgb(20 24 33 / 0.5), rgb(20 24 33 / 1)),
          url("imgs/hero-bg-2.jpg") center / cover no-repeat var(--color-1);
        /* background: linear-gradient(rgb(0 60 211 / 0.2), rgb(0 60 211 / 0.5)),
          url("imgs/hero-bg-2.jpg") center / cover no-repeat 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 0.95s linear backwards;
        }

        #hero .hero__glyphs {
          animation: hero-rise 0.95s cubic-bezier(0.16, 0.84, 0.24, 1) backwards;
        }

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

        #hero .hero__intro {
          animation: hero-lift 0.9s 0.12s cubic-bezier(0.16, 0.84, 0.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(0.72);
          }
        }

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

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

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

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

/* ===== section:statement ===== */
    @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: 36rem;
      }

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

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

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

/* ===== section:work ===== */
    @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;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: 16px 40px;
      }

      #work .work__lead {
        max-width: 25rem;
        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: 16 / 10;
      }

      @media (min-width: 700px) {
        #work .case {
          aspect-ratio: 4 / 5;
        }
      }

      #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;
      }

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

      #work .case__tag {
        position: absolute;
        left: clamp(18px, 2vw, 28px);
        top: clamp(18px, 2vw, 28px);
        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: 16 / 11;
        }

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

/* ===== scene-style:work ===== */
    @layer scenes {
      @media (prefers-reduced-motion: no-preference) {

        @media (min-width: 700px) {
          #work.is-track {
            height: calc(100svh + var(--run, 0px));
          }

          #work.is-track .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;
          }

          #work.is-track .work__window {
            display: flex;
            align-items: center;
            min-height: 0;
            transform-origin: 0 50%;
          }

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

          #work.is-track .case {
            width: auto;
            height: 100%;
            aspect-ratio: 16 / 10.5;
            flex: none;
          }
        }

        @media (max-width: 699px) {
          #work.is-stack .work__track {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 16px;
          }

          #work.is-stack .case {
            aspect-ratio: 16 / 10;
            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          }
        }
      }
    }

/* ===== section:again ===== */
    @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 / 5;
      }

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

      #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));
        }
      }
    }

/* ===== scene-style:again ===== */
    @layer scenes {
      @media (prefers-reduced-motion: no-preference) {
        #again.is-wheel {
          height: calc(100svh + var(--spin, 0px));
        }

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

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

        #again.is-wheel .again__wheel {
          position: absolute;
          left: 0;
          top: 0;
          display: block;
          width: 0;
          height: 0;
        }

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

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

/* ===== section:capabilities ===== */
    @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;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: 20px 40px;
        margin-bottom: clamp(40px, 7vh, 80px);
      }

      #capabilities .capabilities__lead {
        max-width: 27rem;
        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);
      }

      #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: 16 / 10;
      }

      #capabilities .service__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      #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: min(62svh, 560px);
          min-height: 400px;
        }

        #capabilities .service__media {
          aspect-ratio: auto;
          height: 100%;
        }
      }
    }

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

/* ===== section:method ===== */
    @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: 9%;
        height: 9%;
        margin: -4.5% 0 0 -4.5%;
        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: 15%;
        height: 15%;
        margin: -7.5% 0 0 -7.5%;
        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, 170px);
      }

      #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;
        }
      }
    }

/* ===== scene-style:method ===== */
    @layer scenes {
      @media (prefers-reduced-motion: no-preference) {
        #method.is-cycle .method__ring {
          position: sticky;
          top: 104px;
        }

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

/* ===== section:studio ===== */
    @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: 3 / 2;
      }

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

      #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 solid 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: 1.85;
        }

        #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;
        }
      }
    }

/* ===== section:journal ===== */
    @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: 16 / 10;
      }

      #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 solid 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 / 5;
        }

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

/* ===== scene-style:journal ===== */
    @layer scenes {
      @media (prefers-reduced-motion: no-preference) {
        #journal.is-swap .journal__frame {
          position: sticky;
          z-index: 1;
          top: 80px;
        }

        #journal.is-swap .journal__shot:first-child {
          z-index: auto;
        }

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

/* ===== section:faq ===== */
    @layer sections {
      #faq {
        position: relative;
        display: grid;
        gap: 40px;
        padding: var(--space-2) var(--space-1);
        background: var(--color-2);
        border-top: 1px solid color-mix(in srgb, var(--color-1) 12%, transparent);
      }

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

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

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

      #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 0.45s cubic-bezier(0.7, 0, 0.2, 1);
      }

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

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

      @media (hover: hover) {
        #faq summary:hover .faq__mark::after {
          transform: scale(1.8);
        }

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

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

/* ===== section:contact ===== */
    @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;
        }
      }
    }

/* ===== section:footer ===== */
    @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: var(--ap);
        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 solid 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);
          }
        }
      }
    }