/* ══════════════════════════════════════════════════════════════
   PROFITECH SYSTEMS LLC

   Type: Archivo (grotesque, the voice) · Newsreader italic (the accent
   clause — chosen for its real optical-size axis, so it holds at 92px
   and at 24px) · JetBrains Mono (identifiers and record data only,
   never as decoration).

   Tracking is declared per role in em. It is deliberately NOT set on
   body: an em value there resolves once against the root size and
   then inherits as an absolute px length, which tightens small text
   harder than display text — the optical rule backwards.
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg: #04080b;
  --ink: #f4fafc;
  --accent: #49f0e4;
  --accent-warm: #f5b45a;
  --accent-ink: #04120f;

  /* Ink tiers. Every one of these clears 4.5:1 on the near-black ground. */
  --ink-70: rgba(244, 250, 252, 0.72);
  --ink-60: rgba(244, 250, 252, 0.62);
  --ink-50: rgba(244, 250, 252, 0.54);

  /* Modular scale, ratio ~1.2 rising to ~1.45 at display sizes.
     Every step is perceptible; nothing sits inside a 5% band. */
  --t-micro: 0.8125rem;   /* 13px  — mono labels, legal line */
  --t-caption: 0.9375rem; /* 15px  — captions */
  --t-small: 1.09375rem;  /* 17.5px — secondary body */
  --t-body: 1.25rem;      /* 20px  — body */
  --t-lede: 1.5rem;       /* 24px  — lede */
  --t-sub: 2rem;          /* 32px  — subheads */
  --t-quote: 2.75rem;     /* 44px  — statement */
  --t-display: 4rem;      /* 64px  — section display */
  --t-hero: 5.75rem;      /* 92px  — hero, capped under the 6rem ceiling */

  --shell: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The light. Shared by the hero reveal and the page torch — one radius,
     one falloff, one halo, declared once. */
  --torch-r: 260px;
  --dim: grayscale(1) brightness(0.52) contrast(1.02);
  --spot-falloff: radial-gradient(
    circle closest-side,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0.75) 60%,
    rgba(0, 0, 0, 0.4) 75%,
    rgba(0, 0, 0, 0.12) 88%,
    rgba(0, 0, 0, 0) 100%
  );
  --spot-halo: radial-gradient(
    circle closest-side,
    rgba(73, 240, 228, 0.06) 0%,
    rgba(73, 240, 228, 0.03) 46%,
    rgba(73, 240, 228, 0.18) 80%,
    rgba(73, 240, 228, 0) 100%
  );

  /* In the hero the light lands on revealed footage, so the halo alone is
     enough. Off the hero it has nothing under it, so this fill reproduces
     what the hero pixels actually measure: 8/45/63 at the centre, holding
     to ~62% of the radius, then falling off. Same light, different ground. */
  --torch-fill: radial-gradient(
    circle closest-side,
    rgba(24, 200, 255, 0.163) 0%,
    rgba(24, 200, 255, 0.159) 62%,
    rgba(24, 200, 255, 0.084) 78%,
    rgba(24, 200, 255, 0.017) 92%,
    rgba(24, 200, 255, 0) 100%
  );
}

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

html {
  scroll-behavior: smooth;
}

/* Lenis strips any class matching /lenis(-\w+)?/, so the opt-out flag
   must not be named after it or it disappears on the first wheel event. */
html.inertial-scroll {
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(73, 240, 228, 0.32);
  color: #ffffff;
}

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

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

ul,
ol {
  list-style: none;
}

address {
  font-style: normal;
}

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 24px;
  z-index: 200;
  border-radius: 0 0 10px 10px;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--t-micro);
  font-weight: 600;
  transition: top 180ms var(--ease);
}

.skip-link:focus-visible {
  top: 0;
}

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

/* ─────────────── type roles ─────────────── */

.display {
  font-size: clamp(2.25rem, 5vw, var(--t-display));
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-wrap: balance;
}

.display-sm {
  font-size: clamp(2rem, 3.6vw, 3rem);
}

/* The accent clause. Newsreader italic is the one voice change
   on the page; emphasis everywhere else comes from weight or size. */
.display em,
blockquote em {
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--accent);
}

.lede {
  max-width: 62ch;
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, var(--t-lede));
  font-weight: 400;
  letter-spacing: -0.008em;
  line-height: 1.55;
  color: var(--ink-70);
  text-wrap: pretty;
}

/* Mono earns its place on identifiers and record values: it is what
   makes 541512 and S010 unambiguous, not a costume for "technical". */
.num,
.label,
.hero-registry,
.effective time {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Mono runs optically large and must never inherit the accent italic —
   a slanted zero is the ambiguity this class exists to remove. */
.display .num,
blockquote .num,
.hero-title .num {
  font-size: 0.86em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* ─────────────── reveal ─────────────── */

/* Only hidden when JS is present to un-hide it. Without .js the page
   is fully readable — the privacy policy must never depend on a script. */
.js .reveal-hidden {
  opacity: 0;
  transform: translateY(18px);
}

.js .reveal-hidden.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 900ms var(--ease),
    transform 900ms var(--ease);
}

.js [data-reveal-scale] {
  opacity: 0;
  clip-path: inset(7%);
  transform: scale(1.04);
}

.js [data-reveal-scale].is-in {
  opacity: 1;
  clip-path: inset(0);
  transform: scale(1);
  transition:
    opacity 1100ms var(--ease),
    clip-path 1200ms var(--ease),
    transform 1200ms var(--ease);
}

.js [data-reveal-rise] {
  opacity: 0;
  transform: translateY(64px);
}

.js [data-reveal-rise].is-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1200ms var(--ease),
    transform 1400ms var(--ease);
}

/* ─────────────── torch ─────────────── */

/* One light for the whole page. In the hero it reveals the footage;
   past the hero it simply lights whatever is under it. Fades in as the
   hero sinks, so the two never fight. */
.torch {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--torch-on, 0);
}

.torch-lens {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--torch-r) * 2);
  height: calc(var(--torch-r) * 2);
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
  background: var(--torch-fill);
}

/* ─────────────── nav ─────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: linear-gradient(to bottom, rgba(4, 8, 11, 0.86), rgba(4, 8, 11, 0));
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.nav-wordmark {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  position: relative;
  padding: 8px 14px;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-70);
  transition: color 200ms var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease);
}

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

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

/* Fills from the bottom on hover — the quietest way to say "this one acts". */
.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 10px 20px;
  border: 1px solid rgba(244, 250, 252, 0.24);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition:
    color 300ms var(--ease),
    border-color 300ms var(--ease);
}

.nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 420ms var(--ease);
}

.nav-cta:hover,
.nav-cta:focus-visible {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.nav-cta:hover::after,
.nav-cta:focus-visible::after {
  transform: translateY(0);
}

/* ─────────────── buttons ─────────────── */

/* The page is about a light that reveals things, so the primary button is
   lit by the same light: a sweep crosses it on hover, once. */
.btn-solid {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    transform 420ms var(--ease),
    box-shadow 420ms var(--ease);
}

.btn-solid::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  z-index: -1;
  background: linear-gradient(
    104deg,
    transparent 34%,
    rgba(255, 255, 255, 0.62) 50%,
    transparent 66%
  );
  transform: translateX(-100%);
  transition: transform 760ms var(--ease);
}

.btn-solid:hover,
.btn-solid:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -16px rgba(73, 240, 228, 0.85);
}

.btn-solid:hover::after,
.btn-solid:focus-visible::after {
  transform: translateX(100%);
}

.btn-solid:active {
  transform: translateY(0);
  transition-duration: 90ms;
}

.btn-lg {
  padding: 18px 36px;
  font-size: var(--t-small);
}

/* A rule that draws itself in from the left, and an arrow that leaves
   before it returns — motion with a direction, not a wiggle. */
.btn-quiet {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding-bottom: 8px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
}

.btn-quiet::before,
.btn-quiet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

.btn-quiet::before {
  background: rgba(244, 250, 252, 0.24);
}

.btn-quiet::after {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 460ms var(--ease);
}

.btn-quiet:hover::after,
.btn-quiet:focus-visible::after {
  transform: scaleX(1);
}

.btn-quiet svg {
  transition:
    transform 420ms var(--ease),
    color 300ms var(--ease);
}

.btn-quiet:hover svg,
.btn-quiet:focus-visible svg {
  transform: translateX(5px);
  color: var(--accent);
}

/* ─────────────── hero ─────────────── */

/* No z-index here: a stacking context would trap the hero's own CTA
   underneath the curtain that slides over it. */
.hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

.hero-base {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("./hero-base.jpg") center / cover no-repeat;
  filter: var(--dim);
}

.reveal-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.reveal-window {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--torch-r) * 2);
  height: calc(var(--torch-r) * 2);
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
  -webkit-mask-image: var(--spot-falloff);
  mask-image: var(--spot-falloff);
}

.reveal-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--vw, 100vw);
  height: var(--vh, 100vh);
  will-change: transform;
}

.reveal-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.18) brightness(1.08);
}

.reveal-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--spot-halo);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bg);
  opacity: var(--hero-fade, 0);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 4;
  display: flex;
  width: 100%;
  max-width: var(--shell);
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  margin-inline: auto;
  padding: 120px 24px clamp(72px, 12vh, 116px);
  /* Fades with the hero so the CTA is never half-buried under the curtain. */
  opacity: calc(1 - var(--hero-fade, 0));
}

.hero-title {
  font-size: clamp(2.75rem, 8vw, var(--t-hero));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.hero-line-a,
.hero-line-b {
  display: block;
}

/* The accent line, not a second voice competing with the first. */
.hero-line-a {
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
  margin-top: clamp(36px, 5vh, 56px);
  padding-top: 32px;
  border-top: 1px solid rgba(244, 250, 252, 0.16);
}

.hero-lede {
  max-width: 58ch;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-70);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.hero-registry {
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--ink-60);
}

.hero-hint {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--ink-60);
  pointer-events: none;
  transition: opacity 500ms var(--ease);
}

.hero-hint.is-done {
  opacity: 0 !important;
}

.hero-hint-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
  animation: hintPulse 2.6s ease-in-out infinite;
}

@keyframes hintPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.6);
  }
}

/* ─────────────── curtain ─────────────── */

.curtain {
  position: relative;
  z-index: 20;
  background: var(--bg);
}

.curtain::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14vh;
  background: linear-gradient(to bottom, rgba(4, 8, 11, 0), var(--bg));
  pointer-events: none;
}

.section {
  padding-block: clamp(104px, 13vw, 176px);
}

/* ─────────────── story ─────────────── */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 88px);
}

.story-reverse .story-media {
  order: 2;
}

.story-body > p {
  max-width: 62ch;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-70);
  text-wrap: pretty;
}

.story-body > p + p {
  margin-top: 22px;
}

.story-body .lede + p {
  margin-top: 26px;
}

.story-body .display-sm {
  margin-bottom: 26px;
}

/* The footage is lit dust on black, so a cropped rectangle reads as a
   seam glued onto the page. Let it dissolve into the ground instead of
   ending at an edge. */
.frame {
  position: relative;
}

/* Belt to the mask's braces: on engines without mask-composite the
   vignette alone still buries the edge in the page colour. Bounded to
   the footage — stretched over the whole figure it would dim the
   caption sitting below it. */
.frame-shade {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  box-shadow: inset 0 0 clamp(48px, 6vw, 96px) clamp(24px, 3.5vw, 56px) var(--bg);
  pointer-events: none;
}

/* Every clip behaves like the hero: dead grey until the light reaches it,
   alive inside the circle. One video, one overlay — the overlay applies the
   desaturation to whatever is behind it and carries a hole where the light
   is, so there is no second decoder and nothing to keep in sync. */
.frame-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

/* Inverse of the hero falloff: opaque everywhere, transparent in the circle. */
.frame-dimmer {
  /* Scaled to the clip: the full-page radius covers a 16:9 frame entirely,
     which turns "a circle of light" into "the clip switches on". */
  --torch-r: 120px;
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  -webkit-backdrop-filter: var(--dim);
  backdrop-filter: var(--dim);
  -webkit-mask-image: radial-gradient(
    circle var(--torch-r) at var(--lx, -9999px) var(--ly, -9999px),
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(0, 0, 0, 0.6) 75%,
    rgba(0, 0, 0, 0.88) 88%,
    #000 100%
  );
  mask-image: radial-gradient(
    circle var(--torch-r) at var(--lx, -9999px) var(--ly, -9999px),
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(0, 0, 0, 0.6) 75%,
    rgba(0, 0, 0, 0.88) 88%,
    #000 100%
  );
}

/* The hero's halo, in the clip's coordinates. */
.frame-dimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle var(--torch-r) at var(--lx, -9999px) var(--ly, -9999px),
    rgba(73, 240, 228, 0.06) 0%,
    rgba(73, 240, 228, 0.03) 46%,
    rgba(73, 240, 228, 0.18) 80%,
    rgba(73, 240, 228, 0) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

.frame figcaption {
  position: relative;
  margin-top: 18px;
  max-width: 48ch;
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--ink-70);
  text-wrap: pretty;
}

/* ─────────────── practice list ─────────────── */

.practice {
  margin-top: clamp(80px, 10vw, 132px);
  border-top: 1px solid rgba(244, 250, 252, 0.14);
}

.practice-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(24px, 5vw, 72px);
  padding-block: clamp(30px, 3.5vw, 44px);
  border-bottom: 1px solid rgba(244, 250, 252, 0.14);
}

.practice dt {
  font-size: var(--t-sub);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.14;
  text-wrap: balance;
}

.practice dd {
  max-width: 60ch;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink-70);
  text-wrap: pretty;
}

/* ─────────────── spec ─────────────── */

.spec {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.spec li {
  padding: 9px 16px;
  border: 1px solid rgba(73, 240, 228, 0.28);
  border-radius: 2px;
  font-size: var(--t-micro);
  letter-spacing: 0.01em;
  color: var(--ink-70);
}

/* ─────────────── statement ─────────────── */

.statement {
  padding-block: clamp(112px, 15vw, 196px);
}

.statement blockquote {
  max-width: 27ch;
  font-size: clamp(2rem, 5.2vw, var(--t-quote));
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.18;
  text-wrap: balance;
}

.statement blockquote em {
  display: block;
  margin-top: 0.12em;
}

.statement-by {
  margin-top: 40px;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--ink-60);
}

/* ─────────────── privacy ─────────────── */

.privacy-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.privacy-head .lede {
  margin-top: 26px;
}

.effective {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 22px;
}

.effective .label {
  color: var(--ink-50);
}

.effective time {
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--accent-warm);
}

.policy {
  counter-reset: clause;
  margin-top: clamp(72px, 9vw, 112px);
  border-top: 1px solid rgba(244, 250, 252, 0.14);
}

.policy li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  counter-increment: clause;
  padding-block: clamp(26px, 3vw, 38px);
  border-bottom: 1px solid rgba(244, 250, 252, 0.14);
}

.policy li::before {
  content: counter(clause, decimal-leading-zero);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--ink-50);
}

.policy h3 {
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-wrap: balance;
}

.policy h3 a {
  transition: color 200ms var(--ease);
}

.policy h3 a:hover {
  color: var(--accent);
}

.policy p {
  max-width: 62ch;
  font-size: var(--t-small);
  line-height: 1.68;
  color: var(--ink-70);
  text-wrap: pretty;
}

.policy-contact {
  margin-top: 40px;
  font-size: var(--t-small);
  color: var(--ink-70);
}

.policy-contact a {
  border-bottom: 1px solid rgba(73, 240, 228, 0.5);
  color: var(--accent);
}

/* ─────────────── contact ─────────────── */

.contact {
  padding-block: clamp(72px, 9vw, 120px);
}

.contact-card {
  position: relative;
  overflow: hidden;
}

.contact-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A still frame among moving ones reads as broken, so it drifts. */
  animation: bannerDrift 34s ease-in-out infinite alternate;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

@keyframes bannerDrift {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.09) translate3d(-1.6%, -1.2%, 0);
  }
}

/* The banner is a still, so it takes the same treatment as the clips:
   desaturated until the light reaches it. */
.contact-dimmer {
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  height: auto;
}

.contact-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(4, 8, 11, 0.95) 8%, rgba(4, 8, 11, 0.58) 58%, rgba(4, 8, 11, 0.3) 100%);
  box-shadow: inset 0 0 clamp(56px, 7vw, 120px) clamp(28px, 4vw, 64px) var(--bg);
}

.contact-content {
  position: relative;
  max-width: 640px;
  padding: clamp(64px, 9vw, 112px) clamp(28px, 5vw, 72px);
}

.contact-content .lede {
  margin-top: 24px;
  max-width: 44ch;
}

.contact-content .btn-solid {
  margin-top: 40px;
}

.contact-note {
  margin-top: 20px;
  font-size: var(--t-caption);
  line-height: 1.55;
  color: var(--ink-60);
}

/* ─────────────── footer ─────────────── */

.footer {
  overflow-x: clip;
  padding-top: clamp(80px, 9vw, 120px);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: 64px;
}

.footer-brand p {
  max-width: 42ch;
  margin-top: 22px;
  font-size: var(--t-caption);
  line-height: 1.6;
  color: var(--ink-60);
  text-wrap: pretty;
}

.footer-col .label {
  margin-bottom: 18px;
}

.footer-col li + li {
  margin-top: 10px;
}

.footer-col a,
.footer address {
  font-size: var(--t-caption);
  line-height: 1.7;
  color: var(--ink-70);
}

.footer-col a {
  transition: color 200ms var(--ease);
}

.footer-col a:hover {
  color: var(--accent);
}

.footer address a {
  border-bottom: 1px solid rgba(73, 240, 228, 0.4);
  color: var(--accent);
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 26px;
  border-top: 1px solid rgba(244, 250, 252, 0.14);
}

.footer-bar p {
  font-size: var(--t-micro);
  color: var(--ink-50);
}

/* Off-scale by intent: the wordmark is a texture, not a type role. It sets
   its own height so nothing crops it. */
.wordmark {
  margin-top: 28px;
  padding-bottom: clamp(12px, 1.6vw, 26px);
}

.wordmark span {
  display: block;
  font-size: 18.4vw;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: rgba(244, 250, 252, 0.055);
  user-select: none;
}

/* ─────────────── responsive ─────────────── */

@media (max-width: 1000px) {
  .story,
  .privacy-head,
  .practice-row {
    grid-template-columns: 1fr;
  }

  .story-reverse .story-media {
    order: 0;
  }

  .hero-foot {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .policy li {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .policy p {
    grid-column: 2;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .nav {
    padding: 14px 16px;
    gap: 10px;
    /* Wrapped nav sits over live content: it needs a band, not a fade. */
    background: rgba(4, 8, 11, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: space-between;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(244, 250, 252, 0.12);
  }

  .nav {
    flex-wrap: wrap;
  }

  .nav-links a {
    padding: 6px 4px;
  }

  .nav-links a::after {
    left: 4px;
    right: 4px;
  }

  .shell {
    padding-inline: 20px;
  }

  .hero-base,
  .hero-hint {
    display: none;
  }

  .torch,
  .frame-dimmer {
    display: none;
  }

  /* Without a cursor-driven reveal the hero would sit on its grey base
     forever, so show the footage itself. */
  .hero-base {
    display: none;
  }

  .reveal-window,
  .reveal-inner {
    width: 100%;
    height: 100%;
    transform: none !important;
  }

  .reveal-window {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .reveal-window::after {
    display: none;
  }

  .btn-solid::after {
    display: none;
  }

  .btn-solid:hover,
  .btn-solid:focus-visible,
  .btn-quiet:hover svg {
    transform: none;
  }

  .btn-quiet::after,
  .nav-cta::after {
    transition: none;
  }

  .reveal-layer {
    z-index: 1;
  }

  .reveal-window {
    width: 100%;
    height: 100%;
    transform: none !important;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .reveal-window::after {
    display: none;
  }

  .reveal-inner {
    width: 100%;
    height: 100%;
    transform: none !important;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.34) 30%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(0, 0, 0, 0.92) 100%
    );
    pointer-events: none;
  }

  .hero-inner {
    padding-top: 148px;
  }

  .frame-dimmer {
    display: none;
  }

  .frame figcaption {
    margin-top: 14px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .wordmark span {
    font-size: 21vw;
  }
}

/* ─────────────── touch targets ─────────────── */

/* Keyed to the pointer, not the width: a small tablet with a mouse does not
   need finger-sized rows, and a large phone does. iOS asks for 44px. */
@media (pointer: coarse) {
  .nav-brand {
    padding-block: 9px;
  }

  .nav-links a {
    padding-block: 13px;
  }

  .policy h3 a,
  .policy-contact a,
  .footer-col a,
  .footer address a {
    display: inline-block;
    padding-block: 11px;
  }

  .policy h3 {
    margin-block: -11px;
  }

  .footer-col li + li {
    margin-top: 0;
  }

  .footer address {
    line-height: 2.4;
  }

  .btn-quiet {
    padding-block: 6px 12px;
  }
}

/* ─────────────── reduced motion ─────────────── */

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

  .js .reveal-hidden,
  .js [data-reveal-scale],
  .js [data-reveal-rise] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .torch,
  .frame-dimmer {
    display: none;
  }

  /* Without a cursor-driven reveal the hero would sit on its grey base
     forever, so show the footage itself. */
  .hero-base {
    display: none;
  }

  .reveal-window,
  .reveal-inner {
    width: 100%;
    height: 100%;
    transform: none !important;
  }

  .reveal-window {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .reveal-window::after {
    display: none;
  }

  .btn-solid::after {
    display: none;
  }

  .btn-solid:hover,
  .btn-solid:focus-visible,
  .btn-quiet:hover svg {
    transform: none;
  }

  .btn-quiet::after,
  .nav-cta::after {
    transition: none;
  }

  .hero-hint-dot,
  .contact-card > img {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}