:root {
  --bg: #0a0a0a;
  --bg-2: #111;
  --bg-3: #161616;
  --ink: #fff;
  --ink-2: #a5a5a5;
  --ink-3: #999;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --red: #FF481A;
  --red-2: #ff7a3d;
  --orange: #FF481A;
  --yellow: #ffc857;
  --cta-orange: #FF481A;

  /* Grid infrastructure tokens — borders live FIRST, content fills inside. */
  --rail-x: 64px;
  --pad-d: var(--rail-x);
  --pad-m: var(--rail-x);
  --rail-color: rgba(255, 255, 255, .08);
  --node-color: rgba(255, 255, 255, .55);
  --node-glow: rgba(255, 255, 255, .18);

  --chakra: 'Chakra Petch', -apple-system, sans-serif;
  --disp: var(--chakra);
  --sans: var(--chakra);
  --hero: var(--chakra);
  --mono: var(--chakra);
  --display-weight: 700;
  --display-leading: 0.96;
  --display-tracking: -0.04em;

  /* Brutalist Spacing Scale */
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --sp-128: 128px;

  /* Brutalist Typography System */
  --type-display-xl: 8rem;
  /* 128px */
  --type-display-l: 2.6rem;
  /* 80px */
  --type-section: 1rem;
  /* 56px */
  --type-card: 32px;
  /* 32px */
  --type-body-l: 15px;
  /* 15px */
  --type-body: 15px;
  /* 15px */
  --type-label: 12px;
  /* 14px */
  --type-micro: 11px;
  /* 12px */

  --lh-card: 1.1;
  --lh-body-l: 1.5;
  --lh-body: 1.5;
  --lh-label: 1.4;
  --lh-micro: 1.3;

  /* ── INDUSTRIAL MOTION TOKENS ────────────────────────────────
     All easing is mechanical, not emotional.
     No bounce. No elastic. No float.
  ─────────────────────────────────────────────────────────── */
  --ease-construct: cubic-bezier(0.25, 0, 0.1, 1);
  /* precision wipe */
  --ease-lock: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* structural snap */
  --ease-power2: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-linear: linear;

  --dur-snap: 150ms;
  /* instant lock */
  --dur-draw: 350ms;
  /* line draw    */
  --dur-reveal: 500ms;
  /* frame reveal */
  --dur-max: 600ms;
  /* ceiling       */

  /* ── GRID DENSITY — evolves as user scrolls deeper ──────── */
  --grid-density: 40px;
  /* default (hero) */

  /* ── UNIFORM SECTION SPACING ────────────────────────────── */
  --section-pad-y: 84px;
  --section-pad-top: calc(var(--section-pad-y) / 2);
  --section-gap: 72px;
}

/* Breakpoint: Desktop XL (>= 1440px) */
@media (min-width: 1440px) {
  :root {
    --rail-x: 120px;
  }
}

/* Breakpoint: Laptop (769px - 1024px) */
@media (max-width: 1024px) {
  :root {
    --rail-x: 48px;
    --section-pad-y: 72px;
    --section-gap: 60px;
    --type-display-xl: clamp(4.5rem, 9vw, 3rem);
    --type-display-l: clamp(3rem, 6vw, 3.8rem);
    --type-section: 2.25rem;
    --type-card: 26px;
    --type-body-l: 17px;
    --type-body: 13px;
    --type-label: 12px;
    --type-micro: 11px;
  }
}

/* Breakpoint: Tablet (541px - 768px) */
@media (max-width: 768px) {
  :root {
    --rail-x: 32px;
    --type-display-xl: clamp(3.5rem, 10vw, 4rem);
    --type-display-l: clamp(2.4rem, 8vw, 3.2rem);
    --type-section: 2rem;
    --type-card: 24px;
    --type-body-l: 15px;
    --type-body: 13px;
    --type-label: 12px;
    --type-micro: 11px;
  }
}

/* Breakpoint: Mobile (<= 540px) */
@media (max-width: 540px) {
  :root {
    --rail-x: 24px;
    --type-display-xl: clamp(3.2rem, 16vw, 8rem);
    --type-display-l: clamp(1.5rem, 5vw, 5em);
    --type-section: 1.4rem;
    --type-card: 20px;
    --type-body-l: 15px;
    --type-body: 14px;
    --type-label: 12px;
    --type-micro: 11px;
  }
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
  border-left: 1px solid var(--line);
}

::-webkit-scrollbar-thumb {
  background: var(--cta-orange);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--red-2);
}

/* ================================================================
   PAGE LOADER
   Frame 1 — amber/black overlay, logo + progress bar
   Frame 2 — swipe up with neon glow on the leading edge
   Frame 3 — done, loader removed from DOM entirely
   ================================================================ */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Prevent any page scroll while loader is visible */
  pointer-events: all;
}

/* The amber warm undertone — a very subtle background grid texture */
#page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 72, 26, 0.03) 0, rgba(255, 72, 26, 0.03) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg, rgba(255, 72, 26, 0.03) 0, rgba(255, 72, 26, 0.03) 1px, transparent 1px, transparent 80px);
  pointer-events: none;
}

.loader-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.loader-logo {
  width: 120px;
  height: auto;
  opacity: 0;
  transform: translateY(6px);
  animation: loader-logo-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
  filter: brightness(1);
}

@keyframes loader-logo-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loader-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: loader-logo-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
}

.loader-bar-track {
  width: 128px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.loader-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #FF481A;
  box-shadow: 0 0 10px rgba(255, 72, 26, 0.8), 0 0 24px rgba(255, 72, 26, 0.4);
  transition: width 0.1s linear;
}

.loader-bar-pct {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255, 72, 26, 0.7);
  text-transform: uppercase;
}

/* Frame 2 — swipe-up exit */
#page-loader.is-exiting {
  animation: loader-swipe-up 0.65s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes loader-swipe-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

/* The neon leading edge glow — appears on the bottom of the loader as it wipes up */
#page-loader.is-exiting::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #FF481A;
  box-shadow:
    0 0 16px 4px rgba(255, 72, 26, 0.9),
    0 0 48px 12px rgba(255, 72, 26, 0.5),
    0 0 80px 20px rgba(255, 100, 26, 0.25);
  animation: loader-swipe-up 0.65s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Frame 3 — gone */
#page-loader.is-done {
  display: none;
}


html {}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative
}

/* CRT and background overlays locked to viewport */
.viewport-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

.viewport-overlay .aetis-grid-scanlines {
  opacity: 0.4;
}

.viewport-overlay .aetis-grid-grain {
  opacity: 0.06;
}

.viewport-overlay .aetis-grid-vignette {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
}

a {
  color: inherit;
  text-decoration: none
}

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

/* ===========================================================
   PERSISTENT VERTICAL RAILS — the page frame.
   Two 1px lines fixed to viewport at left:rail-x and right:rail-x.
   Always visible across hero, every section, footer.
   Pointer-events:none so they never block clicks.
   =========================================================== */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rail-color);
  pointer-events: none;
  z-index: 99;
}

body::before {
  left: var(--rail-x);
}

body::after {
  right: var(--rail-x);
}

/* ===========================================================
   MICRO-SQUARE NODES at every section/rail intersection.
   3px squares sit on the top-left and top-right corners of every
   section, exactly centered on the rail line. They mark the
   transition between two sections like motherboard solder points.
   =========================================================== */
.hero,
.section,
.footer {
  position: relative;
}

.hero::before,
.hero::after,
.section::before,
.section::after,
.footer::before,
.footer::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 5px;
  height: 5px;
  background: var(--node-color);
  box-shadow: 0 0 8px var(--node-glow);
  pointer-events: none;
  z-index: 60;
}

.hero::before,
.section::before,
.footer::before {
  left: calc(var(--rail-x) - 1px);
}

.hero::after,
.section::after,
.footer::after {
  right: calc(var(--rail-x) - 1px);
}

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--rail-x);
  position: relative;
  min-width: 0;
  overflow-x: clip
}

/* === NAV === */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--sp-24) 0;
  background: transparent;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s ease, opacity .45s ease
}

.nav.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto
}

.nav-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--rail-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16)
}

.nav-pill {
  background: rgba(10, 10, 10, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  height: 56px;
  display: flex;
  align-items: center;
}

.nav-pill--left {
  padding: 0 24px;
  gap: var(--sp-24);
}

.nav-pill--right {
  display: flex;
  padding: 13px;
}

.nav-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
}

.logo-invert {
  filter: none;
}

@media(max-width:768px) {
  .nav-container {
    padding: 0 var(--rail-x)
  }

  .logo-img {
    height: 24px
  }

  .logo-img-footer {
    height: 32px
  }
}

.logo {
  display: flex;
  align-items: center
}

.logo-img {
  height: 32px;
  width: auto;
  display: block
}

.logo-img-hero {
  height: 36px;
  width: auto;
  opacity: 0.9
}

.logo-img-footer {
  height: 40px
}

.logo-mark {
  color: var(--red)
}

.nav .logo {
  margin-right: auto
}

.nav-links {
  display: flex;
  gap: var(--sp-32);
  font-family: var(--chakra);
  font-size: 13px;
  letter-spacing: .15em
}

.nav-links a {
  color: var(--ink-2);
  transition: color .2s
}

.nav-links a:hover {
  color: var(--ink);
}

.nav .btn-primary {
  margin-left: 0
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.nav-toggle:hover {
  border-color: var(--ink);
  background: rgba(255, 255, 255, .06);
}

.nav-toggle-line {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.nav.is-menu-open .nav-toggle-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg)
}

.nav.is-menu-open .nav-toggle-line:nth-child(2) {
  opacity: 0
}

.nav.is-menu-open .nav-toggle-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg)
}

.nav-dropdown {
  display: none;
  max-width: 1440px;
  margin: 12px auto 0;
  padding: 0 var(--rail-x);
}

.nav-dropdown-inner {
  margin-left: auto;
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-dropdown a {
  font-family: var(--chakra);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-2);
}

.nav-dropdown a:hover {
  color: var(--ink)
}

.nav-dropdown .nav-dropdown-cta {
  margin-top: 6px;
  color: #fff;
}

@media(max-width:1023px) {
  .nav-container {
    gap: 12px
  }

  .nav-links {
    display: none
  }

  .nav-pill--right {
    display: none
  }

  .nav-toggle {
    display: inline-flex;
    width: 56px;
    height: 56px;
    background: rgba(10, 10, 10, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 0;
  }

  .nav-divider {
    display: none;
  }

  .nav.is-menu-open .nav-dropdown {
    display: block
  }


}

@media(max-width:640px) {
  .nav {
    padding: 14px 0
  }

  .nav-container {
    gap: 10px
  }

  .nav .btn-primary .btn-label {
    padding: 0 12px;
    font-size: 10px
  }

  .nav .btn-primary {
    height: 28px
  }

  .nav .btn-primary::before {
    width: 20px
  }

  .nav .btn-primary .btn-arrow {
    width: 26px;
  }

  .nav-dropdown-inner {
    padding: var(--sp-24) 20px
  }
}

/* === BUTTONS — grid-cell architecture ===
   Each .btn renders as three cells split by 1px lines:
     [ ● ]  [ LABEL ]  [ → ]
   The left cell is an indicator marker; the right cell is the chevron
   that translates on hover. No rounded corners anywhere. */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: rgba(255, 255, 255, .6);
  --btn-divider: rgba(255, 255, 255, .35);
  --btn-arrow-bg: rgba(255, 255, 255, .05);
  --btn-grid: rgba(255, 255, 255, .07);
  --corner-color: var(--btn-border);
  --corner-size: 5px;
  --corner-thickness: 2px;
  --indicator-size: 24px;
  --arrow-size: 30px;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--chakra);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 0;
  overflow: hidden;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

/* 4 corner bracket notch strokes on all buttons */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    /* Top-left */
    linear-gradient(var(--corner-color), var(--corner-color)) top left / var(--corner-size) var(--corner-thickness) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) top left / var(--corner-thickness) var(--corner-size) no-repeat,
    /* Top-right */
    linear-gradient(var(--corner-color), var(--corner-color)) top right / var(--corner-size) var(--corner-thickness) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) top right / var(--corner-thickness) var(--corner-size) no-repeat,
    /* Bottom-left */
    linear-gradient(var(--corner-color), var(--corner-color)) bottom left / var(--corner-size) var(--corner-thickness) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) bottom left / var(--corner-thickness) var(--corner-size) no-repeat,
    /* Bottom-right */
    linear-gradient(var(--corner-color), var(--corner-color)) bottom right / var(--corner-size) var(--corner-thickness) no-repeat,
    linear-gradient(var(--corner-color), var(--corner-color)) bottom right / var(--corner-thickness) var(--corner-size) no-repeat;
  transition: background .25s ease;
}

.btn .btn-label {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  font-family: var(--chakra);
}

/* left cell — indicator marker */
.btn::before {
  content: "";
  width: var(--indicator-size);
  border-right: 1px solid var(--btn-divider);
  background:
    linear-gradient(currentColor, currentColor) center / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 6px no-repeat;
  opacity: .85;
  position: relative;
  z-index: 2;
  transition: background-color .25s ease;
}

/* right cell — chevron arrow */
.btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--arrow-size);
  border-left: 1px solid var(--btn-divider);
  background: var(--btn-arrow-bg);
  position: relative;
  z-index: 2;
  transition: transform .35s cubic-bezier(.2, .6, .2, 1), background .25s;
}

.btn-arrow svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  display: block;
}

/* Hover — translate arrow, tighten border, reveal grid mesh on background */
.btn {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 1px, transparent 1px 6px);
  background-blend-mode: overlay;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease, background-image .35s ease;
}

.btn:hover {
  --corner-color: var(--btn-fg);
  border-color: var(--btn-fg);
  background-image:
    repeating-linear-gradient(0deg, var(--btn-grid) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--btn-grid) 0 1px, transparent 1px 6px);
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
  background: var(--btn-divider);
  color: var(--btn-bg);
}

.btn:focus-visible {
  outline: 1px solid var(--btn-fg);
  outline-offset: 3px;
}

/* Variant — primary (red filled) */
.btn-primary {
  --btn-bg: var(--cta-orange);
  --btn-fg: #fff;
  --btn-border: var(--cta-orange);
  --btn-divider: rgba(255, 255, 255, .45);
  --btn-arrow-bg: rgba(0, 0, 0, .22);
  --btn-grid: rgba(255, 255, 255, .16);
  --corner-color: #ffffff;
  background-color: var(--cta-orange);
}

.btn-primary:hover {
  --btn-bg: var(--red-2);
  --btn-border: #fff;
  --btn-divider: rgba(255, 255, 255, 1);
  --corner-color: #ffffff;
  background-color: var(--red-2);
}

/* Variant — demo (orange, hero CTA) */
.btn-demo {
  --btn-bg: var(--cta-orange);
  --btn-fg: #fff;
  --btn-border: var(--cta-orange);
  --btn-divider: rgba(255, 255, 255, .5);
  --btn-arrow-bg: rgba(0, 0, 0, .25);
  --btn-grid: rgba(255, 255, 255, .18);
  --corner-color: #ffffff;
  background-color: var(--cta-orange);
}

.btn-demo:hover {
  --btn-bg: #ff7a3d;
  --btn-border: #fff;
  --btn-divider: rgba(255, 255, 255, 1);
  --corner-color: #ffffff;
  background-color: #ff7a3d;
}

/* Variant — ghost (outlined transparent) */
.btn-ghost {
  --btn-bg: #0a0a0a;
  --btn-fg: var(--ink);
  --btn-border: var(--line-2);
  --btn-divider: rgba(255, 255, 255, .2);
  --btn-arrow-bg: rgba(255, 255, 255, .03);
  --btn-grid: rgba(255, 255, 255, .07);
  --corner-color: var(--line-2);
}

.btn-ghost:hover {
  --btn-bg: #0F0F0F;
  --btn-border: var(--ink);
  --btn-divider: rgba(255, 255, 255, 1);
  --corner-color: var(--ink);
  background-color: #0F0F0F;
}

/* Variant — cyber (frosted dark glass + corner bracket notches + hover reveal grid) */
.btn-cyber {
  --btn-bg: rgba(10, 10, 10, 0.85);
  --btn-fg: #ffffff;
  --btn-border: rgba(255, 72, 26, 0.6);
  --btn-divider: rgba(255, 72, 26, 0.4);
  --btn-arrow-bg: rgba(255, 72, 26, 0.15);
  --btn-grid: rgba(255, 72, 26, 0.22);
  --corner-color: #ff481a;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-cyber::before {
  background:
    linear-gradient(#ff481a, #ff481a) center / 5px 2px no-repeat,
    linear-gradient(#ff481a, #ff481a) center / 2px 5px no-repeat;
  opacity: 0.9;
}

.btn-cyber .btn-arrow {
  color: #ff481a;
}

.btn-cyber:hover,
.btn-cyber.btn:hover {
  border-color: #ff481a;
  --btn-border: #ff481a;
  --corner-color: #ff481a;
  --btn-arrow-bg: rgba(255, 72, 26, 0.35);
  color: #ffffff;
}

/* Corner bracket notches on button */
.btn-corner {
  position: absolute;
  width: 5px;
  height: 5px;
  border-color: #ff481a;
  border-style: solid;
  pointer-events: none;
  z-index: 3;
}

.btn-corner.tl {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.btn-corner.tr {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}

.btn-corner.bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}

.btn-corner.br {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

/* btn-large / btn-xl — legacy class hooks; height locked to 30px sitewide */
.btn-large .btn-label,
.btn-xl .btn-label {
  padding: 0 18px;
  font-size: 11px;
  line-height: 1;
}

.btn-large,
.btn-xl {
  --indicator-size: 24px;
  --arrow-size: 30px;
  height: 30px;
}

.arrow {
  font-family: var(--chakra);
  font-size: 9px;
  color: rgba(255, 255, 255, .6)
}

/* === HERO — INDUSTRIAL FUTURIST === */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #050505;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 1025px) {
  .hero {
    min-height: clamp(700px, 80vh, 850px);
    height: clamp(700px, 80vh, 850px);
  }
}



/* --- Pixel grid background layer (React mount) --- */
.hero-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: rotate(180deg);
}

.hero-bg-layer--pixel {
  opacity: 1;
  visibility: visible;
}

.hero-pixel-grid-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-pixel-grid-host .aetis-grid-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Bottom canvas — absolutely positioned so it doesn't eat flex space */
.hero-bottom-grid-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-bottom-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Industrial overlay — subtle dark-orange center glow --- */
.hero-overlay--industrial {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 42% 45%, rgba(255, 90, 31, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 90, 31, 0.05) 0%, transparent 50%);
}

/* --- HUD layer — crosshairs + system labels --- */
.hero-hud {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

/* Crosshair markers */
.hero-crosshair {
  position: absolute;
  width: 20px;
  height: 20px;
}

.hero-crosshair::before,
.hero-crosshair::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.25);
}

.hero-crosshair::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.hero-crosshair::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.hero-crosshair--tl {
  top: 20px;
  left: 20px;
}

.hero-crosshair--tr {
  top: 20px;
  right: 20px;
}

.hero-crosshair--bl {
  bottom: 20px;
  left: 20px;
}

.hero-crosshair--br {
  bottom: 20px;
  right: 20px;
}

/* System labels at grid intersections */
.hero-sys-label {
  position: absolute;
  font-family: var(--chakra);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

/* --- Top utility bar --- */
.hero-utility-bar {
  position: relative;
  z-index: 10;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(5, 5, 5, 0.8);
  flex-shrink: 0;
}

.hero-utility-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--rail-x);
  height: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.hero-utility-col {
  height: 100%;
  display: flex;
  align-items: center;
  font-family: var(--chakra);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  /* Brightened for accessibility */
  white-space: nowrap;
}

.hero-utility-col:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-utility-col--left {
  justify-content: center;
  padding: 0 16px;
}

.hero-utility-col--center {
  justify-content: center;
  padding: 0 16px;
}

.hero-utility-col--right {
  justify-content: center;
  padding: 0 16px;
}

.hero-utility-square {
  color: #FF5A1F;
  font-size: 7px;
  margin-right: 8px;
  user-select: none;
}

.hero-utility-square--mid {
  margin: 0 8px;
}

/* ----------------------------------------------------------------
   HERO — LAYOUT (rewritten from scratch)

   Structure:
     .hero  (height:100vh, flex-column)
       .hero-utility-bar   → flex-shrink:0, natural 32px height
       .hero-industrial-body → flex:1, vertically centers the grid
         .hero-industrial-grid → 7fr 3fr (desktop + tablet)
           .hero-industrial-left  → logo + big title
           .hero-industrial-right → copy + CTA
   ---------------------------------------------------------------- */

/* ---- Main content body ---- */
.hero-industrial-body {
  position: relative;
  z-index: 10;
  flex: 1;
  /* fills all space below utility bar          */
  display: flex;
  align-items: center;
  /* vertically centers the grid               */
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ---- Content grid ---- */
.hero-industrial-grid {
  display: grid;
  grid-template-columns: 5fr 3.3fr;
  gap: 0;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--rail-x);
  align-items: end;
  /* right col copy aligns with title baseline */
  /* Animation handled by construct.js — structural wipe reveal */
}

/* ---- Left column: logo + title ---- */
.hero-logo-wrap {
  margin-bottom: clamp(24px, 4vh, 40px);
  display: flex;
  align-items: center;
}

.hero-logo-img {
  height: clamp(44px, 5.5vh, 52px);
  width: auto;
  opacity: 0.95;
}

.hero-industrial-left {
  display: flex;
  flex-direction: column;
  padding-left: clamp(24px, 3vw, 48px);
  padding-right: clamp(24px, 4vw, 80px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Desktop title: big, dominant */
.hero-industrial-title {
  font-family: var(--chakra);
  font-weight: var(--display-weight);
  font-size: var(--type-display-xl);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-industrial-line {
  display: block;
  white-space: nowrap;
}

.hero-industrial-accent {
  color: #FF5A1F;
}

/* ---- Right column: copy + CTA ---- */
.hero-industrial-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(16px, 2.5vh, 28px);
  padding-left: clamp(32px, 4vw, 80px);
  padding-right: clamp(24px, 3vw, 48px);
  padding-bottom: 8px;
}

.hero-industrial-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-mobile-break {
  display: none;
}

.hero-industrial-copy p {
  font-family: var(--chakra);
  font-size: var(--type-body-l);
  line-height: var(--lh-body-l);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.hero-industrial-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* ================================================================
   RESPONSIVE — Tablet  (540px – 1024px)
   Two columns maintained, font sizes scaled, content stays centred
   ================================================================ */
@media (max-width: 1024px) {

  /* Shift to 6:4 ratio at tablet so the right column isn't starved for space */
  .hero-industrial-grid {
    grid-template-columns: 6fr 4fr;
  }

  .hero-logo-img {
    height: clamp(22px, 3.5vh, 32px);
  }

  .hero-logo-wrap {
    margin-bottom: clamp(12px, 2vh, 20px);
  }

  /* Add more padding around the middle line break so it isn't crammed */
  .hero-industrial-left {
    padding-left: clamp(20px, 3vw, 40px);
    padding-right: clamp(32px, 4vw, 64px);
  }

  /* Title scales to fit the 6fr left column */
  .hero-industrial-title {
    /* Handled by clamp scale */
  }

  .hero-industrial-right {
    padding-left: clamp(32px, 4vw, 64px);
    padding-right: clamp(20px, 3vw, 40px);
    gap: clamp(16px, 2vh, 24px);
  }

  /* Right copy: straightforward vw scaling to prevent calc issues, 13px floor */
  .hero-industrial-copy p {
    font-size: clamp(12px, 1.5vw, 16px);
    line-height: 1.6;
  }

  .hero-sys-label {
    display: none;
  }
}

/* ================================================================
   RESPONSIVE — Mobile  (< 540px)
   Single column: logo → title → copy → CTA stacked top-to-bottom
   ================================================================ */
@media (max-width: 540px) {

  /* Show top utility bar, align to left */
  .hero-utility-bar {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(5, 5, 5, 0.2);
    padding-top: 2px;
    padding-left: 24px;
    padding-right: 24px;
    backdrop-filter: blur(4px);
  }

  .hero-utility-inner {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .hero-utility-col--center,
  .hero-utility-col--right {
    display: none;
  }

  /* Stack into single column */
  .hero-industrial-grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0;
    padding: 0 48px;
  }

  .hero-industrial-left {
    padding: calc(var(--sp-48) + 60px) 0 var(--sp-32) 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .hero-logo-img {
    height: clamp(32px, 7vh, 44px);
  }

  .hero-logo-wrap {
    margin-bottom: clamp(24px, 4vh, 32px);
  }

  /* Mobile title fills 100% of screen width */
  .hero-industrial-title {
    max-width: 100%;
  }

  .hero-industrial-right {
    padding: var(--sp-32) 0 var(--sp-64) 0;
    gap: 24px;
    max-width: 40ch;
  }

  .hero-industrial-copy {
    gap: var(--sp-16);
    padding: 0;
  }

  .hero-industrial-copy p {
    font-size: 14px;
    line-height: 1.6;
    max-width: 38ch;
  }

  .hero-mobile-break {
    display: none;
  }
}

.hero-mobile-only-break {
  display: none;
}

.desktop-only-break {
  display: block;
}

@media (max-width: 1024px) {
  .desktop-only-break {
    display: none;
  }
}

@media (max-width: 540px) {
  .hero {
    min-height: 100dvh;
    height: auto;
    padding-bottom: 120px;
  }

  .hero-mobile-only-break {
    display: block;
  }
}

/* =============================================================================
   BOOT SEQUENCE — OS Initialization Preloader (Remotion)
   ============================================================================= */

/* ── Root overlay ───────────────────────────────────────────────────────────── */
.boot-seq {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Hard shadow on the bottom to give the wipe-up depth */
  box-shadow: 0 100px 100px rgba(0, 0, 0, 0.9);
}

/* ── Full-viewport pixel grid background ────────────────────────────────────── */
.boot-seq__grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.boot-seq__grid .aetis-grid-frame,
.boot-seq__grid .aetis-grid-frame--hero {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.boot-seq__grid canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── CRT Treatment (Subtle, Minimal) ────────────────────────────────────────── */
.boot-seq__crt {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Minimal static overlay instead of aggressive moving scanlines */
  background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
  mix-blend-mode: multiply;
}

/* ── Logo stage ─────────────────────────────────────────────────────────────── */
.boot-seq__logo-stage {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The wrapper is moved around by Remotion inline styles */
.boot-seq__logo-outer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}

/* ── Depth extrusion layers ─────────────────────────────────────────────────── */
.boot-seq__depth {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.boot-seq__depth-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(35%) sepia(85%) saturate(350%) hue-rotate(340deg) brightness(0.55);
}

/* ── Face logo (Smaller, Premium) ───────────────────────────────────────────── */
.boot-seq__logo-face {
  position: relative;
  z-index: 5;
  /* Significantly reduced size for a premium, confident aesthetic */
  width: clamp(100px, 12vw, 180px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(255, 72, 26, 0.15));
}

@media (max-width: 540px) {
  .boot-seq__logo-face {
    width: clamp(90px, 35vw, 120px);
  }
}


/* ── Keyframes ──────────────────────────────────────────────────────────────── */

/* Fractional-frame panel exit — steps() gives the "film advancing" effect */
@keyframes boot-panel-exit {
  from {
    transform: translateY(0vh);
  }

  to {
    transform: translateY(-105vh);
  }
}

/* Logo enter: rises from below the viewport while unrotating from -180° */
@keyframes boot-logo-enter {
  0% {
    transform: translateY(110vh) rotate(-180deg);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  55% {
    transform: translateY(0) rotate(-14deg);
    opacity: 1;
  }

  72% {
    transform: translateY(0) rotate(7deg);
  }

  83% {
    transform: translateY(0) rotate(-3deg);
  }

  92% {
    transform: translateY(0) rotate(1.5deg);
  }

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

/* Depth extrusion layers — staggered offset per layer index --di */
@keyframes boot-depth-enter {
  0% {
    opacity: 0;
    transform: translateX(calc(var(--di, 0) * -4px)) translateY(calc(var(--di, 0) * 2.5px));
  }

  40% {
    opacity: calc(0.55 - var(--di, 0) * 0.055);
  }

  100% {
    opacity: calc(0.3 - var(--di, 0) * 0.028);
    transform: translateX(calc(var(--di, 0) * -3px)) translateY(calc(var(--di, 0) * 1.8px));
  }
}

/* Metallic glint sweep — single left-to-right pass */
@keyframes boot-glint {
  0% {
    mask-position: -200% center;
  }

  100% {
    mask-position: 400% center;
  }
}

/* CRT horizontal micro-jitter — steps(1) snaps between positions */
@keyframes boot-jitter {
  0% {
    transform: translateX(0px);
  }

  11% {
    transform: translateX(1px);
  }

  22% {
    transform: translateX(0px);
  }

  44% {
    transform: translateX(-1px);
  }

  55% {
    transform: translateX(0px);
  }

  77% {
    transform: translateX(1px);
  }

  88% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-1px);
  }
}

/* Luminance flicker — phosphor warm-up over the full boot duration */
@keyframes boot-flicker {
  0% {
    opacity: 0;
  }

  3% {
    opacity: 0.85;
  }

  7% {
    opacity: 0.6;
  }

  14% {
    opacity: 0.9;
  }

  22% {
    opacity: 0.78;
  }

  35% {
    opacity: 0.92;
  }

  50% {
    opacity: 0.85;
  }

  65% {
    opacity: 0.93;
  }

  80% {
    opacity: 0.88;
  }

  100% {
    opacity: 0.92;
  }
}

/* Corner bracket draw-in */
@keyframes boot-corner-draw {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Status text cascade — each row appears with a staggered offset */
@keyframes boot-status-appear {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Blink — 2Hz cursor blink for the active status indicator */
@keyframes boot-blink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* Progress fill — linear from 0% to 100% */
@keyframes boot-progress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/* ── Root overlay ───────────────────────────────────────────────────────────── */

.boot-seq {
  /* Fixed full-viewport layer above everything */
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* Solid matte background — the same deep black as the site body */
  background: #050505;

  /* Flex column — centers the logo stage */
  display: flex;
  align-items: center;
  justify-content: center;

  /* GPU layer for the exit transform */
  will-change: transform;
  overflow: hidden;
}

/* Exit: panel swipes up in fractional steps — 14 discrete jumps over 450ms */
.boot-seq--exit {
  animation: boot-panel-exit 450ms steps(14, end) forwards;
}

/* ── Full-viewport pixel grid background ────────────────────────────────────── */

.boot-seq__grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Force the PixelGrid canvas to fill the host regardless of its logical px size */
.boot-seq__grid .aetis-grid-frame,
.boot-seq__grid .aetis-grid-frame--hero {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.boot-seq__grid canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── CRT / VHS treatment ────────────────────────────────────────────────────── */

.boot-seq__crt {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  /* Horizontal scanlines at CRT pitch (2px on / 4px off) */
  background-image: repeating-linear-gradient(to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.10) 2px,
      rgba(0, 0, 0, 0.10) 4px);

  /* Screen curvature vignette */
  box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.55);

  /* Micro-jitter */
  animation: boot-jitter 0.22s steps(1) infinite;
}

/* ── Corner bracket decorations ─────────────────────────────────────────────── */

.boot-seq__corner {
  position: absolute;
  z-index: 4;
  width: 20px;
  height: 20px;
  animation: boot-corner-draw 0.3s linear forwards;
  animation-delay: 0.1s;
  opacity: 0;
}

/* L-bracket via border */
.boot-seq__corner--tl {
  top: 20px;
  left: var(--rail-x);
  border-top: 1px solid rgba(255, 255, 255, .2);
  border-left: 1px solid rgba(255, 255, 255, .2);
}

.boot-seq__corner--tr {
  top: 20px;
  right: var(--rail-x);
  border-top: 1px solid rgba(255, 255, 255, .2);
  border-right: 1px solid rgba(255, 255, 255, .2);
}

.boot-seq__corner--bl {
  bottom: 20px;
  left: var(--rail-x);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  border-left: 1px solid rgba(255, 255, 255, .2);
}

.boot-seq__corner--br {
  bottom: 20px;
  right: var(--rail-x);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  border-right: 1px solid rgba(255, 255, 255, .2);
}

/* ── System status readout ─────────────────────────────────────────────────── */

.boot-seq__status {
  position: absolute;
  top: 36px;
  left: var(--rail-x);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.boot-seq__status-row {
  display: block;
  font-family: var(--chakra);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  opacity: 0;
  animation: boot-status-appear 0.2s linear forwards;
}

/* Stagger each status row */
.boot-seq__status-row:nth-child(1) {
  animation-delay: 0.05s;
}

.boot-seq__status-row:nth-child(2) {
  animation-delay: 0.30s;
}

.boot-seq__status-row:nth-child(3) {
  animation-delay: 0.55s;
}

.boot-seq__status-row:nth-child(4) {
  animation-delay: 0.80s;
}

.boot-seq__status-row:nth-child(5) {
  animation-delay: 1.05s;
}

.boot-seq__status-row:nth-child(6) {
  animation-delay: 1.30s;
}

.boot-seq__status-row--active {
  color: #FF481A;
  animation: boot-status-appear 0.2s linear 0.05s forwards,
    boot-blink 0.5s step-start 0.05s 8 forwards;
}

.boot-seq__status-row--dim {
  color: rgba(255, 255, 255, 0.18);
}

/* ── Version stamp — top right ──────────────────────────────────────────────── */

.boot-seq__stamp {
  position: absolute;
  top: 36px;
  right: var(--rail-x);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  opacity: 0;
  animation: boot-status-appear 0.2s linear 0.3s forwards;
}

.boot-seq__stamp span {
  font-family: var(--chakra);
  font-size: 8px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.15);
}

/* ── Logo stage ─────────────────────────────────────────────────────────────── */

.boot-seq__logo-stage {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  /* perspective for any child 3D transforms */
  perspective: 1200px;
  perspective-origin: center center;
}

/* Outer wrapper — this is what does the enter animation (slide + rotate) */
.boot-seq__logo-outer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
  /* Enter animation: rise from below at -180°, settle at 0° */
  animation: boot-logo-enter 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
  opacity: 0;
  /* start invisible — animation handles opacity */
}

/* ── Depth extrusion layers ─────────────────────────────────────────────────── */

.boot-seq__depth {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.boot-seq__depth-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Orange phosphor tint — matches the AETIS primary orange */
  filter: brightness(0) saturate(100%) invert(35%) sepia(85%) saturate(350%) hue-rotate(340deg) brightness(0.55);
  opacity: 0;
  animation: boot-depth-enter 1.2s cubic-bezier(0.25, 0, 0.1, 1) forwards;
  animation-delay: calc(var(--di, 0) * 0.03s + 0.8s);
}

/* ── Face logo ─────────────────────────────────────────────────────────────── */

.boot-seq__logo-face {
  position: relative;
  z-index: 5;
  width: clamp(200px, 24vw, 360px);
  height: auto;
  display: block;

  /* Subtle phosphor glow — no bloom, just presence */
  filter:
    drop-shadow(0 0 16px rgba(255, 72, 26, 0.25)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.12));

  /* Luminance flicker during boot — phosphor warm-up */
  animation: boot-flicker 6.5s linear forwards;
}

/* ── Progress bar ───────────────────────────────────────────────────────────── */

.boot-seq__progress {
  position: absolute;
  bottom: 28px;
  left: var(--rail-x);
  right: var(--rail-x);
  z-index: 10;
}

.boot-seq__progress-track {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  position: relative;
  overflow: hidden;
}

.boot-seq__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #FF481A;
  width: 0%;
  /* Duration matches TOTAL_BOOT_MS via CSS custom prop */
  animation: boot-progress var(--boot-ms, 6500ms) linear forwards;
  box-shadow: 0 0 6px rgba(255, 72, 26, 0.7);
}

.boot-seq__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.boot-seq__progress-label {
  font-family: var(--chakra);
  font-size: 8px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  /* Component is not mounted when reduced-motion is active (handled in JS) */
  .boot-seq {
    display: none !important;
  }
}

/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .boot-seq__logo-face {
    width: clamp(150px, 60vw, 220px);
  }

  .boot-seq__status,
  .boot-seq__stamp {
    top: 20px;
  }

  .boot-seq__status {
    left: 20px;
  }

  .boot-seq__stamp {
    right: 20px;
  }

  .boot-seq__progress {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }

  .boot-seq__corner--tl,
  .boot-seq__corner--bl {
    left: 20px;
  }

  .boot-seq__corner--tr,
  .boot-seq__corner--br {
    right: 20px;
  }
}



/* ── Keyframes ──────────────────────────────────────────────────────────────── */

/* CRT horizontal tracking jitter — 1-2px micro-shifts, randomized via steps */
@keyframes boot-crt-jitter {
  0% {
    transform: translateX(0);
  }

  8% {
    transform: translateX(1px);
  }

  12% {
    transform: translateX(0);
  }

  33% {
    transform: translateX(-1px);
  }

  35% {
    transform: translateX(0);
  }

  67% {
    transform: translateX(1px);
  }

  70% {
    transform: translateX(0);
  }

  91% {
    transform: translateX(-1px);
  }

  94% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

/* Luminance fluctuation — phosphor warm-up */
@keyframes boot-luminance {
  0% {
    opacity: 0.0;
  }

  5% {
    opacity: 0.7;
  }

  12% {
    opacity: 0.5;
  }

  20% {
    opacity: 0.82;
  }

  32% {
    opacity: 0.75;
  }

  45% {
    opacity: 0.88;
  }

  58% {
    opacity: 0.78;
  }

  70% {
    opacity: 0.90;
  }

  85% {
    opacity: 0.85;
  }

  100% {
    opacity: 0.90;
  }
}

/* Logo: 3D extrusion build — depth layers settle into position */
@keyframes boot-logo-extrude {
  0% {
    transform: perspective(900px) rotateY(-15deg) rotateX(5deg) translateZ(-80px);
    opacity: 0;
  }

  15% {
    opacity: 0.15;
  }

  40% {
    transform: perspective(900px) rotateY(12deg) rotateX(-2deg) translateZ(-10px);
    opacity: 0.8;
  }

  65% {
    transform: perspective(900px) rotateY(-4deg) rotateX(1deg) translateZ(0px);
    opacity: 0.95;
  }

  80% {
    transform: perspective(900px) rotateY(2deg) rotateX(0deg) translateZ(2px);
  }

  100% {
    transform: perspective(900px) rotateY(0deg) rotateX(0deg) translateZ(0px);
    opacity: 1;
  }
}

/* Depth extrusion layers animate in staggered from back to front */
@keyframes boot-depth-layer {
  0% {
    opacity: 0;
    transform: translateX(calc(var(--layer-i) * -3px)) translateY(calc(var(--layer-i) * 2px));
  }

  30% {
    opacity: calc(0.5 - var(--layer-i) * 0.06);
  }

  100% {
    opacity: calc(0.25 - var(--layer-i) * 0.03);
    transform: translateX(calc(var(--layer-i) * -2.5px)) translateY(calc(var(--layer-i) * 1.5px));
  }
}

/* Metallic glint sweep — single pass from left to right */
@keyframes boot-glint {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 400% center;
  }
}

/* Boot overlay: appear instantly then fade out on exit */
@keyframes boot-overlay-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes boot-overlay-exit {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Status bar text — blink at 2Hz like a cursor */
@keyframes boot-blink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* Progress bar fill — linear from 0 to 100% over 2.5s */
@keyframes boot-progress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/* ── Overlay Container ──────────────────────────────────────────────────────── */

/* The overlay sits on top of the hero grid, covers the full hero height */
.boot-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Inherits background from hero — no separate fill */
}

.boot-overlay--enter {
  animation: boot-overlay-enter 0.08s linear forwards;
}

.boot-overlay--hold {
  opacity: 1;
}

.boot-overlay--exit {
  animation: boot-overlay-exit 0.7s linear forwards;
  pointer-events: none;
}

/* ── CRT / VHS Effects Layer ─────────────────────────────────────────────────
   A thin overlay providing:
   – Horizontal jitter tracking   (animation: boot-crt-jitter)
   – Scanlines via repeating-linear-gradient
   – Subtle screen edge darkening (radial vignette within the overlay)
   No additional heavy post-processing — measured and restrained.
──────────────────────────────────────────────────────────────────────────── */
.boot-crt-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  animation: boot-crt-jitter 0.18s steps(1) infinite;
  /* Scanlines: 2px line / 4px gap = tight CRT pitch */
  background-image: repeating-linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.12) 2px,
      rgba(0, 0, 0, 0.12) 4px);
  /* Subtle curvature vignette along screen edges */
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.45);
}

/* ── System Status Bar ───────────────────────────────────────────────────────
   Top-left corner. Readout of fake system initialization states.
   Monospaced, very small, Chakra Petch.
──────────────────────────────────────────────────────────────────────────── */
.boot-status-bar {
  position: absolute;
  top: 40px;
  left: var(--rail-x);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: boot-luminance 2.8s linear forwards;
}

.boot-status-item {
  font-family: var(--chakra);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

.boot-status-item--blink {
  color: #FF481A;
  animation: boot-blink 0.5s step-start infinite;
}

/* ── Logo Stage — 3D Extrusion ───────────────────────────────────────────────
   Centered in the overlay. perspective() on the parent, transform on child.
──────────────────────────────────────────────────────────────────────────── */
.boot-logo-stage {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
}

.boot-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}

.boot-logo-wrap--enter,
.boot-logo-wrap--hold {
  animation: boot-logo-extrude 1.2s cubic-bezier(0.25, 0, 0.1, 1) forwards;
  animation-delay: 0.05s;
}

.boot-logo-wrap--exit {
  /* Inherits the final position from the extrude — just fades via parent */
  opacity: 1;
  transform: perspective(900px) rotateY(0deg) translateZ(0px);
}

/* Extrusion depth layer stack — each layer is offset by --layer-i */
.boot-logo-depth {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.boot-logo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Orange phosphor tint for depth layers */
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(400%) hue-rotate(340deg) brightness(0.6);
  animation: boot-depth-layer 0.9s cubic-bezier(0.25, 0, 0.1, 1) forwards;
  animation-delay: calc(var(--layer-i) * 0.025s + 0.05s);
}

/* Primary face logo — white, full brightness */
.boot-logo-face {
  position: relative;
  z-index: 5;
  width: clamp(180px, 22vw, 320px);
  height: auto;
  /* Metallic glint sweep — 1 pass, precise timing */
  background: linear-gradient(105deg,
      transparent 30%,
      rgba(255, 255, 255, 0.18) 50%,
      transparent 70%);
  background-size: 300% 100%;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  /* Subtle luminance variation on the face itself */
  animation: boot-glint 1.4s linear 0.8s 1 forwards,
    boot-luminance 2.8s linear forwards;
  filter: drop-shadow(0 0 12px rgba(255, 72, 26, 0.3)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.15));
}

/* ── Progress Bar ────────────────────────────────────────────────────────────
   Bottom edge. Linear fill from 0 to 100% over 2.5s.
──────────────────────────────────────────────────────────────────────────── */
.boot-progress-bar {
  position: absolute;
  bottom: 32px;
  left: var(--rail-x);
  right: var(--rail-x);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.boot-progress-track {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.boot-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #FF481A;
  animation: boot-progress 2.5s linear forwards;
  box-shadow: 0 0 4px rgba(255, 72, 26, 0.6);
}

.boot-progress-label {
  font-family: var(--chakra);
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
}

/* ── prefers-reduced-motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .boot-overlay {
    display: none;
  }

  .boot-logo-face,
  .boot-logo-wrap,
  .boot-logo-layer,
  .boot-crt-fx,
  .boot-progress-fill {
    animation: none;
  }
}

/* ── Mobile adjustments ──────────────────────────────────────────────────────*/
@media (max-width: 540px) {
  .boot-logo-face {
    width: clamp(140px, 55vw, 200px);
  }

  .boot-status-bar {
    top: 24px;
    left: 24px;
  }

  .boot-progress-bar {
    left: 24px;
    right: 24px;
    bottom: 20px;
  }
}

/* === STATEMENT === */
/* Tight section padding — whitespace comes from internal padding, never
   from section separation. Adjacent sections lock through their shared
   1px border stroke, not through empty space. */
/* Sections carry no vertical padding — adjacent sections snap together
 * edge-to-edge through their shared 1px stroke. Top breathing room for
 * the header lives on the inner .container instead (see below), which
 * keeps the inter-section dock seamless while still giving every
 * section's heading area a consistent 64px gutter from the top edge. */
.section {
  padding: 0;
  position: relative;
  z-index: 10;
  background: #050505;
  /* Solid background prevents transparency bleed from sticky hero */
}

.section>.container {
  padding-top: var(--section-pad-top);
}

.section-statement {
  background: #000;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.statement-tag,
.section-tag {
  font-family: var(--chakra);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--red);
  margin-bottom: var(--sp-24)
}

/* Display type — Chakra Petch caps; shared weight / leading / tracking. Sizes stay per component. */
.aetis-section-heading,
.statement-title,
.section-title,
.feature-title,
.cta-title,
.hero-industrial-title,
.showcase-meta h3,
.problem-text h3,
.service-card h3,
.counter-item strong,
.process-step h3,
.process-step h4,
.team-info h3 {
  font-family: var(--chakra);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
}

.aetis-section-heading,
.statement-title,
.section-title,
.feature-title,
.cta-title {
  font-size: calc(var(--type-display-xl) * 0.56);
}

.statement-title {
  margin-bottom: var(--sp-64);
  max-width: 24ch;
}

.feature-title {
  margin: var(--sp-24) 0;
}

.feature-title-line {
  display: block;
}

.cta-title {
  margin-bottom: var(--sp-24);
  margin-left: 0;
  margin-right: 0;
}

.cta-title span {
  display: block
}

.cta-title .accent {
  color: var(--red)
}

.highlight {
  color: var(--red);
  position: relative
}

/* ================================================================
   MISSION SECTION — DUAL INFINITE TICKER
   ----------------------------------------------------------------
   Two stacked horizontal reels of design material thumbnails.
   Top reel scrolls left, bottom reel scrolls right. Each track holds
   the same 8 cards duplicated (8 + 8 = 16), and the keyframe animates
   translateX from 0 → -50% (top) or -50% → 0 (bottom). Because half
   the track is an exact copy of the other half, the wrap point is
   visually identical to the start state — true seamless loop, no reset.
   ================================================================ */
.mission-tickers {
  display: grid;
  /* minmax(0, 1fr) instead of the default 1fr (== minmax(auto, 1fr)) so
   * the column doesn't grow with its child's intrinsic width. The .ticker
   * UL inside is `width: max-content` and would otherwise push this grid
   * cell wider than the container, breaking the persistent rail alignment. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 0;
  background: #000;
}

/* The window is what is visible — it owns the overflow clip and the
 * cell-level borders. The .ticker UL inside has max-content width and is
 * free to overflow horizontally; it just gets clipped here at the
 * container's content edge so the persistent left/right rails stay clean. */
.ticker-window {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 0;
  touch-action: pan-y;
  pointer-events: none;
}

.ticker-window:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

@keyframes ticker-scroll-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes ticker-scroll-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.ticker {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.ticker-left {
  animation: ticker-scroll-left 40s linear infinite;
}

.ticker-right {
  animation: ticker-scroll-right 40s linear infinite;
}

.ticker-card {
  flex: 0 0 auto;
  width: max-content;
  background: #0a0a0a;
  display: grid;
  grid-template-rows: 1fr auto;
  /* Card-owned right border = the inter-card divider. Equal-width cards
   * means the duplicated set has exactly the same width as the original,
   * which is what makes the -50% wrap mathematically seamless. */
  border-right: 1px solid var(--line);
}

.ticker-img {
  width: auto;
  height: 270px;
  position: relative;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Subtle diagonal hatch — same texture as other dark placeholder zones. */
.ticker-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(255, 255, 255, .02) 10px, rgba(255, 255, 255, .02) 11px);
  pointer-events: none;
}

/* Big translucent index number rendered via attr() — keeps markup small. */
.ticker-img::after {
  content: none;
  font-family: var(--chakra);
  font-size: 56px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .07);
  position: relative;
}

.ticker-img-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--chakra);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--aetis-ember);
  z-index: 1;
}

/* When real artwork is dropped in, the <img> can just sit inside .ticker-img
 * and will fully cover the placeholder treatment. */
.ticker-img img {
  position: relative;
  width: auto;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.ticker-meta {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #000;
}

.ticker-tag {
  font-family: var(--chakra);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--ink-3);
  text-transform: uppercase;
  display: block;
}

@media(max-width:768px) {
  .ticker-left,
  .ticker-right {
    animation-duration: 26s;
  }

  .ticker-card {
    width: max-content;
  }

  .ticker-img {
    width: auto;
    height: 180px;
  }

  .ticker-img::after {
    font-size: 44px;
  }

  .ticker-img-label {
    font-size: 9px;
    left: 10px;
    bottom: 8px;
  }
}

@media(max-width:540px) {
  .ticker-left,
  .ticker-right {
    animation-duration: 20s;
  }

  .ticker-img {
    height: 150px;
  }
}

/* Showcase — locked grid, no gaps. Parent owns top+left, cards own right+bottom. */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.showcase-card {
  background: var(--bg);
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.showcase-card:nth-child(4n) {
  border-right: 0
}

.showcase-card:hover {
  background: #0F0F0F
}

.showcase-card:hover .showcase-meta .tag {
  color: #fff
}

.showcase-img {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--chakra);
  font-size: 10px;
  letter-spacing: .1em;
  position: relative
}

.showcase-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(255, 255, 255, .02) 10px, rgba(255, 255, 255, .02) 11px)
}

.showcase-meta {
  padding: 18px 20px;
  border-top: 1px solid var(--line);
  margin-top: auto
}

.showcase-meta .tag {
  font-family: var(--chakra);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--red);
  display: block;
  margin-bottom: 6px;
  transition: color .3s ease
}

.showcase-meta h3 {
  font-size: var(--type-card);
  line-height: var(--lh-card);
}

@media(max-width:900px) {
  .showcase-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .showcase-card:nth-child(2n) {
    border-right: 0
  }
}

@media(max-width:540px) {
  .showcase-grid {
    grid-template-columns: 1fr
  }

  .showcase-card {
    border-right: 0
  }
}

/* === SECTION HEAD (legacy fallback) === */
.section-head {
  margin-bottom: 60px
}

.section-head.split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap
}

/* ======================================================================
   CINEMATIC SECTION HEADER SYSTEM
   Reusable, modular, atmospheric. Class names prefixed `aetis-` to avoid
   collisions with the legacy styles above.
   ====================================================================== */

/* --- design tokens ---------------------------------------------------- */
:root {
  --aetis-bg: #000000;
  --aetis-bg-soft: #0a0a0a;
  --aetis-ink: #f5ead8;
  --aetis-sub: #b5b0a4;
  --aetis-meta: #6b6960;
  --aetis-ember: #FF481A;
  --aetis-amber: #ffb547;
  --aetis-line: rgba(245, 234, 216, 0.08);
  --aetis-line-2: rgba(245, 234, 216, 0.14);
}

/* --- header layout ---------------------------------------------------- */
.aetis-section-header {
  max-width: 100%;
  overflow-x: clip;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-y);
}

.aetis-section-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 46%);
  gap: var(--section-gap);
  align-items: center;
  padding-bottom: var(--section-pad-y);
}

.aetis-section-header-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  padding-left: 48px;
}

/* eyebrow */
.aetis-section-eyebrow {
  display: none !important;
  align-items: center;
  gap: 8px;
  font-family: var(--chakra);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--aetis-ember);
  text-transform: uppercase;
}

.aetis-eyebrow-bracket {
  opacity: 0.55;
}

.aetis-eyebrow-text {
  letter-spacing: 0.28em;
}

/* heading — size/type shared with .statement-title, .feature-title, etc. */
.aetis-section-heading {
  color: var(--aetis-ink);
  margin: 0;
  max-width: 13ch;
  line-height: 0.9;
}

/* subheading */
.aetis-section-sub {
  font-family: var(--chakra);
  font-size: var(--type-body-l);
  line-height: var(--lh-body-l);
  color: var(--aetis-sub);
  max-width: 56ch;
  margin: 0;
  white-space: pre-line;
}

/* metadata chips — connected meta bar, shared borders */
.aetis-section-meta {
  display: none;
}

.aetis-section-meta-chip {
  font-family: var(--chakra);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--aetis-meta);
  text-transform: uppercase;
  padding: 7px 14px;
  border-right: 1px solid var(--aetis-line);
  border-bottom: 1px solid var(--aetis-line);
  background: rgba(245, 234, 216, 0.02);
}

/* visual column */
.aetis-section-header-visual {
  min-width: 0;
  justify-self: end;
  width: 100%;
}

@media (max-width: 1024px) {
  .aetis-section-header-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

@media (max-width: 540px) {
  .aetis-section-header-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .aetis-section-header-copy {
    padding-left: var(--rail-x);
    padding-right: var(--rail-x);
  }

  .aetis-section-header-visual {
    order: -1;
  }
}

/* ======================================================================
   PIXEL GRID FRAME — the spatial centerpiece
   ====================================================================== */
.aetis-grid-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 36 / 22;
  overflow: hidden;
  background: linear-gradient(180deg, var(--aetis-bg) 0%, #000000 100%);
  border: 1px solid var(--aetis-line);
  border-right: 0;
  isolation: isolate;
}

.aetis-grid-frame--hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border: none;
  background: #000000;
}

.aetis-grid-frame--hero .aetis-grid-vignette {
  background:
    radial-gradient(ellipse 72% 48% at 50% 0%, rgba(255, 72, 26, .16) 0%, transparent 55%),
    radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 45%, transparent 100%);
}

.aetis-grid-frame--hero .aetis-grid-scanlines {
  opacity: 0.55;
}

.aetis-grid-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* outer vignette */
.aetis-grid-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.22));
  z-index: 2;
}

/* scanlines */
.aetis-grid-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.55;
  background-image: repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.18) 0,
      rgba(0, 0, 0, 0.18) 1px,
      transparent 1px,
      transparent 3px);
  mix-blend-mode: multiply;
}

/* film grain */
.aetis-grid-grain {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  animation: aetis-grain-drift 0.6s steps(4) infinite;
}

@media (max-width: 768px) {
  .aetis-grid-scanlines {
    mix-blend-mode: normal;
    opacity: 0.2;
  }

  .aetis-grid-grain {
    mix-blend-mode: normal;
    opacity: 0.08;
    /* On mobile, use less intense background position shift to avoid repaints */
    animation: aetis-grain-drift-mobile 1s steps(2) infinite;
  }
}

@keyframes aetis-grain-drift {
  0% {
    background-position: 0 0;
  }

  25% {
    background-position: -50px -50px;
  }

  50% {
    background-position: -100px 50px;
  }

  75% {
    background-position: 50px -100px;
  }

  100% {
    background-position: 0 0;
  }
}

@keyframes aetis-grain-drift-mobile {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: -20px 20px;
  }

  100% {
    background-position: 0 0;
  }
}

/* HUD overlay */
.aetis-grid-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  font-family: var(--chakra);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(245, 234, 216, 0.55);
  text-transform: uppercase;
}

.aetis-grid-hud-corner {
  position: absolute;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(2px);
}

.aetis-hud-tl {
  top: 12px;
  left: 12px;
  color: var(--aetis-ember);
}

.aetis-hud-tr {
  top: 12px;
  right: 12px;
  color: var(--aetis-amber);
}

.aetis-hud-bl {
  bottom: 12px;
  left: 12px;
}

.aetis-hud-br {
  bottom: 12px;
  right: 12px;
  color: rgba(245, 234, 216, 0.4);
}

.aetis-hud-dot {
  width: 6px;
  height: 6px;
  background: var(--aetis-ember);
  box-shadow: 0 0 6px var(--aetis-ember);
  animation: aetis-hud-blink 1.6s ease-in-out infinite;
}

@keyframes aetis-hud-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/* corner ticks (crosshair anchors) */
.aetis-hud-tick {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.aetis-hud-tick::before,
.aetis-hud-tick::after {
  content: "";
  position: absolute;
  background: rgba(245, 234, 216, 0.4);
}

.aetis-hud-tick::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.aetis-hud-tick::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.aetis-tick-tl {
  top: 6px;
  left: 6px;
}

.aetis-tick-tr {
  top: 6px;
  right: 6px;
}

.aetis-tick-bl {
  bottom: 6px;
  left: 6px;
}

.aetis-tick-br {
  bottom: 6px;
  right: 6px;
}

/* ======================================================================
   INDUSTRIAL DIVIDER
   ====================================================================== */
.aetis-section-divider {
  position: relative;
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.aetis-section-divider-stripes {
  display: grid;
  grid-template-columns: repeat(48, 1fr);
  gap: 3px;
  height: 4px;
  transform-origin: left;
  align-items: center;
}

.aetis-section-divider-stripe {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  filter: drop-shadow(0 0 3px rgba(255, 72, 26, 0.45));
}

.aetis-section-divider-stripe svg {
  display: block;
  width: 100%;
  height: 4px;
}

/* Row of glowing amber squares — replaces the old segmented chip line.
 * Squares are spaced evenly across the full divider width and pulse in
 * a continuous wave driven from Framer Motion (see SectionDivider.tsx). */
.aetis-section-divider-dots {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4px;
}

.aetis-section-divider-dot {
  display: block;
  width: 3px;
  height: 3px;
  background: var(--aetis-amber);
  box-shadow:
    0 0 4px var(--aetis-amber),
    0 0 8px rgba(255, 181, 71, 0.35);
}

/* the section-divider provides its own visual transition; no extra margin needed. */
.aetis-section-header+* {
  margin-top: 0;
}

/* === PROBLEM === */
.section-problem {
  background: #000;
  border-bottom: 1px solid var(--line)
}

.problem-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.problem-card:nth-child(2n) {
  border-right: 0
}

.problem-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  padding: 0;
  background: var(--bg);
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease;
}

.problem-card:hover {
  background: #0F0F0F
}

.problem-text {
  padding: 0 40px 40px 40px;
}

.problem-orb {
  aspect-ratio: 1.6/1;
  background: radial-gradient(circle at center, var(--red) 0%, #8b1f17 40%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden
}

.problem-orb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at center, transparent 0, transparent 8px, rgba(0, 0, 0, .4) 8px, rgba(0, 0, 0, .4) 10px)
}

.orb-inner {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, .4);
  font-family: var(--chakra);
  font-size: 11px;
  letter-spacing: .15em
}

.problem-num {
  font-family: var(--chakra);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--red);
  margin-bottom: 12px
}

.problem-text h3 {
  font-size: clamp(26px, 6vw, 32px);
  margin-bottom: var(--sp-16);
}

.problem-text p {
  color: var(--ink-2);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  max-width: none
}

@media(max-width:540px) {
  .problem-row {
    grid-template-columns: 1fr
  }

  .problem-card {
    border-right: 0
  }

  .problem-text {
    padding: 0 var(--rail-x) var(--rail-x) var(--rail-x);
  }
}

/* === SERVICES === */
.section-services {
  background: #000;
  border-bottom: 1px solid var(--line)
}

.services-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  border-left: 0
}

/* ─── SERVICE CARD — BRUTALIST INDUSTRIAL ─────────────────────────────── */

.service-card {
  padding: clamp(64px, 8vw, 120px) var(--sp-xl);
  border-bottom: 1px solid var(--line);
  position: relative;
  background: #000000;
  min-width: 0;
  display: flex;
  flex-direction: row;
  gap: clamp(32px, 5vw, 64px);
  overflow: clip;
}

/* Pixel grid sits as a full-bleed background layer — pointer-events off */
.service-card-grid-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The SVG from PixelGrid must fill the host completely */
.service-card-grid-host .aetis-grid-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
}

.service-card-grid-host .aetis-grid-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Vignette overlay layer positioned between grid animation (z-index 0) and text content (z-index 2) */
.service-card-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.25));
}

/* Content layers above the grid and vignette */
.service-left,
.service-right {
  position: relative;
  z-index: 2;
}

.service-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-left .service-num {
  font-family: var(--chakra);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--ink-3);
  margin-bottom: var(--sp-24);
  transition: color .4s ease;
}

.service-card:hover .service-left .service-num {
  color: var(--red);
}

.service-left h3 {
  font-family: var(--chakra);
  font-weight: var(--display-weight);
  font-size: 3.2rem;
  max-width: 13ch;
  margin-bottom: var(--sp-16);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.4s ease;
}

.service-card:hover .service-left h3 {
  color: #fff;
}

.service-left p {
  color: var(--ink-2);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  max-width: 480px;
  margin: 0;
}

.service-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 8px;
}

.service-card:hover .service-pill {
  border-color: rgba(255, 255, 255, 0.1);
}

.service-pill {
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  font-size: 12px;
  line-height: 1;
  color: var(--ink);
  font-family: var(--mono);
  white-space: nowrap;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 0.4s ease;
}


.service-pill .pix-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-right: 0;
  filter: invert(1) brightness(1.25);
  opacity: 0.95;
}

.service-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  padding-left: clamp(32px, 5vw, 64px);
  justify-content: space-between;
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-list li {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-list li::before {
  content: '+';
  color: var(--red);
  font-weight: 700;
}

.service-delivery {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--red);
  margin-top: 32px;
  text-transform: uppercase;
  width: 100%;
  text-align: left;
  display: inline-block;
}

.pix-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  image-rendering: pixelated;
  filter: invert(1) brightness(1.2);
  opacity: .9;
  margin-right: 6px;
}

.process-step h3 .pix-icon,
.process-step h4 .pix-icon {
  width: 16px;
  height: 16px;
}

@media(max-width:540px) {
  .service-card {
    flex-direction: column;
    padding: var(--sp-32) var(--rail-x);
  }

  .service-left h3 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    max-width: 100%;
  }

  .service-right {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 32px;
  }
}

/* === FEATURE CASE === */
.section-feature {
  background: #000;
  border-bottom: 1px solid var(--line)
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.feature-image {
  aspect-ratio: auto;
  min-height: 520px;
  background: linear-gradient(135deg, #1a0808 0%, #3d1410 50%, #0a0a0a 100%);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  position: relative;
  overflow: hidden;
}

.feature-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0, transparent 20px, rgba(255, 59, 47, .04) 20px, rgba(255, 59, 47, .04) 21px)
}

.feature-content {
  padding: 48px;
  min-width: 0;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.feature-content p {
  font-size: var(--type-body-l);
  line-height: var(--lh-body-l);
  color: var(--ink-2);
  margin-bottom: var(--sp-32);
  max-width: 480px
}

.feature-content .section-tag,
.feature-content .feature-title,
.feature-content>p {
  align-self: stretch;
}

@media(max-width:900px) {
  .feature-row {
    grid-template-columns: 1fr
  }

  .feature-image {
    min-height: 380px;
    border-right: 0
  }

  .feature-content {
    padding: var(--sp-32) var(--rail-x)
  }
}

/* === WORK LIST === */
.section-work {
  background: #000;
  border-bottom: 1px solid var(--line)
}

.work-counter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-bottom: 0;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.counter-item:nth-child(2n) {
  border-right: 0
}

.counter-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: var(--sp-32) 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.counter-item strong {
  font-size: clamp(40px, 6vw, 64px);
  color: var(--red)
}

.counter-item span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-3)
}

.work-list {
  border-left: 0;
  border-right: 0
}

.work-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 140px) 80px 40px;
  align-items: center;
  gap: var(--sp-24);
  padding: 28px 24px 28px 48px;
  border-bottom: 1px solid var(--line);
  transition: background .3s ease;
  cursor: pointer;
}

.work-row:hover {
  background: #0F0F0F
}

.work-row:hover .work-name {
  color: var(--red)
}

.work-row:hover .work-go {
  transform: translateX(8px);
  color: var(--red)
}

.work-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-3)
}

.work-name {
  font-size: clamp(18px, 2.4vw, 28px);
  transition: color .3s;
  min-width: 0;
  overflow-wrap: break-word;
  text-transform: uppercase;
  font-weight: bold
}

.work-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-2);
  text-align: right;
  min-width: 0
}

.work-year {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-3);
  text-align: right
}

.work-go {
  font-family: var(--mono);
  font-size: 18px;
  text-align: right;
  color: var(--ink-3);
  transition: all .3s
}

@media(max-width:1024px) {
  .work-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 100px) 60px 36px;
    gap: var(--sp-16);
    padding: var(--sp-24) 16px
  }
}

@media(max-width:900px) {
  .work-row {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 14px
  }

  .work-row .work-cat,
  .work-row .work-year {
    display: none
  }
}

@media(max-width:768px) {
  .work-row {
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 14px;
    padding: var(--sp-24) var(--rail-x);
  }

  .work-name {
    font-size: 18px
  }
}

/* === FAQ === */
.section-faq {
  background: #000;
  border-bottom: 1px solid var(--line);
  padding-bottom: 84px;
}

.faq-list {
  border-top: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  width: 100%;
}

.faq-item {
  border-bottom: 1px solid var(--line)
}

.faq-question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: var(--sp-24);
  align-items: center;
  padding: 28px 24px 28px 48px;
  cursor: pointer;
  list-style: none
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-doubt-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-24);
  padding: 28px 40px 28px 48px;
  border-bottom: 1px solid var(--line);
}

.faq-doubt-title {
  font-size: clamp(16px, 2.2vw, 24px);
  min-width: 0;
  overflow-wrap: break-word;
  text-transform: uppercase;
  font-weight: bold;
}

@media(max-width:768px) {
  .faq-doubt-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 26px 24px 24px;
  }
}

.faq-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-3)
}

.faq-question span:first-child {
  font-size: clamp(16px, 2.2vw, 24px);
  min-width: 0;
  overflow-wrap: break-word;
  text-transform: uppercase;
  font-weight: bold
}

.faq-icon {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--red);
  position: absolute;
  transition: opacity 0.3s var(--ease-construct), transform 0.3s var(--ease-construct);
}

.faq-icon-close {
  opacity: 0;
  transform: rotate(-90deg);
}

.faq-item[open] .faq-icon-open {
  opacity: 0;
  transform: rotate(90deg);
}

.faq-item[open] .faq-icon-close {
  opacity: 1;
  transform: rotate(0deg);
}

.faq-item[open] .faq-question span:first-child {
  color: var(--red)
}

.faq-answer {
  padding: 0 24px 32px 48px;
  max-width: none;
}

.faq-answer p {
  color: var(--ink-2);
  font-size: calc(var(--type-body) + 4px);
  line-height: var(--lh-body);
}

@media(max-width:768px) {
  .faq-question {
    grid-template-columns: 1fr 30px;
    gap: 12px;
    padding: 28px var(--rail-x);
  }

  .faq-question span:first-child {
    font-size: 16px
  }

  .faq-answer {
    padding-left: var(--rail-x);
    padding-right: var(--rail-x);
  }
}

/* === PROCESS === */
.section-process {
  background: #000;
  border-bottom: 1px solid var(--line)
}

.process-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  align-items: start;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.process-content {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.process-content .section-title {
  margin-bottom: var(--sp-24)
}

.process-intro {
  color: var(--ink-2);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  max-width: 576px;
  margin-bottom: var(--sp-48);
  padding: 48px 24px 0;
}

.process-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 0;
  background: #050505;
}

.process-status {
  grid-column: 1 / -1;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .01) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 18% 24%, rgba(255, 72, 26, .05) 0%, transparent 45%);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.process-status-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.process-status-dot {
  width: 6px;
  height: 6px;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  border-radius: 50%;
  animation: status-pulse 1.8s infinite ease-in-out;
}

@keyframes status-pulse {

  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

.process-status-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
}

.process-status-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 90px;
}

.process-status-vdivider {
  width: 1px;
  background: var(--line);
  flex-shrink: 0;
  align-self: stretch;
}

.process-status-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: var(--sp-24) 28px;
}

.process-status-label {
  font-family: var(--chakra);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-2);
}

.process-status-val {
  font-family: var(--chakra);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.process-thumbs-wrapper {
  display: none;
  margin-top: 0;
  grid-column: 1 / -1;
  height: 180px;
  width: 100%;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #080808;
  overflow: hidden;
  position: relative;
}

.process-thumbs-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Host div fills the thumbs container */
.process-thumbs-grid .thumbs-pixel-grid-host {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Override the base aetis-grid-frame aspect-ratio inside thumbs */
.process-thumbs-grid .thumbs-pixel-grid-host .aetis-grid-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  border: none !important;
  background: transparent !important;
}

/* SVG fills the frame */
.process-thumbs-grid .thumbs-pixel-grid-host .aetis-grid-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.terminal-line {
  white-space: nowrap;
  overflow: hidden;
}

.terminal-cursor {
  display: inline-block;
  width: 6px;
  height: 12px;
  background: currentColor;
  margin-left: 4px;
  animation: cursor-blink 1s steps(2) infinite;
}

@keyframes cursor-blink {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.process-step {
  padding: var(--sp-24);
  background: var(--bg);
  transition: background .3s ease;
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.process-step:hover {
  background: #0F0F0F
}

.process-step span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--red);
  display: block;
  margin-bottom: 10px
}

.process-step h3,
.process-step h4 {
  font-size: 18px;
  margin-bottom: 8px
}

.process-step p {
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ink-2)
}

.process-visual {
  position: sticky;
  top: 100px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.process-image {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  position: relative;
  overflow: hidden;
}

.process-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 59, 47, .1), transparent 60%)
}

.process-quote {
  padding: 28px;
  background: var(--bg)
}

.process-quote p {
  font-size: 22px;
  color: var(--ink);
  margin-bottom: var(--sp-16)
}

.quote-author {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--red)
}

@media(max-width:900px) {
  .process-row {
    display: flex;
    flex-direction: column;
  }

  .process-content {
    border-right: 0
  }

  .process-visual {
    position: static
  }

  .process-step:nth-child(2n) {
    border-right: 0
  }

  .process-status {
    border-right: 0
  }

  .process-status-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .process-intro {
    padding: var(--sp-32) var(--rail-x) 0;
    max-width: 528px
  }
}

@media(max-width:600px) {
  .process-list {
    grid-template-columns: 1fr
  }

  .process-step {
    border-right: 0
  }
}

@media (max-width: 768px) {
  .process-status-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-height: auto;
  }

  .process-status-vdivider {
    display: none;
  }

  .process-status-metric {
    padding: 20px var(--rail-x);
    border-bottom: 1px solid var(--line);
  }

  /* Right border on the left column */
  .process-status-metric:nth-child(1),
  .process-status-metric:nth-child(5) {
    border-right: 1px solid var(--line);
  }

  /* No bottom border on the bottom row (since parent container has a bottom border) */
  .process-status-metric:nth-child(5),
  .process-status-metric:nth-child(7) {
    border-bottom: none;
  }

  .process-step {
    padding: var(--sp-24) var(--rail-x);
  }

  .process-quote {
    padding: 28px var(--rail-x);
  }
}

/* === TEAM === */
.section-team {
  background: #000;
  border-bottom: 1px solid var(--line)
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.team-card:nth-child(4n) {
  border-right: 0
}

.team-card {
  background: var(--bg);
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease;
}

.team-card:hover {
  background: #0F0F0F
}

.team-image {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  position: relative;
  overflow: hidden
}

.team-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 50%, rgba(0, 0, 0, .4) 100%)
}

.team-info {
  padding: 20px;
  border-top: 1px solid var(--line)
}

.team-info h3 {
  font-size: var(--type-card);
  line-height: var(--lh-card);
  margin-bottom: 4px
}

.team-info p {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--red);
  margin-bottom: 12px
}

.team-role {
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

@media(max-width:900px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .team-card:nth-child(2n) {
    border-right: 0
  }
}

@media(max-width:540px) {
  .team-grid {
    grid-template-columns: 1fr
  }

  .team-card {
    border-right: 0
  }

  .team-info {
    padding: 20px var(--rail-x);
  }
}

/* === READY === */
.section-ready {
  background: #000;
  border-bottom: 1px solid var(--line)
}

.section-cta [data-ready-grid] {
  position: relative;
  min-height: 214px;
  border-top: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  margin-top: 64px;
  margin-bottom: 64px;
}

.ready-grid-host {
  position: absolute;
  inset: 0
}

@media(max-width:768px) {
  .section-cta [data-ready-grid] {
    min-height: 160px;
    margin-top: 48px;
    margin-bottom: 48px;
  }
}

/* === CTA — closing split card === */
.section-cta {
  position: relative;
  background: #000;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.section-cta>.container {
  padding-top: 0;
  padding-bottom: 0
}

.cta-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(420px, 52vh, 560px);
  border-left: 0;
  border-top: 1px solid var(--line);
}

.cta-card:last-child {
  border-right: 0
}

.cta-card {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cta-card--copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 56px);
}

.cta-eyebrow {
  display: none !important;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--red);
  margin-bottom: var(--sp-24);
}

.cta-sub {
  color: var(--ink-2);
  font-size: var(--type-body-l);
  line-height: var(--lh-body-l);
  max-width: 38ch;
  margin: 0 0 32px;
}

.cta-card--visual {
  min-height: 100%;
  background: #000000;
  overflow: hidden;
}

.cta-visual-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255, 72, 26, .22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 30% 70%, rgba(255, 59, 47, .12) 0%, transparent 55%);
}

.cta-pixel-grid-host,
.cta-card--visual [data-cta-grid] {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.aetis-grid-frame--cta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border: none;
  background: transparent;
}

.aetis-grid-frame--cta .aetis-grid-vignette {
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 20%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, transparent 28%, transparent 72%, rgba(0, 0, 0, .25) 100%);
}

.aetis-grid-frame--cta .aetis-grid-scanlines {
  opacity: .28
}

.aetis-grid-frame--problem {
  position: relative;
  width: 100%;
  aspect-ratio: 1.6/1;
  border-bottom: 1px solid var(--line);
  background: #020202;
  overflow: hidden;
}

.aetis-grid-frame--problem .aetis-grid-vignette {
  background:
    radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.3));
}

.aetis-grid-frame--problem .aetis-grid-scanlines {
  opacity: .28
}

.aetis-grid-frame--ready {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border: none;
  background: #020202;
}

.aetis-grid-frame--ready .aetis-grid-vignette {
  background:
    radial-gradient(ellipse 68% 44% at 50% 50%, rgba(255, 72, 26, .1) 0%, transparent 58%),
    linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, .5) 100%);
}

.aetis-grid-frame--ready .aetis-grid-scanlines {
  opacity: .22
}

@media(max-width:900px) {
  .cta-split {
    grid-template-columns: 1fr;
    min-height: unset
  }

  .cta-card {
    border-right: 0
  }

  .cta-card--visual {
    min-height: clamp(280px, 45vw, 380px)
  }

  .cta-card--copy {
    padding: 48px var(--rail-x);
  }
}

/* === FOOTER === */
.footer {
  background: #000;
  padding: 0
}

.footer-content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.footer-content>div:last-child {
  border-right: 0
}

.footer-brand,
.footer-col {
  padding: 48px 32px;
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.footer-brand .logo {
  margin-bottom: 20px
}

.footer-brand p {
  font-size: 14px;
  color: var(--ink-2)
}

.footer-col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-3);
  margin-bottom: 20px
}

.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 10px;
  transition: color .2s
}

.footer-col a:hover {
  color: var(--red)
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-3);
  padding: 20px 32px;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

@media(max-width:900px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr)
  }

  .footer-content>div:nth-child(2n) {
    border-right: 0
  }

  .footer-brand,
  .footer-col {
    padding: var(--sp-32) var(--rail-x);
  }
}

@media(max-width:540px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-brand {
    grid-column: span 2;
    border-right: 0 !important;
  }

  /* Company (2nd) is on the left, restore its right border */
  .footer-content>div:nth-child(2) {
    border-right: 1px solid var(--line) !important;
  }

  /* Connect (3rd) is on the right */
  .footer-content>div:nth-child(3) {
    border-right: 0 !important;
  }

  /* Location (4th) takes full width */
  .footer-content>div:nth-child(4) {
    grid-column: span 2;
    border-right: 0 !important;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding: 20px var(--rail-x);
  }
}

/* === MOTION SYSTEM ===
   Generic fadeUp removed. All scroll animations are now
   driven by construct.js using structural clip-path reveals
   and mechanical timing — not opacity/translateY fades.
   ====================================================== */

/* Global responsive subheading/body copy overrides */
@media (max-width: 1024px) {

  .aetis-section-sub,
  .service-card p,
  .problem-text p,
  .hero-industrial-copy p,
  .process-intro,
  .process-step p,
  .team-role,
  .cta-sub,
  .faq-answer p,
  .feature-content p,
  .case-section-content,
  .fallback-msg {
    font-size: var(--type-body);
  }
}

@media (max-width: 540px) {

  .aetis-section-sub,
  .service-card p,
  .problem-text p,
  .hero-industrial-copy p,
  .process-intro,
  .process-step p,
  .team-role,
  .cta-sub,
  .faq-answer p,
  .feature-content p,
  .case-section-content,
  .fallback-msg {
    font-size: var(--type-body);
  }
}

/* =======================================================================
   INDUSTRIAL CONSTRUCTION STATE SYSTEM
   -----------------------------------------------------------------------
   Sections move through three states:
     (default)        — pre-construction, content invisible
     .is-constructing — actively being assembled, mid-sequence
     .is-constructed  — fully built, all content interactive

   All pre-construction hiding uses clip-path, not display:none,
   so layout is preserved and dimensions are stable before reveal.
   ======================================================================= */

/* ── CONSTRUCTION STAGE CLASSES ─────────────────────────────────────────
   CSS-driven transitions for border lines and structural elements.
   JS adds these classes in sequence during activateSection().
*/

/* Grid active: section background pattern becomes visible */
.section.grid-active,
.footer.grid-active {
  background-size: var(--grid-density) var(--grid-density);
  transition: background-size var(--dur-draw) var(--ease-linear);
}

/* Lines active: CSS border pseudo-elements draw themselves */
.section.lines-active::before,
.section.lines-active::after,
.footer.lines-active::before,
.footer.lines-active::after {
  transform: scaleY(1);
}

/* ── SECTION STRUCTURAL BORDERS ─────────────────────────────────────────
   The ::before / ::after corner nodes on sections gain their
   transition behavior so they animate when .lines-active is added.
*/
.hero::before,
.hero::after,
.section::before,
.section::after,
.footer::before,
.footer::after {
  transition: transform var(--dur-draw) var(--ease-linear),
    opacity var(--dur-snap) var(--ease-linear);
}

/* ── PARALLAX DEPTH LAYERS ───────────────────────────────────────────────
   Elements with data-depth attributes participate in the mechanical
   5-layer parallax system. will-change is declared here; JS does the math.
*/
[data-depth="1"] {
  will-change: transform;
}

[data-depth="2"] {
  will-change: transform;
}

[data-depth="3"] {
  will-change: transform;
}

[data-depth="4"] {
  will-change: transform;
}

[data-depth="5"] {
  will-change: transform;
}

/* ── GRID DENSITY BACKGROUND ─────────────────────────────────────────────
   Sections carry a faint grid background that evolves in density.
   JS sets --grid-density per section as they activate.
   The dot grid is purely decorative infrastructure texture.
*/
.section,
.hero {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: var(--grid-density) var(--grid-density);
  background-position: var(--rail-x) 0;
}

/* ── CONSTRUCTION COMPLETE STATE ─────────────────────────────────────────
   Once .is-constructed is applied, all elements within the section
   should be fully visible. These rules act as the final fallback
   to guarantee nothing stays hidden after construction completes.
   The WAAPI animations use fill:forwards so they persist,
   but this CSS catch ensures no element is ever permanently hidden.
*/
.is-constructed .problem-card,
.is-constructed .service-card,
.is-constructed .team-card,
.is-constructed .work-row,
.is-constructed .faq-item,
.is-constructed .process-step,
.is-constructed .process-intro,
.is-constructed .process-visual,
.is-constructed .feature-row,
.is-constructed .counter-item,
.is-constructed .mission-tickers,
.is-constructed .cta-card--copy,
.is-constructed .cta-card--visual,
.is-constructed .footer-content,
.is-constructed .section-tag,
.is-constructed .statement-tag,
.is-constructed .aetis-section-eyebrow,
.is-constructed [data-section-header],
.is-constructed h2,
.is-constructed h3 {
  clip-path: inset(0) !important;
  opacity: 1 !important;
}

/* ── HERO CONSTRUCTION ───────────────────────────────────────────────────
   Hero content starts hidden; construct.js reveals it in sequence
   on page load. The hero has no IntersectionObserver — it activates
   immediately as the first thing the user sees.
*/
.hero .hero-utility-bar,
.hero .hero-logo-wrap,
.hero .hero-industrial-title,
.hero .hero-industrial-copy,
.hero .hero-industrial-ctas {
  /* Defaults are visible so no-JS users still see content.
     construct.js overrides these inline at init. */
}

/* ── CONSTRUCTION INDICATOR ──────────────────────────────────────────────
   A subtle blinking cursor dot that appears at the active construction
   boundary. Pure CSS, no JS. Disappears when section is fully constructed.
*/
.section.is-constructing::after {
  box-shadow:
    0 0 0 1px var(--node-color),
    0 0 8px 2px rgba(255, 72, 26, 0.5);
  animation: construct-pulse var(--dur-reveal) ease-out forwards;
}

.section.is-constructed::after {
  animation: none;
  box-shadow: 0 0 4px var(--node-glow);
}

@keyframes construct-pulse {
  0% {
    box-shadow: 0 0 0 1px var(--node-color), 0 0 12px 4px rgba(255, 72, 26, 0.6);
  }

  100% {
    box-shadow: 0 0 0 1px var(--node-color), 0 0 4px var(--node-glow);
  }
}

/* ── REDUCED MOTION OVERRIDE ────────────────────────────────────────────
   Honor prefers-reduced-motion. Elements appear in their final
   constructed state immediately.
*/
@media (prefers-reduced-motion: reduce) {

  .section,
  .hero,
  .footer {
    transition: none !important;
    animation: none !important;
  }

  .section *,
  .hero *,
  .footer * {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ===========================================================
   SEO EDITORIAL SECTION
   Keyword-rich prose block — looks native to the design system,
   serves crawlers with semantic H2/H3 hierarchy + keyword density.
   =========================================================== */
.section-seo-editorial {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.seo-editorial-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--section-gap);
  padding: var(--section-pad-top) 0 var(--section-pad-y) 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding-left: 64px;
  padding-right: 64px;
}

.seo-editorial-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}

.seo-eyebrow {
  display: none !important;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--red);
  text-transform: uppercase;
}

.seo-headline {
  font-family: var(--chakra);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  max-width: 22ch;
}

.seo-editorial-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 900px;
}

.seo-editorial-body h3 {
  font-family: var(--chakra);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: -20px;
}

.seo-editorial-body p {
  font-family: var(--chakra);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.75;
  color: var(--ink-2);
}

.seo-editorial-body p strong {
  color: var(--ink);
  font-weight: 600;
}

.seo-editorial-body p em {
  font-style: italic;
  color: var(--ink);
}

/* Keyword tag cloud */
.seo-keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.seo-keyword-tags span {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: border-color 0.2s, color 0.2s;
}

.seo-keyword-tags span:hover {
  border-color: var(--red);
  color: var(--ink-2);
}

/* Responsive */
@media (max-width: 768px) {
  .seo-editorial-inner {
    padding-left: 32px;
    padding-right: 32px;
  }

  .seo-headline {
    font-size: clamp(22px, 6vw, 36px);
  }
}

@media (max-width: 540px) {
  .seo-editorial-inner {
    padding-left: var(--rail-x);
    padding-right: var(--rail-x);
  }
}

/* --- Hero bottom light glow overlay --- */
.hero-bottom-light-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(to top, rgba(255, 72, 26, 0.25) 0%, rgba(255, 72, 26, 0.06) 70%, transparent 100%);
  mix-blend-mode: screen;
}

/* --- Booking Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-construct);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 1000px;
  background: #000;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(40px);
  clip-path: inset(100% 0 0 0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.is-open .modal-content {
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}

.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s var(--ease-linear), color 0.2s var(--ease-linear);
}

.modal-close-btn:hover {
  background: var(--brand);
  color: #fff;
}