/* Lumoir — site styles (v29, 2026-10-21 rebrand of KUMO Motion v28).
   One ink and one paper (the logo is monochrome); the work is the only colour on the page. Display = Basement Grotesque Black
   (OFL, the wordmark's face), text = Satoshi (Fontshare). Theme: html[data-theme] set by theme.js. */
@font-face { font-family: "Basement Grotesque"; src: url("/assets/fonts/BasementGrotesque-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  --bg: #EEEAE3;            /* paper */
  --surface: #F7F4EE;       /* cards, form */
  --sunk: #E4DFD6;          /* inputs, quiet fills */
  --text: #0D0C0B;
  --muted: #5E5953;
  --faint: #8C867E;
  --line: #DAD4CA;
  --line-strong: #C6BFB3;
  --accent: #0D0C0B;        /* ink: actions are the logo's colour */
  --accent-hover: #2B2825;
  --on-accent: #EEEAE3;
  --screen: #0B0A09;        /* the player is always dark */
  --shadow: 0 1px 2px rgb(13 12 11 / .05), 0 8px 28px rgb(13 12 11 / .07);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --wrap: 1180px;
  --gutter: clamp(18px, 4.5vw, 56px);
  --section: clamp(84px, 11vw, 148px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0D0C0B;
  --surface: #171513;
  --sunk: #1F1C19;
  --text: #EEEAE3;
  --muted: #A59F96;
  --faint: #78726B;
  --line: #27241F;
  --line-strong: #36322C;
  --accent: #EEEAE3;
  --accent-hover: #FFFFFF;
  --on-accent: #0D0C0B;
  --screen: #000000;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 "Satoshi", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: var(--radius-s); z-index: 50; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

h1, h2, h3 { font-family: "Satoshi", sans-serif; font-weight: 700; margin: 0; color: var(--text); }
h1, h2 { font-family: "Basement Grotesque", "Satoshi", sans-serif; font-weight: 900; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.0; letter-spacing: -0.015em; max-width: 15ch; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.012em; }
p { margin: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1px solid transparent; font: 600 .98rem/1 "Satoshi", sans-serif; text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-quiet:hover { border-color: var(--text); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: .9rem; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.nav.scrolled { border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.brand svg, .foot-brand svg { height: 17px; width: auto; fill: currentColor; display: block; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-end { display: flex; align-items: center; gap: 10px; }
.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); cursor: pointer; transition: border-color .2s; }
.theme-toggle:hover { border-color: var(--text); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; grid-area: 1 / 1; transition: opacity .2s, transform .3s; }
.theme-toggle .i-moon { fill: currentColor; stroke: none; }
:root:not([data-theme="dark"]) .theme-toggle .i-sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .i-moon { opacity: 0; transform: rotate(60deg) scale(.6); }
@media (max-width: 860px) { .nav-links { display: none; } .nav-end { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(44px, 6vw, 88px) clamp(44px, 5vw, 64px); }
.eyebrow { color: var(--muted); font-weight: 500; font-size: .95rem; margin-bottom: 18px; }
.lede { margin-top: 24px; max-width: 54ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.facts { list-style: none; padding: 0; margin: clamp(36px, 5vw, 56px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.facts li { padding: 18px 20px 0 0; display: grid; gap: 2px; align-content: start; }
.facts li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.facts strong { font-weight: 600; letter-spacing: -0.01em; }
.facts span { color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; row-gap: 18px; } .facts li:nth-child(3) { border-left: 0; padding-left: 0; } }

/* ---------- section scaffolding ---------- */
section + section { margin-top: var(--section); }
.hero + .work { margin-top: 0; }   /* the work starts right under the promise: the player peeks above the fold */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head p { color: var(--muted); max-width: 46ch; justify-self: end; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; } .section-head p { justify-self: start; } }

/* ---------- the player (the only place to watch) ---------- */
.player { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px 28px; }
.screen { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-l); overflow: hidden; background: var(--screen); box-shadow: var(--shadow); }
.screen video { width: 100%; height: 100%; object-fit: cover; }
.screen:focus { outline: none; }
.screen:fullscreen { border-radius: 0; background: #000; }
.screen:fullscreen video { object-fit: contain; }   /* full screen never crops the film (16:10 laptops, phones in portrait) */
.player.loading .screen-hit { cursor: progress; }
.screen-hit { position: absolute; inset: 0; background: transparent; border: 0; cursor: pointer; }
.controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 40px 18px 16px; color: #fff; pointer-events: none; }
.controls > * { pointer-events: auto; }   /* the gradient band itself lets clicks through to the film */
.controls::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / .55), rgb(0 0 0 / 0)); transition: opacity .3s; }
.controls > * { transition: opacity .3s; }
/* while it plays untouched the controls step back (a muted film keeps its Sound button so people know there is sound).
   They come back on hover (devices that hover), on keyboard focus inside the film, or for 2.6 s after a tap (.peek, site.js).
   Hidden controls stop catching clicks/taps. Without :has() support the rules drop and the controls simply stay visible. */
@media (hover: hover) {
  .player.playing:not(.peek):not(:has(.screen:hover)):not(:has(.screen :focus-visible)) .controls::before,
  .player.playing:not(.peek):not(:has(.screen:hover)):not(:has(.screen :focus-visible)) .controls > :not(.ctl-sound),
  .player.playing:not(.peek):not(:has(.screen:hover)):not(:has(.screen :focus-visible)) .ctl-sound[aria-pressed="true"] { opacity: 0; pointer-events: none; }
}
@media (hover: none) {
  .player.playing:not(.peek):not(:has(.screen :focus-visible)) .controls::before,
  .player.playing:not(.peek):not(:has(.screen :focus-visible)) .controls > :not(.ctl-sound),
  .player.playing:not(.peek):not(:has(.screen :focus-visible)) .ctl-sound[aria-pressed="true"] { opacity: 0; pointer-events: none; }
}
.ctl { display: inline-flex; align-items: center; gap: 7px; height: 36px; min-width: 36px; padding: 0 9px; border-radius: 999px; border: 0;
  background: rgb(255 255 255 / .14); color: #fff; cursor: pointer; font: 500 .85rem/1 "Satoshi", sans-serif; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s; }
.ctl:hover { background: rgb(255 255 255 / .26); }
.ctl svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.ctl-sound svg, #pv-full svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ctl-sound .spk { fill: currentColor; stroke: none; }
.ctl-sound[aria-pressed="false"] .wave, .ctl-sound[aria-pressed="true"] .mute { display: none; }
.player:not(.playing) .i-pause, .player.playing .i-play { display: none; }
.time { font: 500 .82rem/1 "Satoshi", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .9; }
/* seek bar, YouTube-style: click anywhere to jump, drag to scrub, hover shows the time under the pointer, arrow keys step 5 s */
.scrub { flex: 1; position: relative; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.scrub-rail { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .26); transition: height .15s; }
.scrub.drag .scrub-rail, .scrub:focus-visible .scrub-rail { height: 6px; }
@media (hover: hover) { .scrub:hover .scrub-rail { height: 6px; } .scrub:hover .scrub-knob { transform: scale(1); } .scrub:hover .scrub-tip { opacity: 1; } }
.scrub-buf, .scrub-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; }
.scrub-buf { background: rgb(255 255 255 / .34); transform: scaleX(var(--b, 0)); }
.scrub-fill { background: #fff; transform: scaleX(var(--p, 0)); }
.scrub-knob { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .35); transform: scale(0); transition: transform .15s; }
.scrub.drag .scrub-knob, .scrub:focus-visible .scrub-knob { transform: scale(1); }
.scrub:focus-visible .scrub-rail { outline: 2px solid #fff; outline-offset: 4px; }
.scrub-tip { position: absolute; bottom: 26px; left: var(--hx, 0); transform: translateX(-50%); padding: 5px 8px; border-radius: 6px; background: rgb(0 0 0 / .78);
  color: #fff; font: 500 .78rem/1 "Satoshi", sans-serif; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; }
.scrub.drag .scrub-tip { opacity: 1; }
@media (max-width: 560px) { .ctl-sound span { display: none; } .controls { gap: 8px; padding: 30px 12px 10px; flex-wrap: wrap; row-gap: 2px; }
  .scrub { order: -1; flex: 0 0 100%; } .time { margin-right: auto; } }   /* phones: the seek bar gets its own full-width row, like YouTube */

.player.single .chapters { display: none; }
.player.single .about { grid-column: 1 / -1; }
.chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.chapter { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  padding: 10px; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer;
  font: inherit; transition: border-color .2s, background-color .2s; }
.chapter:hover { border-color: var(--line-strong); }
.chapter[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chapter img { grid-row: 1 / 3; width: 88px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 6px; }
.ch-name { font-weight: 600; align-self: end; }
.ch-kind { color: var(--muted); font-size: .85rem; align-self: start; }
.about { padding: 4px 0; display: grid; }
.about-item { grid-area: 1 / 1; }   /* both chapter texts share one cell: switching never moves the page */
.about-item:not(.on) { visibility: hidden; }
.about-item h3 { margin-bottom: 8px; }
.about-item p { color: var(--muted); font-size: .97rem; }
.about-item dl { display: grid; gap: 6px; margin: 16px 0 0; font-size: .9rem; }
.about-item dl div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
.about-item dt { color: var(--faint); }
.about-item dd { margin: 0; }
@media (max-width: 960px) { .player { grid-template-columns: 1fr; } .chapters { grid-template-columns: 1fr; } }
@media (min-width: 961px) and (max-width: 1100px) { .chapter { grid-template-columns: 1fr; } .chapter img { grid-row: auto; width: 100%; margin-bottom: 8px; } }

/* ---------- why ---------- */
.why-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: why; border-top: 1px solid var(--line); }
.why-list li { counter-increment: why; padding: 24px 24px 0 0; }
.why-list li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.why-list li::before { content: counter(why, decimal-leading-zero); display: block; color: var(--faint); font: 500 .85rem/1 "Satoshi", sans-serif; margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.why-list h3 { margin-bottom: 10px; }
.why-list p { color: var(--muted); font-size: .97rem; }
@media (max-width: 960px) { .why-list { grid-template-columns: 1fr 1fr; row-gap: 36px; } .why-list li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .why-list { grid-template-columns: 1fr; } .why-list li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; } }

/* ---------- craft (one film taken apart) ---------- */
.frames { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.frames figure { margin: 0 0 18px; border-radius: var(--radius-m); overflow: hidden; background: var(--sunk); aspect-ratio: 16 / 9; }
.frames img { width: 100%; height: 100%; object-fit: cover; }
.frames h3 { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.frames h3 span { color: var(--faint); font: 500 .85rem/1 "Satoshi", sans-serif; font-variant-numeric: tabular-nums; }
.frames p { color: var(--muted); font-size: .97rem; }
@media (max-width: 860px) { .frames { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- services ---------- */
.svc { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.svc li { display: grid; grid-template-columns: minmax(0, 1.1fr) 120px minmax(0, 2fr); gap: 8px 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.svc-len { color: var(--faint); font-size: .92rem; font-variant-numeric: tabular-nums; }
.svc p { color: var(--muted); }
@media (max-width: 760px) { .svc li { grid-template-columns: 1fr auto; } .svc p { grid-column: 1 / -1; } }

/* ---------- process ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.steps li { position: relative; padding: 30px 24px 0 0; border-top: 2px solid var(--line); }
.steps li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text); }
.day { display: block; color: var(--faint); font-size: .85rem; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: .97rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--line); margin-left: 5px; }
  .steps li { border-top: 0; padding: 0 0 28px 26px; } .steps li::before { top: 4px; left: -8px; } }

/* ---------- pricing ---------- */
.pilot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; margin-bottom: 18px;
  border-radius: var(--radius-l); background: var(--surface); border: 1px dashed var(--line-strong); }
.pilot h3 { margin-bottom: 6px; }
.pilot p { color: var(--muted); max-width: 70ch; }
.pilot-price { font: 900 2rem/1 "Basement Grotesque", sans-serif; letter-spacing: -0.01em; color: var(--text) !important; font-variant-numeric: tabular-nums; flex: none; }
@media (max-width: 640px) { .pilot { flex-direction: column; align-items: flex-start; } }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan { padding: 28px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.plan-main { border-color: var(--text); }
.price { font: 900 2.6rem/1 "Basement Grotesque", sans-serif; letter-spacing: -0.01em; margin: 18px 0 10px; font-variant-numeric: tabular-nums; }
.plan-desc { color: var(--muted); }
.plan ul { list-style: none; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: .95rem; }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 5px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: translateY(-60%) rotate(-45deg); }
.pay-note { margin-top: 22px; color: var(--muted); }
.pay-note strong { color: var(--text); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .46s cubic-bezier(.16, 1, .3, 1); }
.faq details.is-open summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--muted); padding: 0 40px 22px 0; max-width: 72ch; }

/* ---------- the brief form ---------- */
.start-head { margin-bottom: 28px; }
.start-head p { color: var(--muted); margin-top: 12px; }
.brief, .sent { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(24px, 4vw, 44px); }
.progress { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 28px; }
.progress li { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background-color .3s; }
.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q legend { font: 700 1.5rem/1.2 "Satoshi", sans-serif; letter-spacing: -0.02em; margin-bottom: 22px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 500; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.chips label:hover span { border-color: var(--text); }
.chips input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field > span { font-weight: 500; font-size: .95rem; }
.field em { font-style: normal; color: var(--muted); font-weight: 400; margin-left: 6px; }
.field input, .field textarea { width: 100%; font: 400 1rem/1.5 "Satoshi", sans-serif; color: var(--text); background: var(--sunk); border: 1px solid transparent;
  border-radius: var(--radius-s); padding: 12px 14px; transition: border-color .15s, background-color .15s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.field textarea { resize: vertical; min-height: 130px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #D93A3A; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile { margin: 6px 0 14px; min-height: 65px; }
.fine { color: var(--muted); font-size: .88rem; }
.error { margin-top: 18px; color: #D0342C; font-weight: 500; }
:root[data-theme="dark"] .error { color: #FF8A80; }
.nav-btns { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.nav-btns .btn-primary { margin-left: auto; min-width: 140px; }
.sent { display: grid; gap: 12px; }
.sent h3 { font-size: 1.7rem; }
.sent p { color: var(--muted); }

/* ---------- footer ---------- */
.foot { margin-top: var(--section); padding: 32px 0 44px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; color: var(--muted); font-size: .92rem; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
.social { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; padding: 0; margin: 0 0 0 auto; }
.social a, .foot-legal a { text-decoration: none; }
.social a:hover, .foot-legal a:hover { color: var(--text); }
@media (max-width: 640px) { .social { margin-left: 0; } }

/* ---------- motion (v27) ----------
   One verb per kind of element, shared tokens, expo-out arrivals:
   - headings: words rise out of a mask (no blur, no fade)      - body copy: fades up 8 px (--t-fade)
   - cards / rows / cells: rise --rise (--t-move)                 - pictures: wipe + a gentle settle
   - rules: draw left to right; process: one line travels and each dot pops as it arrives
   The hero is a fixed CSS timeline that starts with the first paint; the rest is revealed by site.js (.in) when it reaches the
   screen, staggered in screen order. Entrances use fill "backwards", so afterwards each element is back on its own styles.
   Hidden states only exist under html.js. The owner decided motion always plays (no reduced-motion opt-out). */
:root { --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --pop: cubic-bezier(.34, 1.56, .64, 1);
  --t-move: 900ms; --t-fade: 600ms; --t-big: 1200ms; --rise: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes navIn { from { opacity: 0; transform: translateY(-12px); } }
@keyframes rvUp { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes rvFade { from { opacity: 0; transform: translateY(8px); } }
@keyframes maskUp { from { transform: translateY(105%); } }
@keyframes rvUnfold { from { opacity: 0; clip-path: inset(7% round 28px); } to { clip-path: inset(-48px round calc(var(--radius-l) + 48px)); } }
@keyframes rvWipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes rvSettle { from { transform: scale(1.06); } }
@keyframes rvFailsafe { to { opacity: 1; } }

.nav { animation: navIn 700ms var(--ease) backwards; }

/* masked words (hero h1 is split in the HTML, other headings by site.js); the mask is widened so glyph edges never clip */
.js .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .12em; margin: 0 -.08em -.12em; }
.js .w > span { display: inline-block; }

/* hero: a fixed timeline from the first paint (nav 0, eyebrow 100, words 180 + 70 each, lede 620, buttons 720 / 780) */
.js .hero .eyebrow { animation: rvFade var(--t-fade) var(--ease) 100ms backwards; }
.js .hero h1 .w > span { animation: maskUp 1000ms var(--ease) backwards; }
.js .hero h1 .w:nth-child(2) > span { animation-delay: 180ms; }
.js .hero h1 .w:nth-child(3) > span { animation-delay: 250ms; }
.js .hero h1 .w:nth-child(4) > span { animation-delay: 320ms; }
.js .hero h1 .w:nth-child(5) > span { animation-delay: 390ms; }
.js .hero h1 .w:nth-child(6) > span { animation-delay: 460ms; }
.js .hero .lede { animation: rvFade var(--t-fade) var(--ease) 620ms backwards; }
.js .hero-actions .btn:nth-child(1) { animation: rvUp var(--t-move) var(--ease) 720ms backwards; }
.js .hero-actions .btn:nth-child(2) { animation: rvUp var(--t-move) var(--ease) 780ms backwards; }
/* the Work head and the player are hidden from the first paint too (they may be on screen at load); if site.js never runs,
   a failsafe shows them after 3 s */
.js:not(.js-ok) .work .section-head > *, .js:not(.js-ok) .screen { opacity: 0; animation: rvFailsafe .01s 3s forwards; }

/* heading hosts (.section-head, .start-head, .about-item): words first, the rest 200 ms later */
.js .rvh:not(.in) .w > span { transform: translateY(105%); }
.js .rvh.in .w > span { transition: transform var(--t-move) var(--ease); transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * 45ms); }
.js .rvh:not(.in) > :not(h2):not(h3) { opacity: 0; }
.js .rvh.in > :not(h2):not(h3) { animation: rvFade var(--t-fade) var(--ease) calc(var(--delay, 0ms) + 200ms) backwards; }
.js .rvh.in > dl { animation-delay: calc(var(--delay, 0ms) + 270ms); }

/* generic verbs */
.js .rv-up:not(.in), .js .rv-fade:not(.in), .js .rv-unfold:not(.in) { opacity: 0; }
.js .rv-up.in { animation: rvUp var(--t-move) var(--ease) var(--delay, 0ms) backwards; }
.js .rv-fade.in { animation: rvFade var(--t-fade) var(--ease) var(--delay, 0ms) backwards; }
.js .rv-unfold.in { animation: rvUnfold var(--t-big) var(--ease) var(--delay, 0ms) backwards; }

/* rules: the container's top hairline draws; vertical dividers between cells fade in after it */
.js .rv-rule { position: relative; border-top-color: transparent !important; }
.js .rv-rule::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; }
.js .rv-rule.in::before { transform: scaleX(1); transition: transform var(--t-big) var(--ease) var(--delay, 0ms); }
.js .rv-rule > li + li { border-left-color: transparent; }
.js .rv-rule.in > li + li { border-left-color: var(--line); transition: border-left-color 600ms var(--ease) calc(var(--delay, 0ms) + 350ms); }

/* cells (facts, why): the content rises into a structure that stays still; the "01" counter fades */
.js .rv-cell:not(.in) > *, .js .rv-cell:not(.in)::before { opacity: 0; }
.js .rv-cell.in > * { animation: rvUp var(--t-move) var(--ease) var(--delay, 0ms) backwards; }
.js .rv-cell.in > :nth-child(2) { animation-delay: calc(var(--delay, 0ms) + 60ms); }
.js .rv-cell.in::before { transition: opacity var(--t-fade) var(--ease) var(--delay, 0ms); }

/* stills: wipe from the top, the picture settles inside it, the caption follows the picture */
.js .rv-frame:not(.in) > * { opacity: 0; }
.js .rv-frame.in figure { animation: rvWipe 900ms var(--ease-io) var(--delay, 0ms) backwards; }
.js .rv-frame.in figure img { animation: rvSettle 1400ms cubic-bezier(.33, 1, .68, 1) var(--delay, 0ms) backwards; }
.js .rv-frame.in h3 { animation: rvUp var(--t-move) var(--ease) calc(var(--delay, 0ms) + 450ms) backwards; }
.js .rv-frame.in p { animation: rvFade var(--t-fade) var(--ease) calc(var(--delay, 0ms) + 520ms) backwards; }

/* service rows: the bottom hairline draws, the row's content rises */
.js .rv-row { position: relative; border-bottom-color: transparent; }
.js .rv-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; }
.js .rv-row.in::after { transform: scaleX(1); transition: transform var(--t-move) var(--ease) var(--delay, 0ms); }
.js .rv-row:not(.in) > * { opacity: 0; }
.js .rv-row.in > * { animation: rvUp var(--t-move) var(--ease) calc(var(--delay, 0ms) + 80ms) backwards; }

/* process (desktop): one line travels through the four steps (320 ms each, eased at both ends);
   each dot pops exactly when the line reaches it, then its text rises */
.js .rv-timeline li { border-top-color: transparent; }
.js .rv-timeline li::after { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--line); transform: scaleX(0); transform-origin: left; }
.js .rv-timeline li::before { z-index: 1; }
.js .rv-timeline:not(.in) li::before { transform: scale(0); }
.js .rv-timeline:not(.in) li > * { opacity: 0; }
.js .rv-timeline.in li::after { transform: scaleX(1); transition: transform 320ms linear calc(var(--k, 0) * 320ms); }
.js .rv-timeline.in li:first-child::after { transition-timing-function: cubic-bezier(.4, 0, .6, .6); }
.js .rv-timeline.in li:last-child::after { transition-timing-function: cubic-bezier(.4, .4, .2, 1); }
.js .rv-timeline.in li::before { transition: transform 420ms var(--pop) calc(var(--k, 0) * 320ms); }
.js .rv-timeline.in li > * { animation: rvUp 800ms var(--ease) calc(var(--k, 0) * 320ms + 120ms) backwards; }
/* process (phones): each step on its own, dot first */
.js .rv-step:not(.in)::before { transform: scale(0); }
.js .rv-step.in::before { transition: transform 420ms var(--pop) var(--delay, 0ms); }
.js .rv-step:not(.in) > * { opacity: 0; }
.js .rv-step.in > * { animation: rvUp var(--t-move) var(--ease) calc(var(--delay, 0ms) + 120ms) backwards; }

/* revealed without motion (above the viewport after a restored scroll) */
.no-anim, .no-anim *, .no-anim::before, .no-anim::after { animation: none !important; transition: none !important; }

/* chapter change: the film dips to the screen colour and comes back up */
.screen video { transition: opacity 240ms var(--ease); }
.player.swap .screen video { opacity: 0; transition-duration: 140ms; }

/* ---------- hovers and presses: only on devices that really hover; one lift for clickable things ---------- */
.btn { transition: background-color .2s, border-color .2s, color .2s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.btn:active { transform: scale(.98); }
.chapter { transition: border-color .2s, background-color .2s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.frames figure { overflow: hidden; }
.frames figure img { transition: transform 700ms var(--ease); }
.plan, .pilot { transition: border-color .2s; }
.svc h3 { transition: transform .4s var(--ease); }
.nav-links a, .social a, .foot-legal a { background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease), color .15s; }
.theme-toggle svg { transition: opacity .2s, transform .45s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn-primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent); }
  .chapter:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .chapter[aria-selected="true"]:hover { box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
  .frames li:hover figure img { transform: scale(1.03); }
  .plan:hover, .pilot:hover { border-color: var(--line-strong); }
  .svc li:hover h3 { transform: translateX(4px); }
  .nav-links a:hover, .social a:hover, .foot-legal a:hover { background-position: 0 100%; background-size: 100% 1px; }
  :root:not([data-theme="dark"]) .theme-toggle:hover .i-moon, :root[data-theme="dark"] .theme-toggle:hover .i-sun { transform: rotate(12deg); }
}
.chips span { transition: border-color .15s, background-color .15s, color .15s, transform .2s var(--ease); }
.chips input:checked + span { animation: chipPop 260ms var(--pop); }
@keyframes chipPop { from { transform: scale(.96); } }
.progress li { position: relative; overflow: hidden; }
.progress li::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease); }
.progress li.done::after { transform: scaleX(1); }

/* theme switch: the new theme spreads in a circle from the toggle (View Transitions; other browsers just switch) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theming, .theming * { transition: none !important; }

/* print / PDF: everything visible, no half-finished entrance */
@media print {
  .js .rv, .js .rv *, .js .w > span, .js .hero * { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
  .js .rv::before, .js .rv::after, .js .rv li::before, .js .rv li::after { transform: none !important; }
}

/* legal pages (privacy / 404) have no site.js: a short CSS-only entrance */
.js .legal > * { animation: rvUp var(--t-move) var(--ease) backwards; }
.js .legal > :nth-child(2) { animation-delay: 70ms; } .js .legal > :nth-child(3) { animation-delay: 140ms; }
.js .legal > :nth-child(4) { animation-delay: 210ms; } .js .legal > :nth-child(5) { animation-delay: 280ms; }
.js .legal > :nth-child(n+6) { animation-delay: 350ms; }

/* ---------- legal pages (privacy / 404) ---------- */
.legal { width: min(100% - 2 * var(--gutter), 720px); margin: 64px auto 96px; display: grid; gap: 16px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.legal h2 { font-size: 1.3rem; margin-top: 18px; }
.legal p { color: var(--muted); }
.unofficial { display: inline-block; margin: 0 0 10px; padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 .78rem/1.6 "Satoshi", sans-serif; color: var(--muted); vertical-align: middle; letter-spacing: 0; }