/* TESSERA GROUP · Website V3.8 · homepage (approved V2.2) + five inner pages; V3.1 rules at the end of this file,
   homepage proposals scoped to body classes (.t31 typography, .m31 menu focus) so the V2.2 look is kept without them
   Layout concept: an engineering sheet. A 12-column editorial grid on white,
   hairline rules, one solid navy field per act, a single navy "tessera" cell
   marking the piece that fits. Navy + white core; black as functional text.
   V2.0: type in rem and breakpoints in em, so the layout reflows with the reader's
   text-size setting; mobile sizes tuned for readers aged 40+ (WCAG 1.4.4 / 1.4.10). */

@font-face { font-family: "TT Fors"; src: url("../assets/fonts/TT_Fors_Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TT Fors"; src: url("../assets/fonts/TT_Fors_Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --navy: #003579;          /* TESSERA Navy, primary */
  --white: #FFFFFF;         /* core background */
  --ink: #000000;           /* functional neutral: text */
  --ink-2: rgba(0, 0, 0, 0.70);          /* secondary text, about 8.6:1 on white */
  --rule: rgba(0, 53, 121, 0.18);
  --on-navy: #FFFFFF;
  --on-navy-2: rgba(255, 255, 255, 0.84); /* secondary text on navy, about 9:1 */
  --rule-navy: rgba(255, 255, 255, 0.24);
  --tint: #EFF0F1;          /* image well behind renders while loading */
  --img-ground: #F3F5F7;    /* neutral ground of the Visual Assets V2 sector images */

  /* TT Fors is the brand webfont. Anything after it is a fallback; review builds label it. */
  --font: "TT Fors", "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-h1: clamp(2.625rem, 6.5vw, 6.25rem);
  --fs-h2: clamp(2rem, 3.9vw, 3.5rem);
  --fs-h3: clamp(1.3125rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.45vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;
  --fs-nav: 0.9375rem;
  --fs-btn: 0.9375rem;

  --gutter: clamp(20px, 5.6vw, 80px);
  --max: 1440px;
  --section: clamp(72px, 7.5vw, 112px);
  --header-h: 84px;
  --tap: 44px;              /* minimum touch target */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.navy :focus-visible { outline-color: var(--on-navy); }

.wrap {
  max-width: var(--max); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--on-navy); padding: 12px 16px; z-index: 100; }
.skip:focus { left: 16px; top: 16px; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy);
}
.eyebrow::before { content: ""; width: 10px; height: 10px; background: currentColor; flex: none; }
.navy .eyebrow { color: var(--on-navy); }

/* ---------- review bar and font notice (review builds only) */
.review-bar { background: var(--ink); color: var(--white); font-size: 0.8125rem; line-height: 1.45; }
.review-bar .wrap { padding-block: 8px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.review-bar a { color: var(--white); }
.font-fallback-note { position: fixed; left: 12px; bottom: 12px; z-index: 80; margin: 0; max-width: 22rem; padding: 10px 14px;
  background: var(--ink); color: var(--white); font-size: 0.875rem; line-height: 1.4; }

/* ---------- header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--white); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--white);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: var(--header-h); }
.logo { display: block; flex: none; }
.logo img { width: 168px; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); }
.nav ul { display: flex; gap: clamp(16px, 1.8vw, 28px); }
.nav ul a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: var(--fs-nav); white-space: nowrap;
  border-bottom: 1px solid transparent; }
.nav ul a:hover, .nav ul a[aria-current="page"] { border-bottom-color: var(--navy); color: var(--navy); }
.lang { display: flex; align-items: center; gap: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; }
.lang a, .lang span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); text-decoration: none; }
.lang [aria-current="true"] { color: var(--navy); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.lang a { color: var(--ink-2); }
.lang a:hover { color: var(--navy); }
.lang i { font-style: normal; color: var(--rule); }
.menu-btn { display: none; }

/* ---------- buttons and links */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 12px 26px;
  font: 500 var(--fs-btn)/1.2 var(--font); letter-spacing: 0.01em; text-decoration: none; border: 1px solid var(--navy); text-align: center;
  transition: background .2s, color .2s;
}
.btn-primary { background: var(--navy); color: var(--on-navy); }
.btn-primary:hover { background: var(--white); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--on-navy); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.navy .btn-primary { background: var(--on-navy); color: var(--navy); border-color: var(--on-navy); }
.navy .btn-primary:hover { background: transparent; color: var(--on-navy); }
.navy .btn-ghost { color: var(--on-navy); border-color: var(--rule-navy); }
.navy .btn-ghost:hover { background: var(--on-navy); color: var(--navy); border-color: var(--on-navy); }

.textlink { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); font-weight: 500; color: var(--navy);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.textlink:hover .arr { transform: translateX(3px); }
.textlink .arr { transition: transform .2s; }
.navy .textlink { color: var(--on-navy); }

/* ---------- hero */
.hero { padding-block: clamp(40px, 5.5vw, 88px) 0; }
.hero .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.hero-copy { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 32px; min-width: 0; padding-bottom: 8px; }
.hero h1 { font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.03em; color: var(--navy); }
.hero h1 span { display: block; }
/* Russian headline: "Промышленность." is the longest word in the hero; size the RU headline so it fits its column */
@media (min-width: 37.5em) { .hero h1:lang(ru) { font-size: clamp(2.5rem, 4.6vw, 4.5rem); } }
.hero-sub { font-size: var(--fs-lead); line-height: 1.5; max-width: 30em; color: var(--ink); }
.hero-fig { grid-column: 8 / span 5; margin: 0; min-width: 0; }
.hero-media { position: relative; }
.hero-media picture { display: block; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--tint); }
.hero-media picture img { width: 100%; height: 100%; object-fit: cover; }
.hero-inset { position: absolute; left: -48px; bottom: -40px; width: 42%; background: var(--white); padding: 10px; box-shadow: 0 0 0 1px var(--rule); }
.hero-inset .hero-drawing { width: 100%; height: auto; }
.hero-fig figcaption { padding-left: calc(42% - 48px + 24px); min-height: 40px; }
.hero-fig figcaption, .fig-cap { margin-top: 12px; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-2); text-transform: uppercase; }
.hero-drawing text.dim { font: 500 12px var(--font); fill: var(--navy); letter-spacing: 0.06em; }
.hero-drawing text.small { font-size: 9.5px; font-weight: 400; letter-spacing: 0.12em; }
.hero-drawing text.strong { font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .hero-drawing .draw, .hero-drawing .draw * { stroke-dasharray: 1; animation: draw 1.8s cubic-bezier(.5,0,.2,1) both; }
  .hero-drawing .draw circle:nth-child(n+4) { animation-delay: .5s; }
  .hero-drawing .tcell { animation: cellin .5s 1.7s both; }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes cellin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* index strip */
.hero .index { display: block; margin-top: clamp(48px, 5vw, 72px); }
.index ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.index li { border-right: 1px solid var(--rule); min-width: 0; }
.index li:last-child { border-right: 0; }
.index a { display: flex; gap: 14px; align-items: baseline; padding: 20px 20px 22px 0; text-decoration: none; font-size: var(--fs-small); }
.index li + li a { padding-left: 20px; }
.index b { font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--navy); font-variant-numeric: tabular-nums; }
.index a:hover span { color: var(--navy); }

/* ---------- section scaffolding */
.section { padding-block: var(--section); }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head > * { min-width: 0; }
.sec-head .eyebrow { grid-column: 1 / -1; }
.sec-head h2 { grid-column: 1 / span 6; font-size: var(--fs-h2); line-height: 1.06; color: var(--navy); }
.sec-head .lead { grid-column: 8 / span 5; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); align-self: end; }
.navy { background: var(--navy); color: var(--on-navy); }
.navy .sec-head h2 { color: var(--on-navy); }
.navy .lead { color: var(--on-navy-2); }

/* ---------- bridge */
.bridge-grid { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; }
.dir { display: flex; flex-direction: column; gap: 28px; padding: clamp(28px, 3.4vw, 52px); min-width: 0; }
.dir-a { border: 1px solid var(--navy); }
.dir-b { background: var(--navy); color: var(--on-navy); }
.dir-num { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--navy); }
.dir-b .dir-num { color: var(--on-navy-2); }
.dir h3 { font-size: clamp(1.875rem, 3vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); }
.dir-b h3 { color: var(--on-navy); }
.dir h3 i { font-style: normal; font-weight: 400; }
.dir-text { font-size: var(--fs-lead); line-height: 1.5; max-width: 28em; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tags li { font-size: 0.875rem; line-height: 1.35; padding: 7px 12px; border: 1px solid var(--rule); color: var(--navy); }
.dir-b .tags li { border-color: var(--rule-navy); color: var(--on-navy); }
.dir-for { padding-top: 20px; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-2); }
.dir-b .dir-for { border-top-color: var(--rule-navy); color: var(--on-navy-2); }
.joint { position: relative; display: flex; align-items: center; justify-content: center; }
.joint::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--navy); }
.joint span { position: relative; width: 22px; height: 22px; background: var(--navy); outline: 8px solid var(--white); }

/* ---------- industries */
.ind-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 40px; row-gap: 48px; border-top: 1px solid var(--navy); }
.ind { position: relative; display: flex; flex-direction: column; gap: 18px; padding-top: 24px; min-width: 0; }
.ind + .ind::before { content: ""; position: absolute; left: -20px; top: 0; bottom: 0; border-left: 1px solid var(--rule); }
.ind-num { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; color: var(--navy); font-variant-numeric: tabular-nums; }
/* V2.2: one consistent 4:3 image container at every width; corrected 4:3 crops fill it exactly */
.ind-img { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; background: var(--img-ground); }
.ind-img picture, .portrait picture { display: block; height: 100%; }
.ind-img img { width: 100%; height: 100%; object-fit: cover; }
.ind h3 { font-size: var(--fs-h3); line-height: 1.22; color: var(--navy); }
.ind p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.sec-foot { margin-top: clamp(40px, 4vw, 56px); display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.ph-note { font-size: 0.875rem; color: var(--ink-2); max-width: 46em; }

/* optional supplementary photograph band (rendered only when an approved file exists) */
.photo-band { margin: 0; }
.photo-band picture { display: block; aspect-ratio: 21 / 9; overflow: hidden; background: var(--tint); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }
.photo-band figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--ink-2); }

/* ---------- operating model */
.ai .sec-head h2 { grid-column: 1 / span 7; }
.ai-sub { grid-column: 1 / span 7; font-size: var(--fs-lead); line-height: 1.5; color: var(--on-navy); margin-top: -8px; }
.ai .sec-head .lead { grid-column: 8 / span 5; grid-row: 2 / span 2; }
.ai-fig { margin: 0 0 clamp(40px, 4vw, 64px); border-top: 1px solid var(--rule-navy); border-bottom: 1px solid var(--rule-navy); padding-block: 24px 16px; }
.ai-fig .fig-cap { color: var(--on-navy-2); display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.dg { width: 100%; height: auto; overflow: visible; }   /* V3.0: long Russian source label («Нормативные требования») extends slightly left of the drawing box; shown in full */
.dg text { fill: var(--on-navy); font-family: var(--font); }
.dg-hdr text { paint-order: stroke; stroke: var(--navy); stroke-width: 8px; stroke-linejoin: round; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; fill-opacity: 0.72; }
.dg-lbl { font-size: 16px; }
.dg-sm { font-size: 12px; fill-opacity: 0.86; }
.dg-layer { transition: opacity .3s; }
.ai-fig[data-focus="human"] .dg-layer:not([data-layer="human"]),
.ai-fig[data-focus="ai"] .dg-layer:not([data-layer="ai"]):not([data-layer="src"]),
.ai-fig[data-focus="evidence"] .dg-layer:not([data-layer="evidence"]) { opacity: 0.25; }
@media (prefers-reduced-motion: reduce) { .dg-pulse { display: none; } }

/* simplified diagram for small screens: real text, scales with the reader's settings */
.dg-m { display: none; position: relative; }
.dg-m li { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 14px; padding-bottom: 26px; }
.dg-m li:last-child { padding-bottom: 4px; }
.dg-m li::before { content: ""; position: absolute; left: calc(1.25rem - 0.5px); top: 2.5rem; bottom: 2px; border-left: 1px solid var(--rule-navy); }
.dg-m li:last-child::before { display: none; }
.dg-m .dg-m-n { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--on-navy);
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.dg-m li[data-layer="human"] .dg-m-n { background: var(--on-navy); color: var(--navy); }
.dg-m h3 { font-size: 1.25rem; line-height: 1.25; color: var(--on-navy); padding-top: 0.4rem; }
.dg-m p { margin-top: 6px; font-size: 1.0625rem; line-height: 1.5; color: var(--on-navy-2); }

.ai-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.ai-col {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; cursor: pointer;
  padding: 28px 28px 32px 0; border-top: 1px solid var(--rule-navy); transition: border-color .2s; min-width: 0;
}
.ai-col + .ai-col { padding-left: 28px; border-left: 1px solid var(--rule-navy); }
.ai-col:hover, .ai-col[aria-pressed="true"] { border-top-color: var(--on-navy); }
.ai-col:focus-visible { outline: 2px solid var(--on-navy); outline-offset: 4px; }
.ai-col .n { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--on-navy-2); font-variant-numeric: tabular-nums; }
.ai-col h3 { font-size: var(--fs-h3); line-height: 1.25; color: var(--on-navy); }
.ai-col p { font-size: 1rem; line-height: 1.6; color: var(--on-navy-2); }
.ai-foot { margin-top: clamp(40px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid var(--rule-navy); }
.ai-rule { display: flex; align-items: baseline; gap: 14px; font-size: var(--fs-lead); line-height: 1.5; max-width: 46em; }
.ai-rule::before { content: ""; width: 10px; height: 10px; background: var(--on-navy); flex: none; transform: translateY(-0.15em); }

/* ---------- founder */
.fo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.fo-photo { grid-column: 1 / span 4; margin: 0; }
.portrait { aspect-ratio: 3 / 4; max-width: 100%; overflow: hidden; position: relative; background: var(--tint); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait::after { content: ""; position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; background: var(--navy); }
.fo-body { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.fo-name { font-size: var(--fs-h2); line-height: 1.06; color: var(--navy); }
.fo-role { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-top: -10px; }
.fo-quote { margin: 0; font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; padding-left: 24px; border-left: 2px solid var(--navy); max-width: 22em; }
.fo-text { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--navy); }
.stat { padding: 20px 20px 0 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--rule); }
.stat b { font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1; font-weight: 500; color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }

/* ---------- contact CTA */
.cta .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; }
.cta .wrap > * { min-width: 0; }
.cta .eyebrow { grid-column: 1 / -1; }
.cta h2 { grid-column: 1 / span 8; font-size: clamp(2.375rem, 5.4vw, 5rem); line-height: 1.02; letter-spacing: -0.03em; }
.cta-text { grid-column: 1 / span 6; font-size: var(--fs-lead); line-height: 1.5; color: var(--on-navy-2); }
.cta-mail { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 32px; border-top: 1px solid var(--rule-navy); }
.mail { display: inline-flex; align-items: center; min-height: var(--tap); padding-block: 6px; font-size: clamp(1.375rem, 3.6vw, 3.25rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; color: var(--on-navy);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; overflow-wrap: anywhere; }
.mail:hover { text-decoration-color: transparent; }

/* ---------- footer */
.site-footer { padding-block: 64px 40px; }
.ft-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.ft-brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 20px; }
.ft-brand img { width: 168px; }
.ft-brand p { font-size: var(--fs-small); color: var(--ink-2); }
.ft-col { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ft-col.wide { grid-column: span 3; }
.ft-col h4 { margin: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.ft-col ul { display: flex; flex-direction: column; }
.ft-col li a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: var(--fs-small); overflow-wrap: anywhere; }
.ft-col a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.ft-col .lang { margin-left: -12px; }
.ft-bottom { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.875rem; color: var(--ink-2); }

/* ================= responsive (em breakpoints follow the reader's text size) ================= */
.mobile-menu { display: none; }
@media (max-width: 73.75em) {
  .nav ul { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); min-width: var(--tap); background: none; border: 0; padding: 0 0 0 12px; cursor: pointer;
    font: 500 0.875rem var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy);
  }
  .menu-btn .bars { width: 22px; height: 10px; position: relative; }
  .menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--navy); transition: transform .25s, top .25s; }
  .menu-btn .bars::before { top: 0; } .menu-btn .bars::after { top: 8.5px; }
  .menu-open .menu-btn .bars::before { top: 4.25px; transform: rotate(45deg); }
  .menu-open .menu-btn .bars::after { top: 4.25px; transform: rotate(-45deg); }
  .ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ind + .ind::before { display: none; }
  .ind:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .mobile-menu {
    display: block; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); background: var(--white); overflow-y: auto;
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--rule);
  }
  .mobile-menu .wrap { padding-block: 16px 24px; display: flex; flex-direction: column; gap: 28px; }
  .mobile-menu ol { counter-reset: m; }
  .mobile-menu li { border-bottom: 1px solid var(--rule); counter-increment: m; }
  .mobile-menu li a { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; text-decoration: none; font-size: clamp(1.375rem, 5.6vw, 1.875rem); line-height: 1.25; font-weight: 500; color: var(--navy); letter-spacing: -0.01em; }
  .mobile-menu li a::before { content: "0" counter(m); font-size: 0.875rem; letter-spacing: 0.1em; color: var(--ink-2); font-weight: 500; }
  .mobile-menu .mm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; font-size: 1.0625rem; }
  .mobile-menu .mm-foot > a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--navy); overflow-wrap: anywhere; }
  .mobile-menu .lang { font-size: 1rem; }
  body.menu-open { overflow: hidden; }
}

@media (max-width: 64em) {
  .hero-copy { grid-column: 1 / span 7; }
  .hero-fig { grid-column: 8 / span 5; }
  .hero-inset { left: -32px; }
  .sec-head h2, .ai .sec-head h2, .ai-sub { grid-column: 1 / -1; }
  .sec-head .lead, .ai .sec-head .lead { grid-column: 1 / span 9; grid-row: auto; }
  .fo-photo { grid-column: 1 / span 5; }
  .fo-body { grid-column: 6 / span 7; }
  /* founder metrics: one per row in the narrower founder column (long Russian labels) */
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat, .stat + .stat { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .ft-brand { grid-column: 1 / -1; }
  .ft-col, .ft-col.wide { grid-column: span 4; }
}

@media (max-width: 53.75em) {
  .hero .wrap { row-gap: 40px; }
  .hero-copy { grid-column: 1 / -1; }
  .hero-fig { grid-column: 1 / -1; max-width: 560px; }
  .hero-inset { left: 16px; bottom: -32px; width: 40%; padding: 8px; }
  .hero-fig figcaption { padding-left: calc(40% + 32px); }
  .index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index li:nth-child(2) { border-right: 0; }
  .index li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .index li:nth-child(3) a { padding-left: 0; }
  .bridge-grid { grid-template-columns: minmax(0, 1fr); }
  .joint { height: 64px; }
  .joint::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid var(--navy); }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .ind:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .sec-head .lead, .ai .sec-head .lead { grid-column: 1 / -1; }
  /* fifth card on two-column layouts: image at the same size as the others, text beside it (no enlargement) */
  .ind:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 14px; align-content: start; }
  .ind:last-child:nth-child(odd) .ind-num { grid-column: 1 / -1; }
  .ind:last-child:nth-child(odd) .ind-img { grid-column: 1; grid-row: 2 / span 2; }
  .ind:last-child:nth-child(odd) h3 { grid-column: 2; grid-row: 2; align-self: start; }
  .ind:last-child:nth-child(odd) p { grid-column: 2; grid-row: 3; align-self: start; }
  .dg-h { display: none; }
  .dg-m { display: block; }
  .ai-fig { padding-block: 28px 20px; }
  .ai-fig .fig-cap { margin-top: 20px; }
  .ai-cols { grid-template-columns: minmax(0, 1fr); }
  .ai-col, .ai-col + .ai-col { padding: 24px 0 26px; border-left: 0; }
  .fo-photo { grid-column: 1 / -1; max-width: 360px; }
  .fo-body { grid-column: 1 / -1; }
  .cta h2, .cta-text { grid-column: 1 / -1; }
}

/* ---------- phones (320 to 600 px): sizes for comfortable reading without zoom */
@media (max-width: 37.5em) {
  :root {
    --header-h: 68px;
    --fs-body: 1.125rem;                          /* 18px */
    --fs-lead: 1.1875rem;                         /* 19px */
    --fs-h2: clamp(2rem, 8.6vw, 2.25rem);         /* 32 to 36px */
    --fs-h1: clamp(1.875rem, 9.4vw, 2.75rem);     /* fits "Промышленность." at 320px */
    --fs-h3: 1.3125rem;                           /* 21px */
    --fs-small: 1rem;
    --fs-label: 0.875rem;                         /* 14px minimum for labels */
    --fs-btn: 1.0625rem;                          /* 17px */
    --section: 72px;
  }
  body { line-height: 1.6; }
  /* with very large text settings, long words wrap instead of forcing sideways scrolling */
  h1, h2, h3, p, li, figcaption, blockquote, .btn, .textlink, .mail { overflow-wrap: anywhere; }
  .logo img { width: 160px; }
  .site-header .lang { display: none; }
  .eyebrow { letter-spacing: 0.12em; }
  .hero { padding-bottom: 8px; }
  .hero h1 { line-height: 1.04; letter-spacing: -0.025em; }
  .hero-copy { gap: 26px; }
  .btns { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; min-height: 56px; }
  .hero .index { display: none; }
  /* hero: render full width, drawing and caption side by side below it, no overlap */
  .hero-fig { display: grid; grid-template-columns: 44% minmax(0, 1fr); column-gap: 16px; row-gap: 14px; align-items: end; max-width: none; }
  .hero-media { display: contents; }
  .hero-media picture { grid-column: 1 / -1; }
  .hero-inset { position: static; width: auto; padding: 6px; grid-column: 1; }
  .hero-fig figcaption { grid-column: 2; padding-left: 0; min-height: 0; margin-top: 0; font-size: 0.875rem; line-height: 1.45; letter-spacing: 0; text-transform: none; }
  .sec-head { row-gap: 20px; margin-bottom: 36px; }
  .sec-head .lead { line-height: 1.55; }
  .dir { gap: 22px; padding: 26px 22px; }
  .dir h3 { font-size: 1.75rem; }
  .tags li { font-size: 0.9375rem; padding: 8px 12px; }
  .dir-for { font-size: 1rem; }
  /* industries: stacked editorial cards */
  .ind-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .ind:nth-child(n) { padding: 26px 0 32px; border-top: 1px solid var(--rule); gap: 14px; }
  .ind:first-child { border-top: 0; }
  .ind:last-child:nth-child(odd) { grid-column: auto; display: flex; }
  .ind .ind-img, .ind:last-child:nth-child(odd) .ind-img { aspect-ratio: 4 / 3; }
  .ind h3 { font-size: var(--fs-h3); line-height: 1.25; }
  .ind p { font-size: 1.0625rem; line-height: 1.55; }
  .ph-note { font-size: 0.9375rem; }
  .sec-foot { justify-content: flex-start; margin-top: 28px; }
  .textlink { font-size: 1.0625rem; }
  .ai-sub { margin-top: 0; }
  .ai-fig .fig-cap { font-size: 0.875rem; letter-spacing: 0.04em; }
  .ai-col h3 { font-size: 1.3125rem; }
  .ai-col p { font-size: 1.125rem; }
  .dg-m p { font-size: 1.125rem; }
  .ft-col .lang { font-size: 0.9375rem; }
  .ai-rule { font-size: 1.1875rem; }
  .fo-photo { max-width: 100%; }
  .fo-body { gap: 24px; }
  .fo-role { font-size: 0.9375rem; letter-spacing: 0.08em; }
  .fo-quote { padding-left: 18px; font-size: 1.375rem; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat, .stat + .stat { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .stat b { font-size: 2.25rem; }
  .stat span { font-size: 1rem; }
  .cta h2 { font-size: var(--fs-h2); line-height: 1.08; }
  .cta-mail { gap: 20px; padding-top: 26px; }
  .mail { font-size: clamp(1.375rem, 7.2vw, 1.75rem); }
  .cta-mail .btns { width: 100%; }
  .ft-col, .ft-col.wide { grid-column: 1 / -1; }
  .ft-col li a { font-size: 1.0625rem; }
  .ft-col h4 { font-size: 0.875rem; }
  .ft-brand p { font-size: 1rem; }
  .ft-bottom { flex-direction: column; }
}
@media (max-width: 22.5em) {
  .menu-btn .label { display: none; }
}

/* =====================================================================================
   V3.0 · inner pages. New classes only, plus the current-page marker in the mobile menu.
   Reuses the approved system: 12-column grid, hairline rules, navy fields, eyebrow
   squares, 4:3 image frames, phone type tokens for readers aged 40+.
   ===================================================================================== */
.mobile-menu li a[aria-current="page"]::after { content: ""; width: 10px; height: 10px; margin-left: auto; align-self: center; background: var(--navy); flex: none; }

/* page header */
.pg-head { padding-block: clamp(40px, 5.5vw, 88px) clamp(64px, 6.5vw, 104px); }
.pg-head.has-index { padding-bottom: 0; }
.pg-head > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; }
.pg-head > .wrap > * { min-width: 0; }
.pg-head .eyebrow { grid-column: 1 / -1; }
.pg-head h1 { grid-column: 1 / span 10; font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: 1.03; letter-spacing: -0.03em; color: var(--navy); max-width: 16em; }
.pg-lead { grid-column: 1 / span 7; font-size: var(--fs-lead); line-height: 1.5; max-width: 36em; }
.pg-index { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 56px); }
.pg-index ol { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pg-index li { min-width: 0; border-right: 1px solid var(--rule); }
.pg-index li:last-child { border-right: 0; }
.pg-index a { display: flex; gap: 14px; align-items: baseline; min-height: var(--tap); padding: 20px 20px 22px 0; text-decoration: none; font-size: var(--fs-small); line-height: 1.4; }
.pg-index li + li a { padding-left: 20px; }
.pg-index b { font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--navy); font-variant-numeric: tabular-nums;  flex: none; white-space: nowrap; overflow-wrap: normal; }
.pg-index a:hover span { color: var(--navy); }

/* shared pieces */
.sec-label { margin-bottom: clamp(28px, 3vw, 40px); }
.statement { display: flex; align-items: baseline; gap: 14px; margin-top: clamp(40px, 4vw, 56px); max-width: 32em;
  font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--navy); }
.statement::before { content: ""; width: 12px; height: 12px; background: currentColor; flex: none; transform: translateY(-0.1em); }
.navy .statement { color: var(--on-navy); }
.fn { margin-top: 20px; font-size: var(--fs-small); color: var(--ink-2); }
.ticks li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--rule); font-size: var(--fs-body); line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: calc(12px + 0.55em); width: 8px; height: 8px; background: var(--navy); }
.navy .ticks li { border-top-color: var(--rule-navy); }
.navy .ticks li::before { background: var(--on-navy); }
.navy .tags li { border-color: var(--rule-navy); color: var(--on-navy); }
.sec-head.wide h2 { grid-column: 1 / span 9; }
.sec-head.wide .lead { grid-column: 1 / span 7; align-self: start; }
.tags-lg li { font-size: 1.0625rem; padding: 10px 16px; }

/* next page */
.pg-next .wrap > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 28px 32px; border-top: 1px solid var(--rule); }
.pg-next .lbl { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.pg-next a { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-height: var(--tap); text-decoration: none; color: var(--navy);
  font-size: clamp(1.375rem, 2.4vw, 2rem); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.pg-next a b { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; font-variant-numeric: tabular-nums;  white-space: nowrap; overflow-wrap: normal; }
.pg-next a .nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.pg-next a .arr { transition: transform .2s; }
.pg-next a:hover .arr { transform: translateX(3px); }

/* What We Do: routes */
.sec-rule { padding-top: 0; }
.sec-rule .sec-head { padding-top: var(--section); border-top: 1px solid var(--rule); }
.routes { border-top: 1px solid var(--navy); }
.route { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; padding-block: 36px 44px; border-bottom: 1px solid var(--rule); }
.route > * { min-width: 0; }
.route-label { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 14px; }
.route-n { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.route h3 { font-size: clamp(1.625rem, 2.4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }
.route-body { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 22px; }
.route-path { font-size: var(--fs-lead); line-height: 1.45; font-weight: 500; color: var(--navy); }
.route-path i, .dir h3 i { font-style: normal; font-weight: 400; }
.route .tags { margin-top: 0; }
.outcome { padding-top: 18px; border-top: 1px solid var(--rule); font-size: var(--fs-lead); line-height: 1.5; }
.outcome b { display: block; margin-bottom: 6px; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }

/* What We Do: four stages (navy) */
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-navy); }
.stage { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 32px 0; min-width: 0; }
.stage + .stage { padding-left: 28px; border-left: 1px solid var(--rule-navy); }
.stage + .stage::before { content: "→"; position: absolute; left: -12px; top: 34px; width: 24px; text-align: center; background: var(--navy); color: var(--on-navy); line-height: 1.6; font-size: 1rem; }
.stage-n { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--on-navy);
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.stage:last-child .stage-n { background: var(--on-navy); color: var(--navy); }
.stage h3 { font-size: var(--fs-h3); line-height: 1.25; color: var(--on-navy); }
.stage .ticks li { font-size: 1rem; padding-block: 10px; color: var(--on-navy-2); }
.stage .ticks li::before { top: calc(10px + 0.55em); }
.stage-foot { margin-top: clamp(40px, 4vw, 56px); padding-top: 32px; border-top: 1px solid var(--rule-navy); display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.stage-foot .statement { margin-top: 0; }
.stage-foot .tags { margin-top: 0; }

/* Industries: sector rows */
.sectors-sec { padding-top: clamp(56px, 5.5vw, 88px); }
.sectors { border-top: 1px solid var(--navy); }
.sector { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 22px; align-items: start; padding-block: 40px 44px; border-bottom: 1px solid var(--rule); }
.sector > * { min-width: 0; }
.sector .ind-img { grid-column: 1 / span 4; }
.sector-body { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 18px; }
.sector-num { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; color: var(--navy); font-variant-numeric: tabular-nums; }
.sector h2 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }
.sector-desc { font-size: var(--fs-lead); line-height: 1.5; max-width: 34em; }
.kw-label { margin-top: 4px; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.sector .tags { margin-top: -6px; }

/* Industries: value chain (navy) */
.vchain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-navy); }
.vc { display: flex; flex-direction: column; gap: 12px; padding: 28px 28px 34px 0; border-bottom: 1px solid var(--rule-navy); min-width: 0; }
.vc:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--rule-navy); }
.vc-n { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--on-navy-2); font-variant-numeric: tabular-nums; }
.vc h3 { font-size: var(--fs-h3); line-height: 1.25; color: var(--on-navy); }
.vc p { font-size: 1rem; line-height: 1.55; color: var(--on-navy-2); }

/* Operating Model: roles, principles, environments */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.role, .env { display: flex; flex-direction: column; gap: 22px; padding: clamp(26px, 2.8vw, 40px); border: 1px solid var(--navy); min-width: 0; }
.navy-cell { background: var(--navy); color: var(--on-navy); }
.role-n { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--navy); }
.navy-cell .role-n { color: var(--on-navy-2); }
.role h3, .env h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--navy); }
.navy-cell h3 { color: var(--on-navy); }
.princ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-navy); }
.pr { display: flex; flex-direction: column; gap: 14px; padding: 32px 40px 40px 0; border-bottom: 1px solid var(--rule-navy); min-width: 0; }
.pr:nth-child(even) { padding: 32px 0 40px 40px; border-left: 1px solid var(--rule-navy); }
.pr-n { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--on-navy-2); font-variant-numeric: tabular-nums; }
.pr h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--on-navy); }
.pr p { font-size: var(--fs-lead); line-height: 1.5; color: var(--on-navy-2); max-width: 30em; }
.env-grid { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; }
.env-grid .joint span { width: 16px; height: 16px; }
.env .ticks li { font-size: 1rem; }

/* Founder */
.fo-head > .wrap { display: block; }
.fo-head { padding-bottom: clamp(64px, 6.5vw, 104px); }
.fo-head .fo-grid { align-items: start; }
.fo-links { display: flex; flex-wrap: wrap; gap: 4px 32px; }
.track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-navy); }
.tr { display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 8px 0; min-width: 0; }
.tr + .tr { padding-left: 28px; border-left: 1px solid var(--rule-navy); }
.tr b { font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; color: var(--on-navy); font-variant-numeric: tabular-nums; }
.tr b small { font-size: 0.42em; font-weight: 500; letter-spacing: 0.02em; }
.tr .nw { white-space: nowrap; }
.tr > span { font-size: 1rem; line-height: 1.5; color: var(--on-navy-2); }
.areas-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
.areas-grid > * { min-width: 0; grid-column: 1 / -1; }
.areas-grid .sec-label { margin-bottom: 0; }
.areas-lead { grid-column: 1 / span 8; font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--navy); max-width: 30em; }
.areas-grid .tags { margin-top: 12px; }

/* Contact */
.ct-sec .sec-label { margin-bottom: clamp(24px, 3vw, 36px); }
.ct-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.ct-grid > * { min-width: 0; }
.ct-main { grid-column: 1 / span 7; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ct-label, .ct-list dt { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-navy-2); }
.ct-main .btns { margin-top: 8px; }
.ct-list { grid-column: 9 / span 4; margin: 0; border-bottom: 1px solid var(--rule-navy); }
.ct-list > div { padding: 18px 0 16px; border-top: 1px solid var(--rule-navy); }
.ct-list dd { margin: 6px 0 0; font-size: var(--fs-lead); line-height: 1.45; }
.ct-list dd a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--on-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.help { border-top: 1px solid var(--navy); }
.help li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 8px; align-items: baseline; padding: 26px 0 28px; border-bottom: 1px solid var(--rule); }
.help li > * { min-width: 0; }
.help .n { grid-column: 1 / span 1; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; color: var(--navy); font-variant-numeric: tabular-nums; }
.help h3 { grid-column: 2 / span 5; font-size: var(--fs-h3); line-height: 1.3; color: var(--navy); }
.help p { grid-column: 8 / span 5; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }

/* ---------- inner pages: responsive */
@media (max-width: 64em) {
  .sec-head.wide h2 { grid-column: 1 / -1; }
  .sec-head.wide .lead { grid-column: 1 / span 9; }
  .pg-head h1 { grid-column: 1 / -1; }
  .pg-lead { grid-column: 1 / span 10; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage:nth-child(3) { padding-left: 0; border-left: 0; }
  .stage:nth-child(3)::before { display: none; }
  .stage:nth-child(n+3) { border-top: 1px solid var(--rule-navy); }
  .vchain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .vc:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--rule-navy); }
  .tr { padding-bottom: 28px; }
  .ct-main { grid-column: 1 / -1; }
  .ct-list { grid-column: 1 / span 8; }
  .route-label { grid-column: 1 / span 5; }
  .route-body { grid-column: 6 / span 7; }
}
@media (max-width: 53.75em) {
  .pg-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-index li:nth-child(2n) { border-right: 0; }
  .pg-index li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .pg-index li:nth-child(2n+1) a { padding-left: 0; }
  .pg-index li:nth-child(2n) a { padding-left: 20px; }
  .pg-index li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .route-label, .route-body { grid-column: 1 / -1; }
  .sector .ind-img { grid-column: 1 / span 5; }
  .sector-body { grid-column: 6 / span 7; }
  .roles { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .princ { grid-template-columns: minmax(0, 1fr); }
  .pr, .pr:nth-child(even) { padding: 28px 0 32px; border-left: 0; }
  .env-grid { grid-template-columns: minmax(0, 1fr); }
  .env-grid .joint { height: 48px; }
  .areas-lead { grid-column: 1 / -1; }
  .sec-head.wide .lead { grid-column: 1 / -1; }
  .ct-list { grid-column: 1 / -1; }
  .help h3 { grid-column: 2 / span 11; }
  .help p { grid-column: 2 / span 11; }
}
@media (max-width: 37.5em) {
  .pg-head { padding-top: 32px; }
  .pg-head > .wrap { row-gap: 22px; }
  .pg-head h1 { font-size: clamp(1.75rem, 8.4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.025em; }
  .pg-lead { grid-column: 1 / -1; line-height: 1.55; }
  .pg-index ol { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .pg-index li, .pg-index li:nth-child(n) { border-right: 0; border-top: 0; border-bottom: 1px solid var(--rule); }
  .pg-index li:nth-child(n) a { padding: 14px 0; font-size: 1.0625rem; }
  .pg-index b { font-size: 0.875rem; }
  .statement { font-size: 1.3125rem; gap: 12px; }
  .ticks li { font-size: 1.125rem; }
  .stage .ticks li, .env .ticks li { font-size: 1.0625rem; }
  .tags-lg li { font-size: 1rem; padding: 8px 12px; }
  .pg-next a { font-size: 1.375rem; }
  .route { padding-block: 28px 32px; row-gap: 18px; }
  .route h3 { font-size: 1.625rem; }
  .outcome { font-size: 1.1875rem; }
  .stages { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .stage, .stage + .stage, .stage:nth-child(n) { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 14px; row-gap: 10px; padding: 0 0 28px; border: 0; }
  .stage + .stage::before { display: none; }
  .stage::after { content: ""; position: absolute; left: calc(1.25rem - 0.5px); top: 2.5rem; bottom: 2px; border-left: 1px solid var(--rule-navy); }
  .stage:last-child::after { display: none; }
  .stage .stage-n { grid-row: 1 / span 2; }
  .stage h3 { padding-top: 0.4rem; font-size: 1.3125rem; }
  .stage .ticks { grid-column: 2; }
  .stage-foot .tags li { font-size: 0.9375rem; }
  .sectors-sec { padding-top: 40px; }
  .sector { padding-block: 26px 32px; row-gap: 16px; }
  .sector:first-child { padding-top: 26px; }
  .sector .ind-img, .sector-body { grid-column: 1 / -1; }
  .sector-body { gap: 14px; }
  .sector h2 { font-size: 1.625rem; line-height: 1.15; }
  .sector-desc { font-size: 1.1875rem; }
  .sector .tags { margin-top: 0; }
  .vchain { grid-template-columns: minmax(0, 1fr); }
  .vc, .vc:nth-child(n) { padding: 22px 0 24px; border-left: 0; }
  .vc h3 { font-size: 1.3125rem; }
  .vc p { font-size: 1.0625rem; }
  .role h3, .env h3, .pr h3 { font-size: 1.5rem; }
  .role, .env { gap: 18px; padding: 24px 22px; }
  .pr p { font-size: 1.1875rem; }
  .track { grid-template-columns: minmax(0, 1fr); }
  .tr, .tr + .tr, .tr:nth-child(n) { padding: 22px 0 24px; border-left: 0; border-top: 1px solid var(--rule-navy); }
  .tr:first-child { border-top: 0; }
  .tr b { font-size: 2.5rem; }
  .tr > span { font-size: 1.0625rem; }
  .areas-lead { font-size: 1.3125rem; }
  .ct-list dd { font-size: 1.1875rem; }
  .ct-main .btns { width: 100%; }
  .help li { grid-template-columns: minmax(0, 1fr); padding: 22px 0 24px; row-gap: 6px; }
  .help .n, .help h3, .help p { grid-column: 1 / -1; }
  .help h3 { font-size: 1.3125rem; }
  .help p { font-size: 1.125rem; }
  .fo-links { flex-direction: column; gap: 0; }
  .ct-list dt, .ct-list dd, .ct-label, .kw-label, .route-n, .outcome b { overflow-wrap: anywhere; }
  .dirs-sec .dir-for { font-size: 1.0625rem; }
}

/* =====================================================================================
   V3.1 · editorial pass, founder page, copy button, readability for readers aged 40+
   ===================================================================================== */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Russian explanation under an English heading */
.term-note { grid-column: 1 / span 7; margin-top: -10px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.navy .term-note { color: var(--on-navy-2); }
.sec-head.wide .term-note { grid-column: 1 / span 9; }
.dg .dg-note { fill-opacity: 0.86; }

/* definition: what a project mandate means */
.defn { margin: 0; padding: 2px 0 2px 22px; border-left: 2px solid var(--navy); display: flex; flex-direction: column; gap: 8px; max-width: 46em; }
.defn dt { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
.defn dd { margin: 0; font-size: var(--fs-lead); line-height: 1.5; }
.navy .defn { border-left-color: var(--on-navy); }
.navy .defn dt { color: var(--on-navy); }
.navy .defn dd { color: var(--on-navy-2); }
.pg-head .defn { grid-column: 1 / span 8; margin-top: 6px; }

/* What We Do: stage foot */
.stage-foot { gap: 28px; }

/* Operating Model: roles rule and the AI part without the diagram */
.roles + .statement { max-width: 40em; }
.ai3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--navy); }
.ai3 li { display: flex; flex-direction: column; gap: 12px; padding: 28px 28px 32px 0; min-width: 0; }
.ai3 li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.ai3 .n { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; color: var(--navy); font-variant-numeric: tabular-nums; }
.ai3 h3 { font-size: var(--fs-h3); line-height: 1.25; color: var(--navy); }
.ai3 p { font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }

/* founder block, split so the name can come before the portrait on smaller screens */
.fo-grid.split { grid-template-rows: auto 1fr; row-gap: 28px; }
.fo-grid.split .fo-photo { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.fo-grid.split .fo-id, .fo-grid.split .fo-rest { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.fo-grid.split .fo-id { grid-row: 1; }
.fo-grid.split .fo-rest { grid-row: 2; }

/* founder figures: previous experience */
.tr-note { max-width: 40em; margin: -8px 0 32px; font-size: var(--fs-lead); line-height: 1.5; color: var(--on-navy-2); }
.track-grp { margin-top: clamp(40px, 4vw, 56px); }
.track-grp h3 { margin-bottom: 4px; font-size: var(--fs-h3); line-height: 1.3; color: var(--on-navy); }
.track-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.track-2 .tr { padding-bottom: 8px; }

.stats-h { margin-bottom: -16px; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.stats-h:lang(ru) { letter-spacing: 0.06em; }

.vc-note { margin-top: 28px; max-width: 46em; font-size: var(--fs-lead); line-height: 1.5; color: var(--on-navy-2); }

/* copy button */
.copy-btn { cursor: pointer; }
.copy-btn[data-state="done"] { background: var(--on-navy); color: var(--navy); border-color: var(--on-navy); }

/* keyboard focus inside the open mobile menu */
.mobile-menu a:focus-visible, .menu-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- V3.1 typography for readers aged 40+ (scoped: inner pages always, homepage when approved) */
.t31 { --fs-label: 0.875rem; --fs-small: 1rem; }
.t31 .eyebrow, .t31 .fo-role { letter-spacing: 0.1em; }
.t31 .eyebrow:lang(ru), .t31 .ct-label:lang(ru), .t31 .ct-list dt:lang(ru), .t31 .defn dt:lang(ru) { letter-spacing: 0.06em; }
.t31 .ct-label, .t31 .ct-list dt, .t31 .kw-label, .t31 .outcome b, .t31 .route-n, .t31 .pg-next .lbl { letter-spacing: 0.1em; }
.t31 .tags li { font-size: 0.9375rem; }
.t31 .hero-fig figcaption, .t31 .fig-cap { font-size: 0.875rem; letter-spacing: 0.02em; text-transform: none; line-height: 1.45; }
.t31 .ph-note, .t31 .fn { font-size: 0.9375rem; }
.t31 .index b, .t31 .pg-index b { font-size: 0.875rem; }
.t31 .stat span { font-size: 1rem; }
.t31 .lang { font-size: 0.875rem; }
.t31 .ft-col h4 { font-size: 0.875rem; letter-spacing: 0.1em; }
.t31 .ft-bottom { font-size: 0.9375rem; }
.t31 .dir-for { font-size: 1rem; }
.t31 .ind p, .t31 .ai-col p, .t31 .vc p, .t31 .stage .ticks li { font-size: 1.0625rem; }
.t31 .tr > span { font-size: 1.0625rem; }

/* ---------- V3.1 responsive */
@media (max-width: 64em) {
  .term-note { grid-column: 1 / -1; }
  .fo-grid.split .fo-photo { grid-column: 1 / span 5; }
  .fo-grid.split .fo-id, .fo-grid.split .fo-rest { grid-column: 6 / span 7; }
  .pg-head .defn { grid-column: 1 / span 10; }
}
@media (max-width: 53.75em) {
  .ai3 { grid-template-columns: minmax(0, 1fr); }
  .ai3 li, .ai3 li + li { padding: 24px 0 26px; border-left: 0; }
  .ai3 li + li { border-top: 1px solid var(--rule); }
  .fo-grid.split { grid-template-rows: none; }
  .fo-grid.split .fo-photo, .fo-grid.split .fo-id, .fo-grid.split .fo-rest { grid-column: 1 / -1; grid-row: auto; }
  .fo-grid.split .fo-photo { max-width: 360px; }
  .track { grid-template-columns: minmax(0, 1fr); }
  .tr, .tr + .tr { padding: 22px 0 24px; border-left: 0; }
  .tr + .tr { border-top: 1px solid var(--rule-navy); }
  .track-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track-2 .tr + .tr { padding-left: 24px; border-left: 1px solid var(--rule-navy); border-top: 0; }
  .pg-head .defn { grid-column: 1 / -1; }
}
@media (max-width: 37.5em) {
  .t31 { --fs-label: 0.9375rem; --fs-small: 1.0625rem; }
  .t31 .tags li { font-size: 1rem; }
  .t31 .ph-note, .t31 .fn { font-size: 1rem; }
  .t31 .pg-index b, .t31 .index b { font-size: 0.9375rem; }
  .t31 .stat span { font-size: 1.0625rem; }
  .t31 .ft-col h4 { font-size: 0.9375rem; }
  .t31 .ft-bottom { font-size: 1rem; }
  .t31 .dir-for, .t31 .dirs-sec .dir-for { font-size: 1.0625rem; }
  .t31 .ft-col .lang { font-size: 1rem; }
  .term-note { margin-top: -6px; font-size: 1.0625rem; }
  .defn { padding-left: 16px; }
  .defn dd { font-size: 1.125rem; }
  .ai3 p { font-size: 1.125rem; }
  .fo-grid.split { row-gap: 24px; }
  .fo-grid.split .fo-photo { max-width: 100%; }
  .fo-grid.split .fo-id, .fo-grid.split .fo-rest { gap: 24px; }
  .tr-note { font-size: 1.125rem; margin-bottom: 24px; }
  .track-2 { grid-template-columns: minmax(0, 1fr); }
  .track-2 .tr + .tr { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-navy); }
  .track-grp h3 { font-size: 1.3125rem; }
}

/* V3.3: note under the page intro (RU What We Do: GCC spelled out), compact and set close to the intro */
.pg-head .lead-note { margin-top: -16px; font-size: var(--fs-small); line-height: 1.5; }
@media (max-width: 53.75em) { .pg-head .lead-note { margin-top: -12px; } }

/* V3.7: homepage hero image (approved workshop image, 1536 x 1024) in the approved 4:5 frame; crop chosen per device */
.hero-media picture img { object-position: 30% 50%; }
@media (max-width: 37.5em) { .hero-media picture img { object-position: 22% 50%; } }
/* V3.7: the email in the contact band and on the Contact page reads as a contact link, not a headline.
   Desktop and tablet 26 px, phone 21 px; the 44 px tap height, underline and mailto stay. */
.mail { font-size: 1.625rem; letter-spacing: -0.01em; text-underline-offset: 6px; }
@media (max-width: 37.5em) { .mail { font-size: 1.3125rem; } }

/* V3.8: homepage founder figures. Long words in the labels (e.g. «коммерциализация») did not fit a 320 px column at 200%
   browser text size. Hyphenation switches on only when the figures column is narrow for the current text size
   (under 15em, i.e. 240 px at normal size, so never at normal text on any screen); a word that still does not fit may
   break inside the column. Normal text sizes render exactly as before. */
.stats { container-type: inline-size; }
.stat span { overflow-wrap: anywhere; }
@container (max-width: 15em) { .stat span { -webkit-hyphens: auto; hyphens: auto; } }

[hidden] { display: none !important; }
@media (max-width: 600px) { .site-header .lang { display: none; } }