/* Corvernn public site — docs/public-site.md
   Dark. Precise. Quiet. Sharp.  Black = canvas · White = action · Gray = hierarchy · Color = semantic state. */

@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Metric-matched fallback so the swap to Inter doesn't move the hero (CLS). */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
  /* Primitives */
  --cv-black: #000000; --cv-raven: #050505; --cv-obsidian: #0A0A0B; --cv-carbon: #111214; --cv-graphite: #17181B;
  --cv-white: #FFFFFF; --cv-frost: #F3F4F6; --cv-silver: #B5B8BF; --cv-ash: #8A8E97; --cv-steel: #3A3D43;
  --cv-hairline: #1F2125; --cv-edge: #2A2C31;
  --cv-success: #36C98F; --cv-warning: #E4A853; --cv-danger: #E05A67; --cv-info: #7A9FFF;

  /* Semantic */
  --surface-base: var(--cv-raven);
  --surface-raised: #0C0D0F;
  --surface-1: #0B0C0E;        /* frames around demonstrations and work */
  --surface-2: #121316;        /* the inside of an elevated mockup (browser, window) */
  --surface-strong: var(--cv-graphite);
  --text-primary: var(--cv-frost);
  --text-secondary: var(--cv-silver);
  --text-meta: var(--cv-ash);           /* 6.2:1 on --surface-base */
  --border-subtle: var(--cv-hairline);
  --border: var(--cv-edge);
  --border-hover: #3A3D43;
  --action-bg: var(--cv-white);
  --action-text: var(--cv-raven);
  --action-hover: #E8E9EB;
  --focus: var(--cv-frost);

  /* Type */
  --font-display: "Inter Tight", "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-display: clamp(2.75rem, 1.45rem + 5.2vw, 6.25rem);
  --t-h1: clamp(2.375rem, 1.5rem + 3.4vw, 4.5rem);
  --t-h2: clamp(1.875rem, 1.35rem + 2.1vw, 3.25rem);
  --t-h3: clamp(1.1875rem, 1.08rem + .45vw, 1.5rem);
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-label: .75rem;

  /* Space — related < group < block < section */
  --space-related: .5rem;
  --space-group: 1.25rem;
  --space-block: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  --space-section: clamp(5rem, 3.2rem + 7vw, 9.5rem);
  --gutter: clamp(1rem, .4rem + 3vw, 3rem);
  --container: 80rem;
  --measure: 38rem;
  --header-h: 4rem;

  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;

  /* Motion — feedback < state < context. Editorial motion is scroll-driven (scene progress), not a duration. */
  --motion-feedback: 150ms;
  --motion-state: 230ms;
  --motion-context: 360ms;
  --dur-feedback: var(--motion-feedback);
  --dur-state: var(--motion-state);
  --dur-context: var(--motion-context);
  --dur-editorial: 720ms;   /* time-based intros only (phones, pillar-page heroes) */
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-state: cubic-bezier(.2, .8, .2, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);
  --distance-small: .5rem;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--surface-base); color: var(--text-primary);
  font: 400 var(--t-body)/1.6 var(--font-body); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--cv-frost); color: var(--cv-raven); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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; }
.muted { color: var(--text-meta); }
.nowrap { white-space: nowrap; }
.i { flex: none; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--action-bg); color: var(--action-text); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }
main:focus { outline: none; }

/* ── Type ───────────────────────────────────────────── */
.t-display, .t-h1, .t-h2, .t-h3 { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); text-wrap: balance; }
.t-display { font-size: var(--t-display); line-height: .94; letter-spacing: -.05em; }
.t-h1 { font-size: var(--t-h1); line-height: .96; letter-spacing: -.045em; }
.t-h2 { font-size: var(--t-h2); line-height: .98; letter-spacing: -.04em; }
.t-h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.02em; }
.t-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--text-secondary); max-width: var(--measure); text-wrap: pretty; }
.t-label { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-meta); }

/* ── Layout ─────────────────────────────────────────── */
.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section + .section { border-top: 1px solid var(--border-subtle); }
.section-head { display: grid; gap: var(--space-group); margin-bottom: var(--space-block); max-width: 52rem; }
.section-head--wide { max-width: 64rem; }
.section-head--split { max-width: none; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } }

/* ── Buttons & links ────────────────────────────────── */
.btn {
  --h: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: var(--h); padding: 0 1.125rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: .9375rem; font-weight: 500; line-height: 1.2; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-feedback) var(--ease-state), border-color var(--dur-feedback) var(--ease-state), color var(--dur-feedback) var(--ease-state), transform var(--dur-feedback) var(--ease-state);
}
.btn .i { transition: transform var(--dur-state) var(--ease-enter); }
.btn:hover .i { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--action-bg); color: var(--action-text); }
.btn--primary:hover { background: var(--action-hover); }
.btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border); }
.btn--secondary:hover { border-color: var(--border-hover); background: rgba(255,255,255,.03); }
.btn--sm { --h: 2.25rem; padding: 0 .875rem; font-size: .875rem; }
.btn--lg { --h: 3.125rem; padding: 0 1.375rem; font-size: 1rem; }
.link { display: inline-flex; align-items: center; gap: .375rem; color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-hover); font-size: var(--t-small); font-weight: 500; }
.link:hover { text-decoration-color: currentColor; }
.link .i { transition: transform var(--dur-state) var(--ease-enter); }
.link:hover .i { transform: translateX(3px); }

.tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.tags li { padding: .25rem .5rem; border: 1px solid var(--border); border-radius: 6px; font-size: .75rem; line-height: 1.2; color: var(--text-secondary); }

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-state) var(--ease-state), border-color var(--dur-state) var(--ease-state);
  view-transition-name: site-header;
}
.site-header.is-scrolled { background: rgba(5,5,5,.94); border-bottom-color: rgba(255,255,255,.06); }   /* no blur: cheap to paint over pinned scenes */
.header-row { height: 100%; display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--text-primary); flex: none; }
.brand .mark { width: 1.75rem; height: 1.75rem; color: var(--cv-white); }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; letter-spacing: -.03em; }
.nav { display: none; align-items: center; gap: .25rem; margin-inline: auto; }
.nav-link { display: inline-flex; align-items: center; gap: .25rem; height: 2.25rem; padding: 0 .75rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: .9375rem; text-decoration: none; cursor: pointer; transition: color var(--dur-feedback) var(--ease-state), background-color var(--dur-feedback) var(--ease-state); }
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--text-primary); background: rgba(255,255,255,.04); }
.nav-link .i { transition: transform var(--dur-state) var(--ease-state); }
.nav-link[aria-expanded="true"] .i { transform: rotate(180deg); }
.nav-item { position: relative; }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.menu-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); cursor: pointer; }
.menu-toggle:hover { border-color: var(--border-hover); }
@media (min-width: 900px) {
  .nav { display: flex; }
  .header-actions { margin-left: 0; }
  .menu-toggle { display: none; }
}
@media (max-width: 420px) { .header-cta { display: none; } }

.menu-panel {
  position: absolute; left: 50%; top: calc(100% + .75rem); width: 24rem; padding: .5rem; translate: -50% 0;
  background: #0E0F11;
  border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,.45);
}
.menu-panel:not([hidden]) { animation: pop var(--dur-feedback) var(--ease-enter); }
.menu-panel a { display: flex; gap: .875rem; padding: .75rem; border-radius: var(--radius-sm); text-decoration: none; transition: background-color var(--dur-feedback) var(--ease-state); }
.menu-panel a:hover, .menu-panel a:focus-visible { background: rgba(255,255,255,.05); }
.menu-panel a[aria-current] .menu-text b::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: .5rem; border-radius: 50%; background: var(--cv-white); vertical-align: middle; }
.menu-n { font: 500 .75rem/1.6 var(--font-body); color: var(--text-meta); font-variant-numeric: tabular-nums; padding-top: .0625rem; }
.menu-text { display: grid; gap: .125rem; }
.menu-text b { font-weight: 600; font-size: .9375rem; }
.menu-text span { font-size: .8125rem; color: var(--text-secondary); line-height: 1.4; }
@keyframes pop { from { opacity: .4; transform: translateY(-4px); } }

/* Mobile menu — native <dialog>: focus trap, Escape and return focus come from the browser. */
.mobile-menu { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--surface-base); color: var(--text-primary); }
.mobile-menu::backdrop { background: rgba(0,0,0,.6); }
.mobile-menu[open] { animation: sheet var(--dur-state) var(--ease-enter); }
@keyframes sheet { from { opacity: .4; transform: translateY(-12px); } }
.mobile-menu-inner { min-height: 100%; display: flex; flex-direction: column; gap: 2rem; padding: 0 var(--gutter) max(1.5rem, env(safe-area-inset-bottom)); }
.mobile-menu-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.mobile-label { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-meta); margin-bottom: .5rem; }
.mobile-pillars a { display: grid; grid-template-columns: 2rem 1fr; column-gap: .25rem; padding: 1rem 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; }
.mobile-pillars b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; }
.mobile-pillars span:last-child { grid-column: 2; color: var(--text-secondary); font-size: .875rem; }
.mobile-pillars .menu-n { grid-row: span 2; padding-top: .45rem; }
.mobile-links { display: grid; gap: .25rem; margin-top: 1.5rem; }
.mobile-links a { display: block; padding: .625rem 0; font-size: 1.0625rem; color: var(--text-secondary); text-decoration: none; }
.mobile-cta { margin-top: auto; width: 100%; }

/* ── Start / brief ──────────────────────────────────── */
.start-grid { display: grid; gap: 2.5rem; }
.start-copy { display: grid; gap: var(--space-group); align-content: start; }
@media (min-width: 1000px) {
  .start-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; }
  .start-copy { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
}
.brief { display: grid; gap: 1.5rem; }
.brief-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .brief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brief-grid > .field:first-child:nth-last-child(3) { grid-column: 1 / -1; } .brief-grid--2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.field { display: grid; gap: .375rem; align-content: start; }
.field label, .brief-choice legend { font-size: .875rem; font-weight: 500; color: var(--text-primary); }
.opt { font-weight: 400; color: var(--text-meta); font-size: .8125rem; }
.field-hint { font-size: .8125rem; color: var(--text-meta); margin-top: -.125rem; }
.field input, .field textarea, .select select {
  width: 100%; min-height: 2.875rem; padding: .6875rem .875rem; border-radius: var(--radius-sm); border: 1px solid #292B30; background: #0D0E10; color: var(--text-primary);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--dur-feedback) var(--ease-state), box-shadow var(--dur-feedback) var(--ease-state);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-meta); }
.field input:hover, .field textarea:hover, .select select:hover { border-color: var(--border-hover); }
.field input:focus, .field textarea:focus, .select select:focus { outline: none; border-color: #6A6E76; box-shadow: 0 0 0 3px rgba(255,255,255,.07); }
.field.is-invalid input, .field.is-invalid textarea { border-color: rgba(224,90,103,.7); }
.field-error { display: flex; gap: .375rem; font-size: .8125rem; color: #EE8A94; }
.field-error::before { content: ""; flex: none; width: 4px; height: 4px; margin-top: .55em; border-radius: 50%; background: currentColor; }
.select { position: relative; }
.select select { appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select .i { position: absolute; right: .875rem; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--text-meta); }
.brief-choice { margin: 0; padding: 0; border: 0; display: grid; gap: .625rem; min-width: 0; }
.brief-choice legend { padding: 0; margin-bottom: .625rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .9375rem; color: var(--text-secondary); cursor: pointer; transition: border-color var(--dur-feedback) var(--ease-state), background-color var(--dur-feedback) var(--ease-state), color var(--dur-feedback) var(--ease-state);
}
.choice span::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid var(--text-meta); transition: background-color var(--dur-feedback), border-color var(--dur-feedback); }
.choice:hover span { border-color: var(--border-hover); color: var(--text-primary); }
.choice input:checked + span { border-color: var(--cv-frost); color: var(--text-primary); background: rgba(255,255,255,.04); }
.choice input:checked + span::before { background: var(--cv-white); border-color: var(--cv-white); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice--sm span { min-height: 2.5rem; padding: 0 .875rem; font-size: .875rem; }
.brief-choice.is-invalid .choice span { border-color: rgba(224,90,103,.55); }
.brief-choice--sub legend { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.brief-adapt { display: grid; gap: 1.25rem; }
.js .brief-adapt .adapt { display: none; }
.js .brief-adapt .adapt.is-on { display: block; animation: rise var(--dur-state) var(--ease-enter); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.brief-alert { display: flex; gap: .625rem; align-items: flex-start; padding: .875rem 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(224,90,103,.3); background: rgba(224,90,103,.08); color: #F2A2A9; font-size: .9375rem; }
.brief-alert .i { margin-top: .125rem; }
.brief-alert > div { display: grid; gap: .375rem; justify-items: start; }
.brief-alert-title { font-weight: 600; color: #F6C3C8; }
.brief-retry { margin-top: .25rem; min-height: 2.25rem; padding: 0 .875rem; border-radius: var(--radius-sm); border: 1px solid rgba(224,90,103,.45); background: transparent; color: #F6C3C8; font-size: .875rem; font-weight: 500; cursor: pointer; transition: background-color var(--motion-feedback) var(--ease-state); }
.brief-retry:hover { background: rgba(224,90,103,.12); }
.brief-foot { display: grid; gap: 1rem; padding-top: .5rem; }
.brief-foot .btn { justify-self: start; }
.brief-note { font-size: .8125rem; color: var(--text-meta); max-width: 34rem; }
.brief-note a { color: var(--text-secondary); }
.spinner { display: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgba(5,5,5,.25); border-top-color: var(--cv-raven); animation: spin .8s linear infinite; }
.brief.is-sending .spinner { display: inline-block; }
.brief.is-sending [data-submit] .i { display: none; }
.brief.is-sending [data-submit] { cursor: progress; background: var(--action-hover); }
@keyframes spin { to { transform: rotate(360deg); } }
.brief-done { display: grid; gap: .75rem; justify-items: start; padding: 2rem 0; border-top: 1px solid var(--border-subtle); }
.brief-done:not([hidden]) { animation: rise var(--dur-context) var(--ease-enter); }
.brief-done:focus { outline: none; }
.brief-done h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; letter-spacing: -.02em; }
.brief-done p { color: var(--text-secondary); max-width: 32rem; }
.done-mark { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(54,201,143,.12); color: #67D6A8; border: 1px solid rgba(54,201,143,.25); }
.brief-done:not([hidden]) .done-mark .i path { stroke-dasharray: 24; animation: draw 520ms var(--ease-enter) 120ms both; }
@keyframes draw { from { stroke-dashoffset: 24; } }

/* ── FAQ ────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--border-subtle); max-width: 52rem; }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .i { color: var(--text-meta); transition: transform var(--dur-state) var(--ease-state), color var(--dur-state); }
.faq-item summary:hover .i { color: var(--text-primary); }
.faq-item[open] summary .i { transform: rotate(45deg); color: var(--text-primary); }
.faq-a { padding: 0 3rem 1.5rem 0; color: var(--text-secondary); max-width: 44rem; }
.faq-item[open] .faq-a { animation: rise var(--dur-state) var(--ease-enter); }

/* ── Footer ─────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border-subtle); padding-block: 4rem 2rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; display: grid; gap: 1rem; align-content: start; }
.footer-brand p { color: var(--text-meta); font-size: .875rem; max-width: 18rem; }
.footer-col h2 { font-size: .8125rem; font-weight: 500; color: var(--text-meta); margin-bottom: .75rem; }
.footer-col ul { display: grid; gap: .25rem; }
.footer-col a { display: inline-block; padding: .25rem 0; color: var(--text-secondary); text-decoration: none; font-size: .9375rem; transition: color var(--dur-feedback); }
.footer-col a:hover { color: var(--text-primary); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); font-size: .8125rem; color: var(--text-meta); }
.footer-base a { color: var(--text-meta); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: auto; } }

/* ── Page transitions (cross-document, where supported) ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease-state); }

/* ── Reduced motion: final states, no travel. ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
  .btn:hover .i, .link:hover .i, .btn:active { transform: none; }
}

/* ── Brief page, legal, 404 ─────────────────────────── */
.start--page { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.start-next { display: grid; gap: .875rem; margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); max-width: 26rem; }
.start-next li { display: grid; grid-template-columns: 2rem 1fr; }
.start-next span { font-size: .8125rem; color: var(--text-meta); font-variant-numeric: tabular-nums; padding-top: .125rem; }
.start-back { margin-top: .5rem; }
.legal-wrap { display: grid; gap: var(--space-group); max-width: 44rem; }
.prose { display: grid; gap: 1rem; margin-top: 2rem; color: var(--text-secondary); }
.prose h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--text-primary); margin-top: 1.5rem; }
.prose a { color: var(--text-primary); }
.missing-wrap { display: grid; gap: var(--space-group); }
.missing-code { font-size: .8125rem; color: var(--text-meta); font-variant-numeric: tabular-nums; }
.missing-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; }
.missing-links a { color: var(--text-primary); }

.js .brief-adapt:not(:has(.adapt.is-on)) { display: none; }

/* ══ Story system — docs/public-site.md › Story ═════════════════════════════════════════════════════════════════
   Every page is one story told in acts. Continuity comes from four things only: the thread (where you are), the
   act number and its connective title (First, Then, Finally), the bridge that hands each act to the next, and a
   visual that stays the same object while it changes state. Nothing holds the scroll: a stage is sticky only while
   its own text scrolls past it, and every state change is a short, time-based transition. */
:root { --motion-story: 680ms; --ease-story: cubic-bezier(.16, 1, .3, 1); }

.soft { color: var(--text-secondary); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .5rem; }
.ticks { display: grid; gap: .625rem; margin-top: 1.75rem; color: var(--text-secondary); }
.ticks li { display: flex; gap: .75rem; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: .875rem; height: 1px; background: var(--text-meta); transform: translateY(-.3em); }
.ticks--muted { color: var(--text-meta); }
.crumb { display: flex; gap: .5rem; font-size: .8125rem; color: var(--text-meta); }
.crumb a { color: var(--text-secondary); text-decoration: none; }
.crumb a:hover { color: var(--text-primary); }
.crumb span:last-child { color: var(--text-primary); }
@keyframes rise { from { opacity: .001; transform: translateY(10px); } }

.act { position: relative; padding-block: clamp(4.5rem, 3rem + 5vw, 8.5rem); }
.act-head { position: relative; display: grid; gap: var(--space-group); max-width: 50rem; margin-bottom: var(--space-block); }
.act-head .t-h2 { max-width: 22ch; }
.act-n { display: none; }   /* the thread carries the order; no eyebrow above titles */

/* Bridge: the last sentence of an act, and a line that keeps going into the next one. */
.bridge { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.bridge a { display: inline-grid; justify-items: start; gap: 1rem; color: var(--text-secondary); text-decoration: none; font: 500 clamp(1.125rem, 1rem + .55vw, 1.4375rem)/1.35 var(--font-display); letter-spacing: -.02em; }
.bridge a:hover span, .bridge a:focus-visible span { color: var(--text-primary); }
.bridge-line { position: relative; width: 1px; height: clamp(3rem, 2rem + 4vw, 6rem); margin-left: .25rem; background: linear-gradient(var(--text-meta), rgba(138,142,151,0)); transform-origin: top; }
.js .bridge-line { transform: scaleY(0); transition: transform 900ms var(--ease-story) 120ms; }
.js .bridge.is-in .bridge-line { transform: none; }

/* Thread: the page's acts as one line in the left margin (wide screens only). */
.thread { display: none; }
@media (min-width: 1360px) {
  .thread { display: block; position: fixed; left: 1.5rem; top: 50%; z-index: 20; transform: translateY(-50%); }
  .thread ol { position: relative; display: grid; gap: .875rem; }
  .thread-line { position: absolute; left: 3px; top: .5rem; bottom: .5rem; width: 1px; background: var(--border); }
  .thread-line i { position: absolute; inset: 0; background: var(--cv-frost); transform-origin: top; transform: scaleY(var(--thread-p, 0)); }
  .thread a { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 1rem; color: var(--text-meta); font-size: .75rem; text-decoration: none; }
  .thread a i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--surface-base); border: 1px solid var(--border-hover); transition: background-color var(--motion-state), border-color var(--motion-state), transform var(--motion-state) var(--ease-story); }
  .thread a span { opacity: 0; transform: translateX(-4px); white-space: nowrap; pointer-events: none; transition: opacity var(--motion-state), transform var(--motion-state) var(--ease-story); }
  .thread a.is-past i { background: var(--cv-steel); border-color: var(--cv-steel); }
  .thread a[aria-current] i { background: var(--cv-white); border-color: var(--cv-white); transform: scale(1.3); }
  .thread:hover a span, .thread a:focus-visible span { opacity: 1; transform: none; }
  .thread a:focus-visible { outline-offset: 4px; }
}
@media (min-width: 1600px) { .thread a[aria-current] span { opacity: 1; transform: none; color: var(--text-secondary); } }

/* ── Homepage hero: the brand render, resolved within 1.5 s of loading ─────────────── */
.hero { position: relative; margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); background: var(--cv-black); overflow: clip; }
.hero-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.hero-art { position: absolute; inset: 0; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-signals { display: none; }
.depth { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1200ms ease; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.depth.is-on { opacity: 1; }
.hero-grid { position: relative; padding-block: 1.5rem 4rem; }
.hero-copy { display: grid; gap: 1.5rem; max-width: 40rem; }
.hero-copy .t-display { max-width: 11ch; }
@media (min-width: 900px) {
  .hero { display: grid; min-height: min(100svh, 60rem); align-items: center; }
  .hero-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .hero-img { object-position: 50% 50%; }
  .hero-signals { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .hero-grid { padding-block: 5rem 7rem; }
  .hero-copy { max-width: min(42rem, 48%); }
}
.hero-orbit { fill: none; stroke: rgba(243,244,246,.34); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero-ping { fill: none; stroke: var(--cv-frost); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hero-label { fill: var(--text-secondary); font: 500 21px var(--font-body); letter-spacing: .01em; }
.hero-label tspan { fill: var(--text-meta); }
@media (prefers-reduced-motion: no-preference) {
  @property --reveal { syntax: "<percentage>"; inherits: false; initial-value: 150%; }
  .js .hero-img { animation: hero-in 1300ms var(--ease-story) both; -webkit-mask-image: radial-gradient(circle at 68% 47%, #000 var(--reveal), transparent calc(var(--reveal) + 22%)); mask-image: radial-gradient(circle at 68% 47%, #000 var(--reveal), transparent calc(var(--reveal) + 22%)); }
  .js .hero-copy > * { animation: rise 640ms var(--ease-story) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: 90ms; }
  .js .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .js .hero-orbit { stroke-dashoffset: 1; animation: orbit-draw 900ms var(--ease-story) 450ms forwards; }
  .js .hero-ping { animation: ping 900ms var(--ease-story) calc(900ms + var(--i, 0) * 150ms) 2 both; }
  .js .hero-label { opacity: 0; animation: label-in 500ms var(--ease-story) calc(1100ms + var(--i, 0) * 150ms) forwards; }
}
@keyframes hero-in { from { --reveal: 0%; opacity: .2; transform: scale(1.035); } }
@keyframes orbit-draw { to { stroke-dashoffset: 0; } }
@keyframes ping { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes label-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hero-label { transform-box: fill-box; }

/* ── Pillar-page heroes ─────────────────────────────── */
.phero { position: relative; margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4.5rem)); padding-bottom: clamp(3.5rem, 2rem + 5vw, 6.5rem); overflow: clip; }
.phero-grid { position: relative; display: grid; gap: 3rem; align-items: center; }
.phero-copy { display: grid; gap: 1.5rem; max-width: 40rem; }
.phero-copy .t-h1 { max-width: 16ch; }
@media (min-width: 1000px) {
  .phero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .phero-grid--stack { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .phero-grid--stack .phero-copy { max-width: 46rem; }
  .phero-grid--stack .t-h1 { max-width: 20ch; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .phero-copy > * { animation: rise 640ms var(--ease-story) both; }
  .js .phero-copy > :nth-child(2) { animation-delay: 60ms; }
  .js .phero-copy > :nth-child(n+3) { animation-delay: 130ms; }
}

/* Sculpture: the Raven-C solid (WebGL) with the brand render as its poster and fallback. */
.sculpt { position: relative; }
.sculpt canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms ease; }
.sculpt.is-live canvas { opacity: 1; }
.sculpt.is-live .sculpt-fallback { opacity: 0; transition: opacity 900ms ease; }
.sculpt--hero { aspect-ratio: 1; max-width: 36rem; justify-self: center; width: 100%; }
.sculpt--hero .sculpt-fallback { width: 100%; height: 100%; object-fit: cover; object-position: 68% 47%; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.orbits { position: absolute; inset: -4%; width: 108%; height: 108%; overflow: visible; pointer-events: none; }
.orbits ellipse { fill: none; stroke: rgba(243,244,246,.16); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) { .js .orbits ellipse { stroke-dashoffset: 1; animation: orbit-draw 1400ms var(--ease-story) 300ms forwards; } .js .orbits ellipse + ellipse { animation-delay: 520ms; } }
@media (max-width: 999px) { .orbits ellipse + ellipse { display: none; } .sculpt--hero { max-width: 26rem; } }
.phero .depth { mix-blend-mode: screen; }

/* ── Frames: the second surface, only around demonstrations and work ─────────── */
.frame { position: relative; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: clamp(.875rem, .4rem + 1.4vw, 1.75rem); overflow: hidden; isolation: isolate; }
.frame::before, .stage-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("media/obsidian-512.webp") 0 0 / 256px repeat; opacity: .55; mix-blend-mode: screen; pointer-events: none; }

/* ── Act 2 · the gap: three lines with a break, closing one after another ─── */
.gaps { position: relative; border-left: 1px solid var(--border); margin-left: .25rem; }
.gap-row a { position: relative; display: grid; gap: 1.25rem 2rem; padding: 1.75rem 0 1.75rem 1.75rem; border-bottom: 1px solid var(--border-subtle); color: inherit; text-decoration: none; transition: background-color var(--motion-feedback); }
.gap-row:first-child a { border-top: 1px solid var(--border-subtle); }
.gap-row a::before { content: ""; position: absolute; left: 0; top: 2.35rem; width: 1rem; height: 1px; background: var(--border-hover); }
.gap-row a:hover { background: rgba(255,255,255,.02); }
.gap-q b { display: block; font: 600 clamp(1.375rem, 1.1rem + 1vw, 2rem)/1.12 var(--font-display); letter-spacing: -.03em; }
.gap-q span { display: block; margin-top: .5rem; color: var(--text-secondary); max-width: 32rem; }
.gap-line { position: relative; height: 9px; align-self: center; }
.gap-a, .gap-b { position: absolute; top: 4px; width: 50%; height: 1px; background: var(--cv-frost); transition: transform 760ms var(--ease-story); }
.gap-a { left: 0; transform-origin: left; }
.gap-b { right: 0; transform-origin: right; }
.gap-node { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--cv-white); transition: transform 320ms var(--ease-story) 560ms; }
.js .gap-row:not(.is-closed) .gap-a, .js .gap-row:not(.is-closed) .gap-b { transform: scaleX(.64); }
.js .gap-row:not(.is-closed) .gap-node { transform: scale(0); transition-delay: 0ms; }
.gap-p { display: flex; align-items: baseline; gap: .5rem; font: 600 1.125rem/1.2 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.gap-n { font: 500 .75rem var(--font-body); color: var(--text-meta); }
.js .gap-row:not(.is-closed) .gap-p { color: var(--text-meta); }
.gap-p { transition: color var(--motion-context) 500ms; }
@media (min-width: 900px) { .gap-row a { grid-template-columns: minmax(0, 1.35fr) minmax(5rem, 1fr) minmax(10rem, auto); align-items: center; } }
@media (max-width: 899px) { .gap-row a { grid-template-columns: minmax(0, 1fr) auto; } .gap-q { grid-column: 1 / -1; } }
.gap-why { margin-top: 2.5rem; max-width: 46rem; font-size: var(--t-lead); line-height: 1.55; color: var(--text-secondary); }

/* ── Act 3 · pillars: one module, three times ─────────────────────────────── */
.ptabs { position: sticky; top: var(--header-h); z-index: 12; background: rgba(5,5,5,.96); border-block: 1px solid var(--border-subtle); }
.ptabs-row { position: relative; display: flex; gap: 2rem; height: 3.125rem; }
.ptabs a { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-meta); text-decoration: none; font-size: .9375rem; transition: color var(--motion-feedback); }
.ptabs a span { font-size: .75rem; font-variant-numeric: tabular-nums; }
.ptabs a:hover, .ptabs a[aria-current] { color: var(--text-primary); }
.ptabs-ind { position: absolute; left: 0; bottom: -1px; width: var(--w, 0); height: 1px; background: var(--cv-white); transform: translateX(var(--x, 0)); transition: transform var(--motion-context) var(--ease-story), width var(--motion-context) var(--ease-story); }
@media (max-width: 899px) { .ptabs { display: none; } }
.module { display: grid; gap: 2rem; padding-block: clamp(3rem, 2rem + 3vw, 5rem); border-bottom: 1px solid var(--border-subtle); scroll-margin-top: calc(var(--header-h) + 3.25rem); }
.module:last-of-type { border-bottom: 0; }
@media (min-width: 1000px) { .module { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4.5rem; align-items: center; } }
.module-title { display: flex; align-items: baseline; gap: .75rem; font: 600 clamp(1.875rem, 1.35rem + 1.8vw, 2.75rem)/1 var(--font-display); letter-spacing: -.04em; }
.module-title span { font: 500 .8125rem var(--font-body); color: var(--text-meta); letter-spacing: 0; }
.module-promise { margin-top: 1rem; font-size: var(--t-lead); line-height: 1.5; color: var(--text-secondary); }
.module-facts { display: grid; gap: 1rem; margin: 1.75rem 0 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); }
.module-facts dt { font-size: .8125rem; color: var(--text-meta); }
.module-facts dd { margin: .125rem 0 0; }
.module-visual figcaption { margin-top: .875rem; font-size: .8125rem; color: var(--text-meta); }

/* ── Web: the evolving site (container units: 1cqw = 1 % of the mock's width) ─────────────── */
.mk {
  --mk-bg: #E7E5E0; --mk-ink: #26282C; --mk-soft: #6D7077; --mk-line: #C8C5BF; --mk-card: #F2F1EE; --mk-img: #CDCAC4; --mk-accent: #26282C; --mk-bar: rgba(0,0,0,.05);
  --t: var(--motion-story); --e: var(--ease-story);
  position: relative; container-type: inline-size; aspect-ratio: 16 / 10.4; overflow: hidden; border-radius: 10px;
  background: var(--mk-bg); color: var(--mk-ink); font-family: var(--font-body); line-height: 1.2; text-align: left;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  transition: background-color var(--t) var(--e), color var(--t) var(--e), box-shadow var(--t) var(--e);
}
.mk *, .mk *::before { transition: left var(--t) var(--e), top var(--t) var(--e), width var(--t) var(--e), height var(--t) var(--e), font-size var(--t) var(--e), color var(--t) var(--e), background-color var(--t) var(--e), border-color var(--t) var(--e), opacity var(--t) var(--e), transform var(--t) var(--e), letter-spacing var(--t) var(--e), padding var(--t) var(--e); }
.mk-bar { position: absolute; left: 0; right: 0; top: 0; height: 4.2cqw; display: flex; align-items: center; gap: .7cqw; padding: 0 1.6cqw; background: var(--mk-bar); border-bottom: 1px solid var(--mk-line); }
.mk-bar i { width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--mk-line); }
.mk-bar span { margin-left: 1.4cqw; font-size: 1.15cqw; color: var(--mk-soft); }
.mk-page { position: absolute; left: 0; right: 0; top: 4.2cqw; bottom: 0; }
.mk-page > * { position: absolute; }
.mk-logo { left: 4cqw; top: 2.3cqw; display: flex; align-items: center; gap: .6cqw; font-size: 1.6cqw; }
.mk-logo svg { width: 2.6cqw; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mk-logo b { font-weight: 600; }
.mk-links { left: 35cqw; top: 2.7cqw; display: flex; font-size: 1.25cqw; color: var(--mk-soft); }
.mk-links i { font-style: normal; margin-right: 4.6cqw; }
.mk-links i:nth-child(2) { margin-right: 2cqw; }
.mk-navcta { left: 84cqw; top: 2cqw; padding: .45cqw .9cqw; font-size: 1.15cqw; color: var(--mk-soft); border: 1px solid var(--mk-line); border-radius: .4cqw; }
.mk-rule { left: 0; width: 100cqw; height: 1px; background: var(--mk-line); }
.mk-rule--1 { top: 7.4cqw; } .mk-rule--2 { top: 30cqw; } .mk-rule--3 { top: 45cqw; left: 4cqw; width: 92cqw; }
.mk-h { left: 6.5cqw; top: 11.2cqw; width: 45cqw; font-size: 3.5cqw; font-weight: 500; line-height: 1.12; }
.mk-sub { left: 6.5cqw; top: 19.6cqw; width: 44cqw; font-size: 1.85cqw; line-height: 1.3; color: var(--mk-ink); }
.mk-cta { left: 6.5cqw; top: 33.6cqw; padding: .4cqw .9cqw; font-size: 1.2cqw; color: var(--mk-soft); border: 1px solid var(--mk-line); border-radius: .4cqw; background: transparent; }
.mk-cta b { font-weight: 500; }
.mk-cta-b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; opacity: 0; }
.mk-proof { left: 60cqw; top: 56.4cqw; display: flex; align-items: center; gap: .25cqw; font-size: .95cqw; color: var(--mk-soft); opacity: .75; }
.mk-proof i { width: 1cqw; height: 1cqw; background: currentColor; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.mk-proof b { margin-left: .5cqw; font-weight: 500; white-space: nowrap; }
.mk-img { left: 57cqw; top: 10.6cqw; width: 37cqw; height: 24cqw; border-radius: .6cqw; background: var(--mk-img); overflow: hidden; transform: rotate(1.4deg); }
.mk-img-generic { position: absolute; inset: 0; display: grid; place-items: center; }
.mk-img-generic svg { width: 6cqw; fill: none; stroke: var(--mk-soft); stroke-width: 1.3; }
.mk-img-room { position: absolute; inset: 0; opacity: 0; }
.mk-img-room i { position: absolute; }
.r-wall { inset: 0; background: linear-gradient(160deg, #3A332B 0%, #221E1A 55%, #17191C 100%); }
.r-window { left: 58%; top: 12%; width: 26%; height: 52%; background: linear-gradient(180deg, rgba(236,214,178,.55), rgba(210,180,140,.12)); border-radius: 1px; box-shadow: 0 0 6cqw rgba(226,196,150,.25); }
.r-counter { left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #2B2621, #1C1A18); border-top: 1px solid rgba(210,180,140,.35); }
.r-ridge { left: 6%; top: 18%; width: 40%; height: 18%; border-bottom: 1px solid rgba(210,180,140,.6); clip-path: polygon(0 100%, 30% 20%, 48% 62%, 62% 38%, 100% 100%); background: linear-gradient(180deg, rgba(210,180,140,.18), transparent); }
.mk-band { left: 0; width: 100cqw; top: 39cqw; height: 22.4cqw; background: rgba(0,0,0,.035); opacity: 0; }
.mk-label { left: 6.5cqw; top: 39.4cqw; font-size: 1.05cqw; color: var(--mk-soft); opacity: .8; }
.mk-card { padding: 1.2cqw; background: var(--mk-card); border: 1px solid var(--mk-line); border-radius: .5cqw; }
.mk-card b { display: block; font-size: 1.35cqw; font-weight: 600; }
.mk-card i { display: block; width: 80%; height: .65cqw; margin-top: .9cqw; border-radius: 1cqw; background: var(--mk-line); }
.mk-card i + i { width: 55%; margin-top: .55cqw; }
.mk-card--1 { left: 5cqw; top: 42.6cqw; width: 26cqw; height: 9.6cqw; }
.mk-card--2 { left: 34cqw; top: 44.8cqw; width: 29cqw; height: 11.2cqw; padding: 2cqw; }
.mk-card--3 { left: 66.5cqw; top: 41.8cqw; width: 27cqw; height: 8.4cqw; padding: .8cqw; }
.mk-seal { left: 8cqw; top: 8.6cqw; width: 5cqw; height: .3cqw; background: var(--mk-accent); opacity: 0; }
.mk-guides { left: 8cqw; width: 84cqw; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.4cqw; opacity: 0; pointer-events: none; }
.mk-guides i { background: rgba(214,72,86,.07); border-inline: 1px solid rgba(214,72,86,.22); }
/* Flags: one fault at a time (desktop), or all five numbered (phones). */
.mk-flag { position: absolute; width: 4.6cqw; height: 4.6cqw; margin: -2.3cqw 0 0 -2.3cqw; border-radius: 50%; border: 1.5px solid var(--cv-warning); box-shadow: 0 0 0 .7cqw rgba(228,168,83,.14); opacity: 0; transform: scale(.5); pointer-events: none; display: grid; place-items: center; }
.mk-flag b { font: 700 1.7cqw var(--font-body); color: #9A6A1E; }
.mk-flag--0 { left: 28%; top: 38%; } .mk-flag--1 { left: 53%; top: 25%; } .mk-flag--2 { left: 10%; top: 58%; } .mk-flag--3 { left: 75.5%; top: 41%; } .mk-flag--4 { left: 65.5%; top: 93%; }
.mk[data-flag="0"] .mk-flag--0, .mk[data-flag="1"] .mk-flag--1, .mk[data-flag="2"] .mk-flag--2, .mk[data-flag="3"] .mk-flag--3, .mk[data-flag="4"] .mk-flag--4 { opacity: 1; transform: none; }
.mk[data-numbered][data-state="0"] .mk-flag { opacity: 1; transform: none; width: 3.6cqw; height: 3.6cqw; margin: -1.8cqw 0 0 -1.8cqw; background: #F6E3C4; }
.mk:not([data-state="0"]) .mk-flag { opacity: 0 !important; }

/* 1 · structure: one container, one grid, one rhythm. */
.mk:not([data-state="0"]) .mk-logo { left: 8cqw; top: 2.5cqw; }
.mk:not([data-state="0"]) .mk-links { left: 52cqw; }
.mk:not([data-state="0"]) .mk-links i { margin-right: 3.2cqw; }
.mk:not([data-state="0"]) .mk-navcta { left: auto; right: 8cqw; }
.mk:not([data-state="0"]) .mk-rule--1 { left: 8cqw; width: 84cqw; }
.mk:not([data-state="0"]) .mk-rule--2, .mk:not([data-state="0"]) .mk-rule--3 { opacity: 0; }
.mk:not([data-state="0"]) .mk-h { left: 8cqw; top: 12.4cqw; width: 42cqw; }
.mk:not([data-state="0"]) .mk-sub { left: 8cqw; top: 22.8cqw; width: 40cqw; }
.mk:not([data-state="0"]) .mk-cta { left: 8cqw; top: 32.4cqw; }
.mk:not([data-state="0"]) .mk-img { left: 56cqw; top: 12cqw; width: 36cqw; height: 25cqw; transform: none; }
.mk:not([data-state="0"]) .mk-label { left: 8cqw; top: 42.4cqw; }
.mk:not([data-state="0"]) .mk-card { top: 45.6cqw; width: 26.4cqw; height: 10.4cqw; padding: 1.4cqw; }
.mk:not([data-state="0"]) .mk-card--1 { left: 8cqw; } .mk:not([data-state="0"]) .mk-card--2 { left: 36.8cqw; } .mk:not([data-state="0"]) .mk-card--3 { left: 65.6cqw; }
.mk:not([data-state="0"]) .mk-proof { left: 8cqw; top: 57.6cqw; }
.mk[data-state="1"] .mk-guides { animation: mk-guides 1900ms ease both; }
@keyframes mk-guides { 0% { opacity: 0; } 22% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } }

/* 2 · hierarchy: the headline leads, one action, proof beside the decision. */
.mk[data-state="2"] .mk-h, .mk[data-state="3"] .mk-h, .mk[data-state="4"] .mk-h { top: 10.4cqw; width: 45cqw; font-size: 4.1cqw; font-weight: 650; letter-spacing: -.02em; line-height: 1.04; }
.mk[data-state="2"] .mk-sub, .mk[data-state="3"] .mk-sub, .mk[data-state="4"] .mk-sub { top: 24.4cqw; width: 36cqw; font-size: 1.45cqw; color: var(--mk-soft); line-height: 1.4; }
.mk[data-state="2"] .mk-cta, .mk[data-state="3"] .mk-cta, .mk[data-state="4"] .mk-cta { top: 31.2cqw; width: 14.6cqw; height: 4.6cqw; padding: 0; font-size: 1.4cqw; color: var(--mk-bg); background: var(--mk-accent); border-color: var(--mk-accent); border-radius: .5cqw; }
.mk[data-state="2"] .mk-cta-a, .mk[data-state="3"] .mk-cta-a, .mk[data-state="4"] .mk-cta-a { opacity: 0; }
.mk[data-state="2"] .mk-cta-b, .mk[data-state="3"] .mk-cta-b, .mk[data-state="4"] .mk-cta-b { opacity: 1; font-weight: 600; }
.mk[data-state="2"] .mk-proof, .mk[data-state="3"] .mk-proof, .mk[data-state="4"] .mk-proof { top: 38cqw; opacity: 1; color: var(--mk-ink); }
.mk[data-state="2"] .mk-navcta, .mk[data-state="3"] .mk-navcta, .mk[data-state="4"] .mk-navcta { color: var(--mk-bg); background: var(--mk-accent); border-color: var(--mk-accent); }
.mk[data-state="2"] .mk-band, .mk[data-state="3"] .mk-band, .mk[data-state="4"] .mk-band { opacity: 1; top: 42cqw; height: 19.4cqw; }
.mk[data-state="2"] .mk-label, .mk[data-state="3"] .mk-label, .mk[data-state="4"] .mk-label { top: 44.6cqw; font-size: 1.25cqw; font-weight: 600; color: var(--mk-ink); opacity: 1; }
.mk[data-state="2"] .mk-card, .mk[data-state="3"] .mk-card, .mk[data-state="4"] .mk-card { top: 48cqw; height: 9.6cqw; }

/* 3 · identity: deliberate colour, type with contrast, one graphic idea, space that works. */
.mk[data-state="3"], .mk[data-state="4"] { --mk-bg: #131416; --mk-ink: #F1ECE4; --mk-soft: #A29C92; --mk-line: #2A2A2C; --mk-card: #1A1B1E; --mk-img: #211E1B; --mk-accent: #D6B98E; --mk-bar: rgba(255,255,255,.03); }
.mk[data-state="3"] .mk-h, .mk[data-state="4"] .mk-h { font-family: var(--font-display); font-weight: 600; letter-spacing: -.035em; font-size: 4.3cqw; }
.mk[data-state="3"] .mk-img, .mk[data-state="4"] .mk-img { top: 10cqw; height: 28.6cqw; border-radius: .8cqw; }
.mk[data-state="3"] .mk-img-generic, .mk[data-state="4"] .mk-img-generic { opacity: 0; }
.mk[data-state="3"] .mk-img-room, .mk[data-state="4"] .mk-img-room { opacity: 1; }
.mk[data-state="3"] .mk-seal, .mk[data-state="4"] .mk-seal { opacity: 1; }
.mk[data-state="3"] .mk-logo, .mk[data-state="4"] .mk-logo { color: var(--mk-accent); }
.mk[data-state="3"] .mk-logo b, .mk[data-state="4"] .mk-logo b { color: var(--mk-ink); }
.mk[data-state="3"] .mk-proof i, .mk[data-state="4"] .mk-proof i { color: var(--mk-accent); }
.mk[data-state="3"] .mk-band, .mk[data-state="4"] .mk-band { background: rgba(255,255,255,.025); }
.mk[data-state="3"] .mk-card, .mk[data-state="4"] .mk-card { top: 49.2cqw; border-top-color: rgba(214,185,142,.45); }
.mk[data-state="3"] .mk-card b, .mk[data-state="4"] .mk-card b { font-family: var(--font-display); letter-spacing: -.02em; }
.mk[data-state="3"] .mk-label, .mk[data-state="4"] .mk-label { top: 45.2cqw; color: var(--mk-soft); letter-spacing: .08em; text-transform: uppercase; font-size: 1cqw; }
.mk[data-state="4"] { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 3cqw 8cqw rgba(0,0,0,.45); }
.mk[data-state="4"] .mk-links { color: var(--mk-ink); }

/* ── Story layout: acts on the left, one stage that stays while they pass ─────── */
.story { position: relative; padding-top: clamp(1rem, 0rem + 3vw, 3rem); }
.sact { position: relative; padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.sact-visual { margin: 1.75rem 0 .5rem; }
.story-stage { display: none; }
.stage-note { margin-top: .875rem; font-size: .8125rem; color: var(--text-meta); }
.stage-frame { position: relative; isolation: isolate; }
.stage-ghost { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; }
@media (min-width: 1000px) {
  .js .story-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(3rem, 1rem + 4vw, 6rem); }
  .js .story-stage { display: block; }
  .js .stage-pin { position: sticky; top: calc(var(--header-h) + 1.5rem); min-height: calc(100svh - var(--header-h) - 3rem); display: grid; align-content: center; }
  .js .sact { min-height: 86svh; }
  .js .sact-visual { display: none; }
  .js .story-acts .act-head .t-h2 { font-size: clamp(1.875rem, 1.2rem + 1.7vw, 2.875rem); }
  .js .stage-frame[data-state="4"] .stage-ghost { animation: ghost 2200ms var(--ease-story) both; }
}
@keyframes ghost { 0% { opacity: .62; transform: translate(-5%, 4%) scale(.92); } 45% { opacity: .38; } 100% { opacity: 0; transform: translate(-7%, 6%) scale(.9); } }
.final-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.sact--final .btn { white-space: normal; text-align: left; }

/* Beats: the steps of one act. The active one is the one the stage is showing. */
.beats { display: grid; margin-top: 2rem; border-top: 1px solid var(--border-subtle); }
.beat { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .5rem; row-gap: .25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-meta); transition: color var(--motion-state); }
.beat b { font-weight: 600; color: var(--text-secondary); transition: color var(--motion-state); }
.beat > span:not(.beat-n) { grid-column: 2; }
.beat-n { grid-row: span 2; font-size: .75rem; font-variant-numeric: tabular-nums; padding-top: .2rem; }
.beat.is-active, .beat.is-active b { color: var(--text-primary); }
.beat.is-active > span:not(.beat-n) { color: var(--text-secondary); }
@media (min-width: 1000px) { .js .story .beat { padding-block: clamp(1.75rem, 5.5vh, 3.25rem); } }

/* ── Creative: hero cuts, the composition board, formats, the pipeline ──────── */
.chero { position: relative; aspect-ratio: 1; width: 100%; max-width: 38rem; justify-self: center; }
.ccut { position: absolute; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.ccut--b { inset: -4% -10% 4% 2%; background: url("media/kv-16x9-960.webp") 62% 40% / cover; -webkit-mask-image: url("media/raven-cut-b.webp"); mask-image: url("media/raven-cut-b.webp"); -webkit-mask-size: 118%; mask-size: 118%; }
.ccut--ring { inset: 0; background: var(--cv-frost); opacity: .92; -webkit-mask-image: url("media/raven-cut-c.webp"); mask-image: url("media/raven-cut-c.webp"); }
.ccut--a { inset: -14% -18% 30% 30%; background: var(--cv-frost); opacity: .35; -webkit-mask-image: url("media/raven-cut-a.webp"); mask-image: url("media/raven-cut-a.webp"); }
@media (prefers-reduced-motion: no-preference) {
  .js .ccut--ring { animation: cut-ring 1300ms var(--ease-story) both; }
  .js .ccut--b { animation: cut-kv 1400ms var(--ease-story) 200ms both; }
  .js .ccut--a { animation: cut-a 1200ms var(--ease-story) 380ms both; }
}
@keyframes cut-ring { from { opacity: 0; transform: rotate(-38deg) scale(.9); } }
@keyframes cut-kv { from { opacity: 0; transform: translateX(14%); } }
@keyframes cut-a { from { opacity: 0; transform: translate(-8%, 6%); } }

.cb { --t: var(--motion-story); --e: var(--ease-story); position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #0B0B0C; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.cb > * { position: absolute; transition: left var(--t) var(--e), top var(--t) var(--e), width var(--t) var(--e), height var(--t) var(--e), transform var(--t) var(--e), opacity var(--t) var(--e), font-size var(--t) var(--e), color var(--t) var(--e), letter-spacing var(--t) var(--e); }
.cb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t) var(--e), object-position var(--t) var(--e); }
.cb-master { left: 50cqw; top: 21cqw; width: 30cqw; height: 16.9cqw; overflow: hidden; transform: rotate(-5deg); border-radius: .4cqw; }
.cb-master img { transform: scale(1.7) translate(-12%, 10%); }
.cb-crop { position: absolute; top: 0; height: 100%; border: 1px dashed rgba(255,255,255,.85); opacity: 0; transition: opacity 400ms ease, border-color 400ms; }
.cb-crop--11 { left: 38%; width: 56.25%; }
.cb-crop--916 { left: 51%; width: 31.6%; }
.cb-h { left: 5cqw; top: 5cqw; width: 50cqw; font-size: 3cqw; line-height: 1.18; color: #CFCFD2; font-weight: 400; }
.cb-h-set { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
.cb-h-raw { display: block; transition: opacity 300ms ease; }
.cb-logo { left: 78cqw; top: 40cqw; width: 11cqw; color: var(--cv-frost); }
.cb-logo svg { width: 100%; height: auto; }
.cb-sw { top: 45cqw; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; }
.cb-sw--1 { left: 7cqw; background: #3F6BF2; } .cb-sw--2 { left: 13cqw; background: #F28A3F; } .cb-sw--3 { left: 19cqw; background: #7FD69B; }
.cb-f { overflow: hidden; border-radius: .4cqw; }
.cb-f em { position: absolute; left: 8%; bottom: 8%; font: 600 1.6cqw/1 var(--font-display); font-style: normal; letter-spacing: -.03em; color: #fff; opacity: 0; transition: opacity 400ms ease 300ms; }
.cb-f--11 { left: 28cqw; top: 38cqw; width: 13cqw; height: 13cqw; transform: rotate(4deg); }
.cb-f--11 img { transform: scale(2.1) translate(18%, -22%); }
.cb-f--916 { left: 88cqw; top: 5cqw; width: 8.4cqw; height: 15cqw; transform: rotate(-3deg); }
.cb-f--916 img { transform: scale(1.8) translate(-20%, 16%); }
.cb-guides { left: 6cqw; top: 3cqw; width: 88cqw; height: 49.5cqw; opacity: 0; pointer-events: none; }
.cb-guides i { position: absolute; background: rgba(255,255,255,.28); }
.cb-guides i:nth-child(1), .cb-guides i:nth-child(2) { top: 0; bottom: 0; width: 1px; }
.cb-guides i:nth-child(1) { left: 33.33%; } .cb-guides i:nth-child(2) { left: 66.66%; }
.cb-guides i:nth-child(3), .cb-guides i:nth-child(4) { left: 0; right: 0; height: 1px; }
.cb-guides i:nth-child(3) { top: 33.33%; } .cb-guides i:nth-child(4) { top: 66.66%; }
.cb-guides b { position: absolute; left: 66.66%; top: 33.33%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; border: 1px solid #fff; }
.cb-derive { left: 0; top: 0; width: 100cqw; height: 56.25cqw; fill: none; stroke: rgba(243,244,246,.5); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; overflow: visible; }
.cb-derive path { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 1; transition: stroke-dashoffset 700ms var(--ease-story); }
.cb-tag { font: 500 1.25cqw/1 var(--font-body); color: var(--cv-frost); padding: .6cqw 1cqw; border: 1px solid rgba(255,255,255,.35); border-radius: 100px; background: rgba(5,5,5,.55); opacity: 0; transform: translateY(1cqw); }
.cb-tag--0 { left: 8cqw; top: 5cqw; } .cb-tag--1 { left: 30cqw; top: 5cqw; } .cb-tag--2 { left: 76cqw; top: 26cqw; } .cb-tag--3 { left: 66cqw; top: 8cqw; } .cb-tag--4 { left: 40cqw; top: 46cqw; }
/* 1 · frame */
.cb:not([data-state="0"]) .cb-h-raw { opacity: 0; }
.cb:not([data-state="0"]) .cb-h-set { opacity: 1; }
.cb:not([data-state="0"]) .cb-master img, .cb:not([data-state="0"]) .cb-f img { transform: none; }
.cb:not([data-state="0"]) .cb-sw { opacity: 0; transform: scale(.4); }
.cb[data-state="1"] .cb-master { left: 6cqw; top: 3cqw; width: 88cqw; height: 49.5cqw; transform: none; }
.cb[data-state="1"] .cb-h { left: 10cqw; top: 42cqw; font-size: 4.6cqw; color: #fff; font-weight: 650; letter-spacing: -.04em; }
.cb[data-state="1"] .cb-logo, .cb[data-state="2"] .cb-logo, .cb[data-state="3"] .cb-logo, .cb[data-state="4"] .cb-logo { left: 10cqw; top: 7cqw; width: 3.4cqw; }
.cb[data-state="1"] .cb-f { left: 40cqw; top: 20cqw; opacity: 0; transform: scale(.7); }
.cb[data-state="1"] .cb-guides { animation: mk-guides 2200ms ease 200ms both; }
.cb[data-state="1"] .cb-tag { opacity: 1; transform: none; }
.cb[data-state="1"] .cb-tag--1 { transition-delay: 120ms; } .cb[data-state="1"] .cb-tag--2 { transition-delay: 240ms; } .cb[data-state="1"] .cb-tag--3 { transition-delay: 360ms; } .cb[data-state="1"] .cb-tag--4 { transition-delay: 480ms; }
.cb[data-tag] .cb-tag { opacity: .45; }
.cb[data-tag="0"] .cb-tag--0, .cb[data-tag="1"] .cb-tag--1, .cb[data-tag="2"] .cb-tag--2, .cb[data-tag="3"] .cb-tag--3, .cb[data-tag="4"] .cb-tag--4 { opacity: 1; border-color: #fff; background: rgba(255,255,255,.12); }
/* 2–4 · formats */
.cb[data-state="2"] .cb-master, .cb[data-state="3"] .cb-master, .cb[data-state="4"] .cb-master { left: 3cqw; top: 13cqw; width: 54cqw; height: 30.4cqw; transform: none; }
.cb[data-state="2"] .cb-h, .cb[data-state="3"] .cb-h, .cb[data-state="4"] .cb-h { left: 6cqw; top: 37.4cqw; font-size: 2.8cqw; color: #fff; font-weight: 650; letter-spacing: -.04em; }
.cb[data-state="2"] .cb-logo, .cb[data-state="3"] .cb-logo, .cb[data-state="4"] .cb-logo { left: 5.5cqw; top: 15.5cqw; width: 2.2cqw; }
.cb[data-state="2"] .cb-crop, .cb[data-state="3"] .cb-crop, .cb[data-state="4"] .cb-crop { opacity: .55; }
.cb[data-state="3"] .cb-crop--11, .cb[data-state="4"] .cb-crop--916 { opacity: 1; }
.cb[data-state="2"] .cb-f, .cb[data-state="3"] .cb-f, .cb[data-state="4"] .cb-f { transform: none; }
.cb[data-state="2"] .cb-f--11, .cb[data-state="3"] .cb-f--11, .cb[data-state="4"] .cb-f--11 { left: 60cqw; top: 13cqw; width: 17.6cqw; height: 17.6cqw; }
.cb[data-state="2"] .cb-f--916, .cb[data-state="3"] .cb-f--916, .cb[data-state="4"] .cb-f--916 { left: 80.4cqw; top: 13cqw; width: 17.1cqw; height: 30.4cqw; }
.cb[data-state="2"] .cb-f { opacity: 0; transform: translateX(-3cqw) scale(.96); }
.cb[data-state="3"] .cb-f--916 { opacity: 0; transform: translateX(-3cqw) scale(.96); }
.cb[data-state="3"] .cb-f--11 em, .cb[data-state="4"] .cb-f em { opacity: 1; }
.cb[data-state="2"] .cb-derive, .cb[data-state="3"] .cb-derive, .cb[data-state="4"] .cb-derive { opacity: 1; }
.cb[data-state="3"] .cb-derive path:first-child, .cb[data-state="4"] .cb-derive path { stroke-dashoffset: 0; }
.fmt-caps { display: none; }

/* Phones: one format at a time, with the relation named. */
.fmt-switch { display: grid; gap: 1rem; }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-self: start; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.seg button { position: relative; z-index: 1; min-width: 4.5rem; min-height: 2.5rem; padding: 0 1rem; border: 0; background: none; color: var(--text-secondary); font-size: .875rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: color var(--motion-state); }
.seg button[aria-pressed="true"] { color: var(--cv-raven); }
.seg-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 6px; background: var(--cv-white); transform: translateX(calc(var(--seg-i, 0) * 100%)); transition: transform 240ms var(--ease-state); }
.fmt-view { display: grid; place-items: center; min-height: 20rem; padding: 1rem; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.fmt { display: none; margin: 0; }
.fmt img { border-radius: 6px; }
.fmt--169 { width: 100%; } .fmt--11 { width: 78%; } .fmt--916 { width: 52%; }
.fmt-view[data-view="169"] .fmt--169, .fmt-view[data-view="11"] .fmt--11, .fmt-view[data-view="916"] .fmt--916 { display: block; animation: rise var(--motion-state) var(--ease-story); }
.beats--formats .beat-n { font-size: .75rem; }

/* Key visual triptych (home module, proof). */
.trip { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, .62fr); gap: clamp(.5rem, .3rem + .6vw, .875rem); align-items: end; }
.trip-f { position: relative; margin: 0; }
.trip-f img { width: 100%; border-radius: 6px; }
.trip-f figcaption { margin-top: .5rem; font-size: .75rem; color: var(--text-meta); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-play="creative"]:not(.is-played) .trip-f--11, .js [data-play="creative"]:not(.is-played) .trip-f--916 { opacity: 0; transform: translateX(-24%) scale(.94); }
  .trip-f { transition: opacity 600ms ease, transform 900ms var(--ease-story); }
  .trip-f--916 { transition-delay: 260ms; }
}

/* Creative pipeline: one frame → five outputs on one line. */
.pipeline { position: relative; display: grid; gap: 2rem; }
.pipe-rail { display: none; }
.pipe { display: grid; gap: .375rem; align-content: end; }
.pipe-f { position: relative; margin: 0 0 .5rem; overflow: hidden; border-radius: 8px; background: #000; }
.pipe-f img, .pipe-f video { width: 100%; height: 100%; object-fit: cover; }
.pipe-f--169 { aspect-ratio: 16 / 9; } .pipe-f--11 { aspect-ratio: 1; } .pipe-f--916 { aspect-ratio: 9 / 16; }
.pipe b { font-weight: 600; }
.pipe > span { font-size: .8125rem; color: var(--text-meta); }
.pipe-copy { position: absolute; left: 7%; bottom: 8%; font: 600 clamp(.75rem, .6rem + .4vw, 1rem)/1.1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.pipe-copy em { font-style: normal; color: rgba(255,255,255,.7); }
.pipe-copy--ad { display: grid; gap: .5rem; left: 10%; right: 10%; bottom: 7%; }
.pipe-copy--ad i { justify-self: start; font: 600 .625rem var(--font-body); font-style: normal; letter-spacing: 0; color: var(--cv-raven); background: #fff; padding: .35rem .55rem; border-radius: 4px; }
.pipe .reel-toggle { position: absolute; right: .5rem; bottom: .5rem; background: rgba(5,5,5,.6); }
@media (min-width: 1000px) {
  .pipeline { grid-template-columns: 1.55fr .9fr 1.55fr .55fr 1.55fr; gap: 1.25rem; align-items: end; padding-bottom: 2.5rem; }
  .pipe-rail { display: block; position: absolute; left: 0; right: 0; bottom: .75rem; height: 1px; background: var(--border); }
  .pipe-rail i { position: absolute; inset: 0; background: var(--cv-frost); transform-origin: left; transform: scaleX(var(--progress, 1)); }
  .pipe { position: relative; }
  .pipe::after { content: ""; position: absolute; left: 0; bottom: -2.1rem; width: 7px; height: 7px; border-radius: 50%; background: var(--surface-base); border: 1px solid var(--border-hover); transition: background-color var(--motion-state), border-color var(--motion-state); }
  .pipe.is-reached::after { background: var(--cv-white); border-color: var(--cv-white); }
}
.films { margin-top: 2.5rem; border-top: 1px solid var(--border-subtle); }
.films summary, .before summary { display: flex; align-items: center; gap: .625rem; padding: 1.125rem 0; cursor: pointer; list-style: none; color: var(--text-secondary); font-weight: 500; }
.films summary::-webkit-details-marker, .before summary::-webkit-details-marker { display: none; }
.films summary .i, .before summary .i { transition: transform var(--motion-state) var(--ease-state); }
.films[open] summary .i, .before[open] summary .i { transform: rotate(45deg); }
.films-grid { display: grid; gap: 1.5rem; padding-bottom: 1rem; }
@media (min-width: 900px) { .films-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.film video { width: 100%; border-radius: 8px; background: #000; }
.film figcaption { margin-top: .625rem; font-size: .8125rem; color: var(--text-meta); }
.film figcaption b { color: var(--text-primary); font-weight: 600; }
.reel-toggle { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-primary); cursor: pointer; transition: border-color var(--motion-feedback), background-color var(--motion-feedback); }
.reel-toggle:hover { border-color: var(--border-hover); background: rgba(255,255,255,.06); }
.i-pause, .is-playing .i-play { display: none; }
.is-playing .i-pause { display: inline; }

/* Offers (Web, Creative): a sequence, not a grid of equal cards. */
.offers-list { border-top: 1px solid var(--border-subtle); }
.offer { display: grid; gap: 1rem 2rem; padding: 2rem 0; border-bottom: 1px solid var(--border-subtle); }
.offer-n { font-size: .8125rem; color: var(--text-meta); font-variant-numeric: tabular-nums; }
.offer-facts { display: grid; gap: 1rem 2rem; }
.offer-facts dt { font-size: .75rem; color: var(--text-meta); margin-bottom: .25rem; }
.offer-facts dd { margin: 0; color: var(--text-secondary); font-size: .9375rem; }
.offer .link { justify-self: start; }
@media (min-width: 760px) { .offer-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .offer { grid-template-columns: 3rem minmax(0, .62fr) minmax(0, 2.2fr) auto; align-items: start; } .offer-n, .offer .t-h3, .offer .link { padding-top: .125rem; } }
.offer.is-active .offer-n { color: var(--text-primary); }

/* ── Act 4 · one launch ──────────────────────────────────────────────── */
.launch { position: relative; display: grid; gap: 2.5rem; }
.launch-rail { position: absolute; left: .25rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--border); }
.launch-rail i { position: absolute; inset: 0; background: var(--cv-frost); transform-origin: top; transform: scaleY(var(--fill, 1)); transition: transform 1100ms var(--ease-story); }
.lstep { position: relative; display: grid; gap: .5rem; padding-left: 2rem; transition: opacity var(--motion-context); }
.lstep-dot { position: absolute; left: calc(.25rem - 5px); top: .25rem; width: 11px; height: 11px; border-radius: 50%; background: var(--surface-base); border: 1px solid var(--border-hover); transition: background-color var(--motion-state), border-color var(--motion-state); }
.lstep.is-lit .lstep-dot { background: var(--cv-white); border-color: var(--cv-white); }
.lstep-visual { margin: .5rem 0 .75rem; border-radius: 10px; overflow: hidden; background: var(--surface-1); aspect-ratio: 16 / 10.4; display: grid; align-items: center; }
.lstep-visual > img { width: 100%; height: 100%; object-fit: contain; }
.lstep-visual .mk { border-radius: 0; box-shadow: none; }
.lstep-who { display: flex; gap: .5rem; align-items: baseline; font-size: .8125rem; color: var(--text-meta); }
.lstep-title { font: 600 1.375rem/1.2 var(--font-display); letter-spacing: -.025em; }
.lstep-text { color: var(--text-secondary); }
.js .lstep:not(.is-lit) { opacity: .45; }
.js .launch:not(.is-run) .launch-rail i { transform: scaleY(0); }
@media (min-width: 1000px) {
  .launch { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-top: 2.25rem; }
  .launch-rail { left: 0; right: 0; top: .3125rem; bottom: auto; width: auto; height: 1px; }
  .launch-rail i { transform-origin: left; transform: scaleX(var(--fill, 1)); }
  .js .launch:not(.is-run) .launch-rail i { transform: scaleX(0); }
  .lstep { padding-left: 0; }
  .lstep-dot { left: 0; top: -2.25rem; }
}
.connect-note { margin-top: 2.5rem; font-size: var(--t-lead); color: var(--text-secondary); }

/* ── Act 5 · proof ───────────────────────────────────────────────────── */
.proofs { display: grid; gap: clamp(3.5rem, 2.5rem + 3vw, 6rem); }
.proof { display: grid; gap: 1.5rem; }
.proof-kind { display: flex; gap: .75rem; align-items: baseline; font: 600 1.0625rem var(--font-display); letter-spacing: -.01em; color: var(--text-primary); }
.proof-kind span { font: 500 .75rem var(--font-body); color: var(--text-meta); }
.proof-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-1); border: 1px solid var(--border-subtle); }
.proof-media > a { display: block; }
.proof-media img { width: 100%; }
.proof-media .trip { padding: clamp(.875rem, .5rem + 1vw, 1.5rem); }
.proof-path { padding: clamp(1rem, .5rem + 2vw, 2.5rem) clamp(.5rem, .2rem + 1vw, 1rem); }
.proof-meta { display: grid; gap: .75rem; align-content: start; max-width: 32rem; }
.proof-tag { font-size: .8125rem; color: var(--text-meta); }
.proof-meta > p:not(.proof-tag) { color: var(--text-secondary); }
@media (min-width: 1000px) {
  .proof { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); column-gap: 3.5rem; align-items: center; }
  .proof-kind { grid-column: 1 / -1; }
}
.raven-reveal::after { content: ""; position: absolute; inset: -10%; background: url("media/raven-cut-c.webp") center / contain no-repeat; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .raven-reveal img { clip-path: circle(0% at 66% 42%); transition: clip-path 1250ms var(--ease-story) 150ms; }
  .js .is-in .raven-reveal img, .js .raven-reveal.is-in img { clip-path: circle(90% at 66% 42%); }
  .js .is-in .raven-reveal::after { animation: cut-sweep 1300ms var(--ease-story) both; }
}
@keyframes cut-sweep { 0% { opacity: 0; transform: scale(.35) rotate(-30deg); } 35% { opacity: .55; } 100% { opacity: 0; transform: scale(1.35) rotate(0); } }

/* ── Act 6 · the operating layer ──────────────────────────────────────── */
.layer-grid { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .layer-grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 3.5rem; align-items: center; } }
.layer-steps { border-bottom: 1px solid var(--border-subtle); }
.lyr { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .25rem; row-gap: .25rem; width: 100%; padding: 1rem 0 1.125rem; border: 0; border-top: 1px solid var(--border-subtle); background: none; color: var(--text-meta); text-align: left; cursor: pointer; }
.lyr-n { grid-row: span 2; font-size: .75rem; font-variant-numeric: tabular-nums; padding-top: .2rem; }
.lyr b { font: 600 1.0625rem/1.3 var(--font-display); letter-spacing: -.01em; color: var(--text-secondary); transition: color var(--motion-state); }
.lyr-text { font-size: .9375rem; line-height: 1.45; }
.lyr[aria-current] b { color: var(--text-primary); }
.lyr[aria-current] .lyr-text { color: var(--text-secondary); }
.lyr:hover b { color: var(--text-primary); }
.lyr-bar { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--cv-white); transform-origin: left; transform: scaleX(var(--p, 0)); }
.window { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: #000; border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.window video { width: 100%; height: auto; aspect-ratio: 1280 / 800; }
.window figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .5rem .5rem 1rem; font-size: .8125rem; color: var(--text-meta); background: var(--surface-1); border-top: 1px solid var(--border-subtle); }

/* ── Act 7 · four moves ───────────────────────────────────────────────── */
.moves-line { position: relative; display: grid; gap: 2.25rem; }
.moves-rail { position: absolute; left: .5rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--border); }
.moves-rail i { position: absolute; inset: 0; background: var(--cv-frost); transform-origin: top; transform: scaleY(var(--progress, 1)); }
.move { position: relative; display: grid; gap: .625rem; align-content: start; padding-left: 2.5rem; }
.move-node { position: absolute; left: 0; top: .25rem; width: 1.0625rem; height: 1.0625rem; border-radius: 50%; background: var(--surface-base); border: 1px solid var(--border-hover); transition: background-color var(--motion-state), border-color var(--motion-state); }
.move.is-reached .move-node { background: var(--cv-white); border-color: var(--cv-white); }
.move-title { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--font-display); letter-spacing: -.035em; }
.move p { color: var(--text-secondary); }
.move-back { justify-self: start; margin-top: .25rem; font-size: .8125rem; color: var(--text-meta); text-decoration: none; border-bottom: 1px solid var(--border); }
.move-back:hover { color: var(--text-primary); border-color: currentColor; }
@media (min-width: 900px) {
  .moves-line { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-top: 3rem; }
  .moves-rail { left: 0; right: 0; top: .5rem; bottom: auto; width: auto; height: 1px; }
  .moves-rail i { transform-origin: left; transform: scaleX(var(--progress, 1)); }
  .move { padding-left: 0; }
  .move-node { top: -3rem; }
}

/* ── Act 8 · about ────────────────────────────────────────────────────── */
.about-grid { display: grid; gap: 2rem; }
.about-copy .act-head { margin-bottom: 0; }
.facts { display: grid; border-top: 1px solid var(--border-subtle); align-self: end; }
.facts div { display: grid; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid var(--border-subtle); }
.facts dt { font-size: .8125rem; color: var(--text-meta); }
.facts dd { margin: 0; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: end; } .facts div { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; } }

/* ── Start: the closing act ───────────────────────────────────────────── */
.start .act-head { margin-bottom: 0; }
.start .act-head .t-h2 { font-size: var(--t-h1); line-height: .98; letter-spacing: -.045em; }
.start-copy .sculpt { width: min(100%, 20rem); aspect-ratio: 1; margin-top: 2.5rem; }
.start-copy .sculpt-fallback { width: 100%; height: 100%; object-fit: contain; opacity: .16; }
.start-copy .sculpt.is-live .sculpt-fallback { opacity: 0; }
@media (max-width: 999px) { .start-copy .sculpt { display: none; } }
.cut-mark { width: min(100%, 15rem); aspect-ratio: 1; margin-top: 2rem; background: var(--cv-frost); opacity: .1; -webkit-mask: url("media/raven-cut-a.webp") center / contain no-repeat; mask: url("media/raven-cut-a.webp") center / contain no-repeat; }
.cut-mark--b { -webkit-mask-image: url("media/raven-cut-b.webp"); mask-image: url("media/raven-cut-b.webp"); }
.cut-mark--c { -webkit-mask-image: url("media/raven-cut-c.webp"); mask-image: url("media/raven-cut-c.webp"); }
@media (max-width: 999px) { .cut-mark { display: none; } }
.before { margin-top: 2rem; border-top: 1px solid var(--border-subtle); }
.before .faq { border-top: 0; }
.before .faq-item summary { font-size: .9375rem; padding: .875rem 0; }
.before .faq-a { font-size: .9375rem; padding-right: 1rem; }
.choice--box span::before { border-radius: 2px; }

/* Language menu */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .625rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: .8125rem; font-weight: 500; cursor: pointer; transition: color var(--motion-feedback), background-color var(--motion-feedback); }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--text-primary); background: rgba(255,255,255,.05); }
.lang-panel { width: 13rem; left: auto; right: 0; translate: 0 0; }
.lang-panel a[aria-current] .menu-text b::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: .5rem; border-radius: 50%; background: var(--cv-white); vertical-align: middle; }
@media (max-width: 899px) { .lang { display: none; } }
.mobile-langs { display: flex; gap: 1.25rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); }
.mobile-langs a { color: var(--text-meta); text-decoration: none; font-size: .9375rem; }
.mobile-langs a[aria-current] { color: var(--text-primary); }
.footer-lang-h { margin-top: 1.5rem; }
.footer-langs a[aria-current] { color: var(--text-primary); }

/* Reduced motion: every stage shows its state without travel; nothing loops. */
@media (prefers-reduced-motion: reduce) {
  .js .gap-row:not(.is-closed) .gap-a, .js .gap-row:not(.is-closed) .gap-b { transform: none; }
  .js .gap-row:not(.is-closed) .gap-node { transform: none; }
  .js .bridge-line { transform: none; }
  .js .lstep:not(.is-lit) { opacity: 1; }
  .js .launch:not(.is-run) .launch-rail i { transform: none; }
  .mk[data-state="1"] .mk-guides, .cb[data-state="1"] .cb-guides { animation: none; }
  .stage-ghost { display: none; }
}
.mk-cap { position: absolute; left: calc(100% + 1cqw); top: 50%; transform: translateY(-50%); padding: .5cqw .9cqw; border-radius: .5cqw; background: #2A2113; color: #F3CF95; font: 600 1.35cqw/1.2 var(--font-body); font-style: normal; white-space: nowrap; }
.mk-flag--3 .mk-cap, .mk-flag--4 .mk-cap, .mk-flag--1 .mk-cap { left: auto; right: calc(100% + 1cqw); }