/* Quiet Glass Studio — portfolio styles. No external resources. */
:root {
  --bg: #F7F8FA;
  --ink: #17191D;
  --ink-2: #626873;          /* secondary text, AA on --bg (measured in QA) */
  --line: rgba(23, 25, 29, 0.08);
  --surface: #FFFFFF;
  --cool: #CCDFFF;
  --lilac: #DDD4F5;
  --warm: #F2E3D7;
  --btn-dark: #252629;
  --plate: #101216;
  --focus: #3D6BFF;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-card: 28px; --r-tile: 24px; --r-pill: 999px;
  --max: 1200px; --text-max: 720px;
  --pad: clamp(20px, 4vw, 40px);
  --dock-h: 64px;
  --dock-gap: 16px;
  --dock-space: calc(var(--dock-h) + var(--dock-gap) * 2 + env(safe-area-inset-bottom, 0px));

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --t-fast: 160ms; --t-mid: 260ms; --t-slow: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; scroll-padding-bottom: var(--dock-space); }
@media (prefers-reduced-motion: no-preference) { html:not(.reduce-motion) { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: clamp(16px, 0.35vw + 15px, 18px); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* the stage: an almost flat matte background with two very faint local light pools */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 82% 12%, rgba(204, 223, 255, 0.38), transparent 60%),
    radial-gradient(50vmax 34vmax at 6% 92%, rgba(242, 227, 215, 0.34), transparent 62%),
    var(--bg);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 1em; height: 1em; flex: none; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--btn-dark); color: #fff; text-decoration: none; transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }

/* ---------- top bar ---------- */
.topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  max-width: none; margin: 0; padding: var(--s5) var(--pad);
}
.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; font-weight: 600; letter-spacing: -0.01em; min-height: 44px; }
.brand-mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), 0 1px 2px rgba(23,25,29,0.08), 0 6px 16px -8px rgba(23,25,29,0.3);
}
.brand-glyph { width: 25px; height: 25px; display: block; }
/* music toggle v2 — owner's Figma 80:1605 «Button-on» / 80:1682 «Button-off» / 80:1695 «Button-on-scroll» (2026-10-19).
   Fixed, so the music can be switched off from anywhere: at the top of the page it sits where the header has it (pill 97 x 36),
   once the page is scrolled it folds into the round 38 x 36 button (the dot stays put, the bars fade out), back at the top it unfolds.
   Off: grey dot, bars at 30 %. On: green dot with the halo, bars at 100 % moving with the track (js/music.js). */
.music-toggle {
  position: fixed; z-index: 45; top: max(28px, calc(env(safe-area-inset-top, 0px) + 8px)); right: var(--pad);
  display: flex; align-items: center; width: 97px; height: 36px; padding: 0 0 0 12px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(255,255,255,0.6); cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  transition: width 0.42s var(--ease), background var(--t-fast) var(--ease);
}
.music-toggle:hover { background: rgba(255,255,255,0.86); }
.music-toggle.is-compact { width: 38px; }
.music-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #A0A6B0; transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.music-toggle[aria-pressed="true"] .music-dot { background: #3BB273; box-shadow: 0 0 0 3px rgba(59,178,115,0.16); }
.music-bars { position: relative; flex: none; display: block; width: 51px; height: 22px; margin-left: 9px; transform-origin: 0 50%;
  transition: opacity 0.24s var(--ease), transform 0.42s var(--ease); }
.music-toggle.is-compact .music-bars { opacity: 0; transform: translateX(-8px) scaleX(0.55); }
.music-bars i { position: absolute; top: 11px; width: 2px; border-radius: 1px; background: #6A7386; opacity: 0.3; transform: translateY(-50%); transition: opacity var(--t-fast) var(--ease); }
.music-toggle[aria-pressed="true"] .music-bars i { opacity: 1; }
.music-bars i:nth-child(1) { left: 0;  height: 10px; }
.music-bars i:nth-child(2) { left: 7px;  height: 18px; }
.music-bars i:nth-child(3) { left: 14px; height: 12px; }
.music-bars i:nth-child(4) { left: 21px; height: 6px; }
.music-bars i:nth-child(5) { left: 28px; height: 9px; }
.music-bars i:nth-child(6) { left: 35px; height: 18px; }
.music-bars i:nth-child(7) { left: 42px; height: 10px; }
.music-bars i:nth-child(8) { left: 49px; height: 6px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); text-decoration: none; font-weight: 600; font-size: 16px;
  border: 0; cursor: pointer; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn-ink { background: var(--btn-dark); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 1px 0 rgba(255,255,255,0.4), 0 10px 24px -12px rgba(23,25,29,0.55); }
.btn-ink:hover { background: #111214; }
.btn-quiet { background: rgba(255,255,255,0.7); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px -12px rgba(23,25,29,0.3); }
.btn-quiet:hover { background: #fff; }
.btn:active { transform: translateY(1px); }
.btn-meta { font-weight: 400; opacity: 0.72; font-size: 14px; }
.btn-chip {
  min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-pill); border: 1px solid var(--line);
  background: rgba(255,255,255,0.55); font-size: 14px; color: var(--ink); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.btn-chip:hover { background: #fff; }
.link-ext { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; min-height: 44px; }
.link-ext:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- hero ---------- */
.hero {
  --hero-inline: max(var(--pad), calc((100% - var(--max)) / 2));
  position: relative; margin: 0; overflow: hidden; overflow: clip;
  padding: clamp(112px, 16vh, 168px) var(--hero-inline) clamp(64px, 10vh, 112px);
  min-height: min(100svh, 940px);
  display: flex; align-items: center;
}
.hero-text { position: relative; z-index: 2; width: 100%; max-width: 700px; }
.eyebrow { font-size: 15px; color: var(--ink-2); margin-bottom: var(--s5); letter-spacing: 0.005em; }
.hero-title {
  font-size: clamp(44px, 6.944vw, 108px); line-height: 0.94; letter-spacing: -0.048em; font-weight: 650;
  margin-bottom: var(--s6); overflow-wrap: anywhere;
}
.h1-line { display: block; }
.lede { font-size: clamp(18px, 0.6vw + 15px, 21px); line-height: 1.5; max-width: min(28em, 44vw); margin-bottom: var(--s3); }
.proof { color: var(--ink-2); max-width: min(30em, 40vw); margin-bottom: var(--s6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ---------- hero video (owner Figma frame 42:88, group "video" 42:572) ---------- */
/* Variant A (default) rebuilds the owner's Figma group in frame pixels: a 1440-px-wide stage anchored to the right edge,
   scaled by --u (1 px at 1440x900). Two nested alpha masks = the two masked Figma groups (outer: blur 240, inner: blur 64),
   inside them the video (Figma FILL = object-fit: cover) with the owner's 15 % olive COLOR tint.
   Variant B (data-mask="b") is the studio's gradient fade from the sprite round. */
.hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; container-type: size; }
.hv-stage {
  /* scale of the owner's 1440x900 frame. Width-driven, anchored top-right: on screens wider than 1440 the block grows
     to the left and down (owner 2026-10-18: «растягивания всего правого блока с видео влево-вниз по диагонали») until the
     video's bottom edge (frame y 758) reaches the hero's bottom, min(100vh, 940px) */
  --u: clamp(0.8px, min(100vw / 1440, min(100vh, 940px) / 758), 1.3px);
  /* narrow desktops (1200-1360 px) slide the stage right so the video stays clear of the headline (contrast) */
  --shift: clamp(0px, (1360px - 100vw) * 0.6, 96px);
  position: absolute; top: 0; left: calc(100% - 1440 * var(--u) + var(--shift)); width: calc(1440 * var(--u)); height: calc(900 * var(--u)); }
@supports (height: 1svh) { .hv-stage { --u: clamp(0.8px, min(100vw / 1440, min(100svh, 940px) / 758), 1.3px); } }
.hv-outer, .hv-inner { position: absolute; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.hv-outer { left: calc(414 * var(--u)); top: calc(-348 * var(--u)); width: calc(1495 * var(--u)); height: calc(1501 * var(--u));
  -webkit-mask-image: var(--hv-mask-outer); mask-image: var(--hv-mask-outer); }
.hv-inner { left: calc(181.136 * var(--u)); top: calc(314 * var(--u)); width: calc(1049.582 * var(--u)); height: calc(839.709 * var(--u));
  -webkit-mask-image: var(--hv-mask-inner); mask-image: var(--hv-mask-inner); }
.hv-media { position: absolute; left: calc(-135.136 * var(--u)); top: calc(11 * var(--u)); width: calc(1034 * var(--u)); height: calc(781 * var(--u)); overflow: hidden; }
.hv-poster, .hv-video, .hv-fx, .hv-tint { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hv-poster, .hv-video { object-fit: cover; max-width: none; }
.hv-video { opacity: 0; transition: opacity 400ms ease; }
.hero-scene.is-playing .hv-video { opacity: 1; }
.hero-scene.video-failed .hv-video { display: none; }
.hv-tint { background: #4A6212; opacity: 0.15; mix-blend-mode: color; }
.hv-media { pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.hv-media.is-over-robot { cursor: pointer; }
/* robot eye glow + "hi" ring: hero-video.js puts them on the tracked eye every video frame,
   leans the glow towards the cursor and blinks it (the beam itself is drawn on the front canvas) */
.hv-glow, .hv-ring { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.hv-glow { width: 5.2%; aspect-ratio: 1; margin: -2.6% 0 0 -2.6%; opacity: 0.5; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 214, 140, 0.95) 0%, rgba(255, 160, 50, 0.5) 20%, rgba(255, 130, 30, 0.12) 44%, rgba(255, 130, 30, 0) 66%); }
/* with Motion off the rAF loop is stopped, so the class carries the "hi" flash */
.hero-scene.is-hi:not(.is-live) .hv-glow { opacity: 1; }
/* click / tap wave from the eye: two warm rings, the second a beat later, each with a soft glow */
.hv-ring { width: 10%; aspect-ratio: 1; margin: -5% 0 0 -5%; }
.hv-ring::before, .hv-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; transform: scale(0.15); opacity: 0;
  box-shadow: 0 0 0 3px rgba(255, 190, 90, 0.95), 0 0 16px 4px rgba(255, 160, 60, 0.55), inset 0 0 14px 2px rgba(255, 170, 70, 0.4); }
.hv-ring.is-on::before { animation: hv-ring 1100ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.hv-ring.is-on::after { animation: hv-ring 1100ms cubic-bezier(0.2, 0.7, 0.3, 1) 180ms forwards; }
@keyframes hv-ring { 0% { transform: scale(0.15); opacity: 1; } 60% { opacity: 0.55; } 100% { transform: scale(2.1); opacity: 0; } }
.hv-rays { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.hv-rays i { position: absolute; top: -30%; width: 7%; height: 150%; border-radius: 50%; filter: blur(18px); opacity: 0.24;
  background: linear-gradient(to bottom, rgba(255, 236, 190, 0) 0%, rgba(255, 236, 190, 0.5) 34%, rgba(255, 236, 190, 0) 82%);
  transform: rotate(34deg); transform-origin: 50% 0; }
.hv-rays i:nth-child(1) { left: 84%; }
.hv-rays i:nth-child(2) { left: 95%; width: 11%; opacity: 0.2; }
.hv-rays i:nth-child(3) { left: 74%; width: 4%; opacity: 0.16; }
.js.motion-ok .hero-scene.is-live .hv-rays i { animation: ray-breathe 11s ease-in-out infinite alternate; }
.js.motion-ok .hero-scene.fx-lite .hv-rays i { animation: none; }   /* weak-device guard, step 1 (hero-video.js) */
.js.motion-ok .hero-scene.is-live .hv-rays i:nth-child(2) { animation-duration: 14s; animation-delay: -5s; }
.js.motion-ok .hero-scene.is-live .hv-rays i:nth-child(3) { animation-duration: 9s; animation-delay: -2s; }
@keyframes ray-breathe { from { opacity: 0.1; } to { opacity: 0.3; } }

/* variant B: studio gradient mask (fade from the text side and the bottom; video bleeds to the right edge) */
.hero-scene[data-mask="b"] {
  -webkit-mask-image: linear-gradient(to right, transparent 45%, #000 68%), linear-gradient(to bottom, #000 84%, transparent 99%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 45%, #000 68%), linear-gradient(to bottom, #000 84%, transparent 99%); mask-composite: intersect; }
.hero-scene[data-mask="b"] .hv-stage { --st-h: 89cqh; left: max(calc(82cqw - var(--st-h) * 0.956), calc(100cqw - var(--st-h) * 1.32353)); top: 13cqh;
  height: var(--st-h); width: calc(var(--st-h) * 1.32353);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%); }
.hero-scene[data-mask="b"] .hv-outer, .hero-scene[data-mask="b"] .hv-inner, .hero-scene[data-mask="b"] .hv-media { inset: 0; left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; }

/* ---------- sections ---------- */
.section { max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: clamp(64px, 10vw, 128px) var(--pad) 0; scroll-margin-top: 8px; }
.section-head { display: grid; gap: var(--s4); margin-bottom: clamp(32px, 4vw, 56px); max-width: var(--text-max); }
.section-title { font-size: clamp(36px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.04em; font-weight: 650; }
.section-intro { color: var(--ink-2); font-size: clamp(16px, 0.4vw + 15px, 19px); }
.kicker { font-size: 14px; color: var(--ink-2); letter-spacing: 0.01em; }

/* plates: game art sits on a dark mat, like a print on a light gallery wall */
.plate {
  position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--plate);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 2px 6px -2px rgba(23,25,29,0.14), 0 34px 60px -34px rgba(23,25,29,0.5);
}
.plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.plate img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- works ---------- */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.work-card { position: relative; display: grid; gap: var(--s5); align-content: start; }
.work-large { grid-column: 1 / -1; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: clamp(24px, 3vw, 40px); }
.work-medium { grid-column: span 6; }
.work-large .work-plate { aspect-ratio: 1600 / 871; }
.work-medium .work-plate { aspect-ratio: 16 / 10; }
.work-plate img { transition: transform 600ms var(--ease); }
.work-info { display: grid; gap: var(--s3); align-content: start; padding: 0 var(--s1); }
.work-large .work-info { padding-bottom: var(--s3); }
.work-title { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 650; }
.work-large .work-title { font-size: clamp(30px, 3vw, 44px); }
.work-link { text-decoration: none; }
.work-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.work-link:focus-visible { outline: none; }
.work-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 6px; }
.work-line { max-width: 34em; }
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pills li { font-size: 14px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,0.75); box-shadow: inset 0 0 0 1px var(--line); }
.work-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; margin-top: var(--s1); }
.work-more .ic { transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) {
  .work-card:hover .work-plate img { transform: scale(1.025); }
  .work-card:hover .work-more .ic { transform: translateX(3px); }
}

.recent {
  --recent-pad: clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 72px); padding: var(--recent-pad); border-radius: calc(var(--r-card) + 8px);
  background: rgba(255,255,255,0.7); box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px -40px rgba(23,25,29,0.3);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 40px); align-items: start;
}
.recent-head { display: grid; gap: var(--s3); }
.recent-h { font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.03em; line-height: 1.1; font-weight: 650; }
.recent-intro { color: var(--ink-2); }
.recent-intro + .recent-intro { margin-top: 1lh; }
.recent-plate { aspect-ratio: 1600 / 871; border-radius: var(--r-tile); }
.recent-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s5); }
.recent-item { display: grid; gap: var(--s2); align-content: start; }
.recent-year { font-weight: 600; color: var(--ink); margin-right: 8px; }
.recent-title { font-size: 20px; letter-spacing: -0.02em; font-weight: 650; }
.recent-role { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
/* case previews — owner's Figma 57:650 (2026-10-18): 242x136 frame, radius 16, shadow 0 12 26 @30 %, the site's cool/warm tint at 20 %
   and a 1 px ring; play mark on video cases. Previews line up across the row (the role text takes the slack). */
.recent-item { position: relative; display: flex; flex-direction: column; gap: 0; }
.recent-item .kicker { padding-bottom: 4px; }
.recent-item .recent-title { padding-bottom: 4px; }  /* item = containing block of .sr-only too (else it escapes the phone swipe row and widens the page); spacing = Figma 4 / 4 / 6 */
.recent-role { flex: 1 0 auto; min-height: calc(3 * 1.5em + 6px); padding-bottom: 6px; }
.recent-preview { position: relative; display: block; width: min(100%, 242px); aspect-ratio: 242 / 136; border-radius: 16px;
  overflow: hidden; isolation: isolate; background: var(--plate); box-shadow: 0 12px 26px rgba(23,25,29,0.3); }
.recent-preview img:first-child { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.recent-preview::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(70% 60% at 30% 25%, rgba(204,223,255,0.11), transparent 70%), radial-gradient(60% 60% at 80% 85%, rgba(242,227,215,0.12), transparent 70%);
  box-shadow: inset 0 0 0 1px var(--line); }
.recent-play { position: absolute; left: 50%; top: 50%; z-index: 1; width: clamp(47px, 19.4%, 60px); height: auto; transform: translate(-50%, -50%);
  transition: transform var(--t-fast) var(--ease); pointer-events: none; }
.recent-item .link-ext { align-self: flex-start; align-items: flex-start; font-size: 18px; line-height: 1.2; padding-top: 4px; }
.recent-item .link-ext .ic { margin-top: 0.1em; }
@media (hover: hover) {
  .recent-item:hover .recent-preview img:first-child { transform: scale(1.035); }
  .recent-item:hover .recent-play { transform: translate(-50%, -50%) scale(1.08); }
  .recent-item:hover .link-ext .ic { transform: translateX(3px); }
}
.recent-dots { display: none; }

/* case studies: inline when there is no JS or no <dialog>, moved into the dialog otherwise */
.cases { display: grid; gap: var(--s8); margin-top: var(--s8); }
.js.has-dialog .cases { display: none; }
.case { display: grid; gap: var(--s5); max-width: 920px; scroll-margin-top: 16px; }
.case-head { display: grid; gap: var(--s3); }
.case-title { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.035em; line-height: 1.05; font-weight: 650; }
.case-lead { font-size: clamp(17px, 0.5vw + 15px, 20px); max-width: 38em; }
.case-cover { aspect-ratio: 1600 / 871; }
.case-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s7); }
.case-sec h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: var(--s2); font-weight: 600; }
.case-sec p + p { margin-top: var(--s3); }
.case-sec ul { display: grid; gap: var(--s2); }
.case-sec li { padding-left: 18px; position: relative; }
.case-sec li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--cool), var(--lilac)); box-shadow: 0 0 0 1px rgba(23,25,29,0.12); }
.case-gallery { display: grid; gap: var(--s4); }
.plate-shot { background: #0B0C0F; }
.plate-shot img { object-fit: contain; height: auto; }
.case-links { display: flex; flex-wrap: wrap; gap: var(--s3); }
.link-back { font-size: 15px; color: var(--ink-2); }
.js.has-dialog .case-back { display: none; }

/* ---------- gallery ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tile { display: grid; gap: var(--s3); }
.tile-art { aspect-ratio: 1 / 1; border-radius: var(--r-tile); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -36px rgba(23,25,29,0.35); }
.tile-placeholder {
  display: grid; place-items: center;
  background:
    radial-gradient(70% 60% at 30% 25%, rgba(204,223,255,0.55), transparent 70%),
    radial-gradient(60% 60% at 80% 85%, rgba(242,227,215,0.6), transparent 70%),
    linear-gradient(#FBFBFD, #F1F3F7);
}
.tile-placeholder span { font-size: clamp(40px, 5vw, 72px); font-weight: 650; letter-spacing: -0.04em; color: rgba(23,25,29,0.12); }
.tile-cap { display: grid; gap: 2px; padding: 0 var(--s1); }
.tile-title { font-size: 18px; letter-spacing: -0.015em; font-weight: 650; }
.tile-label, .tile-status { font-size: 14px; color: var(--ink-2); }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.about-id { position: sticky; top: 32px; display: grid; gap: var(--s3); justify-items: start; }
.monogram {
  width: clamp(112px, 12vw, 168px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--s3);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.98), rgba(255,255,255,0.45) 38%, rgba(221,212,245,0.45) 70%, rgba(150,162,190,0.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), inset 0 -10px 24px rgba(204,223,255,0.7), 0 24px 40px -22px rgba(23,25,29,0.4);
}
.monogram span { font-size: clamp(34px, 3.4vw, 48px); font-weight: 650; letter-spacing: -0.02em; color: rgba(23,25,29,0.8); }
.avatar {
  width: clamp(112px, 12vw, 168px); aspect-ratio: 1; border-radius: 50%; padding: 2px; margin-bottom: var(--s4);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.98), rgba(255,255,255,0.45) 38%, rgba(221,212,245,0.45) 70%, rgba(150,162,190,0.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), 0 24px 40px -22px rgba(23,25,29,0.45);
}
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #04050A; }
.about-name { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.about-role { color: var(--ink-2); }
.about-main { display: grid; gap: var(--s5); max-width: 760px; }
.about-intro { font-size: clamp(19px, 0.8vw + 14px, 24px); line-height: 1.45; letter-spacing: -0.01em; }
.about-ai {
  padding: var(--s4) var(--s5); border-radius: 20px; font-size: 16px;
  background: linear-gradient(120deg, rgba(204,223,255,0.45), rgba(221,212,245,0.4) 50%, rgba(242,227,215,0.45));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8), inset 0 0 0 2px var(--line);
}
.sub-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); font-weight: 600; margin-top: var(--s5); }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.principle { padding: var(--s5); border-radius: var(--r-tile); background: rgba(255,255,255,0.75); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: var(--s2); align-content: start; }
.principle-n { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.principle h4 { font-size: 18px; letter-spacing: -0.015em; line-height: 1.25; font-weight: 650; }
.principle p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.exp { display: grid; border-top: 1px solid var(--line); }
.exp-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.exp-years { color: var(--ink-2); font-variant-numeric: tabular-nums; grid-row: span 2; }
.exp-role { color: var(--ink-2); }
.exp-note { font-size: 15px; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips li { padding: 7px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,0.75); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.about-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); color: var(--ink-2); font-size: 15px; }
.sub-small { margin-top: 0; margin-bottom: var(--s2); }

/* ---------- contact ---------- */
.contact { padding-bottom: var(--s9); }
.contact-lead { font-size: clamp(30px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 650; max-width: 14em; margin-bottom: var(--s6); }
.contact-email { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-bottom: var(--s5); }
.email-link { font-size: clamp(20px, 1.6vw + 12px, 30px); font-weight: 600; letter-spacing: -0.02em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.copy-status { flex-basis: 100%; font-size: 14px; color: var(--ink-2); min-height: 1.5em; }
.contact-links { display: flex; flex-wrap: wrap; gap: var(--s3); }

.footer {
  max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: var(--s6) var(--pad) calc(var(--dock-space) + var(--s5));
  border-top: 1px solid var(--line); display: grid; gap: var(--s2); font-size: 14px; color: var(--ink-2);
}

/* ---------- dock: matte glass capsule ---------- */
.dock {
  position: fixed; z-index: 50; left: 50%; bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); max-width: calc(100vw - 24px);
  padding: 6px; border-radius: var(--r-pill);
  background: rgba(244, 245, 248, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(255,255,255,0.55), inset 0 -1px 0 rgba(23,25,29,0.05),
    0 0 0 1px rgba(23,25,29,0.06), 0 12px 32px -12px rgba(23,25,29,0.32), 0 2px 6px -2px rgba(23,25,29,0.12);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dock { background: rgba(242, 244, 247, 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7); }
}
.dock-list { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; }
.dock-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 44px; padding: 0 22px;
  border-radius: var(--r-pill); text-decoration: none; font-weight: 550; font-size: 16px; color: #2A2D33; white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-mid) var(--ease);
}
.dock-link:hover { color: var(--ink); }
.dock-link[aria-current="location"]:not(.dock-cta) { color: var(--ink); }
.no-js .dock-link[aria-current="location"]:not(.dock-cta), .dock.no-indicator .dock-link[aria-current="location"]:not(.dock-cta) { background: rgba(23,25,29,0.075); }
.dock-cta {
  margin-left: 4px; background: var(--btn-dark); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 16px -6px rgba(23,25,29,0.6);
}
.dock-cta:hover { color: #fff; background: #131416; }
.dock-cta[aria-current="location"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 0 0 3px rgba(204,223,255,0.9), 0 6px 16px -6px rgba(23,25,29,0.6); }
.dock-indicator {
  position: absolute; z-index: 0; top: 6px; left: 0; height: 52px; width: 0; border-radius: var(--r-pill);
  background: rgba(23,25,29,0.075); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  opacity: 0; transform: translateX(0); pointer-events: none;
  transition: transform var(--t-mid) var(--ease), width var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
.dock-indicator.is-on { opacity: 1; }
.dock-link:focus-visible { outline-offset: -2px; }


/* ---------- proof strip ---------- */
.proof-strip { max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.proof-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-item { display: grid; gap: 4px; padding: var(--s5) var(--s5) var(--s5) 0; }
.proof-item + .proof-item { padding-left: var(--s5); border-left: 1px solid var(--line); }
.proof-value { font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -0.04em; font-weight: 650; }
.proof-label { font-size: 15px; color: var(--ink-2); }

/* ---------- works: flipped large card, AI pipeline card, concept card ---------- */
.work-large.is-flip { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.work-large.is-flip .work-plate { order: 2; }
.work-large.is-flip .work-info { order: 1; }
.kicker-tag { display: inline-flex; justify-self: start; padding: 4px 12px; border-radius: var(--r-pill); color: var(--ink); background: linear-gradient(120deg, rgba(204,223,255,0.7), rgba(221,212,245,0.7) 55%, rgba(242,227,215,0.75)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8); }
.pipeline-card {
  position: relative; margin-top: clamp(40px, 5vw, 72px); padding: clamp(24px, 3vw, 44px); border-radius: calc(var(--r-card) + 8px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3.5vw, 56px); align-items: center;
  background:
    radial-gradient(60% 80% at 92% 10%, rgba(204,223,255,0.55), transparent 70%),
    radial-gradient(50% 70% at 70% 100%, rgba(242,227,215,0.55), transparent 70%),
    rgba(255,255,255,0.78);
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px -40px rgba(23,25,29,0.3);
}
.pipeline-info { display: grid; gap: var(--s3); align-content: start; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); counter-reset: none; }
.step { position: relative; display: grid; gap: 6px; align-content: start; padding: var(--s4); border-radius: 20px; background: rgba(255,255,255,0.72); box-shadow: inset 0 0 0 1px var(--line); }
.step-n { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.step-h { font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.step-p { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.steps-visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps-visual .step {
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,255,255,0.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.7), 0 0 0 1px var(--line), 0 18px 34px -24px rgba(23,25,29,0.45);
}
.steps-visual .step:nth-child(odd)::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--s3) * -1); width: var(--s3); height: 1px; background: rgba(23,25,29,0.18);
}
.steps-visual .step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff, rgba(221,212,245,0.8) 70%, rgba(204,223,255,0.9)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), 0 2px 6px -2px rgba(23,25,29,0.25); }
.pipeline-card .work-link::after { border-radius: calc(var(--r-card) + 8px); }
.concepts { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: var(--s5); }
.work-compact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 3vw, 40px); }
.work-compact .work-plate { aspect-ratio: 16 / 9; }
.case-sec-wide { grid-column: 1 / -1; }
.case-sec .step { padding: var(--s4); }
.case-sec .step::before { content: none; }

/* ---------- about additions ---------- */
.about-origin { color: var(--ink-2); }
.principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s3); }
.note-card { padding: var(--s5); border-radius: var(--r-tile); background: linear-gradient(150deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: var(--s2); align-content: start; }
.note-card h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); font-weight: 600; }
.note-card p { font-size: 16px; }
.about-block { margin-top: clamp(48px, 6vw, 88px); }
.block-title { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.03em; line-height: 1.1; font-weight: 650; margin-bottom: var(--s5); }
.skills-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6) clamp(32px, 5vw, 80px); }
.skills-grid .about-meta { grid-template-columns: 1fr; gap: var(--s4); }
.skills-grid .sub-small { margin-bottom: var(--s3); }
.contact-kicker { margin-bottom: var(--s3); }
.contact-availability { color: var(--ink-2); font-size: clamp(16px, 0.4vw + 15px, 19px); margin: calc(var(--s4) * -1) 0 var(--s6); }

/* ---------- case dialog ---------- */
.case-dialog {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 32px;
  background: var(--bg); color: var(--ink); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 40px 100px -30px rgba(23,25,29,0.5), 0 0 0 1px rgba(23,25,29,0.06);
}
.case-dialog::backdrop { background: rgba(23, 25, 29, 0.38); }
.case-dialog[open] { animation: dlg-in var(--t-mid) var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.case-dialog-bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 14px 28px; background: rgba(247,248,250,0.92); border-bottom: 1px solid var(--line);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .case-dialog-bar { background: rgba(247,248,250,0.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.case-dialog-label { font-size: 14px; color: var(--ink-2); }
.btn-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(23,25,29,0.06); cursor: pointer; display: grid; place-items: center; }
.btn-close svg { width: 16px; height: 16px; }
.btn-close:hover { background: rgba(23,25,29,0.1); }
.case-dialog-body { padding: 28px clamp(20px, 4vw, 48px) 48px; }
.case-dialog-body .case { max-width: none; }
html.dialog-open { overflow: hidden; }

/* ---------- entrance (JS + motion only; content is visible without it) ---------- */
.js.motion-ok [data-enter] { animation: enter var(--t-slow) var(--ease) both; }
.js.motion-ok .hero-text [data-enter]:nth-child(2) { animation-delay: 60ms; }
.js.motion-ok .hero-text [data-enter]:nth-child(3) { animation-delay: 120ms; }
.js.motion-ok .hero-text [data-enter]:nth-child(4) { animation-delay: 160ms; }
.js.motion-ok .hero-text [data-enter]:nth-child(5) { animation-delay: 200ms; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.js.motion-ok .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js.motion-ok .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .work-large, .work-large.is-flip { grid-template-columns: 1fr; }
  .work-large.is-flip .work-plate { order: 0; }
  .pipeline-card { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recent { grid-template-columns: minmax(0, 1fr); }
  .recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s6); }
  .recent-preview { width: 100%; }
}
/* below 1200 px the hero video becomes a full-bleed band under the text, characters centred */
@media (max-width: 1199px) {
  .hero { display: block; min-height: 0; padding-bottom: var(--s5); }
  .hero-text { max-width: 760px; }
  .lede, .proof { max-width: 34em; }
  .hero-scene { --band-h: clamp(360px, 76vw, 560px); position: relative; inset: auto; height: var(--band-h); margin: var(--s5) calc(-1 * var(--hero-inline)) 0; overflow: hidden; }
  .hero-scene .hv-stage, .hero-scene[data-mask="b"] .hv-stage { inset: 0; left: 0; top: 0; width: 100%; height: 100%; }
  .hero-scene .hv-outer { inset: 0; left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; }
  /* variant A keeps the owner's inner shape, stretched over the band; the outer (blur 240) mask is desktop-only */
  .hero-scene .hv-inner { inset: 0; left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-size: 112% 118%; mask-size: 112% 118%; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
  /* the video always covers the band; the robot + hiker pair sits as close to the centre as the crop allows */
  .hero-scene .hv-media, .hero-scene[data-mask="b"] .hv-media { --mh: max(calc(var(--band-h) * 1.25), calc(100cqw / 1.32353)); inset: auto; height: var(--mh); width: calc(var(--mh) * 1.32353);
    left: min(0px, max(calc(50% - var(--mh) * 0.8801), calc(100% - var(--mh) * 1.32353))); top: calc(var(--band-h) * 0.54 - var(--mh) * 0.57); }
  .hero-scene[data-mask="b"] { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 88%, transparent 100%); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 88%, transparent 100%); mask-composite: add; }
}

/* phones (≤720 px): the owner's own mobile mask (Figma 80:1143 in frame 84:2, 2026-10-18 — «на мобиле не нужно так сильно
   прятать левый и правый край»). His band reaches from the CTA row to the proof strip, so the masked stage grows 24 px (--s5)
   up and down out of the 360 px scene box without moving the layout; the video keeps its place (owner nudged it 2 px up). */
@media (max-width: 720px) {
  .hero-scene[data-mask="a"] { overflow: visible; }
  .hero-scene[data-mask="a"] .hv-stage { top: calc(-1 * var(--s5)); height: calc(100% + 2 * var(--s5)); overflow: hidden; }
  .hero-scene[data-mask="a"] .hv-inner { -webkit-mask-image: var(--hv-mask-mobile); mask-image: var(--hv-mask-mobile);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; }
  .hero-scene[data-mask="a"] .hv-media { top: calc(var(--s5) + var(--band-h) * 0.54 - var(--mh) * 0.57 - 2px); }
}

@media (max-width: 720px) {
  .hero { padding-top: 92px; }
  .eyebrow { margin-bottom: var(--s4); }
  .hero-title { margin-bottom: var(--s5); }
  .proof { margin-bottom: var(--s5); }
}
@media (max-width: 860px) {
  .work-medium { grid-column: 1 / -1; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid { grid-template-columns: 1fr; }
  .about-id { position: static; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s5); }
  .monogram, .avatar { grid-row: span 2; margin: 0; width: 96px; }
  .monogram span { font-size: 30px; }
  .case-body { grid-template-columns: 1fr; }
  .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .work-compact { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --dock-h: 56px; --dock-gap: 12px; }
  .hero-title { font-size: clamp(44px, 14vw, 64px); letter-spacing: -0.045em; }
  /* phones: the four cases become a swipe row (next card peeks 44 px), snapping to the card's text edge; dots follow it (main.js) */
  .recent-list { display: flex; min-width: 0; gap: var(--s4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--recent-pad)); padding: var(--s5) var(--recent-pad) 14px; scroll-padding-inline: var(--recent-pad); grid-row: 3;
    border-top: 0; background: linear-gradient(var(--line), var(--line)) no-repeat var(--recent-pad) 0 / calc(100% - 2 * var(--recent-pad)) 1px; }
  .recent-list::-webkit-scrollbar { display: none; }
  .recent-item { flex: 0 0 calc(100% - 36px); scroll-snap-align: start; }
  .recent-preview { width: 100%; }
  .js .recent-dots:not([hidden]) { display: flex; justify-content: center; gap: 6px; grid-row: 3; grid-column: 1 / -1; align-self: end; position: relative; z-index: 1; pointer-events: none; }  /* sits in the row's bottom padding */
  .recent-dot { pointer-events: auto; width: 6px; height: 6px; padding: 0; border: 0; border-radius: var(--r-pill); background: rgba(23,25,29,0.18); cursor: pointer;
    transition: width var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
  .recent-dot.is-on { width: 18px; background: var(--ink); }
  .about-meta { grid-template-columns: 1fr; }
  .principles, .notes, .steps, .steps-visual { grid-template-columns: 1fr; }
  .steps-visual .step:nth-child(odd)::after { display: none; }
  .dock-link { padding: 0 14px; min-height: 48px; font-size: 15px; }
  .dock-indicator { height: 48px; }
  .exp-row { grid-template-columns: 1fr; }
  .exp-years { grid-row: auto; }
  .case-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
}
@media (max-width: 380px) {
  .dock-link { padding: 0 11px; }
  .dock-me { display: none; }
  .tiles { gap: 12px; }
}
@media (max-width: 340px) {
  .dock-link { padding: 0 9px; font-size: 14px; }
}

@media (max-width: 380px) and (max-height: 700px) {
  .hero { padding-top: 76px; }
  .eyebrow { margin-bottom: var(--s3); font-size: 14px; }
  .hero-title { margin-bottom: var(--s4); }
  .lede { font-size: 17px; line-height: 1.45; }
  .proof { margin-bottom: var(--s4); font-size: 15px; }
}

/* ---------- reduced motion: quiet, static ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition-duration: 1ms !important; }