/* Golos Text 5.3.0 from @fontsource-variable/golos-text, OFL 1.1 (fonts/OFL.txt). Digits and punctuation live in the latin file. */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/golos-text-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/golos-text-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Colours come from theme_css() in the page: bg, surface, elevated, text-primary, text-mute, border-line, accent, on-accent.
   Everything below is derived from them, so changing the accent in the admin recolours both themes. */
:root {
  color-scheme: light dark;
  --tint: var(--surface);
  --accent-hover: var(--accent);
  --ctl-line: var(--border-line);
  --ctl-fill: var(--surface);
  --glow: rgb(6 10 8 / .14);
  --ghost: var(--surface);
  --r: .625rem;
  --r-l: 1rem;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem;
  --sec: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --pad-l: max(var(--gutter), env(safe-area-inset-left));
  --pad-r: max(var(--gutter), env(safe-area-inset-right));
  --bleed: max(var(--pad-r), (100vw - 90rem) / 2 + var(--gutter));
  --t0: 1rem;
  --t1: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --t2: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);
  --t3: clamp(1.3125rem, 1.2rem + .5vw, 1.625rem);
  --t4: clamp(1.875rem, 1.35rem + 2.4vw, 3.25rem);
  --t5: clamp(2.25rem, 1.5rem + 2.5vw, 2.75rem);
  /* Motion tokens: the only durations and easing on the site. */
  --d1: .16s;   /* press, colour */
  --d2: .34s;   /* hover moves, sheets */
  --d3: .72s;   /* reveals, entrance */
  --d4: 1.1s;   /* photos: mask, settle, zoom */
  --step: .07s; /* stagger */
  --ease: cubic-bezier(.22, .8, .24, 1);
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --tint: color-mix(in srgb, var(--accent) 9%, var(--bg));
    --accent-hover: color-mix(in srgb, var(--accent) 84%, var(--text-primary));
    --ctl-line: color-mix(in srgb, var(--text-primary) 22%, transparent);
    --ctl-fill: color-mix(in srgb, var(--accent) 10%, transparent);
    --glow: color-mix(in srgb, var(--accent) 24%, transparent);
    --ghost: color-mix(in srgb, var(--accent) 10%, var(--bg));
  }
  /* Only from here does the text leave part of her uncovered, so she can be stronger. */
  @media (min-width: 64rem) { :root { --ghost: color-mix(in srgb, var(--accent) 14%, var(--bg)); } }
}
/* The header button sets data-theme; form controls and scrollbars follow it too. */
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--bg); scroll-padding-block: 1rem 6rem; scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }
html:has(.menu:popover-open) { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: 400 var(--t1)/1.55 "Golos Text", Arial, sans-serif;
  font-synthesis: none;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--t5); line-height: 1.05; letter-spacing: -.03em; }
h2 { font-size: var(--t4); max-width: 24ch; }
h3, h4 { font-size: var(--t3); letter-spacing: -.012em; line-height: 1.2; }
em { font-style: normal; color: var(--accent); }
p, li, dd { text-wrap: pretty; }
p:empty, h2:empty, h3:empty { display: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
a, button { touch-action: manipulation; }
img { display: block; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--pad-l) var(--pad-r); }
.section { padding-block: var(--sec); }
.tinted { background: var(--surface); }
.lead { margin-block-start: var(--s2); max-width: 38rem; font-size: var(--t2); line-height: 1.45; color: var(--text-mute); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: lining-nums; }
.nw { white-space: nowrap; }
/* In large type a compound keeps together while it fits and may still break when the column is narrower than the word. */
h1 .nw, h2 .nw, h3 .nw, .quote .nw, .brand .nw { display: inline-block; white-space: normal; }
.skip { position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 30; padding: .75rem 1rem; background: var(--accent); color: var(--on-accent); border-radius: var(--r); transform: translateY(-200%); }
.skip:focus { transform: none; }
#top-edge { position: absolute; inset-block-start: 0; width: 1px; height: 2rem; pointer-events: none; }

/* Icons: Phosphor regular, inline sprite. */
.i { width: 1.375rem; height: 1.375rem; flex: none; fill: currentColor; }
.mark { width: 2.25rem; height: 2.25rem; flex: none; fill: var(--accent); }

/* Controls. One radius everywhere: --r for controls, cards and framed images, --r-l for sheets. Images that run to the screen edge have none.
   The main action is filled. Every secondary control has one quiet style: a thin line, no fill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 3rem; padding: .5rem 1.125rem;
  border: 1px solid transparent; border-radius: var(--r);
  font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; background: none;
}
.btn-main { background: var(--accent); color: var(--on-accent); }
.btn-line, .icon-btn { border: 1px solid var(--ctl-line); color: var(--text-primary); background: none; }
.btn-lg { min-height: 3.75rem; padding-inline: 1.5rem; font-size: 1.1875rem; }
.btn-wide { width: 100%; }
.btn-text { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 .625rem; min-width: 0; }
.icon-btn { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--r); cursor: pointer; }
.btn-main:active { background: var(--accent-hover); }
.btn-line:active, .icon-btn:active { background: var(--ctl-fill); }
@media (hover: hover) {
  .btn-main:hover { background: var(--accent-hover); }
  .btn-line:hover, .icon-btn:hover { background: var(--ctl-fill); border-color: var(--text-primary); }
  a:hover { text-decoration-thickness: 2px; }
}

/* Header: scrolls away on phones, where the dock takes over; sticks from tablet up and carries the number. */
.top { position: relative; background: var(--bg); border-block-end: 1px solid var(--border-line); }
.top::after { content: ""; position: absolute; inset: 100% 0 auto; height: 1.25rem; background: linear-gradient(var(--glow), transparent); opacity: 0; pointer-events: none; }
.scrolled .top::after { opacity: .7; }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-height: 4rem; padding-block: .625rem; }
.brand { display: inline-flex; flex: 0 999 auto; align-items: center; gap: .75rem; min-height: 2.75rem; min-width: min(11rem, 45%); margin-inline-end: auto; line-height: 1.2; text-decoration: none; }
.brand b { display: block; font-weight: 600; letter-spacing: -.01em; }
.brand small { display: block; font-size: var(--t0); color: var(--text-mute); }
.top-call, .top-menu { display: none; }
.top-call { font-size: var(--t0); padding-inline: .875rem; }
/* The button shows the theme it switches to. */
.theme-btn .i-sun, :root[data-theme=dark] .theme-btn .i-moon { display: none; }
:root[data-theme=dark] .theme-btn .i-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .theme-btn .i-moon { display: none; }
  :root:not([data-theme=light]) .theme-btn .i-sun { display: block; }
}

/* Menu: popover, so it opens without JS. Browsers without popover keep it in the header flow as a row of links. */
.menu { color: var(--text-primary); }
.menu nav { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.menu nav a { position: relative; display: flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.menu::backdrop, .cats::backdrop { background: rgb(6 10 8 / .55); }
.menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; }
.menu-head b { font-weight: 600; }
@supports not selector(:popover-open) { .menu-head, .dock-menu, .top-menu { display: none !important; } }
@supports selector(:popover-open) {
  /* The menu is out of flow here, so nothing needs a second row: a long name shrinks instead of pushing the buttons down. */
  .top-in { flex-wrap: nowrap; }
  @media (max-width: 71.99rem) {
    .menu { position: fixed; inset: auto 0 0; z-index: 20; width: 100%; max-width: none; max-height: 85vh; max-height: 85dvh; margin: 0; overflow: auto; overscroll-behavior: contain; padding: var(--s1) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom)); border: 0; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--elevated); }
    .menu nav { display: block; }
    .menu nav a { min-height: 3.5rem; font-size: var(--t2); font-weight: 500; border-block-start: 1px solid var(--border-line); }
  }
  @media (min-width: 48rem) and (max-width: 71.99rem) {
    .menu { inset: 4.5rem var(--gutter) auto auto; width: 20rem; border-radius: var(--r-l); box-shadow: 0 1rem 3rem rgb(6 10 8 / .22); padding-block-end: var(--s2); }
  }
}
/* One scrim for both sheets, in normal flow, so it fades out in every browser. */
.scrim { position: fixed; inset: 0; z-index: 15; background: rgb(6 10 8 / .55); opacity: 0; pointer-events: none; }
@supports selector(:has(a)) {
  .menu::backdrop, .cats::backdrop { background: transparent; }
  html:has(dialog[open]) .scrim, html:has(.menu:popover-open) .scrim { opacity: 1; }
}

/* Dock: the call is under the thumb on every phone screen. Sticky, so it reserves its own height and the footer is never covered. */
.dock {
  position: sticky; inset-block-end: 0; z-index: 10;
  display: flex; gap: var(--s1);
  padding: var(--s1) max(.75rem, env(safe-area-inset-right)) calc(var(--s1) + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  background: var(--bg); border-block-start: 1px solid var(--border-line);
}
.dock::before { content: ""; position: absolute; inset: auto 0 100%; height: 1rem; background: linear-gradient(transparent, var(--glow)); opacity: 0; pointer-events: none; }
.scrolled .dock::before { opacity: .7; }
.dock .btn-main { flex: 1; min-width: 0; min-height: 3.5rem; font-size: 1.0625rem; }
.dock .btn-text { flex-direction: column; align-items: flex-start; }
.dock .num { font-weight: 500; }
.dock-menu { width: 3.5rem; height: auto; min-height: 3.5rem; }
.dock-menu:only-child { width: 100%; }
@media (min-width: 26rem) { .dock .btn-text { flex-direction: row; } }

/* Image frames reserve their own space, so a late or odd-shaped file cannot shift the page. Any aspect ratio works: object-fit crops, and the upper part of the frame wins for a face. */
.frame { display: block; position: relative; overflow: hidden; background: var(--surface); border-radius: var(--r); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-photo img, .about-photo img { object-position: 50% 25%; }

/* Hero: text on the left; the image runs off the right edge and stands on the line. */
.hero { position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--text-primary); transform-origin: 0 50%; }
.hero-grid { display: grid; gap: var(--s4); padding-block-start: var(--s4); }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-width: 0; }
.hero-solo .hero-text { padding-block-end: var(--s5); }
.who { margin-block-end: -.5rem; line-height: 1.35; }
.who b { display: block; font-weight: 600; }
.who span { color: var(--text-mute); }
.sub { max-width: 38rem; font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem); line-height: 1.45; color: var(--text-mute); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.hero-call { display: none; }
.more { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 500; text-decoration-line: underline; }
.hero-photo { aspect-ratio: 4 / 5; margin-inline: calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r)); border-radius: 0; }

/* About: heading and credentials stay together in a rail while the text passes beside them. The portrait slot is for a real photo only. */
.about-grid { display: grid; gap: var(--s4); }
.about-rail { display: grid; align-content: start; gap: var(--s4); min-width: 0; }
.idcard { display: grid; align-content: start; gap: var(--s3); padding: var(--s3); background: var(--elevated); border: 1px solid var(--border-line); border-radius: var(--r); }
.idcard.has-photo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.about-photo { aspect-ratio: 3 / 4; }
.about-body { min-width: 0; max-width: 48rem; }
.about-body > p { margin-block-start: var(--s2); color: var(--text-mute); }
.quote { margin-block-end: var(--s4); font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem); font-weight: 500; line-height: 1.25; letter-spacing: -.018em; text-wrap: pretty; }
.principles { display: grid; gap: var(--s4); margin-block-start: var(--s5); container-type: inline-size; }
.principles h3 { font-size: clamp(1.1875rem, 1.1rem + .25vw, 1.3125rem); }
.principles p { margin-block-start: .375rem; color: var(--text-mute); }
@container (min-width: 36rem) {
  .principles li { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s3); }
  .principles p { margin: 0; }
}

/* Themis stands behind the About text. She holds still while the text passes over her, then lands on the edge of the next section.
   The file is only a mask: her colour is a theme token, so she follows the accent and the device theme.
   overflow: clip keeps sticky working; where it is missing she simply scrolls with the page. */
.has-themis { position: relative; isolation: isolate; }
.themis { --h: clamp(30rem, 100vh - 6rem, 60rem); position: absolute; inset: var(--s5) 0 0; z-index: -1; overflow: hidden; overflow: clip; pointer-events: none; }
.themis div {
  position: sticky; inset-block-start: 1rem;
  width: calc(var(--h) * .4954); height: var(--h);
  margin-inline: auto -3rem;
  background: var(--ghost);
  -webkit-mask: url(img/themis.svg) center / contain no-repeat;
  mask: url(img/themis.svg) center / contain no-repeat;
}

/* Facts: label over value, so a long value never collides with its label. */
.facts { display: grid; align-content: start; gap: var(--s2); }
.facts dt { font-size: var(--t0); color: var(--text-mute); line-height: 1.35; }
.facts dd { font-weight: 500; line-height: 1.35; }
.facts a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -.625rem; }

/* Practice: wrapping flex row. Items grow to fill their row, so no count and no width can leave an empty cell. */
.cards { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s4); }
.card {
  position: relative; display: flex; flex: 1 1 min(19rem, 100%); min-width: 0;
  background: var(--elevated); border: 1px solid var(--border-line); border-radius: var(--r);
  container-type: inline-size;
}
.card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 1px var(--accent), 0 1.5rem 2.5rem -1rem var(--glow); opacity: 0; pointer-events: none; }
.card-large { flex: 1 1 100%; }
.card-in { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.card-body { display: flex; flex-direction: column; flex: 1; gap: .75rem; padding: var(--s3); min-width: 0; }
.card p, .card-list { color: var(--text-mute); }
.card-large h3 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; }
.card-list { display: grid; gap: .375rem; }
/* Each example starts with a short accent rule, the brand line in miniature, so a list reads as separate items. */
.card-list li, .cats-list li { position: relative; padding-inline-start: 1.125em; }
.card-list li::before, .cats-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: calc(.775em - 1px); width: .5em; height: 2px; background: var(--accent); }
.card-accent .card-list li::before { background: currentColor; }
.card-more {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-block-start: auto; padding: .75rem 0 0; width: 100%; min-height: 2.75rem;
  border: 0; background: none; font-weight: 600; color: var(--accent); cursor: pointer; text-align: start;
}
.card-more::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.card-more:focus-visible { outline: none; }
.card-more:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.card-more.quiet:focus-visible::after { outline: none; }
.card-img { aspect-ratio: 16 / 9; border-end-start-radius: 0; border-end-end-radius: 0; }
.card-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.card-accent p, .card-accent .card-list, .card-accent .card-more { color: inherit; }
.card-accent .card-more:focus-visible::after { outline-color: var(--text-primary); }
/* A narrow large card previews two rows: the rest are one tap away in the sheet, and the phone stays short. */
@container (max-width: 43.99rem) {
  .card-large .card-list li:nth-child(n+3) { display: none; }
}
/* A card that grew wide puts the image beside the text instead of a banner above it. */
@container (min-width: 44rem) {
  .card-photo:not(.card-large) .card-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .card-photo:not(.card-large) .card-img { aspect-ratio: auto; min-height: 14rem; border-radius: var(--r) 0 0 var(--r); }
  .card:not(.card-photo) .card-list { grid-template-columns: 1fr 1fr; gap: .375rem var(--s3); }
  .card-large .card-body { padding: var(--s4); }
}
@container (min-width: 52rem) {
  .card-large.card-photo .card-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .card-large .card-img { order: 2; aspect-ratio: auto; min-height: 22rem; border-radius: 0 var(--r) var(--r) 0; }
}

/* Categories: native modal. Bottom sheet on phones, centred from tablet up. Focus lands on the sheet itself, so a touch shows no ring and the first Tab reaches the close button. */
.cats { position: fixed; inset: 0; z-index: 20; width: 100%; max-width: 100%; max-height: 85vh; max-height: 85dvh; margin: auto 0 0; padding: 0; border: 0; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--elevated); color: var(--text-primary); overflow: auto; overscroll-behavior: contain; }
.cats:focus, .cats:focus-visible { outline: none; }
.cats-head { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s3) var(--s2); background: var(--elevated); }
.cats-head p { margin-block-start: .25rem; color: var(--text-mute); }
.cats-list { display: grid; gap: .625rem; padding: 0 var(--s3) var(--s3); }
.cats-list:last-child { padding-block-end: calc(var(--s3) + env(safe-area-inset-bottom)); }
.cats-foot { position: sticky; inset-block-end: 0; padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--elevated); border-block-start: 1px solid var(--border-line); }

/* Stages: numbered rows, each under its own rule. The rule draws itself as the stage reaches the reading zone. Beside the photo on large screens, across the page when there is none. */
.approach-split { display: grid; gap: var(--s4); }
.approach-img { aspect-ratio: 4 / 3; }
.approach-text { min-width: 0; }
.steps { margin-block-start: var(--s4); }
.step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 var(--s2); padding-block: var(--s3) var(--s4); border-block-start: 1px solid var(--border-line); }
.step:last-child { padding-block-end: 0; }
.step::before { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: var(--accent); transform-origin: 0 50%; }
.step-n { font-size: var(--t4); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: lining-nums; }
.step-body { min-width: 0; }
.step p { margin-block-start: .5rem; color: var(--text-mute); max-width: 44ch; }

/* Consultation: the number is the moment. */
.consult { background: var(--tint); }
.consult-grid { display: grid; gap: var(--s4); }
.consult-text { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); min-width: 0; }
.consult-img { aspect-ratio: 16 / 9; }
.consult-reach { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.bignum { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .25em; min-height: 2.75rem; font-size: clamp(1.625rem, 9.5vw, 7rem); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; color: var(--accent); text-decoration: none; font-variant-numeric: lining-nums; }
.bignum::after { content: ""; position: absolute; inset: auto 0 -.06em; height: .05em; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; }

/* Contacts: the band runs edge to edge. It is a view of the city, not of the office; the map is a plain link. */
.band { aspect-ratio: 16 / 9; border-radius: 0; }
.contact-grid { display: grid; gap: var(--s4); }
.contact-text { min-width: 0; }
.contact-side { display: grid; justify-items: start; gap: var(--s3); min-width: 0; }
.contact-side > div { justify-self: stretch; }
.contact-side dd { font-size: var(--t2); }
.map-link .i:last-child { width: 1.125rem; height: 1.125rem; }

/* Footer */
.foot { background: var(--surface); border-block-start: 2px solid var(--text-primary); padding-block: var(--s5) var(--s4); font-size: var(--t0); }
.foot-grid { display: grid; gap: var(--s4); }
.foot-brand { display: flex; gap: .75rem; }
.foot p { color: var(--text-mute); }
.foot .foot-title { font-weight: 600; color: var(--text-primary); }
.foot .foot-h { margin-block-end: .25rem; font-weight: 600; color: var(--text-primary); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-col a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot-col p { align-self: stretch; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem var(--s4); }
.foot-note { flex-basis: 100%; max-width: 70ch; margin-block-start: var(--s2); text-wrap: pretty; }

/* Long Russian words on narrow screens: only really long ones break, with a hyphen. */
@media (max-width: 47.99rem) {
  p, li, dd { -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; hyphenate-limit-chars: 14 6 6; }
}

/* Tablet */
@media (min-width: 48rem) {
  html { scroll-padding-block: 6rem 1rem; }
  .top { position: sticky; inset-block-start: 0; z-index: 10; }
  .top-in { flex-wrap: nowrap; }
  .top-call { display: inline-flex; }
  .top-menu { display: inline-grid; }
  .dock { display: none; }
  .hero-call { display: inline-flex; }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; gap: var(--s5); padding-block-start: 0; }
  .hero-solo .hero-grid { grid-template-columns: 1fr; padding-block-start: var(--s5); }
  .themis div { inset-block-start: 5rem; margin-inline-end: calc(var(--bleed) - var(--gutter)); }
  .hero-text { align-self: center; padding-block: var(--s5); }
  .hero-photo { aspect-ratio: auto; min-height: 28rem; margin-inline: 0 calc(-1 * var(--bleed)); }
  /* The photo holds still while the stages pass beside it, so no space dies under it. */
  .approach-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; column-gap: clamp(2rem, 6vw, 6rem); }
  .approach-img { position: sticky; inset-block-start: 6rem; aspect-ratio: auto; height: min(calc(100vh - 8rem), 44rem); height: min(calc(100dvh - 8rem), 44rem); }
  .step { grid-template-columns: 3.5rem minmax(0, 1fr); padding-block: var(--s4) var(--s5); }
  .approach-wide .steps { display: flex; flex-wrap: wrap; row-gap: var(--s5); margin-block-start: var(--s5); }
  .approach-wide .step { flex: 1 1 15rem; display: block; padding-block-end: 0; padding-inline-end: var(--s4); }
  .approach-wide .step-n { display: block; margin-block-end: var(--s2); }
  .consult-grid:has(.consult-img) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s5); }
  .consult-img { aspect-ratio: auto; min-height: 20rem; }
  .consult-grid:has(.consult-img) .bignum { font-size: clamp(2.5rem, 5.8vw, 5.5rem); }
  .band { aspect-ratio: 21 / 8; }
  .cats { width: min(40rem, 100vw - 3rem); margin: auto; border-radius: var(--r-l); }
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s5); align-items: start; }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr; }
  .foot-legal { grid-column: 1 / -1; padding-block-start: var(--s3); border-block-start: 1px solid var(--border-line); }
}

/* Desktop */
@media (min-width: 64rem) {
  :root { --t5: clamp(2.625rem, 4.1vw, 3.75rem); }
  .hero-grid { min-height: min(calc(100vh - 4.0625rem), 47rem); min-height: min(calc(100dvh - 4.0625rem), 47rem); }
  .hero-solo .hero-grid { min-height: 0; }
  .hero-solo h1 { font-size: clamp(3rem, 5.4vw, 5rem); }
  .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .about-rail { position: sticky; inset-block-start: 6rem; }
  .idcard.has-photo { grid-template-columns: minmax(0, 1fr); }
  .about-photo { height: min(42vh, 24rem); height: min(42dvh, 24rem); aspect-ratio: auto; }
}

/* The menu goes inline only where it fits on one line next to the number. */
@media (min-width: 72rem) {
  .top-menu { display: none; }
  .menu { display: block; position: static; inset: auto; width: auto; height: auto; margin: 0 var(--s2); padding: 0; border: 0; background: none; overflow: visible; flex: 0 99 auto; font-size: var(--t0); }
  .menu-head { display: none; }
  .menu nav a::after { content: ""; position: absolute; inset: auto 0 .4rem; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
}

/* ---------- Motion. Everything below exists only for prefers-reduced-motion: no-preference, so reduce is a fully static page.
   Only transform, opacity and clip-path move; colour changes on controls are the one exception. Pre-reveal states also need .anim,
   which the head script sets and takes back if site.js never runs. Without JS the page is simply all there. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Feedback: every control answers on touch too. */
  .btn { transition: background-color var(--d1) ease, border-color var(--d1) ease, color var(--d1) ease, transform var(--d1) var(--ease); }
  .icon-btn { transition: background-color var(--d1) ease, border-color var(--d1) ease, transform var(--d1) var(--ease); }
  .btn:active { transform: scale(.975); }
  .icon-btn:active { transform: scale(.92); }
  .more:active, .facts a:active, .foot-col a:active, .bignum:active, .menu nav a:active, .brand:active { opacity: .62; }
  .card:has(.card-more:active) { transform: scale(.99); }
  /* If the device changes theme while the page is open, the main surfaces follow smoothly. */
  html, body, .top, .dock, .tinted, .consult, .foot, .idcard, .themis div { transition: background-color var(--d2) ease, color var(--d2) ease; }
  .card { transition: transform var(--d2) var(--ease), background-color var(--d2) ease; }
  .card::before, .scrim, .top::after, .dock::before { transition: opacity var(--d2) var(--ease); }
  .more, .facts a, .foot-col a, .bignum, .menu nav a, .brand { transition: opacity var(--d1) ease, color var(--d1) ease; }
  .i, .mark, .mark path, .card-img img, .bignum::after, .menu nav a::after { transition: transform var(--d2) var(--ease); }
  .card-img img { transition-duration: var(--d4); }

  @media (hover: hover) {
    .card:hover { transform: translateY(-.25rem); }
    .card:hover::before { opacity: 1; }
    .card:hover .card-img img { transform: scale(1.05); }
    .card-more:hover .i, .card:hover .card-more .i { transform: rotate(90deg); }
    .btn:hover .i-phone { transform: rotate(-12deg) scale(1.08); }
    .btn:hover .i-envelope, .btn:hover .i-pin { transform: translateY(-2px); }
    .btn:hover .i-out { transform: translate(2px, -2px); }
    .icon-btn:hover .i-x { transform: rotate(90deg); }
    .icon-btn:hover .i-list { transform: scaleX(.85); }
    .icon-btn:hover .i-sun { transform: rotate(45deg); }
    .icon-btn:hover .i-moon { transform: rotate(-16deg); }
    .more:hover .i { transform: translateX(.375rem); }
    .brand:hover .mark-sh { transform: translate(-1px, -1px); }
    .brand:hover .mark-o { transform: translate(1px, 1px); }
    .bignum:hover::after, .menu nav a:hover::after, .menu nav a:focus-visible::after { transform: scaleX(1); }
    .facts a:hover, .foot-col a:hover { color: var(--accent); }
  }

  /* Sheets slide up on phones, settle in the middle from tablet up. Close animates too; where allow-discrete is missing they simply appear and go. */
  .cats, .menu {
    transition: transform var(--d2) var(--ease), opacity var(--d2) var(--ease), display var(--d2) allow-discrete, overlay var(--d2) allow-discrete;
  }
  .cats { transform: translateY(100%); }
  .cats[open] { transform: none; }
  @starting-style { .cats[open] { transform: translateY(100%); } }
  @media (max-width: 71.99rem) {
    .menu { transform: translateY(100%); }
    .menu:popover-open { transform: none; }
    @starting-style { .menu:popover-open { transform: translateY(100%); } }
  }
  @media (min-width: 48rem) {
    .cats { opacity: 0; transform: translateY(1rem) scale(.98); }
    .cats[open] { opacity: 1; transform: none; }
    @starting-style { .cats[open] { opacity: 0; transform: translateY(1rem) scale(.98); } }
  }
  @media (min-width: 48rem) and (max-width: 71.99rem) {
    .menu { opacity: 0; transform: translateY(-.5rem); }
    .menu:popover-open { opacity: 1; transform: none; }
    @starting-style { .menu:popover-open { opacity: 0; transform: translateY(-.5rem); } }
  }

  /* Page load: the line draws, the text rises in sequence, the photo opens and settles. The photo is visible from its first paint, so LCP does not wait for this. */
  @keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } }
  @keyframes drop { from { transform: translateY(-100%); } }
  @keyframes lift { from { transform: translateY(100%); } }
  @keyframes draw { from { transform: scaleX(0); } }
  @keyframes open { from { clip-path: inset(0 0 14% 0); transform: scale(1.035); } }
  .anim .top { animation: drop var(--d3) var(--ease) backwards; }
  .anim .dock { animation: lift var(--d3) var(--ease) .24s backwards; }
  .anim .hero::after { animation: draw var(--d4) var(--ease) backwards; }
  .anim .hero-photo { animation: open var(--d4) var(--ease) backwards; transform-origin: 100% 100%; }
  .anim .hero-text > * { animation: rise var(--d3) var(--ease) backwards; }
  .anim .hero-text > :nth-child(1) { animation-delay: calc(var(--step) * 1); }
  .anim .hero-text > :nth-child(2) { animation-delay: calc(var(--step) * 2); }
  .anim .hero-text > :nth-child(3) { animation-delay: calc(var(--step) * 3); }
  .anim .hero-text > :nth-child(4) { animation-delay: calc(var(--step) * 4); }
  /* The header mark: Ш and О come together into one link. Hover parts them by one unit through a transition, so leaving does not replay the entrance. */
  @keyframes mark-sh { from { opacity: 0; transform: translate(-6px, -6px); } }
  @keyframes mark-o { from { opacity: 0; transform: translate(6px, 6px); } }
  .anim .mark-sh { animation: mark-sh var(--d3) var(--ease) backwards; }
  .anim .mark-o { animation: mark-o var(--d3) var(--ease) var(--step) backwards; }

  /* Scroll reveal, once. site.js adds .in as the element enters view and removes both classes when it is done. */
  .anim .r { opacity: 0; transform: translateY(1.25rem); }
  .anim .r.in {
    opacity: 1; transform: none;
    transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease);
    transition-delay: calc(var(--i, 0) * var(--step));
  }
  .anim .frame.r { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
  .anim .frame.r.in { clip-path: inset(0); transition: clip-path var(--d4) var(--ease); }
  .anim .band.r { clip-path: inset(20% 0 20% 0); }
  /* Themis rises from her feet as the section arrives. */
  .anim .themis .r { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }
  .anim .themis .r.in { clip-path: inset(0); transition: clip-path var(--d4) var(--ease); }
  .anim .card.r img { transform: scale(1.08); }
  .anim .card.r.in img { transform: none; transition: transform var(--d4) var(--ease); }
  /* The big number arrives piece by piece. */
  .anim .bignum.r { opacity: 1; transform: none; }
  .anim .bignum.r .nw { display: inline-block; opacity: 0; transform: translateY(.35em); }
  .anim .bignum.r.in .nw { opacity: 1; transform: none; transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease); }
  .anim .bignum.r.in .nw:nth-child(2) { transition-delay: calc(var(--step) * 2); }
  .anim .bignum.r.in .nw:nth-child(3) { transition-delay: calc(var(--step) * 4); }
  /* A stage waits with its rule undrawn and its figure quiet, then activates and stays active. */
  .anim .step:not(.on)::before { transform: scaleX(0); }
  .anim .step:not(.on) .step-n { opacity: .4; transform: translateX(-.25rem); }
  .step::before { transition: transform var(--d4) var(--ease); }
  .step-n { transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease); }

  /* Depth: large photos drift slightly against the page. Without scroll timelines they stay still. */
  @supports (animation-timeline: view()) {
    @keyframes depth { from { transform: scale(1.1) translateY(-3%); } to { transform: scale(1.1) translateY(3%); } }
    @keyframes leave { to { transform: scale(1.08) translateY(3%); } }
    .band img, .consult-img img { animation: depth linear both; animation-timeline: view(); }
    .approach-split { view-timeline-name: --stages; }
    .approach-img img { animation: depth linear both; animation-timeline: --stages; }
    .hero-photo img { animation: leave linear both; animation-timeline: view(); animation-range: exit; }
    /* The text moves at full speed, she barely moves: that difference is the depth. */
    @keyframes drift { from { transform: translateY(3%); } to { transform: translateY(-3%); } }
    .has-themis { view-timeline-name: --about; }
    .themis div { animation: drift linear both; animation-timeline: --about; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Paper gets everything, whatever state the page was in. */
@media print {
  .r, .r *, .top, .mark path, .dock,.hero::after, .hero-photo, .hero-text > *, .step *, .step::before { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
  .dock, .scrim, .skip, .top-menu, .themis { display: none !important; }
}