/* ============================================================
   Arkandis — visual identity, v3
   Cold lab neutrals · ink black · one ultramarine accent
   Archivo variable (tight, sentence case) · Spline Sans Mono (data)
   Layout: numbered prospectus — sticky section labels left, content right
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/Archivo.woff2) format('woff2');
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/SplineSansMono.woff2) format('woff2');
}

/* ---------- tokens (committed dark theme) ---------- */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --ground: #0c0e11;
  --surface: #14161b;
  --ink: #e7e9ed;
  --muted: #9aa1ab;
  --faint: #676e79;
  --accent: #8494ff;
  --ok: #37c08d;
  --line: rgba(231, 233, 237, 0.2);
  --line-soft: rgba(231, 233, 237, 0.09);

  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Spline Sans Mono', 'SF Mono', Menlo, monospace;

  --pad-x: clamp(1.25rem, 4.5vw, 4.5rem);
  /* content is inset from the margin rails so text never sits on the hairline */
  --content-x: calc(var(--pad-x) + clamp(1rem, 2.5vw, 2.75rem));
  --label-w: 15rem;

  color-scheme: dark;
}

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* the nav is sticky, so anchored sections must clear it — it grows to
   two rows below 44rem, hence the larger offset there */
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
/* the mobile nav is one row now, so anchors no longer need to clear two */
@media (max-width: 44rem) { html { scroll-padding-top: 3.75rem; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--accent); color: var(--ground); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1, h2, h3 { line-height: 1.08; text-wrap: balance; }

.u { text-decoration: underline; text-underline-offset: 3px; }
.u:hover { color: var(--accent); }

.icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--accent);
  flex-shrink: 0;
  display: block;
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: 2.25rem;
  padding: 1.05rem var(--content-x);
  background: var(--ground);
  border-bottom: 1px solid var(--line-soft);
}
.wordmark {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-links {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}
.nav-links a, .nav-contact {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-contact { color: var(--accent); font-weight: 600; }
.nav-contact:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Narrow screens: one row, not two. There are only three targets — Approach,
   Contact, Book — so a hamburger would hide a menu smaller than the button that
   opens it. The old layout wrapped Approach onto its own full-width row, which
   cost ~3rem of permanent sticky header for a single link. Everything fits on
   one line once the type and the button are tightened. */
@media (max-width: 44rem) {
  .nav {
    align-items: center;
    gap: 0.85rem;
    padding: 0.3rem var(--pad-x);
  }
  .wordmark { font-size: 1.05rem; }
  .nav-links { margin-left: auto; gap: 0.85rem; }
  /* the links are the smallest things in the bar; the block padding is what
     gives them a finger-sized hit area without changing how they look */
  .nav-links a, .nav-contact {
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .nav .book-btn {
    display: flex;
    align-items: center;
    padding-inline: 0.8rem;
    font-size: 0.8rem;
  }
}

/* Only on the genuinely tiny screens does something have to go, and it's
   "Contact ↗" — it points at the same conversation the button does, and the
   footer still carries the address. */
@media (max-width: 22rem) {
  .nav { gap: 0.6rem; }
  .nav-contact { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(4rem, 12vh, 8rem) var(--content-x) clamp(3rem, 7vh, 5rem);
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero > :not(.hero-canvas) { position: relative; }
.hero-kicker {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.hero h1 {
  font-size: clamp(2.05rem, 7.4vw, 6.25rem);
  font-weight: 560;
  font-stretch: 101%;
  letter-spacing: -0.032em;
  line-height: 1.01;
}
.hero-line {
  display: block;
  overflow: hidden;
  padding-block: 0.04em; /* keep descenders/overshoot inside the mask */
}
.hero-line span {
  display: block;
  transform: translateY(112%);
  animation: hero-rise 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.hero-line:nth-child(2) span { animation-delay: 0.1s; }
@keyframes hero-rise { to { transform: translateY(0); } }

.hero-foot {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  flex-wrap: wrap;
}
.hero-desc {
  max-width: 35rem;
  font-size: 1.04rem;
  color: var(--muted);
}
.hero-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
}
.hero-links a {
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--accent);
  white-space: nowrap;
}
.hero-links a::after {
  content: ' \2192';
  display: inline-block;
  transition: transform 0.2s ease;
}
.hero-links a:hover::after { transform: translateX(4px); }

/* ---------- hero grid + 3D network orb ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 68rem) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 2rem; }
}

.hero-orb {
  display: none;
  position: relative;
  height: clamp(20rem, 32vw, 27rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 68rem) { .hero-orb { display: flex; } }

.orb-canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.orb-canvas:active { cursor: grabbing; }

.orb-caption {
  position: absolute;
  bottom: -0.25rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.hero-orb:hover .orb-caption { opacity: 1; }

/* ---------- thesis ---------- */
.thesis {
  padding: clamp(3rem, 7vw, 5.5rem) var(--content-x);
  border-top: 1px solid var(--line-soft);
  background: rgba(20, 22, 27, 0.6);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .thesis { background: var(--surface); }
}
.thesis p {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 480;
  letter-spacing: -0.018em;
  line-height: 1.35;
  max-width: 36ch;
  text-wrap: balance;
  color: var(--muted);
}
.thesis em {
  font-style: normal;
  color: var(--ink);
}

/* ---------- sections ---------- */
.sec {
  position: relative;
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  padding: clamp(3.25rem, 6.5vw, 5.5rem) var(--content-x);
  border-top: 1px solid var(--line-soft);
}

/* crosshair marks where the section rule meets the margins */
.sec::before,
.sec::after {
  content: '+';
  position: absolute;
  top: 0;
  transform: translateY(-52%);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1;
  color: var(--faint);
  background: var(--ground);
  padding-inline: 0.15em;
}
.sec::before { left: calc(var(--pad-x) - 0.5em); }
.sec::after { right: calc(var(--pad-x) - 0.5em); }
.thesis + .sec::before,
.thesis + .sec::after { content: none; }

.sec-label > :first-child {
  position: sticky;
  top: 4.25rem;
}
.sec-label p {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.sec-icon-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sec-num {
  color: var(--accent);
  margin-right: 1em;
}

.sec-body h2 {
  font-size: clamp(1.55rem, 2.9vw, 2.35rem);
  font-weight: 560;
  letter-spacing: -0.025em;
  max-width: 27ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}

@media (max-width: 56rem) {
  .sec { grid-template-columns: 1fr; gap: 1.5rem; }
  .sec-label > :first-child { position: static; }
}

@keyframes dd-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ---------- modalities ---------- */
.modalities { display: block; }
.mod-row {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: 1rem 2.5rem;
  padding: 1.45rem 1rem;
  margin-left: -1rem;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
  transition: border-left-color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
}
.mod-row:hover {
  border-left-color: var(--accent);
  background: var(--surface);
}
.mod-row dt {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.15;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mod-row:hover dt { transform: translateX(4px); }
.mod-row dd {
  color: var(--muted);
  font-size: 0.96rem;
  max-width: 40rem;
}
@media (max-width: 40rem) { .mod-row { grid-template-columns: 1fr; gap: 0.35rem; } }

/* ---------- process: 4-across pipeline (vertical timeline below 64rem) ---------- */
.process {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 2.75rem);
}
.process::before {
  content: '';
  position: absolute;
  left: 0.95rem;
  top: 0.95rem;
  bottom: 0.95rem;
  width: 1px;
  background: var(--line);
}
.process::after {
  content: '';
  position: absolute;
  left: calc(0.95rem - 3px);
  top: 0.95rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px rgba(132, 148, 255, 0.55);
  animation: flow-travel 6s ease-in-out infinite;
  will-change: transform, opacity;
}
.process li {
  position: relative;
  padding-left: 3.25rem;
}
.step-node {
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  z-index: 1;
}
.process h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.process p { color: var(--muted); font-size: 0.94rem; max-width: 44ch; }

@keyframes flow-travel {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateY(calc(100% - 1.9rem)); opacity: 0; }
}

@media (min-width: 64rem) {
  .process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }
  .process::before {
    left: 16.667%;
    right: 16.667%;
    bottom: auto;
    width: auto;
    height: 0;
    background: none;
    border-top: 1px dashed var(--line);
  }
  .process::after {
    left: 16.667%;
    animation-name: flow-travel-h;
  }
  .process li { padding-left: 0; padding-top: 3.25rem; }
  .step-node { left: 50%; top: 0; transform: translateX(-50%); }

  @keyframes flow-travel-h {
    0% { left: 16.667%; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { left: 83.333%; opacity: 0; }
  }
}

/* ---------- partners ---------- */
.sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.side {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 1.85rem) 2rem;
  box-shadow: inset 0 1px 0 rgba(231, 233, 237, 0.035);
}
.side:hover {
  box-shadow: inset 0 1px 0 rgba(231, 233, 237, 0.035), 0 22px 42px -28px rgba(0, 0, 0, 0.55);
  z-index: 2;
}
.side h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.side > p { color: var(--muted); font-size: 0.96rem; }
.side ul {
  list-style: none;
  margin: 1.3rem 0 1.5rem;
}
.side li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.93rem;
  font-weight: 520;
}
.side li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}
.arrow-link {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--accent);
}
.arrow-link::after {
  content: ' \2192';
  display: inline-block;
  transition: transform 0.2s ease;
}
.arrow-link:hover::after { transform: translateX(4px); }

@media (max-width: 50rem) { .sides { grid-template-columns: 1fr; } }

/* ---------- standards ---------- */
.standards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4.5rem);
}
.standard {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 1.4rem 1.5rem 1.6rem;
}
.standard:hover { box-shadow: inset 0 1px 0 rgba(231, 233, 237, 0.035), 0 22px 42px -28px rgba(0, 0, 0, 0.55); z-index: 2; }
.standard .icon { margin-bottom: 0.9rem; }
.standard h3 {
  font-size: 1rem;
  font-weight: 620;
  margin-bottom: 0.4rem;
}
.standard p { color: var(--muted); font-size: 0.92rem; max-width: 46ch; }

@media (max-width: 40rem) { .standards { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact {
  border-top: 1px solid var(--line-soft);
  padding: clamp(6rem, 14vw, 10rem) var(--content-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3rem, 8vw, 6rem);
  flex-wrap: wrap;
}
.contact-lead {
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 28ch;
  margin: 0;
}
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.contact-mail,
.contact .book-btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding-block: 0;
  padding-inline: 1.35rem;
  margin-top: 0;
  border-radius: 6px;
  white-space: nowrap;
}
.contact-mail {
  font-family: var(--mono);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  border: 1px solid var(--line-soft);
  background: transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.contact-mail:hover {
  border-color: var(--accent);
  background: rgba(132, 148, 255, 0.08);
}

@media (max-width: 48rem) {
  .contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }
  .contact-actions { width: 100%; }
  .contact-mail,
  .contact .book-btn-lg { width: 100%; }
  /* the address is one long unbreakable token at 320px — let it shrink
     rather than push the page into horizontal scroll */
  .contact-mail {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.92rem;
    padding-inline: 1rem;
  }
}

/* ---------- footer ---------- */
.footer {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  padding: 2.25rem var(--content-x) clamp(6rem, 22vw, 13rem);
  display: flex;
  align-items: baseline;
  gap: 1.75rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--muted);
}
/* giant embossed wordmark, bleeding off the bottom edge — decorative only,
   so it lives in generated content: out of the a11y tree, unselectable,
   and it never competes with the real footer links painted above it
   (z-index:-1, scoped to .footer's own stacking context). */
.footer::after {
  content: 'Arkandis';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -0.16em;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(3.5rem, 19.5vw, 13rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(231, 233, 237, 0.16) 0%, rgba(231, 233, 237, 0.03) 45%, var(--ground) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.footer .wordmark { font-size: 0.95rem; color: var(--ink); }
.footer-nav {
  margin-left: auto;
  display: flex;
  gap: 1.4rem;
}
.footer-nav a { color: var(--muted); transition: color 0.18s ease; }
.footer-nav a:hover { color: var(--ink); }
.footer-legal {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--faint);
}

/* ---------- tilt-card: pointer-tracked 3D tilt ----------
   Shared by domain cards and standards cards. --rx/--ry/--gx/--gy are set by
   pointermove in script.js. The scroll entrance lives in the one-shot reveal
   section near the bottom of this file, and drives translate/scale/rotate so it
   composes with this transform instead of overwriting it. */
.tilt-card {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 50%;
  --z: 0px;
  position: relative;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--z));
  transform-style: preserve-3d;
}
.tilt-card.on { opacity: 1; }
.tilt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(132, 148, 255, 0.14), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tilt-card:hover::after { opacity: 1; }

/* ---------- journey spine ----------
   A winding center line drawn on a fixed viewport canvas; the path lives in
   world coords and script.js renders only the visible slice as you scroll.
   z-index -1 keeps it behind content but above the --ground background (same
   layering as the hero lattice); opaque cards naturally occlude it, so it
   reads as depth in the gutters, not clutter. */
.journey {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* Content sections become frosted-glass slabs: the journey spine runs behind
   them (z-index -1) and reads as softly diffused through the glass rather than
   crossing the text. Applied to the sections the center line passes through. */
#domains .sec-body,
#process .sec-body,
#partners .sec-body {
  background: rgba(18, 20, 25, 0.32);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  backdrop-filter: blur(9px) saturate(1.15);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: inset 0 1px 0 rgba(231, 233, 237, 0.05), 0 26px 60px -42px rgba(0, 0, 0, 0.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #domains .sec-body,
  #process .sec-body,
  #partners .sec-body { background: rgba(18, 20, 25, 0.86); }
}

/* On a narrow screen the slab is a box wrapping cards that are themselves
   boxes, and its border + padding just eat width that the content needs. The
   frosted slab is a desktop device — it exists to separate the text from the
   journey spine behind it, and on mobile the spine is barely visible anyway.
   Drop it entirely and let the cards be the only boxes on the page. */
@media (max-width: 56rem) {
  #domains .sec-body,
  #process .sec-body,
  #partners .sec-body {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  /* the section's own side padding is now the only inset, so tighten it */
  .sec { padding-inline: var(--pad-x); gap: 1.25rem; }
}

/* ---------- drawn grid: margin rails + section gutter rail ----------
   The two margin rails land exactly under the .sec crosshairs (they're both
   at var(--pad-x)), so page margins and section rules read as one drawn
   grid instead of two unrelated ornaments. A single pseudo-element carries
   both rails as two background-image layers — body only has two pseudo
   slots, and ::after is needed for the scroll glow below. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, transparent, var(--line-soft) 12%, var(--line-soft) 88%, transparent) var(--pad-x) 0 / 1px 100% no-repeat,
    linear-gradient(180deg, transparent, var(--line-soft) 12%, var(--line-soft) 88%, transparent) calc(100% - var(--pad-x)) 0 / 1px 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}

/* ponytail: native scroll-driven animation, no JS. Unsupported browsers get
   the static rails above and no glow. */
@supports (animation-timeline: scroll()) {
  body::after {
    content: '';
    position: fixed;
    left: var(--pad-x);
    top: 0;
    width: 1px;
    height: 24vh;
    background: linear-gradient(180deg, transparent, var(--accent), transparent);
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
    animation: rail-travel linear both;
    animation-timeline: scroll();
  }
  @keyframes rail-travel {
    from { transform: translateY(-32vh); }
    to   { transform: translateY(100vh); }
  }
}

/* The margin rails and their traveling glow are a wide-screen ornament: on a
   phone they sit right on the content edge instead of framing it. */
@media (max-width: 56rem) {
  body::before,
  body::after { content: none; }
}

/* gutter rail: only where the label column actually exists */
@media (min-width: 56rem) {
  .sec {
    background: linear-gradient(var(--line-soft), var(--line-soft)) calc(var(--content-x) + var(--label-w) - 1.5rem) 0 / 1px 100% no-repeat;
  }
}

/* ---------- dashed edge: fades in under the cursor, on hover only ----------
   Reuses --gx/--gy that script.js already writes on pointermove. The dash is a
   flat colour; the radial mask is what makes it read as a gradient. */
.tilt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed var(--accent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--gx) var(--gy), #000 0%, transparent 62%);
  mask-image: radial-gradient(circle at var(--gx) var(--gy), #000 0%, transparent 62%);
}
.tilt-card:hover::before { opacity: 0.5; }
/* .domains and .ops-grid are 1px-gap grids whose background *is* the
   border — inset:0 would land the dash on that seam and read as a
   rendering artifact. */
.domain-card::before,
.ops-item::before { inset: 1px; }

/* ---------- resting depth + hover lift ---------- */
.domain-card,
.standard {
  box-shadow: inset 0 1px 0 rgba(231, 233, 237, 0.035);
}
.tilt-card:hover { --z: 10px; }

/* ---------- hero load-in ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  animation: fade-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-kicker.fade-up { animation-delay: 0.05s; }
.hero-foot.fade-up { animation-delay: 0.3s; }
@keyframes fade-rise { to { opacity: 1; transform: none; } }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  padding-block: 0.85rem;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marq 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-item {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  margin-right: 3.5rem;
}
.mq-item b { color: var(--accent); font-weight: 500; margin-right: 0.6em; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- domain cards ---------- */
.domains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line-soft);
}
.domain-card {
  background: var(--ground);
  padding: 1.5rem 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 11.5rem;
}
.domain-card:hover { background: var(--surface); box-shadow: inset 0 1px 0 rgba(231, 233, 237, 0.035), 0 24px 46px -28px rgba(0, 0, 0, 0.6); z-index: 2; }
.domain-card .icon { margin-bottom: 0.15rem; }
.domain-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.domain-card h3 {
  font-size: 1.08rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}
.domain-card > p:not(.domain-tag) {
  font-size: 0.87rem;
  color: var(--muted);
}
.domain-arrow {
  margin-top: auto;
  padding-top: 0.6rem;
  color: var(--accent);
  transition: transform 0.25s ease;
}
.domain-card:hover .domain-arrow { transform: translateX(5px) translateZ(20px); }

@media (max-width: 62rem) { .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .domains { grid-template-columns: 1fr; } .domain-card { min-height: 0; } }

/* ---------- subpage hero ---------- */
.page-hero { padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.page-hero h1 { font-size: clamp(1.95rem, 6vw, 5rem); }
.legal-hero h1 { font-size: clamp(2.1rem, 5vw, 3.75rem); }
.legal-meta {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--faint);
  margin-top: 0.75rem;
}

/* ---------- inventory prose ---------- */
.lead {
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 44rem;
  margin-bottom: 1.6rem;
}
.spec {
  list-style: none;
  max-width: 44rem;
}
.spec li {
  padding: 0.6rem 0 0.6rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.94rem;
  font-weight: 520;
  position: relative;
}
.spec li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 0.45rem;
  height: 1px;
  background: var(--accent);
}
.comp {
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.73rem;
  line-height: 1.7;
  color: var(--faint);
  max-width: 44rem;
}

/* ---------- ops grid: compact industry examples under Company operations ---------- */
.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin: 1.6rem 0;
  max-width: 100%;
}
.ops-item {
  background: var(--ground);
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ops-item .icon { width: 1.3rem; height: 1.3rem; margin-bottom: 0.1rem; }
.ops-item h3 { font-size: 0.92rem; font-weight: 620; letter-spacing: -0.005em; }
.ops-item p { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
@media (max-width: 56rem) { .ops-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 26rem) { .ops-grid { grid-template-columns: 1fr; } }

/* ---------- spec chips: scannable grid, not a bullet-list of sentences ---------- */
.spec-chips {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.8rem;
  max-width: 34rem;
}
.spec-chips li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 550;
  line-height: 1.3;
}
.spec-chips li::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
@media (max-width: 30rem) { .spec-chips { grid-template-columns: 1fr; } }

/* ---------- timeline badge ---------- */
/* ---------- process tabs ---------- */
.ptabs-nav {
  position: relative;
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
  /* tabs stay on one row and scroll sideways if they don't fit — the
     JS indicator only tracks X, so wrapping would strand it. Scroll is
     contained here, so it never pushes the page width. */
  overflow-x: auto;
  scrollbar-width: none;
}
.ptabs-nav::-webkit-scrollbar { display: none; }
.ptab-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0.85rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
@media (max-width: 56rem) { .ptab-btn { padding-inline: 0.5rem; } }
.ptab-btn:hover { color: var(--ink); }
.ptab-btn.is-active { color: var(--ink); }
.ptabs-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ptab-panel { display: none; max-width: 44rem; }
.ptab-panel.is-active { display: block; animation: ptab-in 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.ptab-panel h3 {
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
  max-width: 28ch;
}
@keyframes ptab-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* ---------- provenance manifest artifact ---------- */
.manifest {
  margin-top: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.manifest-head {
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.manifest-head b { color: var(--accent); font-weight: 500; }
.manifest-row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.81rem;
}
.manifest-row:last-child { border-bottom: none; }
.manifest-row .k {
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}
.manifest-row .v { color: var(--ink); font-weight: 500; }
.manifest-note {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--faint);
}
@media (max-width: 30rem) {
  .manifest-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer;
  padding: 1.05rem 0;
  font-weight: 600;
  font-size: 0.98rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  list-style: none;
  transition: color 0.18s ease;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-a { padding-bottom: 1.2rem; color: var(--muted); font-size: 0.93rem; transform-origin: top; }
.faq-a p { max-width: 58ch; }
.faq details[open] .faq-a { animation: faq-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes faq-in { from { opacity: 0; transform: perspective(500px) rotateX(-18deg) translateY(-4px); } }

/* ---------- drawn rules ---------- */
.draw, .draw-thin { position: relative; }
.draw::before, .draw-thin::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.draw::before { height: 2px; background: var(--ink); }
.draw-thin::before { height: 1px; background: var(--line); }
.draw.on::before, .draw-thin.on::before { transform: scaleX(1); }
html:not(.js) .draw::before,
html:not(.js) .draw-thin::before { transform: scaleX(1); }

/* ---------- word-mask heading reveal ---------- */
.wm { display: inline-block; overflow: hidden; vertical-align: bottom; perspective: 400px; }
.w {
  display: inline-block;
  transform: translateY(110%) rotateX(-55deg);
  transform-origin: bottom;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--w, 0) * 40ms);
}
h2.on .w { transform: translateY(0) rotateX(0deg); }

/* ---------- misc ---------- */
.nav-links a.active { color: var(--ink); font-weight: 600; }

.process-more { display: inline-block; margin-top: 2rem; }

/* ---------- scroll-driven layer ----------
   ponytail: native scroll/view timelines, no library and no JS. The IO reveal
   in script.js stays as the fallback — animations win the cascade over its
   `.on` gate, so where view() is supported these simply take over.
   Everything here animates `translate`/`scale`/`opacity`/`filter`, never
   `transform`: that leaves .tilt-card's pointer-tracked transform untouched. */
@supports (animation-timeline: view()) {

  /* reading progress under the nav */
  .nav::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform-origin: 0 50%;
    scale: 0 1;
    animation: nav-progress linear both;
    animation-timeline: scroll();
  }
  @keyframes nav-progress { to { scale: 1 1; } }


}

/* ---------- one-shot reveals ----------
   These fire once as an element first enters and then STAY — so they can't be
   scroll-driven: a view() timeline is a position readout, so it necessarily
   plays backwards when you scroll back up. Instead script.js's existing
   IntersectionObserver adds `.on` and unobserves, and these are plain
   transitions off that class. Consequence: identical on desktop and mobile,
   no `animation-timeline` support needed, nothing re-hides or exits. */

/* cards swing up on a 3D hinge. `translate`/`scale`/`rotate` are used instead
   of `transform` because .tilt-card's transform is owned by the pointer tilt —
   these compose with it rather than fighting it. The hinge needs perspective on
   the *parent*, since the card's own perspective() sits in `transform`, which
   is applied after these. */
.domains, .sides { perspective: 1200px; }

html.js .tilt-card:not(.on) {
  opacity: 0;
  translate: 0 4rem;
  scale: 0.9;
  rotate: x -12deg;
}
.tilt-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
    scale 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
    rotate 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
    opacity 0.6s ease var(--reveal-delay, 0s),
    background 0.25s ease,
    box-shadow 0.35s ease;
}

html.js .reveal:not(.on) { opacity: 0; translate: 0 3rem; }
.reveal { transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

/* THESIS: the line lights word by word, once. --i is the word index, set by
   script.js; the delay off it is what cascades them left to right. */
.thesis p.lit { color: var(--faint); }
.thesis p.lit .tw {
  display: inline-block;
  color: var(--muted);
  opacity: 0.12;
  translate: 0 0.35em;
  transition:
    opacity 0.55s ease calc(var(--i) * 42ms),
    translate 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 42ms);
}
.thesis p.lit em .tw { color: var(--ink); }
.thesis p.lit.on .tw { opacity: 1; translate: 0 0; }

/* PROCESS: the steps ignite 01 → 02 → 03 on a fixed stagger the first time the
   section comes into view, then stay lit. Not scroll-driven — it plays as an
   animation on its own clock, so it can't run backwards when you scroll up.
   --step-delay is the per-step offset, set in script.js. */
.process li {
  transition:
    opacity 0.6s ease var(--step-delay, 0s),
    translate 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--step-delay, 0s);
}
html.js .process li:not(.on) { opacity: 0.18; translate: 0 1.5rem; }

.step-node { font-weight: 600; transition: all 0.5s ease var(--step-delay, 0s); }
.process li.on .step-node {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ground);
  box-shadow: 0 0 0 6px rgba(132, 148, 255, 0.14), 0 0 18px 2px rgba(132, 148, 255, 0.5);
}

/* the rail draws with the steps — down the column when stacked, across when the
   layout goes 3-up at 64rem */
.process::before { transform-origin: 0 0; transition: scale 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
html.js .process:not(.on)::before { scale: 1 0; }
@media (min-width: 64rem) {
  .process::before { transform-origin: 0 50%; }
  html.js .process:not(.on)::before { scale: 0 1; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav::after,
  .thesis p, .thesis p .tw,
  .tilt-card, .reveal,
  .process, .process li, .process li .step-node,
  .process::before {
    animation: none;
    transition: none;
    opacity: 1;
    translate: none;
    scale: none;
    rotate: none;
    filter: none;
  }
  .nav::after { opacity: 0; }
  .marquee-track { translate: none; }
  .process li.on .step-node,
  .process li .step-node { background: var(--ground); border-color: var(--line); color: var(--accent); box-shadow: none; }
  .hero-line span { animation: none; transform: none; }
  .fade-up { animation: none; opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .draw::before, .draw-thin::before { transition: none; transform: scaleX(1); }
  .w { transition: none; transform: none; }
  .hero-links a::after,
  .arrow-link::after,
  .domain-arrow { transition: none; }
  .faq details[open] .faq-a { animation: none; }
  .tilt-card { transition: none; opacity: 1; transform: none; }
  .tilt-card::before { transition: none; }
  .process::after { animation: none; opacity: 0; }
  .ptab-panel.is-active { animation: none; }
  .ptabs-indicator { transition: none; }
  body::after { animation: none; opacity: 0; }
}

/* ---------- book-a-call modal ---------- */
.book-btn {
  appearance: none;
  background: var(--accent);
  border: none;
  border-radius: 3px;
  color: var(--ground);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.5rem 1.05rem;
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.book-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.book-btn:active { transform: none; opacity: 1; }

/* large CTA variant used inside contact section */
.book-btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  padding: 0.75rem 1.6rem;
  margin-top: 1.6rem;
  border-radius: 4px;
}

.cal-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 11, 14, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.cal-modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.cal-modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 100%;
  max-width: 68rem;
  height: calc(100dvh - 2.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(18px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cal-modal-overlay.is-open .cal-modal {
  transform: translateY(0) scale(1);
}
.cal-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.cal-modal-head p {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}
.cal-modal-close {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 3px;
  transition: color 0.18s ease, background 0.18s ease;
}
.cal-modal-close:hover { color: var(--ink); background: var(--line-soft); }
.cal-modal-body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.cal-modal-body .calendly-inline-widget {
  width: 100%;
  height: 100%;
  min-height: 660px;
}
.cal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.88rem;
  z-index: 1;
  transition: opacity 0.3s ease;
}
.cal-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 44rem) {
  .cal-modal { height: calc(100dvh - 1rem); border-radius: 4px; }
  .cal-modal-body .calendly-inline-widget { min-height: 580px; }
}