/* Loos Extended — add your .woff2 files to /assets/fonts/ */
@font-face {
  font-family: 'Loos Extended';
  src: url('../assets/fonts/loos-extended-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Host Grotesk from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Kill all letter-spacing globally */
* {
  letter-spacing: 0 !important;
}

/* Cap all border-radius at 0.275rem */
* {
  border-radius: 0.275rem !important;
}

nav,
header,
footer,
section,
#nav-shell,
#mobile-menu,
#hero-canvas,
.hero-grid,
.hero-spotlight,
.cta-band,
.cta-wash,
.page-outro,
.marquee,
.proof-item,
.nav-link::before,
.nav-link::after,
.footer-wordmark,
.footer-wordmark img,
.footer-wordmark-glow {
  border-radius: 0 !important;
}

/* The footer slab is an inset card, not a full-bleed band, but its corners stay
   square like everything else on the page. Its overflow clip trims the
   wordmark to the same square edge. */
.footer-slab {
  border-radius: 0 !important;
}

/* All font-heading elements: uppercase, 600 weight */
.font-heading {
  text-transform: uppercase;
  font-weight: 600;
}

/* Anchor offset for the fixed header */
section[id] {
  scroll-margin-top: 7rem;
}

/* ===========================================================================
   Entrance animation guard
   The inline <head> script adds `.anim-ready` before first paint and removes it
   again if js/site.js never boots, so a blocked CDN leaves a readable page.
   =========================================================================== */
.anim-ready [data-anim],
.anim-ready [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

/* ===========================================================================
   HEADER
   A full-bleed transparent bar at the top of the page that contracts into a
   floating slab once scrolled, with a sliding indicator behind the links and
   a scroll-progress hairline along its bottom edge.
   =========================================================================== */
#site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: 0;
  transition: padding 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
#site-header.is-stuck {
  padding: 0.75rem 1rem;
}

#nav-shell {
  position: relative;
  /* matches the pages' max-w-7xl container, so the mark lines up with the
     copy beneath it; contracts inwards once the bar lifts off the top */
  max-width: 80rem;
  margin: 0 auto;
  border: 1px solid transparent;
  background-color: rgba(20, 18, 53, 0);
  transition:
    max-width 500ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 400ms ease,
    border-color 400ms ease,
    box-shadow 400ms ease;
}
#site-header.is-stuck #nav-shell {
  max-width: 74rem;
  background-color: rgba(18, 16, 48, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
/* An open mobile menu needs an opaque bar behind it */
#site-header.menu-open #nav-shell {
  background-color: rgba(18, 16, 48, 0.97);
}

#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6rem;
  padding: 0 1.5rem;
  transition: height 500ms cubic-bezier(0.22, 1, 0.36, 1), padding 500ms ease;
}
@media (min-width: 1024px) {
  #navbar { padding: 0 2rem; }
}
#site-header.is-stuck #navbar {
  height: 4.5rem;
}

/* Logo mark shrinks with the bar */
.nav-mark {
  display: block;
  height: 3.5rem;
  width: auto;
  transition: height 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) {
  .nav-mark { height: 4rem; }
}
#site-header.is-stuck .nav-mark {
  height: 3rem;
}

/* The mark is lit, not spun. Pointing at it runs a narrow diagonal light
   across the form — a violet copy of the mark, revealed only through a band
   that travels corner to corner. The mark itself never moves. */
.nav-mark-stack {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.nav-mark-fill { fill: #fff; }
.nav-mark-light {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  fill: #A78BFA;
  opacity: 0;
  -webkit-mask-image: linear-gradient(135deg, transparent 45%, #000 50%, transparent 55%);
          mask-image: linear-gradient(135deg, transparent 45%, #000 50%, transparent 55%);
  -webkit-mask-size: 260% 260%;
          mask-size: 260% 260%;
  -webkit-mask-position: 100% 100%;
          mask-position: 100% 100%;
  transition:
    -webkit-mask-position 900ms cubic-bezier(0.45, 0, 0.3, 1),
    mask-position 900ms cubic-bezier(0.45, 0, 0.3, 1),
    opacity 180ms ease;
}
.nav-logo:hover .nav-mark-light,
.nav-logo:focus-visible .nav-mark-light {
  opacity: 1;
  -webkit-mask-position: 0% 0%;
          mask-position: 0% 0%;
}

/* Link group with a sliding block behind the hovered / active item */
#nav-links {
  position: relative;
  display: none;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  #nav-links { display: flex; }
}

/* Nav links — Loos Extended, and a focus reticle rather than a pill.
   Two corner brackets snap out to the corners of the link, and the label
   scrambles and resolves (js/site.js). The current page keeps its brackets. */
.nav-link {
  position: relative;
  display: inline-block;
  padding: 0.6rem 0.9rem;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.58);
  transition: color 260ms ease;
  white-space: nowrap;
  text-align: center;
}

.nav-link::before,
.nav-link::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #A78BFA;
  opacity: 0;
  transition: opacity 240ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link::before {
  top: 0;
  left: 0;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: translate(6px, 6px);
}
.nav-link::after {
  bottom: 0;
  right: 0;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: translate(-6px, -6px);
}

.nav-link:hover,
.nav-link.is-active {
  color: #fff;
}
.nav-link:hover::before,
.nav-link:hover::after,
.nav-link.is-active::before,
.nav-link.is-active::after {
  opacity: 1;
  transform: translate(0, 0);
}
/* The current page's reticle is solid; a hovered one is the lighter tint.
   Only the two drawn sides are recoloured — the shorthand would repaint the
   transparent pair and close each corner back into a square. */
.nav-link.is-active::before {
  border-top-color: #8B5CF6;
  border-left-color: #8B5CF6;
}
.nav-link.is-active::after {
  border-bottom-color: #8B5CF6;
  border-right-color: #8B5CF6;
}

/* --- Call to action ------------------------------------------------------ */
.nav-cta {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-left: 1rem;
  padding: 0.8rem 1.4rem;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  background: #6D28D9;
  transition: background-color 220ms ease;
}
.nav-cta:hover {
  background: #5B21B6;
}

/* Scroll progress hairline */
#scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(to right, #6D28D9, #A78BFA);
  opacity: 0;
  transition: opacity 300ms ease;
}
#site-header.is-stuck #scroll-progress {
  opacity: 1;
}

/* Burger that morphs into a cross */
#menu-toggle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  color: #fff;
}
@media (min-width: 768px) {
  #menu-toggle { display: none; }
}
#menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}
#site-header.menu-open #menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#site-header.menu-open #menu-toggle span:nth-child(2) {
  opacity: 0;
}
#site-header.menu-open #menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Full-screen overlay menu */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 1.75rem 3rem;
  background: #141235;
  overflow-y: auto;
}
#mobile-menu.hidden {
  display: none;
}
.mobile-link {
  display: block;
  padding: 0.65rem 0;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(2rem, 11vw, 3.25rem);
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.9);
}
.mobile-link.is-active {
  color: #A78BFA;
}
.mobile-meta {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===========================================================================
   HERO
   =========================================================================== */
.hero {
  perspective: 1400px;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Blueprint grid, faded at the edges */
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 10%, transparent 75%);
}

/* Light that trails the cursor */
.hero-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.08) 38%, transparent 68%);
  transition: opacity 500ms ease;
}
.hero-spotlight.is-on {
  opacity: 1;
}

/* Pulsing dot in the eyebrow pill */
.hero-pulse {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50% !important;
  background: #A78BFA;
  flex-shrink: 0;
}
.hero-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50% !important;
  background: #A78BFA;
  animation: hero-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes hero-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  80%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Headline pieces produced by the splitter */
.hero-word {
  display: inline-block;
  white-space: nowrap;
  perspective: 600px;
}
.hero-char {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

/* Rotating headline phrase */
.hero-rotator {
  position: relative;
  display: inline-block;
  vertical-align: top;
  color: #A78BFA;
}
.hero-rotator::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 2px;
  background: linear-gradient(to right, #8B5CF6, rgba(139, 92, 246, 0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-rotator.is-live::after {
  transform: scaleX(1);
}
.hero-rotator [data-word] {
  display: inline-block;
}

/* Buttons that lean towards the cursor */
.magnetic {
  will-change: transform;
}

/* Sheen sweeping across a primary button on hover */
.btn-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  transition: left 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-primary:hover .btn-sheen {
  left: 120%;
}

/* Phone mockup — 3D tilt container */
.hero-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-phone {
  filter: drop-shadow(0 45px 80px rgba(0, 0, 0, 0.6));
}

/* Glow behind the phone */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34rem;
  height: 34rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(109, 40, 217, 0.55) 0%, rgba(109, 40, 217, 0.12) 45%, transparent 70%);
  filter: blur(28px);
}

/* Hero proof row — one rule per cell, so the rhythm comes from the rules
   rather than from three labels of very different widths. */
.proof-item {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.proof-item::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-top: -1.3125rem;
  margin-bottom: 1.1875rem;
  background: #8B5CF6;
}

/* Scroll cue */
.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
}

/* ===========================================================================
   MARQUEE — capability strip that scrolls, and pauses when you point at it
   =========================================================================== */
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem;
  min-width: 100%;
  animation: marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.42);
  transition: color 300ms ease;
}
.marquee-item:hover {
  color: #fff;
}
.marquee-dot {
  width: 6px;
  height: 6px;
  border-radius: 50% !important;
  background: #6D28D9;
  flex-shrink: 0;
}

/* ===========================================================================
   INTERACTIVE CARDS
   A radial highlight follows the cursor across the card surface.
   =========================================================================== */
[data-spotlight] {
  position: relative;
  isolation: isolate;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease, box-shadow 400ms ease;
}
[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(109, 40, 217, 0.1), transparent 65%);
  transition: opacity 350ms ease;
}
[data-spotlight]:hover::before {
  opacity: 1;
}
[data-spotlight]:hover {
  transform: translateY(-4px);
}
/* Large panels (a form, say) get the highlight without the lift */
[data-spotlight].no-lift:hover {
  transform: none;
}

/* Dark-ground variant */
[data-spotlight][data-tone="dark"]::before {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(167, 139, 250, 0.16), transparent 65%);
}

/* Oversized ghost number behind a card */
.card-index {
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  font-size: 3.5rem;
  line-height: 1;
  color: rgba(109, 40, 217, 0.07);
  pointer-events: none;
  transition: color 400ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-spotlight]:hover .card-index {
  color: rgba(109, 40, 217, 0.14);
  transform: translateY(-3px);
}

/* Icon tile that fills with brand colour on hover */
.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 350ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.icon-tile svg,
.icon-tile span {
  transition: color 350ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-spotlight]:hover .icon-tile {
  background-color: #6D28D9;
  transform: rotate(-6deg);
}
[data-spotlight]:hover .icon-tile svg,
[data-spotlight]:hover .icon-tile span {
  color: #fff;
  transform: rotate(6deg);
}

/* Accent rule that draws itself in when a card is pointed at */
.card-rule {
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 1.5rem;
  background: linear-gradient(to right, #6D28D9, #A78BFA);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-spotlight]:hover .card-rule {
  transform: scaleX(1);
}

/* Section headings get a small animated kicker */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: #6D28D9;
}
.section-kicker::before {
  content: '';
  width: 2rem;
  height: 2px;
  background: currentColor;
}
.section-kicker.on-dark {
  color: #A78BFA;
}

/* ===========================================================================
   CTA band — a violet wash that follows the cursor
   =========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, 0.28), transparent 62%);
  transition: opacity 600ms ease;
}
.cta-band:hover .cta-wash {
  opacity: 1;
}

/* ===========================================================================
   FOOTER
   One dark slab with the links crowded into the top edge and the wordmark
   running out of the bottom of it at full width.
   =========================================================================== */
/* The closing CTA and the footer sit on one ground so a single cursor light
   can span both. The footer's own background is therefore transparent — the
   wrapper paints the indigo, and the wash sits above it but below the slab. */
.page-outro {
  position: relative;
  background: #1E1B4B;
  overflow: hidden;
}
.page-outro > .cta-wash {
  z-index: 0;
}
.page-outro:hover > .cta-wash {
  opacity: 1;
}

.site-footer {
  position: relative;
  z-index: 1;
  background: transparent;
  /* Inset on all four sides, so the slab reads as a card on the band above */
  padding: 1rem;
  overflow: hidden;
}


.footer-slab {
  position: relative;
  background: #0E0C24;
  overflow: hidden;
  padding: 3.5rem 1.75rem 0;
}
@media (min-width: 1024px) {
  .footer-slab { padding: 4.5rem 3rem 0; }
}

/* Violet hairline across the top of the slab */
.footer-slab::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(139, 92, 246, 0.8), transparent);
}

/* ---------------------------------------------------------------------------
   FOOTER TOP — brand, two link columns and the call to action, set in one row
   and separated by hairlines rather than empty space.
   --------------------------------------------------------------------------- */
.footer-top {
  display: grid;
  gap: 2.75rem;
}
@media (min-width: 768px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .footer-top {
    grid-template-columns: 1.3fr 1fr 1.15fr 1.15fr;
    gap: 0;
  }
  /* Every column after the brand is fenced off by a hairline */
  .footer-top > * + * {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 2.75rem;
  }
}

.footer-glyph {
  display: block;
  height: 4.25rem;
  width: auto;
}
.footer-mark-rule {
  display: block;
  width: 2.75rem;
  height: 2px;
  margin: 1.1rem 0 1.35rem;
  background: linear-gradient(to right, #6D28D9, #A78BFA);
}
.footer-blurb {
  max-width: 24rem;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.875rem;
  line-height: 1.75;
}
.footer-col-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 1.5rem;
}
/* Same short rule that opens every section kicker on the page */
.footer-col-title::before {
  content: '';
  width: 1.15rem;
  height: 1px;
  background: rgba(167, 139, 250, 0.55);
  flex-shrink: 0;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Address and number, each on a row that copies itself */
.footer-contact .copy-row + .copy-row { margin-top: 0.55rem; }
.footer-note {
  margin-top: 1rem;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.32);
}

/* Links share the nav's face, so the footer reads as the same instrument */
.footer-link {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
  transition: color 200ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: #A78BFA;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-link:hover {
  color: #fff;
  transform: translateX(4px);
}
.footer-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* The oversized wordmark. The box is the mark's width by the height of the
   ERTEKAAZ line alone (290 of the 491-unit viewBox), so the TECHNOLOGIES
   sub-line below it is always cropped away. Both side edges fade out. */
.footer-wordmark {
  position: relative;
  margin: 2.5rem -1.75rem -1px;
  width: auto;
  aspect-ratio: 2396 / 290;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.4) 16%, #000 42%, #000 58%, rgba(0, 0, 0, 0.4) 84%, rgba(0, 0, 0, 0.04) 100%);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.4) 16%, #000 42%, #000 58%, rgba(0, 0, 0, 0.4) 84%, rgba(0, 0, 0, 0.04) 100%);
}
@media (min-width: 1024px) {
  .footer-wordmark { margin: 3rem -3rem -1px; }
}
.footer-wordmark img,
.footer-wordmark .footer-wordmark-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* the mark's own aspect ratio, so the glyphs are never distorted */
  aspect-ratio: 2396 / 491;
}
.footer-wordmark img {
  opacity: 0.42;
}
/* A violet light inside the letterforms that tracks the cursor */
.footer-wordmark-glow {
  opacity: 0;
  cursor: default;
  transition: opacity 500ms ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(196, 181, 253, 0.95), rgba(139, 92, 246, 0.45) 35%, transparent 68%);
}
/* The mark is inlined as a data: URI rather than referenced as a file. Chrome
   gives every file:// page an opaque origin, so a mask-image pointing at
   ../assets/logo-03.svg is a cross-origin fetch and gets blocked — the glow
   then renders unmasked when the page is opened by double-clicking the HTML
   instead of served over http. Inlining removes the fetch entirely. */
@supports (mask-image: url("data:image/svg+xml,%3Csvg/%3E")) or (-webkit-mask-image: url("data:image/svg+xml,%3Csvg/%3E")) {
  .footer-wordmark-glow {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 2396.37 491.21'%3E%3Cpath d='M283.65,42.67v44.81H100.52v41.22h164.95v41.89H100.52v44.47h184.74v45.15H43.4V42.67h240.25Z'/%3E%3Cpath d='M506.4,42.67c48.06,0,76.64,26.97,76.64,64.6v9.73c0,28.58-16.57,50.98-44.17,60.07l54.23,83.11h-65.27l-51.28-78.59h-95.46v78.59h-57.45V42.63h182.8l-.03.03ZM381.09,138.12h110.08c22.07,0,33.44-6.81,33.44-23.38v-4.86c0-15.9-11.37-24.35-33.44-24.35h-110.08v52.59Z'/%3E%3Cpath d='M880.1,42.67v46.42h-109.11v171.09h-57.45V89.09h-109.11v-46.42h275.67Z'/%3E%3Cpath d='M1148.66,42.67v44.81h-183.13v41.22h164.95v41.89h-164.95v44.47h184.74v45.15h-241.89V42.67h240.28Z'/%3E%3Cpath d='M1245.73,42.67v83.11h10.4l119.17-83.11h74.66l-141.57,99.01v10.4l144.16,108.13h-77.28l-116.55-87.67h-12.98v87.67h-57.15V42.67h57.15,0Z'/%3E%3Cpath d='M1650.29,42.67l113.3,217.54h-57.45l-25.32-48.7h-147.71l-25.32,48.7h-55.51l113-217.54h85.06-.03ZM1555.81,167.67h102.26l-44.47-85.06h-13.95l-43.84,85.06h0Z'/%3E%3Cpath d='M1975.34,42.67l113.3,217.54h-57.45l-25.32-48.7h-147.71l-25.32,48.7h-55.51l113-217.54h85.06-.03ZM1880.85,167.67h102.26l-44.47-85.06h-13.95l-43.84,85.06Z'/%3E%3Cpath d='M2350.02,42.67v72.08l-178.23,92.2v6.81h181.19v46.42h-244.14v-72.08l178.57-92.2v-6.81h-175.65v-46.42h238.31-.03Z'/%3E%3Cpath d='M469.17,335.01v15.06h-59.8v97.17h-18.41v-97.17h-59.97v-15.06h138.19Z'/%3E%3Cpath d='M602.69,335.01v14.56h-99.68v34.01h90.79v13.72h-90.79v35.18h100.52v14.72h-118.77v-112.23h117.93v.03Z'/%3E%3Cpath d='M692.48,333.66c40.38,0,67.85,15.73,67.85,45.55v.84h-18.92v-.84c0-18.08-17.24-29.48-48.9-29.48h-5.7c-31.16,0-49.24,11.91-49.24,37.2v7.55c0,25.96,18.08,38.03,49.24,38.03h5.7c31.49,0,49.57-12.24,49.57-29.15v-1.01h18.75v1.01c0,28.14-27.97,45.21-68.36,45.21h-5.7c-39.54,0-68.19-16.9-68.19-54.1v-7.55c0-37.03,28.64-53.26,68.19-53.26h5.7Z'/%3E%3Cpath d='M799.37,335.01v47.73h89.79v-47.73h18.41v112.23h-18.41v-49.41h-89.79v49.41h-18.41v-112.23h18.41Z'/%3E%3Cpath d='M954.67,335.01l84.09,88.11h4.36v-88.11h17.58v112.23h-23.95l-84.09-88.11h-4.36v88.11h-17.58v-112.23h23.95Z'/%3E%3Cpath d='M1159.03,333.66c39.38,0,70.03,19.76,70.03,54.6v5.7c0,35.52-30.66,54.6-70.03,54.6h-7.38c-39.88,0-70.87-19.08-70.87-54.6v-5.7c0-34.85,30.99-54.6,70.87-54.6h7.38ZM1099.73,388.27v5.7c0,25.29,21.1,38.54,51.92,38.54h6.71c30.66,0,51.92-13.25,51.92-38.54v-5.7c0-24.79-21.26-38.54-51.92-38.54h-6.71c-30.82,0-51.92,13.75-51.92,38.54Z'/%3E%3Cpath d='M1267.56,335.01v97.17h93.31v15.09h-111.72v-112.23h18.41v-.03Z'/%3E%3Cpath d='M1440.8,333.66c39.38,0,70.03,19.76,70.03,54.6v5.7c0,35.52-30.66,54.6-70.03,54.6h-7.38c-39.88,0-70.84-19.08-70.84-54.6v-5.7c0-34.85,30.99-54.6,70.84-54.6h7.38ZM1381.5,388.27v5.7c0,25.29,21.1,38.54,51.92,38.54h6.71c30.66,0,51.92-13.25,51.92-38.54v-5.7c0-24.79-21.26-38.54-51.92-38.54h-6.71c-30.82,0-51.92,13.75-51.92,38.54Z'/%3E%3Cpath d='M1600.25,333.66c37.87,0,66.85,16.4,66.85,45.88v1.01h-18.92v-1.01c-.17-18.25-18.75-29.82-47.9-29.82h-7.71c-28.81,0-48.23,12.24-48.23,37.2v7.55c0,25.62,19.42,38.03,48.23,38.03h7.71c28.98,0,48.57-11.57,48.57-29.65v-1.17h19.08v45.55h-16.07v-17.41h-4.53c-10.73,12.07-28.81,18.75-49.74,18.75h-7.38c-35.85,0-64.83-17.07-64.83-54.1v-7.55c0-36.69,30.15-53.26,67.18-53.26h7.71-.03Z'/%3E%3Cpath d='M1769.8,335.01v15.06h-32.33v82.07h32.33v15.09h-83.08v-15.09h32.33v-82.07h-32.33v-15.06h83.08Z'/%3E%3Cpath d='M1908.32,335.01v14.56h-99.65v34.01h90.79v13.72h-90.79v35.18h100.49v14.72h-118.77v-112.23h117.93v.03Z'/%3E%3Cpath d='M1992.07,333.66c36.36,0,59.8,11.91,59.8,37.2v5.37h-17.41v-5.37c0-16.74-17.24-23.11-42.36-23.11h-5.03c-25.79,0-42.4,5.87-42.4,16.9v2.18c0,11.74,13.25,14.09,52.26,17.24,42.4,3.35,57.29,12.75,57.29,30.99v2.35c0,19.42-21.77,31.16-61.31,31.16h-5.03c-40.89,0-62.82-12.07-62.82-37.2v-6.71h17.58v6.71c0,17.41,16.4,23.11,45.21,23.11h5.03c27.3,0,43.54-5.37,43.54-16.57v-2.52c0-11.07-12.41-15.4-50.91-18.41-39.04-3.02-58.63-9.73-58.63-29.31v-2.18c0-20.09,23.44-31.83,60.14-31.83h5.06Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 2396.37 491.21'%3E%3Cpath d='M283.65,42.67v44.81H100.52v41.22h164.95v41.89H100.52v44.47h184.74v45.15H43.4V42.67h240.25Z'/%3E%3Cpath d='M506.4,42.67c48.06,0,76.64,26.97,76.64,64.6v9.73c0,28.58-16.57,50.98-44.17,60.07l54.23,83.11h-65.27l-51.28-78.59h-95.46v78.59h-57.45V42.63h182.8l-.03.03ZM381.09,138.12h110.08c22.07,0,33.44-6.81,33.44-23.38v-4.86c0-15.9-11.37-24.35-33.44-24.35h-110.08v52.59Z'/%3E%3Cpath d='M880.1,42.67v46.42h-109.11v171.09h-57.45V89.09h-109.11v-46.42h275.67Z'/%3E%3Cpath d='M1148.66,42.67v44.81h-183.13v41.22h164.95v41.89h-164.95v44.47h184.74v45.15h-241.89V42.67h240.28Z'/%3E%3Cpath d='M1245.73,42.67v83.11h10.4l119.17-83.11h74.66l-141.57,99.01v10.4l144.16,108.13h-77.28l-116.55-87.67h-12.98v87.67h-57.15V42.67h57.15,0Z'/%3E%3Cpath d='M1650.29,42.67l113.3,217.54h-57.45l-25.32-48.7h-147.71l-25.32,48.7h-55.51l113-217.54h85.06-.03ZM1555.81,167.67h102.26l-44.47-85.06h-13.95l-43.84,85.06h0Z'/%3E%3Cpath d='M1975.34,42.67l113.3,217.54h-57.45l-25.32-48.7h-147.71l-25.32,48.7h-55.51l113-217.54h85.06-.03ZM1880.85,167.67h102.26l-44.47-85.06h-13.95l-43.84,85.06Z'/%3E%3Cpath d='M2350.02,42.67v72.08l-178.23,92.2v6.81h181.19v46.42h-244.14v-72.08l178.57-92.2v-6.81h-175.65v-46.42h238.31-.03Z'/%3E%3Cpath d='M469.17,335.01v15.06h-59.8v97.17h-18.41v-97.17h-59.97v-15.06h138.19Z'/%3E%3Cpath d='M602.69,335.01v14.56h-99.68v34.01h90.79v13.72h-90.79v35.18h100.52v14.72h-118.77v-112.23h117.93v.03Z'/%3E%3Cpath d='M692.48,333.66c40.38,0,67.85,15.73,67.85,45.55v.84h-18.92v-.84c0-18.08-17.24-29.48-48.9-29.48h-5.7c-31.16,0-49.24,11.91-49.24,37.2v7.55c0,25.96,18.08,38.03,49.24,38.03h5.7c31.49,0,49.57-12.24,49.57-29.15v-1.01h18.75v1.01c0,28.14-27.97,45.21-68.36,45.21h-5.7c-39.54,0-68.19-16.9-68.19-54.1v-7.55c0-37.03,28.64-53.26,68.19-53.26h5.7Z'/%3E%3Cpath d='M799.37,335.01v47.73h89.79v-47.73h18.41v112.23h-18.41v-49.41h-89.79v49.41h-18.41v-112.23h18.41Z'/%3E%3Cpath d='M954.67,335.01l84.09,88.11h4.36v-88.11h17.58v112.23h-23.95l-84.09-88.11h-4.36v88.11h-17.58v-112.23h23.95Z'/%3E%3Cpath d='M1159.03,333.66c39.38,0,70.03,19.76,70.03,54.6v5.7c0,35.52-30.66,54.6-70.03,54.6h-7.38c-39.88,0-70.87-19.08-70.87-54.6v-5.7c0-34.85,30.99-54.6,70.87-54.6h7.38ZM1099.73,388.27v5.7c0,25.29,21.1,38.54,51.92,38.54h6.71c30.66,0,51.92-13.25,51.92-38.54v-5.7c0-24.79-21.26-38.54-51.92-38.54h-6.71c-30.82,0-51.92,13.75-51.92,38.54Z'/%3E%3Cpath d='M1267.56,335.01v97.17h93.31v15.09h-111.72v-112.23h18.41v-.03Z'/%3E%3Cpath d='M1440.8,333.66c39.38,0,70.03,19.76,70.03,54.6v5.7c0,35.52-30.66,54.6-70.03,54.6h-7.38c-39.88,0-70.84-19.08-70.84-54.6v-5.7c0-34.85,30.99-54.6,70.84-54.6h7.38ZM1381.5,388.27v5.7c0,25.29,21.1,38.54,51.92,38.54h6.71c30.66,0,51.92-13.25,51.92-38.54v-5.7c0-24.79-21.26-38.54-51.92-38.54h-6.71c-30.82,0-51.92,13.75-51.92,38.54Z'/%3E%3Cpath d='M1600.25,333.66c37.87,0,66.85,16.4,66.85,45.88v1.01h-18.92v-1.01c-.17-18.25-18.75-29.82-47.9-29.82h-7.71c-28.81,0-48.23,12.24-48.23,37.2v7.55c0,25.62,19.42,38.03,48.23,38.03h7.71c28.98,0,48.57-11.57,48.57-29.65v-1.17h19.08v45.55h-16.07v-17.41h-4.53c-10.73,12.07-28.81,18.75-49.74,18.75h-7.38c-35.85,0-64.83-17.07-64.83-54.1v-7.55c0-36.69,30.15-53.26,67.18-53.26h7.71-.03Z'/%3E%3Cpath d='M1769.8,335.01v15.06h-32.33v82.07h32.33v15.09h-83.08v-15.09h32.33v-82.07h-32.33v-15.06h83.08Z'/%3E%3Cpath d='M1908.32,335.01v14.56h-99.65v34.01h90.79v13.72h-90.79v35.18h100.49v14.72h-118.77v-112.23h117.93v.03Z'/%3E%3Cpath d='M1992.07,333.66c36.36,0,59.8,11.91,59.8,37.2v5.37h-17.41v-5.37c0-16.74-17.24-23.11-42.36-23.11h-5.03c-25.79,0-42.4,5.87-42.4,16.9v2.18c0,11.74,13.25,14.09,52.26,17.24,42.4,3.35,57.29,12.75,57.29,30.99v2.35c0,19.42-21.77,31.16-61.31,31.16h-5.03c-40.89,0-62.82-12.07-62.82-37.2v-6.71h17.58v6.71c0,17.41,16.4,23.11,45.21,23.11h5.03c27.3,0,43.54-5.37,43.54-16.57v-2.52c0-11.07-12.41-15.4-50.91-18.41-39.04-3.02-58.63-9.73-58.63-29.31v-2.18c0-20.09,23.44-31.83,60.14-31.83h5.06Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
  .site-footer:hover .footer-wordmark-glow {
    opacity: 1;
  }
}

/* ===========================================================================
   Reduced motion — everything settles into its final state
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .anim-ready [data-anim],
  .anim-ready [data-reveal] {
    opacity: 1;
  }
  .hero-pulse::after,
  .marquee-track {
    animation: none;
  }
  .btn-sheen {
    transition: none;
  }
  .hero-rotator::after,
  .card-rule {
    transform: scaleX(1);
    transition: none;
  }
  [data-spotlight]:hover {
    transform: none;
  }
}

/* ===========================================================================
   ===========================================================================
   PART TWO — INNER PAGES (about / services / contact)

   The vocabulary here is deliberately small and shared across the three
   pages, so the inner pages read as the same site as the home page rather
   than three separate experiments:

     .page-hero    the home page's hero machinery (constellation, cursor
                   light, grid) at inner-page scale
     .stage        a framed dark panel with a grid, a glow, corner brackets
                   and its own particle field — the home hero in a box
     .ledger       full-width rows with an index, a rule and a panel that
                   opens; used for values, capabilities and questions
     .track        a numbered sequence with a rail that fills as you scroll
     .reveal-list  oversized type rows that summon a preview under the cursor

   Everything degrades: no JS means every panel is open, every rail is full,
   and every reveal is already in place.
   ===========================================================================
   =========================================================================== */

/* Full-bleed things must stay square — see the note at the top of the file. */
.page-hero,
.page-hero canvas,
.page-hero .hero-grid,
.page-hero .hero-spotlight,
.page-hero-fade,
.stage-grid,
.subnav,
.subnav-inner,
.subnav-indicator,
.ledger,
.ledger-row,
.ledger-head,
.track-rail,
.track-fill,
.reveal-list,
.reveal-row,
.eyebrow,
.marquee-thin {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   Shared bits
   --------------------------------------------------------------------------- */

/* The hero pill from the home page, as a class the inner pages can reuse */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.eyebrow.on-light {
  border-color: rgba(109, 40, 217, 0.18);
  background: rgba(109, 40, 217, 0.06);
  color: #6D28D9;
}

/* Small caps label with a leading rule, on any ground */
.rule-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.4);
}
.rule-label::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

/* ---------------------------------------------------------------------------
   PAGE HERO — the home hero's layers, shorter
   --------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
  background: #1E1B4B;
}
.page-hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.page-hero-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 7rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, #1E1B4B);
}

/* A hairline ladder down the left of the hero copy — echoes the proof rules */
.hero-meta {
  display: grid;
  gap: 1.5rem 2.5rem;
}
@media (min-width: 640px) {
  .hero-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   STAGE — a framed dark panel that behaves like the hero
   --------------------------------------------------------------------------- */
.stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #1E1B4B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  perspective: 1100px;
}
.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.stage-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 5%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 5%, transparent 78%);
}
.stage-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 26rem;
  height: 26rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(109, 40, 217, 0.5) 0%, rgba(109, 40, 217, 0.12) 45%, transparent 70%);
  filter: blur(26px);
}
/* The nav reticle, grown up: four brackets that push out when pointed at */
.stage-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(167, 139, 250, 0.55);
  pointer-events: none;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), border-color 400ms ease;
}
.stage-corner.tl { top: 14px; left: 14px; border-right-color: transparent; border-bottom-color: transparent; transform: translate(5px, 5px); }
.stage-corner.tr { top: 14px; right: 14px; border-left-color: transparent; border-bottom-color: transparent; transform: translate(-5px, 5px); }
.stage-corner.bl { bottom: 14px; left: 14px; border-right-color: transparent; border-top-color: transparent; transform: translate(5px, -5px); }
.stage-corner.br { bottom: 14px; right: 14px; border-left-color: transparent; border-top-color: transparent; transform: translate(-5px, -5px); }
.stage:hover .stage-corner { transform: translate(0, 0); border-color: #A78BFA; }

/* Slow dashed rings behind the mark */
.stage-ring {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: stage-spin 46s linear infinite;
}
.stage-ring.reverse {
  animation-duration: 72s;
  animation-direction: reverse;
}
@keyframes stage-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* The full combination mark, sitting on the tilt plane */
.stage-logo {
  height: clamp(13rem, 24vw, 20rem);
  width: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

/* ---------------------------------------------------------------------------
   MISSION — words that light up as the band scrolls through
   --------------------------------------------------------------------------- */
.mission-text .word {
  display: inline-block;
  color: rgba(28, 28, 46, 0.22);
  transition: color 200ms linear;
}
.mission-text .word.on-dark {
  color: rgba(255, 255, 255, 0.18);
}
.mission-text .word.accent {
  color: rgba(109, 40, 217, 0.3);
}

/* ---------------------------------------------------------------------------
   LEDGER — indexed rows that open
   --------------------------------------------------------------------------- */
.ledger {
  border-top: 1px solid rgba(28, 28, 46, 0.1);
}
.ledger-row {
  position: relative;
  border-bottom: 1px solid rgba(28, 28, 46, 0.1);
  isolation: isolate;
}
/* violet wash that sweeps in from the left on hover / when open */
.ledger-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(109, 40, 217, 0.07), transparent 65%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ledger-row:hover::before,
.ledger-row.is-open::before {
  transform: scaleX(1);
}

.ledger-head {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.25rem;
  gap: 1rem;
  align-items: center;
  width: 100%;
  padding: 1.6rem 1rem 1.6rem 0.25rem;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 768px) {
  .ledger-head {
    grid-template-columns: 4rem minmax(0, 15rem) 1fr 2.25rem;
    gap: 1.5rem;
    padding: 2rem 1.5rem 2rem 0.75rem;
  }
}
.ledger-index {
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: rgba(109, 40, 217, 0.45);
  transition: color 300ms ease;
}
.ledger-title {
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.0625rem;
  color: #1C1C2E;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) {
  .ledger-title { font-size: 1.25rem; }
}
.ledger-row:hover .ledger-title,
.ledger-row.is-open .ledger-title {
  transform: translateX(6px);
}
.ledger-note {
  display: none;
  font-size: 0.875rem;
  color: #6B7280;
}
@media (min-width: 768px) {
  .ledger-note { display: block; }
}

/* plus that becomes a minus */
.ledger-toggle {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(28, 28, 46, 0.15);
  justify-self: end;
  transition: background-color 350ms ease, border-color 350ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ledger-toggle::before,
.ledger-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 1.5px;
  background: currentColor;
  color: #6D28D9;
  transform: translate(-50%, -50%);
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}
.ledger-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.ledger-row.is-open .ledger-toggle {
  background: #6D28D9;
  border-color: #6D28D9;
  transform: rotate(180deg);
}
.ledger-row.is-open .ledger-toggle::before,
.ledger-row.is-open .ledger-toggle::after {
  color: #fff;
}
.ledger-row.is-open .ledger-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

/* the panel, opened with grid-template-rows so no height has to be measured */
.ledger-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ledger-row.is-open .ledger-panel {
  grid-template-rows: 1fr;
}
.ledger-panel > div {
  overflow: hidden;
  min-height: 0;
}
.ledger-body {
  padding: 0 1rem 2rem 0.25rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 400ms ease 80ms, transform 500ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
}
@media (min-width: 768px) {
  .ledger-body { padding: 0 4rem 2.5rem 5.5rem; }
}
.ledger-row.is-open .ledger-body {
  opacity: 1;
  transform: translateY(0);
}

/* dark ground variant */
.ledger.on-dark { border-top-color: rgba(255, 255, 255, 0.12); }
.ledger.on-dark .ledger-row { border-bottom-color: rgba(255, 255, 255, 0.12); }
.ledger.on-dark .ledger-row::before { background: linear-gradient(to right, rgba(139, 92, 246, 0.16), transparent 65%); }
.ledger.on-dark .ledger-index { color: rgba(167, 139, 250, 0.7); }
.ledger.on-dark .ledger-title { color: #fff; }
.ledger.on-dark .ledger-note { color: rgba(255, 255, 255, 0.42); }
.ledger.on-dark .ledger-toggle { border-color: rgba(255, 255, 255, 0.22); }
.ledger.on-dark .ledger-toggle::before,
.ledger.on-dark .ledger-toggle::after { color: #A78BFA; }
.ledger.on-dark .ledger-body { color: rgba(255, 255, 255, 0.6); }

/* Without JS every panel is open, so nothing is hidden behind a toggle. */
.no-js-open .ledger-panel { grid-template-rows: 1fr; }
.no-js-open .ledger-body { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   TRACK — a numbered sequence with a rail that fills as you scroll
   --------------------------------------------------------------------------- */
.track {
  position: relative;
  padding-left: 3.25rem;
}
@media (min-width: 768px) {
  .track { padding-left: 4.5rem; }
}
.track-rail {
  position: absolute;
  top: 0.75rem;
  bottom: 3rem;
  left: 1.09375rem;
  width: 2px;
  background: rgba(28, 28, 46, 0.12);
}
@media (min-width: 768px) {
  .track-rail { left: 1.46875rem; }
}
.track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #6D28D9, #A78BFA);
  transform: scaleY(1);
  transform-origin: top center;
}
.track-step {
  position: relative;
  padding-bottom: 2.75rem;
}
.track-step:last-child { padding-bottom: 0; }
.track-dot {
  position: absolute;
  top: 0;
  left: -3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(28, 28, 46, 0.15);
  background: #FAFAFA;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  color: #6B7280;
  transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) {
  .track-dot { left: -4.5rem; width: 3rem; height: 3rem; font-size: 0.75rem; }
}
.track-step.is-lit .track-dot {
  background: #6D28D9;
  border-color: #6D28D9;
  color: #fff;
  transform: scale(1.06);
}
.track-title {
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.0625rem;
  color: #1C1C2E;
  margin-bottom: 0.5rem;
}
.track.on-dark .track-rail { background: rgba(255, 255, 255, 0.14); }
.track.on-dark .track-step:not(.is-lit) .track-dot { background: #1E1B4B; border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.5); }
.track.on-dark .track-title { color: #fff; }

/* ---------------------------------------------------------------------------
   REVEAL LIST — oversized type rows that summon a preview under the cursor
   --------------------------------------------------------------------------- */
.reveal-list {
  border-top: 1px solid rgba(28, 28, 46, 0.1);
}
.reveal-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(28, 28, 46, 0.1);
}
@media (min-width: 768px) {
  .reveal-row { padding: 1.6rem 0; }
}
.reveal-title {
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 4.2vw, 2.6rem);
  line-height: 1.1;
  color: rgba(28, 28, 46, 0.32);
  transition: color 350ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-row:hover .reveal-title {
  color: #1C1C2E;
  transform: translateX(1.25rem);
}
.reveal-meta {
  flex-shrink: 0;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  color: rgba(28, 28, 46, 0.28);
  transition: color 350ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-row:hover .reveal-meta {
  color: #6D28D9;
  transform: translateX(-0.5rem);
}

/* the floating panel; positioned by JS, only ever on a fine pointer */
.preview-follow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 45;
  width: 16rem;
  height: 11rem;
  margin: -5.5rem 0 0 -8rem;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background: #1E1B4B;
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.75);
  will-change: transform, opacity;
}
.preview-follow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.35), transparent 60%);
  pointer-events: none;
}
.preview-motif {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.preview-motif.is-live { display: flex; }
.preview-motif { padding: 0.9rem 1.1rem 2.4rem; }
.preview-label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0.7rem 0.9rem;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.75);
  background: linear-gradient(to top, rgba(10, 9, 30, 0.9), transparent);
}

/* ---------------------------------------------------------------------------
   SUBNAV — services section index that sticks under the header
   The header occupies exactly 6rem in both its states, so that is the offset.
   --------------------------------------------------------------------------- */
.subnav {
  position: sticky;
  top: 6rem;
  z-index: 40;
  background: rgba(18, 16, 48, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.subnav-inner {
  position: relative;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav-link {
  position: relative;
  flex-shrink: 0;
  padding: 1rem 1.1rem;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.45);
  transition: color 280ms ease;
}
.subnav-link:hover { color: rgba(255, 255, 255, 0.85); }
.subnav-link.is-active { color: #fff; }
.subnav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(to right, #6D28D9, #A78BFA);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* the subnav is the second sticky layer, so anchors need to clear both */
.has-subnav section[id] { scroll-margin-top: 10.5rem; }

/* ---------------------------------------------------------------------------
   SWITCH — a vertical capability list driving one stage
   --------------------------------------------------------------------------- */
.switch {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 1024px) {
  .switch {
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}
.switch-list {
  display: flex;
  flex-direction: column;
  border-left: 2px solid rgba(28, 28, 46, 0.1);
}
.switch-tab {
  position: relative;
  width: 100%;
  padding: 1rem 1rem 1rem 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 350ms ease, padding-left 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.switch-tab::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 2px;
  background: #6D28D9;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.switch-tab:hover { background: rgba(109, 40, 217, 0.04); }
.switch-tab.is-active::before { transform: scaleY(1); }
.switch-tab.is-active {
  background: #fff;
  padding-left: 1.6rem;
  box-shadow: 0 18px 40px -28px rgba(28, 28, 46, 0.5);
}
.switch-tab-title {
  display: block;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8125rem;
  color: rgba(28, 28, 46, 0.55);
  transition: color 300ms ease;
}
.switch-tab.is-active .switch-tab-title { color: #1C1C2E; }
.switch-tab-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: #6B7280;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 350ms ease, max-height 450ms ease;
}
.switch-tab.is-active .switch-tab-note { opacity: 1; max-height: 5rem; }

.switch-stage {
  position: relative;
  min-height: 26rem;
}
.switch-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem 1.75rem 4.5rem;
  visibility: hidden;
  opacity: 0;
  z-index: 2;
}
@media (min-width: 640px) {
  .switch-panel { padding: 2.5rem 2.5rem 4.5rem; }
}
.switch-panel.is-active { visibility: visible; opacity: 1; }
/* Without JS the panels stack normally instead of overlapping invisibly. */
.no-js-open .switch-panel { position: relative; inset: auto; visibility: visible; opacity: 1; }
.no-js-open .switch-stage { min-height: 0; }

/* the line art inside a panel */
.diagram { width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.diagram .draw {
  fill: none;
  stroke: #A78BFA;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.diagram .draw.dim { stroke: rgba(167, 139, 250, 0.35); }
.diagram .node { fill: #1E1B4B; stroke: #8B5CF6; stroke-width: 1.5; }
.diagram .pad { fill: rgba(139, 92, 246, 0.18); stroke: none; }
.diagram .dot { fill: #C4B5FD; }

/* ---------------------------------------------------------------------------
   BROWSER — a window that builds itself
   --------------------------------------------------------------------------- */
.browser {
  position: relative;
  overflow: hidden;
  background: #141235;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.browser-dot {
  width: 9px;
  height: 9px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.browser-url {
  flex: 1;
  margin-left: 0.5rem;
  padding: 0.3rem 0.7rem;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.45);
}
.browser-body {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 1.25rem;
}
.blk {
  background: rgba(167, 139, 250, 0.16);
  height: 1.5rem;
  transform-origin: center;
  /* Every block moves on its own beat, so the layout resolves in a sweep
     rather than a single snap. --i is set per block in the markup. */
  transition:
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 45ms),
    background-color 620ms ease calc(var(--i, 0) * 45ms),
    opacity 520ms ease calc(var(--i, 0) * 45ms);
}
.blk.tall { height: 4.5rem; }
.blk.solid { background: #6D28D9; }
.blk.soft { background: rgba(255, 255, 255, 0.07); }

/* Cluttered: knocked off the grid, sized at random, colours fighting. The
   mess is scoped to .is-seen, which only JS sets — so a page with no JS to
   tidy it back up gets the clean grid from the start. */
.build.is-messy.is-seen .blk {
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) scale(var(--sx, 1), var(--sy, 1));
}
.build.is-messy.is-seen .blk.clash-amber { background: rgba(245, 158, 11, 0.34); }
.build.is-messy.is-seen .blk.clash-pink { background: rgba(244, 114, 182, 0.30); }
.build.is-messy.is-seen .blk.clash-teal { background: rgba(45, 212, 191, 0.30); }

/* Held back until the panel is on screen, so the clutter arrives with it. */
.anim-ready .build:not(.is-seen) .blk { opacity: 0; }

/* The bloat layer — pop-ups, ad slots, cookie bars. */
.browser-clutter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.clutter {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  background: #1B1840;
  transition: opacity 420ms ease, transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
}
.clutter-ad {
  top: 3.6rem;
  right: 1rem;
  padding: 0.75rem 1.1rem;
  border: 1px dashed rgba(245, 158, 11, 0.6);
  color: rgba(251, 191, 36, 0.85);
  transform: rotate(3deg);
}
.clutter-popup {
  top: 45%;
  left: 22%;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(244, 114, 182, 0.55);
  color: rgba(249, 168, 212, 0.9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  transform: rotate(-2.5deg);
}
.clutter-x { color: rgba(255, 255, 255, 0.4); font-size: 0.6rem; }
.clutter-cookie {
  left: 1rem;
  bottom: 0.9rem;
  max-width: 60%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.55);
}
.clutter-chip {
  padding: 0.2rem 0.4rem;
  background: rgba(139, 92, 246, 0.5);
  color: #fff;
}
/* Organised: the bloat leaves, the grid holds. */
.build:not(.is-seen) .clutter,
.build.is-tidy .clutter {
  opacity: 0;
  transform: translateY(10px) scale(0.94);
}
/* The control sits under the window, not on top of it. */
.build { display: flex; flex-direction: column; align-items: stretch; }
.browser-replay {
  align-self: flex-start;
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(20, 18, 53, 0.18);
  background: transparent;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  color: #141235;
  transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease;
}
.browser-replay:hover { color: #6D28D9; border-color: #A78BFA; }
/* While the page is a mess the button is the obvious thing to press. */
.build.is-messy.is-seen .browser-replay {
  background: #6D28D9;
  border-color: #6D28D9;
  color: #fff;
}
.build.is-messy.is-seen .browser-replay:hover { background: #5B21B6; border-color: #5B21B6; color: #fff; }

/* ---------------------------------------------------------------------------
   STACK — property records that fan out
   --------------------------------------------------------------------------- */
.stack {
  position: relative;
  /* One card tall plus two fan steps. The fan step is a card height plus a
     hair, which is what lets every record clear the one above it instead of
     half-hiding it — so both numbers move together. */
  --card-h: 8.25rem;
  --fan: 8.75rem;
  height: calc(var(--card-h) + var(--fan) * 2);
  perspective: 1000px;
}
.stack-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--card-h);
  overflow: hidden;
  padding: 1.25rem 1.35rem;
  background: #232055;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), background-color 450ms ease, border-color 450ms ease;
}
.stack-card:nth-child(1) { transform: translateY(0) scale(1); z-index: 3; }
.stack-card:nth-child(2) { transform: translateY(1.15rem) scale(0.955); z-index: 2; }
.stack-card:nth-child(3) { transform: translateY(2.3rem) scale(0.91); z-index: 1; }
.stack:hover .stack-card:nth-child(1) { transform: translateY(0) rotate(-0.8deg) scale(1); }
.stack:hover .stack-card:nth-child(2) { transform: translateY(var(--fan)) rotate(0.5deg) scale(1); }
.stack:hover .stack-card:nth-child(3) { transform: translateY(calc(var(--fan) * 2)) rotate(1.4deg) scale(1); }
.stack:hover .stack-card { background: #2a2663; border-color: rgba(167, 139, 250, 0.35); }

/* A narrow column wraps the record title onto a second line, so the card
   needs another row's worth of height — and the fan step follows it. */
@media (max-width: 639px) {
  .stack { --card-h: 9.75rem; --fan: 10.25rem; }
}
.stack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.stack-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}
.stack-row + .stack-row { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.stack-bar {
  height: 4px;
  background: rgba(167, 139, 250, 0.25);
  flex: 1;
  max-width: 6rem;
}
.stack-bar span { display: block; height: 100%; background: #8B5CF6; }

/* ---------------------------------------------------------------------------
   CONTACT — fields, chips, completion ring
   --------------------------------------------------------------------------- */
.field {
  position: relative;
}
.field-input {
  /* Block, so a textarea has no inline descender gap under it — the focus
     line below sits flush on the input's own underline. Square, so the
     underline runs straight instead of curling up at both ends. */
  display: block;
  border-radius: 0 !important;
  width: 100%;
  padding: 1.75rem 2rem 0.7rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(28, 28, 46, 0.15);
  color: #1C1C2E;
  font-size: 1rem;
  outline: none;
  resize: none;
  transition: border-color 300ms ease;
}
.field-input::placeholder { color: transparent; }
.field-label {
  position: absolute;
  left: 0;
  top: 1.55rem;
  pointer-events: none;
  color: #6B7280;
  font-size: 1rem;
  transform-origin: left top;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms ease;
}
.field-input:focus ~ .field-label,
.field.is-filled .field-label {
  transform: translateY(-1.55rem) scale(0.68);
  color: #6D28D9;
}
.field-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #6D28D9, #A78BFA);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.field-input:focus ~ .field-line { transform: scaleX(1); }
.field-check {
  position: absolute;
  right: 0;
  bottom: 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  color: #6D28D9;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 300ms ease, transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.field.is-valid .field-check { opacity: 1; transform: scale(1); }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(28, 28, 46, 0.14);
  font-size: 0.875rem;
  color: #6B7280;
  cursor: pointer;
  overflow: hidden;
  transition: color 280ms ease, border-color 280ms ease;
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.chip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #6D28D9;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chip { isolation: isolate; }
.chip:hover { border-color: rgba(109, 40, 217, 0.5); color: #6D28D9; }
.chip.is-checked {
  color: #fff;
  border-color: #6D28D9;
}
.chip.is-checked::before { transform: scaleX(1); }
.chip input:focus-visible ~ span { text-decoration: underline; }

.ring-wrap {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
}
.ring-wrap svg { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(28, 28, 46, 0.1); stroke-width: 3; }
.ring-fill {
  fill: none;
  stroke: #6D28D9;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  color: #6D28D9;
}

/* copy-to-clipboard row */
.copy-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px dashed rgba(28, 28, 46, 0.18);
  text-align: left;
  cursor: pointer;
  transition: border-color 280ms ease, background-color 280ms ease;
}
.copy-row:hover { border-color: #6D28D9; background: rgba(109, 40, 217, 0.04); }
.copy-value {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.copy-hint {
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: #6D28D9;
  flex-shrink: 0;
}

/* Same row on the footer's dark slab, a size down */
.copy-row.on-dark {
  padding: 0.7rem 0.85rem;
  gap: 0.75rem;
  border-color: rgba(255, 255, 255, 0.16);
}
.copy-row.on-dark:hover {
  border-color: #A78BFA;
  background: rgba(167, 139, 250, 0.07);
}
.copy-row.on-dark .copy-value {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.78);
}
.copy-row.on-dark svg { color: #A78BFA; }
.copy-row.on-dark .copy-hint { color: #A78BFA; }

/* ---------------------------------------------------------------------------
   Thin marquee — a quieter version of the home page strip
   --------------------------------------------------------------------------- */
.marquee-thin .marquee-item {
  font-size: 0.8125rem;
  gap: 2rem;
  color: rgba(28, 28, 46, 0.35);
}
.marquee-thin .marquee-track { gap: 2rem; padding-right: 2rem; animation-duration: 52s; }
.marquee-thin .marquee-dot { width: 4px; height: 4px; background: #A78BFA; }

/* ---------------------------------------------------------------------------
   Reduced motion — settle everything
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .stage-ring { animation: none; }
  .nav-mark-light { transition: none; }
  .nav-logo:hover .nav-mark-light { opacity: 0; }
  .ledger-panel { transition: none; }
  .track-fill { transform: scaleY(1); }
  .mission-text .word { color: inherit; }
  .preview-follow { display: none; }
  .reveal-row:hover .reveal-title,
  .reveal-row:hover .reveal-meta,
  .ledger-row:hover .ledger-title { transform: none; }
  .stack:hover .stack-card { transform: none; }
  .blk, .clutter { transition: none; }
  .stage:hover .stage-corner { transition: none; }
}

/* --- late additions -------------------------------------------------------- */

/* The hero's cursor light, at panel scale */
.hero-spotlight.sm {
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0.1) 38%, transparent 68%);
}

/* The track dot has to match whatever band it sits on */
.track.on-tint .track-step:not(.is-lit) .track-dot { background: #F1F0FB; }
.track.on-white .track-step:not(.is-lit) .track-dot { background: #fff; }

/* A word that has been lit keeps its colour when JS is off */
.mission-text.is-static .word { color: inherit; }

/* A filled field keeps its label lifted even before js/site.js adds is-filled —
   every input carries placeholder=" " so this selector can do the work alone. */
.field-input:not(:placeholder-shown) ~ .field-label {
  transform: translateY(-1.55rem) scale(0.68);
  color: #6D28D9;
}


/* ---------------------------------------------------------------------------
   SITUATIONS — three cards that each hold a small working diagram. Pointing at
   one resolves it: the loose cells consolidate, the opening takes the shape of
   what has to pass through it, and three answers become one. Coarse pointers
   get the resolved state as the card arrives (js/site.js).
   --------------------------------------------------------------------------- */
.situation {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid #F3F4F6;
  /* The index sits in its own band above the diagram, as on the other cards */
  padding: 3.75rem 2rem 2rem;
  transition: border-color 300ms ease;
}
.situation:hover { border-color: rgba(139, 92, 246, 0.25); }

.motif {
  position: relative;
  height: 9.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #F8F7FE;
  border: 1px solid rgba(109, 40, 217, 0.07);
}

/* Two lines are reserved for every title, so the body copy starts on the same
   line across all three cards however long the heading runs. */
.situation h3 { min-height: 3.5rem; }

/* The state line above the title flips with the diagram */
.situation-state {
  position: relative;
  height: 0.75rem;
  margin-bottom: 0.85rem;
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.625rem;
  line-height: 0.75rem;
}
.situation-state span {
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.state-now { color: rgba(28, 28, 46, 0.35); }
.state-next { color: #6D28D9; opacity: 0; transform: translateY(6px); }
.situation:hover .state-now,
.situation.is-resolved .state-now { opacity: 0; transform: translateY(-6px); }
.situation:hover .state-next,
.situation.is-resolved .state-next { opacity: 1; transform: translateY(0); }

/* 01 — a sheet of loose cells that closes into rows */
.sheet {
  display: grid;
  grid-template-columns: repeat(6, 1.75rem);
  gap: 5px;
}
.sheet-cell {
  height: 0.9rem;
  /* Square, so the cells read as one bar once they close up */
  border-radius: 0 !important;
  background: rgba(28, 28, 46, 0.10);
  transition:
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 22ms),
    background-color 520ms ease calc(var(--i, 0) * 22ms);
}
.sheet-cell.lead { background: rgba(28, 28, 46, 0.16); }
.situation:hover .sheet-cell,
.situation.is-resolved .sheet-cell {
  transform: translateX(var(--tx, 0));
  background: rgba(139, 92, 246, 0.18);
}
.situation:hover .sheet-cell.lead,
.situation.is-resolved .sheet-cell.lead { background: #6D28D9; }
.situation:hover .sheet-cell.accent,
.situation.is-resolved .sheet-cell.accent { background: rgba(109, 40, 217, 0.45); }

/* 02 — the opening takes the shape of what has to go through it */
.fit-hole {
  width: 4.75rem;
  height: 4.75rem;
  border: 2px dashed rgba(109, 40, 217, 0.35);
  border-radius: 50% !important;
  transition: border-radius 700ms cubic-bezier(0.22, 1, 0.36, 1), border-color 700ms ease;
}
.fit-peg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.9rem;
  height: 2.9rem;
  margin: -1.45rem 0 0 -1.45rem;
  background: #6D28D9;
  transform: translate(-5.6rem, -1.6rem) rotate(-16deg);
  transition: transform 780ms cubic-bezier(0.34, 1.2, 0.4, 1);
}
.situation:hover .fit-hole,
.situation.is-resolved .fit-hole {
  border-radius: 2px !important;
  border-color: rgba(109, 40, 217, 0.55);
}
.situation:hover .fit-peg,
.situation.is-resolved .fit-peg { transform: translate(0, 0) rotate(0deg); }

/* 03 — three answers to one question become one */
.wires { width: 100%; height: 100%; }
.wire {
  stroke: #A78BFA;
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 1, 0.36, 1) 120ms, opacity 200ms ease 120ms;
}
.node {
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.node circle {
  fill: #fff;
  stroke: rgba(28, 28, 46, 0.18);
  stroke-width: 1.5;
  transition: stroke 520ms ease;
}
.node .reading {
  font-family: 'Loos Extended', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  text-anchor: middle;
  transition: opacity 320ms ease;
}
.node .reading.before { fill: rgba(28, 28, 46, 0.45); }
.node .reading.after { fill: #6D28D9; opacity: 0; }
.situation:hover .wire,
.situation.is-resolved .wire { stroke-dashoffset: 0; opacity: 1; }
.situation:hover .node,
.situation.is-resolved .node { transform: translate(var(--nx, 0), var(--ny, 0)); }
.situation:hover .node circle,
.situation.is-resolved .node circle { stroke: #8B5CF6; }
.situation:hover .node .reading.before,
.situation.is-resolved .node .reading.before { opacity: 0; }
.situation:hover .node .reading.after,
.situation.is-resolved .node .reading.after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sheet-cell, .fit-hole, .fit-peg, .wire, .node, .node circle,
  .node .reading, .situation-state span { transition: none; }
}