/* Loopyti: quiet type, wide space, one accent. Each project is told by a small moving drawing. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --tint: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6a6a70;
  --line: #d2d2d7;
  --line-strong: #a9a9b0;
  --field-line: #86868b;
  --accent: #4a3bd1;
  --accent-soft: #efeefc;
  --human: var(--accent-soft);
  --warn: #9a4a06;
  --warn-soft: #fbeee0;
  --night: #000000;
  --on-night: #f5f5f7;
  --on-night-2: #a1a1a6;
  --on-night-line: #2c2c2e;
  --on-night-accent: #b3aaff;
  --on-night-warn: #ffb340;
  --on-night-card: #1c1c1e;
  --brand-pink: #fb74a1;
  --brand-purple: #9284fc;
  --brand-yellow: #fcd259;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "Noto Sans KR", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --type-display: 3.5rem;
  --type-heading: 2.5rem;
  --type-title: 1.75rem;
  --type-lead: 1.3125rem;
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-label: 0.8125rem;
  --gutter: 32px;
  --section: 128px;
  --radius: 12px;
  --radius-xl: 28px;
  --motion: 180ms ease;
  --settle: cubic-bezier(0.3, 1.3, 0.5, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--type-body); line-height: 1.65; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
:lang(en) { word-break: normal; }
:lang(ko) { word-break: keep-all; }
img, svg { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 0.2em; }
p, dl, ol, ul, figure { margin: 0; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
main:focus { outline: none; }
.wrap { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -120px; z-index: 30; padding: 12px 16px; background: var(--ink); color: var(--surface); border-radius: 8px; text-decoration: none; }
.skip:focus { top: 16px; }
/* All navigation links remain available without JavaScript, including on mobile. */
.site-header { position: sticky; top: 0; z-index: 20; background: #ffffffcc; border-bottom: 1px solid #d2d2d780; -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); }
.header-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav actions"; align-items: center; gap: 24px; min-height: 52px; }
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em; text-decoration: none; }
.brand img { display: block; width: 28px; height: 28px; }
.site-nav { grid-area: nav; min-width: 0; }
.site-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; padding: 0; list-style: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 6px; border-radius: 8px; color: var(--ink-2); font-size: var(--type-label); line-height: 1.5; text-decoration: none; transition: color var(--motion); }
.site-nav a:hover, .site-nav a:active { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.header-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; align-items: center; min-height: 44px; padding: 8px; border-radius: 8px; color: var(--ink-2); font-size: var(--type-label); line-height: 1.5; transition: color var(--motion); }
.lang:hover { color: var(--accent); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 1px solid var(--accent); border-radius: 980px; background: var(--accent); color: var(--surface); font: inherit; font-size: var(--type-body); font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color var(--motion), border-color var(--motion), color var(--motion); }
.button:hover { background: var(--ink); border-color: var(--ink); }
.button:active { background: var(--ink-2); border-color: var(--ink-2); }
.button:disabled, .button[aria-disabled="true"] { background: var(--tint); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.button-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.button-secondary:hover { background: var(--tint); border-color: var(--ink); color: var(--ink); }
.button-secondary:active { background: var(--line); border-color: var(--ink); color: var(--ink); }
.button-small { min-height: 44px; padding: 6px 16px; font-size: var(--type-label); }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-block: 8px; color: var(--accent); font-size: var(--type-body); font-weight: 500; line-height: 1.4; text-decoration: none; transition: color var(--motion); }
.text-link:hover, .text-link:active { text-decoration: underline; }
.icon { flex: none; width: 16px; height: 16px; }
.button .icon, .text-link .icon { transition: transform var(--motion); }
.button:hover .icon, .text-link:hover .icon { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 32px; }
h1, h2, h3 { margin: 0; font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--type-display); line-height: 1.14; letter-spacing: -0.03em; }
h2 { font-size: var(--type-heading); line-height: 1.2; letter-spacing: -0.025em; }
h3 { font-size: 1.0625rem; line-height: 1.45; letter-spacing: -0.015em; }
.eyebrow, .section-label { color: var(--accent); font-size: var(--type-small); font-weight: 600; line-height: 1.5; }
.lead { color: var(--ink-2); font-size: var(--type-lead); line-height: 1.5; letter-spacing: -0.015em; }
.intro { color: var(--ink-2); font-size: var(--type-lead); line-height: 1.55; letter-spacing: -0.015em; }
.note { margin-top: 20px; color: var(--muted); font-size: var(--type-small); line-height: 1.6; }
.closing { margin-top: 32px; color: var(--ink); font-weight: 600; line-height: 1.6; }
.stage { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--muted); font-size: var(--type-small); font-weight: 500; line-height: 1.5; }
.stage::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tag { display: inline-flex; align-items: center; width: fit-content; min-height: 26px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 980px; color: var(--ink-2); font-size: var(--type-label); font-weight: 500; line-height: 1.5; }
.tag-human { background: var(--accent); border-color: var(--accent); color: var(--surface); }
/* The control that stops looping motion. The script reveals it; loops exist only with it. */
.motion-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; touch-action: manipulation; }
.motion-toggle::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #d2d2d7a6; transition: background-color var(--motion); }
.motion-toggle:hover::before { background: var(--line); }
.motion-toggle .icon { position: relative; }
.motion-toggle .icon-play, .motion-toggle.is-paused .icon-pause { display: none; }
.motion-toggle.is-paused .icon-play { display: block; }
/* The first screen: one sentence, one line of explanation, and the logo joining itself. */
.hero { display: grid; justify-items: center; padding-block: 96px 112px; text-align: center; }
.hero-copy { max-width: 46em; }
.hero-copy h1 { max-width: 13em; margin: 12px auto 0; }
.hero-copy .lead { max-width: 28em; margin: 20px auto 0; }
.hero-art { position: relative; width: min(100%, 460px); margin-top: 56px; }
.hero-art .motion-toggle { position: absolute; right: -12px; bottom: 0; }
.mark { display: block; width: 100%; overflow: visible; }
.mark-piece { transform-box: fill-box; transform-origin: center; }
.mark-l { fill: var(--brand-pink); }
.mark-p, .mark-r { fill: var(--brand-purple); }
.mark-dot { fill: var(--brand-yellow); }
.mark-route { fill: none; stroke: var(--surface); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.mark-hop { fill: none; stroke: var(--line-strong); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 18; }
.mark-stitch { fill: none; stroke: var(--ink-2); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 16 16; opacity: 0; }
.mark-token { fill: var(--ink); stroke: var(--surface); stroke-width: 8; opacity: 0; }
.page-hero { padding-block: 96px 72px; text-align: center; }
.page-hero h1 { max-width: 14em; margin: 12px auto 0; }
.page-hero > .lead { max-width: 30em; margin: 20px auto 0; }
/* Sections: centred headings over one piece of content; grounds change to mark the turns. */
.section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; padding-block: var(--section); }
.section > * { grid-column: 1 / -1; min-width: 0; }
.section > .section-side { grid-column: 1 / span 3; }
.section > .section-side + .section-body { grid-column: 4 / -1; }
.section-side h2 { font-size: 1.5rem; line-height: 1.35; }
.section-heading { max-width: 44em; margin-inline: auto; text-align: center; }
.section-heading h2 { margin-top: 8px; }
.section-heading .intro { max-width: 30em; margin: 20px auto 0; }
.section-heading .stage { margin: 16px auto 0; }
.statement { max-width: 22em; margin: 28px auto 0; font-size: var(--type-title); font-weight: 650; line-height: 1.3; letter-spacing: -0.02em; }
.band-night { background: var(--night); color: var(--on-night); }
.band-night .section-label { color: var(--on-night-accent); }
.band-night .intro { color: var(--on-night-2); }
.band-tint { background: var(--tint); }
/* The problem as one picture: scattered work runs into a single narrow point and waits there. */
.problem-stage { position: relative; }
.problem-stage .motion-toggle { position: absolute; right: -8px; top: -8px; color: var(--on-night); }
.problem-stage .motion-toggle::before { background: #ffffff29; }
.problem-stage .motion-toggle:hover::before { background: #ffffff47; }
.pb-wire { fill: none; stroke: var(--on-night-line); stroke-width: 1.5; }
.pb-piece rect { fill: var(--on-night-card); stroke: #48484a; stroke-width: 1.5; }
.pb-piece path { fill: none; stroke: #636366; stroke-width: 3; stroke-linecap: round; }
.pb-piece { transform-box: fill-box; }
.pb-flow { fill: none; stroke: var(--on-night); stroke-width: 3; stroke-dasharray: 10 8; }
.pb-wait { fill: var(--on-night-warn); }
.pb-neck { fill: var(--on-night); }
.pb-drip { fill: none; stroke: var(--on-night-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 30; }
.pb-out { fill: none; stroke: var(--on-night-2); stroke-width: 2; }
.hl { padding: 0.05em 0.15em; border-radius: 0.25em; background: linear-gradient(#b3aaff52, #b3aaff52) no-repeat 0 0 / 100% 100%; color: var(--on-night); }
.seams { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; border-top: 1px solid var(--on-night-line); list-style: none; }
.seams li { min-width: 0; padding: 24px 20px 0 0; }
.seams li + li { padding-left: 20px; border-left: 1px solid var(--on-night-line); }
.seams h3 { margin-bottom: 8px; }
.seams p { color: var(--on-night-2); font-size: var(--type-small); line-height: 1.6; }
/* The core project: a stage where a work item passes candidates, a comparison, a review loop and approval. */
.flow-figure { padding: 32px 40px 36px; border-radius: var(--radius-xl); background: var(--surface); }
.flow-stage { position: relative; }
.flow-stage .motion-toggle { position: absolute; right: -8px; top: -8px; }
.art { display: block; width: 100%; height: auto; }
.art-line { fill: none; stroke: var(--line); stroke-width: 2; }
.art-loop { stroke: var(--line-strong); stroke-dasharray: 5 6; }
.art-loop-head { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.sc-human { fill: var(--accent); stroke: var(--accent); }
.sc-mark { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.sc-agent { fill: var(--surface); stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.sc-ring { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.72 0.28; transform-box: fill-box; transform-origin: center; }
.sc-pass { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sc-bar { fill: var(--line-strong); }
.sc-bar-best { fill: var(--accent); }
.art-check { fill: none; stroke: var(--surface); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.art-num { fill: var(--muted); font-family: var(--mono); font-size: 0.8125rem; text-anchor: middle; }
.art-num-human { fill: #ffffffb3; }
.art-token { fill: var(--ink); stroke: var(--surface); stroke-width: 3; opacity: 0; }
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 16px; margin-top: 24px; padding: 28px 0 0; border-top: 1px solid var(--line); list-style: none; counter-reset: step; }
.flow li { min-width: 0; counter-increment: step; text-align: center; }
.flow h3::before { content: counter(step); display: block; margin-bottom: 6px; color: var(--muted); font-family: var(--mono); font-size: var(--type-label); font-weight: 500; }
.flow p:not(.tag) { margin-top: 4px; color: var(--ink-2); font-size: var(--type-small); line-height: 1.6; }
.flow .tag-human { justify-content: center; margin: 10px auto 0; padding: 6px 12px; border-radius: 12px; line-height: 1.4; text-align: center; text-wrap: balance; }
.flow-controls { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start; gap: 12px 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.flow-controls h3 { padding-top: 6px; color: var(--muted); font-size: var(--type-small); font-weight: 500; letter-spacing: 0; }
.flow-controls .chips { margin-top: 0; }
/* The new venture sits right under the core project and mirrors it: the same heading stack and one stage.
   Its picture is a brand piece built from plain boxes: capsules, lines, pages, one booklet. Sizes are in em so the
   whole scene scales with the stage; at rest it is the finished booklet. */
.venture-figure { padding-block: 40px; overflow: hidden; background: var(--tint); }
.art-passport { display: flex; align-items: center; justify-content: center; font-size: clamp(5px, calc((100vw - 200px) / 96), 10.5px); }
.pm { --kx: 1; position: relative; flex: none; width: 92em; height: 30em; perspective: 110em; }
.pm-cam, .pm-orbit { position: absolute; inset: 0; transform-style: preserve-3d; }
.pm-cam { transform: rotateX(6deg) rotateY(-22deg); }
.pm-p { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate3d(0, 0, var(--bz)); }
.pm-s { position: absolute; left: 0; top: 0; width: 16em; height: 22em; overflow: hidden; border-radius: 1.8em; background: var(--pg); box-shadow: inset 0 0 0 0.1em var(--line); transform: translate(-50%, -50%); }
.pm-s::before { content: ""; position: absolute; inset: 0 0 0 50%; background: var(--c2); opacity: 0; }
.pm-p1 { --sx: -31em; --sy: -6em; --sr: -32deg; --ss: 1.2; --dx: 1.8em; --dy: 1.4em; --dr: 16deg; --oy: -3.6em; --bz: 0em; --c1: var(--ink); --c2: var(--accent); --pg: var(--surface); }
.pm-p2 { --sx: -14em; --sy: 7.5em; --sr: 24deg; --ss: 0.8; --dx: -1.2em; --dy: -1.6em; --dr: -20deg; --oy: -1.8em; --bz: 1.1em; --c1: var(--accent); --c2: #cfc8ff; --pg: var(--surface); }
.pm-p3 { --sx: 3em; --sy: -8.5em; --sr: 72deg; --ss: 0.62; --dx: 1em; --dy: 1.8em; --dr: 24deg; --oy: 0em; --bz: 2.2em; --c1: var(--surface); --c2: var(--ink); --pg: var(--surface); }
.pm-p4 { --sx: 19em; --sy: 6em; --sr: -18deg; --ss: 1; --dx: -1.6em; --dy: -1em; --dr: -14deg; --oy: 1.8em; --bz: 3.3em; --c1: var(--ink); --c2: #cfc8ff; --pg: var(--surface); }
.pm-p5 { --sx: 33em; --sy: -5.5em; --sr: 40deg; --ss: 0.76; --dx: -1.4em; --dy: 1.6em; --dr: 18deg; --oy: 3.6em; --bz: 4.4em; --c1: var(--accent); --c2: var(--ink); --pg: var(--accent); }
.pm-p5 .pm-s { box-shadow: none; }
.pm-face { position: absolute; inset: 0; }
.pm-face::after { content: ""; position: absolute; inset: 1em; border: 0.12em solid #ffffff59; border-radius: 1.1em; }
.pm-e { position: absolute; left: 50%; top: 42%; width: 6.4em; height: 2.7em; border-radius: 1.35em; background: linear-gradient(90deg, var(--surface) 50%, #cfc8ff 50%); transform: translate(-50%, -50%) rotate(-30deg); }
.pm-d { position: absolute; left: 50%; top: 50%; width: 2em; height: 2em; margin: -1em; border-radius: 50%; background: var(--accent); transform: scale(0); }
.pm-d1 { --sx: -38em; --sy: 8em; }
.pm-d2 { --sx: 12em; --sy: 10.5em; width: 1.4em; height: 1.4em; margin: -0.7em; background: var(--brand-pink); }
.pm-shadow { position: absolute; left: 50%; bottom: 0.6em; width: 20em; height: 2.4em; margin-left: -11em; border-radius: 50%; background: var(--ink); opacity: 0.16; filter: blur(1.1em); }
.section-venture .note { margin-top: 0; text-align: center; }
figcaption { margin-top: 28px; color: var(--muted); font-size: var(--type-label); line-height: 1.6; }
.studio-meta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
.studio-meta > div { padding: 32px 40px; border-radius: var(--radius-xl); background: var(--surface); }
.studio-meta > div:only-child { grid-column: 1 / -1; }
.studio-meta h3 { color: var(--muted); font-size: var(--type-small); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 0; list-style: none; }
.chips li { padding: 6px 14px; border-radius: 980px; background: var(--tint); color: var(--ink); font-size: var(--type-small); line-height: 1.5; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stats dt { color: var(--ink-2); font-size: var(--type-small); line-height: 1.5; }
.stats dd { margin: 0; font-size: 3rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* The record of work: one chapter per project, each beside its own drawing. */
.work-grid { display: grid; gap: 20px; padding: 0; list-style: none; }
.work-tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; min-width: 0; padding: 48px; border-radius: var(--radius-xl); background: var(--tint); }
.work-tile:nth-child(even) .work-copy { order: 2; }
.work-tools { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.work-tools .work-copy { max-width: 46em; }
.work-copy h3 { margin-top: 6px; color: var(--ink-2); }
.work-copy p { margin-top: 12px; color: var(--ink-2); line-height: 1.6; }
.work-copy .kind { margin: 0; color: var(--accent); font-size: var(--type-small); font-weight: 600; }
.work-copy .work-headline { margin-top: 4px; color: var(--ink); font-size: var(--type-title); font-weight: 650; line-height: 1.25; letter-spacing: -0.02em; }
.work-copy .work-meaning { color: var(--ink); font-weight: 600; }
.work-copy .chips { margin-top: 20px; }
.work-copy .chips li { background: var(--surface); }
.project-list .chips li { background: var(--tint); }
.tile-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tile-stat strong { color: var(--ink); font-size: 2.5rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.progress-note { margin-top: 20px; color: var(--ink-2); font-size: var(--type-small); line-height: 1.6; }
.work-art { display: grid; place-items: center; min-width: 0; min-height: 340px; padding: 24px; border-radius: 22px; background: var(--surface); }
.work-art .art { max-width: 440px; }
.work-autostock .work-art .art { max-width: none; }
.work-tools .work-art { min-height: 0; padding: 16px 24px; }
.work-tools .work-art .art { max-width: 660px; }
.work-yosobot .art { transform: perspective(900px) rotateY(-14deg) rotateX(6deg); }
.work-controls { display: flex; justify-content: flex-end; margin-top: -24px; }
/* Auto Stock as a brand piece: a message, a planned batch, parallel fills, cutouts, tags, upload. Sizes are in em so
   the scene scales with its stage; at rest it is the finished batch (cut out and tagged). */
.art-stock, .art-draw { display: flex; align-items: center; justify-content: center; font-size: 11.5px; }
.sk { position: relative; flex: none; width: 34em; height: 30em; }
.sk-msg { position: absolute; left: 50%; top: 50%; width: 26em; height: 5.6em; border-radius: 2.8em; background: var(--tint); opacity: 0; transform: translate(-50%, -50%); }
.sk-line { position: absolute; left: 2.4em; top: 50%; width: 11em; height: 0.8em; margin-top: -0.4em; border-radius: 0.4em; background: var(--line-strong); }
.sk-send { position: absolute; right: 0.8em; top: 0.8em; display: grid; place-items: center; width: 4em; height: 4em; border-radius: 50%; background: var(--accent); }
.sk-send svg { width: 2em; height: 2em; fill: none; stroke: var(--surface); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sk-ring { position: absolute; left: calc(50% + 10.2em); top: 50%; width: 4em; height: 4em; margin: -2em; border: 0.2em solid var(--accent); border-radius: 50%; opacity: 0; }
.sk-t { position: absolute; left: 50%; top: 50%; width: 9em; height: 9em; margin: -4.5em; border: 0.15em dashed transparent; border-radius: 2em; transform: translate(var(--gx), var(--gy)); }
.sk-t1 { --gx: -10.6em; --gy: -5.8em; --ux: -9em; --uy: -0.8em; --d: 0ms; --bgc: #e9e7ff; --oc: var(--brand-yellow); }
.sk-t2 { --gx: 0em; --gy: -5.8em; --ux: -9em; --uy: 0em; --d: 320ms; --bgc: linear-gradient(135deg, var(--brand-purple) 50%, #cfc8ff 50%); }
.sk-t3 { --gx: 10.6em; --gy: -5.8em; --ux: 9em; --uy: -0.8em; --d: 0ms; --bgc: #fff1c9; --oc: var(--brand-purple); }
.sk-t4 { --gx: -10.6em; --gy: 5.8em; --ux: -9em; --uy: 0.8em; --d: 320ms; --bgc: #e3e3e8; --oc: var(--brand-pink); }
.sk-t5 { --gx: 0em; --gy: 5.8em; --ux: 9em; --uy: 0em; --d: 0ms; --bgc: #ffe1ec; --oc: var(--accent); }
.sk-t6 { --gx: 10.6em; --gy: 5.8em; --ux: 9em; --uy: 0.8em; --d: 320ms; --bgc: linear-gradient(135deg, var(--brand-yellow) 50%, #ffe9a8 50%); }
.sk-ck, .sk-bg { position: absolute; inset: -0.15em; border-radius: 2em; }
.sk-ck { background: conic-gradient(#e3e3e8 25%, var(--surface) 0 50%, #e3e3e8 0 75%, var(--surface) 0) 0 0 / 2.25em 2.25em; box-shadow: inset 0 0 0 0.1em var(--line); }
.sk-bg { background: var(--bgc); opacity: 0; }
.sk-bgd .sk-bg { opacity: 1; }
.sk-bgd .sk-ck { opacity: 0; }
.sk-o { position: absolute; left: 50%; top: 50%; width: 4.8em; height: 4.8em; border-radius: 50%; background: var(--oc); filter: drop-shadow(0 0.5em 0.45em #1d1d1f38); transform: translate(-50%, -62%) scale(1.14); }
.sk-t3 .sk-o { border-radius: 1.2em; }
.sk-t4 .sk-o { border-radius: 0; clip-path: polygon(50% 4%, 98% 92%, 2% 92%); }
.sk-t5 .sk-o { width: 6em; height: 3em; border-radius: 1.5em; }
.sk-tag { position: absolute; right: 0.6em; bottom: -0.9em; width: 3.6em; height: 1.5em; border-radius: 0.75em; background: var(--ink); transform-origin: 85% 50%; }
.sk-tag::before { content: ""; position: absolute; left: 0.45em; top: 50%; width: 0.5em; height: 0.5em; margin-top: -0.25em; border-radius: 50%; background: var(--surface); }
.sk-port { position: absolute; top: 1.2em; left: calc(50% - 9em); width: 5em; height: 0.5em; margin-left: -2.5em; border-radius: 0.25em; background: var(--line-strong); opacity: 0; }
.sk-port-2 { left: calc(50% + 9em); }
.yb-tile { fill: var(--surface); }
.yb-sq { fill: #e3e3e8; }
.yb-element { fill: var(--brand-pink); transform-box: fill-box; transform-origin: center; }
.yb-key { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; transform-box: fill-box; }
.yb-pass { fill: var(--ink); }
.yb-pass-line { fill: none; stroke: #ffffff66; stroke-width: 3; stroke-linecap: round; }
.yb-pass-check { fill: none; stroke: var(--brand-yellow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* The idea picker as a brand piece: a lever, three drums in 3D, the pick as a card on the pile. */
.dw { position: relative; flex: none; width: 34em; height: 30em; perspective: 90em; }
.dw-m { position: absolute; left: 50%; top: 50%; width: 20.2em; height: 13em; margin: -5.2em 0 0 -16.6em; padding: 1.3em; border-radius: 2.2em; background: var(--ink); box-shadow: 1.6em 2.2em 3.4em #1d1d1f33; transform: rotateY(-14deg) rotateX(7deg); transform-style: preserve-3d; }
.dw-win { display: grid; grid-template-columns: repeat(3, 5.2em); justify-content: center; gap: 0.8em; height: 10.4em; padding-block: 2.6em; overflow: hidden; border-radius: 1.1em; background: var(--line); perspective: 48em; }
.reel { position: relative; display: block; width: 5.2em; height: 5.2em; transform-style: preserve-3d; }
.reel-1 { transform: rotateX(-90deg); }
.reel-2 { transform: rotateX(-45deg); }
.reel-3 { transform: rotateX(-135deg); }
.face { position: absolute; inset: 0; display: grid; place-items: center; background: var(--surface); backface-visibility: hidden; }
.face::before { content: ""; width: 2.7em; height: 2.7em; }
.face-1 { transform: rotateX(0deg) translateZ(6.28em); }
.face-2 { transform: rotateX(45deg) translateZ(6.28em); }
.face-3 { transform: rotateX(90deg) translateZ(6.28em); }
.face-4 { transform: rotateX(135deg) translateZ(6.28em); }
.face-5 { transform: rotateX(180deg) translateZ(6.28em); }
.face-6 { transform: rotateX(225deg) translateZ(6.28em); }
.face-7 { transform: rotateX(270deg) translateZ(6.28em); }
.face-8 { transform: rotateX(315deg) translateZ(6.28em); }
.glyph-circle::before { border-radius: 50%; background: var(--brand-yellow); }
.glyph-square::before { border-radius: 0.7em; background: var(--brand-purple); }
.glyph-tri::before { background: var(--brand-pink); clip-path: polygon(50% 6%, 96% 92%, 4% 92%); }
.glyph-star::before, .dw-card i { background: var(--accent); clip-path: polygon(50% 2%, 62% 36%, 98% 38%, 69% 60%, 80% 96%, 50% 74%, 20% 96%, 31% 60%, 2% 38%, 38% 36%); }
.dw-lever { position: absolute; right: -2.4em; top: 1.6em; width: 0.7em; height: 7.4em; border-radius: 0.35em; background: var(--line-strong); transform-origin: 50% 100%; }
.dw-lever i { position: absolute; left: 50%; top: -1.5em; width: 2.8em; height: 2.8em; margin-left: -1.4em; border-radius: 50%; background: var(--brand-pink); }
.dw-stack, .dw-card { position: absolute; left: 50%; top: 50%; width: 7.4em; height: 9.6em; margin: -4.8em 0 0 -3.7em; }
.dw-stack { transform: translate(12.6em, 2.4em); }
.dw-stack i { position: absolute; inset: 0; border-radius: 1.2em; background: var(--surface); box-shadow: inset 0 0 0 0.1em var(--line); transform: rotate(-2deg) translate(0.2em, 0.25em); }
.dw-stack i:first-child { background: var(--tint); transform: rotate(-8deg) translate(-0.5em, 0.5em); }
.dw-card { display: grid; place-items: center; border-radius: 1.2em; background: var(--surface); box-shadow: inset 0 0 0 0.1em var(--line), 0 1em 2em -0.9em #1d1d1f59; transform: translate(12.6em, 2.4em) rotate(4deg); }
.dw-card i { width: 3.6em; height: 3.6em; }
/* The public tools as one board. */
.bt { transform-box: fill-box; transform-origin: center; }
.bt-1 { --from: translate(-52px, 4px) rotate(-8deg); }
.bt-2 { --from: translate(14px, -6px) rotate(7deg); }
.bt-3 { --from: translate(52px, 6px) rotate(-6deg); }
.bt-4 { --from: translate(-26px, 6px) rotate(8deg); }
.bt-5 { --from: translate(48px, 6px) rotate(5deg); }
.bt-tile { fill: var(--tint); }
.bt-hole { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 5; }
.bt-cut { --lift: translate(-14px, -16px); fill: var(--brand-yellow); stroke: var(--ink); stroke-width: 2; transform-box: fill-box; }
.bt-cut-2 { --lift: translate(12px, -12px); fill: var(--brand-purple); }
.tl-cell-1, .tl-cell-4, .tl-cell-6, .tl-cell-7, .tl-cell-9 { fill: var(--accent-soft); stroke: var(--accent); }
.tl-fill { fill: var(--brand-pink); }
.tl-stroke { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.tl-cell { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
/* The next venture: only its name, field and one approved sentence. */
.product { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 720px; margin-inline: auto; padding: 48px 40px; border-radius: var(--radius-xl); background: var(--tint); text-align: center; }
.product h3 { font-size: var(--type-title); line-height: 1.25; letter-spacing: -0.02em; }
.product p:last-child { max-width: 30em; color: var(--ink-2); line-height: 1.6; }
/* About and the service pages read as documents: a ruled row per subject. */
.prose > p + p { margin-top: 1em; }
.prose p, .prose li { max-width: 40em; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; padding: 0; list-style: none; }
.steps li { min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--ink-2); line-height: 1.6; }
.page-about main > .section, .page-service-move main > .section { padding-block: 56px; border-top: 1px solid var(--line); }
.page-about main > .section-last, main > .section:last-child { padding-bottom: var(--section); }
.project-list { padding: 0; list-style: none; }
.project-list > li { padding-block: 24px; border-top: 1px solid var(--line); }
.project-list > li:first-child { padding-top: 0; border-top: 0; }
.project-list h3 { font-size: 1.25rem; }
.project-list .kind { margin-top: 2px; color: var(--accent); font-size: var(--type-small); font-weight: 600; }
.project-list p:not(.kind) { max-width: 40em; margin-top: 8px; color: var(--ink-2); line-height: 1.6; }
.about-projects .product { max-width: none; margin-top: 16px; align-items: flex-start; padding: 32px; text-align: left; }
.facts > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding-block: 10px; }
.facts dt { color: var(--muted); font-size: var(--type-small); line-height: 1.6; }
.facts dd { margin: 0; line-height: 1.6; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* Policies retain readable text measures and their original navigation contracts. */
.legal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 64px; padding-block: 48px var(--section); border-top: 1px solid var(--line); text-align: left; }
.legal > * { min-width: 0; }
.legal-body { max-width: 44em; }
.legal-body .intro { font-size: var(--type-body); line-height: 1.7; letter-spacing: -0.01em; }
.legal-meta .facts > div { display: block; }
.legal-meta dd { margin-top: 4px; }
.toc ol { margin-top: 24px; padding: 0; list-style: none; font-size: var(--type-small); }
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; color: var(--ink-2); line-height: 1.5; }
.toc a:hover { color: var(--accent); }
.legal-body section { scroll-margin-top: 72px; }
.legal-body h2 { margin: 48px 0 16px; font-size: 1.5rem; line-height: 1.35; }
.legal-body ul { margin-top: 16px; padding-left: 1.25em; }
.legal-body li { margin-top: 8px; }
.legal-body p + p, .legal-body ul + p { margin-top: 1em; }
.legal-body a, .note a { color: var(--accent); }
/* Shared service-move notices, controls and status selectors stay available. */
.page-service-move .page-hero, .page-privacy .page-hero, .page-terms .page-hero { text-align: left; }
.page-service-move .page-hero h1, .page-privacy .page-hero h1, .page-terms .page-hero h1 { margin-inline: 0; font-size: var(--type-heading); }
.page-service-move .page-hero > .lead { margin-inline: 0; }
.page-service-move .actions { justify-content: flex-start; }
.page-service-move .intro { font-size: var(--type-body); line-height: 1.7; }
.notice { padding: 16px 24px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface); line-height: 1.7; }
.notice-warn { border-left-color: var(--warn); }
.panel { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.status { min-height: 1.6em; color: var(--ink-2); }
.stack > * + * { margin-top: 24px; }
.not-found { padding-block: 96px; }
.not-found .lead { margin-top: 20px; }
.not-found .actions { justify-content: flex-start; }
.not-found-other { max-width: 40em; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.not-found-other h2 { margin-bottom: 12px; font-size: 1.5rem; }
/* The single footer: the inquiry cell, the site map, then the copyright line and one line of company facts. */
.site-footer { padding-block: 96px 28px; background: var(--tint); font-size: var(--type-small); }
.footer-contact { position: relative; padding-bottom: 72px; }
.footer-contact > * { min-width: 0; }
/* Soft colour behind the cell, so the glass has something to blur. */
.footer-contact::before { content: ""; position: absolute; inset: -32px 6% 40px; background: radial-gradient(closest-side at 20% 40%, #9284fc85, transparent), radial-gradient(closest-side at 80% 32%, #fb74a166, transparent), radial-gradient(closest-side at 62% 80%, #fcd25980, transparent); filter: blur(40px); pointer-events: none; }
.contact-cell { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 40px 64px; padding: 56px; border: 1px solid #ffffffb3; border-radius: 36px; background: linear-gradient(135deg, #ffffffbf, #ffffff7a); box-shadow: inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #ffffff66, 0 30px 60px -30px #1d1d1f3d, 0 2px 8px #1d1d1f0a; -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); }
.contact-copy h2 { margin-top: 8px; }
.footer-lead { margin-top: 16px; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }
.mail { display: grid; justify-items: start; margin-top: 32px; }
.mail-label { color: var(--muted); font-size: var(--type-label); line-height: 1.5; }
.mail-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: var(--type-lead); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; text-decoration: none; }
.mail-link:hover { text-decoration: underline; }
.contact-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { color: var(--ink-2); font-size: var(--type-small); font-weight: 500; line-height: 1.5; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--field-line); border-radius: 16px; background: #ffffffa6; box-shadow: inset 0 2px 5px #1d1d1f14, 0 1px 0 #ffffffd9; color: var(--ink); font: inherit; font-size: var(--type-body); line-height: 1.5; transition: border-color var(--motion), background-color var(--motion); }
.field textarea { display: block; min-height: 148px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent); background: var(--surface); }
/* For bots only. Kept out of sight, out of the tab order and out of the accessibility tree. */
.field-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.form-actions .button { min-width: 128px; box-shadow: inset 0 1px 0 #ffffff47, 0 12px 24px -14px #4a3bd1b3; }
.form-status { min-height: 1.6em; color: var(--ink-2); font-size: var(--type-small); line-height: 1.6; }
.form-status[data-state="invalid"], .form-status[data-state="busy"], .form-status[data-state="failed"] { color: var(--warn); }
.form-note { color: var(--muted); font-size: var(--type-label); line-height: 1.6; }
.form-note a { color: var(--ink-2); }
.footer-nav h3 { margin-bottom: 4px; color: var(--muted); font-size: var(--type-label); font-weight: 500; letter-spacing: 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 64px; padding-block: 32px 28px; border-top: 1px solid var(--line); }
.footer-brand img { display: block; width: 32px; height: 32px; margin-bottom: 12px; }
.footer-tagline { max-width: 24em; color: var(--muted); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.footer-nav ul { padding: 0; list-style: none; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; color: var(--ink-2); overflow-wrap: anywhere; line-height: 1.5; text-decoration: none; transition: color var(--motion); }
.footer-nav a:hover { color: var(--accent); text-decoration: underline; }
.footer-note { max-width: 28em; color: var(--muted); font-size: var(--type-label); line-height: 1.6; }
.footer-legal { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--type-label); line-height: 1.6; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.footer-policies ul { display: flex; flex-wrap: wrap; padding: 0; list-style: none; }
.footer-policies li { display: flex; align-items: center; }
.footer-policies li + li::before { content: ""; width: 1px; height: 12px; margin-inline: 12px; background: var(--line-strong); }
.footer-policies a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; transition: color var(--motion); }
.footer-policies a:hover { color: var(--accent); text-decoration: underline; }
.footer-lang { margin-left: auto; }
.footer-company { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* Motion. Everything above is the finished, static picture; the rules below only add to it,
   only when the visitor has not asked for reduced motion. The joining of the logo runs once.
   The loops (.motion-on) start only after the script has revealed the stop control. */
@media screen and (prefers-reduced-motion: no-preference) {
  .mark-piece { animation: mark-join 1000ms var(--settle) both; }
  .mark-l { --from: translate(-70px, -50px) rotate(-9deg); animation-delay: 700ms; }
  .mark-p { --from: translate(10px, 70px) rotate(5deg); animation-delay: 820ms; }
  .mark-r { --from: translate(95px, 35px) rotate(11deg); animation-delay: 940ms; }
  .mark-dot { --from: translate(70px, -80px) scale(0.7); animation-delay: 1060ms; }
  .mark-stitch { animation: mark-stitch 1700ms ease-out both; }
  .mark-route { animation: mark-draw 1600ms cubic-bezier(0.6, 0, 0.3, 1) 1700ms both; }
  .mark-hop { animation: mark-appear 500ms ease-out 3100ms both; }
  @supports (offset-path: path("M0 0")) {
    .motion-on .mark-token { offset-path: path("M282 300L222 700C205 820 250 915 360 925C400 928 440 918 460 900C450 850 447 795 455 735C470 640 545 558 650 558C745 558 805 630 802 715C798 810 720 890 620 915C560 928 500 925 460 900C450 850 447 795 455 735C470 640 545 558 650 558C745 558 805 630 802 715C804 765 850 775 930 762L1075 755C1130 700 1090 560 1000 478"); offset-rotate: 0deg; animation: mark-flow 7000ms linear 3300ms infinite both; }
    .motion-on .mark-dot { animation: mark-join 1000ms var(--settle) 1060ms both, mark-arrive 7000ms ease-in-out 3300ms infinite; }
    .motion-on .art-token { offset-path: path("M24 120H460V78C460 20 276 20 276 78V120H896"); offset-rotate: 0deg; animation: studio-flow 10000ms linear 400ms infinite both; }
  }
  .motion-on .sc-1 { animation: sc-1 10000ms ease-out 400ms infinite both; }
  .motion-on .sc-2 { animation: sc-2 10000ms ease-out 400ms infinite both; }
  .motion-on .sc-3 { animation: sc-3 10000ms ease-out 400ms infinite both; }
  .motion-on .sc-4 { animation: sc-4 10000ms ease-out 400ms infinite both; }
  .motion-on .sc-human { animation: sc-5 10000ms var(--settle) 400ms infinite both; }
  .motion-on .art-loop { animation: sc-loop 10000ms ease-out 400ms infinite both; }
  .motion-on .sc-ring { animation: sc-spin 1600ms linear infinite; }
  .motion-on .sc-pass { animation: sc-pass 10000ms ease-out 400ms infinite both; }
  .motion-on .sc-agent { animation: sc-agent 1500ms ease-in-out infinite; }
  .motion-on .sc-agent-2 { animation-delay: 200ms; }
  .motion-on .sc-agent-3 { animation-delay: 400ms; }
  .motion-on .art-check { animation: sc-check 10000ms ease-out 400ms infinite both; }
  .motion-on .pm-cam { animation: pm-cam 10000ms ease-in-out infinite both; }
  .motion-on .pm-orbit { animation: pm-orbit 10000ms ease-in-out infinite both; }
  .motion-on .pm-p { animation: pm-move 10000ms ease-in-out infinite both; }
  .motion-on .pm-s { animation: pm-shape 10000ms ease-in-out infinite both; }
  .motion-on .pm-s::before { animation: pm-half 10000ms ease-in-out infinite both; }
  .motion-on .pm-face { animation: pm-face 10000ms cubic-bezier(0.3, 0, 0.2, 1) infinite both; }
  .motion-on .pm-d { animation: pm-dot 10000ms ease-in-out infinite both; }
  .motion-on .pm-shadow { animation: pm-shadow 10000ms ease-in-out infinite both; }
  .motion-on .pb-flow { animation: pb-flow 900ms linear infinite; }
  .motion-on .pb-drip { animation: pb-drip 3200ms linear infinite; }
  .motion-on .pb-piece { animation: pb-piece 4000ms ease-in-out infinite; }
  .motion-on .pb-piece-2, .motion-on .pb-piece-5 { animation-delay: 700ms; }
  .motion-on .pb-piece-3, .motion-on .pb-piece-6 { animation-delay: 1400ms; }
  .motion-on .pb-wait-1 { animation: pb-wait-1 8000ms steps(1, end) infinite both; }
  .motion-on .pb-wait-2 { animation: pb-wait-2 8000ms steps(1, end) infinite both; }
  .motion-on .pb-wait-3 { animation: pb-wait-3 8000ms steps(1, end) infinite both; }
  .motion-on .pb-wait-4 { animation: pb-wait-4 8000ms steps(1, end) infinite both; }
  .motion-on .pb-neck { animation: pb-neck 8000ms ease-in-out infinite both; }
  .motion-on .sk-msg { animation: sk-msg 10000ms cubic-bezier(0.6, 0, 0.2, 1) infinite both; }
  .motion-on .sk-line { animation: sk-line 10000ms ease-out infinite both; }
  .motion-on .sk-send { animation: sk-send 10000ms ease-in-out infinite both; }
  .motion-on .sk-ring { animation: sk-ring 10000ms ease-out infinite both; }
  .motion-on .sk-t { animation: sk-tile 10000ms cubic-bezier(0.5, 0, 0.2, 1) var(--d) infinite both; }
  .motion-on .sk-bg { animation: sk-fill 10000ms ease-out var(--d) infinite both; }
  .motion-on .sk-el .sk-bg { animation-name: sk-fill-cut; }
  .motion-on .sk-ck { animation: sk-ck 10000ms ease-out var(--d) infinite both; }
  .motion-on .sk-bgd .sk-ck { animation: none; }
  .motion-on .sk-o { animation: sk-o 10000ms var(--settle) var(--d) infinite both; }
  .motion-on .sk-t4 .sk-bg { animation-name: sk-fill-late; }
  .motion-on .sk-t4 .sk-ck { animation-name: sk-ck-late; }
  .motion-on .sk-t4 .sk-o { animation-name: sk-o-late; }
  .motion-on .sk-tag { animation: sk-tag 10000ms var(--settle) var(--d) infinite both; }
  .motion-on .sk-port { animation: sk-port 10000ms ease-in-out infinite both; }
  .motion-on .yb-element { animation: yb-pop 7000ms var(--settle) infinite both; }
  .motion-on .yb-key-1 { animation: yb-key 7000ms ease-out 900ms infinite both; }
  .motion-on .yb-key-2 { animation: yb-key 7000ms ease-out 1300ms infinite both; }
  .motion-on .yb-key-3 { animation: yb-key 7000ms ease-out 1700ms infinite both; }
  .motion-on .yb-pass-check { animation: yb-check 7000ms ease-out infinite both; }
  .motion-on .dw-lever { animation: dw-lever 10000ms var(--settle) infinite both; }
  .motion-on .reel-1 { animation: slot-1 10000ms cubic-bezier(0.15, 0.6, 0.25, 1) infinite both; }
  .motion-on .reel-2 { animation: slot-2 10000ms cubic-bezier(0.15, 0.6, 0.25, 1) infinite both; }
  .motion-on .reel-3 { animation: slot-3 10000ms cubic-bezier(0.15, 0.6, 0.25, 1) infinite both; }
  .motion-on .dw-card { animation: dw-card 10000ms cubic-bezier(0.5, 0, 0.2, 1) infinite both; }
  .motion-on .dw-stack { animation: dw-stack 10000ms ease-out infinite both; }
  .motion-on .bt { animation: bt-join 9000ms var(--settle) infinite both; }
  .motion-on .bt-2 { animation-delay: 90ms; }
  .motion-on .bt-3 { animation-delay: 180ms; }
  .motion-on .bt-4 { animation-delay: 270ms; }
  .motion-on .bt-5 { animation-delay: 360ms; }
  .motion-on .bt-cut { animation: tl-lift 9000ms cubic-bezier(0.5, 0, 0.3, 1) infinite both; }
  .motion-on .tl-cell-1, .motion-on .tl-cell-4, .motion-on .tl-cell-6, .motion-on .tl-cell-7, .motion-on .tl-cell-9 { animation: tl-cell 9000ms ease-in-out infinite both; }
  .motion-on .tl-cell-4, .motion-on .tl-cell-7 { animation-delay: 600ms; }
  .motion-on .tl-cell-9 { animation-delay: 1200ms; }
  .motion-on .tl-fill { animation: tl-ink 8000ms ease-in-out infinite both; }
  @media screen {
    @supports (animation-timeline: view()) {
      .hl { animation: hl-sweep linear both; animation-timeline: view(); animation-range: entry 60% cover 34%; }
      .section-heading, .section-side, .section > .section-body, .flow-figure, .problem-stage, .seams, .studio-meta, .work-tile, .product, .contact-cell { animation: rise linear both; animation-timeline: view(); animation-range: cover 0% cover 14%; }
    }
  }
  .motion-paused .motion-stage *, .motion-paused .motion-stage *::before, .is-offscreen.motion-stage *, .is-offscreen.motion-stage *::before { animation-play-state: paused; }
}
@keyframes rise { from { transform: translateY(24px); } to { transform: none; } }
@keyframes mark-join { from { transform: var(--from); } to { transform: none; } }
@keyframes mark-stitch { 0%, 45% { opacity: 0.6; } 80%, 100% { opacity: 0; } }
@keyframes mark-draw { 0% { stroke-dasharray: 0 1; opacity: 0; } 2% { opacity: 1; } 100% { stroke-dasharray: 1 0; opacity: 1; } }
@keyframes mark-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes mark-flow { 0% { offset-distance: 0%; opacity: 0; } 3% { opacity: 1; } 78% { offset-distance: 93.5%; opacity: 1; } 86% { offset-distance: 100%; opacity: 1; } 89%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes mark-arrive { 0%, 85% { transform: none; } 90% { transform: scale(1.1); } 97%, 100% { transform: none; } }
/* Content Studio, one cycle on one line: the brief, agents at work, a review that fails and sends the work back over the loop, a pass, the comparison, approval. */
@keyframes sc-1 { 0%, 4% { fill: var(--surface); stroke: var(--line-strong); } 7%, 94% { fill: var(--accent-soft); stroke: var(--accent); } 100% { fill: var(--surface); stroke: var(--line-strong); } }
@keyframes sc-2 { 0%, 16% { fill: var(--surface); stroke: var(--line-strong); transform: none; } 19%, 48% { fill: var(--accent-soft); stroke: var(--accent); transform: none; } 51% { fill: var(--accent-soft); stroke: var(--accent); transform: scale(1.06); } 56%, 94% { fill: var(--accent-soft); stroke: var(--accent); transform: none; } 100% { fill: var(--surface); stroke: var(--line-strong); transform: none; } }
@keyframes sc-3 { 0%, 28% { fill: var(--surface); stroke: var(--line-strong); } 31%, 48% { fill: var(--warn-soft); stroke: var(--warn); } 52%, 60% { fill: var(--surface); stroke: var(--line-strong); } 64%, 94% { fill: var(--accent-soft); stroke: var(--accent); } 100% { fill: var(--surface); stroke: var(--line-strong); } }
@keyframes sc-4 { 0%, 73% { fill: var(--surface); stroke: var(--line-strong); } 77%, 94% { fill: var(--accent-soft); stroke: var(--accent); } 100% { fill: var(--surface); stroke: var(--line-strong); } }
@keyframes sc-5 { 0%, 86% { transform: none; } 89% { transform: scale(1.1); } 93%, 100% { transform: none; } }
@keyframes sc-loop { 0%, 30% { stroke: var(--line-strong); } 33%, 48% { stroke: var(--warn); } 52%, 100% { stroke: var(--line-strong); } }
@keyframes sc-pass { 0%, 62% { stroke-dasharray: 0 1; opacity: 0; } 63% { opacity: 1; } 68%, 94% { stroke-dasharray: 1 0; opacity: 1; } 100% { stroke-dasharray: 1 0; opacity: 0; } }
@keyframes sc-check { 0%, 86% { stroke-dasharray: 0 1; opacity: 0; } 87% { opacity: 1; } 92%, 100% { stroke-dasharray: 1 0; opacity: 1; } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-agent { 0%, 60%, 100% { transform: none; fill: var(--surface); } 30% { transform: translateY(-5px); fill: var(--brand-yellow); } }
/* The problem: dashes run fast into the neck, a queue builds in front of it, and a thin trickle leaves. */
@keyframes pb-flow { to { stroke-dashoffset: -18; } }
@keyframes pb-drip { to { stroke-dashoffset: -32; } }
@keyframes pb-piece { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@keyframes pb-wait-1 { 0% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes pb-wait-2 { 0% { opacity: 0; } 30%, 100% { opacity: 1; } }
@keyframes pb-wait-3 { 0% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes pb-wait-4 { 0% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes pb-neck { 0%, 60% { fill: var(--on-night); } 72%, 94% { fill: var(--on-night-warn); } 100% { fill: var(--on-night); } }
/* The new venture, one cycle: drift, a full turn inward while capsules thin into lines, a tilt, lines opening into pages, the booklet, release. */
@keyframes pm-move {
  0% { transform: translate3d(calc(var(--sx) * var(--kx)), var(--sy), 0) rotate(var(--sr)) scale(var(--ss)); }
  22% { transform: translate3d(calc((var(--sx) + var(--dx)) * var(--kx)), calc(var(--sy) + var(--dy)), 0) rotate(calc(var(--sr) + var(--dr))) scale(var(--ss)); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  44% { transform: translate3d(0, var(--oy), 0) rotate(0deg) scale(1); }
  58% { transform: translate3d(0, var(--oy), 0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); }
  76%, 90% { transform: translate3d(0, 0, var(--bz)) rotate(0deg) scale(1); }
  90% { animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  100% { transform: translate3d(calc(var(--sx) * var(--kx)), var(--sy), 0) rotate(var(--sr)) scale(var(--ss)); }
}
@keyframes pm-orbit { 0%, 22% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); } 44%, 100% { transform: rotate(360deg); } }
@keyframes pm-cam { 0%, 44% { transform: none; } 58% { transform: rotateX(62deg) rotateZ(-24deg); animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); } 76%, 90% { transform: rotateX(6deg) rotateY(-22deg); } 100% { transform: none; } }
@keyframes pm-shape {
  0%, 22% { width: 9.4em; height: 4em; border-radius: 2em; background-color: var(--c1); box-shadow: inset 0 0 0 0.1em transparent; animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  44%, 58% { width: 17em; height: 0.8em; border-radius: 0.4em; background-color: var(--ink); box-shadow: inset 0 0 0 0.1em transparent; }
  58% { animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1); }
  76%, 90% { width: 16em; height: 22em; border-radius: 1.8em; background-color: var(--pg); box-shadow: inset 0 0 0 0.1em var(--line); }
  100% { width: 9.4em; height: 4em; border-radius: 2em; background-color: var(--c1); box-shadow: inset 0 0 0 0.1em transparent; }
}
@keyframes pm-half { 0%, 22% { opacity: 1; } 38%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pm-face { 0%, 74% { clip-path: circle(0% at 50% 42%); } 86%, 90% { clip-path: circle(90% at 50% 42%); } 94%, 100% { clip-path: circle(0% at 50% 42%); } }
@keyframes pm-dot { 0% { transform: translate(calc(var(--sx) * var(--kx)), var(--sy)) scale(1); } 22% { transform: translate(calc((var(--sx) + 1.5em) * var(--kx)), calc(var(--sy) - 1.8em)) scale(1); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); } 36%, 92% { transform: translate(0, 0) scale(0); } 100% { transform: translate(calc(var(--sx) * var(--kx)), var(--sy)) scale(1); } }
@keyframes pm-shadow { 0%, 62% { opacity: 0; transform: scale(0.4); } 78%, 90% { opacity: 0.16; transform: none; } 97%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes hl-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
/* Auto Stock, one cycle: type and send, slots laid out, fills in two waves, objects lifted off their backgrounds (the fourth on a second try), tags, two stacks leaving. */
@keyframes sk-msg { 0% { width: 26em; opacity: 0; transform: translate(-50%, -50%) scale(0.92); } 3%, 10% { width: 26em; opacity: 1; transform: translate(-50%, -50%); } 14%, 16% { width: 5.6em; opacity: 1; transform: translate(-50%, -50%); } 20%, 100% { width: 5.6em; opacity: 0; transform: translate(-50%, -50%) scale(0.2); } }
@keyframes sk-line { 0%, 1.5% { width: 0; opacity: 1; } 7%, 10% { width: 11em; opacity: 1; } 12%, 100% { width: 11em; opacity: 0; } }
@keyframes sk-send { 0%, 7.6% { transform: none; } 8.6% { transform: scale(0.84); } 10.4%, 100% { transform: none; } }
@keyframes sk-ring { 0%, 8.4% { opacity: 0; transform: scale(0.7); } 9% { opacity: 0.55; transform: scale(0.9); } 14%, 100% { opacity: 0; transform: scale(2.3); } }
@keyframes sk-tile { 0%, 15% { transform: scale(0); opacity: 1; border-color: var(--line-strong); } 23%, 27% { transform: translate(var(--gx), var(--gy)); opacity: 1; border-color: var(--line-strong); } 33% { border-color: transparent; } 78% { transform: translate(var(--gx), var(--gy)); opacity: 1; border-color: transparent; } 85% { transform: translate(var(--ux), var(--uy)) scale(0.8); opacity: 1; border-color: transparent; } 92%, 100% { transform: translate(var(--ux), -17em) scale(0.6); opacity: 0; border-color: transparent; } }
@keyframes sk-fill { 0%, 27% { opacity: 0; transform: scale(0.6); } 34%, 100% { opacity: 1; transform: none; } }
@keyframes sk-fill-cut { 0%, 27% { opacity: 0; transform: scale(0.6); } 34%, 50% { opacity: 1; transform: none; } 57%, 100% { opacity: 0; transform: none; } }
@keyframes sk-fill-late { 0%, 27% { opacity: 0; transform: scale(0.6); } 34%, 59% { opacity: 1; transform: none; } 65%, 100% { opacity: 0; transform: none; } }
@keyframes sk-ck { 0%, 50% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes sk-ck-late { 0%, 59% { opacity: 0; } 65%, 100% { opacity: 1; } }
@keyframes sk-o { 0%, 28% { transform: translate(-50%, -50%) scale(0); filter: drop-shadow(0 0 0 #1d1d1f00); } 35%, 50% { transform: translate(-50%, -50%); filter: drop-shadow(0 0 0 #1d1d1f00); } 57%, 100% { transform: translate(-50%, -62%) scale(1.14); filter: drop-shadow(0 0.5em 0.45em #1d1d1f38); } }
@keyframes sk-o-late { 0%, 28% { transform: translate(-50%, -50%) scale(0); filter: drop-shadow(0 0 0 #1d1d1f00); } 35%, 50% { transform: translate(-50%, -50%); filter: drop-shadow(0 0 0 #1d1d1f00); } 52% { transform: translate(-50%, -54%) rotate(-9deg); } 54.5% { transform: translate(-50%, -50%) rotate(7deg); } 57%, 59% { transform: translate(-50%, -50%); filter: drop-shadow(0 0 0 #1d1d1f00); } 65%, 100% { transform: translate(-50%, -62%) scale(1.14); filter: drop-shadow(0 0.5em 0.45em #1d1d1f38); } }
@keyframes sk-tag { 0%, 66% { transform: scale(0) rotate(-24deg); } 71%, 100% { transform: none; } }
@keyframes sk-port { 0%, 78% { opacity: 0; background-color: var(--line-strong); } 83%, 89% { opacity: 1; background-color: var(--line-strong); } 92%, 96% { opacity: 1; background-color: var(--accent); } 100% { opacity: 0; background-color: var(--accent); } }
/* Yosobot: an element appears on transparency, keywords arrive, the licence is checked. */
@keyframes yb-pop { 0%, 5% { transform: scale(0.4) rotate(-20deg); opacity: 0; } 15%, 100% { transform: none; opacity: 1; } }
@keyframes yb-key { 0%, 10% { transform: translateX(24px); opacity: 0; } 20%, 100% { transform: none; opacity: 1; } }
@keyframes yb-check { 0%, 55% { stroke-dasharray: 0 1; opacity: 0; } 56% { opacity: 1; } 65%, 100% { stroke-dasharray: 1 0; opacity: 1; } }
/* The idea picker, one cycle: the lever goes down and springs back, the drums turn and stop one by one, the pick comes out as a card, tips and lands on the pile. */
@keyframes dw-lever { 0%, 6% { transform: none; } 11% { transform: rotateX(66deg); } 19%, 100% { transform: none; } }
@keyframes slot-1 { 0%, 10% { transform: rotateX(-90deg); } 40%, 100% { transform: rotateX(-1170deg); } }
@keyframes slot-2 { 0%, 10% { transform: rotateX(-45deg); } 47%, 100% { transform: rotateX(-1485deg); } }
@keyframes slot-3 { 0%, 10% { transform: rotateX(-135deg); } 54%, 100% { transform: rotateX(-1935deg); } }
@keyframes dw-card { 0%, 56% { opacity: 0; transform: translate(-6.4em, 1.2em) scale(0.3) rotateX(70deg); } 58% { opacity: 1; transform: translate(-6.4em, 1.2em) scale(0.3) rotateX(70deg); animation-timing-function: cubic-bezier(0.3, 1.3, 0.5, 1); } 68%, 73% { opacity: 1; transform: translate(-6.4em, -8.4em) rotate(-5deg); } 84%, 94% { opacity: 1; transform: translate(12.6em, 2.4em) rotate(4deg); } 99%, 100% { opacity: 0; transform: translate(12.6em, 2.4em) rotate(4deg) scale(0.97); } }
@keyframes dw-stack { 0%, 83% { transform: translate(12.6em, 2.4em); } 86% { transform: translate(12.6em, 2.9em); } 91%, 100% { transform: translate(12.6em, 2.4em); } }
/* The tools board: five tiles arrive from apart and settle into one grid. */
@keyframes bt-join { 0% { transform: var(--from); opacity: 0; } 8% { transform: var(--from); opacity: 1; } 22%, 88% { transform: none; opacity: 1; } 96%, 100% { transform: var(--from); opacity: 0; } }
@keyframes tl-lift { 0%, 30% { transform: none; } 42%, 72% { transform: var(--lift); } 84%, 100% { transform: none; } }
@keyframes studio-flow { 0% { offset-distance: 0%; opacity: 0; } 3% { opacity: 1; } 92% { offset-distance: 100%; opacity: 1; } 96%, 100% { offset-distance: 100%; opacity: 0; } }
/* The commissioned app: three drums spin and stop one after another. */
/* Web tools: objects lift off a picture, a filled shape becomes line art, puzzle cells fill in. */
@keyframes tl-ink { 0%, 25% { fill-opacity: 1; } 45%, 75% { fill-opacity: 0; } 95%, 100% { fill-opacity: 1; } }
@keyframes tl-cell { 0%, 10% { fill: var(--surface); stroke: var(--line-strong); } 20%, 85% { fill: var(--accent-soft); stroke: var(--accent); } 95%, 100% { fill: var(--surface); stroke: var(--line-strong); } }
@media (max-width: 959px) {
  :root { --type-display: 2.75rem; --type-heading: 2rem; --type-title: 1.5rem; --type-lead: 1.1875rem; --section: 96px; }
  html { scroll-padding-top: 24px; }
  .site-header { position: static; }
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "nav nav"; gap: 0 16px; }
  .site-nav { border-top: 1px solid var(--line); }
  .site-nav ul { justify-content: space-between; gap: 8px; }
  .seams { grid-template-columns: minmax(0, 1fr); }
  .seams li, .seams li + li { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-left: 0; border-top: 1px solid var(--on-night-line); }
  .seams li:first-child { border-top: 0; }
  .seams h3 { margin-bottom: 0; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .flow li { text-align: left; }
  .flow .tag-human { margin-inline: 0; }
  .flow-figure { padding: 24px; }
  .studio-meta { grid-template-columns: minmax(0, 1fr); }
  .studio-meta > div { padding: 28px 24px; }
  .work-tile { gap: 32px; padding: 36px 32px; }
  .work-art { min-height: 280px; }
  .legal { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-cell { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 32px; }
}
@media (max-width: 1199px) {
  .art-stock, .art-draw { font-size: 8.6px; }
}
@media (max-width: 859px) {
  .art-stock, .art-draw { font-size: min(11.5px, calc((100vw - 112px) / 36)); }
  .work-tile { grid-template-columns: minmax(0, 1fr); }
  .work-tile:nth-child(even) .work-copy { order: 0; }
}
@media (max-width: 639px) {
  :root { --gutter: 20px; --type-display: 2rem; --type-heading: 1.625rem; --type-title: 1.375rem; --type-lead: 1.0625rem; --section: 72px; --radius-xl: 22px; }
  .hero { padding-block: 56px 72px; }
  .hero-art { margin-top: 40px; }
  .hero-art .motion-toggle { right: 0; }
  .page-hero { padding-block: 56px 48px; }
  .section { gap: 28px 0; }
  .section > .section-side, .section > .section-side + .section-body { grid-column: 1 / -1; }
  .page-about main > .section, .page-service-move main > .section { padding-block: 40px; }
  .seams li, .seams li + li { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .flow-figure { padding: 20px; }
  .stats dd { font-size: 2.5rem; }
  .work-tile { padding: 28px 22px; }
  .work-art { min-height: 220px; padding: 16px; }
  .product { padding: 36px 24px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .panel { padding: 24px; }
  .facts > div { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .legal { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .legal-body h2 { margin-top: 32px; }
  .site-footer { padding-top: 64px; }
  .footer-contact { padding-bottom: 48px; }
  .contact-cell { padding: 28px 20px; border-radius: 28px; }
  .flow-controls { grid-template-columns: minmax(0, 1fr); }
  .flow-controls h3 { padding-top: 0; }
  .venture-figure { padding-block: 24px; }
  .art-passport { font-size: calc((100vw - 80px) / 62); }
  .pm { --kx: 0.62; width: 60em; }
  .flow-stage { padding-top: 36px; }
  .footer-nav { gap: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  .site-nav, .header-actions, .skip, .actions, .motion-toggle { display: none; }
  .site-header { position: static; }
  .band-night, .band-night .intro, .band-night .seams p, .band-night .section-label { background: #ffffff; color: #000000; }
  .seams li { border-color: #999999; }
  .section-heading, .section-side, .section > .section-body, .flow-figure, .problem-stage, .seams, .studio-meta, .work-tile, .product, .contact-cell { animation: none; transform: none; }
  .problem-stage { display: none; }
  .hl { background: none; color: inherit; }
  .contact-form, .footer-contact::before { display: none; }
  .contact-cell { grid-template-columns: minmax(0, 1fr); border-color: #999999; background: #ffffff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}