/* Twenion — site styles. Tokens first; every colour used below comes from them. */

@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- tokens ---------- */
:root {
  --bg: #15110C;
  --bg-2: #1E1811;
  --bg-3: #2A2117;
  --ink: #F4EDE0;
  --ink-2: #D3C7B4;
  --muted: #A09380;
  --line: rgb(244 237 224 / .12);
  --line-2: rgb(244 237 224 / .24);
  --accent: #FF5B24;
  --accent-text: #FF7A4D;
  --accent-ink: #1A0E06;
  --sun: #FFB627;
  --proof: #4FD4B9;
  --btn-bg: #FF5B24;
  --btn-ink: #1A0E06;
  --btn-hover: #FFB627;
  --btn-hover-ink: #1A0E06;
  --fill: #FF5B24;
  --fill-ink: #1A0E06;
  --pr-bg: #FF5B24;
  --pr-ink: #1A0E06;
  --shadow: 0 40px 120px -50px rgb(0 0 0 / .75);
  --grain-opacity: .07;
  color-scheme: dark;

  --font: "Geologica", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --header-h: 72px;
  --fs-small: .875rem;
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-3: clamp(1.4rem, 1.15rem + .9vw, 2rem);
  --fs-4: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem);
  --fs-5: clamp(2.6rem, 1.5rem + 4.4vw, 5.6rem);
  --fs-hero: clamp(2.6rem, 1rem + 6.1vw, 6rem);
}
:root[data-theme="light"] {
  --bg: #F0DBA6;
  --bg-2: #F6E7BF;
  --bg-3: #E8CD8E;
  --ink: #1B150E;
  --ink-2: #3D3223;
  --muted: #65553E;
  --line: rgb(27 21 14 / .14);
  --line-2: rgb(27 21 14 / .28);
  --accent: #E4490F;
  --accent-text: #A8320A;
  --accent-ink: #1B150E;
  --sun: #F5A300;
  --proof: #0A6B5C;
  --btn-bg: #1B150E;
  --btn-ink: #F6E7BF;
  --btn-hover: #E4490F;
  --btn-hover-ink: #1B150E;
  --fill: #F5A300;
  --fill-ink: #1B150E;
  --pr-bg: #1B150E;
  --pr-ink: #F6E7BF;
  --shadow: 0 40px 100px -50px rgb(90 55 0 / .45);
  --grain-opacity: .1;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  font-variation-settings: "SHRP" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 620; line-height: 1.04; letter-spacing: -.03em; font-variation-settings: "SHRP" 60; text-wrap: balance; }
p { text-wrap: pretty; }
code { font-family: var(--mono); font-size: .88em; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.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; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 18px; background: var(--ink); color: var(--bg); border-radius: 12px; font-weight: 600; text-decoration: none; transition: top .3s var(--ease-out); }
.skip:focus { top: 16px; }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  transition: transform .6s var(--ease-out), background-color .4s, box-shadow .4s;
}
.site-header.is-scrolled {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.is-hidden { transform: translateY(-105%); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand .mark { width: 34px; height: 34px; transition: transform .6s var(--ease-out); }
.brand:hover .mark { transform: rotate(-8deg) scale(1.06); }
.brand-word { font-size: 1.3rem; font-weight: 640; letter-spacing: -.035em; font-variation-settings: "SHRP" 80; }
.mark-one { fill: var(--accent); transform-box: fill-box; transform-origin: 50% 50%; transition: transform .6s var(--ease-out); }
.brand:hover .mark-one { transform: translateX(-10%) scaleY(1.08); }

.nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .3s, background-color .3s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 9px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header-tools { display: flex; align-items: center; gap: 8px; }
.lang-switch, .theme-toggle, .menu-toggle {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: box-shadow .3s, background-color .3s, transform .3s var(--ease-out);
}
.lang-switch { padding: 0 14px; }
.lang-switch:hover, .theme-toggle:hover, .menu-toggle:hover { box-shadow: inset 0 0 0 1px var(--accent); background: var(--bg-2); }
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle .icon { grid-area: 1 / 1; width: 20px; height: 20px; transition: transform .6s var(--ease-out), opacity .4s; }
:root[data-theme="dark"] .icon-sun, :root:not([data-theme]) .icon-sun { transform: translateY(120%) rotate(90deg); opacity: 0; }
:root[data-theme="light"] .icon-moon { transform: translateY(-120%) rotate(-90deg); opacity: 0; }
.menu-toggle { display: none; }
.menu-bars { display: grid; gap: 6px; width: 18px; }
.menu-bars i { display: block; height: 1.8px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease-out); }
.menu-open .menu-bars i:first-child { transform: translateY(3.9px) rotate(45deg); }
.menu-open .menu-bars i:last-child { transform: translateY(-3.9px) rotate(-45deg); }

/* ---------- buttons & links ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 52px;
  padding: 0 1.5em;
  border-radius: 999px;
  border: 0;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: color .35s var(--ease-out), box-shadow .35s, translate .5s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: translateY(102%);
  transition: transform .55s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn .icon { transition: transform .5s var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-primary::before { background: var(--btn-hover); }
.btn-primary:hover { color: var(--btn-hover-ink); }
.btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-small { min-height: 46px; padding: 0 1.2em; font-size: .95rem; background: var(--ink); color: var(--bg); }
.btn-small::before { background: var(--demo, var(--accent)); }
.btn-small:hover { color: #140F09; }
.btn-small:hover .icon { transform: translate(3px, -3px); }
.btn-lg { min-height: 64px; padding: 0 2em; font-size: 1.125rem; }
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;
  transition: background-size .45s var(--ease-out), color .3s;
}
.text-link:hover { color: var(--ink); background-size: 0 1px; background-position: 100% calc(100% - 10px); }

/* ---------- reveal system ---------- */
.js [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 1s var(--ease-out) var(--d, 0s), translate 1.1s var(--ease-out) var(--d, 0s), clip-path 1.2s var(--ease-out) var(--d, 0s);
}
.js [data-reveal="rise"] { translate: 0 80px; }
.js [data-reveal="mask"] { opacity: 1; translate: none; }
.mask-in { display: block; }
.js [data-reveal="mask"] .mask-in { clip-path: inset(0 0 100% 0); translate: 0 36%; transition: clip-path 1.1s var(--ease-out) var(--d, 0s), translate 1.1s var(--ease-out) var(--d, 0s); }
.js [data-reveal="mask"].in .mask-in { clip-path: inset(-10% 0 -20% 0); translate: 0 0; }
.js [data-reveal="door"] { opacity: 1; translate: none; }
.js [data-reveal].in { opacity: 1; translate: none; clip-path: inset(0 0 -10% 0); }

/* ---------- hero ---------- */
.hero { padding-top: calc(var(--header-h) + clamp(40px, 9vh, 112px)); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 36px; align-items: end; }
.hero-title { grid-column: 1 / -1; font-size: var(--fs-hero); font-weight: 640; line-height: .98; letter-spacing: -.045em; }
.hero-title .ln { display: block; transition: font-variation-settings 1.6s var(--ease-out); }
.hero-title .ln-1 { font-variation-settings: "SHRP" 0; }
.hero-title .ln-2 { font-variation-settings: "SHRP" 50; }
.hero-title .ln-3 { font-variation-settings: "SHRP" 100; }
.js .hero-title .ln { font-variation-settings: "SHRP" 0; }
.js.is-loaded .hero-title .ln-2 { font-variation-settings: "SHRP" 50; transition-delay: 1s; }
.js.is-loaded .hero-title .ln-3 { font-variation-settings: "SHRP" 100; transition-delay: 1.3s; }
.word { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .06em; }
.word-in { display: inline-block; }
.js .word-in { translate: 0 108%; rotate: 4deg; transform-origin: 0 100%; transition: translate 1.15s var(--ease-out) var(--d, 0s), rotate 1.15s var(--ease-out) var(--d, 0s); }
.js.is-loaded .word-in { translate: 0 0; rotate: 0deg; }
.hero-lead { grid-column: 1 / span 6; font-size: var(--fs-lead); color: var(--ink-2); max-width: 46ch; }
.hero-actions { grid-column: 8 / -1; justify-self: end; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- threshold panel ---------- */
.threshold { margin-top: clamp(48px, 7vw, 96px); --pos: 56%; }
.ts-frame { position: relative; border-radius: clamp(16px, 2vw, 26px); background: var(--bg-2); box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.ts-chrome { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 48px; padding: 0 14px 0 16px; border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.ts-url { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: var(--bg-3); color: var(--ink-2); font-family: var(--mono); font-size: .78rem; }
.ts-url::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--proof); box-shadow: 0 0 0 3px color-mix(in oklab, var(--proof) 25%, transparent); }
.ts-hint { display: inline-flex; align-items: center; gap: 8px; transition: opacity .6s; }
.ts-hint::before { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; animation: hint 2.4s var(--ease-io) infinite; }
.threshold.is-touched .ts-hint { opacity: 0; }
.ts-states { display: inline-flex; gap: 6px; }
.ts-state { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .4s, color .4s, box-shadow .4s; }
.ts-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.ts-state.is-before::before { background: var(--accent); }
.ts-state.is-after::before { background: var(--proof); }
.threshold.side-before .ts-state.is-before, .threshold.side-after .ts-state.is-after { background: var(--bg-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }

.ts-stage { position: relative; aspect-ratio: 16 / 8.4; container-type: inline-size; overflow: hidden; user-select: none; -webkit-user-select: none; }
.ts-layer { position: absolute; inset: 0; }
.ts-after { clip-path: inset(0 0 0 var(--pos)); }
.ts-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 3; pointer-events: none; }
.ts-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--accent); box-shadow: 0 0 32px 2px color-mix(in oklab, var(--accent) 65%, transparent); }
.ts-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  height: 78px;
  translate: -50% -50%;
  background: var(--accent);
  clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%);
  transition: scale .4s var(--ease-out);
}
.ts-handle::after { content: ""; position: absolute; inset: 30% 42%; border-inline: 2px solid rgb(26 14 6 / .55); }
.ts-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
.ts-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 400px; }
.ts-range::-moz-range-thumb { width: 2px; height: 400px; border: 0; }
.ts-stage:has(.ts-range:focus-visible) .ts-handle { scale: 1.2; outline: 3px solid var(--ink); }
.ts-stage:hover .ts-handle, .threshold.is-dragging .ts-handle { scale: 1.12; }
.ts-caption { margin-top: 16px; color: var(--muted); font-size: var(--fs-small); max-width: 70ch; }

/* The mock is "someone's shop", so it keeps its own palette in both themes. */
.mock { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: 2.4cqw; padding: 2.2cqw 3.4cqw 2cqw; font-size: 1.22cqw; line-height: 1.35; }
.mock--before { background: #DAD6CE; color: #4A4843; font-family: Georgia, "Times New Roman", serif; }
.mock--after { background: #FBF3E4; color: #23190F; font-family: var(--font); }
.mock-nav { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.2cqw; }
.mock--before .mock-nav { border-bottom: 1px solid #B9B4AA; }
.mock--after .mock-nav { border-bottom: 1px solid #EADBC2; }
.mock-logo { font-weight: 700; font-size: 1.5em; letter-spacing: -.02em; }
.mock--before .mock-logo { font-style: italic; color: #2B4E8C; }
.mock-links { display: flex; gap: 2.4cqw; }
.mock--before .mock-links span { color: #2B4E8C; text-decoration: underline; }
.mock-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3cqw; align-items: center; }
.mock-copy { display: grid; gap: 1.2cqw; justify-items: start; }
.mock-h { position: relative; font-size: 2.9em; line-height: 1.02; }
.mock--before .mock-h { font-weight: 400; color: #54514B; }
.mock--after .mock-h { font-weight: 660; letter-spacing: -.035em; font-variation-settings: "SHRP" 100; }
.mock-sub { max-width: 32ch; }
.mock--before .mock-sub { color: #6A6760; }
.mock--after .mock-sub { color: #5A4A35; }
.mock-btn { display: inline-block; padding: .8em 1.5em; }
.mock--before .mock-btn { background: #A6ABB2; color: #EDEDED; border-radius: 2px; }
.mock--after .mock-btn { background: #23190F; color: #FBF3E4; border-radius: 999px; font-weight: 600; }
.mock-img { position: relative; display: grid; place-items: center; overflow: visible; }
.mock-img--hero { height: 15cqw; border-radius: 1.2cqw; }
.mock--before .mock-img { background: #C7C2B8; }
.mock--after .mock-img { background: linear-gradient(140deg, #F6D9B8, #F0C48F); }
.mock-broken { font-family: var(--mono); font-size: .8em; color: #8A857B; display: inline-flex; align-items: center; gap: .5em; }
.mock-broken::before { content: ""; width: 1.2em; height: 1em; border: 1.5px solid #8A857B; border-radius: 2px; background: linear-gradient(135deg, transparent 45%, #8A857B 46%, #8A857B 54%, transparent 55%); }
.bottle { position: absolute; bottom: 14%; width: 11%; border-radius: 40% 40% 14% 14% / 16% 16% 8% 8%; box-shadow: inset -.5cqw 0 0 rgb(0 0 0 / .08); }
.bottle.b1 { left: 24%; height: 58%; background: #E0634A; }
.bottle.b2 { left: 44%; height: 72%; background: #2F6F5E; width: 13%; }
.bottle.b3 { left: 64%; height: 48%; background: #F2E6CF; }
.bottle::before { content: ""; position: absolute; left: 30%; right: 30%; top: -14%; height: 16%; border-radius: 20% 20% 0 0; background: #23190F; }
.mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; align-content: start; }
.mock-card { display: grid; gap: .6cqw; }
.mock-card .mock-img { height: 6.4cqw; border-radius: .8cqw; }
.mock--after .mock-card:nth-child(2) .mock-img { background: linear-gradient(140deg, #DCE6CF, #BFD3AE); }
.mock--after .mock-card:nth-child(3) .mock-img { background: linear-gradient(140deg, #F4E3B0, #EBCD7D); }
.jar { width: 26%; height: 52%; border-radius: 18%; background: #23190F; opacity: .82; }
.jar.j2 { background: #2F6F5E; }
.jar.j3 { background: #E0634A; }
.mock-name { font-weight: 600; }
.mock-price { position: relative; justify-self: start; }
.mock--before .mock-price { color: #8B8780; font-style: italic; }
.mock--after .mock-price { font-weight: 700; color: #B2380C; }
.mock-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 1cqw; font-size: .95em; }
.mock--before .mock-foot { border-top: 1px solid #B9B4AA; }
.mock--after .mock-foot { border-top: 1px solid #EADBC2; }
.mock-mail { position: relative; font-family: var(--mono); font-size: .92em; }
.mock--before .mock-mail { color: #2B4E8C; text-decoration: underline; }

.pin {
  position: absolute;
  z-index: 2;
  display: inline-block;
  text-align: left;
  padding: .55em .9em;
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--font);
  font-size: max(10px, .92cqw);
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 .6cqw 1.6cqw -.4cqw rgb(0 0 0 / .35);
  transition: scale .5s var(--ease-out), opacity .4s;
}
.pin code { font-size: 1em; }
.pin-bad { background: #FF5B24; color: #1A0E06; }
.pin-bad::before { content: ""; display: inline-block; margin-right: .5em; vertical-align: .05em; width: .6em; height: .6em; border-radius: 50%; background: #1A0E06; box-shadow: 0 0 0 0 rgb(26 14 6 / .6); animation: pulse 1.8s ease-out infinite; }
.pin-good { background: #0A6B5C; color: #EAFBF6; }
.pin-good::before { content: ""; display: inline-block; margin-right: .6em; vertical-align: .25em; width: .75em; height: .45em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; }
.pin.is-hidden { scale: .6; opacity: 0; }
.pin--h { left: 0; bottom: calc(100% + .7em); }
.pin--img { left: 50%; top: 50%; translate: -50% -50%; }
.pin--price { left: calc(100% + .8em); top: 50%; translate: 0 -50%; }
.pin--mail { right: 0; bottom: calc(100% + .7em); }

@container (max-width: 640px) {
  .mock { font-size: 2.6cqw; gap: 4cqw; padding: 4cqw 5cqw; grid-template-rows: auto auto auto 1fr auto; }
  .mock-links span:not(:first-child) { display: none; }
  .mock-hero { grid-template-columns: 1fr; gap: 4cqw; padding-top: 7cqw; }
  .mock-img--hero { height: 30cqw; }
  .mock-grid { grid-template-columns: repeat(2, 1fr); gap: 3cqw; }
  .mock-card:nth-child(3) { display: none; }
  .mock-card .mock-img { height: 16cqw; }
  .pin { font-size: max(10px, 2.3cqw); }
  .pin--price { left: 0; top: auto; bottom: calc(100% + 16cqw + .6em); translate: 0 0; }
  /* Keep the image pins off the centre line, where the handle rests. */
  .ts-before .pin--img, .ts-after .pin--img { top: 9%; translate: 0 0; max-width: 40%; white-space: normal; }
  .ts-before .pin--img { left: 4%; }
  .ts-after .pin--img { left: auto; right: 4%; }
}

/* ---------- ticker ---------- */
.ticker { margin-top: clamp(64px, 9vw, 128px); border-block: 1px solid var(--line); overflow: hidden; padding-block: 22px; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-list li { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem); color: var(--ink-2); }
.ticker-list li::before { content: ""; flex: none; width: 9px; height: 18px; background: var(--accent); clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%); }

/* ---------- manifesto ---------- */
.manifesto { padding-block: clamp(110px, 15vw, 220px); }
.manifesto-text { font-size: clamp(1.9rem, 1rem + 3.3vw, 4.1rem); font-weight: 560; line-height: 1.12; letter-spacing: -.03em; max-width: 26ch; font-variation-settings: "SHRP" 40; }
.manifesto-text .w { opacity: .16; transition: opacity .35s linear, font-variation-settings .6s; }
.manifesto-text .w.on { opacity: 1; font-variation-settings: "SHRP" 100; }

/* ---------- shared section heads ---------- */
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head .h-section { grid-column: 1 / span 7; }
.section-head .section-lead { grid-column: 8 / -1; }
.h-section { font-size: var(--fs-4); max-width: 18ch; }
.section-lead { color: var(--ink-2); font-size: var(--fs-lead); max-width: 48ch; }

/* ---------- proof ---------- */
.proof { padding-bottom: clamp(110px, 13vw, 190px); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 14px; padding: 30px 24px 0 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat dd { font-size: clamp(3.4rem, 1.6rem + 5.4vw, 7.4rem); font-weight: 600; line-height: .86; letter-spacing: -.055em; font-variant-numeric: tabular-nums; font-variation-settings: "SHRP" 100; }
.stat dt { color: var(--muted); max-width: 24ch; }

/* ---------- method ---------- */
.method { margin-inline: clamp(8px, 1.4vw, 20px); padding-block: clamp(96px, 12vw, 180px); background: var(--bg-2); border-radius: clamp(24px, 3.5vw, 48px); box-shadow: 0 0 0 1px var(--line); }
.method-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); }
.method-head { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; display: grid; gap: 22px; }
.method-rail { margin-top: 20px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.method-rail span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .5s var(--ease-out); }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: clamp(56px, 7vw, 96px) minmax(0, 1fr); column-gap: 20px; row-gap: 10px; padding-block: clamp(32px, 4vw, 52px); border-top: 1px solid var(--line); transition: opacity .6s var(--ease-out); }
.js .step { opacity: .32; }
.js .step.is-active { opacity: 1; }
.step-n { grid-row: span 2; font-size: var(--fs-3); font-weight: 500; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.step h3 { font-size: var(--fs-3); transition: font-variation-settings .8s var(--ease-out); }
.step.is-active h3 { font-variation-settings: "SHRP" 100; }
.step p { color: var(--ink-2); max-width: 46ch; }

/* ---------- work ---------- */
.work { padding-block: clamp(110px, 13vw, 190px); }
.work-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 3vw, 36px); }
.work-card { position: sticky; top: calc(var(--header-h) + 20px + var(--i) * 14px); }
.work-inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 3vw, 52px);
  padding: clamp(14px, 1.6vw, 24px);
  border-radius: clamp(20px, 2.4vw, 32px);
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
  transform-origin: 50% 0;
  scale: var(--s, 1);
  filter: brightness(var(--b, 1));
}
.work-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--demo) 22%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .5s;
}
.work-inner:hover::before { opacity: 1; }
.work-shot { display: flex; flex-direction: column; border-radius: clamp(12px, 1.4vw, 18px); overflow: hidden; background: var(--bg-3); box-shadow: 0 0 0 1px var(--line); aspect-ratio: 16 / 10.6; }
.shot-chrome { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: .74rem; color: var(--muted); font-family: var(--mono); overflow: hidden; white-space: nowrap; }
.shot-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none; }
.shot-chrome span { margin-left: 10px; overflow: hidden; text-overflow: ellipsis; }
.work-shot img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 0; transition: scale 1.4s var(--ease-out), object-position 3.5s var(--ease-out); }
.work-inner:hover .work-shot img { scale: 1.035; }
.work-body { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(4px, 1vw, 16px) clamp(4px, 1vw, 12px); }
.work-sector { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: .95rem; }
.work-sector::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--demo); box-shadow: 0 0 0 4px color-mix(in oklab, var(--demo) 22%, transparent); }
.work-name { margin-top: 14px; font-size: var(--fs-4); font-variation-settings: "SHRP" 100; }
.work-facts { display: grid; gap: 18px; }
.work-facts dt { font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.work-facts dd { color: var(--ink-2); max-width: 44ch; }
.work-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.work-note { margin-top: clamp(36px, 4vw, 56px); padding-left: 18px; border-left: 3px solid var(--accent); color: var(--ink-2); max-width: 70ch; }

/* ---------- services ---------- */
.services { padding-block: clamp(110px, 13vw, 190px); border-top: 1px solid var(--line); }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 24px; align-items: center; padding-block: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.svc::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -.5); z-index: -1; border-radius: 20px; background: var(--bg-2); opacity: 0; scale: 1 .5; transition: opacity .45s var(--ease-out), scale .55s var(--ease-out); }
.svc:hover::before { opacity: 1; scale: 1 1; }
.svc-title { display: flex; align-items: center; gap: 0; font-size: var(--fs-3); transition: gap .5s var(--ease-out), font-variation-settings .5s; }
.svc-title::before { content: ""; flex: none; width: 0; height: .7em; background: var(--accent); clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%); transition: width .5s var(--ease-out); }
.svc:hover .svc-title { gap: 14px; font-variation-settings: "SHRP" 100; }
.svc:hover .svc-title::before { width: .45em; }
.svc-desc { color: var(--ink-2); max-width: 52ch; font-size: var(--fs-lead); }

/* ---------- principles ---------- */
.principles { margin-inline: clamp(8px, 1.4vw, 20px); padding-block: clamp(96px, 12vw, 180px); background: var(--pr-bg); color: var(--pr-ink); border-radius: clamp(24px, 3.5vw, 48px); }
.principles ::selection { background: var(--pr-ink); color: var(--pr-bg); }
.pr-list { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; }
.pr-list li { padding-block: clamp(18px, 2.4vw, 30px); border-top: 1.5px solid color-mix(in oklab, var(--pr-ink) 22%, transparent); font-size: clamp(1.5rem, .95rem + 2.3vw, 3.2rem); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; font-variation-settings: "SHRP" 100; }
.pr-list .mask-in { max-width: 30ch; transition: clip-path 1.1s var(--ease-out) var(--d, 0s), translate .6s var(--ease-out); }
.pr-list li:hover .mask-in { translate: 14px 0; }
.pr-list li:hover { translate: 14px 0; }

/* ---------- cta ---------- */
.cta { padding-block: clamp(120px, 16vw, 240px); text-align: center; }
.cta-inner { display: grid; justify-items: center; }
.cta-mark { width: clamp(96px, 11vw, 150px); color: var(--ink); margin-bottom: 36px; }
.cta-mark .mark-one { transition: transform 1.4s var(--ease-out) .25s; }
.js .cta-mark:not(.in) .mark-one { transform: translateY(60%) scaleY(.1); }
.cta-mark .mark-two { transition: opacity 1s var(--ease-out); }
.js .cta-mark:not(.in) .mark-two { opacity: .15; }
.cta-title { font-size: var(--fs-5); max-width: 13ch; font-variation-settings: "SHRP" 100; }
.cta-lead { margin: 26px 0 40px; color: var(--ink-2); font-size: var(--fs-lead); max-width: 42ch; }

/* ---------- footer ---------- */
.site-footer { padding-top: 64px; border-top: 1px solid var(--line); overflow: hidden; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 20px 40px; flex-wrap: wrap; }
.footer-line { font-size: var(--fs-lead); font-weight: 500; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink-2); text-decoration: none; transition: color .3s; }
.footer-links a:hover { color: var(--accent-text); }
.footer-word { margin-top: clamp(28px, 4vw, 56px); font-size: clamp(4.6rem, 21.5vw, 21rem); font-weight: 700; line-height: .78; letter-spacing: -.065em; white-space: nowrap; user-select: none; font-variation-settings: "SHRP" 0; }
.footer-word .ch { display: inline-block; transition: font-variation-settings .6s var(--ease-out), color .4s, translate .6s var(--ease-out); }
.footer-word .ch:hover { font-variation-settings: "SHRP" 100; color: var(--accent); translate: 0 -4%; }
.js .footer-word .ch { translate: 0 30%; opacity: 0; transition: translate 1.1s var(--ease-out) var(--d, 0s), opacity .8s var(--ease-out) var(--d, 0s), font-variation-settings .6s var(--ease-out), color .4s; }
.js .footer-word.in .ch { translate: 0 0; opacity: 1; }
.footer-bottom { display: flex; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; padding-block: 26px 34px; margin-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); }
.footer-bottom a { color: var(--ink-2); }

/* ---------- contact (link in bio) ---------- */
.page-contact { min-height: 100svh; display: flex; flex-direction: column; }
.lb-glow { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lb-glow i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .22; }
.lb-glow i:first-child { background: var(--accent); left: -25vmax; top: -30vmax; animation: drift 22s var(--ease-io) infinite alternate; }
.lb-glow i:last-child { background: var(--sun); right: -30vmax; bottom: -35vmax; animation: drift 26s var(--ease-io) infinite alternate-reverse; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding-block: 18px; }
.lb-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); text-decoration: none; font-weight: 500; font-size: .95rem; transition: box-shadow .3s, background-color .3s; }
.lb-back .icon { rotate: 180deg; transition: translate .5s var(--ease-out); }
.lb-back:hover { box-shadow: inset 0 0 0 1px var(--accent); background: var(--bg-2); }
.lb-back:hover .icon { translate: -4px 0; }
.lb { flex: 1; display: flex; justify-content: center; padding: 20px var(--gutter) 56px; }
.lb-card { width: min(100%, 560px); }
.lb-avatar { position: relative; isolation: isolate; width: 112px; height: 112px; margin: 8px auto 22px; border-radius: 32px; color: #F4EDE0; display: grid; place-items: center; animation: pop 1s var(--ease-out) both; }
.lb-avatar::before { content: ""; position: absolute; inset: -4px; z-index: -2; border-radius: 36px; background: conic-gradient(from var(--a, 0deg), var(--accent), var(--sun), var(--proof), var(--accent)); animation: spin 6s linear infinite; }
.lb-avatar::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 32px; background: #15110C; }
.lb-avatar .mark { width: 70%; }
.lb-avatar .mark-one { fill: #FF5B24; animation: door 2.4s var(--ease-io) 1s infinite alternate; }
.lb-name { text-align: center; font-size: clamp(2.2rem, 1.8rem + 1.6vw, 2.8rem); font-variation-settings: "SHRP" 100; animation: rise .9s var(--ease-out) .1s both; }
.lb-tag { text-align: center; margin-top: 6px; color: var(--ink-2); font-weight: 500; animation: rise .9s var(--ease-out) .16s both; }
.lb-intro { text-align: center; margin: 14px auto 32px; color: var(--muted); max-width: 42ch; animation: rise .9s var(--ease-out) .22s both; }
.lb-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lb-item { animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + .3s); }
.lb-item--email { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.lb-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 12px 20px 12px 13px;
  border-radius: 22px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none;
  transition: color .35s var(--ease-out), translate .5s var(--ease-out), box-shadow .35s;
}
.lb-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.lb-link:hover { color: var(--fill-ink); translate: 0 -2px; box-shadow: inset 0 0 0 1px transparent, 0 18px 40px -22px color-mix(in oklab, var(--fill) 70%, transparent); }
.lb-link:hover::before { transform: scaleX(1); }
.lb-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--bg-3); transition: background-color .35s, rotate .6s var(--ease-out); }
.lb-icon svg { width: 22px; height: 22px; }
.lb-link:hover .lb-icon { background: rgb(0 0 0 / .12); rotate: -8deg; }
.lb-text { display: grid; gap: 1px; min-width: 0; }
.lb-text strong { font-weight: 600; font-size: 1.05rem; }
.lb-text span { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .35s; }
.lb-link:hover .lb-text span { color: inherit; opacity: .8; }
.lb-arrow { width: 22px; height: 22px; transition: translate .5s var(--ease-out); }
.lb-link:hover .lb-arrow { translate: 3px -3px; }
.lb-link--home:hover .lb-arrow { translate: 4px 0; }
.lb-copy { position: relative; display: grid; place-items: center; width: 78px; min-height: 78px; border: 0; border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .3s, background-color .3s, scale .3s var(--ease-out); }
.lb-copy:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.lb-copy:active { scale: .94; }
.lb-copy svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: scale .4s var(--ease-out), opacity .3s; }
.lb-copy .i-done { scale: .4; opacity: 0; color: var(--proof); }
.lb-copy[data-state="done"] .i-copy { scale: .4; opacity: 0; }
.lb-copy[data-state="done"] .i-done { scale: 1; opacity: 1; }
.lb-toast { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 6px; padding: 6px 12px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: .8rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s, translate .4s var(--ease-out); }
.lb-copy[data-state="done"] .lb-toast { opacity: 1; translate: -50% 0; }
.lb-group { margin: 40px 0 14px; text-align: center; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); animation: rise .9s var(--ease-out) .65s both; }
.lb-links--work { gap: 10px; }
.lb-link--small { grid-template-columns: 20px minmax(0, 1fr) 22px; min-height: 64px; padding: 10px 20px; border-radius: 18px; }
.lb-link--small::before { background: var(--demo, var(--fill)); }
.lb-link--small:hover { color: #140F09; }
.lb-dot { width: 12px; height: 12px; justify-self: center; border-radius: 50%; background: var(--demo, var(--accent)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--demo, var(--accent)) 24%, transparent); transition: background-color .35s, box-shadow .35s; }
.lb-link--small:hover .lb-dot { background: #140F09; box-shadow: 0 0 0 4px rgb(20 15 9 / .15); }
.lb-dot--mark { border-radius: 2px; width: 8px; height: 16px; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%); box-shadow: none; }
.lb-link--home::before { background: var(--fill); }
.lb-link--home:hover { color: var(--fill-ink); }
.lb-link--home:hover .lb-dot { background: currentColor; }
.lb-note { margin-top: 26px; text-align: center; color: var(--muted); font-size: var(--fs-small); animation: rise .9s var(--ease-out) 1s both; }
.lb-foot { padding: 0 var(--gutter) 28px; text-align: center; color: var(--muted); font-size: var(--fs-small); }

/* ---------- 404 ---------- */
.page-nf { min-height: 100svh; display: grid; place-items: center; }
.nf { display: grid; justify-items: start; gap: 22px; padding-block: 64px; max-width: 900px; }
.nf-mark { width: 72px; color: var(--ink); }
.nf-code { font-size: clamp(5rem, 3rem + 10vw, 12rem); font-weight: 700; line-height: .8; letter-spacing: -.06em; color: var(--accent); font-variation-settings: "SHRP" 100; }
.nf-title { font-size: var(--fs-4); }
.nf-title span { display: block; color: var(--muted); }
.nf-text { color: var(--ink-2); }
.nf-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- keyframes ---------- */
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(26 14 6 / .55); } 100% { box-shadow: 0 0 0 .9em rgb(26 14 6 / 0); } }
@keyframes hint { 0%, 100% { translate: -4px 0; } 50% { translate: 6px 0; } }
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
@keyframes pop { from { opacity: 0; scale: .7; rotate: -10deg; } }
@keyframes drift { to { translate: 12vmax 10vmax; scale: 1.15; } }
@keyframes door { 0%, 40% { transform: none; } 100% { transform: translateX(-18%) scaleY(1.06); } }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-lead { grid-column: 1 / span 7; }
  .hero-actions { grid-column: 1 / -1; justify-self: start; }
  .work-inner { grid-template-columns: 1fr; }
  .work-card { position: static; }
  .work-inner { scale: none; filter: none; }
}
@media (max-width: 900px) {
  .menu-toggle { display: inline-grid; }
  .nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: flex-end;
    padding: calc(var(--header-h) + 24px) var(--gutter) 48px;
    background: var(--bg);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .8s var(--ease-io);
  }
  .menu-open .nav { clip-path: inset(0 0 0 0); }
  .menu-open .site-header { background: transparent; box-shadow: none; backdrop-filter: none; }
  .menu-open body { overflow: hidden; }
  .nav ul { flex-direction: column; gap: 4px; width: 100%; }
  .nav a { font-size: clamp(2.2rem, 9vw, 3.4rem); font-weight: 620; letter-spacing: -.035em; color: var(--ink); padding: 6px 0; min-height: 0; translate: 0 40px; opacity: 0; transition: translate .8s var(--ease-out), opacity .6s, color .3s; }
  .nav li:nth-child(2) a { transition-delay: .05s; }
  .nav li:nth-child(3) a { transition-delay: .1s; }
  .nav li:nth-child(4) a { transition-delay: .15s; }
  .menu-open .nav a { translate: 0 0; opacity: 1; }
  .nav a::after { display: none; }
  .section-head .h-section, .section-head .section-lead { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 30px; }
  .method-grid { grid-template-columns: 1fr; }
  .method-head { position: static; }
  .svc { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :root { --header-h: 64px; }
  .brand-word { font-size: 1.15rem; }
  .hero-lead { grid-column: 1 / -1; }
  .hero-actions .btn { flex: 1 1 auto; }
  .ts-stage { aspect-ratio: 4 / 5.2; }
  .ts-hint { display: none; }
  .ts-chrome { padding-inline: 10px; }
  .ts-url { padding-inline: 10px; }
  .stat dd { font-size: clamp(3rem, 16vw, 4.4rem); }
  .work-links { gap: 12px 18px; }
  .lb-link { grid-template-columns: 46px minmax(0, 1fr) 20px; gap: 14px; min-height: 72px; }
  .lb-icon { width: 46px; height: 46px; }
  .lb-copy { width: 72px; min-height: 72px; }
}
@media (max-width: 420px) {
  .lang-switch { padding: 0 10px; }
  .ts-states .ts-state { padding: 4px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .word-in, .js .footer-word .ch { opacity: 1; translate: none; rotate: none; clip-path: none; }
  .js .hero-title .ln-2 { font-variation-settings: "SHRP" 50; }
  .js .hero-title .ln-3 { font-variation-settings: "SHRP" 100; }
  .ticker-track { animation: none; }
  .js .step { opacity: 1; }
  .manifesto-text .w { opacity: 1; }
  .js .cta-mark:not(.in) .mark-one { transform: none; }
  .js .cta-mark:not(.in) .mark-two { opacity: 1; }
}