/* Orbit Connect · "Quiet editorial studio", v2
   8px rhythm · 12-column grid · hairlines · one accent */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --sunk: #EFECE5;
  --ink: #14161A;
  --muted: #5E6168;
  --line: #E3DFD6;
  --line-strong: #CFCAC0;
  --accent: #E4572E;
  --live: #1F8A5B;
  --beta: #B7791F;
  --dev: #6B7280;
  --shadow-sm: 0 1px 1px rgba(20, 22, 26, .04), 0 2px 6px -2px rgba(20, 22, 26, .06);
  --shadow:
    0 0 0 1px rgba(20, 22, 26, .03),
    0 1px 2px rgba(20, 22, 26, .04),
    0 8px 16px -8px rgba(20, 22, 26, .08),
    0 32px 64px -24px rgba(20, 22, 26, .16);
  --grain-a: .16;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1200px;
  --pad: 24px;
  --gutter: 24px;
  --section: 88px;
  /* Motion tokens: entering/exiting and hover arrows use ease-out; on-screen moves (print wipe) use ease-in-out */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 160ms;
  --dur-hover: 250ms;
  --dur-enter: 700ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1012;
    --surface: #17181B;
    --sunk: #131416;
    --ink: #ECEAE4;
    --muted: #9A9DA3;
    --line: #26282C;
    --line-strong: #3A3D42;
    --accent: #F06A43;
    --live: #3CC48A;
    --beta: #E0A43A;
    --dev: #8B9099;
    --shadow-sm: 0 1px 1px rgba(0, 0, 0, .3), 0 2px 6px -2px rgba(0, 0, 0, .4);
    --shadow:
      0 0 0 1px rgba(255, 255, 255, .03),
      0 1px 2px rgba(0, 0, 0, .3),
      0 8px 16px -8px rgba(0, 0, 0, .4),
      0 32px 64px -24px rgba(0, 0, 0, .7);
    --grain-a: .05;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

@media (min-width: 900px) {
  :root { --pad: 32px; --section: 136px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  position: relative;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Paper grain: one tiny inline SVG, painted under content */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: var(--grain-a);
}
@media (min-width: 900px) { body { font-size: 18px; } }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
p { text-wrap: pretty; hanging-punctuation: first last; }
h1, h2, h3 { text-wrap: balance; text-rendering: optimizeLegibility; }
[id] { scroll-margin-top: 96px; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: color .15s ease, text-decoration-color .15s ease, background-color .15s ease;
}
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 50;
  padding: 8px 16px; border-radius: 8px;
  background: var(--ink); color: var(--bg);
  font-size: 15px; text-decoration: none;
}
.skip:focus { top: 16px; }

.wrap { max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.grid > * { grid-column: 1 / -1; min-width: 0; }

/* Quiet labels are Inter; mono is kept for status chips and registry details only */
.label {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.muted { color: var(--muted); }
.nb { white-space: nowrap; }

/* Header */
.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 16px; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
}
.brand { min-height: 44px; }
.brand svg { width: 24px; height: 24px; flex: none; transition: transform var(--dur-hover) var(--ease-out); }
.mark-dot { fill: var(--accent); }
.mark-gap { stroke: var(--bg); }
.nav { margin-left: auto; display: flex; gap: 12px; }
.nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); font-size: 14px; text-decoration: none;
  transition: color .15s ease;
}
/* underline drawn with a transform, so the hover never repaints the text */
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); }
@media (max-width: 479px) {
  .site-header .wrap { height: auto; flex-wrap: wrap; gap: 0; padding-block: 12px 0; }
  .brand { min-height: 44px; }
  .nav { flex-basis: 100%; margin-left: 0; justify-content: space-between; }
}
@media (min-width: 480px) { .nav { gap: 24px; } .nav a { font-size: 15px; } }
@media (min-width: 768px) {
  .site-header {
    position: sticky; top: 0;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
  }
  .site-header .wrap { height: 72px; gap: 32px; }
  .nav { gap: 32px; }
}

/* Type */
.display {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(50px, 8.2vw, 104px);
  line-height: .92;
  letter-spacing: -.025em;
}
.display em, h2 em { font-style: italic; letter-spacing: -.01em; }
h2, .h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.8vw, 56px);
  line-height: 1.02;
  letter-spacing: -.015em;
}
h3, .h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.015em;
}
@media (min-width: 900px) { h3, .h3 { font-size: 22px; } }

/* Buttons and links */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 16px; font-weight: 500; text-decoration: none;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background-color .2s ease, transform var(--dur-press) var(--ease-out);
}
.btn:hover { background: color-mix(in srgb, var(--ink) 86%, var(--accent)); }
/* press feedback on pointer-down; :active is a real press on touch, so it is not hover-gated */
.btn:active { transform: scale(.97); }
.arr { display: inline-block; transition: transform var(--dur-hover) var(--ease-out); }
.link-arrow { font-weight: 500; }
/* standalone text links keep their look but get a 44px tap target */
.actions > .link-arrow,
.feature-points > .link-arrow,
.doc-head .link-arrow,
.record-head a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding-block: 8px;
}
/* Hover motion only where a real pointer can hover (touch would leave it stuck on) */
@media (hover: hover) and (pointer: fine) {
  .brand:hover svg { transform: rotate(-12deg); }
  .nav a:hover::after { transform: scaleX(1); }
  .btn:hover .arr { transform: translateY(2px); }
  .link-arrow:hover .arr { transform: translate(2px, -2px); }
  .link-arrow:hover .arr.right { transform: translateX(3px); }
}

/* Status chips */
.chip {
  --c: var(--dev);
  display: inline-flex; align-items: center; gap: 8px;
  height: 24px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
}
.chip.live { --c: var(--live); }
.chip.beta { --c: var(--beta); }
.chip.dev { --c: var(--dev); }

/* Hero */
.hero { position: relative; overflow: hidden; padding-top: 56px; }
.hero-copy { position: relative; z-index: 1; }
.hero .display { margin-bottom: 32px; max-width: 9em; }
.lead { margin: 0 0 40px; max-width: 33em; font-size: 18px; line-height: 1.55; color: var(--muted); }
.lead strong { color: var(--ink); font-weight: 500; }
/* Hero art: far orbit layer (in flow, sets the box) · ink planet print · near orbit layer.
   No isolation, so the print's multiply/screen blend reaches the paper itself. */
.hero-orbit { position: relative; color: var(--line-strong); pointer-events: none; }
.art-print { display: block; mix-blend-mode: multiply; }
.art-print img { width: 100%; }
.hero-orbit .art-print { position: absolute; width: 54%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hero-orbit .orbit-far { position: relative; }
.hero-orbit .orbit-near { position: absolute; inset: 0; }
@media (prefers-color-scheme: dark) {
  .art-print { filter: invert(1); mix-blend-mode: screen; }
}
.orbit { display: block; width: 100%; height: auto; overflow: visible; }
.orbit .planet { fill: var(--bg); }
.orbit .dot { fill: var(--accent); }
.orbit .halo { fill: var(--accent); opacity: .12; }
.orbit .trail { stroke: var(--accent); opacity: .5; }
.orbit .slow { transform-box: fill-box; transform-origin: center; }

.hero-index { margin-top: 40px; border-top: 1px solid var(--line); }
.hero-index ul { list-style: none; margin: 0; padding: 0; display: grid; }
.hero-index li + li { border-top: 1px solid var(--line); }
.hero-index a {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
  padding: 20px 0; text-decoration: none;
}
.hero-index .name { font-weight: 500; }
.hero-index .desc { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.hero-index .go { display: none; }

@media (max-width: 767px) {
  .hero { padding-top: 40px; }
  .hero .display { margin-bottom: 24px; }
  .hero-orbit { width: min(100%, 320px); justify-self: center; margin-top: 16px; }
}
@media (min-width: 768px) and (max-width: 899px) {
  .hero-orbit { max-width: 520px; margin: 40px auto 0; }
}
@media (min-width: 900px) {
  .hero { padding-top: 120px; }
  .hero .grid { align-items: center; }
  .hero-copy { grid-column: 1 / 8; grid-row: 1; }
  .hero-orbit { grid-column: 8 / 13; grid-row: 1; }
  .lead { font-size: 20px; }
  .hero-index { margin-top: 96px; }
  .hero-index ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-index li + li { border-top: 0; border-left: 1px solid var(--line); }
  .hero-index a { grid-template-columns: 1fr; padding: 24px 24px 32px; }
  .hero-index li:first-child a { padding-left: 0; }
  .hero-index .chip { grid-row: 1; justify-self: start; margin-bottom: 12px; }
  .hero-index .go {
    display: block; position: absolute; top: 24px; right: 24px;
    color: var(--muted); opacity: 0; transform: translateX(-4px);
    transition: opacity var(--dur-hover) ease, transform var(--dur-hover) var(--ease-out);
  }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .hero-index a:hover .go { opacity: 1; transform: none; color: var(--ink); }
  .hero-index a:hover .name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
}

/* Hero entrance: the one staggered fade-up on load (CSS, so it never waits for JS).
   The orbit and its print are not part of it; they are on screen from the first frame. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise var(--dur-enter) var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero-index { animation: rise var(--dur-enter) var(--ease-out) 180ms both; }
  /* the dashed ring drifts once every 4 minutes; paused with the rest of the orbit off-screen */
  .orbit .slow { animation: spin 240s linear infinite; }
  .hero-orbit.is-paused .slow { animation-play-state: paused; }
}

/* Section rule: label sits on the divider */
.sec { padding-top: var(--section); }
.sec:last-child { padding-bottom: var(--section); }
.rule {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 40px;
}
.rule::after { content: ""; order: 2; flex: 1; height: 1px; background: var(--line); }
.rule .label { color: var(--ink); font-weight: 500; }
.sec-head { margin-bottom: 48px; row-gap: 24px; align-items: end; }
.sec-head p { margin: 0; max-width: 30em; color: var(--muted); }
@media (min-width: 900px) {
  .rule { margin-bottom: 56px; }
  .sec-head { margin-bottom: 80px; }
  .sec-head > h2 { grid-column: 1 / 8; }
  .sec-head > p { grid-column: 8 / 13; }
}

/* GradHub feature */
.feature-intro .chip { margin-bottom: 24px; }
.feature-intro h3 { margin-bottom: 16px; }
.feature-intro p { margin: 0; color: var(--muted); max-width: 30em; }
.points { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line); }
.points li {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.5;
}
.points .label { padding-top: 2px; }
.feature-points .link-arrow { display: inline-block; margin-top: 24px; }
@media (min-width: 900px) {
  .feature-intro { grid-column: 1 / 6; }
  .feature-points { grid-column: 7 / 13; }
  .points { margin-top: 0; }
}

.shot { margin: 48px 0 0; }
.stage {
  position: relative; isolation: isolate;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--surface) 70%, transparent), transparent 70%),
    var(--sunk);
  overflow: hidden;
}
.browser {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.browser-bar {
  position: relative; display: flex; align-items: center;
  height: 40px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.browser-bar .dots { display: flex; gap: 8px; }
.browser-bar .dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line-strong); }
.browser-bar .url {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 16px; border-radius: 999px; background: var(--bg);
  font: 12px/16px var(--sans); color: var(--muted);
}
.browser-bar .url svg { width: 10px; height: 10px; }
.browser img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.phone { display: none; }
.shot figcaption { margin-top: 24px; }

@media (min-width: 768px) {
  .stage { padding: 32px; }
  .browser img { aspect-ratio: auto; }
}
@media (min-width: 1024px) {
  .shot { margin-top: 80px; }
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 216px;
    gap: 32px;
    align-items: end;
    padding: 48px;
  }
  .phone {
    display: block;
    padding: 6px; border-radius: 32px;
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .phone img { border-radius: 26px; }
}

/* Smaller product cards */
.cards { display: grid; gap: 24px; margin-top: 80px; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: 7fr 5fr; margin-top: 112px; } }
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card-art {
  position: relative;
  isolation: isolate;
  height: 216px;
  border-bottom: 1px solid var(--line);
  background: var(--sunk);
  color: var(--ink);
}
.card-art svg { width: 100%; height: 100%; }
.card-art .art-print, .card-art .art-print img { width: 100%; height: 100%; }
.card-art .art-print img { object-fit: contain; }
.card-art .art-signal { position: absolute; inset: 0; pointer-events: none; }

/* Card prints: a one-time reveal, like a print being pulled left to right, then the orange
   signal lands. Script adds .pending only to cards below the fold, so nothing is hidden
   without JS, above the fold, or under reduced motion. Transitions (not keyframes) retarget
   cleanly if the card leaves and re-enters mid-reveal. */
@media (prefers-reduced-motion: no-preference) {
  .card-art .art-print { clip-path: inset(0 0 0 0); transition: clip-path var(--dur-enter) var(--ease-in-out); }
  .card-art .art-signal circle {
    transform-box: fill-box; transform-origin: center;
    transition: opacity 250ms var(--ease-out) 560ms, transform 250ms var(--ease-out) 560ms;
  }
  .cards > .card:nth-child(2) .art-print { transition-delay: 80ms; }
  .cards > .card:nth-child(2) .art-signal circle { transition-delay: 640ms; }
  .card-art.pending .art-print { clip-path: inset(0 100% 0 0); transition: none; }
  .card-art.pending .art-signal circle { opacity: 0; transform: scale(.9); transition: none; }
}
.card-body { display: flex; flex-direction: column; flex: 1; padding: 32px 24px; }
.card-body > .chip { align-self: flex-start; }
.card-body h3 { margin: 16px 0 8px; }
.card-body p { margin: 0; max-width: 32em; color: var(--muted); font-size: 16px; line-height: 1.6; }
.card-body p.label { margin-top: auto; padding-top: 24px; font-size: 13px; line-height: 1.5; letter-spacing: 0; }
@media (min-width: 900px) { .card-body { padding: 32px; } .card-art { height: 240px; } }

.art-accent { fill: var(--accent); }

/* About / how we work */
.practice { display: grid; gap: 40px; list-style: none; margin: 0; padding: 0; }
.practice li { padding-top: 24px; border-top: 1px solid var(--ink); }
.practice h3 { margin-bottom: 12px; }
.practice p { margin: 0; color: var(--muted); max-width: 30em; }
@media (min-width: 768px) { .practice { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

.principles { margin: 80px 0 0; row-gap: 24px; }
.principles dl { margin: 0; border-top: 1px solid var(--line); }
.principles .row { display: grid; gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.principles dt { font-weight: 500; }
.principles dd { margin: 0; color: var(--muted); }
@media (min-width: 768px) {
  .principles .row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
@media (min-width: 900px) {
  .principles { margin-top: 112px; }
  .principles > .label { grid-column: 1 / 4; padding-top: 22px; }
  .principles > dl { grid-column: 4 / 13; }
}

/* Contact */
.contact-body p { margin: 0 0 24px; color: var(--muted); }
.mail {
  position: relative;
  display: inline-flex; align-items: baseline; gap: .25em;
  font-family: var(--serif);
  font-size: clamp(34px, 7.6vw, 96px);
  line-height: 1.05;
  letter-spacing: -.02em;
  min-height: 44px;
  padding-top: 6px;
  padding-bottom: .06em;
  text-decoration: none;
  /* static hairline underline; the accent line is drawn over it with a transform */
  background: linear-gradient(var(--line-strong), var(--line-strong)) no-repeat 0 100% / 100% 1px;
  overflow-wrap: anywhere;
}
.mail::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}
.mail .arr { font-family: var(--sans); font-size: .4em; color: var(--muted); transition: transform var(--dur-hover) var(--ease-out), color .2s ease; }
.mail:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .mail:hover::after { transform: scaleX(1); }
  .mail:hover .arr { transform: translateX(4px); color: var(--accent); }
}
@media (min-width: 900px) {
  .contact-body { grid-column: 1 / 13; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 40px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.site-footer p { margin: 0; }
.footer-top { row-gap: 40px; }
.footer-brand .brand { color: var(--ink); margin-bottom: 16px; }
.footer-brand p { max-width: 24em; }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.footer-col .label { margin-bottom: 8px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); }
@media (min-width: 900px) {
  .footer-col .label { margin-bottom: 12px; }
  .footer-col a { min-height: 32px; }
}
.footer-col a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
}
.footer-legal { font-family: var(--sans); font-size: 13px; line-height: 1.6; letter-spacing: 0; color: var(--ink); max-width: none; }
@media (max-width: 767px) { .footer-legal > span:not(.sep) { display: block; } .footer-legal .sep { display: none; } }
@media (min-width: 900px) {
  .footer-brand { grid-column: 1 / 6; }
  .footer-cols { grid-column: 7 / 13; }
}

/* Document pages (privacy, legal, 404) */
.doc { padding: 64px 0 var(--section); }
.doc-head { margin-bottom: 48px; }
.doc-head .label { margin-bottom: 24px; }
.doc .display { font-size: clamp(46px, 6.4vw, 80px); max-width: 12em; }
.doc-head p { margin: 24px 0 0; color: var(--muted); max-width: 34em; }
.prose { max-width: 40em; }
.prose h2 { font-family: var(--sans); font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; margin: 56px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 16px; }
.prose ul { padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--muted); }

/* Compact company record (legal page only) */
.record {
  margin: 0 0 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
}
.record-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.record-head .label { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.record-cro { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 16px; font-size: 12px; color: var(--muted); }
.record-head a { font-size: 12px; letter-spacing: .04em; color: var(--ink); }
.record dl { margin: 0; }
.record .row { display: grid; gap: 2px; padding: 12px 20px; }
.record .row + .row { border-top: 1px dashed var(--line); }
.record dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.record dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 480px) {
  .record .row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; align-items: baseline; }
}
@media (min-width: 900px) {
  .doc { padding-top: 120px; }
  .doc-head, .doc-body { grid-column: 3 / 11; }
}

/* Reduced motion: no movement anywhere. The hero entrance becomes a short cross-fade,
   underlines fade instead of drawing, colour feedback stays. The SVG orbit (SMIL) is
   paused by script; the card reveal and ring drift only exist under no-preference. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-index { animation: fade 300ms ease both; }
  .btn:active { transform: none; }
  .brand svg, .arr, .hero-index .go { transition-property: opacity, color; transform: none !important; }
  .nav a::after, .mail::after { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .mail:focus-visible::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .nav a:hover::after, .mail:hover::after { opacity: 1; }
}

/* Reduced transparency: a solid header instead of the frosted one */
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}