/* ==========================================================================
  bytesurfers — mobile-first stylesheet
   Structure: tokens → base → primitives → sections → motion → preferences
   ========================================================================== */

/* ---------- Fonts (both SIL OFL 1.1, see assets/fonts/*-LICENSE.txt) ---------- */
@font-face {
  font-family: "Aspekta";
  src: url("../assets/fonts/AspektaVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --c-black: #020305;
  --c-white: #fff;
  --c-thread-head-rgb: 255,255,255;
  --c-gray: #191c22;
  --c-accent: #51432d;
  --c-accent-light: #f3dfb5;
  --c-accent-light-rgb: 243,223,181;
  --c-mist-rgb: 232,238,248;
  --c-accent-clear: rgb(81 67 45 / 0);
  --c-black-clear: rgb(2 3 5 / 0);
  --c-glass: rgb(2 3 5 / 0.5);
  --c-wave-hero: #9aa6b8;
  --c-wave-footer: #778598;
  --c-white-50: rgb(255 255 255 / 0.5);
  --c-white-62: rgb(255 255 255 / 0.62);
  --c-white-80: rgb(255 255 255 / 0.8);

  --font-body: "Aspekta", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-label: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --dash: 1px dashed var(--c-white-50);
  --nav-h: 4rem;
  --gutter: 1rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; }
}

:root[data-theme="interstellar"] .waves {
  background-color: var(--c-black);
  background-image:
    radial-gradient(1px 1px at 17px 31px, #e8eef8 90%, transparent),
    radial-gradient(1px 1px at 97px 113px, #9aa6b8 90%, transparent),
    radial-gradient(1.5px 1.5px at 163px 57px, #f3dfb5 70%, transparent),
    radial-gradient(1px 1px at 43px 157px, #ffffff80 90%, transparent);
  background-size: 211px 193px, 307px 269px, 401px 353px, 167px 229px;
}

:root[data-theme="interstellar"] .hero__tint {
  background:
    radial-gradient(ellipse at 68% 26%, rgb(243 223 181 / 0.12), transparent 38%),
    linear-gradient(180deg, rgb(2 3 5 / 0.05), rgb(2 3 5 / 0.3) 45%, #020305 100%);
}

:root[data-theme="interstellar"] .footer-art__tint {
  background:
    radial-gradient(ellipse at 50% 30%, rgb(243 223 181 / 0.1), transparent 42%),
    linear-gradient(180deg, #020305, rgb(2 3 5 / 0) 35%);
}

:root[data-theme="interstellar"] .approach__sticky {
  background: linear-gradient(-5deg, var(--c-black-clear) 11%, #17151a 80%);
}

:root[data-theme="interstellar-light"] {
  color-scheme: light;
  --c-black: #f4f1e9;
  --c-white: #252932;
  --c-gray: #e1ddd3;
  --c-accent: #735b32;
  --c-accent-light: #735b32;
  --c-accent-light-rgb: 115,91,50;
  --c-mist-rgb: 79,90,109;
  --c-thread-head-rgb: 37,41,50;
  --c-wave-hero: #727c8b;
  --c-wave-footer: #87909d;
  --c-white-50: rgb(37 41 50 / 0.6);
  --c-white-62: rgb(37 41 50 / 0.75);
  --c-white-80: rgb(37 41 50 / 0.85);
  --c-accent-clear: rgb(115 91 50 / 0);
  --c-black-clear: rgb(244 241 233 / 0);
  --c-glass: rgb(244 241 233 / 0.7);
}

:root[data-theme="interstellar-light"] .waves {
  background-color: var(--c-black);
  background-image:
    radial-gradient(1px 1px at 17px 31px, #727c8b80 90%, transparent),
    radial-gradient(1px 1px at 97px 113px, #735b3260 90%, transparent),
    radial-gradient(1.5px 1.5px at 163px 57px, #735b3280 70%, transparent);
  background-size: 211px 193px, 307px 269px, 401px 353px;
}

:root[data-theme="interstellar-light"] .hero__tint {
  background:
    radial-gradient(ellipse at 68% 26%, rgb(186 149 80 / 0.15), transparent 38%),
    linear-gradient(180deg, var(--c-black-clear), rgb(244 241 233 / 0.25) 45%, var(--c-black));
}

:root[data-theme="interstellar-light"] .footer-art__tint {
  background:
    radial-gradient(ellipse at 50% 30%, rgb(186 149 80 / 0.14), transparent 42%),
    linear-gradient(180deg, var(--c-black), var(--c-black-clear) 35%);
}

:root[data-theme="interstellar-light"] .approach__sticky {
  background: linear-gradient(-5deg, var(--c-black-clear) 11%, #e8e2d5 80%);
}

:root[data-theme="interstellar-light"] :is(.brand, .chip, .tag--gray, .btn--ghost) { color: var(--c-white); }
:root[data-theme="interstellar-light"] .tag--black { background: var(--c-white); color: #fff; }
:root[data-theme="interstellar-light"] #g-ink stop:first-child { stop-color: var(--c-white); }
:root[data-theme="interstellar-light"] .footer-art__logo { fill: var(--c-white); opacity: 0.22; }
:root[data-theme="interstellar-light"] .footer-art__logo use { color: var(--c-white); }
:root[data-theme="interstellar-light"] .chip:hover { background: var(--c-white); color: var(--c-black); }

.mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: var(--dash);
  background: var(--c-gray);
  color: var(--c-accent-light);
  cursor: pointer;
}
.mode-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mode-toggle__moon { display: none; }
:root[data-theme="interstellar-light"] .mode-toggle__sun { display: none; }
:root[data-theme="interstellar-light"] .mode-toggle__moon { display: block; }
.no-js .mode-toggle { display: none; }

@media (max-width: 479px) {
  .site-header__inner { flex-wrap: wrap; gap: 0.5rem; }
  .site-header .brand { gap: 0.35rem; }
  .site-header .brand__word { font-size: 1.2rem; }
  .site-header .brand__mark { width: 1.4rem; height: 1.4rem; }
  .site-nav { gap: 0.35rem; }
  .site-header .btn { gap: 0.4rem; padding-left: 0.5rem; font-size: 0.75rem; }
  .site-header .btn__icon { padding-inline: 0.3rem; }
}

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

/* Root size scales fluidly like the original: 16px phones, 14→12px tablets, 12→16px+ desktops */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

@media (min-width: 480px) {
  html { font-size: calc(0.875rem - (100vw - 479px) * 0.00277); }
}

@media (min-width: 1200px) {
  html { font-size: min(1.5rem, calc(0.3333rem + 0.5556vw)); }
}

body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { fill: currentColor; }
svg, canvas { display: block; max-width: 100%; }

::selection { background: var(--c-accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--c-accent-light);
  outline-offset: 2px;
}

#g-ink stop:last-child { stop-color: var(--c-accent-light); }
#g-wordmark stop { stop-color: var(--c-black); }

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 10001;
  padding: 0.5rem 0.75rem;
  background: #fff;
  color: var(--c-black);
  font: 0.875rem/1 var(--font-label);
  text-transform: uppercase;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout primitives ---------- */
.frame {
  width: min(90rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
  border-inline: var(--dash);
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.stack--md { gap: 1rem; }

.text-50 { color: var(--c-white-50); }
.text-80 { color: var(--c-white-80); }

/* ---------- Typography ---------- */
.t-h2 { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.05rem; }
.t-p1 { font-size: 1rem; line-height: 1.5rem; }
.t-p2 { font-size: 0.875rem; line-height: 1.25rem; }

.t-label-1,
.t-label-2,
.t-label-3,
.tag,
.chip,
.btn {
  font-family: var(--font-label);
  font-weight: 400;
  text-transform: uppercase;
}
.t-label-1 { font-size: 1rem; line-height: 1.25rem; letter-spacing: -0.05rem; }
.t-label-2 { font-size: 0.875rem; line-height: 1rem; letter-spacing: -0.02rem; }
.t-label-3 { font-size: 0.875rem; line-height: 1rem; letter-spacing: -0.05rem; }

@media (min-width: 768px) {
  .t-h2 { font-size: 2.375rem; line-height: 3rem; letter-spacing: -0.0475rem; }
  .t-label-1 { font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.0225rem; }
  .t-label-2 { font-size: 1rem; line-height: 1.25rem; }
  .t-label-3 { letter-spacing: -0.0225rem; }
}

/* ---------- Tag / chip ---------- */
.tag {
  display: inline-flex;
  padding: 0.3rem 0.5rem;
  background: var(--c-black);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1rem;
  letter-spacing: -0.02rem;
}
.tag--gray { background: var(--c-gray); }

.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.5rem;
  background: var(--c-gray);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1rem;
  letter-spacing: -0.05rem;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

@media (min-width: 768px) {
  .tag { font-size: 1rem; line-height: 1.25rem; }
  .chip { letter-spacing: -0.0225rem; }
}

@media (hover: hover) {
  .chip:hover { background: #fff; color: var(--c-black); }
}

/* ---------- Buttons (label + dashed divider + icon) ---------- */
.icon { width: 1.25rem; height: 1.25rem; flex: none; }

.btn {
  --btn-bg: var(--c-accent);
  --btn-fg: #fff;
  --btn-rule: #fff;

  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0 0 0.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.875rem;
  line-height: 1rem;
  letter-spacing: -0.05rem;
  white-space: nowrap;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.btn__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding-inline: 0.5rem;
  border-left: 1px dashed var(--btn-rule);
  transition: border-color 0.3s ease-in-out;
}

.btn--big .btn__icon { height: 2.5rem; }
.btn--big .icon { width: 1.5rem; height: 1.5rem; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-rule: var(--c-white-50);
  border: var(--dash);
}

@media (min-width: 768px) {
  .btn { letter-spacing: -0.0225rem; }
  .btn--big { font-size: 1rem; line-height: 1.25rem; letter-spacing: -0.02rem; }
}

@media (hover: hover) {
  .btn--accent:hover { background: #fff; color: var(--c-accent); }
  .btn--accent:hover .btn__icon { border-color: var(--c-accent); }
  .btn--ghost:hover { border-color: var(--c-black); background: var(--c-black); }
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* ---------- Brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
}
.brand__mark { width: 1.75rem; height: 1.75rem; color: var(--c-accent-light); }
.brand__word {
  font-size: 1.5rem;
  font-weight: 350;
  line-height: 1;
  letter-spacing: -0.045em;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  min-height: var(--nav-h);
  padding: 0.75rem 1rem;
  background: var(--c-black);
  border-bottom: var(--dash);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .site-header { padding: 1rem 1.5rem; }
}

/* ---------- Waves canvas (shared by hero + footer) ---------- */
.waves {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  background: var(--c-black);
}

.hero__box {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: calc(100vh - var(--nav-h));
  min-height: 25rem;
  max-height: 40rem;
  padding: 1.25rem;
  overflow: hidden;
}

@supports (height: 100svh) {
  .hero__box { height: calc(100svh - var(--nav-h)); }
}

.hero__tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(197deg, var(--c-accent-clear) 13.93%, var(--c-accent) 71.79%);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  min-width: 0;
  max-width: 62rem;
}

.hero__copy > .stack { gap: 1.25rem; width: 100%; }
.hero__title {
  max-width: 24ch;
  font-size: clamp(2rem, 4.8vw, 5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.hero__line { display: block; }
.hero__sub {
  max-width: 32ch;
  color: var(--c-white-62);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .hero__box { min-height: 37.5rem; max-height: 60rem; padding: 2.5rem; }
  .hero__copy { gap: 2.25rem; }
  .hero__copy > .stack { gap: 1.5rem; }
}

@media (max-width: 479px) {
  .hero__title { font-size: clamp(1.75rem, 7.6vw, 2.25rem); }
  .hero__sub { max-width: 27ch; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hero__box { height: auto; min-height: 28rem; padding-top: 5rem; }
}

/* ---------- About ---------- */
.about {
  position: relative;
  z-index: 1;
  background: var(--c-black);
}

.about__inner {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1.75rem;
  padding: 4rem 1.25rem;
  overflow: hidden;
  border-bottom: var(--dash);
  text-align: left;
}
.about__heading { display: grid; gap: 1.25rem; }
.about__label { display: flex; align-items: center; gap: 0.75rem; }
.about__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.about__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(var(--c-mist-rgb) / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--c-mist-rgb) / 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 78% 50%, #000, transparent 75%);
}
.about__backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 78% 55%, rgb(var(--c-accent-light-rgb) / 0.045), transparent 60%);
  filter: blur(24px);
}
.about__pointer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.about__pointer::before {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(var(--c-accent-light-rgb) / 0.09), rgb(var(--c-mist-rgb) / 0.025) 40%, transparent 70%);
  filter: blur(24px);
}
.about__inner.is-pointer-active .about__pointer { opacity: 1; }
.about__heading, .about__copy { position: relative; z-index: 1; }

.about__title {
  max-width: 24ch;
  font-size: clamp(1.75rem, 3.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.about__copy {
  display: grid;
  gap: 1.5rem;
  max-width: 38ch;
  color: var(--c-white-80);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.about__mark {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-accent-light);
}

@media (min-width: 768px) {
  .about__inner { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3rem; padding: 5rem 2.5rem; }
  .about__title { font-size: clamp(2rem, 3.2vw, 3.25rem); }
  .about__copy { padding-left: 1.5rem; border-left: var(--dash); }
  .about__mark { width: 2rem; height: 2rem; }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .about__pointer { display: none; transition: none; }
}

/* ---------- Engineering services ---------- */
.services { position: relative; z-index: 1; background: var(--c-black); }
.services__inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.5rem 1.25rem 2rem;
  border-bottom: var(--dash);
}
.services__inner::before,
.services__inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 32rem;
  height: 32rem;
  pointer-events: none;
  background: radial-gradient(circle, rgb(var(--c-accent-light-rgb) / 0.12), transparent 65%);
  filter: blur(45px);
}
.services__inner::before { top: -8rem; left: -12rem; }
.services__inner::after { bottom: -10rem; right: -10rem; background: radial-gradient(circle, rgb(var(--c-mist-rgb) / 0.1), transparent 65%); }
.services__grid { display: grid; gap: 1rem; }
.service-slot { min-width: 0; }
.service-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px dashed rgb(var(--c-mist-rgb) / 0.3);
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.service-card::before,
.service-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.service-card::before {
  background: radial-gradient(ellipse at 80% 0%, rgb(var(--c-mist-rgb) / 0.07), transparent 65%);
}
.service-card::after {
  opacity: 0;
  background: radial-gradient(280px circle at var(--pointer-x) var(--pointer-y), rgb(var(--c-accent-light-rgb) / 0.16), transparent 75%);
  transition: opacity 0.35s ease;
}
.service-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.5rem; }
.service-card__top .t-label-3 { font-size: 0.65rem; letter-spacing: 0; color: var(--c-white-62); }
.service-card__badge { padding: 0.25rem 0.4rem; background: rgb(var(--c-accent-light-rgb) / 0.09); color: var(--c-accent-light); font: 0.6rem/1.2 var(--font-label); text-transform: uppercase; }
.service-card__visual { position: relative; width: 100%; height: 8rem; margin-block: 1rem; }
.service-card__visual::before {
  content: "";
  position: absolute;
  inset: 15% 20%;
  background: radial-gradient(ellipse, rgb(var(--c-accent-light-rgb) / 0.14), transparent 70%);
  filter: blur(16px);
}
.service-card__visual svg { position: relative; width: 100%; height: 100%; fill: none; stroke: var(--c-accent-light); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.service-card__trace { stroke: var(--c-white-50); stroke-dasharray: 3 5; }
.service-card h3 { font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.035em; font-weight: 500; }
.service-card > p { margin-top: 0.85rem; color: var(--c-white-62); font-size: 0.95rem; line-height: 1.7; text-wrap: pretty; }
.service-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin: 1.25rem 0 1.5rem; color: var(--c-white-62); font: 0.6rem/1.5 var(--font-label); text-transform: uppercase; }
.service-card__tags li::before { content: "+"; margin-right: 0.3rem; color: var(--c-accent-light); }
.service-card__cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: var(--dash); color: var(--c-accent-light); font: 0.7rem/1.5 var(--font-label); text-transform: uppercase; }
.service-card__cta .icon { width: 1.1rem; height: 1.1rem; transition: transform 0.25s ease; }
.service-card:focus-within { border-color: var(--c-accent-light); box-shadow: 0 0 25px rgb(var(--c-accent-light-rgb) / 0.06); }
.services__note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.services__note p { font-size: 0.9rem; }
.services__note p span { display: block; margin-top: 0.25rem; color: var(--c-white-62); }
.services__note a { display: inline-flex; align-items: center; gap: 1rem; color: var(--c-accent-light); font: 0.7rem/1.5 var(--font-label); text-transform: uppercase; }
@media (min-width: 600px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .services__inner { padding: 2rem 2.5rem 3rem; }
  .service-card { padding: 1.75rem; }
}
@media (min-width: 1100px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { border-color: var(--c-accent-light); box-shadow: 0 0 30px rgb(var(--c-accent-light-rgb) / 0.06); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .service-card.is-pointer-active::after { opacity: 1; }
  .service-card__cta:hover .icon { transform: translate(3px, -3px); }
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card::after, .service-card__cta .icon { transition: none; }
}

/* ---------- Our approach ---------- */
.approach {
  position: relative;
  z-index: 1;
  background: var(--c-black);
}

.approach__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

.approach__sticky {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.25rem 7.75rem;
  background: linear-gradient(-5deg, var(--c-accent-clear) 11.13%, var(--c-accent) 80.28%);
}
.approach__sticky > * { max-width: 34rem; }

.approach__cards {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 0 1.25rem 5.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 20rem;
}

.card__copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 7.5rem;
  aspect-ratio: 1;
  overflow: hidden;
}

.card__num {
  position: relative;
  z-index: 2;
  color: var(--c-accent-light);
}

.corner {
  position: absolute;
  z-index: 25;
  width: 0.625rem;
  height: 0.625rem;
  color: var(--c-white-50);
  pointer-events: none;
}
.corner--tl { top: 1%; left: 1%; }
.corner--tr { top: 1%; right: 1%; transform: rotate(90deg); }
.corner--br { right: 1%; bottom: 1%; transform: rotate(180deg); }
.corner--bl { bottom: 0; left: 0; transform: rotate(270deg); }

/* Engineering line-art icons */
.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: url(#g-ink);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Visual strip: particle funnel + threads */
.visuals {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: 2rem;
  background: var(--c-black);
}

.visual {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--c-black);
}

.visual__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

.visual__fade {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.visual__fade--top {
  inset: 0 0 auto;
  height: 3rem;
  background: linear-gradient(0deg, var(--c-black-clear), var(--c-black) 90%);
}
.visual__fade--bottom {
  inset: auto 0 -1%;
  height: 3rem;
  background: linear-gradient(180deg, var(--c-black-clear), var(--c-black) 90%);
}
.visual__fade--side { display: none; }

.visuals__info {
  position: sticky;
  top: var(--nav-h);
  bottom: calc(50vh - 2rem);
  z-index: 15;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-inline: 1.25rem;
  pointer-events: none;
}

.info {
  position: relative;
  z-index: 20;
  width: min(16.625rem, 100%);
  pointer-events: auto;
}

.info.info--bridge { width: min(24rem, 100%); }
.engineering-bridge {
  padding: 1.75rem;
  border: 1px solid rgb(var(--c-mist-rgb) / 0.15);
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 50px rgb(var(--c-accent-light-rgb) / 0.06);
  text-align: center;
}
.engineering-bridge__label { color: var(--c-accent-light); font: 0.65rem/1.5 var(--font-label); text-transform: uppercase; letter-spacing: 0.06em; }
.engineering-bridge h3 { margin-top: 1rem; font-size: 1.65rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.035em; }
.engineering-bridge p { max-width: 29ch; margin: 0.85rem auto 0; color: var(--c-white-62); font-size: 0.85rem; line-height: 1.6; }

@media (max-width: 767px) {
  .visuals__info { bottom: calc(50vh - 3rem); }
  .info { width: 9rem; }
  .engineering-bridge { padding: 1.25rem; }
  .engineering-bridge h3 { font-size: 1.4rem; }
  .info .corner { display: none; }
}

.approach__divider {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 10;
  width: 0;
  border-left: var(--dash);
  pointer-events: none;
}

@media (min-width: 768px) {
  .approach__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .approach__sticky {
    position: sticky;
    top: var(--nav-h);
    min-height: 31.25rem;
    gap: 1.5rem;
    padding: 2.5rem;
  }

  .approach__cards { padding: 2.5rem 2rem 7.75rem; }

  .visuals {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .visual__canvas { transform: none; }

  .visual__fade--side {
    display: block;
    inset-block: 0;
    width: 3rem;
  }
  .visual--left .visual__fade--side {
    right: 0;
    background: linear-gradient(90deg, var(--c-black-clear), var(--c-black) 90%);
  }
  .visual--right .visual__fade--side {
    left: 0;
    background: linear-gradient(270deg, var(--c-black-clear), var(--c-black) 90%);
  }

  .visuals__info {
    grid-column: 1 / -1;
    top: auto;
    bottom: calc(50vh - 3rem);
    align-items: center;
    padding-inline: 0;
  }
  .info { width: 16.625rem; }

  .approach__divider { display: block; }
}

@media (min-width: 992px) {
  .card-slot { display: flex; }
  .card-slot:nth-child(even) { justify-content: flex-end; }
  .card { width: 50%; }
}

/* ---------- Robotics — shared site palette and technical framing ---------- */
.robotics {
  --robotics-paper: var(--c-black);
  --robotics-ink: var(--c-white);
  --robotics-muted: var(--c-white-62);
  position: relative;
  z-index: 1;
  background: var(--robotics-paper);
  color: var(--robotics-ink);
}
.robotics .frame { border-inline: var(--dash); }
.robotics__wrap { padding: 1.5rem 1.25rem 3rem; overflow: hidden; }
.robotics__eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.robotics__eyebrow .t-label-3 { font-size: 0.65rem; letter-spacing: 0; }
.robotics__status { display: none; align-items: center; gap: 0.65rem; color: var(--robotics-muted); }
.robotics__status > span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--c-accent-light); }
.robotics__stage { position: relative; isolation: isolate; padding-top: 2rem; }
.robotics__stage::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 10% 0 6%;
  background:
    radial-gradient(ellipse at 75% 45%, rgb(var(--c-mist-rgb) / 0.035), transparent 45%),
    radial-gradient(ellipse at 35% 60%, rgb(var(--c-accent-light-rgb) / 0.04), transparent 45%);
  filter: blur(32px);
  pointer-events: none;
}
.robotics__title {
  position: relative;
  z-index: -2;
  width: 125%;
  font-size: clamp(3rem, 12.3vw, 14rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  transform: scaleX(0.8);
  transform-origin: left center;
  background: linear-gradient(180deg, var(--c-white) 30%, var(--c-white-62) 70%, var(--c-black-clear));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.robotics__grain {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  inset: 0 -1.25rem;
  background-image:
    radial-gradient(0.7px 0.7px at 17px 31px, rgb(var(--c-mist-rgb) / 0.5), transparent),
    radial-gradient(0.7px 0.7px at 97px 113px, rgb(var(--c-accent-light-rgb) / 0.4), transparent);
  background-size: 211px 193px, 307px 269px;
  mask-image: linear-gradient(transparent 5%, #000 25%, #000 65%, transparent 95%);
  opacity: 0.12;
}
.robotics__pointer {
  display: none;
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.robotics__pointer::before {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(var(--c-accent-light-rgb) / 0.12), rgb(var(--c-mist-rgb) / 0.05) 40%, transparent 70%);
  filter: blur(18px);
}
.robotics__pointer > span {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  transform: translate(-50%, -50%);
  border: 1px solid var(--c-accent-light);
  border-radius: 50%;
  opacity: 0.6;
}
.robotics__pointer > span::before,
.robotics__pointer > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1px;
  background: var(--c-accent-light);
  transform: translate(-50%, -50%);
}
.robotics__pointer > span::after { transform: translate(-50%, -50%) rotate(90deg); }
.robotics__arm {
  display: block;
  position: relative;
  width: 110%;
  max-width: none;
  height: auto;
  margin: -1.5rem -8% -2rem;
  pointer-events: none;
  isolation: isolate;
  aspect-ratio: 1;
}
.robotics__arm img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right top;
}
.robotics__arm-image,
.robotics__rover-image {
  mask-image: linear-gradient(#000 30%, rgb(0 0 0 / 0.95) 55%, rgb(0 0 0 / 0.6) 78%, transparent 96%);
}
.robotics__arm-blur,
.robotics__rover-blur {
  z-index: -1;
  filter: blur(10px);
  opacity: 0.65;
  mask-image: linear-gradient(transparent 18%, #000 55%, #000 76%, transparent 99%);
}
.robotics__arm::before,
.robotics__arm::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.robotics__arm::before {
  z-index: -2;
  inset: 16% 0 3% 10%;
  background: radial-gradient(ellipse at 65% 65%, rgb(var(--c-mist-rgb) / 0.16), transparent 65%);
  filter: blur(26px);
}
.robotics__arm::after {
  inset: 0 -5%;
  background:
    radial-gradient(ellipse at 68% 72%, var(--c-white-80), transparent 48%),
    radial-gradient(ellipse at 48% 36%, var(--c-white-62), transparent 56%);
  mask-image: url("../assets/robotics/speckle.svg");
  mask-size: 135px 135px;
  opacity: 0.48;
}
.robotics__preview { position: relative; border: var(--dash); background: var(--c-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
.robotics__panel-label { display: block; font-size: 0.6rem; letter-spacing: 0; color: var(--robotics-muted); }
.robotics__preview .robotics__panel-label { position: absolute; top: 1.25rem; left: 1.25rem; }
.robotics__preview img { display: block; width: 100%; height: auto; padding: 1.5rem 1rem 0; }
.robotics__rover { position: relative; isolation: isolate; pointer-events: none; }
.robotics__preview .robotics__rover-blur { position: absolute; inset: 0; height: 100%; }
.robotics__rover::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 20% 10% 0;
  background: radial-gradient(ellipse at 50% 65%, rgb(var(--c-mist-rgb) / 0.16), transparent 65%);
  filter: blur(26px);
}
.robotics__preview-caption { display: block; padding: 0 1.25rem 1.25rem; font-size: 0.6rem; letter-spacing: 0; }
.robotics__pipeline { margin-top: 1.5rem; }
.robotics__pipeline > .robotics__panel-label { margin: 0 0 1rem 0.75rem; }
.robotics__pipeline ol { display: grid; gap: 0.6rem; }
.robotics__pipeline li { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem; border: var(--dash); background: var(--c-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.robotics__step { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; background: var(--c-gray); font: 0.65rem var(--font-label); color: var(--c-accent-light); }
.robotics__pipeline li > span:nth-child(2) { font-size: 0.9rem; font-weight: 600; }
.robotics__pipeline small { display: block; margin-top: 0.1rem; font-size: 0.65rem; font-weight: 400; color: var(--robotics-muted); }
.robotics__pipeline .icon { width: 1rem; height: 1rem; margin: 0 0.4rem 0 auto; color: var(--c-accent-light); }
.robotics__copy { display: grid; gap: 1.5rem; margin-top: 3rem; }
.robotics__copy .t-label-3 { font-size: 0.65rem; letter-spacing: 0; color: var(--robotics-muted); }
.robotics__headline { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.07; letter-spacing: -0.055em; font-weight: 600; }
.robotics__lead { max-width: 30rem; color: var(--robotics-muted); }
.robotics__cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; margin-top: 1rem; border: var(--dash); background: var(--c-gray); color: var(--c-accent-light); }
.robotics__cta .t-label-2 { font-size: 0.75rem; letter-spacing: 0; }
.robotics__cta .icon { width: 1.25rem; height: 1.25rem; transition: transform 0.2s ease; }
.robotics__cta:hover .icon { transform: translate(2px, -2px); }
.robotics :focus-visible { outline-color: var(--c-accent-light); }
.robotics__capabilities { display: grid; gap: 1.5rem; margin-top: 3rem; }
.robotics__capabilities li { border-top: var(--dash); padding-top: 1.25rem; }
.robotics__capabilities .t-label-3 { font-size: 0.65rem; color: var(--robotics-muted); }
.robotics__capabilities h4 { margin-top: 1rem; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.025em; }
.robotics__capabilities p { max-width: 23rem; margin-top: 0.5rem; font-size: 0.875rem; color: var(--robotics-muted); }

@media (min-width: 768px) {
  .robotics__wrap { padding: 2rem 2rem 4rem; }
  .robotics__status { display: flex; }
  .robotics__stage { height: 43rem; padding-top: 2.5rem; }
  .robotics__title { font-size: min(14rem, 15.3vw); line-height: 1.1; }
  .robotics__grain { inset: 0 -2rem; }
  .robotics__arm { position: absolute; z-index: 2; right: -4%; top: -1rem; width: 61%; height: 45rem; margin: 0; }
  .robotics__preview { position: absolute; left: 0; bottom: 1.5rem; width: 24%; }
  .robotics__pipeline { position: absolute; left: 26%; bottom: 2rem; width: 24%; margin: 0; }
  .robotics__pipeline li { gap: 0.5rem; padding: 0.5rem; }
  .robotics__pipeline small { font-size: 0.6rem; }
  .robotics__pipeline li > span:nth-child(2) { font-size: 0.8rem; }
  .robotics__step { width: 2rem; height: 2rem; }
  .robotics__copy { grid-template-columns: 1.15fr 1fr; gap: 4rem; margin-top: 2rem; }
  .robotics__lead { align-self: end; }
  .robotics__capabilities { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

@media (min-width: 1200px) {
  .robotics__wrap { padding-inline: 2.5rem; }
  .robotics__stage { height: 45rem; }
  .robotics__arm { top: 0; height: 47rem; width: 58%; }
  .robotics__preview { width: 24%; bottom: 1rem; }
  .robotics__pipeline { width: 23%; bottom: 2.5rem; }
  .robotics__pipeline li { padding: 0.7rem; gap: 0.75rem; }
  .robotics__step { width: 2.5rem; height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .robotics__cta .icon { transition: none; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .robotics__pointer { display: block; }
  .robotics__stage.is-pointer-active .robotics__pointer { opacity: 1; }
}

/* ---------- Footer ---------- */
.site-footer {
  position: sticky;
  top: var(--nav-h);
  z-index: 1;
  background: var(--c-black);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.site-footer__brand { width: 100%; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding: 1.25rem 1.5rem;
  border-bottom: var(--dash);
}

.site-footer__links a:hover { text-decoration: underline; }

.footer-art {
  position: sticky;
  bottom: 0;
  z-index: 0;
  background: var(--c-black);
}

.footer-art__box {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100vh;
  min-height: 25rem;
  max-height: 40rem;
  padding: 1.25rem 1.25rem 0;
  overflow: hidden;
}

@supports (height: 100svh) {
  .footer-art__box { height: 100svh; }
}

.footer-art__tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-clear) 30%);
}

.footer-art__logo {
  width: 100%;
  height: auto;
  fill: url(#g-wordmark);
  font-family: var(--font-body);
  font-weight: 500;
}
.footer-art__logo use { color: var(--c-black); opacity: 0.55; }
.footer-art__logo--full { display: none; }
.footer-art__logo--mark { aspect-ratio: 115 / 100; max-width: 30rem; }

@media (min-width: 480px) {
  .site-footer__bar { gap: 2rem; }
  .footer-art__logo--full { display: block; aspect-ratio: 473 / 100; }
  .footer-art__logo--mark { display: none; }
}

@media (min-width: 768px) {
  .site-footer__bar { position: relative; flex-wrap: nowrap; }
  .site-footer__brand {
    position: absolute;
    left: 50%;
    width: auto;
    transform: translateX(-50%);
  }
  .footer-art__box { min-height: 37.5rem; max-height: 56.25rem; padding: 2.5rem 1.5rem 0; }
}

/* ---------- Contact popup ---------- */
html.contact-open { overflow: hidden; }
.contact-dialog {
  width: min(38rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px dashed rgb(var(--c-mist-rgb) / 0.4);
  background: var(--c-black);
  color: var(--c-white);
  box-shadow: 0 0 80px rgb(var(--c-accent-light-rgb) / 0.08);
  overflow: auto;
  overscroll-behavior: contain;
}
.contact-dialog::backdrop { background: rgb(2 3 5 / 0.75); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.contact-dialog__panel { padding: clamp(1.25rem, 4vw, 2.5rem); background: radial-gradient(ellipse at 100% 0, rgb(var(--c-accent-light-rgb) / 0.07), transparent 60%); }
.contact-dialog__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.contact-dialog__eyebrow { color: var(--c-accent-light); font: 0.65rem/1.5 var(--font-label); text-transform: uppercase; letter-spacing: 0.03em; }
.contact-dialog__close { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: var(--dash); background: var(--c-glass); color: var(--c-white); cursor: pointer; }
.contact-dialog__close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.contact-dialog h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.045em; }
.contact-dialog__description { max-width: 40ch; margin-top: 1rem; color: var(--c-white-62); font-size: 0.95rem; line-height: 1.65; }
.contact-dialog__channels { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.contact-channel { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px dashed rgb(var(--c-mist-rgb) / 0.25); background: var(--c-glass); }
.contact-channel__icon { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: var(--c-accent-light); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.contact-channel__copy { display: grid; gap: 0.25rem; min-width: 0; }
.contact-channel__label { font: 0.65rem/1.5 var(--font-label); text-transform: uppercase; color: var(--c-accent-light); }
.contact-channel__detail { font-size: 0.95rem; overflow-wrap: anywhere; }
.contact-channel > .icon { margin-left: auto; color: var(--c-accent-light); }
.contact-channel--unavailable .contact-channel__detail { color: var(--c-white-50); font-size: 0.85rem; }
.contact-channel__status { margin-left: auto; color: var(--c-white-50); font: 0.55rem/1.5 var(--font-label); text-transform: uppercase; white-space: nowrap; }
.contact-dialog__note { margin-top: 1.5rem; color: var(--c-white-50); font-size: 0.8rem; text-align: center; }
@media (hover: hover) {
  a.contact-channel:hover, .contact-dialog__close:hover { border-color: var(--c-accent-light); background: rgb(var(--c-accent-light-rgb) / 0.06); }
}
@media (max-width: 479px) {
  .contact-channel { gap: 0.75rem; padding: 0.85rem; }
  .contact-channel__status { display: none; }
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  pointer-events: none;
}

/* The failsafe hides the cover even if the script never finishes */
.js .preloader {
  display: block;
  animation: preloader-failsafe 0s linear 6s forwards;
}

.preloader__cols {
  position: absolute;
  inset: 0;
  display: flex;
}

.preloader__cols span {
  flex: 0 0 50%;
  height: 100%;
  background: var(--c-black);
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader__cols span:nth-child(n + 3) { display: none; }
.preloader__cols span:nth-child(2) { transition-delay: 0.08s; }
.preloader__cols span:nth-child(3) { transition-delay: 0.16s; }
.preloader__cols span:nth-child(4) { transition-delay: 0.24s; }

.preloader__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  color: var(--c-accent);
  transition: opacity 0.25s ease;
}

.preloader.is-leaving .preloader__cols span { transform: translateY(-100%); }
.preloader.is-leaving .preloader__mark { opacity: 0; }

@media (min-width: 768px) {
  .preloader__cols span { flex-basis: 25%; }
  .preloader__cols span:nth-child(n + 3) { display: block; }
}

@keyframes preloader-failsafe {
  to { visibility: hidden; }
}

/* ---------- Scroll reveal (armed by JS, so content never depends on it) ---------- */
.is-armed [data-reveal] {
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.is-armed [data-reveal="move"] { transform: translateY(1.5rem); }
.is-armed [data-reveal].is-in { opacity: 1; transform: none; }

.w { display: inline-block; }
.is-armed [data-split] .w {
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.is-armed [data-split].is-in .w { opacity: 1; transform: none; }

/* ---------- Motion (only when the user has not asked for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .preloader__mark { animation: mark-steps 5s infinite; }
}

/* Quarter turns with a pause, like the original loader */
@keyframes mark-steps {
  0% { transform: rotate(0); animation-timing-function: cubic-bezier(0.5, 0, 0, 1); }
  20%, 25% { transform: rotate(90deg); }
  45%, 50% { transform: rotate(180deg); animation-timing-function: cubic-bezier(0.5, 0, 0, 1); }
  70%, 75% { transform: rotate(270deg); animation-timing-function: cubic-bezier(0.5, 0, 0, 1); }
  95%, 100% { transform: rotate(360deg); }
}