:root {
  --void: #07080c;
  --void-soft: #0d1017;
  --panel: rgba(12, 15, 22, 0.7);
  --panel-strong: rgba(10, 12, 18, 0.9);
  --bone: #dedbc8;
  --muted: #aaa797;
  --soft: rgba(222, 219, 200, 0.6);
  --line: rgba(222, 219, 200, 0.16);
  --line-bright: rgba(222, 219, 200, 0.32);
  --rust: #d97757;
  --rust-soft: rgba(217, 119, 87, 0.16);
  --blue: #7fb7d9;
  --blue-soft: rgba(127, 183, 217, 0.14);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Almarai", Arial, sans-serif;
  --mono: "Space Mono", monospace;
  --pad: clamp(1.2rem, 4vw, 4.75rem);
  --max: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--void);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--bone);
  background: var(--void);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::selection {
  color: var(--void);
  background: var(--bone);
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.6rem 0.9rem;
  color: var(--void);
  background: var(--bone);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.cosmos {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 8, 12, 0.08), rgba(7, 8, 12, 0.72)),
    url("../img/galaxy-bg.webp") center / cover no-repeat;
}

.cosmos::before {
  content: "";
  position: absolute;
  inset: -12%;
  opacity: 0.62;
  filter: blur(64px);
  background:
    radial-gradient(circle at 18% 25%, rgba(46, 82, 126, 0.32), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(142, 66, 44, 0.22), transparent 31%),
    radial-gradient(circle at 55% 115%, rgba(57, 69, 128, 0.24), transparent 40%);
  animation: nebula-breathe 13s ease-in-out infinite alternate;
}

.cosmos::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 100% 5px;
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}

@keyframes nebula-breathe {
  to {
    transform: scale(1.07) translate3d(1.5%, -1%, 0);
    filter: blur(78px) saturate(1.25);
  }
}

#star-field,
#planet-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#planet-stage {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.planet-fallback {
  position: absolute;
  width: min(64vw, 880px);
  aspect-ratio: 1;
  right: -12vw;
  top: 13vh;
  border-radius: 50%;
  opacity: 0.18;
  filter: blur(1px);
  background: radial-gradient(circle at 35% 28%, #7b7a72, #24262c 55%, #08090c 72%);
  box-shadow: inset -80px -30px 110px #020204, 0 0 100px rgba(127, 183, 217, 0.12);
}

.webgl-ready .planet-fallback {
  display: none;
}

.site-nav {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem var(--pad);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5, 6, 9, 0.92), rgba(5, 6, 9, 0.42) 76%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  text-decoration: none;
}

.brand img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(267%) hue-rotate(6deg);
}

.brand span {
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.3vw, 2.2rem);
}

.nav-links a {
  position: relative;
  padding: 0.45rem 0;
  color: var(--muted);
  font-size: 0.79rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 220ms ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.16rem;
  left: 0;
  height: 1px;
  background: var(--bone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--bone);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  color: var(--bone);
  background: rgba(7, 8, 12, 0.62);
  cursor: pointer;
}

.menu-toggle i,
.menu-toggle i::before {
  display: block;
  width: 17px;
  height: 1px;
  background: currentColor;
  transition: transform 260ms var(--ease);
}

.menu-toggle i::before {
  content: "";
  transform: translateY(5px);
}

.menu-toggle[aria-expanded="true"] i {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] i::before {
  transform: rotate(-90deg);
}

.page-meter {
  position: fixed;
  z-index: 70;
  top: 50%;
  right: 1.1rem;
  width: 1px;
  height: min(42vh, 360px);
  background: var(--line);
  transform: translateY(-50%);
}

.page-meter i {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--progress, 0%);
  background: var(--rust);
  box-shadow: 0 0 12px rgba(217, 119, 87, 0.65);
}

.page-meter span {
  position: absolute;
  right: -0.25rem;
  bottom: calc(100% + 1rem);
  color: var(--soft);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.page-shell {
  position: relative;
  z-index: 3;
}

/* The generic shell (404, kit pages, the legal pages, the article) drops raw
   WordPress content straight onto the same fixed planet layer the designed
   pages use, with nothing behind it — so long-form body copy scrolled across a
   lit sphere at whatever contrast the pose happened to give it. The designed
   pages all solve this with a panel; this gives the generic one the same
   treatment, using the existing panel tokens so it looks like part of the set
   rather than a patch. */
.generic-body {
  position: relative;
  z-index: 3;
  padding-bottom: 6rem;
}

.generic-body > .reveal {
  max-width: 74ch;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--panel-strong, rgba(10, 12, 18, 0.9));
  box-shadow: 0 40px 100px -70px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(18px) saturate(1.05);
}

.generic-body h2 {
  margin: 2.4rem 0 0.8rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
}

.generic-body h3 {
  margin: 1.9rem 0 0.6rem;
  font-size: 1.12rem;
}

.generic-body > .reveal > :first-child {
  margin-top: 0;
}

.generic-body p,
.generic-body li {
  color: var(--muted);
}

.generic-body a {
  color: var(--bone);
}

.wrap {
  width: min(100%, calc(var(--max) + 2 * var(--pad)));
  margin: 0 auto;
  padding-right: var(--pad);
  padding-left: var(--pad);
}

.eyebrow,
.mono {
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.35rem;
}

.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--rust);
}

.display {
  margin: 0;
  color: var(--bone);
  font-family: var(--serif);
  font-size: clamp(3.7rem, 9.2vw, 9.3rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.9;
}

.section-title {
  max-width: 18ch;
  margin: 0;
  color: var(--bone);
  font-family: var(--serif);
  font-size: clamp(2.55rem, 5.8vw, 5.7rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.96;
}

.lead {
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.68;
}

.button,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-weight: 700;
  text-decoration: none;
}

/* Touch targets. These inline arrow CTAs are real calls to action but were
   laid out as bare text — "Tell me about your product" measured 177x20 on a
   390px viewport, well under the 44px minimum. The box grows vertically only:
   font-size and the column width are untouched, so nothing about the
   composition moves. `.button` already carries min-height:48px; this brings the
   text-only variant up to the same standard. */
@media (max-width: 820px) {
  .text-link {
    min-height: 44px;
    padding-block: 0.75rem;
  }
}

.button {
  min-height: 48px;
  padding: 0.78rem 1.25rem;
  border: 1px solid rgba(222, 219, 200, 0.3);
  border-radius: 100px;
  color: var(--bone);
  background: rgba(222, 219, 200, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  transition: border-color 240ms, color 240ms, background 240ms, transform 240ms var(--ease);
}

.button:hover {
  border-color: var(--bone);
  color: var(--void);
  background: var(--bone);
  transform: translateY(-2px);
}

.button .arrow,
.text-link .arrow {
  color: var(--rust);
  font-family: var(--mono);
  transition: transform 240ms var(--ease);
}

.button:hover .arrow,
.text-link:hover .arrow {
  transform: translateX(4px);
}

.text-link {
  color: var(--bone);
  font-size: 0.8rem;
}

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

.hero {
  position: relative;
  display: flex;
  min-height: 112vh;
  min-height: 112svh;
  align-items: center;
  padding-top: 8rem;
  padding-bottom: 8vh;
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: min(100%, 820px);
}

/* Legibility for the hero copy, carried by the glyphs rather than by a plate.
   #planet-stage is a fixed, full-viewport WebGL layer, and these pages park a
   large, near-white planet in the first screen — right where the hero sits. The
   copy is cream (#dedbc8) and mid-grey on top of it, so words landed on the lit
   hemisphere and dropped below usable contrast: "Complex in. Clear out." lost
   "in." and "out." on About, "The work, in their words." lost "in" and "words."
   on Recommendations, "Page not found" lost "not fo" on the 404, and on Contact
   roughly half the sub-copy and both calls to action went with it.

   This used to be a blurred dark slab behind .hero-copy (a `::before` at
   rgba(7,8,12,.82), blur(46px)). It fixed the contrast and cost the picture:
   at 1120x570 it covered the whole centre of the first screen, so Contact —
   the page the site converts on — opened on a black rectangle with the planet
   and the starfield wiped out behind it.

   A halo on the text itself darkens only the few pixels around each letterform.
   It does the same contrast job at any copy length with no per-page tuning, and
   the stage stays fully visible between the words. Two shadows, not one: the
   wide soft pass lifts the small mono and lead type off a bright surface, the
   tight pass keeps the thin Instrument Serif strokes from smearing into it. */
.hero .eyebrow,
.hero .display,
.hero .lead,
.hero .signal-status,
.hero-actions {
  text-shadow:
    0 1px 26px rgba(7, 8, 12, 0.92),
    0 1px 8px rgba(7, 8, 12, 0.8);
}

.hero .lead {
  margin: 1.75rem 0 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.2rem;
}

.scroll-cue {
  position: absolute;
  bottom: 3.5vh;
  left: var(--pad);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.scroll-cue i {
  position: relative;
  width: 42px;
  height: 1px;
  overflow: hidden;
  background: var(--line-bright);
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rust);
  animation: cue-run 2.2s var(--ease) infinite;
}

@keyframes cue-run {
  from {
    transform: translateX(-105%);
  }
  to {
    transform: translateX(105%);
  }
}

.glass {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 40px 100px -70px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(18px) saturate(1.05);
}

/* Sized to match the Solutions and Kits footers, which are the other two the
   site ships. Those close a page in ~131px with a 20px wordmark; this one was
   324px tall with a 101px one (`clamp(4rem, 11vw, 10rem)`), so moving between
   page families the footer changed scale completely. The markup here carries
   more than theirs — a nav row and a three-part legal row — so it still lands
   taller, but at the same weight rather than as a second masthead. */
.site-footer {
  position: relative;
  z-index: 6;
  padding: 2.4rem var(--pad) 2rem;
  border-top: 1px solid var(--line);
  background: rgba(6, 7, 10, 0.8);
  backdrop-filter: blur(18px);
}

.footer-top,
.footer-bottom {
  display: flex;
  max-width: var(--max);
  margin: 0 auto;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.footer-name {
  margin: 0;
  color: var(--bone);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* `flex-end` aligned the nav to the baseline of a 101px wordmark. At 20px the
   two are the same height, so they centre on one row instead. */
.footer-top {
  align-items: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.8rem 1.4rem;
}

.footer-links a,
.footer-bottom {
  color: var(--muted);
  font-size: 0.74rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--bone);
}

.footer-bottom {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* The privacy policy and the terms were live, indexable and linked from
   nowhere on a site that collects a name, a work email and free text through
   the contact form. A footer link is the conventional place for them and the
   only one a visitor will look. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.footer-legal a {
  color: var(--muted);
  text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--bone);
  text-decoration: underline;
}

/* Same 44px minimum as every other control on a phone — these measured 19px. */
@media (max-width: 820px) {
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Home (`.pg-footer-word`), Solutions and Kits (`.brand`) all step their
     footer wordmark 1.25rem → 1.05rem at exactly this width. Without this the
     inner-page footers stayed at 20px on a phone while the other three page
     families dropped to 17px, so the wordmark changed size when you moved
     between them — the same mismatch this rule set already fixed on desktop. */
  .footer-name {
    font-size: 1.05rem;
  }
}

/* ABOUT — orbital biography */
.page-about {
  --planet-tint: rgba(92, 146, 193, 0.17);
}

.page-about .hero-copy {
  max-width: 790px;
}

.page-about .hero .display {
  max-width: 8.6ch;
}

.orbital-intro {
  position: relative;
  display: grid;
  min-height: 145vh;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  padding-top: 18vh;
  padding-bottom: 18vh;
}

.orbital-intro::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 47%;
  width: min(48vw, 680px);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbital-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 47%;
  width: min(31vw, 440px);
  aspect-ratio: 1;
  border: 1px dashed rgba(127, 183, 217, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: slow-spin 28s linear infinite;
}

@keyframes slow-spin {
  to {
    rotate: 360deg;
  }
}

.orbit-index {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.8rem;
}

.orbit-stat {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.orbit-stat b {
  color: var(--rust);
  font-family: var(--serif);
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
}

.orbit-stat span {
  color: var(--muted);
  font-size: 0.88rem;
}

.about-story {
  position: relative;
  z-index: 3;
  padding: 12vh 0 16vh;
}

.story-panel {
  margin-left: auto;
  width: min(760px, 77%);
  padding: clamp(1.6rem, 4vw, 4rem);
}

.story-panel p {
  max-width: 58ch;
  color: var(--muted);
}

.story-panel .pull {
  margin: 2.5rem 0;
  color: var(--bone);
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-style: italic;
  line-height: 1;
}

/* padding-block, not the shorthand — see the note on .archive. This element
   carries .wrap, and a padding shorthand resets .wrap's horizontal gutter to 0;
   measured on the live page, the eyebrow and section title rendered at x=2 on a
   1352px window while every healthy section rendered at 56. */
.constellation {
  position: relative;
  padding-block: 18vh;
}

.constellation-head {
  max-width: 720px;
  margin-bottom: 5rem;
}

.principle-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}

.principle {
  position: relative;
  min-height: 320px;
  padding: clamp(1.5rem, 3.2vw, 3.2rem);
  background: rgba(9, 11, 16, 0.86);
  transition: background 350ms, transform 350ms var(--ease);
}

.principle::before {
  content: "";
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 7px;
  height: 7px;
  border: 1px solid var(--rust);
  border-radius: 50%;
  box-shadow: 0 0 0 7px var(--rust-soft);
}

.principle:hover {
  z-index: 2;
  background: rgba(17, 20, 28, 0.94);
  transform: scale(1.012);
}

.principle .no {
  color: var(--rust);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

.principle h3 {
  max-width: 13ch;
  margin: 4rem 0 1rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.principle p {
  max-width: 42ch;
  color: var(--muted);
  font-size: 0.92rem;
}

/* padding-block, not the shorthand — see the note on .archive. This element
   carries .wrap, and a padding shorthand resets .wrap's horizontal gutter to 0;
   measured on the live page, the eyebrow and section title rendered at x=2 on a
   1352px window while every healthy section rendered at 56. */
.flight-path {
  padding-block: 18vh;
}

.path-grid {
  display: grid;
  margin-top: 5rem;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-bright);
}

.path-step {
  position: relative;
  padding: 2.3rem 1.4rem 0 0;
}

.path-step::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--void);
  border: 1px solid var(--rust);
  transition: background 300ms, box-shadow 300ms;
}

.path-step:hover::before {
  background: var(--rust);
  box-shadow: 0 0 18px var(--rust);
}

.path-step h3 {
  min-height: 3.2em;
  margin: 1.3rem 0 0.8rem;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.path-step p {
  color: var(--muted);
  font-size: 0.84rem;
}

.about-close {
  display: grid;
  min-height: 94vh;
  place-items: center;
  padding: 18vh var(--pad);
  text-align: center;
}

.about-close .section-title {
  max-width: 14ch;
}

.about-close .lead {
  margin: 1.5rem auto 0;
}

.about-close .button {
  margin-top: 2rem;
}

/* CONTACT — signal console */
.page-contact {
  --signal: #ef9877;
}

.page-contact .cosmos::after {
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(217, 119, 87, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 119, 87, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}

.page-contact .hero {
  min-height: 106vh;
  justify-content: center;
  text-align: center;
}

.page-contact .hero-copy {
  width: min(100%, 960px);
}

.page-contact .hero .display {
  font-size: clamp(4.6rem, 13vw, 13rem);
}

.page-contact .hero .lead {
  margin-right: auto;
  margin-left: auto;
}

.page-contact .hero-actions {
  justify-content: center;
}

.signal-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.59rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.signal-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #79b997;
  box-shadow: 0 0 0 6px rgba(121, 185, 151, 0.1), 0 0 18px rgba(121, 185, 151, 0.62);
  animation: signal-pulse 2.2s ease-in-out infinite;
}

@keyframes signal-pulse {
  50% {
    transform: scale(1.3);
    opacity: 0.6;
  }
}

.transmission {
  position: relative;
  padding: 14vh 0 20vh;
}

.transmission::before,
.transmission::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 38%;
  left: 50%;
  border: 1px solid rgba(217, 119, 87, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: transmission-ring 5s ease-out infinite;
}

.transmission::after {
  animation-delay: 2.5s;
}

@keyframes transmission-ring {
  from {
    width: 8vw;
    height: 8vw;
    opacity: 0.8;
  }
  to {
    width: 90vw;
    height: 90vw;
    opacity: 0;
  }
}

.console {
  position: relative;
  /* Explicit, not load-bearing today: `.page-shell` (z-index 3) already sits
     above the fixed #planet-stage (z-index 1), so the console paints over the
     planet either way — measured both ways, identical. It is pinned here so
     that a future change to .page-shell cannot silently drop the form behind
     the planet, which is a failure that reads as "the labels went low
     contrast" rather than as a stacking bug. */
  z-index: 2;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  background: rgba(7, 8, 12, 0.86);
  box-shadow: 0 50px 130px -70px #000;
  backdrop-filter: blur(24px);
}

.console::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rust), transparent);
  animation: console-scan 4s ease-in-out infinite;
}

@keyframes console-scan {
  0%,
  100% {
    transform: translateX(-70%);
  }
  50% {
    transform: translateX(70%);
  }
}

.console-guide {
  padding: clamp(1.6rem, 4vw, 4rem);
  border-right: 1px solid var(--line);
  background: rgba(14, 17, 24, 0.62);
}

.console-guide .section-title {
  margin-top: 1.2rem;
  font-size: clamp(2.4rem, 4.8vw, 4.8rem);
}

.guide-list {
  display: grid;
  gap: 1.4rem;
  margin-top: 3rem;
}

.guide-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.guide-item b {
  color: var(--rust);
  font-family: var(--mono);
  font-size: 0.65rem;
}

.guide-item span {
  color: var(--muted);
  font-size: 0.84rem;
}

.contact-form {
  position: relative;
  padding: clamp(1.6rem, 4vw, 4rem);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 1.6rem;
}

.field {
  position: relative;
  padding-top: 0.85rem;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 0.42rem;
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line-bright);
  border-radius: 0;
  color: var(--bone);
  background: transparent;
  outline: 0;
  transition: border-color 240ms, background 240ms;
}

.field input,
.field select {
  height: 48px;
}

.field textarea {
  min-height: 140px;
  padding: 0.8rem 0;
  resize: vertical;
}

.field select {
  color-scheme: dark;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-bottom-color: var(--rust);
  background: linear-gradient(180deg, transparent, rgba(217, 119, 87, 0.04));
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(170, 167, 151, 0.46);
}

.form-actions {
  display: flex;
  margin-top: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.form-actions p {
  max-width: 34ch;
  margin: 0;
  color: var(--soft);
  font-size: 0.72rem;
}

.form-success {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: none;
  place-items: center;
  padding: 2rem;
  text-align: center;
  background: rgba(7, 8, 12, 0.96);
  backdrop-filter: blur(22px);
}

.form-success.show {
  display: grid;
  animation: success-in 550ms var(--ease) both;
}

@keyframes success-in {
  from {
    opacity: 0;
    clip-path: circle(0 at 50% 50%);
  }
  to {
    opacity: 1;
    clip-path: circle(80% at 50% 50%);
  }
}

.form-success h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.95;
}

.form-success p {
  max-width: 50ch;
  color: var(--muted);
}

/* The brief the visitor is about to send, shown verbatim so it stays copyable
   even when the mail handoff or the clipboard API is unavailable. */
.brief-preview {
  max-width: 56ch;
  max-height: 30vh;
  margin: 0 auto 1.4rem;
  padding: 1rem 1.1rem;
  overflow: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.7;
  text-align: left;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(222, 219, 200, 0.03);
}

.brief-preview:focus-visible {
  outline: 1px solid var(--rust);
  outline-offset: 3px;
}

.success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.next-section {
  display: grid;
  min-height: 92vh;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  padding-top: 15vh;
  padding-bottom: 15vh;
}

.response-window {
  position: relative;
  min-height: 420px;
  padding: 2rem;
  overflow: hidden;
}

.response-window::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.radar-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  overflow: hidden;
  transform-origin: 0 0;
  animation: radar-spin 5s linear infinite;
}

.radar-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 270deg, rgba(217, 119, 87, 0.38), transparent 35%);
}

@keyframes radar-spin {
  to {
    rotate: 360deg;
  }
}

.radar-copy {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.radar-copy b {
  font-family: var(--serif);
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
}

.radar-copy span {
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.what-next {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.5rem;
}

.what-next article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.what-next b {
  color: var(--rust);
  font-family: var(--mono);
  font-size: 0.65rem;
}

.what-next h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-style: italic;
  font-weight: 400;
}

.what-next p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

/* INSIGHTS — celestial archive */
.page-insights {
  --archive-blue: #8ec4e5;
}

.page-insights .cosmos {
  background:
    linear-gradient(180deg, rgba(3, 7, 14, 0.1), rgba(5, 8, 15, 0.78)),
    url("../img/galaxy-bg.webp") 58% center / cover no-repeat;
}

.page-insights .hero {
  min-height: 122vh;
}

.page-insights .hero-copy {
  width: min(100%, 1050px);
}

.page-insights .hero .display {
  max-width: 8ch;
}

.archive-readout {
  display: flex;
  max-width: 710px;
  margin-top: 3rem;
  padding-top: 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.archive-readout i {
  flex: 1;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}

.archive-readout i::before {
  content: "";
  display: block;
  width: 34%;
  height: 100%;
  background: var(--archive-blue);
  animation: archive-scan 3.2s ease-in-out infinite alternate;
}

@keyframes archive-scan {
  to {
    transform: translateX(190%);
  }
}

.featured-insight {
  position: relative;
  padding: 12vh 0 20vh;
}

.feature-card {
  display: grid;
  min-height: min(760px, 82vh);
  grid-template-columns: 0.8fr 1.2fr;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  background: rgba(7, 10, 17, 0.84);
  backdrop-filter: blur(20px);
}

.feature-visual {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 42%, rgba(127, 183, 217, 0.22), transparent 25%),
    linear-gradient(135deg, rgba(127, 183, 217, 0.1), transparent 60%);
}

.feature-visual::before,
.feature-visual::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(127, 183, 217, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.feature-visual::before {
  width: 75%;
  aspect-ratio: 1;
  border-style: dashed;
  animation: slow-spin 32s linear infinite;
}

.feature-visual::after {
  width: 45%;
  aspect-ratio: 1;
  box-shadow: 0 0 80px rgba(127, 183, 217, 0.12);
}

.data-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28%;
  aspect-ratio: 1;
  border: 1px solid rgba(222, 219, 200, 0.36);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 35% 30%, transparent 0 8px, rgba(222, 219, 200, 0.08) 9px 10px),
    radial-gradient(circle at 35% 28%, #8ca7b7, #27313d 48%, #07090d 72%);
  box-shadow: inset -35px -20px 45px #030407, 0 0 40px rgba(127, 183, 217, 0.2);
  transform: translate(-50%, -50%);
  animation: data-float 6s ease-in-out infinite;
}

@keyframes data-float {
  50% {
    transform: translate(-50%, -54%) rotate(5deg);
  }
}

.feature-visual .coordinate {
  position: absolute;
  right: 1.4rem;
  bottom: 1.2rem;
  left: 1.4rem;
  display: flex;
  justify-content: space-between;
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 5rem);
}

.feature-copy h2 {
  max-width: 12ch;
  margin: 1.6rem 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 6.1rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.93;
}

.feature-copy p {
  max-width: 50ch;
  color: var(--muted);
}

.feature-bottom {
  display: flex;
  margin-top: 3rem;
  padding-top: 1.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
}

/* padding-block, NOT the padding shorthand. This element also carries .wrap,
   whose whole job is the horizontal gutter (padding-left/right: var(--pad)) —
   and a later shorthand resets both of those to 0. The result at 1352px: the
   "Signals worth keeping." heading sat 2px from the left edge of the window
   while every other heading on the page sat at 41-609px, and the filter row ran
   to x=1350, passing underneath the fixed .page-meter rail at x=1333 so the
   last chip was clipped. Both were one bug. Longhand keeps .wrap's gutter. */
.archive {
  padding-block: 14vh 20vh;
}

.archive-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.filter {
  min-height: 38px;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--muted);
  background: rgba(9, 11, 17, 0.62);
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 220ms, border-color 220ms, background 220ms;
}

.filter:hover,
.filter.active {
  border-color: var(--archive-blue);
  color: var(--bone);
  background: var(--blue-soft);
}

.insight-grid {
  display: grid;
  margin-top: 4rem;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}

.insight-card {
  position: relative;
  display: flex;
  min-height: 340px;
  grid-column: span 4;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.4rem, 2.8vw, 2.5rem);
  background: rgba(8, 11, 18, 0.92);
  transition: background 320ms, opacity 280ms, transform 320ms var(--ease);
}

.insight-card:nth-child(2),
.insight-card:nth-child(5) {
  grid-column: span 8;
}

.insight-card:hover {
  z-index: 2;
  background: rgba(16, 22, 32, 0.98);
  transform: translateY(-4px);
}

.insight-card.hidden {
  display: none;
}

.card-signal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-signal i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--archive-blue);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--blue-soft);
}

.insight-card h3 {
  max-width: 15ch;
  margin: 3.5rem 0 1rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 3.35rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.98;
}

.insight-card p {
  max-width: 50ch;
  color: var(--muted);
  font-size: 0.85rem;
}

.insight-card .status {
  display: flex;
  margin-top: 2rem;
  padding-top: 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
}

.insight-card .status span {
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.newsletter {
  display: grid;
  min-height: 90vh;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  padding-top: 16vh;
  padding-bottom: 16vh;
}

.newsletter-panel {
  padding: clamp(1.5rem, 3.4vw, 3rem);
}

.newsletter-panel h3 {
  margin: 1rem 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.9rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.98;
}

.newsletter-panel p {
  color: var(--muted);
  font-size: 0.87rem;
}

.beacon-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.4rem;
  margin-top: 1.6rem;
}

@media (max-width: 980px) {
  .orbital-intro,
  .console,
  .next-section,
  .feature-card,
  .newsletter {
    grid-template-columns: 1fr;
  }

  .orbital-intro {
    min-height: auto;
    padding-top: 14vh;
    padding-bottom: 14vh;
  }

  .orbital-intro::before,
  .orbital-intro::after {
    left: 70%;
  }

  .orbit-index {
    grid-template-columns: repeat(3, 1fr);
  }

  .console-guide,
  .feature-visual {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .path-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 0;
  }

  .insight-card,
  .insight-card:nth-child(2),
  .insight-card:nth-child(5) {
    grid-column: span 6;
  }

  .newsletter-panel {
    max-width: 650px;
  }
}

@media (max-width: 760px) {
  .site-nav {
    min-height: 66px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  .menu-toggle {
    position: relative;
    z-index: 3;
    display: grid;
  }

  /* `inset: 0` cannot be used here. `.site-nav` carries a backdrop-filter,
     which makes it the containing block for its position:fixed descendants —
     so `inset: 0` resolved against the 66px header box and the panel came out
     160px tall, hiding "Solutions" and half of "Kits" above the fold while the
     body scroll lock made them unreachable. Viewport units sidestep the
     containing block entirely, so the panel is full-screen either way. */
  .nav-links {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    padding: 6rem var(--pad) calc(3rem + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.7rem;
    /* Belt and braces: if a future menu item pushes past the viewport the
       panel scrolls rather than clipping, since the body behind it is locked. */
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    background: rgba(5, 6, 9, 0.97);
    opacity: 0;
    transform: translateY(-2rem);
    transition: opacity 350ms var(--ease), transform 350ms var(--ease), visibility 0s 350ms;
  }

  .nav-links.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 350ms var(--ease), transform 350ms var(--ease), visibility 0s;
  }

  .nav-links a {
    width: 100%;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--serif);
    font-size: clamp(2.2rem, 11vw, 4rem);
    font-style: italic;
    line-height: 1;
  }

  .nav-links a::after {
    display: none;
  }

  .page-meter {
    display: none;
  }

  .hero {
    min-height: 105svh;
    padding-top: 7rem;
  }

  .page-contact .hero,
  .page-insights .hero {
    min-height: 108svh;
  }

  .display {
    font-size: clamp(4rem, 19vw, 7.6rem);
  }

  .page-contact .hero .display {
    font-size: clamp(5rem, 23vw, 8rem);
  }

  .scroll-cue {
    left: 0;
  }

  .planet-fallback {
    width: 90vw;
    right: -35vw;
    top: 18vh;
  }

  .story-panel {
    width: 100%;
  }

  .principle-map,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .principle {
    min-height: 280px;
  }

  .path-grid {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 0;
    border-left: 1px solid var(--line-bright);
  }

  .path-step {
    padding: 0 0 2.6rem 2rem;
  }

  .path-step::before {
    top: 0.3rem;
    left: -5px;
  }

  .path-step h3 {
    min-height: 0;
    margin-top: 0.7rem;
  }

  .field.full {
    grid-column: auto;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .form-actions .button {
    width: 100%;
  }

  .archive-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .filters {
    justify-content: flex-start;
  }

  .insight-card,
  .insight-card:nth-child(2),
  .insight-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  .feature-copy {
    min-height: 520px;
  }

  .beacon-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .footer-top,
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .orbit-index {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }

  .orbit-stat {
    grid-template-columns: 52px 1fr;
  }

  .principle h3,
  .insight-card h3 {
    margin-top: 3rem;
  }

  .response-window {
    min-height: 340px;
  }

  .radar-copy {
    align-items: flex-start;
    flex-direction: column;
  }

  .feature-visual {
    min-height: 380px;
  }

  .feature-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ===========================================================================
   Sections that existed only in the deployed theme.
   The live site had drifted ahead of this repository: the About
   recommendations grid and the Contact booking panel were built directly
   against the deployed CSS and were not in any source file here, so a rebuild
   from this repo would have deleted both. Imported verbatim from the running
   stylesheet so the two trees agree and a deploy is non-destructive.
   =========================================================================== */
.footer-brand { flex: none; }
.about-recommendations {
  padding-top: 16vh;
  padding-bottom: 16vh;
}
.about-recommendations-head {
  display: grid;
  max-width: 980px;
  margin-bottom: clamp(3.5rem, 9vh, 7rem);
  grid-template-columns: 0.75fr 1.25fr;
  gap: 1rem clamp(2rem, 7vw, 7rem);
  align-items: end;
}
.about-recommendations-head .section-title {
  grid-column: 1 / -1;
  max-width: 12ch;
}
.about-recommendations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.about-recommendation-card {
  position: relative;
  display: flex;
  min-width: 0;
  padding: clamp(2rem, 4vw, 3.8rem);
  flex-direction: column;
  background: rgba(9, 11, 16, 0.9);
  transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}
.about-recommendation-card::before {
  content: "“";
  color: rgba(217, 119, 87, 0.34);
  font-family: var(--serif);
  font-size: 5.5rem;
  font-style: italic;
  line-height: 0.68;
  margin-bottom: 1.35rem;
}
.about-recommendation-card:hover {
  z-index: 2;
  background: rgba(16, 19, 27, 0.96);
  transform: translateY(-2px);
}
.about-recommendation-card blockquote {
  margin: 0;
}
.about-recommendation-card blockquote p {
  margin: 0 0 1rem;
  color: var(--bone);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.65vw, 1.48rem);
  line-height: 1.45;
}
.about-recommendation-card blockquote p:last-child {
  margin-bottom: 0;
}
.about-recommendation-card .recommendation-source {
  margin-top: auto;
  padding-top: 2rem;
}
.about-recommendations-link {
  margin-top: 2.4rem;
  text-align: right;
}
.booking-orbit {
  position: relative;
  padding-top: 4vh;
  padding-bottom: 18vh;
}
.booking-orbit::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 42%;
  left: 20%;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(127, 183, 217, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 6vw rgba(127, 183, 217, 0.025), 0 0 0 12vw rgba(217, 119, 87, 0.018);
  transform: translate(-50%, -50%);
  animation: booking-orbit-pulse 7s ease-in-out infinite;
}
.booking-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1.28fr);
  overflow: hidden;
  border: 1px solid var(--line-bright);
  background: rgba(7, 8, 12, 0.88);
  box-shadow: 0 55px 140px -75px #000;
  backdrop-filter: blur(24px);
}
.booking-shell::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--archive-blue), var(--rust), transparent);
}
.booking-copy {
  position: relative;
  display: flex;
  min-height: 700px;
  padding: clamp(2rem, 4.4vw, 4.5rem);
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(127, 183, 217, 0.08), transparent 42%),
    rgba(14, 17, 24, 0.62);
}
.booking-copy::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -110px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(217, 119, 87, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(217, 119, 87, 0.025), 0 0 0 68px rgba(127, 183, 217, 0.02);
}
.booking-coordinate {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
}
.booking-copy .section-title {
  margin-top: 1.2rem;
  font-size: clamp(3rem, 5.4vw, 5.6rem);
}
.booking-lead {
  max-width: 43ch;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 1.2vw, 1.08rem);
  line-height: 1.75;
}
.booking-readout {
  display: grid;
  margin-top: 2.6rem;
  border-top: 1px solid var(--line);
}
.booking-readout div {
  display: flex;
  padding: 0.9rem 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
}
.booking-readout span,
.booking-calendar-bar {
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.booking-readout b {
  color: var(--bone);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 400;
}
.booking-fallback {
  align-self: flex-start;
  margin-top: 2rem;
}
.booking-calendar {
  position: relative;
  min-width: 0;
  padding-top: 42px;
  background: #07080c;
}
.booking-calendar-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 42px;
  padding: 0 1.1rem;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 14, 20, 0.96);
}
.booking-calendar-bar i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--archive-blue), transparent);
}
.calendly-inline-widget {
  min-width: 320px;
  height: 700px;
}
.booking-noscript {
  padding: 2rem;
  color: var(--muted);
}
.booking-noscript a {
  color: var(--bone);
}
.recommendation-source {
  display: flex;
  margin: 2rem 0 0;
  padding-top: 1.05rem;
  align-items: baseline;
  gap: 0.45rem 1rem;
  border-top: 1px solid var(--line);
}
.recommendation-source strong {
  color: var(--bone);
  font-size: 0.78rem;
  font-weight: 700;
}
.recommendation-source span {
  color: var(--soft);
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .orbital-intro,
  .console,
  .booking-shell,
  .next-section,
  .feature-card,
  .newsletter {
    grid-template-columns: 1fr;
  }
  .booking-copy {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 760px) {
  .recommendation-source {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
  .about-recommendations {
    padding-top: 12vh;
    padding-bottom: 12vh;
  }
  .about-recommendations-head {
    display: block;
    margin-bottom: 3.5rem;
  }
  .about-recommendations-head .section-title {
    margin-top: 1rem;
  }
  .about-recommendations-grid {
    grid-template-columns: 1fr;
  }
  .about-recommendation-card {
    padding: 2.4rem 1.35rem;
  }
  .about-recommendation-card blockquote p {
    font-size: 1.12rem;
  }
  .about-recommendations-link {
    text-align: left;
  }
  .booking-orbit {
    padding-top: 2vh;
    padding-bottom: 14vh;
  }
  .booking-copy {
    padding: 2rem 1.4rem 2.5rem;
  }
  .booking-copy .section-title {
    font-size: clamp(2.8rem, 15vw, 4.6rem);
  }
  .booking-coordinate {
    display: none;
  }
  .booking-readout div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
  .booking-calendar {
    padding-top: 38px;
  }
  .booking-calendar-bar {
    height: 38px;
    padding: 0 0.8rem;
  }
  .calendly-inline-widget {
    height: 720px;
  }
}

/* ============================================================
   ABOUT · SPECTRAL ANALYSIS
   Append to static/root/css/inner-pages.css.
   Uses the tokens already defined at the top of that file
   (--void, --bone, --muted, --soft, --line, --rust, --blue,
    --serif, --sans, --mono, --ease). Nothing new is introduced.
   The .reveal / .in reveal contract is handled by inner-pages.js.
   ============================================================ */

/* padding-block, not the shorthand — see the note on .archive. This element
   carries .wrap, and a padding shorthand resets .wrap's horizontal gutter to 0;
   measured on the live page, the eyebrow and section title rendered at x=2 on a
   1352px window while every healthy section rendered at 56. */
.spec {
  padding-block: 13vh 15vh;
  position: relative;
}

.spec-head {
  margin-bottom: 4.5vh;
}

/* ---- the instrument ---------------------------------------------------- */

/* `top` clears the fixed .site-nav, which measures 76px on desktop and 77px
   below 820px (there mobile-navigation.css drops min-height to 0 and the height
   becomes content-driven, so the 66px the min-height rule suggests is never the
   real figure). One value covers both. The supplied value was 0, correct in the
   standalone reference because that page had no nav; here the rig sits at
   z-index 5 against the nav's 80, so at top:0 the band parked underneath it. */
.spec-rig {
  position: sticky;
  top: 77px;
  z-index: 5;
  padding: 1.4rem 0 1.2rem;
  background: linear-gradient(180deg, var(--void) 6%, rgba(7, 8, 12, 0.92) 70%, rgba(7, 8, 12, 0));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.spec-rig-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 0.95rem;
}

.spec-reading {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--soft);
  white-space: nowrap;
}

.spec-reading b {
  color: var(--rust);
  font-weight: 400;
}

/* a restrained cool-to-warm wash: reads as a spectrum without leaving the palette */
.spec-band {
  position: relative;
  height: 76px;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(127, 183, 217, 0.1), rgba(222, 219, 200, 0.05) 45%, rgba(217, 119, 87, 0.1)),
    var(--void-soft);
}

.spec-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(222, 219, 200, 0.05) 0 1px, transparent 1px 34px);
}

/* the six emission lines, positioned from their wavelength by about-spectra.js */
.spec-line {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(222, 219, 200, 0.55) 18%, rgba(222, 219, 200, 0.55) 82%, transparent);
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease), top 0.45s var(--ease), bottom 0.45s var(--ease);
}

.spec-line.on {
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent, var(--rust) 12%, var(--rust) 88%, transparent);
  box-shadow: 0 0 16px rgba(217, 119, 87, 0.85), 0 0 40px rgba(217, 119, 87, 0.35);
}

.spec-line b {
  position: absolute;
  left: 50%;
  top: -0.1rem;
  transform: translate(-50%, -115%);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: rgba(222, 219, 200, 0.3);
  transition: color 0.45s var(--ease);
}

.spec-line.on b {
  color: var(--bone);
}

/* the scan cursor sweeping the band */
.spec-scan {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(217, 119, 87, 0.15), var(--rust), rgba(217, 119, 87, 0.15));
}

.spec-scan::before {
  content: "";
  position: absolute;
  left: -22px;
  right: -22px;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(217, 119, 87, 0.16), transparent);
}

.spec-scan::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--rust);
  box-shadow: 0 0 12px var(--rust);
}

.spec-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: rgba(222, 219, 200, 0.28);
}

/* ---- the six sources -------------------------------------------------- */

.spec-list {
  margin-top: 6vh;
}

.spec-entry {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 2rem;
  padding: 3.4rem 0;
  border-top: 1px solid var(--line);
  position: relative;
}

.spec-entry:last-child {
  border-bottom: 1px solid var(--line);
}

/* the active marker rides the left edge */
.spec-entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3.4rem;
  width: 2px;
  height: 0;
  background: var(--rust);
  box-shadow: 0 0 12px var(--rust);
  transition: height 0.5s var(--ease);
}

.spec-entry.on::before {
  height: calc(100% - 6.8rem);
}

.spec-wl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(222, 219, 200, 0.34);
  padding-left: 1.1rem;
  transition: color 0.45s var(--ease);
}

.spec-entry.on .spec-wl {
  color: var(--rust);
}

.spec-wl span {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: rgba(222, 219, 200, 0.24);
  margin-top: 0.35rem;
}

.spec-src {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.spec-role {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.45s var(--ease);
}

.spec-entry.on .spec-role {
  color: var(--bone);
}

.spec-org {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(222, 219, 200, 0.3);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.25rem 0.6rem;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}

.spec-entry.on .spec-org {
  color: var(--bone);
  border-color: rgba(217, 119, 87, 0.55);
}

/* inactive sources are dimmed but deliberately still readable */
.spec-quote p {
  font-size: clamp(0.96rem, 1.05vw, 1.05rem);
  line-height: 1.72;
  color: rgba(222, 219, 200, 0.42);
  transition: color 0.5s var(--ease);
  max-width: 64ch;
}

.spec-quote p + p {
  margin-top: 0.85rem;
}

.spec-entry.on .spec-quote p {
  color: var(--muted);
}

.spec-entry.on .spec-quote p:first-child {
  color: var(--bone);
}

.spec-foot {
  margin-top: 5vh;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 820px) {
  .spec-band { height: 62px; }
  .spec-entry {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding: 2.8rem 0 2.8rem 1.1rem;
  }
  .spec-entry::before { top: 2.8rem; }
  .spec-entry.on::before { height: calc(100% - 5.6rem); }
  .spec-wl { padding-left: 0; }
  .spec-line b { font-size: 7.5px; }

  /* The readout prints a live organisation name out of the database, so its
     length is not knowable from here. The longest one currently published
     ("SBS · Professor and globally recognized…") renders 471px wide against a
     375px phone, and because .spec-reading is `white-space: nowrap` that pushed
     the document to 471px — the whole About page scrolled sideways, on every
     screen of it, not just this section.
     Clipped rather than wrapped: .spec-rig is sticky and the reading changes as
     you scroll, so a readout free to grow to two lines would change the band's
     height under your thumb every time it updated. min-width:0 is the part that
     actually does the work — a flex item will not shrink below its content
     width without it, so overflow alone would have changed nothing. */
  .spec-reading {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---- reduced motion: nothing dimmed away, every source stays readable -- */

@media (prefers-reduced-motion: reduce) {
  .spec-line,
  .spec-line b,
  .spec-entry::before,
  .spec-wl,
  .spec-role,
  .spec-org,
  .spec-quote p {
    transition: none;
  }
  .spec-quote p,
  .spec-entry.on .spec-quote p { color: var(--muted); }
  .spec-role { color: var(--bone); }
  .spec-wl { color: var(--rust); }
}

/* ==================================================================
   RECOMMENDATIONS · THE REGISTER
   Append to static/root/css/inner-pages.css.
   Uses the tokens already declared there. Everything is namespaced
   reg-* so it cannot touch another page.

   The idea: a readable document that is deliberately off-grid, and
   that compresses as it descends. Monumental at the head of the
   register, dense at the foot. Depth comes from parallax and scale,
   never from hijacking the scroll.
   ================================================================== */

.reg { --reg-rail: 58px; padding-left: var(--reg-rail); }
@media (max-width: 900px) { .reg { --reg-rail: 0px; } }

/* additive cloud layers — the starfield stays the site's own .cosmos */
.reg-neb {
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  filter: blur(95px);
  pointer-events: none;
  will-change: transform;
}
.reg-neb.a { width: 62vw; height: 62vw; left: -14vw; top: 4vh;  background: radial-gradient(circle, #1c2f52, transparent 66%); opacity: .46; }
.reg-neb.b { width: 56vw; height: 56vw; right: -16vw; top: 118vh; background: radial-gradient(circle, #432f6b, transparent 64%); opacity: .36; }
.reg-neb.c { width: 66vw; height: 66vw; left: -12vw; top: 250vh; background: radial-gradient(circle, #5a3324, transparent 62%); opacity: .28; }

/* ---------------- side register rail ---------------- */

.reg-rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 58px;
  z-index: 40;
  border-right: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(7, 8, 12, .92), rgba(7, 8, 12, .5));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  pointer-events: none;
}
.reg-rail-n { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--bone); }
.reg-rail-of { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; color: rgba(222, 219, 200, .3); }
.reg-rail-ticks { flex: 0 0 46vh; width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 0 14px; }
.reg-rail-ticks i {
  display: block;
  height: 1px;
  background: rgba(222, 219, 200, .28);
  transform-origin: left;
  transition: background .3s, transform .3s;
}
.reg-rail-ticks i.seen { background: var(--bone); }
.reg-rail-ticks i.now { background: var(--rust); transform: scaleX(1.9); }
.reg-rail-tier {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(222, 219, 200, .3);
  white-space: nowrap;
}
@media (max-width: 900px) { .reg-rail { display: none; } }

/* ---------------- masthead ---------------- */

/* Vertical padding only. The design source had `.mast > .wrap`, so a `padding`
   shorthand there was harmless; the template carries both classes on one
   element (`<header class="reg-mast wrap">`), where the shorthand's `0` beats
   .wrap's own padding-left/right and the masthead runs flush to the viewport
   edge at every width. Same for .reg-conc below. */
.reg-mast { padding-top: 13vh; padding-bottom: 7vh; position: relative; }
.reg-title {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 13vw, 12rem);
  line-height: .82;
  letter-spacing: -.045em;
  margin: .35rem 0 0;
  text-indent: -.045em;
}
.reg-title em { font-style: italic; display: block; }
.reg-sub { max-width: 46ch; margin-top: 2.4rem; font-size: 1.05rem; color: var(--muted); }
/* the count, enormous and outlined, drifting behind the title */
.reg-big {
  position: absolute;
  right: -2vw;
  top: 6vh;
  font-family: var(--serif);
  font-size: clamp(14rem, 34vw, 30rem);
  line-height: .7;
  letter-spacing: -.07em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(222, 219, 200, .15);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}

/* ---------------- the concordance ---------------- */

.reg-conc { padding-top: 6vh; padding-bottom: 9vh; border-top: 1px solid var(--bone); border-bottom: 1px solid var(--bone); }
.reg-conc h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.04;
  max-width: 28ch;
}
.reg-conc-note {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(222, 219, 200, .3);
  margin-top: .9rem;
}
.reg-bars { margin-top: 4vh; display: grid; gap: .15rem; }
.reg-bar {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: .28rem 0;
  border-bottom: 1px solid var(--line);
}
.reg-bar .w {
  font-family: var(--serif);
  line-height: .95;
  letter-spacing: -.03em;
  font-size: calc(.95rem + var(--f) * 2.5rem);
  white-space: nowrap;
}
.reg-bar .track { position: relative; height: 6px; align-self: center; background: rgba(222, 219, 200, .09); }
.reg-bar .track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--rust);
  transition: width 1.1s var(--ease);
}
.reg-conc.in .reg-bar .track i { width: calc(var(--f) * 100%); }
.reg-bar .c { font-family: var(--mono); font-size: 11px; color: var(--rust); }
.reg-bar .c span { color: rgba(222, 219, 200, .3); }
@media (max-width: 640px) {
  .reg-bar { grid-template-columns: 1fr auto; }
  .reg-bar .track { display: none; }
}

/* ---------------- tier bands ---------------- */

.reg-band-head {
  position: relative;
  margin: 11vh 0 5vh;
  border-top: 1px solid var(--bone);
  padding-top: 1.1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: baseline;
}
.reg-band-head .r { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--rust); }
.reg-band-head h3 { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1; }
.reg-band-head .s {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(222, 219, 200, .3);
  text-align: right;
}
/* a full-bleed rust rule marks each change of register */
.reg-band-head::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--pad));
  right: calc(-1 * var(--pad));
  top: -1px;
  height: 2px;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease);
}
.reg-band-head.in::after { transform: scaleX(1); }
@media (max-width: 700px) {
  .reg-band-head { grid-template-columns: auto 1fr; }
  .reg-band-head .s { display: none; }
}

/* ---------------- the register grid ---------------- */

.reg-band {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.8rem) clamp(1rem, 2vw, 2rem);
}
.reg-rec {
  position: relative;
  grid-column: var(--cs) / span var(--sp);
  margin-top: calc(var(--off) * 1vh);
}
.reg-rec-in {
  position: relative;
  z-index: 1;
  opacity: .18;
  transform: translateY(16px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.reg-rec.in .reg-rec-in { opacity: 1; transform: none; }
/* the numeral: its own parallax layer behind the words */
.reg-ghost {
  position: absolute;
  font-family: var(--serif);
  line-height: .72;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(222, 219, 200, .18);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.reg-rank { font-family: var(--mono); letter-spacing: .24em; color: var(--rust); font-size: 10px; }
.reg-lead { font-family: var(--serif); letter-spacing: -.015em; margin: .7rem 0 0; }
.reg-rest { margin-top: .85rem; color: var(--muted); }
.reg-rest p + p { margin-top: .65rem; }
.reg-src {
  margin-top: 1.2rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
  display: flex;
  gap: .7rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.reg-role { font-weight: 700; font-size: .9rem; }
.reg-org {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.reg-org::before { content: "— "; }

/* the register compresses as authority descends */
.reg-b1 .reg-rec { --sp: 12; --cs: 1; margin-top: 0; }
.reg-b1 .reg-ghost { left: -.05em; top: -.42em; font-size: clamp(9rem, 22vw, 20rem); }
.reg-b1 .reg-lead { font-size: clamp(1.7rem, 4.2vw, 3.4rem); line-height: 1.1; max-width: 22ch; }
.reg-b1 .reg-rest { max-width: 60ch; font-size: 1rem; columns: 2; column-gap: 2.6rem; }
.reg-b1 .reg-rec + .reg-rec { margin-top: 9vh; padding-top: 9vh; border-top: 1px solid var(--line); }

.reg-b4 .reg-ghost { right: -.02em; top: -.3em; font-size: clamp(5rem, 11vw, 10rem); }
.reg-b4 .reg-lead { font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.2; }
.reg-b4 .reg-rest { font-size: .93rem; }

.reg-b14 .reg-ghost { display: none; }
.reg-b14 .reg-rank { font-size: 9.5px; }
.reg-b14 .reg-lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.28; }
.reg-b14 .reg-rest { font-size: .88rem; }

.reg-b22 .reg-ghost { display: none; }
.reg-b22 .reg-rank { font-size: 9px; }
.reg-b22 .reg-lead { font-size: .98rem; line-height: 1.34; font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
.reg-b22 .reg-rest { font-size: .86rem; line-height: 1.6; }
.reg-b22 .reg-src { margin-top: .9rem; }

@media (max-width: 900px) {
  .reg-band { grid-template-columns: repeat(6, 1fr); gap: 5vh 1rem; }
  .reg-rec { grid-column: 1 / span 6 !important; margin-top: 0 !important; }
  .reg-b1 .reg-rest { columns: 1; }
  .reg-b1 .reg-rec + .reg-rec { margin-top: 6vh; padding-top: 6vh; }
  .reg-ghost { font-size: 6rem !important; }

  /* .reg-big is the outlined count parked behind the title at `right: -2vw`,
     deliberately bleeding off the edge. On desktop the wrap's own padding
     absorbs it; at 375px the same -2vw lands 8px past the viewport and the page
     gained a sideways scroll. Clipped at the masthead rather than pulled back to
     `right: 0`, so the numeral still runs off the edge the way it was drawn —
     .reg-mast holds only the eyebrow, title, sub and this numeral, so there is
     nothing in it that needs to escape. Kept off desktop: .reg-mast is a `wrap`,
     and clipping to its box there would cut the bleed the design wants. */
  .reg-mast { overflow: hidden; }
}

/* ---------------- closing: inverts to paper, one arrival ---------------- */

.reg-close {
  position: relative;
  z-index: 1;
  background: var(--bone);
  color: var(--void);
  margin-top: 14vh;
  padding: 18vh 0 20vh;
}
.reg-close .eyebrow { color: #8f3a1e; }
.reg-close h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 5.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 24ch;
  margin: 1rem 0 1.4rem;
}
.reg-close p { color: rgba(7, 8, 12, .66); max-width: 48ch; margin-bottom: 2.2rem; }
.reg-close .button { background: var(--void); color: var(--bone); }
.reg-close .button:hover { background: #8f3a1e; color: var(--bone); }

/* ---------------- gates for motion and no-JS ---------------- */

@media (prefers-reduced-motion: reduce) {
  .reg-rec-in { opacity: 1; transform: none; transition: none; }
  .reg-band-head::after { transform: scaleX(1); transition: none; }
  .reg-conc .reg-bar .track i { width: calc(var(--f) * 100%); transition: none; }
  .reg-ghost, .reg-big, .reg-neb { display: none; }
}
html:not(.js) .reg-rec-in { opacity: 1; transform: none; }
html:not(.js) .reg-ghost, html:not(.js) .reg-big { display: none; }
html:not(.js) .reg-band-head::after { transform: scaleX(1); }
html:not(.js) .reg-conc .reg-bar .track i { width: calc(var(--f) * 100%); }

/* ---- Type that sits on the lit planet ----
   #planet-stage is a fixed, full-viewport WebGL layer, and two headings are
   composed directly over the body's brightest area rather than beside it:
   Contact's lead ("You will get a straight reply from me...") and the
   Recommendations masthead ("The work, in their words."). Ivory on a lit cream
   limb is not a legible pairing at any size, and unlike Solutions and Kits
   these pages carry no scrim to darken it.
   A shadow is the right tool here because it travels with the glyphs instead of
   covering the picture — the same fix, and the same reasoning, as the mobile
   copy on Solutions and Kits. It costs no layout (text-shadow does not reflow)
   and is invisible everywhere the backdrop is already dark, so it is not scoped
   to a breakpoint: the overlap exists at every width. */
.hero-copy .display,
.hero-copy .lead,
.reg-title,
.reg-sub {
  text-shadow:
    0 1px 12px rgba(8, 8, 11, 0.92),
    0 0 4px rgba(8, 8, 11, 0.78);
}