/* ═══════════════════════════════════════════════════════════════════════════
   GYRODILE — growth engine landing page
   Ghost-white on near-black, one orange→magenta accent held back for numbers
   and calls to action, a 108rem editorial container, and a root that scales
   with the viewport so the whole layout stays one proportional system.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Gyrodile brand tokens (see ../CLAUDE.md) */
  --ink: #07090d;
  --panel: #0c1018;
  --white: #ffffff;
  --slate: #8a909e;
  --orange: #FF5D00;
  --magenta: #FF006D;
  --hair: rgba(255, 255, 255, 0.09);
  --accent: linear-gradient(90deg, var(--orange), var(--magenta));

  --container: 108rem;
  --pad: 2.5rem;

  /* Condensed display face carries the editorial scale; IBM Plex Mono handles
     eyebrows and metadata; Inter Tight does the reading. */
  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Root scales to a 1728px reference so every rem in the design stays in
   proportion. Below the tablet breakpoint we hand control back to fixed px. */
html {
  font-size: min(16px, 0.926vw);
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--ink);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: .01em;
  font-weight: 400;
  line-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

html.is-locked, body.is-locked { overflow: hidden !important; height: 100% !important; }
body.is-locked { position: fixed !important; width: 100%; left: 0; right: 0; }

h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--orange); color: var(--white); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Uppercase is a metadata signal now, not the default voice. */
.hero_eyebrow, .hero_proof, .engine_n, .engine_list li, .leak_n, .flow_n,
.result_unit, .result_job, .footer_legal, .link-sound,
.nav_cta, .slide_btn-text, .teardown_slots, .basic-number, .btn-start, .hero_link,
.preloader_top-wrap, .basic-text-number, .clients_note {
  text-transform: uppercase;
}
.clients_note { letter-spacing: .06em; font-size: .8rem; }

/* — cursor: manga ink ————————————————————————————————————————
   Drawn in the same language as the artwork — heavy ink contour, flat cel
   fill, one hard shadow plane with halftone screentone in it.
   Cream arrow for the page, hot-orange hand for anything clickable: the shape
   carries the state change, since two tints of one colour are indistinguishable
   at 32px. Hotspots: arrow tip (5,3), fingertip (14,3). */
@media (hover: hover) and (pointer: fine) {
  html, body {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22ha%22%20width%3D%222.1%22%20height%3D%222.1%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%221.05%22%20cy%3D%221.05%22%20r%3D%220.62%22%20fill%3D%22%2307090d%22%20opacity%3D%220.55%22%2F%3E%3C%2Fpattern%3E%3CclipPath%20id%3D%22ca%22%3E%3Cpath%20d%3D%22M5%203%20L5%2025.4%20L10.7%2019.8%20L14.3%2027.8%20L18.1%2026%20L14.6%2018.4%20L22.2%2018.4%20Z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M5%203%20L5%2025.4%20L10.7%2019.8%20L14.3%2027.8%20L18.1%2026%20L14.6%2018.4%20L22.2%2018.4%20Z%22%20fill%3D%22%23fffdf7%22%20stroke%3D%22%2307090d%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20paint-order%3D%22stroke%22%2F%3E%3Cg%20clip-path%3D%22url%28%23ca%29%22%3E%3Cpolygon%20points%3D%2213.2%2C10%2024%2C18.4%2014.6%2C18.4%2018.1%2C26%2015.2%2C27.4%2011.4%2C19%22%20fill%3D%22%23FF5D00%22%2F%3E%3Cpolygon%20points%3D%2213.2%2C10%2024%2C18.4%2014.6%2C18.4%2018.1%2C26%2015.2%2C27.4%2011.4%2C19%22%20fill%3D%22url%28%23ha%29%22%2F%3E%3Cpolygon%20points%3D%226.5%2C5%206.5%2C13.5%209.4%2C10.9%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.9%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M5%203%20L5%2025.4%20L10.7%2019.8%20L14.3%2027.8%20L18.1%2026%20L14.6%2018.4%20L22.2%2018.4%20Z%22%20fill%3D%22none%22%20stroke%3D%22%2307090d%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 5 3, default;
  }
  a, button, summary, label, [role="button"], .nav_link-wrap, .slide_btn,
  .hero_link, .nav_cta, .footer_link, .engine, .flow, .load-wrap {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22hh%22%20width%3D%222.1%22%20height%3D%222.1%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%221.05%22%20cy%3D%221.05%22%20r%3D%220.62%22%20fill%3D%22%2307090d%22%20opacity%3D%220.55%22%2F%3E%3C%2Fpattern%3E%3CclipPath%20id%3D%22ch%22%3E%3Cpath%20d%3D%22M11.6%206%20Q11.6%203.2%2014.4%203.2%20Q17.2%203.2%2017.2%206%20L17.2%2014.6%20L18.8%2014.6%20Q18.8%2012.6%2020.8%2012.6%20Q22.8%2012.6%2022.8%2014.6%20L22.8%2015.4%20Q22.8%2013.8%2024.6%2013.8%20Q26.4%2013.8%2026.4%2015.6%20L26.4%2016.6%20Q26.4%2015.2%2028%2015.2%20Q29.6%2015.2%2029.6%2017%20L29.6%2021.6%20Q29.6%2028.6%2022.8%2028.6%20L16.8%2028.6%20Q13.2%2028.6%2011.6%2025.8%20L7.4%2018.6%20Q6.4%2016.9%208.1%2015.9%20Q9.8%2014.9%2010.8%2016.6%20L11.6%2018%20Z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M11.6%206%20Q11.6%203.2%2014.4%203.2%20Q17.2%203.2%2017.2%206%20L17.2%2014.6%20L18.8%2014.6%20Q18.8%2012.6%2020.8%2012.6%20Q22.8%2012.6%2022.8%2014.6%20L22.8%2015.4%20Q22.8%2013.8%2024.6%2013.8%20Q26.4%2013.8%2026.4%2015.6%20L26.4%2016.6%20Q26.4%2015.2%2028%2015.2%20Q29.6%2015.2%2029.6%2017%20L29.6%2021.6%20Q29.6%2028.6%2022.8%2028.6%20L16.8%2028.6%20Q13.2%2028.6%2011.6%2025.8%20L7.4%2018.6%20Q6.4%2016.9%208.1%2015.9%20Q9.8%2014.9%2010.8%2016.6%20L11.6%2018%20Z%22%20fill%3D%22%23FF5D00%22%20stroke%3D%22%2307090d%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20paint-order%3D%22stroke%22%2F%3E%3Cg%20clip-path%3D%22url%28%23ch%29%22%3E%3Cpolygon%20points%3D%2217.2%2C13%2030%2C17%2030%2C29%2016%2C29%22%20fill%3D%22%23b83c00%22%2F%3E%3Cpolygon%20points%3D%2217.2%2C13%2030%2C17%2030%2C29%2016%2C29%22%20fill%3D%22url%28%23hh%29%22%2F%3E%3Cpolygon%20points%3D%2212.7%2C5.4%2012.7%2C13.6%2014.7%2C13.6%2014.7%2C5.4%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.9%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M11.6%206%20Q11.6%203.2%2014.4%203.2%20Q17.2%203.2%2017.2%206%20L17.2%2014.6%20L18.8%2014.6%20Q18.8%2012.6%2020.8%2012.6%20Q22.8%2012.6%2022.8%2014.6%20L22.8%2015.4%20Q22.8%2013.8%2024.6%2013.8%20Q26.4%2013.8%2026.4%2015.6%20L26.4%2016.6%20Q26.4%2015.2%2028%2015.2%20Q29.6%2015.2%2029.6%2017%20L29.6%2021.6%20Q29.6%2028.6%2022.8%2028.6%20L16.8%2028.6%20Q13.2%2028.6%2011.6%2025.8%20L7.4%2018.6%20Q6.4%2016.9%208.1%2015.9%20Q9.8%2014.9%2010.8%2016.6%20L11.6%2018%20Z%22%20fill%3D%22none%22%20stroke%3D%22%2307090d%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 14 3, pointer;
  }
}

/* ─────────────────────────────────────────────────────────── layout shells */

.padding_global {
  max-width: var(--container);
  min-height: 100%;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.page-wrapper { position: relative; }
.main-wrapper { position: relative; z-index: 2; }
.spacer { position: relative; z-index: 11; height: 25rem; background-color: var(--ink); }

/* Column guides — six hairlines spread across the container. */
.body-grid,
.body-grid-1 {
  position: absolute;
  inset: 0;
  z-index: 99999;
  display: flex;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  opacity: 0;
  pointer-events: none;
}
.body-grid-1.is-1 { z-index: 4; opacity: 1; }
.grid_line { width: 1px; background-color: var(--hair); }

.hero_grid-horizontal {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 100vh;
  padding-top: 2.88rem;
  padding-bottom: 2.88rem;
  opacity: 0;
  pointer-events: none;
}
.line-hor { width: 100%; height: 1px; background-color: var(--hair); }

/* ═══════════════════════════════════════════════════════════════ preloader */

.load-wrap {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background-color: var(--ink);
}
.load-wrap.is-done { pointer-events: none; }

.preloader_curtain { position: absolute; inset: 0 auto 0 0; width: 40%; background-color: var(--ink); }
.preloader_curtain.is-2 { inset: 0 0 0 auto; }
.preloader_curtain.is-3 { inset: 0 0 auto 0; width: 100%; height: 49.5%; }
.preloader_curtain.is-4 { inset: auto 0 0 0; width: 100%; height: 49.5%; }

.preloader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader_wrap { width: 46rem; max-width: calc(100vw - 2 * var(--pad)); }

.preloader_top-wrap {
  font-family: var(--font-mono);
  display: flex;
  align-items: flex-end;
  gap: .94rem;
  margin-bottom: 1.5rem;
  font-size: .88rem;
  letter-spacing: .04em;
}
.preloader_number { min-width: 2.2rem; }
.preloader_svg { height: 1.1rem; width: auto; margin-left: auto; opacity: .9; }
.preloader_pct { font-family: var(--font-mono); font-size: 1rem; }

.preloader_track { position: relative; height: 2px; background-color: #232323; transform-origin: center; }
.preloader_line { height: 2px; background-color: var(--white); transform-origin: left center; transform: scaleX(0); }

.btn-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.btn-start {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, color .3s ease;
}
.btn-start.is-ready { opacity: 1; pointer-events: auto; }
.btn-start:hover { color: var(--orange); }

.load_link-wrap { display: inline-flex; align-items: center; gap: .7rem; }

/* cursor hint that trails the pointer over the preloader */
.cursor-sound {
  position: fixed;
  top: 0; left: 0;
  z-index: 100001;
  padding: .4rem .6rem;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--white);
  pointer-events: none;
  transform: translate(14px, 14px);
  transition: opacity .3s ease;
}
.cursor-sound.is-hidden { opacity: 0; }

/* ══════════════════════════════════════════════════════════════════ navbar */

/* height:0 kept the bar out of the layout so the hero runs under it; with a
   background to paint we need real height instead — fixed position means it
   still takes no space in the flow. */
.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9000;
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}
.navbar.is-scrolled {
  background-color: rgba(7, 9, 13, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--hair);
}

.container_navbar {
  position: relative;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.94rem var(--pad);
  transition: padding .35s ease;
}
/* tightens as it docks */
.navbar.is-scrolled .container_navbar { padding-top: 1.15rem; padding-bottom: 1.15rem; }


.link-wrap { display: flex; align-items: center; }

.nav_link-wrap {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-right: 2.5rem;
  cursor: pointer;
}
.nav_sound { display: flex; align-items: center; gap: .19rem; height: 1.33rem; }
.sound-line { width: .09rem; height: 1.33rem; background-color: var(--white); transform-origin: center; }
.sound-line.is-1 { height: .16rem; }
.sound-line.is-2 { height: .83rem; }

/* equalizer only dances while audio is actually playing */
.nav_link-wrap.is-playing .sound-line { animation: eq .9s ease-in-out infinite; }
.nav_link-wrap.is-playing .sound-line:nth-child(1) { animation-delay: 0s; }
.nav_link-wrap.is-playing .sound-line:nth-child(2) { animation-delay: .12s; }
.nav_link-wrap.is-playing .sound-line:nth-child(3) { animation-delay: .24s; }
.nav_link-wrap.is-playing .sound-line:nth-child(4) { animation-delay: .36s; }
.nav_link-wrap.is-playing .sound-line:nth-child(5) { animation-delay: .48s; }
@keyframes eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1.6); } }

.link-sound {
  font-family: var(--font-mono);
  width: 5.8rem;
  padding: .13rem .31rem;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--white);
  transition: color .3s ease-in-out;
}
.nav_link-wrap:hover .link-sound { color: var(--orange); }


















/* ════════════════════════════════════════════════════════════════════ hero */














.h1 {
  font-family: var(--font-display);
  font-size: 9.5rem;
  /* matches .h2-sec — one display weight across the page */
  font-weight: 700;
  line-height: .9;
  /* Inter Tight needs real negative tracking at display size or the counters
     open up and it reads like body copy scaled up. */
  letter-spacing: -.045em;
  text-transform: none;
}
.h1_line { display: block; }






/* ════════════════════════════════════════════════════════════ intro grid */

.section_second { position: relative; z-index: 10; padding: 9rem 0 11rem; background-color: var(--ink); }
.container_second { position: relative; }

.second_grid { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 20.56rem; }
.second_grid-content {
  display: flex;
  gap: .75rem;
  min-width: 11.38rem;
  max-width: 11.38rem;
  font-size: .75rem;
  line-height: 130%;
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}
.second_grid-content.is-visible { opacity: 1; transform: none; }
.second_grid-content:nth-child(2) { justify-self: center; }
.second_grid-content:nth-child(3) { justify-self: end; flex-flow: row wrap; max-width: 22rem; }

.basic-number { flex: none; font-family: var(--font-mono); color: var(--orange); }
.second_basic-text { max-width: 18rem; }
.second_text-block { width: 100%; margin-top: 3rem; }
.second_h { font-family: var(--font-display); font-size: 2.5rem; line-height: 110%; }


.basic-text.text-justifi { text-align: justify; }
.maxw-275 { max-width: 17.19rem; }


/* [anim=fade] elements — staggered by the observer in app.js */
[anim="fade"] { opacity: 0; transform: translateY(1rem); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
[anim="fade"].is-visible { opacity: 1; transform: none; }

/* ═════════════════════════════════════════════════════ projects (pinned) */

.section_project { position: relative; z-index: 10; height: 400vh; background-color: var(--ink); }
.padding_global.is-2 { padding-left: 0; padding-right: 0; max-width: none; }

.container_project {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.project_top-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  height: 1.63rem;
  margin-bottom: .5rem;
  padding: 0 var(--pad);
}
.project_svg { height: 1.1rem; width: auto; opacity: .8; }

.h2 {
  font-family: var(--font-display);
  font-size: 26.38rem;
  font-weight: 400;
  line-height: 86%;
  letter-spacing: 0;
  padding-left: 1.25rem;
}

.slides_stage { position: relative; flex: 1; overflow: hidden; }
.slide {
  position: absolute;
  inset: 0;
  /* clips its own scaled backdrop — slides_stage stops clipping on mobile */
  overflow: hidden;
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.project_curtain {
  position: absolute;
  inset: 0;
  z-index: 999;
  background: var(--ink);
  will-change: transform;
  transform: translateZ(0);
}

.video-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}
.video-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000000cc 0%, #00000055 45%, #00000099 100%); }

.slide_wrap { position: relative; z-index: 1; width: 100%; height: 100%; }
.slide_text-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1.25rem var(--pad);
}
.slide_text-left { display: flex; flex-flow: column; justify-content: flex-end; gap: 1.5rem; max-width: 34rem; }
.p-m { font-family: var(--font-display); font-size: 5rem; font-weight: 400; line-height: 88%; margin-bottom: 1.5rem; }
.slide_text-right { display: flex; flex-flow: column; align-items: flex-end; gap: 1rem; }
.slide_number { font-family: var(--font-display); font-size: 3rem; line-height: 86%; }
.slide_caption { height: 2.1rem; width: auto; }

.slide_btn { position: relative; display: inline-flex; align-self: flex-start; overflow: hidden; border: 1px solid var(--hair); }
.slide_btn-bg { position: absolute; inset: 0; background: var(--orange); transform: translateY(101%); transition: transform .45s cubic-bezier(.76,0,.24,1); }
.slide_btn:hover .slide_btn-bg { transform: translateY(0); }
.slide_btn-wrap { position: relative; z-index: 2; display: flex; align-items: center; gap: .75rem; padding: .75rem 1.1rem; }
.slide_btn-text { font-family: var(--font-mono); font-size: .88rem; letter-spacing: .06em; }
.slide_btn svg { width: 1.2rem; height: 1.2rem; }

/* ═════════════════════════════════════════════════════════════════ odyssey */

.section_odyssey {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  padding: 14rem 0 12rem;
  overflow: hidden;
  background-color: var(--ink);
}
.odyssey_parallax-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  object-position: 50% 0%;
  pointer-events: none;
  will-change: transform;
}
/* This artwork is high-key — a mostly-white funnel — so unlike the reference's
   dark rock plates it needs holding back hard, or white type sits on white ink. */
.odyssey_parallax-img.is-1 { opacity: .5; }
.odyssey_gradient {
  position: absolute;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(0deg, var(--ink) 6%, rgba(7, 9, 13, .82) 48%, rgba(7, 9, 13, .55) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(7, 9, 13, 0) 35%, rgba(7, 9, 13, .75) 100%);
  pointer-events: none;
}
.container_oddysey { position: relative; z-index: 120; }

.odyssey_top-wrap { display: flex; align-items: flex-start; justify-content: space-between; }
.odyssey_left { display: flex; flex-flow: column; gap: 1rem; padding-top: .5rem; }
.odyssey_svg.is-1 { height: 1.1rem; width: auto; }
.odyssey_meta { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; color: var(--orange); }
.odyssey_right { text-align: right; }
.h2-odyssey { font-family: var(--font-display); font-size: 17rem; font-weight: 400; line-height: 86%; text-align: right; }

.odyssey_bottom-wrap { margin-top: 10rem; display: flex; flex-flow: column; gap: 2.5rem; }
.odyssey_text { max-width: 61.75rem; margin: 0 auto; font-size: 1.5rem; line-height: 130%; text-transform: none; color: #d6d9e0; }
.odyssey_text.is-2 { margin-left: 20.63rem; }
.odyssey_text.is-3 { margin-right: 23.13rem; }

.odyssey_line { position: absolute; inset: 0 0 auto; z-index: 9990; width: 100%; height: 1px; background-color: var(--hair); }
.odyssey_line.is-1 { top: 8rem; }
.odyssey_line.is-2 { top: 40rem; }
.odyssey_line.is-3 { top: 72rem; }

/* ════════════════════════════════════════════════════════════════ partners */

.section_partners { position: relative; z-index: 10; padding: 6rem 0 4rem; background-color: var(--ink); }
.ralative { position: relative; }
.h2-partners { font-family: var(--font-display); font-size: 16.88rem; font-weight: 400; line-height: 86%; margin-bottom: 6.25rem; }







/* ═══════════════════════════════════════════════════════════ last updates */

.section_update { position: relative; z-index: 10; padding: 6rem 0 8rem; background-color: var(--ink); }
.update_top-wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; margin-bottom: 3rem; }
.update_left-wrap { max-width: 24rem; padding-bottom: 1rem; }
.h2-update { font-family: var(--font-display); font-size: 17.06rem; font-weight: 400; line-height: 86%; text-align: right; }



.swiper-wrapper { position: relative; }



















/* ══════════════════════════════════════════════════════════════════ footer */

.footer { position: relative; z-index: 12; padding-top: 8rem; background-color: var(--ink); }
.container_hero.footer { position: relative; }
.footer_top-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 5rem;
}
.footer_links { display: flex; gap: 2.25rem; }
.footer_link.is-cta {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--hair);
}
.footer_link.is-cta:hover { border-color: var(--orange); }
.footer_link_wrap { display: flex; flex-flow: column; gap: .75rem; font-size: .88rem; }
.footer_link_wrap.is-2 { text-align: right; }
.footer_link { transition: color .3s ease; }
.footer_link:hover { color: var(--orange); }

.footer_logo { display: flex; justify-content: center; overflow: hidden; }
.footer_logo { display: flex; justify-content: center; overflow: hidden; padding: 1rem 0; }
.footer_bottom-wrap { display: flex; align-items: center; justify-content: space-between; padding: 2rem 0; }
.footer_svg { height: 1rem; width: auto; opacity: .7; }
.team-line { width: 100%; height: 1px; background-color: var(--hair); }

/* ══════════════════════════════════════════════════ Gyrodile components ═══ */


.lede { font-size: 1.35rem; line-height: 140%; text-transform: none; color: #d6d9e0; }

/* One display scale for every section head, so the artwork gets the room the
   giant per-section sizes used to eat. */
.h2-sec {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.038em;
  text-transform: none;
}
.h2-sec.is-tight { font-size: 4.75rem; }
.h2-sec.is-right { text-align: right; }
.h2-sec.is-xl { font-size: 7.5rem; }






/* — brand ——————————————————————————————————————————————————————— */
.brand_logo { height: 1.6rem; width: auto; display: block; }
.brand_logo.is-xl { height: auto; width: 100%; max-width: 100rem; }
.footer_logo { display: flex; justify-content: center; padding: 2rem 0 1rem; }

/* — hero ———————————————————————————————————————————————————————
   Full viewport, single left-aligned column on a dark bed. The artwork is
   full-bleed behind it but carries a hard scrim across the lower-left, because
   the plate has bright white ink in it and the headline has to win. */
.section_hero {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  min-height: 100vh;
  padding-top: 8rem;
  background-color: var(--ink);
  overflow: hidden;
}
.hero_media { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
/* Background video sits under the stills; the poster image doubles as the
   fallback when the file is missing or the browser blocks autoplay. */
.hero_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 32%;
  z-index: 1;
}
.hero_plate.is-fallback { z-index: 0; }
.has-hero-video .hero_plate.is-fallback { opacity: 0; }
.hero_plate.is-dust { z-index: 2; }


.hero_plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 32%;
  will-change: transform;
}
.hero_plate.is-dust { opacity: .7; }
.hero_media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(75deg, var(--ink) 8%, rgba(7, 9, 13, .92) 34%, rgba(7, 9, 13, .35) 62%, rgba(7, 9, 13, .1) 100%),
    linear-gradient(0deg, var(--ink) 2%, rgba(7, 9, 13, 0) 42%);
}

.hero_inner { position: relative; z-index: 5; width: 100%; display: flex; align-items: flex-end; flex: 1; padding-bottom: 3.5rem; }
.hero_content { max-width: 62rem; }

.hero_eyebrow {
  margin-bottom: 1.75rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--orange);
}
.hero_sub-text {
  max-width: 34rem;
  margin-top: 2.25rem;
  font-size: 1.5rem;
  line-height: 135%;
  text-transform: none;
  color: #e6e8ec;
}
.hero_actions { display: flex; align-items: center; gap: 2.25rem; margin-top: 2.25rem; flex-wrap: wrap; }

.hero_footer {
  position: relative;
  z-index: 5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.75rem;
  border-top: 1px solid var(--hair);
}
.hero_proof { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; color: var(--slate); }
.hero_barcode { height: 1.1rem; width: auto; opacity: .55; }

/* — navbar CTA ————————————————————————————————————————————————— */
.nav_logo-wrap { display: flex; align-items: center; }
.nav_cta {
  position: relative;
  z-index: 0;
  isolation: isolate;
  padding: .6rem 1rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  border: 1px solid var(--hair);
  overflow: hidden;
  transition: color .3s ease, border-color .3s ease;
}
.nav_cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.76, 0, .24, 1);
}
.nav_cta:hover { border-color: transparent; }
.nav_cta:hover::before { transform: translateY(0); }
.nav_cta span { display: inline-block; transition: transform .3s ease; }
.nav_cta:hover span { transform: translateX(.25rem); }


.hero_sub-text { font-size: 1.45rem; line-height: 135%; text-transform: none; color: #e6e8ec; }
.hero_actions { display: flex; align-items: center; gap: 2rem; margin-top: 1.75rem; flex-wrap: wrap; }
.hero_link {
  font-family: var(--font-mono);
  font-size: .88rem;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--hair);
  padding-bottom: .25rem;
  transition: color .3s ease, border-color .3s ease;
}
.hero_link:hover { color: var(--orange); border-color: var(--orange); }
.hero_link span { display: inline-block; transition: transform .3s ease; }
.hero_link:hover span { transform: translateX(.25rem); }

.hero_eyebrow { font-family: var(--font-mono); font-size: .75rem; line-height: 160%; letter-spacing: .12em; color: var(--orange); }



/* Film grain. Static tile, nudged on a step timer so it shimmers like real
   grain instead of sitting there as a texture. */
.hero_grain {
  position: absolute;
  inset: -120px;
  z-index: 4;
  pointer-events: none;
  opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: grain 900ms steps(3) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-24px, 14px); }
  66%  { transform: translate(18px, -20px); }
  100% { transform: translate(0, 0); }
}

/* Corner crosshairs — the same technical register as the barcode and QR. */
.hero_marks {
  position: absolute;
  inset: 6.5rem var(--pad) 5rem;
  z-index: 6;
  max-width: var(--container);
  margin: 0 auto;
  pointer-events: none;
}
.mark {
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: .5;
}
.mark::before, .mark::after {
  content: "";
  position: absolute;
  background: var(--white);
}
.mark::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.mark::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.mark.tl { top: 0; left: 0; }
.mark.tr { top: 0; right: 0; }
.mark.bl { bottom: 0; left: 0; }
.mark.br { bottom: 0; right: 0; }


/* — 01 the problem ————————————————————————————————————————————— */
.section_leaks { position: relative; z-index: 10; padding: 10rem 0 8rem; background-color: var(--ink); }
.leaks_head { margin-bottom: 4rem; }
.leaks_body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 5rem; align-items: start; }
/* The artwork is the content here, not wallpaper — full strength, no scrim. */
.leaks_figure { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--hair); }
.leaks_figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.leaks_list { display: flex; flex-flow: column; gap: 2.25rem; }
.leak { padding-top: 1.5rem; border-top: 1px solid var(--hair); }
.leak_n { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; color: var(--orange); }
.leak_t { margin: .6rem 0 .5rem; font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.leak_d { font-size: 1rem; line-height: 155%; text-transform: none; color: var(--slate); }

/* — 02 four engines ———————————————————————————————————————————— */
.section_engines { position: relative; z-index: 10; padding: 8rem 0; background-color: var(--ink); }
.engines_head { margin-bottom: 4rem; }
.engines_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.engine {
  display: flex;
  flex-flow: column;
  border: 1px solid var(--hair);
  overflow: hidden;
  transition: border-color .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.engine:hover { border-color: rgba(255, 255, 255, .25); transform: translateY(-6px); }
.engine_media { overflow: hidden; }
.engine_media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.engine:hover .engine_media img { transform: scale(1.06); }
.engine_body { display: flex; flex-flow: column; flex: 1; padding: 1.75rem 1.5rem 1.5rem; }
.engine_top { display: flex; flex-flow: column; gap: .35rem; }
.engine_n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--slate); }
.engine_name { margin: 0; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.engine_verb {
  margin: .35rem 0 .9rem;
  font-weight: 700;
  letter-spacing: -.02em;
  /* background-clip:text crops descenders without a little room */
  line-height: 1.15;
  padding-bottom: .1em;
  font-family: var(--font-display);
  font-size: 1.6rem;
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.engine_desc { margin-bottom: 1.75rem; font-size: .98rem; line-height: 150%; text-transform: none; color: #d6d9e0; }
.engine_list { margin: auto 0 0; padding: 0; list-style: none; }
.engine_list li {
  padding: .55rem 0;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--slate);
}














/* — 04 proof ———————————————————————————————————————————————————— */
.section_proof { position: relative; z-index: 10; padding: 6rem 0 8rem; background-color: var(--ink); }
.proof_head { margin-bottom: 3.5rem; }
.proof_grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.result { padding: 2.5rem 1.75rem 2rem; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.result_metric {
  font-family: var(--font-display);
  font-size: 4.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.result_unit { margin-top: .6rem; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; color: var(--slate); }
.result_meta { display: flex; flex-flow: column; gap: .3rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.result_brand { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.result_job { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--orange); }
.clients_note { margin: 2.5rem 0 0; font-size: 1rem; text-transform: none; color: var(--slate); }
.partners_grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.partners_img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 21 / 9;
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  transition: background-color .4s ease;
}
.partners_img-wrap:hover { background-color: rgba(255, 255, 255, .04); }
.partners_img { width: 62%; height: auto; opacity: .7; transition: opacity .4s ease; }
.partners_img-wrap:hover .partners_img { opacity: 1; }


/* — 05 workflow ———————————————————————————————————————————————— */
.section_update { position: relative; z-index: 10; padding: 4rem 0 8rem; background-color: var(--ink); }
.update_top-wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; margin-bottom: 3rem; }
.update_left-wrap { max-width: 26rem; }
.update_left-wrap .lede { margin-top: 1rem; font-size: 1.15rem; }
.update_slider { position: relative; }
.swiper { position: relative; overflow: hidden; }
.swiper-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.swiper-slide.is-active { position: relative; opacity: 1; pointer-events: auto; }
.update_wrap { position: relative; height: 44rem; overflow: hidden; border: 1px solid var(--hair); }
.update_img-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.update_content-wtap { position: absolute; inset: auto 0 0; z-index: 2; padding: 2.5rem; }
.update_text-wrap { display: flex; flex-flow: column; gap: 1.5rem; }
.update_title-wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.update_number-block { display: flex; align-items: center; gap: .75rem; }
.basic-text-number { font-family: var(--font-mono); font-size: .88rem; }
.line-slider { width: 5rem; height: 1px; background-color: var(--hair); }
.update_text { max-width: 52rem; font-family: var(--font-display); font-size: 4.5rem; line-height: 92%; }

.basic-text { font-size: .95rem; line-height: 150%; text-transform: none; }
.maxw-448 { max-width: 28rem; }

.swiper-prev, .swiper-next {
  position: absolute;
  bottom: 2.5rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--orange);
  border: 1px solid var(--hair);
  background: rgba(7, 9, 13, .55);
  transition: color .3s ease, background-color .3s ease, opacity .3s ease;
}
.swiper-prev { right: 6.25rem; }
.swiper-next { right: 2.5rem; }
.swiper-prev:hover, .swiper-next:hover { background-color: var(--orange); color: var(--white); }
.swiper-button-disabled { color: var(--white) !important; opacity: .35; pointer-events: none; }

/* — workflow: four long columns —————————————————————————————— */
.flow_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.flow {
  display: flex;
  flex-flow: column;
  border: 1px solid var(--hair);
  overflow: hidden;
  transition: border-color .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.flow:hover { border-color: rgba(255, 255, 255, .25); transform: translateY(-6px); }
.flow_media { overflow: hidden; }
/* portrait crop so the four read as tall columns rather than wide cards */
.flow_media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.flow:hover .flow_media img { transform: scale(1.06); }
.flow_body { display: flex; flex-flow: column; flex: 1; padding: 1.75rem 1.5rem 2rem; }
.flow_n { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; color: var(--orange); }
.flow_t { margin: 1rem 0 .9rem; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.flow_d { font-size: .95rem; line-height: 155%; text-transform: none; color: var(--slate); }

/* — 06 the offer ———————————————————————————————————————————————— */
.section_teardown { position: relative; z-index: 10; padding: 4rem 0 9rem; background-color: var(--ink); }
.teardown_top { margin-bottom: 3.5rem; }
.teardown_body { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; padding-top: 3rem; border-top: 1px solid var(--hair); }
.teardown_lede { font-size: 1.45rem; line-height: 145%; text-transform: none; color: #d6d9e0; }
.teardown_list { margin: 0; padding: 0; list-style: none; }
.teardown_item {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 1.1rem;
  line-height: 135%;
}
.teardown_item:first-child { border-top: 1px solid var(--hair); }
.basic-number { flex: none; font-family: var(--font-mono); color: var(--orange); }
.teardown_cta { display: flex; align-items: center; gap: 2.5rem; margin-top: 3.5rem; flex-wrap: wrap; }
.slide_btn { position: relative; display: inline-flex; align-self: flex-start; overflow: hidden; border: 1px solid var(--hair); }
.slide_btn-bg { position: absolute; inset: 0; background: var(--orange); transform: translateY(101%); transition: transform .45s cubic-bezier(.76, 0, .24, 1); }
.slide_btn:hover .slide_btn-bg { transform: translateY(0); }
.slide_btn-wrap { position: relative; z-index: 2; display: flex; align-items: center; gap: .75rem; padding: .75rem 1.1rem; }
.slide_btn-text { font-family: var(--font-mono); font-size: .88rem; letter-spacing: .06em; }
.slide_btn svg { width: 1.2rem; height: 1.2rem; }
.slide_btn.is-lg .slide_btn-wrap { padding: 1.15rem 1.75rem; }
.slide_btn.is-lg .slide_btn-text { font-size: 1rem; }
.slide_btn.is-lg .slide_btn-bg { background: var(--accent); }
.teardown_slots { display: flex; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--slate); }
.pulse-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255, 93, 0, .6); animation: pulse 2s ease-out infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 93, 0, .6); }
  70%  { box-shadow: 0 0 0 .6rem rgba(255, 93, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 93, 0, 0); }
}

/* — footer ————————————————————————————————————————————————————— */


.footer_legal { display: flex; gap: 1.5rem; font-family: var(--font-mono); font-size: .82rem; }
.footer_logo { display: flex; justify-content: center; overflow: hidden; padding: 1rem 0; }

/* ═════════════════════════════════════════════════════════════ breakpoints */

@media (max-width: 1200px) {
  .engines_grid { grid-template-columns: repeat(2, 1fr); }
  .flow_grid { grid-template-columns: repeat(2, 1fr); }
  .proof_grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  html { font-size: 16px; }
  :root { --pad: 1.25rem; }

  .h1 { font-size: 4.6rem; white-space: normal; }
  .h2-sec { font-size: 3.6rem; }
  .h2-sec.is-tight { font-size: 3.2rem; }
  .h2-sec.is-xl { font-size: 4rem; }
  .h2-sec.is-right { text-align: left; }
  .brand_logo { height: 1.2rem; }

  .nav_cta { padding: .5rem .7rem; font-size: .68rem; letter-spacing: .04em; }
  .nav_cta span { display: none; }

  .section_hero { min-height: 100svh; padding-top: 6rem; }
  .hero_plate { object-position: 60% 30%; }
  .hero_media::after {
    background:
      linear-gradient(0deg, var(--ink) 12%, rgba(7, 9, 13, .78) 48%, rgba(7, 9, 13, .3) 100%);
  }
  .hero_inner { padding-bottom: 2rem; }
  .hero_content { max-width: none; }
  .hero_eyebrow { margin-bottom: 1rem; font-size: .7rem; letter-spacing: .14em; }
  .hero_sub-text { max-width: none; margin-top: 1.5rem; font-size: 1.1rem; }
  .hero_actions { gap: 1.25rem; margin-top: 1.5rem; }
  .hero_footer { flex-flow: column; align-items: flex-start; gap: .75rem; padding-bottom: 1.25rem; }
  .hero_proof { font-size: .68rem; letter-spacing: .05em; }
  .hero_barcode { height: .9rem; }

  .section_leaks { padding: 5rem 0 4rem; }
  .leaks_body { grid-template-columns: 1fr; gap: 2.5rem; }
  .leaks_figure img { aspect-ratio: 16 / 10; }
  .leak_t { font-size: 1.9rem; }
  .lede { font-size: 1.1rem; }

  .section_engines { padding: 4rem 0; }
  .engines_grid { grid-template-columns: 1fr; gap: 1rem; }
  .engine_name { font-size: 2.6rem; }
  .engine_media img { aspect-ratio: 16 / 9; }

  .section_proof { padding: 3rem 0 4rem; }
  .result { padding: 1.75rem 1.25rem; }
  .result_metric { font-size: 3.2rem; }
  .result_meta { margin-top: 1.5rem; }

  .section_update { padding: 3rem 0 4rem; }
  .update_top-wrap { flex-flow: column; align-items: stretch; gap: 1.5rem; }
  .update_left-wrap { max-width: none; }
  .flow_grid { grid-template-columns: 1fr; gap: 1rem; }
  .flow_media img { aspect-ratio: 16 / 9; }
  .flow_t { font-size: 2rem; }

  .section_teardown { padding: 3rem 0 5rem; }
  .teardown_body { grid-template-columns: 1fr; gap: 2.5rem; }
  .teardown_lede { font-size: 1.1rem; }
  .teardown_cta { gap: 1.5rem; margin-top: 2.5rem; }

  .navigation_wrap { flex-flow: column; justify-content: flex-end; padding: 6rem 1.25rem 3rem; }
  .navigation_block { flex: none; height: 5.5rem; align-items: center; border-left: 0; border-bottom: 1px solid #00000026; }
  .navigation_block:last-child { border-right: 0; }
  .navigation_rotate-wrap { transform: none; margin-right: 0; margin-left: 1.25rem; }
  .navigation_text { font-size: 2.5rem; }

  .nav_link-wrap { margin-right: 1rem; }
  .link-sound { width: auto; font-size: .88rem; }
  .cursor-sound { display: none; }
  .spacer, .spacer.is-sm { height: 4rem; }
  .footer { padding-top: 4rem; }
  .footer_top-wrap { align-items: flex-start; gap: 1.5rem; padding-bottom: 2.5rem; }
  .footer_links { flex-flow: column; gap: .75rem; }
  .footer_bottom-wrap { flex-flow: column; align-items: flex-start; gap: 1rem; }
}

@media (max-width: 479px) {
  .h1 { font-size: 3.1rem; }
  .h2-sec, .h2-sec.is-tight, .h2-sec.is-xl { font-size: 2.6rem; }

  .preloader_svg { display: none; }
  .link-sound { display: none; }
  .proof_grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}