/* ==========================================================================
   Slashboom — styles.css
   Mobile-first: the phone (390×664) is the base layout; the tablet
   (min-width: 768px) and the desktop (min-width: 1024px) build on top.
   ========================================================================== */

@font-face {
  font-family: "Michroma";
  src: url("fonts/michroma-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette: roles pinned by the client */
  --c-primary: #000000;   /* main brand colour: page, nav, primary buttons */
  --c-accent: #ffffff;    /* highlight: text on dark, hovers, underlines */
  --c-secondary: #171717; /* alternate sections, secondary buttons */

  /* Derived roles. The purple and orange live in the cosmic effects only. */
  /* The galaxy, dust, smoke and wormhole are black and white: these effect
     roles are all greys now (script.js reads them for its canvases) */
  --c-nebula: #8c8c8c;      /* mid grey: galaxy arms, dust */
  --c-nebula-light: #d4d4d4;
  --c-nebula-deep: #2e2e2e;
  --c-flare: #b8b8b8;       /* light grey: galaxy core, sparks */
  --c-flare-soft: #ececec;
  --c-glass: #dcdcdc;       /* white starlight in the hyperspace transition */
  --c-glass-steel: #5a5a5a; /* the glass body in shadow */
  /* Accents, used sparingly on the interface — never in the galaxy */
  --c-gold: #f5c518;        /* yellow: selection, focus, hovers, marks — 12.9:1 on primary */
  --c-maroon: #7b1e2e;      /* maroon: fills, glows, hover washes behind white text (10.9:1) */
  --c-maroon-bright: #b23a4e; /* maroon lifted for small marks and lines on black */
  --c-text: var(--c-accent);
  --c-text-soft: #cfcfcf;   /* 13.9:1 on primary, 11.9:1 on secondary */
  --c-text-mute: #a6a6a6;   /* labels, placeholders: 8.6:1 on primary, 7.4:1 on secondary */
  --c-bg: var(--c-primary);
  --c-surface: var(--c-secondary);
  --c-surface-raise: #222222; /* secondary lifted */
  --c-line: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --c-line-strong: color-mix(in srgb, var(--c-accent) 34%, transparent);
  --c-scrim: color-mix(in srgb, var(--c-primary) 86%, transparent);

  /* Type */
  --font-display: "Michroma", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;
  --fs-h1: clamp(1.75rem, 1.05rem + 3.1vw, 3.75rem);
  --fs-h2: clamp(1.375rem, 0.95rem + 1.9vw, 2.625rem);
  --fs-h3: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem);
  --lh-body: 1.55;

  /* Space: 4 / 8 / 12 / 16 scale, then larger steps */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --gutter: 20px;
  --section-pad: 56px;
  --header-h: 64px;
  --max: 1344px;

  /* Motion: one shared curve for every UI transition */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);
  --dur-1: 160ms;
  --dur-2: 240ms;
  --dur-3: 340ms;

  --radius: 2px;
  --shadow-lift: 0 14px 32px -16px color-mix(in srgb, var(--c-maroon) 70%, transparent);

  color-scheme: dark;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-pad: 80px;
    --header-h: 76px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --section-pad: 128px;
  }
}

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

html {
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  scrollbar-color: var(--c-maroon) var(--c-primary);
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
canvas,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}

p,
li,
dd {
  max-width: 68ch;
  text-wrap: pretty;
}

strong {
  font-weight: 700;
  color: var(--c-accent);
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
  transition: color var(--dur-2) var(--ease), text-decoration-color var(--dur-2) var(--ease);
}

a:hover {
  text-decoration-color: var(--c-accent);
}

/* Browser surfaces, themed from the palette */
::selection {
  background: var(--c-gold);
  color: var(--c-primary);
}

input,
textarea {
  caret-color: var(--c-gold);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--c-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--c-maroon);
  border: 2px solid var(--c-primary);
  border-radius: 10px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 400;
  padding: var(--s-3) var(--s-4);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  background: var(--c-accent);
  color: var(--c-primary);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease);
}

.skip-link:focus-visible {
  transform: none;
}

/* Condensed phone-and-tablet copy: the short wording shows under 1024px,
   the full wording on the desktop. display:none keeps only one in the a11y tree. */
.copy-full {
  display: none;
}

@media (min-width: 1024px) {
  .copy-full {
    display: inline;
  }

  .copy-short {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-pad);
  overflow-x: clip; /* the side-slide entrances never widen the page */
}

.section--alt {
  background: var(--c-surface);
}

/* The black of the page rises up through the bottom of this section, so it
   melts into the section below with no hard edge */
.section--fade {
  background: linear-gradient(to bottom, var(--c-surface) 45%, var(--c-bg));
}

.section--rule {
  border-top: 1px solid var(--c-line);
}

.stack {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--c-text-soft);
  line-height: 1.5;
}

.muted {
  color: var(--c-text-soft);
}

.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* --------------------------------------------------------------------------
   Buttons and arrow links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-primary);
  --btn-fg: var(--c-accent);
  --btn-border: color-mix(in srgb, var(--c-accent) 58%, transparent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-5);
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition:
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-3) var(--ease);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--dur-3) var(--ease);
}

.btn:hover {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-primary);
  --btn-border: var(--c-gold);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--c-maroon-bright) 80%, transparent);
}

/* Signature touch: the arrow nudges forward */
.btn:hover svg,
.link-arrow:hover svg,
.svc-row:hover .svc-row__arrow {
  transform: translateX(5px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--dur-1);
}

.btn--secondary {
  --btn-bg: var(--c-secondary);
  --btn-border: var(--c-line-strong);
  box-shadow: none;
}

.btn--secondary:hover {
  --btn-bg: var(--c-maroon);
  --btn-fg: var(--c-accent);
  --btn-border: var(--c-maroon-bright);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn.is-loading svg {
  animation: spin 900ms linear infinite;
}

.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  font-weight: 700;
  color: var(--c-accent);
  text-decoration: none;
}

.link-arrow svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--dur-3) var(--ease);
}

.link-arrow > span {
  position: relative;
}

.link-arrow > span::after,
.nav__link::after,
.footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  opacity: 0.6;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease);
}

.link-arrow:hover > span::after,
.nav__link:hover::after,
.footer__links a:hover::after {
  transform: scaleX(1);
  opacity: 1;
  background: var(--c-gold);
}

.link-arrow:hover svg {
  color: var(--c-gold);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* --------------------------------------------------------------------------
   Header: invisible at the top, a cosmic dust cloud once you scroll
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  --cloud: 0;
}

.site-header__cloud {
  position: absolute;
  inset: 0 0 -56px 0;
  pointer-events: none;
  opacity: var(--cloud);
  transform: translateY(calc((1 - var(--cloud)) * -10px));
  background:
    radial-gradient(42% 120% at 16% 38%, color-mix(in srgb, var(--c-nebula) 34%, transparent), transparent 72%),
    radial-gradient(34% 110% at 82% 30%, color-mix(in srgb, var(--c-flare) 22%, transparent), transparent 70%),
    radial-gradient(30% 90% at 52% 60%, color-mix(in srgb, var(--c-nebula-deep) 60%, transparent), transparent 75%),
    linear-gradient(to bottom, color-mix(in srgb, var(--c-primary) 92%, transparent), color-mix(in srgb, var(--c-primary) 70%, transparent) 62%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, var(--c-primary) 0%, var(--c-primary) 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, var(--c-primary) 0%, var(--c-primary) 52%, transparent 100%);
}

.site-header__cloud canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.site-header__inner {
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-right: var(--s-2);
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 19px;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}

.brand:hover img {
  opacity: 0.85;
  transform: translateY(-1px);
}

.nav,
.nav-cta {
  display: none;
}

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--c-accent);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease);
}

.menu-toggle:hover {
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
}

.menu-toggle svg {
  width: 26px;
  height: 26px;
}

@media (min-width: 768px) {
  .nav {
    display: block;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--s-1);
  }

  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--s-3);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--c-text-soft);
    text-decoration: none;
  }

  .nav__link::after {
    left: var(--s-3);
    right: var(--s-3);
    bottom: 12px;
    transform: scaleX(0);
  }

  .nav__link:hover,
  .nav__link[aria-current="page"] {
    color: var(--c-accent);
  }

  .nav__link[aria-current="page"]::after {
    transform: scaleX(1);
    opacity: 1;
    background: var(--c-gold);
  }

  .nav-cta {
    display: inline-flex;
    min-height: 48px;
    padding: 0 var(--s-4);
    font-size: var(--fs-small);
  }

  .menu-toggle {
    display: none;
  }

  .brand img {
    height: 21px;
  }

  .site-header__inner {
    gap: var(--s-5);
  }

  .nav {
    margin-left: auto;
  }
}

@media (min-width: 1024px) {
  .nav__list {
    gap: var(--s-2);
  }

  .nav__link {
    padding: 0 var(--s-4);
  }

  .nav__link::after {
    left: var(--s-4);
    right: var(--s-4);
  }

  .nav-cta {
    padding: 0 var(--s-5);
  }

  .brand img {
    height: 23px;
  }
}

/* --------------------------------------------------------------------------
   Phone menu overlay
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: env(safe-area-inset-top) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom));
  background: var(--c-bg);
  isolation: isolate;
  overflow-y: auto;
  overscroll-behavior: contain;
  --mx: calc(100% - 34px);
  --my: 32px;
  clip-path: circle(0 at var(--mx) var(--my));
  transition: clip-path 560ms var(--ease);
}

.menu[hidden] {
  display: none;
}

.menu.is-open {
  clip-path: circle(150% at var(--mx) var(--my));
}

.menu__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.menu__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu__close {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: var(--c-scrim);
  color: var(--c-accent);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}

.menu__close:hover {
  border-color: var(--c-accent);
  transform: rotate(90deg);
}

.menu__close svg {
  width: 22px;
  height: 22px;
}

.menu__nav {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  padding-block: var(--s-6);
}

.menu__list {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
}

.menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--c-text-soft);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}

.menu__link:hover {
  color: var(--c-accent);
}

.menu__link[aria-current="page"] {
  color: var(--c-gold);
}

.menu__link:active {
  transform: scale(0.97);
}

.menu__foot {
  justify-self: center;
  text-align: center;
  color: var(--c-text-mute);
  font-size: var(--fs-small);
}

.menu__foot a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--c-text-soft);
}

html.menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Home hero: the galaxy, the logo, one line and one button
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--c-bg);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  transform-origin: 50% 0;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__glow,
.hero__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Stars thrown past the hero, flowing through the page (script.js): fixed over
   the section backgrounds but under their content. First in <body>, so each
   section's z-index: 1 container, later in the page, still paints on top */
.galaxy-spill {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--c-primary) 40%, transparent) 0, transparent 18%),
    linear-gradient(to top, var(--c-primary) 0, color-mix(in srgb, var(--c-primary) 82%, transparent) 26%, transparent 56%);
}

.hero__inner {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--s-5);
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
  padding-bottom: calc(var(--s-7) + env(safe-area-inset-bottom));
}

.hero__mark {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(86%, 940px);
  margin-bottom: 12svh;
}

/* A soft dark halo keeps the white mark legible over the galaxy core */
.hero__mark::before {
  content: "";
  position: absolute;
  inset: -55% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-primary) 58%, transparent), transparent);
}

.boom {
  width: 100%;
  height: auto;
  overflow: visible;
  fill: var(--c-accent);
  filter: drop-shadow(0 10px 28px color-mix(in srgb, var(--c-primary) 80%, transparent));
}

.hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
  max-width: 34rem;
}

.hero__title {
  font-size: clamp(1.625rem, 1.05rem + 2.1vw, 2.375rem);
  line-height: 1.2;
}

.hero__lede {
  color: var(--c-text-soft);
  font-size: var(--fs-body);
}

.hero__copy .btn {
  margin-top: var(--s-2);
}

@media (min-width: 768px) {
  .hero__inner {
    grid-template-rows: auto auto;
    align-content: center;
    gap: var(--s-8);
    padding-bottom: var(--s-9);
  }

  .hero__mark {
    margin-bottom: 0;
    width: min(84%, 940px);
  }

  .hero__copy {
    justify-self: center;
    justify-items: center;
    text-align: center;
    max-width: 44rem;
  }

  .hero__shade {
    background:
      radial-gradient(60% 46% at 50% 74%, color-mix(in srgb, var(--c-primary) 62%, transparent), transparent 80%),
      linear-gradient(to top, var(--c-primary) 0, transparent 22%);
  }
}

@media (min-width: 1024px) {
  .hero__inner {
    gap: var(--s-7);
    padding-top: calc(var(--header-h) + var(--s-6));
  }

  .hero__mark {
    width: min(64%, 940px);
  }
}

/* --------------------------------------------------------------------------
   Inner page hero: full-screen photo on the phone, text beside image above
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + var(--s-4));
  padding-bottom: calc(var(--s-7) + env(safe-area-inset-bottom));
}

.page-hero__inner {
  display: grid;
  gap: var(--s-5);
}

.page-hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
}

.page-hero__copy .btn {
  margin-top: var(--s-2);
}

.page-hero__figure {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: clip;
}

.page-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--c-primary) 45%, transparent) 0, transparent 22%),
    linear-gradient(to top, var(--c-primary) 0, color-mix(in srgb, var(--c-primary) 84%, transparent) 30%, transparent 62%);
}

@media (min-width: 768px) {
  .page-hero {
    min-height: 0;
    align-items: center;
    padding-top: calc(var(--header-h) + var(--s-8));
    padding-bottom: var(--s-9);
  }

  .page-hero::after {
    display: none;
  }

  .page-hero__inner {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: var(--s-6);
  }

  .page-hero__figure {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c-nebula) 50%, transparent);
  }

  .page-hero__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--c-line);
    border-radius: inherit;
    pointer-events: none;
  }
}

@media (min-width: 1024px) {
  .page-hero {
    min-height: 100svh;
    padding-bottom: var(--s-8);
  }

  .page-hero__inner {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-9);
  }

  .page-hero__figure {
    max-height: calc(100svh - var(--header-h) - var(--s-9));
    aspect-ratio: auto;
    height: min(72svh, 720px);
  }
}

/* Services hero: no frame. The planet floats free and turns, over orange and
   yellow smoke (drawn in .page-hero__smoke by script.js; this glow is the
   still version behind it). The smoke canvas is fixed to the screen, behind
   the page's content, so it can pour down past the hero into the next section */
.page-services .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(46% 26% at 62% 24%, color-mix(in srgb, var(--c-flare) 16%, transparent), transparent 72%),
    radial-gradient(38% 22% at 24% 40%, rgb(220 220 220 / 0.09), transparent 72%);
}

/* No photo behind the phone copy any more: keep only the top shade, so the
   smoke flows out of the hero without a seam */
.page-services .page-hero::after {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-primary) 45%, transparent) 0, transparent 22%);
}

/* The smoke swoops across the whole page further down, so the grey bands let
   it show through, faintly */
.page-services .section--alt {
  background: color-mix(in srgb, var(--c-surface) 75%, transparent);
}

.page-hero__smoke {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page-services .page-hero__figure {
  overflow: visible;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + var(--s-2));
  pointer-events: none;
}

.planet {
  position: relative;
  width: 112%;
  max-width: none;
  translate: 0 calc(var(--sp, 0) * -64px);
  rotate: calc(var(--sp, 0) * -5deg);
}

.page-services .page-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* The planet's own disc in the picture (centre 546,343 · radius 268 of 1080×690):
   bands of light slide across it along the line of the rings */
.planet__spin {
  position: absolute;
  left: 25.74%;
  top: 10.87%;
  width: 49.63%;
  height: 77.68%;
  border-radius: 50%;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.7;
  -webkit-mask-image: radial-gradient(circle at 46% 46%, #000 38%, rgb(0 0 0 / 0.5) 58%, transparent 71%);
  mask-image: radial-gradient(circle at 46% 46%, #000 38%, rgb(0 0 0 / 0.5) 58%, transparent 71%);
}

.planet__spin::before {
  content: "";
  position: absolute;
  inset: -10% -100%;
  rotate: -17.5deg;
  background:
    radial-gradient(9% 6% at 20% 58%, rgb(220 220 220 / 0.32), transparent 70%),
    radial-gradient(7% 4% at 71% 40%, color-mix(in srgb, var(--c-flare-soft) 34%, transparent), transparent 70%),
    repeating-linear-gradient(90deg,
      transparent 0,
      color-mix(in srgb, var(--c-flare) 16%, transparent) 4%,
      transparent 9%,
      color-mix(in srgb, var(--c-nebula-light) 9%, transparent) 13%,
      transparent 17%,
      color-mix(in srgb, var(--c-flare-soft) 12%, transparent) 21%,
      transparent 25%);
  background-size: 50% 100%;
}

@media (min-width: 768px) {
  .page-services .page-hero__figure {
    padding-top: 0;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    align-content: center;
  }

  .page-services .page-hero__figure::after {
    display: none;
  }

  .planet {
    width: 140%;
    translate: -9% calc(var(--sp, 0) * -64px);
  }
}

@media (min-width: 1024px) {
  .page-services .page-hero__figure {
    height: auto;
    max-height: none;
  }

  .planet {
    width: 128%;
    translate: -7% calc(var(--sp, 0) * -96px);
  }
}

/* --------------------------------------------------------------------------
   Section heads and split layouts
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--s-5);
}

.section-head {
  display: grid;
  gap: var(--s-3);
}

.section-head p {
  color: var(--c-text-soft);
}

.media-tile {
  position: relative;
  overflow: clip;
  margin-inline: calc(var(--gutter) * -1);
  height: 124px;
}

.media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, var(--c-bg));
}

.section--alt .media-tile::after {
  background: linear-gradient(to bottom, transparent 55%, var(--c-surface));
}

/* Services and About: the cut-out galaxy floats on the page, no tile behind it */
.media-tile--services,
.media-tile--about {
  margin-inline: 0;
  overflow: visible;
}

.media-tile--services img,
.media-tile--about img {
  object-fit: contain;
}

.media-tile--services::after,
.section--alt .media-tile--services::after,
.media-tile--about::after,
.section--alt .media-tile--about::after {
  display: none;
}

/* Galaxy flight (≥768px, script.js): one galaxy leaves the Services spot,
   swings round behind the featured project's tablet with two echoes in formation,
   and settles into the About spot. The two still images hide while it flies. */
.galaxy-flight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  overflow: clip;
  pointer-events: none;
}

.galaxy-flight img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.galaxy-flying .media-tile--services img,
.galaxy-flying .media-tile--about img {
  visibility: hidden;
}

/* With motion on, the galaxy is drawn by the stars themselves (script.js); the
   pictures only mark where it sits, and still show for reduced motion */
.star-galaxy .galaxy-flight img,
.star-galaxy .media-tile--services img,
.star-galaxy .media-tile--about img {
  visibility: hidden;
}

/* The featured section's content rides above the galaxy, so it passes behind the tablet */
.galaxy-flying main > .section > .split--featured {
  z-index: 3;
}

/* Phone: the galaxy sits beside the heading so the section stays one screen */
@media (max-width: 767px) {
  .split--services {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-4);
    row-gap: var(--s-3);
    align-items: center;
  }

  .split--services .services-copy {
    display: contents;
  }

  .split--services .section-head {
    grid-column: 1;
    grid-row: 1;
  }

  .split--services .media-tile--services {
    grid-column: 2;
    grid-row: 1;
    width: 132px;
    height: 165px;
  }

  .split--services .services-copy > :not(.section-head) {
    grid-column: 1 / -1;
  }

  .split--services .services-copy > a {
    justify-self: start;
  }
}

/* Featured project: a working, scaled-down copy of the One of One site
   (frozen into work/one-of-one/ by tools/freeze-one-of-one.mjs) in
   the same device the visitor is using — a phone (390×664) on phones, a
   tablet (820×1180) on tablets, a desktop screen (1440×900) on desktops.
   The iframe stays fully interactive; script.js sets --device-scale. */
.featured-media {
  --dev-w: 390;
  --dev-h: 664;
  display: grid;
  place-items: center;
  height: 300px;
  container-type: size;
}

/* Fit the device to whichever of the column's width or height runs out first */
.featured-media .device {
  height: min(100cqh - var(--bezel) * 2, (100cqw - var(--bezel) * 2) * var(--dev-h) / var(--dev-w));
}

@media (min-width: 768px) {
  .split.split--featured {
    align-items: center;
  }

  .featured-copy {
    grid-column: 1 / span 6;
    grid-row: 1;
  }

  .featured-media {
    --dev-w: 820;
    --dev-h: 1180;
    grid-column: 7 / -1;
    grid-row: 1;
    height: min(640px, 70svh);
  }

  .featured-media .device {
    --bezel: 12px;
  }
}

@media (min-width: 1024px) {
  .featured-copy {
    grid-column: 1 / span 5;
  }

  .featured-media {
    --dev-w: 1440;
    --dev-h: 900;
    grid-column: 6 / -1;
    height: min(720px, 80svh);
  }
}

.device {
  --bezel: 7px;
  position: relative;
  box-sizing: content-box;
  height: calc(100% - var(--bezel) * 2);
  aspect-ratio: var(--dev-w) / var(--dev-h);
  padding: var(--bezel);
  border-radius: calc(var(--bezel) * 2.4);
  background: var(--c-secondary);
  box-shadow: 0 0 0 1px var(--c-line), 0 18px 40px -18px rgb(0 0 0 / 0.7);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.device:hover,
.device:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--c-line), 0 26px 56px -20px rgb(0 0 0 / 0.8);
}

/* Without JS the <noscript> copy of the preview stands in for the deferred one */
html:not(.js) .device__screen[data-src] {
  display: none;
}

.device__screen {
  position: absolute;
  top: var(--bezel);
  left: var(--bezel);
  width: calc(var(--dev-w) * 1px);
  height: calc(var(--dev-h) * 1px);
  max-width: none;
  border: 0;
  border-radius: calc(var(--bezel) * 1.2 / var(--device-scale, 0.192));
  background: #fff;
  transform-origin: 0 0;
  transform: scale(var(--device-scale, 0.192));
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-6);
    align-items: start;
  }

  .split > .span-5 { grid-column: span 5; }
  .split > .span-6 { grid-column: span 6; }
  .split > .span-7 { grid-column: span 7; }
  .split > .span-12 { grid-column: 1 / -1; }

  .media-tile {
    margin-inline: 0;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
  }

  .media-tile::after,
  .section--alt .media-tile::after {
    background: none;
    border: 1px solid var(--c-line);
    border-radius: inherit;
  }
}

@media (min-width: 768px) {
  .split--services,
  .split--about {
    align-items: center;
  }

  .split--services .media-tile {
    grid-column: 8 / -1;
    grid-row: 1;
  }

  .media-tile--services {
    border-radius: 0;
  }

  .split--services .services-copy {
    grid-column: 1 / span 7;
    grid-row: 1;
  }

  .split--about .media-tile {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .split--about .about-copy {
    grid-column: 6 / -1;
    grid-row: 1;
  }
}

@media (min-width: 1024px) {
  .split {
    gap: var(--s-8);
  }
}

/* --------------------------------------------------------------------------
   Service rows (home)
   -------------------------------------------------------------------------- */
.svc-list {
  border-top: 1px solid var(--c-line);
}

.svc-list > li {
  max-width: none;
  border-bottom: 1px solid var(--c-line);
}

.svc-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--s-4);
  row-gap: 2px;
  min-height: 48px;
  padding-block: var(--s-3);
  color: inherit;
  text-decoration: none;
}

.svc-row::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--s-3) * -1);
  z-index: -1;
  border-radius: var(--radius);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-maroon) 55%, var(--c-surface-raise)), var(--c-surface-raise) 70%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}

.svc-row:hover::before {
  opacity: 1;
}

.svc-row:active::before {
  opacity: 0.7;
}

.svc-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.9vw, 1.75rem);
  line-height: 1.2;
  transition: transform var(--dur-3) var(--ease);
}

.svc-row:hover .svc-row__title {
  transform: translateX(6px);
}

.svc-row:hover .svc-row__arrow {
  color: var(--c-gold);
}

.svc-row__desc {
  grid-column: 1;
  color: var(--c-text-soft);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.svc-row__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  transition: transform var(--dur-3) var(--ease);
}

.svc-note {
  margin-top: var(--s-3);
  color: var(--c-text-mute);
  font-size: var(--fs-small);
}

@media (min-width: 1024px) {
  .svc-row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
    padding-block: var(--s-5);
  }

  .svc-row__desc {
    grid-column: 2;
    grid-row: 1;
    font-size: 1rem;
  }

  .svc-row__arrow {
    grid-column: 3;
    grid-row: 1;
  }
}

/* --------------------------------------------------------------------------
   Lists: points, deliverables, principles, steps
   -------------------------------------------------------------------------- */
.points {
  display: grid;
  gap: var(--s-2);
}

.points li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s-3);
  align-items: start;
  color: var(--c-text-soft);
}

.points svg {
  width: 18px;
  height: 18px;
  margin-top: 0.22em;
  color: var(--c-gold);
}

.deliverables {
  display: grid;
  gap: var(--s-1) var(--s-5);
  font-size: var(--fs-small);
}

.deliverables li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--s-2);
  align-items: start;
  color: var(--c-text-soft);
}

.deliverables li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--c-maroon-bright);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--c-maroon) 80%, transparent);
}

@media (min-width: 768px) {
  .deliverables {
    grid-template-columns: 1fr 1fr;
    font-size: 1rem;
  }
}

.principles {
  border-top: 1px solid var(--c-line);
}

.principle {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}

.principle h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 0.92rem + 0.5vw, 1.375rem);
  letter-spacing: -0.01em;
}

.principle p {
  color: var(--c-text-soft);
  font-size: var(--fs-small);
  line-height: 1.45;
}

@media (min-width: 1024px) {
  .principle {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-6);
    padding-block: var(--s-5);
    align-items: baseline;
  }

  .principle p {
    font-size: 1.0625rem;
  }
}

.steps {
  display: grid;
  gap: var(--s-3);
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--s-3);
  row-gap: 2px;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
  border-color: var(--c-maroon-bright);
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c-maroon) 75%, transparent), transparent 75%);
}

.step h3 {
  align-self: center;
}

.step p {
  color: var(--c-text-soft);
  font-size: var(--fs-small);
  line-height: 1.45;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6) var(--s-5);
  }
}

@media (min-width: 1024px) {
  .steps--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .steps--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step {
    grid-template-columns: 1fr;
    row-gap: var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-line);
  }

  .step::before {
    grid-row: auto;
    width: 48px;
    height: 48px;
  }

  .step p {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Services page: one section per service
   -------------------------------------------------------------------------- */
.service {
  display: grid;
  gap: var(--s-4);
}

.service__art {
  width: 64px;
  height: 64px;
  color: var(--c-text-soft);
}

.service__art .spark {
  fill: var(--c-gold);
  stroke: none;
}

.service__art .glow {
  fill: var(--c-maroon-bright);
  stroke: none;
}

.service .link-arrow {
  justify-self: start;
}

@media (min-width: 768px) {
  .service {
    grid-template-columns: minmax(0, 1fr) 200px;
    column-gap: var(--s-6);
    align-items: start;
  }

  .service__body {
    display: grid;
    gap: var(--s-4);
  }

  .service__art {
    grid-column: 2;
    grid-row: 1;
    width: 200px;
    height: 200px;
    padding: var(--s-5);
    border: 1px solid var(--c-line);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c-maroon) 55%, transparent), transparent 72%);
  }
}

@media (min-width: 1024px) {
  .service {
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: var(--s-9);
    align-items: center;
  }

  .service__art {
    width: 320px;
    height: 320px;
    padding: var(--s-7);
  }

  .service--flip {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .service--flip .service__art {
    grid-column: 1;
  }

  .service--flip .service__body {
    grid-column: 2;
  }
}

.service__art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.8rem + 2.4vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 22ch;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   FAQ: every answer open and readable
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: var(--s-4);
}

.faq__list {
  border-top: 1px solid var(--c-line);
}

.faq__item {
  border-bottom: 1px solid var(--c-line);
  padding-bottom: var(--s-2);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 48px;
  padding-block: var(--s-1);
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  transition: color var(--dur-2) var(--ease);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--c-text-mute);
  transition: transform var(--dur-3) var(--ease), color var(--dur-2) var(--ease);
}

.faq__item[open] .faq__q svg {
  transform: rotate(45deg);
  color: var(--c-gold);
}

.faq__q:hover svg {
  color: var(--c-gold);
}

.faq__a {
  color: var(--c-text-soft);
  font-size: 0.875rem;
  line-height: 1.45;
}

@media (min-width: 768px) {
  .faq__q {
    font-size: 1.0625rem;
  }

  .faq__a {
    font-size: 1rem;
    line-height: 1.5;
  }

  .faq__item {
    padding-bottom: var(--s-4);
  }
}

@media (min-width: 1024px) {
  .faq {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-8);
    align-items: start;
  }

  .faq .section-head {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }

  .faq__q {
    font-size: 1.1875rem;
    padding-block: var(--s-3);
  }

  .faq__a {
    font-size: 1.0625rem;
  }
}

/* --------------------------------------------------------------------------
   Call-to-action band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: calc(var(--section-pad) + var(--s-2));
  text-align: center;
}

/* A full-bleed eclipse ring as wide as the page. Its foot sits just inside
   the CTA band and it climbs up through the sections above. It wraps down
   both sides from 12 o'clock as the page scrolls and closes once the band is
   in view. --cta-p (0 → 1) is the scroll progress, set by script.js; it rests
   at 1, the finished ring, without JavaScript or with reduced motion. */
.cta-band {
  --cta-p: 1;
  --wrap: calc(var(--cta-p) * 182deg); /* the two arcs overlap a touch at the foot, so no seam */
  --feather: min(18deg, (1 - var(--cta-p)) * 90deg);
  overflow: clip visible; /* the side-slide entrance never widens the page; the ring climbs out the top */
}

/* The ring passes over section backgrounds but behind their content */
main > .section > .container {
  position: relative;
  z-index: 1;
}

.cta-band__media {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s-4);
  aspect-ratio: 1;
  z-index: -2;
  pointer-events: none;
  /* Second layer: black rises up from the band and covers the top of the
     circle, so only the lower arcs around the call to action show */
  -webkit-mask-image: conic-gradient(#000 calc(var(--wrap) - var(--feather)), transparent var(--wrap), transparent calc(360deg - var(--wrap)), #000 calc(360deg - var(--wrap) + var(--feather))), linear-gradient(to bottom, transparent 38%, #000 72%);
  -webkit-mask-composite: source-in;
  mask-image: conic-gradient(#000 calc(var(--wrap) - var(--feather)), transparent var(--wrap), transparent calc(360deg - var(--wrap)), #000 calc(360deg - var(--wrap) + var(--feather))), linear-gradient(to bottom, transparent 38%, #000 72%);
  mask-composite: intersect;
}

.cta-band__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Light on the ring: a soft sheen that wanders around the middle of the
   circle, and a sharp glint that travels the rim */
.cta-band__media::before,
.cta-band__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.cta-band__media::before {
  --lx: 46%;
  --ly: 42%;
  --li: 0.5;
  inset: 22%;
  background: radial-gradient(circle at var(--lx) var(--ly),
    rgb(240 240 240 / calc(var(--li) * 0.2)),
    rgb(200 200 200 / calc(var(--li) * 0.1)) 14%,
    rgb(140 140 140 / calc(var(--li) * 0.05)) 32%,
    transparent 60%);
}

.cta-band__media::after {
  inset: 0;
  background: conic-gradient(
    transparent 0deg,
    rgb(255 255 255 / 0.9) 10deg,
    rgb(200 200 200 / 0.4) 26deg,
    transparent 56deg,
    transparent 180deg,
    rgb(200 200 200 / 0.55) 192deg,
    transparent 216deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side circle, transparent 92.8%, #000 93.7%, #000 94.3%, transparent 95.2%);
  mask-image: radial-gradient(closest-side circle, transparent 92.8%, #000 93.7%, #000 94.3%, transparent 95.2%);
}

/* About page: once the ring has closed, it glows brighter as the page scrolls
   on. --cta-glow (0 → 1) is set by script.js; it rests at 0, the plain ring,
   without JavaScript or with reduced motion */
@property --cta-glow { syntax: "<number>"; inherits: true; initial-value: 0; }

.page-about .cta-band {
  --cta-glow: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .page-about .cta-band {
    transition: --cta-glow 240ms ease-out;
  }
}

.page-about .cta-band__media img {
  filter: brightness(calc(1 + var(--cta-glow) * 0.55)) saturate(calc(1 + var(--cta-glow) * 0.3));
}

.page-about .cta-band__media::after {
  background:
    conic-gradient(
      transparent 0deg,
      rgb(255 255 255 / 0.9) 10deg,
      rgb(200 200 200 / 0.4) 26deg,
      transparent 56deg,
      transparent 180deg,
      rgb(200 200 200 / 0.55) 192deg,
      transparent 216deg,
      transparent 360deg),
    radial-gradient(closest-side circle,
      transparent 86%,
      rgb(200 200 200 / calc(var(--cta-glow) * 0.5)) 92.5%,
      rgb(240 240 240 / calc(var(--cta-glow) * 0.75)) 94%,
      rgb(200 200 200 / calc(var(--cta-glow) * 0.5)) 95.5%,
      transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side circle, transparent calc(92.8% - var(--cta-glow) * 6%), #000 93.7%, #000 94.3%, transparent calc(95.2% + var(--cta-glow) * 4.8%));
  mask-image: radial-gradient(closest-side circle, transparent calc(92.8% - var(--cta-glow) * 6%), #000 93.7%, #000 94.3%, transparent calc(95.2% + var(--cta-glow) * 4.8%));
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-primary) 34%, transparent), transparent);
}

.cta-band__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
}

.cta-band__inner p {
  color: var(--c-text-soft);
  max-width: 46ch;
}

.cta-band .btn-row {
  justify-content: center;
  margin-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--s-3);
}

.field {
  display: grid;
  gap: var(--s-1);
}

.field--inline {
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-3);
}

.field--inline .field__error {
  grid-column: 2;
}

.field label,
.chips legend {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-text-soft);
}

.input {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-primary);
  color: var(--c-accent);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}

textarea.input {
  min-height: 96px;
  resize: vertical;
}

.input::placeholder {
  color: var(--c-text-mute);
  opacity: 1;
}

.input:hover {
  border-color: color-mix(in srgb, var(--c-accent) 60%, transparent);
}

.input:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-maroon-bright) 70%, transparent);
}

.input[aria-invalid="true"] {
  border-color: var(--c-gold);
}

.field__error {
  color: var(--c-gold);
  font-size: var(--fs-small);
  line-height: 1.35;
}

.chips {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.chips legend {
  padding: 0;
  margin-bottom: var(--s-2);
}

.chips__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.chip {
  position: relative;
  display: block;
}

.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s-2);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--c-text-soft);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.chip:hover span {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.chip input:checked + span {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-primary);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.chip input:active + span {
  transform: scale(0.97);
}

.form__foot {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}

.form__status {
  font-size: var(--fs-small);
  color: var(--c-text-soft);
}

.form__status:empty {
  display: none;
}

.form__status.is-error {
  color: var(--c-gold);
}

.contact-aside {
  display: grid;
  gap: var(--s-5);
  align-content: start;
}

.contact-aside__item {
  display: grid;
  gap: var(--s-1);
}

.contact-aside a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.375rem);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-aside a:hover {
  color: var(--c-gold);
}

/* Phone: email and service area sit side by side under the form,
   so the whole contact section stays one screen */
@media (max-width: 767px) {
  .contact-split,
  .contact-split > .stack {
    gap: var(--s-3);
  }

  .contact-split .form {
    gap: var(--s-2);
  }

  .contact-split .chips legend {
    margin-bottom: var(--s-1);
  }

  .contact-aside {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--s-4);
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-line);
  }

  .contact-aside__item {
    gap: 0;
  }

  .contact-aside a {
    font-size: 0.875rem;
  }

  .contact-aside__item p:not(.label) {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: var(--fs-small);
    color: var(--c-text-soft);
  }

  .contact-split textarea.input {
    min-height: 72px;
    height: 72px;
  }
}

@media (min-width: 768px) {
  .form {
    gap: var(--s-4);
  }

  .field--inline {
    grid-template-columns: 1fr;
  }

  .field--inline .field__error {
    grid-column: 1;
  }

  .form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
  }

  .chips__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  textarea.input {
    min-height: 140px;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding-top: var(--s-7);
  padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-maroon);
  background: var(--c-bg);
}

.footer__grid {
  display: grid;
  gap: var(--s-5);
}

.footer__brand {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}

.footer__brand img {
  height: 26px;
  width: auto;
}

.footer__brand p {
  color: var(--c-text-soft);
  font-size: var(--fs-small);
}

.footer__col {
  display: grid;
  gap: var(--s-1);
  align-content: start;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-4);
}

.footer__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  min-width: 48px;
  color: var(--c-text-soft);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
}

.footer__links a::after {
  bottom: 12px;
  transform: scaleX(0);
}

.footer__links a:hover {
  color: var(--c-accent);
}

.footer__contact a:hover {
  color: var(--c-gold);
}

.footer__contact {
  font-size: var(--fs-small);
  color: var(--c-text-soft);
}

.footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
  color: var(--c-accent);
}

.footer__bottom {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  font-size: 0.8125rem;
  color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
}

.footer__bottom p {
  font-size: 0.875rem;
}

.footer__top {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  color: var(--c-text-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}

.footer__top svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-3) var(--ease);
}

.footer__top:hover {
  color: var(--c-accent);
}

.footer__top:hover svg {
  transform: translateY(-4px);
}

@media (min-width: 768px) {
  .site-footer {
    padding-top: var(--s-8);
  }

  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--s-6);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__links {
    flex-direction: column;
  }

  .footer__links a {
    min-height: 40px;
    align-self: start;
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    gap: var(--s-7);
  }

  .footer__brand {
    grid-column: auto;
  }

  .footer__brand img {
    height: 32px;
  }

  .footer__bottom {
    margin-top: var(--s-8);
  }
}

/* --------------------------------------------------------------------------
   Wormhole overlay used by the page transition
   -------------------------------------------------------------------------- */
.wormhole {
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Motion (none of it runs under prefers-reduced-motion)
   -------------------------------------------------------------------------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Hero copy rises out of blur once the logo has spilled out */
  .hero__copy > * {
    animation: rise-in 1100ms var(--ease) both;
  }

  .hero__title { animation-delay: 1500ms; }
  .hero__lede { animation-delay: 1640ms; }
  .hero__copy .btn { animation-delay: 1780ms; }

  .page-hero__copy > * {
    animation: rise-in 1000ms var(--ease) both;
  }

  .page-hero__copy > :nth-child(2) { animation-delay: 120ms; }
  .page-hero__copy > :nth-child(3) { animation-delay: 240ms; }

  .page-hero__figure img {
    animation: settle 1600ms var(--ease) both;
  }

  /* Services planet: bobs on the air and turns on its axis */
  .planet {
    animation: planet-bob 9s ease-in-out infinite alternate;
  }

  .planet__spin::before {
    animation: planet-spin 26s linear infinite;
  }

  /* Home: the nav arrives after the logo, like the reference's loader hand-off */
  .page-home .site-header__inner {
    animation: drop-in 1200ms var(--ease) 1900ms both;
  }

  /* The logo waits for script.js to drive it; if the script never runs,
     it appears on its own after 2.6s */
  .js .boom:not(.is-live) {
    visibility: hidden;
    animation: boom-fallback 1ms linear 2600ms forwards;
  }

  /* Sections slide in from alternating sides */
  [data-reveal] {
    --rx: -48px;
    transition:
      opacity 900ms var(--ease),
      transform 1100ms var(--ease),
      filter 900ms var(--ease);
  }

  [data-reveal="right"] {
    --rx: 48px;
  }

  [data-reveal].is-pending {
    opacity: 0;
    transform: translate3d(var(--rx), 0, 0);
    filter: blur(8px);
  }

  /* Menu links fan in */
  .menu.is-open .menu__list li,
  .menu.is-open .menu__cta {
    animation: rise-in 700ms var(--ease) both;
  }

  .menu.is-open .menu__list li:nth-child(2) { animation-delay: 50ms; }
  .menu.is-open .menu__list li:nth-child(3) { animation-delay: 100ms; }
  .menu.is-open .menu__list li:nth-child(4) { animation-delay: 150ms; }
  .menu.is-open .menu__cta { animation-delay: 200ms; }

  /* Eclipse light: the sheen drifts and breathes, the rim glint circles */
  .cta-band__media::before {
    animation: eclipse-sheen 11s ease-in-out infinite alternate;
  }

  .cta-band__media::after {
    animation: eclipse-glint 16s linear infinite;
  }

  /* Parallax: CSS scroll timelines where supported (script.js covers the rest) */
  @supports (animation-timeline: scroll()) {
    .hero__media {
      animation: hero-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100svh;
    }

    [data-parallax] {
      animation: parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }

  /* Page transition: hyperspace. The page rushes past toward the viewer as
     the stars stretch; the next one drifts up out of the dark as they
     collapse back into points. Same straight-on zoom on every screen size. */
  .is-leaving .page {
    animation: warp-out 700ms var(--ease-in) forwards;
    transform-origin: 50% var(--warp-y, 50vh);
  }

  .is-leaving .site-header {
    animation: fade-out 280ms var(--ease-in) forwards;
  }

  .is-arriving .page {
    animation: warp-in 760ms var(--ease) 240ms both;
    transform-origin: 50% 50vh;
  }

  .is-arriving .site-header {
    animation: fade-in 600ms var(--ease) 480ms both;
  }

  /* Between main-nav pages the stars pan sideways instead, and the page
     slides with them: out to the left and in from the right going further
     along the nav, the other way going back */
  .is-shift-next,
  .is-shift-prev {
    overflow-x: clip; /* only for the second the page is in motion */
  }

  .is-shift-next.is-leaving .page { animation-name: shift-out-left; }
  .is-shift-prev.is-leaving .page { animation-name: shift-out-right; }
  .is-shift-next.is-arriving .page { animation-name: shift-in-right; }
  .is-shift-prev.is-arriving .page { animation-name: shift-in-left; }

  /* The starfield and the dark of space are drawn in the
     .wormhole canvas (script.js); the page itself only moves and fades,
     so the compositor can run it without repainting */
  .is-leaving .page,
  .is-arriving .page {
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  [data-reveal] {
    --rx: -20px;
  }

  [data-reveal="right"] {
    --rx: 20px;
  }

  /* Phones keep the sideways stars but the page only fades */
  .is-shift-next .page,
  .is-shift-prev .page {
    --shift: 0px;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    filter: blur(8px);
  }
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
  }
}

@keyframes settle {
  from {
    transform: scale(1.12);
    filter: blur(6px) brightness(0.6);
  }
}

@keyframes planet-bob {
  from { transform: translate3d(0, -8px, 0) rotate(-1.2deg); }
  to { transform: translate3d(0, 10px, 0) rotate(1.4deg); }
}

@keyframes planet-spin {
  /* one tile: with a 50%-wide tile, -100% moves it by exactly its own width */
  to { background-position: -100% 0, -100% 0, -100% 0; }
}

@keyframes boom-fallback {
  to { visibility: visible; }
}

@keyframes hero-drift {
  to { transform: translate3d(0, 28%, 0) scale(1.06); }
}

@property --lx { syntax: "<percentage>"; inherits: false; initial-value: 46%; }
@property --ly { syntax: "<percentage>"; inherits: false; initial-value: 42%; }
@property --li { syntax: "<number>"; inherits: false; initial-value: 0.5; }

@keyframes eclipse-sheen {
  0%   { --lx: 40%; --ly: 38%; --li: 0.45; }
  22%  { --lx: 56%; --ly: 41%; --li: 0.8; }
  47%  { --lx: 58%; --ly: 57%; --li: 0.5; }
  71%  { --lx: 44%; --ly: 60%; --li: 0.9; }
  100% { --lx: 50%; --ly: 47%; --li: 0.6; }
}

@keyframes eclipse-glint {
  to { rotate: 360deg; }
}

@keyframes parallax {
  from { transform: translate3d(0, -7%, 0) scale(1.16); }
  to { transform: translate3d(0, 7%, 0) scale(1.16); }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes warp-out {
  to {
    opacity: 0;
    transform: scale(1.14);
  }
}

@keyframes warp-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes shift-out-left {
  to { opacity: 0; transform: translate3d(calc(var(--shift, 14vw) * -1), 0, 0); }
}

@keyframes shift-out-right {
  to { opacity: 0; transform: translate3d(var(--shift, 14vw), 0, 0); }
}

@keyframes shift-in-right {
  from { opacity: 0; transform: translate3d(var(--shift, 14vw), 0, 0); }
}

@keyframes shift-in-left {
  from { opacity: 0; transform: translate3d(calc(var(--shift, 14vw) * -1), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .menu {
    clip-path: none;
  }

  .device:hover,
  .device:focus-within {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Black-and-white effects: every effect layer (galaxy, smoke, planet, glows,
   wormhole, CTA ring, space imagery) is drawn in greyscale, so the cosmos
   reads black and white and the yellow/maroon accents stay on the
   interface. One knob: --fx-mute.
   Set on the layers themselves, never on a section, so stacking and fixed
   positioning are untouched. Hero photos take it on the figure, since their
   settle animation drives the img's own filter
   -------------------------------------------------------------------------- */
:root {
  --fx-mute: grayscale(1);
}

.site-header__cloud canvas,
.hero__media picture,
.hero__glow,
.hero__stars,
.hero__mark::before,
.galaxy-spill,
.galaxy-flight,
.wormhole,
.page-hero__smoke,
.page-services .page-hero::before,
.page-hero__figure,
.media-tile,
.cta-band__media,
.menu__bg {
  filter: var(--fx-mute);
}

/* --------------------------------------------------------------------------
   The big bang (script.js): the hero stays dark until the slash lands on the
   b. Then a white-hot flash bursts out of the hit, the space picture and the
   glow open out from it, and the stars fly from it to their places. The
   classes are only set by script, never under reduced motion, so without
   either the universe is simply there
   -------------------------------------------------------------------------- */
@property --br { syntax: "<length>"; inherits: false; initial-value: 0px; }

@media (prefers-reduced-motion: no-preference) {
  .hero.is-bang-wait .hero__img,
  .hero.is-bang-wait .hero__glow {
    opacity: 0;
  }

  .hero.is-banged .hero__img,
  .hero.is-banged .hero__glow {
    --br: 180vmax;
    -webkit-mask-image: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), #000 calc(var(--br) * 0.5), transparent var(--br));
    mask-image: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), #000 calc(var(--br) * 0.5), transparent var(--br));
    animation: bang-open 1870ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }

  .hero.is-banged .hero__img {
    transform-origin: var(--bx, 50%) var(--by, 50%);
    animation-name: bang-open, bang-settle;
  }

  .hero__bang {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    filter: var(--fx-mute);
  }

  /* the flash that lights the whole hero for an instant */
  .hero__bang::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%),
      color-mix(in srgb, var(--c-nebula-light) 70%, transparent) 0,
      color-mix(in srgb, var(--c-nebula-light) 34%, transparent) 14%,
      color-mix(in srgb, var(--c-nebula) 22%, transparent) 46%,
      transparent 80%);
    animation: bang-wash 825ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* the fireball: white core, a faint warm trace, violet edge, thrown wide */
  .hero__bang::after {
    content: "";
    position: absolute;
    left: var(--bx, 50%);
    top: var(--by, 50%);
    width: 260vmax;
    height: 260vmax;
    margin: -130vmax 0 0 -130vmax;
    border-radius: 50%;
    mix-blend-mode: screen;
    background: radial-gradient(closest-side,
      color-mix(in srgb, var(--c-accent) 55%, var(--c-nebula-light)) 0,
      color-mix(in srgb, var(--c-nebula-light) 70%, transparent) 4%,
      color-mix(in srgb, var(--c-flare-soft) 22%, color-mix(in srgb, var(--c-nebula) 40%, transparent)) 11%,
      color-mix(in srgb, var(--c-nebula) 45%, transparent) 24%,
      color-mix(in srgb, var(--c-nebula-deep) 40%, transparent) 40%,
      transparent 60%);
    transform: scale(0.002);
    will-change: transform, opacity;
    animation: bang-ball 1265ms cubic-bezier(0.1, 0.9, 0.25, 1) forwards;
  }
}

@keyframes bang-open {
  from { --br: 0px; }
}

@keyframes bang-settle {
  from { transform: scale(1.3); filter: brightness(1.35); }
}

@keyframes bang-wash {
  0% { opacity: 0; }
  8% { opacity: 0.35; }
  100% { opacity: 0; }
}

@keyframes bang-ball {
  0% { transform: scale(0.002); opacity: 0.75; }
  45% { opacity: 0.6; }
  100% { transform: scale(1); opacity: 0; }
}