/* Compiled Tailwind base styles from the original site. */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root,
  :host {
    --font-sans:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial,
      sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
      monospace;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    border: 0px solid;
  }
  html,
  :host {
    line-height: 1.5;
    text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(
      --default-font-family,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      "Noto Sans",
      Arial,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0px;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0px;
    border-color: inherit;
    border-collapse: collapse;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0px;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(currentcolor, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0px;
  }
  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0px;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width))
      var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
      var(--tw-ring-shadow), var(--tw-shadow);
  }
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    ::before,
    ::after,
    ::backdrop {
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}
/* Local fonts. */
/* cyrillic-ext */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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: 300 800;
  font-display: swap;
  src: url(fonts/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: 300 800;
  font-display: swap;
  src: url(fonts/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: 300 800;
  font-display: swap;
  src: url(fonts/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: 300 800;
  font-display: swap;
  src: url(fonts/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: 300 800;
  font-display: swap;
  src: url(fonts/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: 300 800;
  font-display: swap;
  src: url(fonts/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: 300 800;
  font-display: swap;
  src: url(fonts/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;
}
/* cyrillic-ext */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/Yq6W-LOTXCb04q32xlpwtsZfrxE.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: "Unbounded";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/Yq6W-LOTXCb04q32xlpwv8ZfrxE.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/Yq6W-LOTXCb04q32xlpwtMZfrxE.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: "Unbounded";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/Yq6W-LOTXCb04q32xlpwtcZfrxE.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: "Unbounded";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/Yq6W-LOTXCb04q32xlpwu8Zf.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;
}

/* Site styles, in their original cascade order. */

:root {
  --bg: #0a0a0b;
  --bg2: #131315;
  --bg3: #1a1a1d;
  --ink: #f1ecdd;
  --mut: #8f8c82;
  --acc: #ff4f1f;
  --line: rgba(241, 236, 221, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fd: "Unbounded", "Onest", sans-serif;
  --fb: "Onest", system-ui, sans-serif;
  --fm: "JetBrains Mono", monospace;
  --h1: 5.4rem;
  --h2: 3.5rem;
  --h3: 1.9rem;
  --p: 1.1rem;
  --pad: 3rem;
  --r: 2rem;
}
@media (max-width: 820px) {
  :root {
    --h1: 2.05rem;
    --h2: 1.7rem;
    --h3: 1.25rem;
    --p: 1rem;
    --pad: 1.1rem;
    --r: 1.3rem;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: clamp(13px, 1vw, 34px);
}
@media (max-width: 820px) {
  html {
    font-size: clamp(14px, 1.2vw + 11.3px, 22px);
  }
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--p)/1.5 var(--fb);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
img,
video {
  display: block;
  max-width: 100%;
}
::selection {
  background: var(--acc);
  color: #000;
}
.page {
  display: none;
}
.page.act {
  display: block;
}
.wrap {
  padding-left: var(--pad);
  padding-right: var(--pad);
}
section {
  position: relative;
}
.fd {
  font-family: var(--fd);
}
.mono {
  font-family: var(--fm);
}
.h1,
.h2 {
  font-family: var(--fd);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.h1 {
  font-size: var(--h1);
}
.h2 {
  font-size: var(--h2);
}
.h3 {
  font-family: var(--fd);
  font-weight: 500;
  font-size: var(--h3);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.acc {
  color: var(--acc);
}
.lead {
  font-size: calc(var(--p) * 1.12);
  color: #cfcabb;
  max-width: 34em;
}
.rec {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--acc);
  animation: blink 1.2s steps(2) infinite;
  flex: none;
}
@keyframes blink {
  50% {
    opacity: 0.15;
  }
}
/* tag like "01 about" */
.tag {
  display: inline-flex;
  font: 700 0.72rem var(--fm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tag b {
  background: var(--ink);
  color: #0a0a0b;
  padding: 0.42rem 0.9rem;
  border-radius: 99px 0 0 99px;
  font-weight: 700;
}
.tag i {
  font-style: normal;
  border: 1px solid var(--ink);
  padding: 0.36rem 1rem;
  border-radius: 0 99px 99px 0;
  margin-left: -1px;
}
.light .tag b {
  background: #0a0a0b;
  color: var(--ink);
}
.light .tag i {
  border-color: #0a0a0b;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  font: 500 0.72rem var(--fm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition:
    background 0.4s var(--ease),
    color 0.4s,
    border-color 0.4s;
}
/* buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.05rem 1.7rem;
  border-radius: 99px;
  background: var(--acc);
  color: #0a0a0b;
  font-weight: 600;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.5s var(--ease),
    color 0.4s;
  will-change: transform;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(102%);
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  transition:
    transform 0.6s var(--ease),
    border-radius 0.6s var(--ease);
}
.btn:hover::before {
  transform: none;
  border-radius: 0;
}
.btn.ghost {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn.ghost:hover {
  color: #0a0a0b;
}
.btn.dark {
  background: #0a0a0b;
  color: var(--ink);
}
.btn.dark::before {
  background: var(--acc);
}
.btn.dark:hover {
  color: #0a0a0b;
}
.btn.sm {
  padding: 0.75rem 1.3rem;
  font-size: 0.9rem;
}
.btn svg,
.arr {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.5s var(--ease);
}
.btn:hover svg {
  transform: translate(0.2rem, -0.2rem) rotate(0);
}
.circ {
  display: inline-grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition:
    background 0.5s var(--ease),
    color 0.5s,
    transform 0.6s var(--ease),
    border-color 0.5s;
}
.circ svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.6s var(--ease);
}
/* reveal */
[data-r] {
  opacity: 0;
  transform: translateY(2.4rem);
  filter: blur(10px);
  transition:
    opacity 1s var(--ease),
    transform 1.2s var(--ease),
    filter 1s var(--ease),
    clip-path 1.3s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
[data-r].in {
  opacity: 1;
  transform: none;
  filter: none;
}
[data-r="clip"] {
  transform: none;
  filter: none;
  opacity: 1;
  clip-path: inset(0 0 100% 0 round var(--r));
}
[data-r="clip"].in {
  clip-path: inset(0 0 0 0 round var(--r));
}
[data-r="scale"] {
  transform: scale(0.88);
}
[data-r="left"] {
  transform: translateX(-3rem);
}
[data-r="right"] {
  transform: translateX(3rem);
}
.ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.ln > span {
  display: inline-block;
  transform: translateY(110%) rotate(3deg);
  transform-origin: 0 100%;
  transition: transform 1.2s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.in .ln > span,
.ln.in > span {
  transform: none;
}
/* loader */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--pad);
  transition: transform 1s var(--ease);
}
#loader.done {
  transform: translateY(-100%);
}
.ld-num {
  font: 700 22vw/0.8 var(--fd);
  letter-spacing: -0.06em;
  color: var(--acc);
  display: flex;
  align-items: flex-start;
}
.ld-num small {
  font-size: 0.28em;
  margin-top: 0.25em;
}
.ld-bar {
  height: 2px;
  background: var(--line);
  margin: 1rem 0;
}
.ld-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
}
#loader p {
  font: 500 0.75rem var(--fm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
/* curtain */
#curtain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--acc);
  transform: translateY(100%);
  pointer-events: none;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 0 0/12% 12% 0 0;
}
#curtain.up {
  transform: none;
  transition: transform 0.8s var(--ease);
  border-radius: 0;
}
#curtain.out {
  transform: translateY(-100%);
  transition: transform 0.8s var(--ease);
}
.ct-in {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  font: 800 9vw/1 var(--fd);
  letter-spacing: -0.05em;
  color: #0a0a0b;
}
.ct-in span {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* cursor */
#cur {
  position: fixed;
  left: 0;
  top: 0;
  width: 3.2rem;
  height: 3.2rem;
  margin: -1.6rem 0 0 -1.6rem;
  border-radius: 50%;
  border: 1px solid rgba(241, 236, 221, 0.55);
  pointer-events: none;
  z-index: 9999;
  display: grid;
  place-items: center;
  opacity: 0;
  transition:
    width 0.45s var(--ease),
    height 0.45s var(--ease),
    margin 0.45s var(--ease),
    background 0.3s,
    border-color 0.3s,
    opacity 0.3s;
}
#cur span {
  font: 700 0.62rem var(--fm);
  text-transform: uppercase;
  color: #0a0a0b;
  opacity: 0;
  transition: opacity 0.3s;
  text-align: center;
  line-height: 1.1;
}
#cur.on {
  opacity: 1;
}
#cur.big {
  width: 6.2rem;
  height: 6.2rem;
  margin: -3.1rem 0 0 -3.1rem;
  background: var(--acc);
  border-color: var(--acc);
}
#cur.big span {
  opacity: 1;
}
#cur.sm {
  width: 0.9rem;
  height: 0.9rem;
  margin: -0.45rem 0 0 -0.45rem;
  background: var(--ink);
  border-color: var(--ink);
}
@media (hover: none), (pointer: coarse) {
  #cur {
    display: none;
  }
}
/* hud */
#hud {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 80;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.5rem 0.95rem;
  border-radius: 99px;
  background: rgba(10, 10, 11, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  font: 500 0.68rem var(--fm);
  letter-spacing: 0.04em;
  pointer-events: none;
  color: var(--ink);
}
#hud em {
  font-style: normal;
  color: var(--mut);
}
@media (max-width: 820px) {
  #hud {
    left: 0.7rem;
    bottom: 0.7rem;
    font-size: 0.6rem;
  }
}
/* header */
#hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: 1rem var(--pad);
  transition: transform 0.7s var(--ease);
}
#hdr.hide {
  transform: translateY(-140%);
}
.hd {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.4rem;
  border-radius: 99px;
  background: rgba(14, 14, 15, 0.55);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line);
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font: 800 1.1rem var(--fd);
  letter-spacing: -0.04em;
}
.logo small {
  font: 500 0.58rem var(--fm);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  letter-spacing: 0.12em;
  margin-left: 0.2rem;
}
.nav {
  display: flex;
  gap: 0.15rem;
  margin: 0 auto;
}
.nav a {
  padding: 0.55rem 1rem;
  border-radius: 99px;
  font-size: 0.9rem;
  transition:
    background 0.45s var(--ease),
    color 0.4s;
}
.nav a:hover,
.nav a.act {
  background: var(--ink);
  color: #0a0a0b;
}
.tel {
  font: 500 0.82rem var(--fm);
  padding: 0 0.6rem;
  transition: color 0.3s;
}
.tel:hover {
  color: var(--acc);
}
#burger {
  display: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ink);
  position: relative;
  margin-left: auto;
}
#burger i {
  position: absolute;
  left: 30%;
  right: 30%;
  height: 2px;
  background: #0a0a0b;
  transition:
    transform 0.5s var(--ease),
    top 0.5s var(--ease);
}
#burger i:nth-child(1) {
  top: 40%;
}
#burger i:nth-child(2) {
  top: 58%;
}
#burger.x i:nth-child(1) {
  top: 49%;
  transform: rotate(45deg);
}
#burger.x i:nth-child(2) {
  top: 49%;
  transform: rotate(-45deg);
}
#menu {
  position: fixed;
  inset: 0;
  z-index: 490;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 6rem var(--pad) 2rem;
  clip-path: circle(0 at calc(100% - 3rem) 3rem);
  transition: clip-path 0.9s var(--ease);
  pointer-events: none;
}
#menu.open {
  clip-path: circle(150% at calc(100% - 3rem) 3rem);
  pointer-events: auto;
}
#menu a {
  font: 600 clamp(1.7rem, 8vw, 2.6rem) var(--fd);
  letter-spacing: -0.05em;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#menu a small {
  font: 500 0.7rem var(--fm);
  color: var(--mut);
}
#menu .mf {
  margin-top: 2rem;
  font: 500 0.8rem var(--fm);
  color: var(--mut);
  line-height: 1.8;
}
@media (max-width: 980px) {
  .nav,
  .tel,
  .hd > .btn {
    display: none;
  }
  #burger {
    display: block;
  }
  .hd {
    padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  }
}
/* modal */
#modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  visibility: hidden;
  pointer-events: none;
}
#modal.open {
  visibility: visible;
  pointer-events: auto;
}
.md-bg {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 6, 0.82);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
#modal.open .md-bg {
  opacity: 1;
}
.md-box {
  position: relative;
  width: min(88rem, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--bg2);
  border-radius: var(--r);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  transform: translateY(4rem) scale(0.96);
  opacity: 0;
  transition:
    transform 0.8s var(--ease),
    opacity 0.6s var(--ease);
}
#modal.open .md-box {
  transform: none;
  opacity: 1;
}
.md-box.txt {
  grid-template-columns: 1fr;
  width: min(52rem, 100%);
}
.md-media {
  background: #000;
  min-height: 14rem;
  position: relative;
}
.md-media video,
.md-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 80vh;
}
.md-info {
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.md-info h3 {
  font: 600 1.7rem/1.05 var(--fd);
  letter-spacing: -0.05em;
}
.md-info p {
  color: #cfcabb;
}
.md-info .art p + p {
  margin-top: 1rem;
}
.md-x {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 3;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ink);
  color: #000;
  font-size: 1.1rem;
  transition: transform 0.6s var(--ease);
}
.md-x:hover {
  transform: rotate(180deg) scale(1.08);
}
@media (max-width: 820px) {
  .md-box {
    grid-template-columns: 1fr;
  }
  .md-info {
    padding: 1.3rem;
  }
  .md-info h3 {
    font-size: 1.3rem;
  }
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 9600;
  transform: translate(-50%, 200%);
  background: var(--ink);
  color: #0a0a0b;
  padding: 0.9rem 1.5rem;
  border-radius: 99px;
  font-weight: 600;
  transition: transform 0.7s var(--ease);
  max-width: 92vw;
  text-align: center;
}
#toast.show {
  transform: translate(-50%, 0);
}
video.lz {
  background: #111;
}
[hidden] {
  display: none !important;
}
.btn[data-r].in {
  transition:
    transform 0.5s var(--ease),
    color 0.4s,
    opacity 0.7s var(--ease),
    filter 0.7s;
}
.mq-set {
  display: flex;
  align-items: center;
  flex: none;
}
.mv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kb 5s ease-in-out infinite alternate;
}
@keyframes kb {
  to {
    transform: scale(1.28) translateX(7%);
  }
}
.rt-map .rc {
  transform: translate(-0.6rem, -50%);
}
.rt-map .rc.rev {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 0.6rem), -50%);
}
.ct-l .ct-r {
  isolation: isolate;
}
.ab-h .px {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ab-h .ab-cap,
.ab-h .ab-circ {
  position: absolute;
  pointer-events: auto;
}
.ab-h .ab-cap {
  right: var(--pad) !important;
  top: 9rem !important;
  transition:
    opacity 1s var(--ease),
    transform 1.2s var(--ease),
    filter 1s var(--ease);
}
.ab-h .ab-circ {
  transition:
    opacity 1s var(--ease),
    transform 1.2s var(--ease),
    filter 1s var(--ease);
}
@media (max-width: 820px) {
  .ab-h .ab-cap {
    top: 6rem !important;
  }
  .sc {
    --s: 10.4rem !important;
  }
  .sc[style*="14rem"] {
    --s: 7.6rem !important;
  }
  .sc[style*="16.5rem"] {
    --s: 9rem !important;
  }
  .sc[style*="13rem"] {
    --s: 7rem !important;
  }
  .sc[style*="15.5rem"] {
    --s: 8.6rem !important;
  }
}
/*@CSS*/

/* HERO */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: -3%;
  z-index: -3;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.05);
  transition: transform 1s var(--ease);
}
.hv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.15);
  transition:
    opacity 1.2s var(--ease),
    transform 2.6s var(--ease);
}
.hv.on {
  opacity: 1;
  transform: none;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      180deg,
      rgba(10, 10, 11, 0.6) 0%,
      rgba(10, 10, 11, 0.05) 35%,
      rgba(10, 10, 11, 0.7) 78%,
      var(--bg) 100%
    ),
    linear-gradient(90deg, rgba(10, 10, 11, 0.72), transparent 68%);
}
.ret {
  position: absolute;
  left: 0;
  top: 0;
  width: 8rem;
  height: 8rem;
  margin: -4rem 0 0 -4rem;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition:
    opacity 0.4s,
    width 0.5s var(--ease),
    height 0.5s var(--ease),
    margin 0.5s var(--ease);
}
.ret.on {
  opacity: 1;
}
.ret i {
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid var(--ink);
  transition: border-color 0.3s;
}
.ret i:nth-child(1) {
  left: 0;
  top: 0;
  border-right: 0;
  border-bottom: 0;
}
.ret i:nth-child(2) {
  right: 0;
  top: 0;
  border-left: 0;
  border-bottom: 0;
}
.ret i:nth-child(3) {
  left: 0;
  bottom: 0;
  border-right: 0;
  border-top: 0;
}
.ret i:nth-child(4) {
  right: 0;
  bottom: 0;
  border-left: 0;
  border-top: 0;
}
.ret span {
  position: absolute;
  left: 100%;
  top: 100%;
  margin: 0.4rem;
  font: 500 0.65rem var(--fm);
  white-space: nowrap;
}
.ret.lock {
  width: 4.6rem;
  height: 4.6rem;
  margin: -2.3rem 0 0 -2.3rem;
}
.ret.lock i {
  border-color: #6dff8a;
}
.vf {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  font: 500 0.72rem var(--fm);
  letter-spacing: 0.05em;
}
.vf > div {
  position: absolute;
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.vf-tl {
  left: var(--pad);
  top: 6.4rem;
}
.vf-tr {
  right: var(--pad);
  top: 6.4rem;
  opacity: 0.8;
}
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
  padding-top: 11rem;
  padding-bottom: 6.5rem;
}
.hero-l .eyebrow {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1.6rem;
}
.hero h1 {
  margin-bottom: 1.8rem;
}
.inl {
  display: inline-block;
  width: 1.7em;
  height: 0.74em;
  border-radius: 99px;
  overflow: hidden;
  vertical-align: -0.04em;
  margin-left: 0.1em;
  background: #000;
  position: relative;
}
.inl video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero p.lead {
  margin-bottom: 2rem;
}
.hero-cta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.hs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hs li {
  border-radius: 1.6rem;
  background: rgba(10, 10, 11, 0.5);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition:
    background 0.6s var(--ease),
    color 0.5s,
    transform 0.6s var(--ease);
}
.hs-h {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem 1.3rem;
}
.hs .n {
  font: 500 0.7rem var(--fm);
  opacity: 0.6;
}
.hs .t {
  font: 500 1.02rem var(--fd);
  letter-spacing: -0.04em;
}
.hs .p {
  font: 500 0.7rem var(--fm);
  opacity: 0.7;
}
.hs-b {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--ease);
}
.hs-b > div {
  overflow: hidden;
  padding: 0 1.3rem 0 4.3rem;
  font-size: 0.92rem;
  line-height: 1.4;
}
.hs-b em {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  font-style: normal;
}
.hs-b em span {
  border: 1px solid rgba(10, 10, 11, 0.3);
  border-radius: 99px;
  padding: 0.15rem 0.7rem;
  font: 500 0.65rem var(--fm);
  text-transform: uppercase;
}
.hs li.on {
  background: var(--ink);
  color: #0a0a0b;
}
.hs li.on .hs-b {
  grid-template-rows: 1fr;
}
.hs li.on .hs-b > div {
  padding-bottom: 1.1rem;
}
.hs li:not(.on):hover {
  transform: translateX(-0.7rem);
  background: rgba(241, 236, 221, 0.2);
}
.hs .bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--acc);
}
.hs li.on .bar {
  animation: fillbar 6.5s linear forwards;
}
.hs:hover li.on .bar {
  animation-play-state: paused;
}
@keyframes fillbar {
  to {
    width: 100%;
  }
}
.hero-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: calc(var(--pad) + 13rem);
}
.free {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.5);
  backdrop-filter: blur(10px);
  font: 500 0.72rem var(--fm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition:
    background 0.4s,
    color 0.4s;
}
.free:hover {
  background: var(--ink);
  color: #000;
}
.free i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #6dff8a;
  box-shadow: 0 0 0.8rem #6dff8a;
}
.scrl {
  width: 4.4rem;
  height: 4.4rem;
}
.scrl:hover {
  background: var(--ink);
  color: #0a0a0b;
  transform: translateY(0.3rem);
}
@media (max-width: 820px) {
  .hero-in {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding-top: 8rem;
    padding-bottom: 5.5rem;
  }
  .vf-tl {
    top: 5.2rem;
  }
  .vf-tr {
    display: none;
  }
  .hs .t {
    font-size: 0.9rem;
  }
  .hs-h {
    padding: 0.7rem 1rem;
    grid-template-columns: 1.8rem 1fr auto;
  }
  .hs-b > div {
    padding-left: 3.4rem;
  }
  .hero-bar {
    padding-left: var(--pad);
    padding-right: var(--pad);
    justify-content: flex-end;
  }
  .scrl {
    display: none;
  }
}
/* MARQUEE */
.mq {
  background: var(--acc);
  color: #0a0a0b;
  overflow: hidden;
  padding: 1.6rem 0;
  position: relative;
  z-index: 2;
}
.mq-row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  align-items: center;
  font: 600 5rem/1.15 var(--fd);
  letter-spacing: -0.05em;
  will-change: transform;
}
.mq-row.r2 {
  font-size: 2.2rem;
  font-weight: 400;
  margin-top: 0.5rem;
  letter-spacing: -0.03em;
}
.mi {
  display: inline-flex;
  align-items: center;
}
.mi::after {
  content: "";
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: currentColor;
  margin: 0 0.5em;
}
.mv {
  display: inline-block;
  width: 2.3em;
  height: 0.78em;
  border-radius: 99px;
  overflow: hidden;
  margin: 0 0.4em;
  background: #000;
  flex: none;
}
.mv video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 820px) {
  .mq-row {
    font-size: 2.5rem;
  }
  .mq-row.r2 {
    font-size: 1.2rem;
  }
}
/* REEL */
.reel {
  height: 240vh;
}
.reel-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.reel-box {
  position: relative;
  width: 34%;
  height: 36vh;
  border-radius: 10rem;
  overflow: hidden;
  background: #000;
  will-change: width, height;
}
.reel-box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--vs, 1.4));
}
.reel-ov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--pad);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent 50%);
}
.reel-ov h2 {
  font-size: calc(var(--h2) * 1.1);
  opacity: var(--ot, 0);
}
.reel-play {
  position: relative;
  width: 7.4rem;
  height: 7.4rem;
  border-radius: 50%;
  background: var(--ink);
  color: #0a0a0b;
  display: grid;
  place-items: center;
  transition:
    transform 0.6s var(--ease),
    background 0.4s;
  flex: none;
}
.reel-play:hover {
  transform: scale(1.12) rotate(18deg);
  background: var(--acc);
}
.reel-play svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 14s linear infinite;
}
.reel-play text {
  font: 700 9.5px var(--fm);
  fill: #0a0a0b;
  letter-spacing: 0.04em;
}
.reel-play b {
  font-size: 1.4rem;
  margin-left: 0.2rem;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.reel-cap {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 50%;
  display: flex;
  justify-content: space-between;
  font: 500 0.75rem var(--fm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: var(--co, 1);
  pointer-events: none;
  color: var(--mut);
}
@media (max-width: 820px) {
  .reel-box {
    width: 70%;
    height: 30vh;
  }
  .reel-play {
    width: 5.2rem;
    height: 5.2rem;
  }
  .reel-ov {
    padding: 1rem;
  }
  .reel-cap {
    top: auto;
    bottom: 12vh;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
  }
}
/* MANIFESTO */
.mf {
  height: 280vh;
}
.mf-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
}
.mf-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--mut);
  font: 500 0.75rem var(--fm);
  text-transform: uppercase;
}
.mf-t {
  font: 500 3rem/1.18 var(--fd);
  letter-spacing: -0.055em;
  max-width: 92%;
}
.w {
  opacity: 0.13;
  transition:
    opacity 0.5s var(--ease),
    color 0.5s;
}
.w.on {
  opacity: 1;
}
.mf-t em {
  font-style: normal;
}
.mf-t em .w.on {
  color: var(--acc);
}
.vid {
  display: inline-block;
  width: 0;
  height: 0.78em;
  border-radius: 99px;
  overflow: hidden;
  vertical-align: -0.06em;
  margin: 0;
  background: #000;
  transition:
    width 1.1s var(--ease),
    margin 1.1s var(--ease);
}
.vid.on {
  width: 2.1em;
  margin: 0 0.16em;
}
.vid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mf-f {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  font-size: 0.95rem;
  color: #b9b4a5;
}
.mf-f div {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  opacity: var(--fo, 0);
  transform: translateY(calc((1 - var(--fo, 0)) * 1.5rem));
}
.mf-f b {
  display: block;
  font: 500 1.6rem var(--fd);
  letter-spacing: -0.05em;
  color: var(--ink);
}
@media (max-width: 820px) {
  .mf-t {
    font-size: 1.3rem;
    max-width: 100%;
  }
  .mf-f {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .mf-f div {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding-top: 0.6rem;
  }
  .mf-f b {
    font-size: 1.1rem;
    min-width: 5rem;
  }
  .mf-pin {
    gap: 1.6rem;
  }
}
/* PIPELINE */
.pipe {
  height: 580vh;
}
.pipe-st {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6.3rem 0 1.5rem;
  overflow: hidden;
}
.pipe-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.pipe-top .h2 {
  max-width: 14em;
}
.pipe-main {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 3rem;
  flex: 1;
  min-height: 0;
  align-items: center;
  margin: 1rem 0;
}
.pipe-txt {
  position: relative;
  height: 100%;
  min-height: 18rem;
}
.ps {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  opacity: 0;
  transform: translateY(2rem);
  pointer-events: none;
  transition:
    opacity 0.6s var(--ease),
    transform 0.8s var(--ease);
}
.ps.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ps-n {
  font: 700 9rem/0.8 var(--fd);
  letter-spacing: -0.08em;
  color: var(--acc);
}
.ps p {
  color: #cfcabb;
  max-width: 28em;
}
.ps ul {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ps li {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.35rem 0.9rem;
  font: 500 0.72rem var(--fm);
  text-transform: uppercase;
  transition:
    background 0.4s,
    color 0.4s;
}
.ps li:hover {
  background: var(--ink);
  color: #000;
}
.mon-box {
  position: relative;
  aspect-ratio: 16/9;
  max-height: 100%;
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}
.mon-box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:
    opacity 0.9s var(--ease),
    filter 0.9s,
    transform 1.4s var(--ease);
  transform: scale(1.2);
}
.mon-box video.on {
  opacity: 1;
  transform: scale(var(--z, 1));
}
.mon-hud {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  font: 500 0.7rem var(--fm);
  text-transform: uppercase;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
}
.mon-bot {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1rem;
  height: 4px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 2;
}
.mon-bot i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--acc);
  border-radius: 9px;
}
.tl {
  position: relative;
  padding-top: 1.6rem;
}
.tl-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tr {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: center;
}
.tr em {
  font: 500 0.62rem var(--fm);
  color: var(--mut);
  font-style: normal;
}
.tr-l {
  position: relative;
  height: 1.7rem;
  background: rgba(241, 236, 221, 0.05);
  border-radius: 0.5rem;
}
.clip {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 0.5rem;
  padding: 0 0.7rem;
  display: flex;
  align-items: center;
  font: 500 0.62rem var(--fm);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  color: #0a0a0b;
  clip-path: inset(0 100% 0 0);
}
.c0 {
  background: #ff4f1f;
}
.c1 {
  background: #f1ecdd;
}
.c2 {
  background: #ffb199;
}
.c3 {
  background: #d4cdb4;
}
.c4 {
  background: #ff7a4d;
}
.cg {
  background: #6dff8a;
}
.cs {
  background: repeating-linear-gradient(90deg, #9ec7ff 0 2px, #5f8fd1 2px 4px);
  color: #000;
}
.tl-ph {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2.6rem;
  right: 0;
  pointer-events: none;
}
.tl-ph i {
  position: absolute;
  top: 1.3rem;
  bottom: -0.2rem;
  width: 2px;
  background: var(--acc);
  left: var(--x, 0%);
}
.tl-ph b {
  position: absolute;
  top: 0;
  left: var(--x, 0%);
  transform: translateX(-50%);
  background: var(--acc);
  color: #000;
  font: 700 0.62rem var(--fm);
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  white-space: nowrap;
}
.pdots {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.8rem;
}
.pdots i {
  height: 4px;
  flex: 1;
  background: var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.pdots i b {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
}
@media (max-width: 820px) {
  .pipe-st {
    padding-top: 5rem;
  }
  .pipe-top .h2 {
    display: none;
  }
  .pipe-main {
    grid-template-columns: 1fr;
    gap: 1rem;
    align-content: start;
  }
  .pipe-main .pipe-mon {
    order: -1;
  }
  .pipe-txt {
    min-height: 13.5rem;
  }
  .ps {
    justify-content: flex-start;
    gap: 0.5rem;
  }
  .ps-n {
    font-size: 3.4rem;
    position: absolute;
    right: 0;
    top: 0;
  }
  .ps p {
    font-size: 0.9rem;
  }
  .ps li {
    font-size: 0.6rem;
    padding: 0.2rem 0.6rem;
  }
  .tr-l {
    height: 1.2rem;
  }
  .clip {
    font-size: 0.5rem;
    padding: 0 0.4rem;
  }
  .tl {
    padding-top: 1.4rem;
  }
}

.tl-ph {
  left: calc(var(--pad) + 2.6rem);
  right: var(--pad);
}
.sec {
  padding: 9rem 0;
}
.sec-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  margin-bottom: 3.5rem;
}
.sec-h .h2 {
  margin-top: 1.2rem;
  max-width: 11em;
}
.sec-h .lead {
  max-width: 24em;
}
@media (max-width: 820px) {
  .sec {
    padding: 4.5rem 0;
  }
  .sec-h {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }
}
/* STUDIO */
.studio {
  background: var(--bg2);
  border-radius: var(--r) var(--r) 0 0;
}
.st-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: center;
}
.st-list {
  list-style: none;
  margin-top: 2.2rem;
}
.st-list li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition:
    padding 0.6s var(--ease),
    color 0.4s,
    background 0.4s;
}
.st-list li:last-child {
  border-bottom: 1px solid var(--line);
}
.st-list b {
  font: 500 1.15rem var(--fd);
  letter-spacing: -0.04em;
  display: block;
  transition:
    color 0.4s,
    transform 0.6s var(--ease);
}
.st-list small {
  color: var(--mut);
  font: 400 0.88rem/1.4 var(--fb);
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.7s var(--ease),
    opacity 0.5s,
    margin 0.5s;
}
.st-list span {
  font: 500 0.7rem var(--fm);
  color: var(--mut);
  padding-top: 0.3rem;
}
.st-list li.on {
  padding-left: 1rem;
}
.st-list li.on b {
  color: var(--acc);
}
.st-list li.on small {
  max-height: 4rem;
  opacity: 1;
  margin-top: 0.3rem;
}
.st-scene {
  perspective: 75rem;
  padding: 2rem;
}
.st-3d {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  aspect-ratio: 5/4;
  transition: transform 0.25s linear;
}
.st-l0 {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.6);
}
.st-l0 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 1.4s var(--ease),
    filter 0.8s;
}
.st-3d.k1 video {
  filter: brightness(1.25) saturate(1.2);
}
.st-3d.k3 video {
  filter: hue-rotate(60deg) saturate(1.6);
}
.st-3d.k4 video {
  filter: contrast(1.2) grayscale(0.6);
}
.st-3d.k0 video,
.st-3d.k2 video,
.st-3d.k5 video {
  transform: scale(1.08);
}
.st-l1 {
  position: absolute;
  left: -9%;
  bottom: -8%;
  width: 42%;
  aspect-ratio: 4/5;
  border-radius: 1.4rem;
  overflow: hidden;
  transform: translateZ(90px) rotate(-6deg);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.6);
  border: 3px solid var(--ink);
}
.st-l1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-bd {
  position: absolute;
  right: -6%;
  top: -8%;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: var(--acc);
  color: #0a0a0b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateZ(140px);
  font: 700 2.2rem/1 var(--fd);
  letter-spacing: -0.06em;
}
.st-bd small {
  font: 500 0.62rem var(--fm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.3rem;
}
.hot {
  position: absolute;
  transform: translateZ(60px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.hot i {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 0 rgba(241, 236, 221, 0.6);
  animation: pulse 2s infinite;
  flex: none;
  transition:
    background 0.3s,
    transform 0.4s var(--ease);
}
.hot span {
  background: rgba(10, 10, 11, 0.75);
  backdrop-filter: blur(8px);
  padding: 0.3rem 0.8rem;
  border-radius: 99px;
  font: 500 0.68rem var(--fm);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-0.6rem);
  transition:
    opacity 0.5s,
    transform 0.6s var(--ease),
    background 0.3s,
    color 0.3s;
}
.hot.on i {
  background: var(--acc);
  transform: scale(1.5);
}
.hot.on span {
  opacity: 1;
  transform: none;
  background: var(--acc);
  color: #000;
}
@keyframes pulse {
  70% {
    box-shadow: 0 0 0 0.9rem rgba(241, 236, 221, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(241, 236, 221, 0);
  }
}
@media (max-width: 820px) {
  .st-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .st-scene {
    padding: 0.8rem;
    order: -1;
  }
  .st-bd {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 1.3rem;
    right: -2%;
  }
  .st-l1 {
    left: -3%;
  }
  .st-list b {
    font-size: 1rem;
  }
  .hot span {
    font-size: 0.55rem;
  }
}
/* RING */
.ringS {
  padding: 8rem 0 4rem;
  overflow: hidden;
}
.ring-sc {
  height: 34rem;
  perspective: 85rem;
  position: relative;
  margin-top: 1rem;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.ring-sc:active {
  cursor: grabbing;
}
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(-50%) rotateX(-7deg) rotateY(var(--rot, 0deg));
}
.rp {
  --w: 23rem;
  position: absolute;
  width: var(--w);
  height: calc(var(--w) * 0.58);
  left: calc(var(--w) / -2);
  top: calc(var(--w) * -0.29);
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(calc(var(--w) * 1.21));
  border-radius: 1.3rem;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--line);
  transition: border-color 0.4s;
}
.rp:hover {
  border-color: var(--acc);
}
.rp video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rp-t {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 1rem 0.8rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
  font: 500 0.95rem var(--fd);
  letter-spacing: -0.04em;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.6rem;
}
.rp-t small {
  font: 500 0.62rem var(--fm);
  opacity: 0.7;
  text-transform: uppercase;
}
.ring-ft {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  font: 500 0.72rem var(--fm);
  text-transform: uppercase;
  color: var(--mut);
}
@media (max-width: 820px) {
  .ringS {
    padding: 4rem 0 2rem;
  }
  .ring-sc {
    height: 20rem;
    perspective: 50rem;
  }
  .rp {
    --w: 13.5rem;
  }
}
/* SERVICES */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.bcell {
  grid-column: span 4;
}
.bcell.s7 {
  grid-column: span 7;
}
.bcell.s5 {
  grid-column: span 5;
}
.bcell.s12 {
  grid-column: span 12;
}
.bc {
  position: relative;
  height: 100%;
  min-height: 26rem;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  display: flex;
  transform: perspective(70rem) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.6s;
  isolation: isolate;
}
.bcell.s12 .bc {
  min-height: 17rem;
}
.bc:hover {
  box-shadow: 0 2rem 5rem rgba(255, 79, 31, 0.15);
}
.bc > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  transform: scale(1.02);
  transition:
    transform 1.4s var(--ease),
    filter 0.8s;
}
.bc:hover > video {
  transform: scale(1.12);
}
.bc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    0deg,
    rgba(10, 10, 11, 0.92) 0%,
    rgba(10, 10, 11, 0.35) 55%,
    rgba(10, 10, 11, 0.15)
  );
  transition: opacity 0.6s;
}
.bc:hover::before {
  opacity: 0.75;
}
.bc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    16rem circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.2),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.bc:hover::after {
  opacity: 1;
}
.bc-in {
  margin-top: auto;
  padding: 1.8rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.bc-n {
  font: 500 0.72rem var(--fm);
  opacity: 0.7;
}
.bc-in p {
  max-width: 26em;
  color: #d6d1c2;
  font-size: 0.95rem;
}
.bc-in ul {
  list-style: none;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.7s var(--ease),
    opacity 0.6s;
}
.bc:hover ul {
  max-height: 4rem;
  opacity: 1;
}
.bc-in li {
  border: 1px solid rgba(241, 236, 221, 0.4);
  border-radius: 99px;
  padding: 0.15rem 0.8rem;
  font: 500 0.66rem var(--fm);
  text-transform: uppercase;
}
.bc-f {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.4rem;
}
.bc-f b {
  font: 500 1rem var(--fd);
  letter-spacing: -0.04em;
}
.bc-f span {
  font: 500 0.7rem var(--fm);
  color: var(--mut);
  margin-right: auto;
}
.bc:hover .circ {
  background: var(--acc);
  border-color: var(--acc);
  color: #000;
  transform: rotate(-45deg);
}
@media (max-width: 1100px) {
  .bcell,
  .bcell.s7,
  .bcell.s5 {
    grid-column: span 6;
  }
  .bcell.s12 {
    grid-column: span 12;
  }
}
@media (max-width: 820px) {
  .bento {
    gap: 0.7rem;
  }
  .bcell,
  .bcell.s7,
  .bcell.s5,
  .bcell.s12 {
    grid-column: span 12;
  }
  .bc {
    min-height: 21rem;
  }
  .bc-in {
    padding: 1.2rem;
  }
  .bc-in ul {
    max-height: 4rem;
    opacity: 1;
  }
}
/* PROJECTS */
.pl {
  list-style: none;
  border-top: 1px solid var(--line);
}
.pr {
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.pr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acc);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease);
  z-index: 0;
}
.pr a {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 4rem 1fr 11rem 6rem 3.2rem;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  transition:
    padding 0.6s var(--ease),
    color 0.4s;
  cursor: pointer;
}
.pr:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}
.pr:hover a {
  padding-left: 2rem;
  padding-right: 1.4rem;
  color: #0a0a0b;
}
.pr-i,
.pr-c,
.pr-y {
  font: 500 0.78rem var(--fm);
  text-transform: uppercase;
}
.pr-t {
  font: 500 2.1rem/1.05 var(--fd);
  letter-spacing: -0.05em;
}
.pl:hover .pr:not(:hover) {
  opacity: 0.4;
}
.pr {
  transition: opacity 0.5s;
}
.pr:hover .circ {
  transform: rotate(-45deg);
  background: #0a0a0b;
  color: var(--ink);
  border-color: #0a0a0b;
}
.pl-fl {
  position: fixed;
  left: 0;
  top: 0;
  width: 19rem;
  aspect-ratio: 4/3;
  border-radius: 1.4rem;
  overflow: hidden;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-999px, 0, 0) scale(0.6);
  transition:
    opacity 0.4s,
    scale 0.5s var(--ease);
  background: #000;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.6);
}
.pl-fl.on {
  opacity: 1;
}
.pl-fl video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 820px) {
  .pr a {
    grid-template-columns: 2rem 1fr 2.6rem;
    gap: 0.6rem;
    padding: 1.1rem 0;
  }
  .pr-t {
    font-size: 1.1rem;
  }
  .pr-c,
  .pr-y {
    display: none;
  }
  .pl-fl {
    display: none;
  }
  .circ {
    width: 2.6rem;
    height: 2.6rem;
  }
}
/* ROUTE */
.rt-map {
  position: relative;
  height: 30rem;
  margin: 1rem 0 3rem;
}
.rt-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rt-bg {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.rt-fg {
  fill: none;
  stroke: var(--acc);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.rc {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0.25;
  transition: opacity 0.6s var(--ease);
}
.rc i {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--ink);
  transition:
    background 0.5s,
    transform 0.6s var(--ease);
  flex: none;
}
.rc div {
  background: rgba(19, 19, 21, 0.9);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
  font-size: 0.85rem;
  line-height: 1.2;
  transition:
    background 0.4s,
    color 0.4s;
}
.rc b {
  display: block;
  font: 500 0.95rem var(--fd);
  letter-spacing: -0.04em;
}
.rc small {
  font: 500 0.62rem var(--fm);
  color: var(--mut);
}
.rc.on {
  opacity: 1;
}
.rc.on i {
  background: var(--acc);
  border-color: var(--acc);
  transform: scale(1.4);
}
.rc:hover div {
  background: var(--ink);
  color: #000;
}
.rc:hover small {
  color: #555;
}
.rt-car {
  position: absolute;
  width: 3.6rem;
  height: 3.6rem;
  margin: -1.8rem;
  border-radius: 50%;
  background: var(--ink);
  color: #0a0a0b;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 0.5rem rgba(255, 79, 31, 0.3);
  z-index: 2;
}
.rt-car svg {
  position: static;
  width: 1.6rem;
  height: 1.6rem;
}
.rt-i {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.rt-i div {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem;
  transition:
    background 0.5s var(--ease),
    color 0.5s,
    transform 0.6s var(--ease);
}
.rt-i div:hover {
  background: var(--ink);
  color: #0a0a0b;
  transform: translateY(-0.4rem);
}
.rt-i b {
  display: block;
  font: 500 1.2rem var(--fd);
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
}
.rt-i p {
  font-size: 0.92rem;
  opacity: 0.75;
}
@media (max-width: 820px) {
  .rt-map {
    height: 36rem;
  }
  .rt-i {
    grid-template-columns: 1fr;
  }
  .rt-i div {
    padding: 1.1rem;
  }
}
/* STATS */
.stats {
  padding: 4rem 0 8rem;
  overflow: hidden;
}
.sc-w {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}
.sc {
  --s: 19rem;
  width: var(--s);
  height: var(--s);
  margin: -0.5rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  transition:
    background 0.7s var(--ease),
    color 0.5s,
    border-color 0.5s;
  will-change: transform;
  cursor: default;
}
.sc b {
  font: 600 calc(var(--s) * 0.27)/1 var(--fd);
  letter-spacing: -0.07em;
  display: block;
  transition: transform 0.7s var(--ease);
}
.sc span {
  font-size: 0.88rem;
  color: var(--mut);
  max-width: 11em;
  margin-top: 0.6rem;
  transition: color 0.4s;
}
.sc:hover {
  background: var(--acc);
  border-color: var(--acc);
  color: #0a0a0b;
}
.sc:hover span {
  color: #0a0a0b;
}
.sc:hover b {
  transform: scale(1.1);
}
.sc.f {
  background: var(--ink);
  color: #0a0a0b;
}
.sc.f span {
  color: #444;
}
.sc.f:hover {
  background: var(--acc);
}
@media (max-width: 820px) {
  .sc {
    --s: 10.4rem;
    padding: 1rem;
    margin: -0.3rem;
  }
  .sc span {
    font-size: 0.62rem;
    margin-top: 0.3rem;
  }
  .stats {
    padding-bottom: 4rem;
  }
}

/* OVALS */
.ovals {
  display: flex;
  gap: 0.6rem;
  height: 33rem;
}
.ov {
  flex: 1 1 0;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 99rem;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  transition:
    flex 0.9s var(--ease),
    background 0.6s var(--ease),
    color 0.5s,
    border-color 0.4s;
}
.ov:not(.on):hover {
  background: rgba(241, 236, 221, 0.1);
  border-color: var(--ink);
}
.ov.on {
  flex: 6;
  background: var(--ink);
  color: #0a0a0b;
  cursor: default;
}
.ov-v {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 500 1.05rem var(--fd);
  letter-spacing: -0.03em;
  white-space: nowrap;
  transition: opacity 0.4s;
}
.ov-v small {
  font: 500 0.6rem var(--fm);
  color: var(--mut);
  margin-top: 0.8rem;
  display: block;
}
.ov.on .ov-v {
  opacity: 0;
  position: absolute;
}
.ov-c {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(36rem, 92%);
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.6rem;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.ov.on .ov-c {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.6s 0.45s;
}
.ov-a {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--acc);
  display: grid;
  place-items: center;
  font: 700 2.4rem var(--fd);
  letter-spacing: -0.08em;
  color: #0a0a0b;
  transition: transform 0.8s var(--ease);
}
.ov.on:hover .ov-a {
  transform: rotate(-12deg) scale(1.08);
}
.ov-c h4 {
  font: 600 1.5rem/1.05 var(--fd);
  letter-spacing: -0.05em;
}
.ov-c .r {
  font: 500 0.68rem var(--fm);
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0.4rem 0 0.8rem;
}
.ov-c p {
  font-size: 0.92rem;
  line-height: 1.4;
  color: #33322d;
}
.ov-c .y {
  display: inline-block;
  margin-top: 0.8rem;
  border: 1px solid #0a0a0b;
  border-radius: 99px;
  padding: 0.15rem 0.8rem;
  font: 500 0.64rem var(--fm);
  text-transform: uppercase;
}
@media (max-width: 820px) {
  .ovals {
    flex-direction: column;
    height: auto;
    gap: 0.4rem;
  }
  .ov {
    flex: none;
    height: 3.4rem;
    transition:
      height 0.9s var(--ease),
      background 0.6s,
      color 0.5s;
  }
  .ov.on {
    height: 15rem;
    flex: none;
  }
  .ov-v {
    writing-mode: horizontal-tb;
    transform: none;
    display: flex;
    gap: 1rem;
    align-items: baseline;
  }
  .ov-v small {
    margin: 0;
  }
  .ov-c {
    grid-template-columns: 5rem 1fr;
    gap: 1rem;
    width: 92%;
  }
  .ov-a {
    width: 5rem;
    height: 5rem;
    font-size: 1.5rem;
  }
  .ov-c h4 {
    font-size: 1.1rem;
  }
  .ov-c p {
    font-size: 0.8rem;
  }
}
/* LIGHT + CALC */
.light {
  background: var(--ink);
  color: #0a0a0b;
  border-radius: var(--r);
  margin: 0 0.8rem;
}
.light .lead {
  color: #3b3a35;
}
.calc {
  padding: 8rem 0;
}
.calc-g {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.cf {
  border-top: 1.5px solid #0a0a0b;
  padding: 1.3rem 0 2rem;
}
.cf .lg {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 1.15rem var(--fd);
  letter-spacing: -0.04em;
  margin-bottom: 1.1rem;
  gap: 1rem;
}
.cf .lg b {
  font: 500 0.75rem var(--fm);
  color: var(--acc);
  background: #0a0a0b;
  padding: 0.2rem 0.8rem;
  border-radius: 99px;
  white-space: nowrap;
}
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.opt {
  position: relative;
  border: 1.5px solid #0a0a0b;
  border-radius: 99px;
  padding: 0.65rem 1.2rem;
  cursor: pointer;
  display: inline-flex;
  gap: 0.7rem;
  align-items: baseline;
  transition:
    background 0.4s var(--ease),
    color 0.4s,
    transform 0.5s var(--ease);
  user-select: none;
  line-height: 1.2;
}
.opt small {
  font: 500 0.66rem var(--fm);
  opacity: 0.55;
  white-space: nowrap;
}
.opt:hover {
  transform: translateY(-0.18rem);
  background: rgba(10, 10, 11, 0.09);
}
.opt.on {
  background: #0a0a0b;
  color: var(--ink);
}
.opt.on small {
  opacity: 1;
  color: var(--acc);
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.7rem;
  border-radius: 99px;
  background: linear-gradient(90deg, #0a0a0b var(--p, 25%), rgba(10, 10, 11, 0.15) var(--p, 25%));
  outline: 0;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--acc);
  border: 3px solid #0a0a0b;
  cursor: grab;
  transition: transform 0.3s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
input[type="range"]::-moz-range-thumb {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--acc);
  border: 3px solid #0a0a0b;
  cursor: grab;
}
.rng-l {
  display: flex;
  justify-content: space-between;
  font: 500 0.66rem var(--fm);
  margin-top: 0.8rem;
  text-transform: uppercase;
  opacity: 0.6;
}
.stp {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  border: 1.5px solid #0a0a0b;
  border-radius: 99px;
  padding: 0.3rem;
}
.stp button {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: #0a0a0b;
  color: var(--ink);
  font-size: 1.3rem;
  transition:
    background 0.3s,
    transform 0.4s var(--ease);
}
.stp button:hover {
  background: var(--acc);
  color: #000;
  transform: scale(1.1);
}
.stp b {
  font: 600 1.5rem var(--fd);
  min-width: 2rem;
  text-align: center;
}
.calc-card {
  position: sticky;
  top: 6.5rem;
  background: #0a0a0b;
  color: var(--ink);
  border-radius: var(--r);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  overflow: hidden;
}
.cc-k {
  font: 500 0.7rem var(--fm);
  text-transform: uppercase;
  color: var(--mut);
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
}
.cc-t {
  font: 600 3.3rem/1 var(--fd);
  letter-spacing: -0.07em;
  white-space: nowrap;
}
.cc-t small {
  font-size: 0.4em;
  color: var(--acc);
  margin-left: 0.3rem;
  letter-spacing: 0;
}
.cc-r {
  font: 500 0.78rem var(--fm);
  color: var(--mut);
}
.cc-bar {
  display: flex;
  height: 0.8rem;
  border-radius: 99px;
  overflow: hidden;
  gap: 2px;
  background: var(--line);
}
.cc-bar i {
  display: block;
  height: 100%;
  flex: 0 0 0;
  transition: flex 0.8s var(--ease);
}
.cc-l {
  list-style: none;
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cc-l li {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 0.45rem;
  animation: li 0.6s var(--ease) both;
}
@keyframes li {
  from {
    opacity: 0;
    transform: translateX(-0.8rem);
  }
}
.cc-l li i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: none;
}
.cc-l li span {
  margin-right: auto;
}
.cc-l b {
  font: 500 0.8rem var(--fm);
  white-space: nowrap;
}
.cc-n {
  font-size: 0.78rem;
  color: var(--mut);
  line-height: 1.4;
}
.cc-b {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cc-b .btn {
  flex: 1;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .calc-g {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .calc-card {
    position: static;
  }
}
@media (max-width: 820px) {
  .calc {
    padding: 4rem 0;
  }
  .cc-t {
    font-size: 2.3rem;
  }
  .opt {
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
  }
  .calc-card {
    padding: 1.3rem;
  }
}
/* BOOKING */
.bk {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.cal {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem;
}
.cal-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}
.cal-h b {
  font: 600 1.7rem var(--fd);
  letter-spacing: -0.05em;
  text-transform: capitalize;
  transition: opacity 0.3s;
}
.cal-h .circ:hover:not(:disabled) {
  background: var(--ink);
  color: #000;
}
.cal-h .circ:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.cal-wd,
.cal-g {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
}
.cal-wd span {
  text-align: center;
  font: 500 0.66rem var(--fm);
  color: var(--mut);
  text-transform: uppercase;
  padding-bottom: 0.4rem;
}
.cd {
  position: relative;
  aspect-ratio: 1/0.92;
  border-radius: 1rem;
  border: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  transition:
    transform 0.5s var(--ease),
    background 0.4s,
    border-color 0.4s,
    color 0.3s;
  cursor: pointer;
  animation: cdin 0.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
@keyframes cdin {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}
.cd b {
  font: 500 1rem var(--fd);
  letter-spacing: -0.04em;
}
.tk {
  display: flex;
  gap: 3px;
}
.tk i {
  flex: 1;
  height: 0.4rem;
  border-radius: 9px;
  background: var(--ink);
  transition: background 0.3s;
}
.tk i.x {
  background: rgba(241, 236, 221, 0.15);
}
.tk i.m {
  background: var(--acc);
}
.cd:hover {
  transform: translateY(-0.25rem) scale(1.06);
  background: rgba(241, 236, 221, 0.1);
  border-color: var(--ink);
  z-index: 2;
}
.cd.busy {
  opacity: 0.5;
}
.cd.sel {
  background: var(--ink);
  color: #0a0a0b;
  border-color: var(--ink);
}
.cd.sel .tk i {
  background: #0a0a0b;
}
.cd.sel .tk i.x {
  background: rgba(10, 10, 11, 0.2);
}
.cd.sel .tk i.m {
  background: var(--acc);
}
.cd.past {
  opacity: 0.16;
  pointer-events: none;
}
.cd.empty {
  border: 0;
  pointer-events: none;
}
.cd.today {
  border-color: var(--acc);
}
.cd::after {
  content: attr(data-t);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.4rem);
  transform: translate(-50%, 0.4rem);
  background: var(--acc);
  color: #000;
  font: 600 0.62rem var(--fm);
  padding: 0.25rem 0.6rem;
  border-radius: 99px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.4s var(--ease);
  z-index: 5;
}
.cd:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.cd.empty::after,
.cd.past::after {
  display: none;
}
.cal-lg {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  font: 500 0.66rem var(--fm);
  color: var(--mut);
  text-transform: uppercase;
}
.cal-lg span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.cal-lg i {
  width: 1.4rem;
  height: 0.4rem;
  border-radius: 9px;
  background: var(--ink);
}
.cal-lg i.x {
  background: rgba(241, 236, 221, 0.2);
}
.cal-lg i.m {
  background: var(--acc);
}
.bk-p {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  position: sticky;
  top: 6.5rem;
  background: var(--bg2);
}
.bk-d {
  font: 600 1.6rem/1.05 var(--fd);
  letter-spacing: -0.05em;
}
.bk-d small {
  display: block;
  font: 500 0.68rem var(--fm);
  color: var(--mut);
  text-transform: uppercase;
  margin-top: 0.5rem;
  letter-spacing: 0.05em;
}
.bk-k {
  font: 500 0.66rem var(--fm);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.bk-s,
.bk-f {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sl {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    background 0.4s var(--ease),
    color 0.4s,
    transform 0.5s var(--ease),
    border-color 0.3s;
  display: inline-flex;
  gap: 0.6rem;
  align-items: baseline;
}
.sl small {
  font: 500 0.62rem var(--fm);
  opacity: 0.6;
}
.sl:hover:not(:disabled) {
  transform: translateY(-0.15rem);
  border-color: var(--ink);
}
.sl.on {
  background: var(--ink);
  color: #0a0a0b;
  border-color: var(--ink);
}
.sl:disabled {
  opacity: 0.3;
  text-decoration: line-through;
  cursor: not-allowed;
}
.fld {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.4rem;
}
.fld label {
  font: 500 0.64rem var(--fm);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
input.in,
textarea.in {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
  outline: 0;
  transition: border-color 0.4s;
  font-size: 1.02rem;
  border-radius: 0;
  resize: none;
  display: block;
}
.in:focus {
  border-color: var(--acc);
}
.in.err {
  border-color: #ff3b3b;
}
.in::placeholder {
  color: #58564f;
}
.bk-sum {
  font: 500 0.75rem/1.7 var(--fm);
  color: #cfcabb;
  border: 1px dashed var(--line);
  border-radius: 1rem;
  padding: 0.8rem 1rem;
}
.bk-ok {
  text-align: center;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}
.bk-ok .clap {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: var(--acc);
  color: #000;
  display: grid;
  place-items: center;
  font: 700 2rem var(--fd);
  animation: pop 0.8s var(--ease);
}
@keyframes pop {
  from {
    transform: scale(0) rotate(-90deg);
  }
}
.bk-my {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.bk-my .mb {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  border: 1px solid var(--acc);
  border-radius: 99px;
  padding: 0.4rem 0.5rem 0.4rem 1.1rem;
  font: 500 0.72rem var(--fm);
  text-transform: uppercase;
}
.bk-my .mb button {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--acc);
  color: #000;
  transition: transform 0.4s var(--ease);
}
.bk-my .mb button:hover {
  transform: rotate(90deg);
}
@media (max-width: 980px) {
  .bk {
    grid-template-columns: 1fr;
  }
  .bk-p {
    position: static;
  }
}
@media (max-width: 820px) {
  .cal {
    padding: 0.9rem;
  }
  .cal-h b {
    font-size: 1.15rem;
  }
  .cd {
    padding: 0.3rem 0.35rem;
    border-radius: 0.7rem;
  }
  .cd b {
    font-size: 0.78rem;
  }
  .cal-g,
  .cal-wd {
    gap: 0.25rem;
  }
  .tk i {
    height: 0.28rem;
  }
  .bk-p {
    padding: 1.2rem;
  }
  .bk-d {
    font-size: 1.25rem;
  }
}
/* FAQ */
.fq-g {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
}
.fq-g > div:first-child {
  position: sticky;
  top: 7rem;
  align-self: start;
}
.fq {
  border-top: 1px solid var(--line);
}
.fq:last-child {
  border-bottom: 1px solid var(--line);
}
.fq button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  text-align: left;
  padding: 1.4rem 0;
  font: 500 1.15rem/1.15 var(--fd);
  letter-spacing: -0.04em;
  transition:
    color 0.3s,
    padding 0.5s var(--ease);
}
.fq button:hover {
  color: var(--acc);
  padding-left: 0.6rem;
}
.pm {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: none;
  transition:
    transform 0.6s var(--ease),
    background 0.4s,
    color 0.4s;
}
.pm::before,
.pm::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  top: calc(50% - 1px);
  height: 2px;
  background: currentColor;
  transition: transform 0.5s var(--ease);
}
.pm::after {
  transform: rotate(90deg);
}
.fq.on .pm {
  background: var(--ink);
  color: #000;
  transform: rotate(180deg);
}
.fq.on .pm::after {
  transform: rotate(0);
}
.fq .a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--ease);
}
.fq.on .a {
  grid-template-rows: 1fr;
}
.fq .a > div {
  overflow: hidden;
}
.fq .a p {
  padding: 0 4rem 1.5rem 0;
  color: #cfcabb;
  max-width: 42em;
}
@media (max-width: 820px) {
  .fq-g {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .fq-g > div:first-child {
    position: static;
  }
  .fq button {
    font-size: 0.95rem;
  }
  .fq .a p {
    padding-right: 0;
  }
  .pm {
    width: 2.2rem;
    height: 2.2rem;
  }
}

.pg-h {
  padding: 10rem var(--pad) 3rem;
}
.pg-h .h1 {
  margin: 1.4rem 0 1.6rem;
  max-width: 11em;
}
.flt {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.flt button {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.6rem 1.2rem;
  font: 500 0.75rem var(--fm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition:
    background 0.4s var(--ease),
    color 0.4s,
    transform 0.5s var(--ease),
    border-color 0.3s;
}
.flt button:hover {
  border-color: var(--ink);
  transform: translateY(-0.15rem);
}
.flt button.on {
  background: var(--ink);
  color: #0a0a0b;
  border-color: var(--ink);
}
.flt button sup {
  font-size: 0.62rem;
  opacity: 0.6;
  margin-left: 0.3rem;
}
.wk-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 13rem;
  grid-auto-flow: dense;
  gap: 1rem;
  padding-bottom: 7rem;
}
.wk {
  grid-row: span 2;
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  cursor: pointer;
  isolation: isolate;
  animation: wkin 0.8s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition:
    transform 0.7s var(--ease),
    box-shadow 0.6s;
}
.wk.t {
  grid-row: span 3;
}
.wk.w {
  grid-column: span 2;
}
@keyframes wkin {
  from {
    opacity: 0;
    transform: translateY(3rem) scale(0.94);
  }
}
.wk video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.4s var(--ease);
}
.wk:hover video {
  transform: scale(1.1);
}
.wk:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 2rem 4rem rgba(255, 79, 31, 0.18);
}
.wk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent 55%);
  transition: opacity 0.5s;
}
.wk-i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.wk-i h3 {
  font: 500 1.25rem/1.05 var(--fd);
  letter-spacing: -0.045em;
}
.wk-i small {
  display: block;
  font: 500 0.64rem var(--fm);
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0.4rem;
}
.wk-p {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--ink);
  color: #000;
  display: grid;
  place-items: center;
  transform: scale(0) rotate(-90deg);
  transition: transform 0.6s var(--ease);
}
.wk:hover .wk-p {
  transform: none;
}
@media (max-width: 1100px) {
  .wk-g {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .pg-h {
    padding-top: 7rem;
    padding-bottom: 1.5rem;
  }
  .wk-g {
    grid-template-columns: 1fr;
    grid-auto-rows: 10rem;
    gap: 0.7rem;
    padding-bottom: 4rem;
  }
  .wk.w {
    grid-column: span 1;
  }
  .wk-i h3 {
    font-size: 1.05rem;
  }
  .flt button {
    padding: 0.45rem 0.9rem;
    font-size: 0.66rem;
  }
}

.ab-h {
  padding: 10rem var(--pad) 6rem;
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.ab-h .h1 {
  font-size: calc(var(--h1) * 1.25);
  position: relative;
  z-index: 2;
}
.px {
  position: absolute;
  will-change: transform;
}
.ab-cap {
  right: var(--pad);
  top: 9rem;
  width: 22rem;
  aspect-ratio: 3/4.4;
  border-radius: 99rem;
  overflow: hidden;
  transition: transform 0.8s var(--ease);
}
.ab-cap img,
.ab-circ img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.ab-cap:hover img,
.ab-circ:hover img {
  transform: scale(1.12) rotate(2deg);
}
.ab-circ {
  left: 44%;
  top: 10rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--acc);
}
.ab-st {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
  padding: 6rem 0;
}
.ab-st p {
  color: #cfcabb;
  margin-bottom: 1.2rem;
  font-size: calc(var(--p) * 1.1);
}
.ab-st p:first-child {
  font: 500 1.9rem/1.2 var(--fd);
  letter-spacing: -0.05em;
  color: var(--ink);
}
.film {
  height: 340vh;
}
.film-st {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  overflow: hidden;
}
.film-tr {
  display: flex;
  gap: 1.2rem;
  padding: 0 var(--pad);
  width: max-content;
  will-change: transform;
}
.fr {
  width: 29rem;
  flex: none;
  background: var(--bg3);
  border-radius: 1rem;
  padding: 3.4rem 2rem 3rem;
  position: relative;
  min-height: 25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.8rem;
  transition:
    background 0.5s var(--ease),
    color 0.5s,
    transform 0.7s var(--ease);
}
.fr::before,
.fr::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.2rem;
  background: radial-gradient(circle at 0.7rem 50%, var(--bg) 0.28rem, transparent 0.3rem) 0
    0/1.4rem 100% repeat-x;
}
.fr::before {
  top: 0.7rem;
}
.fr::after {
  bottom: 0.7rem;
}
.fr:hover {
  background: var(--ink);
  color: #0a0a0b;
  transform: translateY(-0.6rem) rotate(-1.2deg);
}
.fr b {
  font: 700 5.2rem/0.9 var(--fd);
  letter-spacing: -0.08em;
  color: var(--acc);
}
.fr h3 {
  font: 500 1.35rem var(--fd);
  letter-spacing: -0.04em;
}
.fr p {
  font-size: 0.95rem;
  opacity: 0.75;
}
.fr.last {
  background: var(--acc);
  color: #0a0a0b;
}
.fr.last b {
  color: #0a0a0b;
}
.vl {
  border-top: 1px solid var(--line);
}
.vl:last-child {
  border-bottom: 1px solid var(--line);
}
.vl div {
  display: grid;
  grid-template-columns: 4rem 1fr 1.2fr;
  gap: 2rem;
  align-items: center;
  padding: 1.8rem 0;
  transition:
    padding 0.6s var(--ease),
    color 0.4s,
    background 0.4s;
}
.vl div:hover {
  padding-left: 1.6rem;
  color: var(--acc);
}
.vl span {
  font: 500 0.75rem var(--fm);
  color: var(--mut);
}
.vl h3 {
  font: 500 1.7rem var(--fd);
  letter-spacing: -0.05em;
}
.vl p {
  color: #b9b4a5;
  font-size: 0.95rem;
}
.abv {
  height: 230vh;
}
.abv-p {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.abv-b {
  width: 30%;
  height: 34vh;
  border-radius: 99rem;
  overflow: hidden;
  position: relative;
  background: #000;
}
.abv-b video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.abv-b h2 {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  opacity: var(--ot, 0);
}
.gear {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.gear > div {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.8rem;
  transition:
    background 0.6s var(--ease),
    color 0.5s,
    transform 0.7s var(--ease);
}
.gear > div:hover {
  background: var(--ink);
  color: #0a0a0b;
  transform: translateY(-0.5rem);
}
.gear h3 {
  font: 500 1.2rem var(--fd);
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
}
.gear h3 span {
  font: 500 0.7rem var(--fm);
  opacity: 0.5;
}
.gear ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.92rem;
}
.gear li {
  border-bottom: 1px dashed currentColor;
  border-color: rgba(143, 140, 130, 0.4);
  padding-bottom: 0.45rem;
}
@media (max-width: 1100px) {
  .gear {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .ab-h {
    padding-top: 7rem;
    padding-bottom: 3rem;
    min-height: 92svh;
  }
  .ab-h .h1 {
    font-size: calc(var(--h1) * 1.25);
  }
  .ab-cap {
    width: 9rem;
    top: 6rem;
  }
  .ab-circ {
    width: 5.5rem;
    height: 5.5rem;
    left: 8%;
    top: 11rem;
  }
  .ab-st {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 3rem 0;
  }
  .ab-st p:first-child {
    font-size: 1.2rem;
  }
  .fr {
    width: 74vw;
    min-height: 20rem;
    padding: 3rem 1.4rem 2.6rem;
  }
  .fr b {
    font-size: 3.6rem;
  }
  .vl div {
    grid-template-columns: 2rem 1fr;
    gap: 0.4rem 1rem;
    padding: 1.2rem 0;
  }
  .vl h3 {
    font-size: 1.15rem;
  }
  .vl p {
    grid-column: 2;
  }
  .abv-b {
    width: 62%;
    height: 28vh;
  }
  .gear {
    grid-template-columns: 1fr;
  }
  .gear > div {
    padding: 1.2rem;
  }
}

.bl-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 1rem;
}
.bl {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: pointer;
}
.bl-im {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r);
  overflow: hidden;
  background: #111;
}
.bl-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 1.3s var(--ease),
    filter 0.6s;
}
.bl:hover .bl-im img {
  transform: scale(1.1) rotate(1deg);
}
.bl-im .pill {
  position: absolute;
  left: 1rem;
  top: 1rem;
  background: rgba(10, 10, 11, 0.6);
  backdrop-filter: blur(8px);
}
.bl-im .circ {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background: var(--ink);
  color: #000;
  border-color: var(--ink);
  transform: scale(0);
  transition: transform 0.6s var(--ease);
}
.bl:hover .bl-im .circ {
  transform: scale(1) rotate(-45deg);
}
.bl-m {
  font: 500 0.68rem var(--fm);
  color: var(--mut);
  text-transform: uppercase;
  display: flex;
  gap: 1rem;
}
.bl h3 {
  font: 500 1.35rem/1.1 var(--fd);
  letter-spacing: -0.045em;
  background: linear-gradient(var(--acc), var(--acc)) 0 100%/0 2px no-repeat;
  transition:
    background-size 0.7s var(--ease),
    color 0.4s;
  display: inline;
  padding-bottom: 0.1rem;
}
.bl:hover h3 {
  background-size: 100% 2px;
  color: var(--ink);
}
.bl p {
  color: #a6a193;
  font-size: 0.92rem;
}
.bl.big {
  grid-column: span 2;
}
.bl.big .bl-im {
  aspect-ratio: 16/8;
}
.bl.big h3 {
  font-size: 1.9rem;
}
.news {
  margin-top: 6rem;
  background: var(--acc);
  color: #0a0a0b;
  border-radius: var(--r);
  padding: 3rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
}
.news form {
  display: flex;
  gap: 0.5rem;
  background: #0a0a0b;
  border-radius: 99px;
  padding: 0.4rem;
}
.news input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0 1.2rem;
  color: var(--ink);
  min-width: 0;
}
.news .btn {
  background: var(--ink);
  color: #0a0a0b;
}
.news .btn::before {
  background: var(--acc);
}
@media (max-width: 1100px) {
  .bl-g {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .bl-g {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .bl.big {
    grid-column: span 1;
  }
  .bl.big h3 {
    font-size: 1.35rem;
  }
  .bl.big .bl-im {
    aspect-ratio: 4/3;
  }
  .bl h3 {
    font-size: 1.15rem;
  }
  .news {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    margin-top: 3rem;
  }
}

.ct-l {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin: 2rem 0 5rem;
}
.ct-r {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition:
    padding 0.6s var(--ease),
    color 0.4s;
}
.ct-r::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acc);
  transform: translateX(-101%);
  transition: transform 0.7s var(--ease);
  z-index: -1;
}
.ct-r:hover {
  padding-left: 2rem;
  padding-right: 1.4rem;
  color: #0a0a0b;
}
.ct-r:hover::before {
  transform: none;
}
.ct-r small {
  display: block;
  font: 500 0.68rem var(--fm);
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.3rem;
}
.ct-r b {
  font: 500 2.6rem/1.05 var(--fd);
  letter-spacing: -0.05em;
}
.ct-r:hover .circ {
  transform: rotate(-45deg);
  background: #0a0a0b;
  color: var(--ink);
  border-color: #0a0a0b;
}
.ct-g {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 3rem;
  align-items: start;
  padding-bottom: 7rem;
}
.ct-f {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2.2rem;
  background: var(--bg2);
}
.ct-f h2 {
  margin-bottom: 1.6rem;
}
.tp {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 1.4rem;
}
.bud {
  margin: 0.6rem 0 1.4rem;
}
.bud .top {
  display: flex;
  justify-content: space-between;
  font: 500 0.7rem var(--fm);
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 0.8rem;
}
.bud .top b {
  color: var(--acc);
  font-size: 0.9rem;
}
.bud input[type="range"] {
  background: linear-gradient(
    90deg,
    var(--acc) var(--p, 20%),
    rgba(241, 236, 221, 0.15) var(--p, 20%)
  );
}
.bud input[type="range"]::-webkit-slider-thumb {
  border-color: var(--ink);
}
.est {
  border: 1px dashed var(--acc);
  border-radius: 1rem;
  padding: 0.8rem 1rem;
  font: 500 0.75rem/1.6 var(--fm);
  margin-bottom: 1.2rem;
  color: var(--acc);
}
.ct-i {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 7rem;
}
.ct-c {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.8rem;
  transition:
    background 0.5s var(--ease),
    color 0.5s;
}
.ct-c:hover {
  background: var(--ink);
  color: #0a0a0b;
}
.ct-c:hover .mut {
  color: #444;
}
.mut {
  color: var(--mut);
}
.ct-c h3 {
  font: 500 1.3rem var(--fd);
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
}
.st {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  font: 500 0.72rem var(--fm);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.st i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #6dff8a;
}
.st.off i {
  background: var(--acc);
}
.hrs {
  font-size: 0.92rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1.5rem;
}
.steps {
  list-style: none;
  counter-reset: s;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-size: 0.92rem;
}
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.6rem;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font: 500 0.7rem var(--fm);
  color: var(--acc);
  padding-top: 0.2rem;
}
.ct-v {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #000;
}
.ct-v video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ct-v span {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  font: 500 0.7rem var(--fm);
  text-transform: uppercase;
  background: rgba(10, 10, 11, 0.6);
  backdrop-filter: blur(8px);
  padding: 0.4rem 0.9rem;
  border-radius: 99px;
}
.soc {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 980px) {
  .ct-g {
    grid-template-columns: 1fr;
  }
  .ct-i {
    position: static;
  }
}
@media (max-width: 820px) {
  .ct-r b {
    font-size: 1.15rem;
  }
  .ct-l {
    margin-bottom: 2.5rem;
  }
  .ct-f {
    padding: 1.3rem;
  }
  .ct-g {
    gap: 1.5rem;
    padding-bottom: 4rem;
  }
}

#foot {
  padding-top: 6rem;
  overflow: hidden;
}
.ft-cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--line);
}
.ft-cta .h2 {
  font-size: calc(var(--h2) * 1.3);
  max-width: 7em;
}
.ft-g {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  font-size: 0.95rem;
}
.ft-g h4 {
  font: 500 0.68rem var(--fm);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.ft-g a {
  display: block;
  padding: 0.2rem 0;
  transition:
    color 0.3s,
    transform 0.5s var(--ease);
}
.ft-g a:hover {
  color: var(--acc);
  transform: translateX(0.4rem);
}
.ft-g p {
  color: #a6a193;
  max-width: 20em;
}
.ft-mark {
  font: 800 19.5vw/0.8 var(--fd);
  letter-spacing: -0.07em;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  padding: 2rem 0 0;
  user-select: none;
  color: var(--ink);
}
.ft-mark span {
  display: inline-block;
  font-variation-settings: "wght" 500;
  font-weight: var(--w, 500);
  transition: color 0.4s;
  transform: translateY(var(--y, 0)) scale(var(--s, 1));
  transform-origin: 50% 100%;
  will-change: transform;
}
.ft-mark span:hover {
  color: var(--acc);
}
.ft-b {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.4rem;
  padding-bottom: 5.5rem;
  border-top: 1px solid var(--line);
  font: 500 0.68rem var(--fm);
  color: var(--mut);
  text-transform: uppercase;
  margin-top: 1.5rem;
}
@media (max-width: 820px) {
  #foot {
    padding-top: 3.5rem;
  }
  .ft-cta {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 2rem;
  }
  .ft-cta .h2 {
    font-size: calc(var(--h2) * 1.25);
  }
  .ft-g {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
  }
  .ft-g > div:first-child {
    grid-column: span 2;
  }
  .ft-b {
    padding-bottom: 4rem;
  }
}