/* ═══════════════════════════════════════════════════════════════════════
   EDITORIAL LAYER
   Loaded after style.css. Everything here is an override, so the original
   selectors — and the CSS-selector keys lang.js relies on for the Russian
   translations — stay untouched.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#F4F2ED;
  --surface:#FFFFFF;
  --text:#14130F;
  --text-muted:#5C5951;
  --border:#DCD8CF;
  --accent:#C6F135;
  --accent-ink:#14130F;
  /* Clash, Switzer and Pixelify are all Latin-only. The browser falls through
     per character, not per element, so Latin keeps the chosen faces and only
     Cyrillic glyphs come from the substitutes below — the English version is
     byte-for-byte unchanged. */
  --display:'Clash Display','Onest','Inter',system-ui,sans-serif;
  --sans:'Switzer','Inter',system-ui,-apple-system,sans-serif;
  --pixel:'Pixelify Sans','Onest','Clash Display',monospace;
}

html[data-theme="dark"]{
  --bg:#121210;
  --surface:#1A1A18;
  --text:#F1EFE9;
  --text-muted:#8C8880;
  --border:#2A2A26;
  --accent:#C6F135;
  --accent-ink:#14130F;
}

body{ font-family:var(--sans); }

/* paper grain — what stops a flat fill from reading as a template.
   Fixed and non-interactive, sits under the nav but over the page. */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
html[data-theme="dark"] body::after{ mix-blend-mode:overlay;opacity:.16; }

/* ── DISPLAY TYPE ──────────────────────────────────────────────────────
   One serif for everything that is meant to be looked at rather than read,
   with tracking tightened as size grows. */
.hero-title,
.about-title,
.contact-title,
.pcard-title,
.case-lede,
.tldr-title,
.next-title,
.r-title,
.rm-title,
.paper-title,
.ba-title,
.stat-number,
.impact-number,
.pcard-stat-num,
.finding-number,
.j-year,
.exp-role,
.sys-name,
h1, h2, h3{
  font-family:var(--display);
  /* a single display weight across the whole site — emphasis is carried by
     colour, not by a second weight */
  font-weight:500;
  letter-spacing:-.02em;
}

.hero-title{
  /* Pixelify sets wider than Clash, so the previous max overflowed to four
     lines once "structure" changed face — the break is now explicit in markup */
  font-size:clamp(40px,7.6vw,112px);
  line-height:1;
  letter-spacing:-.025em;
}
.hero-title em,
.about-title em,
.contact-title em,
.next-title em{
  font-family:var(--display);
  font-style:normal;
  font-weight:inherit;
  color:inherit;
}

/* ── the lime accent ──────────────────────────────────────────────────
   Lime as *text* on paper measures 1.17:1 — invisible. As a highlight
   behind ink-coloured type it keeps the exact colour and reads cleanly.
   box-decoration-break keeps the block intact when the word wraps. */
.hero-title em:nth-of-type(1),
.contact-title em{
  background:var(--accent);
  color:var(--accent-ink);
  padding:0 .1em;
  margin:0 -.02em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* "structure" is set in the pixel face — the letterforms are literally built
   out of blocks. Pixelify is the one pixel font in the shortlist that carries
   Cyrillic, so the Russian version doesn't split across two faces. */

/* ── the pixel word glitches now and then ────────────────────────────
   The cycle is long and the disturbance occupies ~0.3s of it, so it reads
   as an occasional fault rather than a looping animation. steps(1) makes
   every keyframe snap instead of tweening — a glitch that eases is not a
   glitch. Colour-split, skew and a few pixels of jump — no invert frame: a
   property that appears in only one keyframe is held by steps(1) for the rest
   of the cycle, so the word stayed white instead of flashing. */
@keyframes structure-glitch{
  /* offsets are in em so the fault scales with the type instead of staying a
     3px tremor under a 116px word */
  0%    { transform:translate(-.05em,.012em) skewX(-4deg); text-shadow:.045em 0 rgba(255,0,122,.95),-.045em 0 rgba(0,214,255,.95); }
  0.8%  { transform:translate(.05em,-.012em) skewX(3deg);  text-shadow:-.04em 0 rgba(255,0,122,.9),.04em 0 rgba(0,214,255,.9); }
  1.6%  { transform:translate(-.03em,0) skewX(0);          text-shadow:.03em .012em rgba(0,214,255,.9); }
  2.4%  { transform:translate(.035em,.01em);               text-shadow:-.03em 0 rgba(255,0,122,.9); }
  3.2%  { transform:translate(-.02em,-.008em);             text-shadow:.018em 0 rgba(0,214,255,.7); }
  4%    { transform:translate(.012em,0);                   text-shadow:-.012em 0 rgba(255,0,122,.5); }
  5%,
  45%   { transform:none;                                  text-shadow:none; }
  /* a second, shorter fault so it never reads as a metronome */
  46%   { transform:translate(.04em,-.01em) skewX(5deg);   text-shadow:-.038em 0 rgba(0,214,255,.9),.038em 0 rgba(255,0,122,.9); }
  46.8% { transform:translate(-.045em,.01em) skewX(-3deg); text-shadow:.03em 0 rgba(255,0,122,.85); }
  47.6% { transform:translate(.02em,0);                    text-shadow:-.02em 0 rgba(0,214,255,.7); }
  48.4% { transform:translate(-.014em,0);                  text-shadow:.012em 0 rgba(255,0,122,.45); }
  50%,
  100%  { transform:none;                                  text-shadow:none; }
}
.hero-title em:nth-of-type(1){
  font-family:var(--pixel);
  font-weight:500;
  /* pixel faces have a shorter cap height, and negative tracking closes their
     square counters — both need compensating so the word matches its line */
  font-size:1.06em;
  letter-spacing:0;
}
/* the jitter lives on an inner span, so the lime block stays put and only the
   letters vibrate inside it */
.hero-title em:nth-of-type(1) > span{
  display:inline-block;
  animation:structure-glitch 6s steps(1,end) infinite;
}
@media(prefers-reduced-motion:reduce){
  .hero-title em:nth-of-type(1) > span{ animation:none; }
}
.hero-title em:nth-of-type(2){ color:inherit; }

/* style.css sets `html[data-theme="dark"] .hero-title em{color:#C9A227}` — a
   leftover from the gold palette. Its specificity beats every rule above, so
   in dark mode the emphasis words went gold and "structure" went gold ON the
   lime block. These re-state the intent at matching specificity. */
html[data-theme="dark"] .hero-title em,
html[data-theme="dark"] .about-title em,
html[data-theme="dark"] .contact-title em,
html[data-theme="dark"] .next-title em{ color:inherit; }
html[data-theme="dark"] .hero-title em:nth-of-type(1),
html[data-theme="dark"] .contact-title em{ color:var(--accent-ink); }

.about-title{ font-size:clamp(34px,5vw,72px);line-height:1.02; }
.contact-title{ font-size:clamp(36px,7vw,104px);line-height:.98; }
.pcard-title{ font-size:clamp(28px,3.4vw,44px);line-height:1.08;font-weight:500; }
.stat-number,
.impact-number,
.finding-number,
.pcard-stat-num,
.j-year{ font-family:var(--display) !important;font-weight:500 !important;letter-spacing:-.03em; }

/* numerals and their unit must share size and weight — a smaller unit in a
   high-contrast serif optically reads heavier and dirties the pair */
.stat-number sup,.impact-number sup,.pcard-stat-num sup{
  font-size:1em;vertical-align:baseline;font-weight:inherit;
}

/* ── SMALL CAPS LABELS ─────────────────────────────────────────────── */
.section-label,
.case-section-label,
.about-section-label,
.hero-tag,
.tldr-label,
.r-label,
.next-label,
.impact-label,
.case-meta-label,
.deliverable-label,
.work-item-label,
.process-num,
.screen-group-label,
.split-num{
  font-family:var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
}

/* ── NAV ───────────────────────────────────────────────────────────── */
nav{ background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px); }
.nav-logo{ font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:-.01em; }
.nav-links a{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  position:relative;padding-bottom:2px;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--text);transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }

/* ── BUTTONS: solid ink at rest, lime on hover ─────────────────────── */
.contact-btn{
  font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:15px 28px;border-radius:100px;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.contact-btn:hover{
  background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
}
.contact-btn.primary{ background:var(--text);color:var(--bg);border-color:var(--text); }
.contact-btn.primary:hover{ background:var(--accent);color:var(--accent-ink);border-color:var(--accent); }
html[data-theme="dark"] .contact-btn.primary:hover{ background:var(--accent);color:var(--accent-ink); }

.pcard-cta{
  font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;padding:14px 26px;border-radius:100px;
  transition:background .3s ease,color .3s ease;
}
.pcard:hover .pcard-cta{ background:var(--accent);color:var(--accent-ink); }

/* ── ACCENT TOUCHES ────────────────────────────────────────────────── */
/* same trap as the practices band: this chip inverts with the theme, but the
   lime year does not, so in dark mode it landed lime-on-paper. Pinned dark. */
.j-stop.now{ --band-fg:#F4F2ED;background:#14130F;color:var(--band-fg); }
html[data-theme="dark"] .j-stop.now{ background:#1C1C19;--band-fg:#F1EFE9; }
.j-stop.now .j-year{ color:var(--accent); }
.j-stop.now .j-what{ color:color-mix(in srgb,var(--band-fg) 74%,transparent); }

/* ── INTERACTIVE LAYER (x-ray lens + custom cursor) ────────────────── */
#xray{
  position:fixed;inset:0;z-index:400;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  -webkit-mask-image:radial-gradient(circle var(--r,190px) at var(--mx,-999px) var(--my,-999px),#000 62%,rgba(0,0,0,.35) 82%,transparent 100%);
  mask-image:radial-gradient(circle var(--r,190px) at var(--mx,-999px) var(--my,-999px),#000 62%,rgba(0,0,0,.35) 82%,transparent 100%);
}
body.xray-on #xray{ opacity:1; }
#xray canvas{ width:100%;height:100%;display:block; }

.xray-switch{
  position:fixed;left:16px;bottom:16px;z-index:500;
  display:inline-flex;gap:4px;padding:6px;border-radius:100px;
  background:var(--text);
}
.xray-switch button{
  border:0;cursor:pointer;background:transparent;
  color:color-mix(in srgb,var(--bg) 58%,transparent);
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:8px 16px;border-radius:100px;
  transition:background .25s ease,color .25s ease;
}
.xray-switch button:hover{ color:var(--bg); }
.xray-switch button[aria-pressed="true"]{ background:var(--accent);color:var(--accent-ink); }

#cur{
  position:fixed;top:0;left:0;z-index:450;pointer-events:none;
  width:14px;height:14px;border-radius:100px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);white-space:nowrap;overflow:hidden;
  transform:translate3d(-50%,-50%,0);opacity:0;
  transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),
             background .3s ease,opacity .3s ease;
}
body.cursor-on #cur{ opacity:1; }
#cur span{ opacity:0;transition:opacity .2s ease; }
#cur.is-view{ width:92px;height:92px; }
#cur.is-view span{ opacity:1;transition-delay:.08s; }
#cur.is-dark{ background:var(--bg);color:var(--text); }
body.cursor-on.xray-on #cur{ opacity:0; }
body.cursor-on,
body.cursor-on a,
body.cursor-on button,
body.cursor-on .pcard{ cursor:none; }

.mag{ will-change:transform; }

@media(prefers-reduced-motion:reduce){ #xray,#cur,.xray-switch{ display:none; } }
@media(max-width:900px){ #xray,#cur,.xray-switch{ display:none; } }

/* Research page still asked for 'Source Serif 4', which was never actually
   loaded — those rules were silently falling back to Georgia. Point them at
   the display face so the whole site speaks one voice. */
.r-serif,
.r-h2,
.r-lede,
.rt-title,
.article-title,
.split-title,
.next-title,
.sys-name{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.02em;
}
/* the research lede is running text, not display — keep it in the text face */
.r-lede{ font-family:var(--sans);font-weight:400;letter-spacing:0; }


/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT — the demo's structure applied to the existing markup.
   Class names are deliberately untouched: lang.js keys off them.
   ═══════════════════════════════════════════════════════════════════════ */

.container{
  max-width:1680px;
  padding-left:clamp(28px,6vw,112px);
  padding-right:clamp(28px,6vw,112px);
}

/* ── HERO ─────────────────────────────────────────────────────────────
   Two-column footer under the headline, placed on the grid rather than
   with a new wrapper element, so the markup (and its translations) hold. */
.hero{ padding:clamp(56px,10vw,120px) 0 clamp(40px,7vw,80px);border-bottom:0; }
.hero-glow{ display:none; }
.hero .container{
  display:grid;
  grid-template-columns:1fr minmax(0,460px);
  column-gap:clamp(24px,5vw,64px);
  align-items:end;
}
.hero-tag,
.hero-title{ grid-column:1 / -1; }
.hero-tag{ margin-bottom:clamp(28px,5vw,56px);font-size:11px; }
.hero-title{ max-width:none;margin-bottom:clamp(32px,5vw,56px);text-wrap:balance; }
.hero-intro{ grid-column:1;margin:0;font-size:17px;max-width:52ch;color:var(--text-muted); }
.hero-meta{
  grid-column:2;display:flex;flex-direction:column;gap:0;margin:0;
}
.hero-meta span{
  display:flex;justify-content:space-between;font-size:15px;
  border-bottom:1px solid var(--border);padding:13px 0;color:var(--text);
}
.hero-meta span::before{ display:none; }
@media(max-width:900px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-intro,.hero-meta{ grid-column:1; }
  .hero-meta{ margin-top:32px; }
}

/* ── STATS: oversized numerals, no boxes ── */
.stats{
  border:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,3vw,40px);padding:clamp(48px,7vw,88px) 0;
}
.stat{ border:0;padding:0;text-align:center; }
.stat-number{ font-size:clamp(46px,7vw,104px);line-height:.85;margin-bottom:14px; }
.stat-label{ font-size:12.5px;line-height:1.45;max-width:32ch;margin:0 auto; }
@media(max-width:820px){ .stats{ grid-template-columns:1fr 1fr;row-gap:36px; } }

/* ── JOURNEY ── */
.journey{ padding:clamp(40px,6vw,72px) 0; }
.journey-track{ gap:1px;background:var(--border);margin-top:28px; }
.journey-stop{ background:var(--bg);padding:22px 20px 24px;border:0; }
.j-year{ font-size:20px;margin-bottom:8px; }
.j-place{ font-size:13.5px;font-weight:500; }
.j-what{ font-size:12px;color:var(--text-muted); }

/* ── PRACTICES: the full-bleed dark band ── */
/* The band used to be painted with var(--text)/var(--bg), so it inverted in
   dark mode — and lime on a light band measures 1.17:1. It now carries its own
   pair of tokens and stays ink-on-dark in both themes, which is the only
   background the lime accent is readable on. */
.practices{
  --band-bg:#14130F; --band-fg:#F4F2ED;
  background:var(--band-bg);color:var(--band-fg);
  padding:clamp(48px,6.5vw,88px) 0;margin:clamp(40px,6vw,72px) 0;
  border:0;
}
html[data-theme="dark"] .practices{ --band-bg:#1C1C19; --band-fg:#F1EFE9; }
.practices .section-label{ color:color-mix(in srgb,var(--band-fg) 58%,transparent); }
.practices-line{
  font-family:var(--display);font-weight:500;font-style:normal;
  font-size:clamp(30px,5.4vw,76px);line-height:1.08;letter-spacing:-.025em;
  max-width:16ch;margin:clamp(18px,2.6vw,30px) 0 clamp(20px,2.6vw,30px);
}
.practices-line .strike{ position:relative;color:color-mix(in srgb,var(--band-fg) 48%,transparent); }
.practices-line .strike::after{
  content:'';position:absolute;left:-.04em;right:-.04em;top:.52em;height:.055em;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.2,.8,.2,1) .4s;
}
.practices.in .practices-line .strike::after,
.practices .in .practices-line .strike::after{ transform:scaleX(1); }
.practices-line .accent{ font-style:normal;color:var(--accent); }
.practices-intro{
  font-size:clamp(14px,1.4vw,17px);line-height:1.7;max-width:48ch;
  color:color-mix(in srgb,var(--band-fg) 78%,transparent);margin-bottom:0;
}

/* two practice cards, flat on the band instead of boxed */
.practice-cards{ display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(255,255,255,.16); }
.practice-card{
  background:transparent;border:0;border-right:1px solid rgba(255,255,255,.16);
  padding:32px 32px 32px 0;border-radius:0;
}
.practice-card:last-child{ border-right:0;padding-left:32px; }
.practice-card.research{ background:transparent; }
.practice-kicker{ font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--band-fg) 56%,transparent);margin-bottom:14px; }
.practice-title{ font-family:var(--display);font-weight:500;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em;color:var(--band-fg);margin-bottom:12px; }
.practice-card:hover .practice-title{ color:var(--accent); }
.practice-desc{ font-size:13.5px;line-height:1.65;color:color-mix(in srgb,var(--band-fg) 72%,transparent);max-width:44ch; }
@media(max-width:820px){
  .practice-cards{ grid-template-columns:1fr; }
  .practice-card{ border-right:0;border-bottom:1px solid rgba(255,255,255,.16);padding:28px 0; }
  .practice-card:last-child{ padding-left:0;border-bottom:0; }
}

/* ── WORK: the demo's case row, value for value ───────────────────────
   .pcard-*  ⇄  .case-*        (class names kept: lang.js keys off them)
   The only intentional difference is the pill-shaped CTA. */
#work{ padding-bottom:0; }
.section-header{ padding:0 0 20px;border-bottom:1px solid var(--border); }
.projects-stack{ gap:0; }

.pcard{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,50%);
  gap:clamp(24px,5vw,64px);align-items:center;
  padding:clamp(40px,6vw,76px) 0;border-bottom:1px solid var(--border);
  background:transparent !important;color:var(--text);
  border-radius:0;min-height:0;overflow:visible;
}
.pcard:nth-child(odd) .pcard-visual{ order:-1; }
.pcard-content{ flex:none;padding:0;display:block; }

/* the kicker is set in the display face at text size, not as a caps label */
.pcard-label{
  font-family:var(--display) !important;
  font-size:13px !important;font-weight:500 !important;
  letter-spacing:-.01em !important;text-transform:none !important;
  color:var(--text-muted) !important;margin-bottom:18px;display:block;
}
.pcard-title{
  font-size:clamp(30px,4.4vw,62px);line-height:1.02;letter-spacing:-.03em;
  font-weight:500;
  margin-bottom:20px;max-width:none;text-wrap:balance;color:var(--text);
}

/* tags run as one quiet line with interpuncts — the pills were competing
   with the CTA for attention */
.pcard-tags{ display:block;margin-bottom:24px;font-size:12.5px;color:var(--text-muted); }
.pcard-tag{
  display:inline;border:0;padding:0;border-radius:0;
  font-size:12.5px;color:var(--text-muted);white-space:normal;
}
.pcard-tag-sep{ display:inline;margin:0 .45em;color:var(--text-muted);opacity:.55; }
.pcard-divider{ display:none; }

.pcard-stats{ display:flex;gap:32px;margin-bottom:26px; }
.pcard-stat-num{
  display:block;font-family:var(--display);font-weight:500;
  font-size:26px;letter-spacing:-.02em;margin-bottom:4px;color:var(--text);
}
.pcard-stat-label{ font-size:11.5px;color:var(--text-muted);line-height:1.4;max-width:24ch; }

.pcard-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--text);color:var(--bg);
  padding:14px 26px;border-radius:100px;
  transition:background .3s ease,color .3s ease;
}
.pcard:hover .pcard-cta{ background:var(--accent);color:var(--accent-ink); }
.pcard:hover .pcard-cta-arrow{ transform:translate(3px,-3px); }

.pcard-visual{ display:flex;align-items:center;justify-content:center;position:relative;overflow:visible; }
.pc-mockup-full,.pc-mockup-allyz{
  position:static;left:auto;bottom:auto;
  width:auto;max-width:100%;height:auto;
  filter:drop-shadow(0 22px 30px rgba(20,19,15,.16));
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
  will-change:transform,filter;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.pc-mockup-full{ max-height:clamp(340px,38vw,560px);filter:drop-shadow(0 26px 34px rgba(20,19,15,.17)); }
.pc-mockup-allyz{ max-height:clamp(300px,38vw,540px);width:auto; }
.pcard:hover .pc-mockup-full,
.pcard:hover .pc-mockup-allyz{ transform:translate3d(0,-8px,0) scale(1.02); }

.browser{
  width:100%;background:#2B2B2B;padding:clamp(6px,.8%,11px);border-radius:18px;
  box-shadow:0 26px 36px rgba(20,19,15,.18);
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.browser img{
  width:100%;height:auto;display:block;border-radius:9px;
  filter:none;max-height:none;transform:none;will-change:auto;
}
.pcard:hover .browser{ transform:translate3d(0,-8px,0) scale(1.02); }

@media(max-width:820px){
  .pcard{ grid-template-columns:1fr; }
  .pcard:nth-child(odd) .pcard-visual{ order:0; }
}

/* ── CONTACT / FOOTER ── */
.contact-section{ padding:clamp(64px,10vw,140px) 0 clamp(40px,6vw,80px);border-top:1px solid var(--border); }
footer{ border-top:1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════════════
   CASE STUDIES — bring the case pages onto the same system.
   The gold (#C9A227) is a leftover from the previous palette; it now reads
   as a second, competing accent, so it gets replaced everywhere.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── in-case section nav ── */
.case-subnav{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.case-subnav-track{ gap:28px; }
.case-subnav-track a{
  font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
  padding:14px 0;border:0;background:transparent;position:relative;
}
.case-subnav-track a::after{
  content:'';position:absolute;left:0;right:0;bottom:10px;height:1px;
  background:var(--text);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.case-subnav-track a:hover::after,
.case-subnav-track a.active::after{ transform:scaleX(1); }
.case-subnav-track a:hover,
.case-subnav-track a.active{ color:var(--text);background:transparent; }
.case-progress span{ background:var(--accent) !important; }

/* ── one voice for every heading on a case page ─────────────────────
   these lived in per-page <style> blocks and were still set in the sans */
.split-title,
.screen-group-title,
.ba-title,
.case-quote{
  font-family:var(--display) !important;
  font-weight:500;
  letter-spacing:-.02em;
}

/* ── consistent rhythm: the case sections each carried their own padding ── */
.case-body{ max-width:760px; }
.tldr{ padding:clamp(64px,9vw,120px) 0; }
.tldr-label,
.tldr-k{ color:var(--accent) !important; }
.tldr-title{ font-weight:500;margin-bottom:clamp(28px,4vw,44px); }

/* ── TL;DR rail: the shots people came for, before the words ─────────
   Full-bleed inside the dark band, but not flush to it. A dark card
   against the dark section hides the seam; a bright one (the lime scene)
   runs straight into the light block above and the row reads as clipped
   rather than cropped. So .has-hero keeps a band of ground above the
   cards — less than the section's own padding, enough to breathe. */
.tldr.has-hero{ padding-top:clamp(28px,4vw,52px); }
.tldr-hero{ margin-bottom:clamp(40px,6vw,72px); }

.rail{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
  /* the drift is driven frame by frame, so smooth scrolling would fight it */
  scroll-behavior:auto;
  /* let a vertical swipe pass through to the page on touch */
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-dragging{ cursor:grabbing; }
.rail-track{
  --rail-gap:12px;
  /* Big enough to read a screen without tapping to zoom, and never taller
     than the viewport. Height is the shared dimension: cards of different
     ratios then line up top and bottom and differ only in width, which is
     what keeps a mixed row from looking like a broken grid. */
  --rail-h:clamp(300px, min(46vw, 64vh), 620px);
  display:flex;gap:var(--rail-gap);
  padding:0 calc(var(--rail-gap) / 2);
  width:max-content;
}
.rail-card{
  flex:0 0 auto;
  height:var(--rail-h);
  width:auto;
  aspect-ratio:var(--ar, 1);
  border-radius:clamp(18px,1.6vw,28px);
  overflow:hidden;
  background:#0B0B0A;
}
/* On a phone a 4:3 card at full height would be wider than the screen.
   The whole row steps down together — shrinking only the wide ones would
   break the shared baseline that makes a mixed row read as deliberate. */
@media(max-width:700px){
  /* Sized to the tall cards, not the wide ones. Forcing the widest card
     to fit the screen sounds right but backfires when the ratios are far
     apart: making a 1.74 shot fit a 375px phone drops the row to 198px,
     and the 1:2 captures next to it collapse to 100px wide — six cards
     ruined to rescue one. A rail scrolls by definition, so a wide card
     running past the edge costs nothing; an unreadable one costs the shot. */
  .rail-track{ --rail-h:clamp(260px, 44vh, 360px); }
}
.rail-card img{
  display:block;width:100%;height:100%;object-fit:cover;
  user-select:none;-webkit-user-drag:none;
}

/* ── rail on a colour band ───────────────────────────────────────────
   The fill runs the full width of the page and the shots float on it.
   Colour and shadow are CSS, never baked into the images: a soft shadow
   over a saturated flat colour is exactly where WebP puts its worst
   artefacts — chroma is subsampled and the gradient carries too little
   luminance contrast to hide the damage, so the shot ends up ringed in
   speckle. A flat CSS fill cannot do that. */
.rail-ground{
  background:var(--rail-ground, var(--accent));
  padding:clamp(8px,1.2vw,18px) 0;
}
/* The breathing room has to live INSIDE the scroll container, not around
   it: .rail is overflow:hidden vertically and its content box is exactly
   one card tall, so a shadow drawn outside that box is cut off entirely —
   which is why the cards looked flat.

   The padding is derived from the shadow rather than guessed, so it stays
   sufficient at every screen size: a shadow reaches blur-offset above the
   card and offset+blur below it. */
.rail-ground{
  --rail-shadow-y:clamp(6px,1vw,14px);
  --rail-shadow-blur:clamp(14px,2.4vw,34px);
}
.rail-ground .rail-track{
  padding-top:calc(var(--rail-shadow-blur) - var(--rail-shadow-y) + 6px);
  padding-bottom:calc(var(--rail-shadow-y) + var(--rail-shadow-blur) + 6px);
}
.rail-ground .rail-card{
  background:transparent;
  border-radius:clamp(6px,0.7vw,10px);
  box-shadow:0 2px 6px rgba(0,0,0,.10),
             0 var(--rail-shadow-y) var(--rail-shadow-blur) rgba(0,0,0,.20);
}

/* ── the way down: one loud invitation, one quiet shortcut ────────── */
.tldr-cta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:16px clamp(20px,3vw,32px);
  margin-top:clamp(36px,5vw,56px);
}
.tldr-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:16px 30px;border-radius:100px;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.tldr-cta-btn:hover{ background:transparent;color:var(--accent); }
.tldr-cta-btn .arr{ transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.tldr-cta-btn:hover .arr{ transform:translateY(3px); }
.tldr-cta-link{
  font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:3px;
  transition:color .3s ease,border-color .3s ease;
}
.tldr-cta-link:hover{ color:#fff;border-color:#fff; }
@media(max-width:600px){
  .tldr-cta{ flex-direction:column;align-items:stretch; }
  .tldr-cta-btn{ justify-content:center; }
  .tldr-cta-link{ align-self:flex-start; }
}
.impact-label{ letter-spacing:.14em;font-size:10.5px;line-height:1.5; }

/* ── roadmap: gold line and gold end-node were the old accent ── */
.roadmap::before{ background:linear-gradient(90deg,var(--border) 0%,var(--text) 100%) !important; }
.rm-node{ font-family:var(--sans);font-size:10px;letter-spacing:.1em; }
.rm-step:last-child .rm-node{
  border-color:var(--text) !important;background:var(--accent);color:var(--accent-ink) !important;
}
html[data-theme="dark"] .rm-step:last-child .rm-node{ color:var(--accent-ink) !important; }
.rm-title{ font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:-.01em; }
@media(max-width:900px){
  .roadmap::before{ background:linear-gradient(180deg,var(--border) 0%,var(--text) 100%) !important; }
}

/* ── remaining gold accents ── */
.pcard-label.label-ioc{ color:var(--text-muted); }
::selection{ background:var(--accent);color:var(--accent-ink); }
.hero-glow{ display:none; }

/* ── CONTACT: left-aligned two-liner, as in the demo ──────────────────
   style.css centres the block and caps it at 600px, which forced the
   headline onto three lines and ignored the <br> in the markup. */
.contact-section{ text-align:left; }
.contact-title{
  max-width:none;margin-left:0;margin-right:0;
  margin-bottom:clamp(28px,4vw,44px);
}
.contact-links{ justify-content:flex-start; }
.footer-inner{ align-items:baseline; }

/* ═══════════════════════════════════════════════════════════════════════
   CONSISTENCY SWEEP
   The case pages carry ~70 hardcoded light-mode colours in inline styles and
   per-page <style> blocks. Rather than edit each one, map them onto the
   tokens by attribute selector — this also makes them behave in dark mode,
   which they never did.
   ═══════════════════════════════════════════════════════════════════════ */
[style*="color:#333"],[style*="color: #333"],
[style*="color:#444"],[style*="color: #444"],
[style*="color:#111"],[style*="color: #111"]{ color:var(--text) !important; }

[style*="color:#666"],[style*="color: #666"],
[style*="color:#777"],[style*="color: #777"],
[style*="color:#888"],[style*="color: #888"]{ color:var(--text-muted) !important; }

/* running copy inside case bodies and split columns */
.split-points li,
.case-body p,
.r-lede{ color:var(--text-muted); }

/* full-bleed dark bands should all be the same ink, not three near-blacks */
.screens-section{ background:transparent; }
.feed-split{ background:var(--text); }
.feed-split .split-title{ color:var(--bg); }
.feed-split .split-points li{ color:color-mix(in srgb,var(--bg) 60%,transparent); border-color:color-mix(in srgb,var(--bg) 16%,transparent); }
.feed-split .split-points li::before{ color:color-mix(in srgb,var(--bg) 26%,transparent); }
.feed-split .split-num{ color:color-mix(in srgb,var(--bg) 42%,transparent); }
.feed-new-badge{ background:var(--accent);color:var(--accent-ink);border-radius:2px;font-family:var(--sans); }

/* BEFORE / AFTER chips — the last components still on the old palette */
.split-block-label,
.phone-tag{
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;border-radius:2px;padding:5px 12px;
}
.split-block-label.lbl-before,
.phone-tag.before{
  background:transparent;color:var(--text-muted);
  box-shadow:inset 0 0 0 1px var(--border);
}
.split-block-label.lbl-after,
.phone-tag.after{ background:var(--text);color:var(--bg); }
.feed-split .phone-tag.after{ background:var(--accent);color:var(--accent-ink); }

/* section rules: one hairline colour instead of three rgba blacks */
.screen-split,
.feed-split{ border-top:1px solid var(--border); }

/* ── "next case" block closes the case pages the way contact closes the others ── */
.next-label{ color:var(--text-muted); }
.next-title{
  font-size:clamp(28px,4.4vw,60px);line-height:1.04;
  display:inline-flex;align-items:baseline;gap:14px;
  transition:gap .3s cubic-bezier(.2,.8,.2,1);
}
.next-title:hover{ gap:24px; }
.next-title em{ font-style:normal; }

/* ── ONE BUTTON SHAPE ────────────────────────────────────────────────
   Pills everywhere. The case pages still carried 2px-radius chips from the
   old system, including a few written inline, which is why they read as a
   different family. */
.contact-btn,
.pcard-cta,
.case-cta,
.pill-list li,
.split-block-label,
.phone-tag,
.pcard-tag{ border-radius:100px; }

/* chips written straight into the markup on the About page. Scoped to
   inline-flex on purpose: the same 2px radius is used by seven card grids
   on the case pages, and rounding those into pills would wreck them. */
[style*="inline-flex"][style*="border-radius: 2px"],
[style*="inline-flex"][style*="border-radius:2px"]{ border-radius:100px !important; }

/* small chips need a little more side padding once the ends are round */
.pcard-tag{ padding:7px 18px; }
.pill-list li{ padding:6px 16px; }
.split-block-label,
.phone-tag{ padding:5px 14px; }
[style*="inline-flex"][style*="border-radius: 2px"],
[style*="inline-flex"][style*="border-radius:2px"]{ padding-left:14px !important;padding-right:14px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   FINAL TYPE PASS
   ═══════════════════════════════════════════════════════════════════════ */

/* case-study h1 matches the contact headline — same scale, same presence.
   The size was written inline on each case page, so it needs !important. */
.case-title,
section > .container > .case-breadcrumb + h1,
.c-h1{
  font-family:var(--display) !important;
  font-size:clamp(36px,7vw,104px) !important;
  font-weight:500 !important;
  line-height:.98 !important;
  letter-spacing:-.025em !important;
  max-width:none !important;
}

/* section headings inside a case read thin at this size — one step up */
.held-claim,
.split-title,
.screen-group-title,
.r-h2,
.tldr-title,
.ba-title{
  font-family:var(--display) !important;
  font-weight:500 !important;
  letter-spacing:-.02em;
}
.held-claim{
  font-size:clamp(24px,3.4vw,44px);
  line-height:1.08;
}
/* the rule above it was a gold gradient from the previous palette */
.held-rule{ background:var(--accent) !important;width:56px;height:3px; }

/* leftovers that never joined the system */
.about-intro{ font-family:var(--sans);font-size:17px;color:var(--text-muted); }
.project-arrow{ font-family:var(--sans); }

/* the closing link lights up on hover, like every other action on the site */
.next-title{ transition:gap .3s cubic-bezier(.2,.8,.2,1),color .3s ease; }
.next-title:hover{ color:var(--accent-ink); }
.next-title:hover .project-arrow,
.next-title:hover em{ color:inherit; }
a:hover > .next-title,
.next-title:hover{
  background:linear-gradient(var(--accent),var(--accent)) no-repeat;
  background-size:100% 100%;
  box-shadow:0 0 0 .12em var(--accent);
}

/* ── index: the last case row, #work padding and the contact rule stacked
   three hairlines on top of each other ── */
.pcard:last-child{ border-bottom:0;padding-bottom:clamp(16px,2vw,28px); }
#work{ padding-bottom:0; }
.contact-section{ border-top:1px solid var(--border);margin-top:0; }

/* the attribute-selector patch that used to catch inline-sized headings is
   gone: every one of them now carries a class from the scale below. */

/* .research-page and friends still asked for a serif that was never loaded */
.research-page,
.r-serif,
.r-h2,
.rt-title,
.article-title{ font-family:var(--display) !important; }
.research-page{ font-family:var(--sans) !important; }


/* Onest sits within 1% of Clash's width relative to cap height (Unbounded was
   +29%, which is why mixed EN/RU lines looked like two different fonts), so no
   width compensation is needed — only a hair of extra tracking, because
   Cyrillic lowercase has more vertical stems per word than Latin. */
html[lang="ru"] .hero-title,
html[lang="ru"] .contact-title,
html[lang="ru"] .pcard-title,
html[lang="ru"] .about-title{ letter-spacing:-.022em; }


/* ═══════════════════════════════════════════════════════════════════════
   CASE-PAGE TYPE SCALE
   Every heading on the three case pages used to be sized inline, and the
   values had drifted: card titles came in four sizes (14/15/17/18px) at
   two weights, page h1 sat at 400 while its own h2s were forced to 600 by
   an !important rule, and the pull-quote's inline font-weight:400 beat the
   stylesheet outright — inline styles win over any rule without !important.
   That is the "разная толщина заголовков". The inline font declarations are
   now stripped and each role has exactly one definition here.
   ═══════════════════════════════════════════════════════════════════════ */
.c-h2,.c-h3,.c-quote,.c-quote-rule,.c-card-title,.c-item-title{
  font-family:var(--display) !important;
}
.c-h2{ font-size:clamp(24px,3vw,34px);font-weight:500;line-height:1.14;letter-spacing:-.025em; }
.c-h3{ font-size:clamp(18px,2.2vw,24px);font-weight:500;line-height:1.2;letter-spacing:-.02em; }

/* the quote carries the same weight as the headings around it — it reads as
   a quote through scale and measure, not through a lighter cut */
.c-quote{ font-size:clamp(22px,3.2vw,38px);font-weight:500;line-height:1.18;letter-spacing:-.03em; }

/* a quote with a rule beside it is a testimonial, not a section opener — one
   step down, but the same face and weight as everything else */
.c-quote-rule{ font-size:clamp(17px,1.9vw,23px);font-weight:500;line-height:1.4;letter-spacing:-.02em; }

/* one card-title treatment for hypotheses, findings and every other card,
   set on the lime block. display:inline is what makes the lime hug the words
   instead of filling the column, and it survives the RU swap because lang.js
   replaces innerHTML, never the class. */
.c-card-title{
  display:inline;
  font-size:16px;font-weight:500;line-height:1.34;letter-spacing:-.015em;
  background:var(--accent);color:var(--accent-ink) !important;
  padding:.1em .26em;margin-left:-.26em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.c-card-title + p,
.c-card-title + div{ margin-top:14px; }

/* compact list rows inside a card — same face and weight, one step down */
.c-item-title{ font-size:14.5px;font-weight:500;line-height:1.35;letter-spacing:-.012em; }

/* the impact numerals were set at weight 300 while every other numeral on the
   site is 500 — that thinness is what made them look like a different family */

.c-kicker{
  font-family:var(--sans) !important;
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);
}
.c-lede{ font-family:var(--sans) !important;font-size:17px;font-weight:400;line-height:1.65;letter-spacing:0; }

/* ── the case body column was centred inside a 1680px container while every
   other block on the page starts at the gutter, so the section headers read
   as a different grid from the content under them ── */
.case-body{ max-width:none;margin-left:0;margin-right:0; }
.case-body > p,
.case-body > blockquote,
.case-body > ul,
.case-body > ol,
.case-body > .c-h1,
.case-body > .c-h2,
.case-body > .c-h3,
.case-body > .c-quote,
.case-body > .c-quote-rule,
.case-body > .c-lede,
.case-body > h1,.case-body > h2,.case-body > h3,
/* the product lede sits outside .case-body but belongs to the same column */
.case-lede{ max-width:760px; }

/* the screens section header already sits above a section border; the first
   split's own border-top drew a second hairline right under the title */
.screens-section .case-body + *,
.screens-section .container + .screen-split:first-of-type{ border-top:0 !important; }

/* the ad-hoc stat bars are now the shared .impact-bar, so this is the single
   definition of a case numeral — same size and weight on every page */
.impact-number{ font-size:clamp(30px,20cqw,56px) !important;line-height:1;margin-bottom:8px; }
.impact-item{ padding:32px 28px; }


/* ── ABOUT: one left edge ─────────────────────────────────────────────
   .about-section carries padding:48px 40px, the hero carried none, so every
   label under the hero started 40px to the right of the headline above it.
   Both now read the same inset from one variable. */
html{ --about-inset:40px; }
@media(max-width:900px){ html{ --about-inset:24px; } }
.about-section{ padding:48px var(--about-inset); }
.about-hero-grid{
  padding-left:var(--about-inset);
  /* the portrait was small and floated 60px off the text */
  gap:clamp(24px,3vw,36px);
  align-items:center;
}
@media(max-width:900px){ .about-hero-grid{ padding-left:0; } }

/* ── hairline grids: one line per seam, not two ──────────────────────
   Each cell drew a full 1px box and the cells sit flush, so every shared
   edge rendered two stacked lines while the outer edge stayed 1px. The
   container now closes the top and left, each cell the right and bottom —
   the pattern .impact-bar already uses. */
.bring-grid,
.about-section .resp-2{
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
  /* the bordered blocks above are the .about-section boxes themselves, which
     reach the section edge; these grids sit inside a section and were inset by
     its padding. Pull them back out so every box shares one outer edge. */
  margin-left:calc(var(--about-inset) * -1);
  margin-right:calc(var(--about-inset) * -1);
}
.bring-grid > div,
.bring-grid > *,
.about-section .resp-2 > *{
  border:0;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* ── the case subnav had a white underline under the active item AND the
   lime progress bar under the whole strip — two lines saying the same thing.
   The active item now reads by colour alone. */
.case-subnav-track a::after{ display:none !important; }
.case-subnav-track a,
.case-subnav-track a.active,
.case-subnav-track a:hover{ border-bottom:0 !important; }

/* the caps above were far below the space the cells actually offer, so short
   labels broke onto a third line for no reason */
.pcard-stats-3 .pcard-stat-label{ max-width:24ch; }