/* Space horizon with moving foreground CRT scanlines and film grain. */
:root {
  color-scheme: dark;
  --background: #00050a;
  --ink: #d6eaff;
  --accent: #fe5e0e;
  --title-weight: 600;
}
* { box-sizing: border-box; }
/* Section titles share the navigation weight; the OGMA wordmark retains its own face. */
h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: var(--title-weight);
  font-synthesis: weight;
}
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--background);
}
.canvas {
  min-height: 100svh;
  background-color: transparent;
}
.canvas--home {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 80px 4.2328vw;
}
.hero-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-family: "Sparling", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0;
  font-size: clamp(32px, 7.4074vw, 160px);
  font-weight: 500;
  font-synthesis: none;
  line-height: 1.089286;
  letter-spacing: normal;
  text-align: center;
}

/* Original Ghost backdrop; lower horizon keeps the centered title in the dark sky. */
.space-backdrop {
  position: fixed;
  inset: 0 0 -12svh;
  z-index: 0;
  pointer-events: none;
  background: url("assets/space-backdrop.webp") center / cover no-repeat;
}
/* Foreground screen texture stays above OGMA and the navbar without blocking links. */
.screen-effects {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
}
.screen-effects::before,
.screen-effects::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.75;
}
/* Drift and sweep use the reference hero's periods, spacing and blue-white ink. */
.screen-effects::before {
  bottom: -4px;
  background: repeating-linear-gradient(to bottom,
    rgba(210, 237, 255, 0.02) 0px,
    rgba(210, 237, 255, 0.02) 1px,
    transparent 1px, transparent 4px);
  animation: tv-line-drift 1.5s linear infinite;
}
.screen-effects::after {
  background: repeating-linear-gradient(to bottom,
    rgba(210, 237, 255, 0.18) 0px,
    rgba(210, 237, 255, 0.18) 1px,
    transparent 1px, transparent 4px);
  mask-image: linear-gradient(to bottom, transparent 34%, black 50%, transparent 66%);
  animation: tv-line-sweep 10s linear -2.5s infinite;
}
@keyframes tv-line-drift {
  to { transform: translateY(-4px); }
}
@keyframes tv-line-sweep {
  from { transform: translateY(100%); }
  to { transform: translateY(-100%); }
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  12.5% { transform: translate(-5px, 3px); }
  25% { transform: translate(4px, -7px); }
  37.5% { transform: translate(-8px, -2px); }
  50% { transform: translate(6px, 5px); }
  62.5% { transform: translate(-3px, 8px); }
  75% { transform: translate(7px, -4px); }
  87.5% { transform: translate(-6px, 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .screen-effects::before,
  .screen-effects::after { animation: none; }
  .screen-effects::after { display: none; }
}

@font-face {
  font-family: "Sparling";
  src: url("/assets/fonts/sparling-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sparling";
  src: url("/assets/fonts/sparling-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sparling";
  src: url("/assets/fonts/sparling-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
.navbar {
  position: fixed;
  inset: 0 0 auto;
  height: 64px;
  display: grid;
  place-items: center;
  z-index: 1000;
  background: transparent;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.wordmark {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
/* Both words use exactly the same local font, weight, size and spacing. */
.wordmark,
.tagline-text.is-future {
  font-family: "Sparling", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: normal;
}
.wordmark:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}
@media (max-width: 600px) {
  .navbar { height: 64px; }
}

@font-face {
  font-family: "Helvetica Now Display";
  src: local("Helvetica Now Display Regular"),
       local("HelveticaNowDisplay-Regular"),
       local("Helvetica Now Display");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: local("Helvetica Now Display Medium"),
       local("HelveticaNowDisplay-Medium");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
.navbar nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 0 28px;
}
.wordmark {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}
.nav-links {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: var(--title-weight);
  font-synthesis: weight;
  text-transform: uppercase;
  line-height: 1;
}
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 8px;
  color: var(--ink);
  text-decoration: none;
}
.wordmark,
.nav-links a,
.nav-try {
  transition: opacity 180ms ease, color 180ms ease;
}
@media (hover: hover) {
  .wordmark:hover,
  .nav-links a:hover,
  .nav-try:hover {
    opacity: 0.75;
  }
}
.nav-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0.9em;
  background-color: var(--accent);
  transform: translate(0, -50%) scaleY(0.15);
  opacity: 0;
  transition: opacity 160ms ease, transform 260ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
.nav-links a:active,
.nav-links a[aria-current="page"] {
  color: var(--accent);
}
.nav-links a:active::before,
.nav-links a[aria-current="page"]::before {
  opacity: 1;
  transform: translate(0, -50%) scaleY(1);
}
.nav-links a[aria-current="page"]::before {
  animation: nav-marker-enter 280ms cubic-bezier(0.2, 0.65, 0.3, 1) both;
}
@keyframes nav-marker-enter {
  from {
    opacity: 0;
    transform: translate(-3px, -50%) scaleY(0.15);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%) scaleY(1);
  }
}
.nav-links a:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
/* Text-only CTA shares the navigation type and the hero's seven-second breathing cycle. */
.nav-try {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  appearance: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: var(--title-weight);
  font-synthesis: weight;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-try:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
@media (max-width: 600px) {
  .navbar nav { padding: 0 18px; }
  .nav-links { gap: 14px; font-size: 10px; }
  .nav-try { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark,
  .nav-try,
  .nav-links a,
  .nav-links a::before,
  .nav-links a[aria-current="page"]::before {
    transition: none;
    animation: none;
  }
}

/* CORE reference: two overlapping ink/halo layers breathe together every seven seconds. */
.hero-letter {
  display: grid;
  position: relative;
  --halo-rest: 0.018em;
  --halo-peak: 0.045em;
  --ink-peak: 0.006em;
  --type-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0 0 0 -0.15'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23d)'/%3E%3C/svg%3E");
}
.hero-halo,
.hero-ink {
  grid-area: 1 / 1;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}
.hero-halo {
  color: transparent;
  background-image: var(--type-grain),
    linear-gradient(180deg,
      rgb(220, 236, 232) 6.6482%, rgb(158, 240, 255) 15.983%,
      rgb(0, 141, 238) 29.537%, rgb(1, 121, 233) 53.324%,
      rgb(189, 238, 243) 65.078%, rgb(255, 83, 0) 76.831%,
      rgb(107, 36, 0) 100%),
    linear-gradient(#d6eaff, #d6eaff);
  background-size: 100px 100px, 100% 100%, 100% 100%;
  mix-blend-mode: plus-lighter;
  opacity: 0.3;
  filter: blur(var(--halo-rest)) brightness(1);
  animation: ogma-halo-breathe 7s ease-in-out infinite;
}
.hero-ink {
  background-image: var(--type-grain), linear-gradient(var(--signal-color, #d6eaff), var(--signal-color, #d6eaff));
  background-size: 100px 100px, 100% 100%;
  color: var(--signal-color, #d6eaff);
  text-shadow: var(--signal-shadow-rest, 0 0 0.025em rgba(158, 240, 255, 0.18));
  animation: ogma-ink-breathe 7s ease-in-out infinite;
}
@keyframes ogma-halo-breathe {
  0%, 10%, 100% {
    filter: blur(var(--halo-rest)) brightness(1);
    opacity: 0.3;
    transform: translateX(0) scale(1);
  }
  55% {
    filter: blur(var(--halo-peak)) brightness(1.35);
    opacity: 0.72;
    transform: translateX(0.012em) scale(1.025);
  }
}
@keyframes ogma-ink-breathe {
  0%, 10%, 100% {
    filter: blur(0);
    opacity: 1;
    color: var(--signal-color, #d6eaff);
    text-shadow: var(--signal-shadow-rest, 0 0 0.025em rgba(158, 240, 255, 0.18)),
                 0 0 0 rgba(255, 83, 0, 0);
  }
  55% {
    filter: blur(var(--ink-peak));
    opacity: 0.82;
    color: var(--signal-transparent, rgba(214, 234, 255, 0));
    text-shadow: var(--signal-shadow-peak,
      0.012em -0.006em 0.03em rgba(158, 240, 255, 0.50),
      -0.012em 0.009em 0.018em rgba(255, 83, 0, 0.28));
  }
}
@media (max-width: 767px) {
  .hero-letter {
    --halo-rest: 0.008em;
    --halo-peak: 0.022em;
    --ink-peak: 0em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-halo, .hero-ink { animation: none; }
}

/* Slightly broader glow keeps the orange breathing visible at navigation text size. */
.nav-try .hero-letter {
  --signal-color: var(--accent);
  --signal-transparent: rgba(254, 94, 14, 0);
  --signal-shadow-rest: 0 0 0.12em rgba(254, 94, 14, 0.32);
  --signal-shadow-peak: 0.012em -0.006em 0.20em rgba(255, 160, 65, 0.65),
                        -0.012em 0.009em 0.32em rgba(254, 94, 14, 0.60);
  --halo-rest: 0.055em;
  --halo-peak: 0.22em;
  --ink-peak: 0.006em;
}
.nav-try .hero-halo {
  background-image: var(--type-grain),
    linear-gradient(180deg, #ffbf80 6.6482%, #ff9e48 15.983%,
      #fe5e0e 29.537%, #ff5300 53.324%, #ffa566 65.078%,
      #fe5e0e 76.831%, #6b2400 100%),
    linear-gradient(var(--accent), var(--accent));
}

/* Black introductory copy rests on the bright planet surface below the title. */
.hero-intro {
  position: absolute;
  z-index: 1;
  top: 74svh;
  inset-inline: 4.2328vw;
  color: #000000;
  text-align: center;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-synthesis: weight;
}
.hero-welcome {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.575vw, 24px);
  line-height: 1.4;
}
.hero-tagline {
  margin: 0;
  min-height: 1.4em;
  font-size: 27px;
  line-height: 1.4;
}
.tagline-visual {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1;
  transform: scale(1.5);
  transform-origin: center;
}
.tagline-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  flex: 0 0 2px;
  background: currentColor;
  animation: tagline-caret-blink 1.1s steps(1, end) infinite;
}
@keyframes tagline-caret-blink {
  0%, 45%, 100% { opacity: 1; }
  46%, 99% { opacity: 0; }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 600px) {
  .tagline-visual { transform: scale(1.2); }
}
@media (max-width: 360px) {
  .tagline-visual { transform: scale(1.05); }
}
@media (max-height: 420px) {
  .hero-intro { top: 76svh; }
  .hero-welcome { margin-bottom: 4px; }
  .hero-tagline { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tagline-caret { animation: none; }
}

/* The opening screen's CRT layers scroll away with it. */
.canvas--home .space-backdrop,
.canvas--home .screen-effects {
  position: absolute;
}
/* Ghost's second-section paper: #e2e0df, original tile and 30% color wash. */
.paper-section {
  position: relative;
  min-height: 100svh;
  color: #00050a;
  background-color: #e2e0df;
}

/* Left-hand introduction, with Ghost's subdued copy color and square CTA. */
.paper-section {
  display: grid;
  grid-template-columns: minmax(0, 0.4545fr) minmax(0, 0.5455fr);
  gap: 5.0556vw;
  align-items: center;
  padding: 104px 6.0668vw 132px;
}
.paper-copy {
  grid-column: 1;
  max-width: 540px;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}
.paper-copy h2 {
  margin: 0;
  color: #000000;
  font-family: inherit;
  font-size: clamp(42px, 4.55vw, 72px);
  font-weight: var(--title-weight);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.paper-copy p {
  margin: 28px 0 0;
  color: rgba(0, 5, 10, 0.75);
  font-size: clamp(18px, 1.4661vw, 22px);
  line-height: 1.45;
}
.paper-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  padding: 9px 20px;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(16px, 1.455vw, 22px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 180ms ease;
}
.paper-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (hover: hover) {
  .paper-cta:hover { opacity: 0.82; }
}
@media (max-width: 767px) {
  .paper-section { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 72px 24px 88px; }
  .paper-copy { max-width: 480px; }
  .paper-copy h2 { font-size: clamp(42px, 8vw, 58px); }
  .paper-copy p { font-size: 18px; }
  .paper-cta { font-size: 16px; padding: 8px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-cta { transition: none; }
}

/* Quiet surface particles fill the right-hand column over the paper texture. */
.machine-cloud {
  grid-column: 2;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 340px;
  aspect-ratio: 1.05;
  margin: 0;
  pointer-events: none;
}
.machine-cloud canvas,
.machine-static {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.12);
  transform-origin: center;
}
.machine-cloud.is-ready .machine-static { display: none; }
@media (max-width: 767px) {
  .machine-cloud {
    grid-column: 1;
    min-height: 300px;
    aspect-ratio: 1.15;
    margin-top: 42px;
  }
  .machine-cloud canvas, .machine-static { transform: scale(1.06); }
}

/* Cloud SaaS and a scroll-driven day-to-night on-premises scene. */
.sky-section, .office-stage, .sectors-stage, .closing-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #00050a;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.sky-section {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 100px 24px;
  background: #0775b6;
}
.sky-backdrop {
  position: absolute;
  inset: -12px;
  background: url("assets/sky-backdrop.webp") center / cover no-repeat;
  filter: blur(6px) brightness(.78);
  pointer-events: none;
}
.sky-copy-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 66% at 50% 50%, rgba(0,22,42,.34), rgba(0,22,42,.18) 60%, rgba(0,22,42,.08) 100%);
  pointer-events: none;
}
.offer-copy {
  position: relative;
  z-index: 3;
  width: min(100%, 820px);
  text-align: center;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}
.offer-copy .offer-label {
  margin: 0 0 20px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .10em;
}
.offer-copy h2 {
  margin: 0;
  font-family: inherit;
  font-size: clamp(42px, 4.55vw, 72px);
  font-weight: var(--title-weight);
  letter-spacing: -.035em;
  line-height: 1.02;
}
.offer-copy .offer-description {
  max-width: 670px;
  margin: 28px auto 0;
  font-family: inherit;
  font-size: clamp(18px, 1.4661vw, 22px);
  font-weight: 400;
  line-height: 1.45;
}
.saas-copy {
  color: #ffffff;
  animation: cloud-title-float 8s ease-in-out infinite;
  animation-play-state: paused;
}
.saas-copy .offer-description {
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0,22,42,.22), 0 0 10px rgba(255,255,255,.14);
}
.saas-copy .offer-label, .saas-copy h2 {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(255,255,255,.30), 0 0 32px rgba(255,255,255,.12), 0 2px 12px rgba(0,22,42,.18);
}
.sky-section.is-grain-active .saas-copy { animation-play-state: running; }
@keyframes cloud-title-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .saas-copy { animation: none; }
}
.office-section { position: relative; height: 280svh; background: #1b2c43; }
.office-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: max(78px, 12svh) 24px 110px;
  color: #fff;
  --office-night: 0;
}
.office-backdrop, .office-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; }
.office-backdrop { pointer-events: none; }
.office-backdrop img { display: block; object-fit: cover; object-position: center; }
.office-night { opacity: var(--office-night); }
.office-copy-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(1,8,18,.53), rgba(1,8,18,.38) 43%, rgba(1,8,18,.08) 70%, rgba(1,8,18,.30));
  pointer-events: none;
}
.office-copy { max-width: 780px; }
.office-copy .offer-description { color: rgba(255,255,255,.94); }
.office-day-night { white-space: nowrap; }
.office-night-typing {
  position: relative;
  display: inline-grid;
  vertical-align: baseline;
  color: #fe5e0e;
  font-family: "Sparling", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: normal;
  --night-type-scale: 1.111111;
}
/* Reserve the complete phrase so typing never moves the surrounding copy. */
.office-night-reserve { visibility: hidden; padding-right: 6px; }
.office-night-visual {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%) scale(var(--night-type-scale));
  transform-origin: left center;
}
.office-night-caret {
  display: inline-block;
  width: 2px;
  height: .95em;
  flex: 0 0 2px;
  background: currentColor;
  animation: tagline-caret-blink 1.1s steps(1,end) infinite;
  animation-play-state: paused;
}
.office-stage.is-grain-active .office-night-caret { animation-play-state: running; }
@media (max-width: 767px) {
  .sky-section { padding: 88px 24px; }
  .sky-backdrop { background-position: 54% center; }
  .sky-copy-light { background: radial-gradient(ellipse 110% 65% at 50% 50%, rgba(0,22,42,.38), rgba(0,22,42,.22) 60%, rgba(0,22,42,.08) 100%); }
  .offer-copy h2 { font-size: clamp(38px, 8vw, 58px); }
  .offer-copy .offer-description { font-size: 18px; margin-top: 24px; }
  .office-night-typing { font-size: 18px; --night-type-scale: 1; }
  .office-stage { padding-top: max(74px, 10svh); }
  .office-backdrop img { object-position: 45% center; }
}
@media (max-height: 600px) and (min-width: 768px) {
  .office-stage { padding-top: 48px; }
  .office-copy h2 { font-size: 42px; }
  .office-copy .offer-description { margin-top: 18px; font-size: 18px; }
  .office-night-typing { font-size: 18px; --night-type-scale: 1; }
  .office-copy .offer-label { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .office-section { height: 100svh; }
  .office-stage { position: relative; }
  .office-night-caret { animation: none; }
}

/* Three fields of connected machines, on a wide grid with foreground film grain. */
.sectors-section { position: relative; background: #e2e0df; }
.sectors-stage { background: #e2e0df; }
.sectors-grid {
  --sector-grid-cell: min(12.5vw, calc((100svh - 64px) * .23625));
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(0,5,10,.10) 1px, transparent 1px), linear-gradient(rgba(0,5,10,.10) 1px, transparent 1px);
  background-size: var(--sector-grid-cell) var(--sector-grid-cell);
  background-position: calc(50% + var(--sector-grid-cell) / 2) center;
  mask-image: linear-gradient(transparent, #000 64px calc(100% - 64px), transparent);
  pointer-events: none;
}
/* The screenshot's composition: top tabs, a stable center and scattered devices. */
.sector-scene {
  position: relative;
  z-index: 3;
  height: 100svh;
  min-height: 600px;
  text-align: center;
  --sector-opacity: 1;
}
.sector-center {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  color: #fe5e0e;
  font-family: "Sparling", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(48px, 5.2vw, 88px);
  font-weight: 500;
  font-synthesis: none;
  letter-spacing: .04em;
  line-height: 1;
}
.sector-center .hero-letter {
  --signal-color: #fe5e0e;
  --signal-transparent: rgba(254,94,14,0);
  --signal-shadow-rest: 0 0 .04em rgba(254,94,14,.25);
  --signal-shadow-peak: .012em -.006em .16em rgba(254,94,14,.65), -.012em .009em .09em rgba(255,160,65,.55);
  --halo-rest: .03em;
  --halo-peak: .14em;
  --ink-peak: .008em;
}
.sector-center .hero-halo {
  background-image: var(--type-grain), linear-gradient(#ff9e48, #fe5e0e 50%, #d84200);
  background-size: 100px 100px, 100% 100%;
  mix-blend-mode: multiply;
}
.equipment-filter-defs { position: absolute; pointer-events: none; }
.sector-map { position: absolute; inset: 0; }
.sector-object {
  position: absolute;
  width: clamp(100px, 10vw, 168px);
  margin: 0;
  transform: translate(-50%, -50%);
}
.equipment-sprite {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-image: var(--equipment-sheet);
  background-size: 300% 100%;
  background-position: var(--equipment-position) center;
  background-repeat: no-repeat;
  filter: url(#machine-orange-outline);
}
.sector-object figcaption {
  color: #00050a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}
.sector-object figcaption::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  margin: 12px auto 10px;
  border: 1px solid rgba(0,5,10,.65);
}
.sector-object--1 { left: 12.2%; top: 34%; }
.sector-object--2 { left: 28.2%; top: 47%; }
.sector-object--3 { left: 17%; top: 70%; }
.sector-object--4 { left: 66.5%; top: 35%; }
.sector-object--5 { left: 86%; top: 53%; }
.sector-object--6 { left: 70.5%; top: 69%; }
.sector-description {
  position: absolute;
  bottom: max(24px, 5svh);
  inset-inline: 24px;
  margin: 0 auto;
  max-width: 760px;
  font-size: clamp(16px, min(1.455vw, calc((100svh - 64px) * .0275)), 22px);
  font-weight: var(--title-weight);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.sector-navigation { display: none; }
.has-sector-scroll { height: 360svh; }
.has-sector-scroll .sectors-stage { position: sticky; top: 0; height: 100svh; }
.has-sector-scroll .sector-scene {
  position: absolute;
  inset: 0;
  min-height: 0;
  opacity: var(--sector-opacity);
  transform: translateY(calc((1 - var(--sector-opacity)) * 20px));
  filter: blur(calc((1 - var(--sector-opacity)) * 5px));
  pointer-events: none;
}
.has-sector-scroll .sector-navigation {
  position: absolute;
  z-index: 3;
  top: max(68px, 5svh);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  background: rgba(254,94,14,.06);
}
.sector-navigation button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: clamp(96px, 8vw, 130px);
  border: 0;
  padding: 10px 14px;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(254,94,14,.65);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}
.sector-navigation button::before { content: ''; width: 6px; height: 6px; background: currentColor; visibility: hidden; }
.sector-navigation button[aria-pressed="true"] { color: #ffffff; background: #fe5e0e; }
.sector-navigation button[aria-pressed="true"]::before { visibility: visible; }
.sector-navigation button:focus-visible { outline: 2px solid #fe5e0e; outline-offset: 4px; }
@media (hover: hover) { .sector-navigation button:hover { opacity: .75; } }
@media (max-width: 767px) {
  .sector-center { font-size: clamp(28px, 7vw, 52px); }
  .sector-object { width: clamp(70px, 19vw, 105px); }
  .sector-object figcaption { font-size: 9px; }
  .sector-object figcaption::before { width: 7px; height: 7px; margin: 8px auto; }
  .sector-object--1, .sector-object--2, .sector-object--3 { left: 16%; }
  .sector-object--4, .sector-object--5, .sector-object--6 { left: 84%; }
  .sector-object--1, .sector-object--4 { top: 31%; }
  .sector-object--2, .sector-object--5 { top: 49%; }
  .sector-object--3, .sector-object--6 { top: 68%; }
  .sector-description { bottom: max(24px, 3.5svh); inset-inline: 20px; font-size: 16px; }
  .sector-navigation button { min-width: 0; gap: 6px; padding: 10px 8px; font-size: 10px; }
  .has-sector-scroll .sector-navigation { width: min(290px, calc(100% - 32px)); }
}
@media (max-height: 500px) {
  .sector-object { width: 64px; }
  .sector-object figcaption { font-size: 8px; }
  .sector-object figcaption::before { width: 6px; height: 6px; margin: 4px auto; }
  .sector-object--1 { left: 12.2%; top: 36%; }
  .sector-object--2 { left: 28.2%; top: 52%; }
  .sector-object--3 { left: 17%; top: 71%; }
  .sector-object--4 { left: 66.5%; top: 36%; }
  .sector-object--5 { left: 86%; top: 53%; }
  .sector-object--6 { left: 70.5%; top: 71%; }
  .sector-center { font-size: 40px; }
  .sector-description { bottom: 12px; font-size: 16px; }
  .has-sector-scroll .sector-navigation { top: 66px; }
  .sector-navigation button { padding-block: 8px; }
}

/* Closing wordmark over the reference's rising multicolored horizon. */
.closing-section { position: relative; background: #00050a; }
.closing-stage {
  min-height: 100svh;
  background: #00050a;
  color: #fff;
  --closing-glow: .75;
  --closing-word-size: clamp(32px, 7.4074vw, 160px);
}
.has-closing-scroll { height: 180svh; }
.has-closing-scroll .closing-stage { position: sticky; top: 0; height: 100svh; }
.closing-glow {
  position: absolute;
  inset: 0 -1.71957672% -1.375%;
  opacity: var(--closing-glow);
  background: linear-gradient(180deg, rgba(0,5,10,.5) 52.247%, #00050a 64.836%, #0076f4 77.424%, #6c93a5 85.768%, #df7000 91.894%, #ff4000 100%);
  filter: blur(26px);
  transform-origin: bottom;
  transform: scaleY(calc(.2 + var(--closing-glow) * .8));
  pointer-events: none;
}
.closing-stage h2 {
  position: absolute;
  z-index: 3;
  top: max(80px, 8svh);
  inset-inline: 20px;
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 2.116vw, 34px);
  font-weight: var(--title-weight);
  line-height: 1.25;
  letter-spacing: -.04em;
}
.closing-wordmark {
  position: absolute;
  z-index: 3;
  top: 49%;
  inset-inline: 4.2328vw;
  width: calc(100% - 8.4656vw);
  font-size: var(--closing-word-size);
  transform: translateY(-50%);
}
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 47.619vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.17vw 4.2328vw 24px;
  background: #c4c8cb url("assets/footer-metal-plate.webp") center top / cover no-repeat;
  color: #00050a;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.footer-links {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
  font-size: clamp(11px, 1.058vw, 16px);
  font-weight: 500;
  line-height: 1.5;
}
.footer-links a { color: rgba(0,5,10,.60); text-decoration: none; transition: opacity 180ms ease; }
.footer-links a:hover { opacity: .6; }
.footer-links a:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.footer-wordmark {
  position: relative;
  display: grid;
  margin: 5.8vw 0 16px;
  text-decoration: none;
  font-family: "Sparling", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17vw;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -.015em;
  line-height: .95;
  text-align: center;
  --footer-x: 50%;
  --footer-y: 50%;
}
.footer-engraving, .footer-light { grid-area: 1 / 1; }
.footer-engraving {
  color: rgba(50,60,69,.31);
  text-shadow: -1px -1px 1px rgba(0,5,10,.58), 1px 2px 1px rgba(250,252,255,.85);
}
.footer-light {
  color: transparent;
  background: radial-gradient(ellipse 16vw 18vw at var(--footer-x) var(--footer-y), #ffe0b6, #ff9b43 25%, #fe5e0e 50%, rgba(254,94,14,0) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(254,94,14,.4));
  transition: opacity 700ms ease;
  pointer-events: none;
}
.is-footer-lit .footer-light { opacity: .9; }
.footer-wordmark:focus-visible { outline: 2px solid #fe5e0e; outline-offset: 8px; }
.footer-copyright { margin: 0; text-align: right; color: rgba(0,5,10,.4); font-size: clamp(10px, .926vw, 14px); font-weight: 400; }
@media (max-width: 767px) {
  .closing-stage h2 { top: 84px; font-size: 24px; }
  .site-footer { min-height: 380px; padding: 32px 24px 22px; }
  .footer-links { justify-content: flex-start; gap: 12px 24px; font-size: 11px; }
  .footer-email { flex-basis: 100%; }
  .footer-wordmark { font-size: 16vw; margin-block: 42px 28px; }
  .footer-light { background-size: 100% 100%; opacity: .25; }
}
@media (max-height: 500px) {
  .closing-stage h2 { top: 40px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-links a, .footer-light { transition: none; }
}

/* Ghost's paired transparent black/white grain, above all content. */
.page-grain {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23d)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -1 0 0 0 0.5'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23l)'/%3E%3C/svg%3E");
}
.page-grain::before, .page-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 200px 200px;
  opacity: .30;
  pointer-events: none;
}
.page-grain::before { background-image: var(--grain-dark); }
.page-grain::after { background-image: var(--grain-light); }
.page-film-grain {
  position: fixed;
  z-index: 9999;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(4);
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.page-film-grain.is-grain-playing { opacity: .24; }
.page-film-grain.grain-static { display: none; }
@media (prefers-reduced-motion: reduce) { .page-film-grain { display: none; } }
/* CTA navigation is a real link on every page. */
a.nav-try { text-decoration:none; }