/* Onest and IBM Plex Mono (SIL Open Font License), cyrillic and latin subsets, served from /fonts. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibmplexmono-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibmplexmono-400-latin.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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibmplexmono-500-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibmplexmono-500-latin.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; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/onest-400-800-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/onest-400-800-latin.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; }
/* Public content uses semantic HTML. Theme selection is entirely CSS-driven.

   THE TOKENS. The file has two layers of custom properties, and every rule below the END OF TOKENS mark reads them.
   1. Inputs: the knob contract. A tenant theme (/theme.css) sets these properties and no other ones:
      the 7 --x-color-* (light and dark), --on-accent (light and dark; the server picks it for the contrast with the
      primary color), --mark-1..3, --ink and its neutrals (--ink-line, --ink-line-strong, --ink-band-surface,
      --ink-band-border, --ink-band-muted; the server mixes them from the ink), --on-photo-price, --font-text,
      --font-heading, --font-mono, --weight-strong, --weight-heavy, --text-scale, --radius-scale, --density, and
      --button-radius (unset in the design: each button keeps its own radius).
      The html element can carry data-header="dark", data-decor="line|none" and data-catalog-icon="lines|dots|none".
      The layout sets them from the theme; the rules below read them.
   2. Roles: internal properties. They derive from the inputs or keep a fixed value of the design. A theme never sets them.
   Every difference of the dark theme is a color that light-dark() picks, so the color-scheme of :root switches the
   whole theme. The media blocks repeat the dark values for a browser without light-dark().
   With the default inputs the site renders the design as it is. A literal color, font size or radius below the mark
   fails site_css_test. docs/specs/006-design-system.md holds the contract and the presets of the knobs. */

/* ---- 1. Inputs ---- */
:root {
  color-scheme: light dark;
  --x-color-bg: #f5f4f0;
  --x-color-surface: #ffffff;
  --x-color-text: #141414;
  --x-color-text-muted: #5e5b55;
  --x-color-border: #e3e1db;
  --x-color-primary: #2a4de0;
  --x-color-warning: #d97706;
  --on-accent: #ffffff;
  /* The marks: the eyebrow squares, the gradient stripe and text, the badge on a card, the highlight on an ink band. */
  --mark-1: #00a0df;
  --mark-2: #e5007e;
  --mark-3: #ffd200;
  /* The ink: the dark bands (the top bar, the footer, the posters, the steps block). The same in both themes. */
  --ink: #141414;
  --ink-line: #2e2d2b;
  --ink-line-strong: #3a3936;
  --ink-band-surface: #1c1c1a;
  --ink-band-border: #33322e;
  --ink-band-muted: #a3a097;
  /* The price on a photo under a dark scrim. */
  --on-photo-price: #ffd200;
  --font-text: Onest, system-ui, sans-serif;
  --font-heading: var(--font-text);
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* The weight of the strong text (headings, prices, phones) and of the heavy text (the largest headings). */
  --weight-strong: 700;
  --weight-heavy: 800;
  /* The knobs multiply the design values: the text size, the corner radius, the layout spacing. */
  --text-scale: 1;
  --radius-scale: 1;
  --density: 1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --x-color-bg: #121211;
    --x-color-surface: #1c1c1a;
    --x-color-text: #f2f1ed;
    --x-color-text-muted: #a3a097;
    --x-color-border: #33322e;
    --x-color-primary: #6b86ff;
    --x-color-warning: #fbbf24;
    --on-accent: #141414;
  }
}
@supports (color: light-dark(white, black)) {
  :root {
    --x-color-bg: light-dark(#f5f4f0, #121211);
    --x-color-surface: light-dark(#ffffff, #1c1c1a);
    --x-color-text: light-dark(#141414, #f2f1ed);
    --x-color-text-muted: light-dark(#5e5b55, #a3a097);
    --x-color-border: light-dark(#e3e1db, #33322e);
    --x-color-primary: light-dark(#2a4de0, #6b86ff);
    --x-color-warning: light-dark(#d97706, #fbbf24);
    --on-accent: light-dark(#ffffff, #141414);
  }
}

/* ---- 2. Roles ---- */
/* Colors that follow the theme. */
:root {
  --tile: #eceae3;
  /* The ground of the map drawn in CSS for an address without an image. */
  --map-ground: color-mix(in srgb, var(--tile) 70%, #d9d4c4);
  /* The head band and the row hover of a price table. A band lighter than the card surface stays visible in the dark theme. */
  --price-tint: color-mix(in srgb, var(--x-color-bg) 45%, var(--x-color-surface));
  /* The hover shadow of a card: the card stays in place and only its shadow grows. The dark theme adds a thin ring. */
  --card-hover-shadow: 0 0 0 1px transparent, 0 1px 2px rgb(20 20 20 / .06), 0 18px 40px -12px rgb(20 20 20 / .22);
  /* The edge of an ink surface: none on the light page, a thin line on the dark page. */
  --ink-edge: transparent;
  /* The names in the client list. */
  --clients-text: var(--clients-logo);
  /* The error text of a form field on the page. */
  --form-error: #b42318;
}
@media (prefers-color-scheme: dark) {
  :root {
    --form-error: #f97066;
    --tile: #262522;
    --price-tint: color-mix(in srgb, var(--x-color-text) 6%, var(--x-color-surface));
    --card-hover-shadow: 0 0 0 1px color-mix(in srgb, var(--x-color-text) 18%, transparent), 0 1px 2px transparent, 0 18px 40px -12px rgb(0 0 0 / .7);
    --ink-edge: var(--x-color-border);
    --clients-text: var(--x-color-text-muted);
  }
}
@supports (color: light-dark(white, black)) {
  :root {
    --tile: light-dark(#eceae3, #262522);
    --price-tint: light-dark(color-mix(in srgb, var(--x-color-bg) 45%, var(--x-color-surface)),
                             color-mix(in srgb, var(--x-color-text) 6%, var(--x-color-surface)));
    --card-hover-shadow: 0 0 0 1px light-dark(transparent, color-mix(in srgb, var(--x-color-text) 18%, transparent)),
                         0 1px 2px light-dark(rgb(20 20 20 / .06), transparent),
                         0 18px 40px -12px light-dark(rgb(20 20 20 / .22), rgb(0 0 0 / .7));
    --ink-edge: light-dark(transparent, var(--x-color-border));
    --clients-text: light-dark(var(--clients-logo), var(--x-color-text-muted));
    --form-error: light-dark(#b42318, #f97066);
  }
}
/* Beyond the BareDOM neutrals the design uses --accent, --accent-soft, --ink (dark surfaces) and --paper (the page
   background). The --mark-* colors paint the eyebrow squares. */
:root {
  --paper: var(--x-color-bg);
  --accent: var(--x-color-primary);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--x-color-surface));
  --accent-hover: color-mix(in srgb, var(--accent) 86%, #000);
  --on-ink: #f5f4f0;
  --mark-4: var(--x-color-text);
  --mark-2-light: color-mix(in srgb, var(--mark-2), #fff 25%);
  --on-mark: #141414;
}
/* Fixed colors: the same in both themes. */
:root {
  /* The channels of the shadows and the photo scrims, of the black scrim, and of the light text on a dark surface,
     for alpha values. The ink knob does not change them: a scrim darkens a photo, it is not a band. */
  --ink-rgb: 20 20 20;
  --scrim-rgb: 0 0 0;
  --on-dark-rgb: 255 255 255;
  /* Text on an ink surface (top bar, footer, poster, dark card), from strong to faint. */
  --on-ink-strong: #fff;
  --on-ink-soft: #e9e7e1;
  --on-ink-muted: #bdbab2;
  --on-ink-faint: #8a877f;
  /* Text on a photo under a dark scrim. */
  --on-photo: #fff;
  --on-photo-soft: #e9e7e1;
  --on-photo-muted: #d9d7d0;
  /* A white plate on a photo or on the accent: a caption, a small button. */
  --plate: #fff;
  --plate-hover: #f5f4f0;
  --on-plate: #141414;
  /* The lines, the muted text and the error text inside a white plate: the form card of the request band. */
  --plate-line: #d9d6ce;
  --plate-muted: #5e5b55;
  --plate-error: #b42318;
  /* The parks of the map drawn in CSS, and the logos of the client list. */
  --map-park: #9fc48a;
  --clients-logo: #6e6b64;
}
/* The scales. A name holds the design value in px at the default knob; the knob multiplies it. The type sizes are rem,
   so the browser font setting scales them too. Spacing below 12 px (inside a row, an icon to its label) stays literal. */
:root {
  --text-10: calc(.625rem * var(--text-scale));
  --text-11: calc(.6875rem * var(--text-scale));
  --text-12: calc(.75rem * var(--text-scale));
  --text-13: calc(.8125rem * var(--text-scale));
  --text-14: calc(.875rem * var(--text-scale));
  --text-15: calc(.9375rem * var(--text-scale));
  --text-16: calc(1rem * var(--text-scale));
  --text-17: calc(1.0625rem * var(--text-scale));
  --text-18: calc(1.125rem * var(--text-scale));
  --text-19: calc(1.1875rem * var(--text-scale));
  --text-20: calc(1.25rem * var(--text-scale));
  --text-22: calc(1.375rem * var(--text-scale));
  --text-24: calc(1.5rem * var(--text-scale));
  --text-26: calc(1.625rem * var(--text-scale));
  --text-28: calc(1.75rem * var(--text-scale));
  --text-30: calc(1.875rem * var(--text-scale));
  --text-32: calc(2rem * var(--text-scale));
  --text-34: calc(2.125rem * var(--text-scale));
  --text-36: calc(2.25rem * var(--text-scale));
  --text-40: calc(2.5rem * var(--text-scale));
  --text-44: calc(2.75rem * var(--text-scale));
  --radius-6: calc(6px * var(--radius-scale));
  --radius-8: calc(8px * var(--radius-scale));
  --radius-10: calc(10px * var(--radius-scale));
  --radius-12: calc(12px * var(--radius-scale));
  --radius-14: calc(14px * var(--radius-scale));
  --radius-16: calc(16px * var(--radius-scale));
  --radius-18: calc(18px * var(--radius-scale));
  --radius-20: calc(20px * var(--radius-scale));
  --radius-22: calc(22px * var(--radius-scale));
  --radius-24: calc(24px * var(--radius-scale));
  --radius-28: calc(28px * var(--radius-scale));
  --radius-pill: calc(999px * var(--radius-scale));
  --space-12: calc(12px * var(--density));
  --space-13: calc(13px * var(--density));
  --space-14: calc(14px * var(--density));
  --space-16: calc(16px * var(--density));
  --space-18: calc(18px * var(--density));
  --space-20: calc(20px * var(--density));
  --space-22: calc(22px * var(--density));
  --space-24: calc(24px * var(--density));
  --space-26: calc(26px * var(--density));
  --space-28: calc(28px * var(--density));
  --space-30: calc(30px * var(--density));
  --space-32: calc(32px * var(--density));
  --space-34: calc(34px * var(--density));
  --space-36: calc(36px * var(--density));
  --space-40: calc(40px * var(--density));
  --space-44: calc(44px * var(--density));
  --space-46: calc(46px * var(--density));
  --space-48: calc(48px * var(--density));
  --space-56: calc(56px * var(--density));
  --space-60: calc(60px * var(--density));
  --space-64: calc(64px * var(--density));
  --space-80: calc(80px * var(--density));
  /* The side gutter of the page: main, the header, the menu, the footer. */
  --page-gutter: var(--space-28);
}
@media (max-width:720px) { :root { --page-gutter: var(--space-20); } }
/* ==== END OF TOKENS ==== */
:root {
  font-family:var(--font-text);
  color:var(--x-color-text);
  background:var(--x-color-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* The theme preview of the admin forces a scheme on the root; light-dark() follows the used color-scheme. */
:root[data-preview-scheme="light"] { color-scheme:light; }
:root[data-preview-scheme="dark"] { color-scheme:dark; }
/* A `hidden` element stays hidden, although a class gives it a `display`. A script shows it when it works. */
[hidden] { display:none !important; }
* {
  box-sizing:border-box;
}
/* The base size scales with the text knob, so the text with no own size scales too. */
body {
  margin:0;
  font-size:var(--text-16);
}
/* The headings take the heading font; a rule with a class sets another font over it. */
:where(h1, h2, h3, .hero-heading) { font-family:var(--font-heading); }
/* A heading with no own weight takes the strong weight of the theme, as the browser gives it bold. */
:where(h1, h2, h3, h4, h5, h6) { font-weight:var(--weight-strong); }
a {
  color:inherit;
}
main {
  max-width:1336px;
  margin:auto;
  padding:var(--page-gutter);
}
.preview-note {
  padding:10px var(--space-24);
  background:color-mix(in srgb, var(--x-color-warning) 15%, var(--x-color-surface));
  text-align:center;
}
@media(max-width:720px) {
  main {
    padding:var(--page-gutter);
  }
}
.contact-text p, .hero-description p { margin:0; }
.hero-description p + p { margin-top:.6em; }
.contact-text ul, .contact-text ol, .hero-description ul, .hero-description ol { margin:.3em 0 0; padding-left:1.2em; }

/* Header: a white band of 84 px, then the menu band. The menu band gives the only line between them. */
.site-header { background:var(--x-color-surface); }
.site-header:not(:has(.site-nav)) { border-bottom:1px solid var(--x-color-border); }
.site-header a { text-decoration:none; }
.site-header-bar { max-width:1336px; margin:auto; padding:0 var(--page-gutter); min-height:84px; display:flex; align-items:center; gap:var(--space-36); }
.site-identity { display:flex; align-items:center; flex-shrink:0; min-width:0; max-width:50%; overflow-wrap:anywhere; }
.site-logo { display:block; width:auto; max-width:200px; height:40px; object-fit:contain; object-position:left center; }
.site-name { font-size:var(--text-24); font-weight:var(--weight-heavy); line-height:1.2; letter-spacing:-0.03em; }
.site-header-actions { flex:none; margin-left:auto; display:flex; align-items:center; gap:var(--space-18); min-width:0; }
.site-header-contacts { font-style:normal; display:flex; align-items:center; gap:var(--space-18); }
.site-header-reach { display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:1.3; }
.site-header-phone { font-size:var(--text-18); font-weight:var(--weight-strong); letter-spacing:-0.01em; white-space:nowrap; }
.site-header-email { font-size:var(--text-13); color:var(--x-color-text-muted); }
.site-header-link { min-width:46px; height:46px; padding:0 var(--space-14); border:1.5px solid var(--x-color-border); border-radius:var(--button-radius, var(--radius-12));
  display:inline-flex; align-items:center; justify-content:center; font-size:var(--text-14); font-weight:600; white-space:nowrap; }
.site-header-link:hover, .site-header-link:focus-visible { border-color:var(--x-color-text); }
.site-header-icon { width:46px; padding:0; font-size:var(--text-13); font-weight:var(--weight-strong); }
/* The icon takes the text colour in both themes. */
.site-header-icon[data-icon]::before { content:""; width:20px; height:20px; background:currentColor;
  -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }
.site-header-icon[data-icon="telegram"] { --icon:url(/images/icons/telegram.svg); }
.site-header-icon[data-icon="whatsapp"] { --icon:url(/images/icons/whatsapp.svg); }
.site-nav-button { height:48px; padding:0 var(--space-22); border-radius:var(--button-radius, var(--radius-12)); background:var(--accent); color:var(--on-accent);
  display:inline-flex; align-items:center; font-size:var(--text-15); font-weight:600; white-space:nowrap; }
.site-nav-button:hover, .site-nav-button:focus-visible { background:var(--accent-hover); }
.site-header-call { display:none; }
.site-nav { background:var(--x-color-surface); border-top:1px solid var(--x-color-border); border-bottom:1px solid var(--x-color-border); }
.site-nav > ul { list-style:none; max-width:1336px; margin:auto; padding:0 var(--page-gutter); min-height:56px; display:flex; align-items:center; gap:var(--space-32);
  font-size:var(--text-15); font-weight:500; }
.site-nav > ul > li > a { display:block; white-space:nowrap; padding:6px 0; border-bottom:2px solid transparent; }
.site-nav > ul > li > a:hover, .site-nav > ul > li > a:focus-visible, .menu-item > a:hover, .menu-item > a:focus-visible { border-bottom-color:var(--accent); }
/* The link of the current page, or of a section above it, keeps the hover line and gets the text 600. */
.site-nav > ul > li > a[aria-current] { font-weight:600; border-bottom-color:var(--accent); }
@media(max-width:1024px) { .site-header-bar { gap:var(--space-24); } .site-header-link { display:none; } }
@media(max-width:720px) {
  .site-header-bar { min-height:0; padding:var(--space-12) var(--page-gutter); gap:var(--space-12); }
  .site-name { font-size:var(--text-20); }
  .site-logo { height:32px; }
  .site-header-contacts, .site-nav-button { display:none; }
  .site-header-call { display:inline-flex; align-items:center; height:44px; padding:0 var(--space-16); border-radius:var(--button-radius, var(--radius-12));
    background:var(--accent); color:var(--on-accent); font-size:var(--text-15); font-weight:600; white-space:nowrap; }
  /* The menu becomes one row of pills that scrolls. The empty last item keeps the last pill off the page edge. */
  /* The scroll padding keeps the 20 px gutter when the row scrolls to the marked pill. */
  .site-nav > ul { min-height:0; padding:10px var(--page-gutter); gap:8px; overflow-x:auto; scroll-padding-inline:var(--page-gutter); scrollbar-width:none; font-size:var(--text-14); }
  .site-nav > ul::-webkit-scrollbar { display:none; }
  .site-nav > ul::after { content:""; flex:0 0 12px; }
  .site-nav > ul > li > a { padding:8px var(--space-12); border:0; border-radius:var(--radius-pill); background:var(--paper); }
  /* The pill of the current page is ink; the row scrolls so this pill is in view. */
  .site-nav > ul > li > a[aria-current] { background:var(--x-color-text); color:var(--x-color-bg); scroll-initial-target:nearest; }
}

/* Catalog pages. */
/* The items are inline and the separator has margins, not spaces. A line breaks at a space inside a label or after a
   separator (the zero width space), so the separator never starts a line and a long trail fits a narrow card. */
.breadcrumbs ol { list-style:none; padding:0; margin:0 0 var(--space-20); font-size:calc(.9rem * var(--text-scale)); color:var(--x-color-text-muted); }
.breadcrumbs li { display:inline; }
.breadcrumbs li + li::before { content:"›\200B"; margin:0 6px; }
.breadcrumbs a { text-decoration:none; }
.page-title { padding:8px 0 var(--space-24); }
.page-title h1 { margin:0; }
.breadcrumbs a:hover { text-decoration:underline; }
.catalog-grid { list-style:none; padding:0; margin:var(--space-32) 0; display:grid; gap:var(--space-24); grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.catalog-card { display:flex; flex-direction:column; gap:8px; min-width:0; }
.catalog-card-link { text-decoration:none; display:flex; flex-direction:column; gap:var(--space-12); }
.catalog-card-link:hover h2 { text-decoration:underline; }
.catalog-card h2 { font-size:calc(1.2rem * var(--text-scale)); line-height:1.3; margin:0; overflow-wrap:anywhere; }
.catalog-card .catalog-cover { aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-12); margin:0; }
/* The summary of a card takes 3 lines at most, so the rows of the grid stay even. */
.catalog-summary { margin:0; color:var(--x-color-text-muted); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.catalog-price { margin:0; font-weight:var(--weight-strong); }
.catalog-price-main { font-size:calc(1.4rem * var(--text-scale)); margin:0 0 var(--space-20); }
.catalog-lead { font-size:calc(1.2rem * var(--text-scale)); color:var(--x-color-text-muted); max-width:760px; margin:0 0 var(--space-20); }
.catalog-cover { display:block; width:100%; max-width:760px; height:auto; border-radius:var(--radius-16); margin:0 0 var(--space-28); }
.catalog-body { max-width:760px; }
.catalog-body img { display:block; max-width:100%; height:auto; border-radius:var(--radius-12); }
.catalog-body table { border-collapse:collapse; width:100%; margin:var(--space-16) 0; }
.catalog-body th, .catalog-body td { border:1px solid var(--x-color-border); padding:8px var(--space-12); text-align:left; }
.catalog-body blockquote { margin:var(--space-16) 0; padding-left:var(--space-16); border-left:3px solid var(--x-color-border); color:var(--x-color-text-muted); }
.catalog-body h2 { margin-top:1.6em; }
.catalog-gallery { list-style:none; padding:0; margin:var(--space-32) 0; display:grid; gap:var(--space-16); grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.catalog-gallery img { display:block; width:100%; height:auto; border-radius:var(--radius-12); }
.catalog-entry h1 { max-width:900px; margin:0 0 var(--space-28); }
@media (max-width:720px) { .catalog-entry h1 { margin-bottom:var(--space-20); } }
.not-found { padding:var(--space-60) 0; }

/* Catalog category page: the fixed top from the entry fields, the anchor band, then the blocks of the entry. */
.entry-head { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-48); align-items:center; padding:4px 0 var(--space-40); }
.entry-head-wide { grid-template-columns:minmax(0,1fr); }
.entry-head .breadcrumbs ol { margin-bottom:var(--space-18); }
.entry-head h1 { font-size:clamp(calc(2.375rem * var(--text-scale)), calc(4.4vw * var(--text-scale)), calc(3.5rem * var(--text-scale))); font-weight:var(--weight-heavy); line-height:1.02; letter-spacing:-.03em; margin:0 0 var(--space-16); text-wrap:balance; }
.entry-lead { font-size:var(--text-18); line-height:1.55; color:var(--x-color-text-muted); max-width:560px; margin:0; }
.entry-price-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px var(--space-20); margin:var(--space-24) 0 0; }
.entry-price-line strong { font-size:var(--text-28); font-weight:var(--weight-heavy); letter-spacing:-.02em; }
.entry-price-line span { font-size:var(--text-15); color:var(--x-color-text-muted); }
.entry-head .hero-actions { margin-top:var(--space-28); }
.entry-head-cover { aspect-ratio:4/3; border-radius:var(--radius-20); overflow:hidden; background:var(--tile); }
.entry-head-cover img { display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px) {
  .entry-head { grid-template-columns:minmax(0,1fr); gap:var(--space-24); }
  .entry-head .hero-actions { flex-direction:column; align-items:stretch; }
  .entry-head .hero-action, .entry-head .hero-link { width:100%; justify-content:center; }
}

/* The anchor band sticks to the top; its background takes the full width of the window. */
.entry-band { position:sticky; top:0; z-index:5; margin:0 0 8px;
  border-image:conic-gradient(color-mix(in srgb, var(--x-color-bg) 92%, transparent) 0 0) fill 0 // 0 100vmax;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 -1px 0 var(--x-color-border), 0 1px 0 var(--x-color-border); }
.entry-band ul { list-style:none; margin:0; padding:10px 0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.entry-band ul::-webkit-scrollbar { display:none; }
.entry-band a { display:block; padding:8px var(--space-16); border-radius:var(--radius-pill); font-weight:600; font-size:var(--text-15); white-space:nowrap;
  color:var(--x-color-text-muted); text-decoration:none; }
.entry-band a:hover { background:var(--x-color-surface); color:var(--x-color-text); }
.entry-band li:has(.entry-band-last) { margin-left:auto; }
.entry-band a.entry-band-last { background:var(--x-color-text); color:var(--x-color-bg); }

/* Catalog item page: the gallery on the left, the buy card on the right. */
.entry-item { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-40); align-items:start; padding:4px 0 var(--space-40); }
.entry-gallery { display:grid; gap:var(--space-12); }
.entry-gallery-main { aspect-ratio:4/3; border-radius:var(--radius-20); overflow:hidden; background:var(--tile); }
.entry-gallery img { display:block; width:100%; height:100%; object-fit:cover; }
.entry-gallery ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-12); }
.entry-gallery li { aspect-ratio:1; border-radius:var(--radius-14); overflow:hidden; background:var(--tile); }
.entry-buy { position:sticky; top:76px; padding:var(--space-32); background:var(--x-color-surface); border:1px solid var(--x-color-border); border-radius:var(--radius-24); }
.entry-buy .breadcrumbs ol { margin-bottom:var(--space-14); }
.entry-buy h1 { font-size:clamp(calc(2.125rem * var(--text-scale)), calc(3.2vw * var(--text-scale)), calc(2.75rem * var(--text-scale))); font-weight:var(--weight-heavy); line-height:1.05; letter-spacing:-.03em; margin:0 0 var(--space-12); text-wrap:balance; }
.entry-buy .entry-lead { font-size:var(--text-16); }
.entry-buy-price { margin:var(--space-22) 0 4px; font-size:var(--text-40); font-weight:var(--weight-heavy); letter-spacing:-.03em; line-height:1.1; }
.entry-buy-price small { margin-left:8px; font-size:var(--text-16); font-weight:500; letter-spacing:0; color:var(--x-color-text-muted); }
.entry-buy .hero-actions { display:grid; gap:10px; margin-top:var(--space-24); }
.entry-buy .hero-actions a { justify-content:center; }
.entry-head .entry-buy-terms { margin-top:var(--space-18); }
/* The other items of the category beside the head of an item with no photo. */
.entry-more.entry-siblings { margin:0; align-self:start; }
.entry-more.entry-siblings ul { grid-template-columns:minmax(0,1fr); }
.entry-more.entry-siblings li:first-child a { border-top:0; }
.entry-more .entry-siblings-all { display:block; padding:var(--space-14) 0; border-top:1px solid var(--x-color-border); width:100%; font-weight:600; color:var(--accent); text-decoration:none; }
.entry-buy-terms { margin:var(--space-16) 0 0; font-size:var(--text-14); color:var(--x-color-text-muted); }
.entry-buy-terms a { color:var(--accent); font-weight:600; text-decoration:none; }
@media (max-width:900px) {
  .entry-item { grid-template-columns:minmax(0,1fr); gap:var(--space-20); }
  .entry-buy { position:static; padding:var(--space-20); border-radius:var(--radius-20); }
  .entry-buy-price { font-size:var(--text-32); }
}
main:has(.entry-band) [id] { scroll-margin-top:72px; }
@media (max-width:720px) {
  .entry-band li:has(.entry-band-last) { margin-left:0; }
  /* The pills scroll to the screen edge; the band borders keep the content width. */
  .entry-band ul { margin-inline:calc(-1 * var(--page-gutter)); padding-inline:var(--page-gutter); scroll-padding-inline:var(--page-gutter); }
}

/* The kinds: the cards of the items with a cover, then the list of the items without one. */
.entry-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-20); }
.entry-cards-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.entry-card { display:flex; flex-direction:column; height:100%; background:var(--x-color-surface); border:1px solid var(--x-color-border);
  border-radius:var(--radius-20); overflow:hidden; color:inherit; text-decoration:none; transition:box-shadow .2s; }
.entry-card:hover { box-shadow:var(--card-hover-shadow); }
.entry-card-cover { aspect-ratio:4/3; background:var(--tile); overflow:hidden; }
.entry-card-cover img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.entry-card:hover .entry-card-cover img { transform:scale(1.04); }
.entry-card-body { flex:1; display:flex; flex-direction:column; gap:6px; padding:var(--space-16) var(--space-18) var(--space-18); }
.entry-card h3 { margin:0; font-size:var(--text-18); font-weight:var(--weight-strong); line-height:1.25; }
.entry-card-body > p:not(.entry-card-foot) { margin:0; font-size:var(--text-14); line-height:1.45; color:var(--x-color-text-muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.entry-card-foot { margin:auto 0 0; padding-top:10px; display:flex; justify-content:space-between; align-items:center; }
.entry-card-foot b { font-size:var(--text-17); }
.entry-card-foot span { color:var(--x-color-text-muted); transition:transform .2s; }
.entry-card:hover .entry-card-foot span { transform:translateX(4px); color:var(--x-color-text); }
@media (prefers-reduced-motion:reduce) { .entry-card-cover img, .entry-card-foot span { transition:none; } }
.entry-more { margin-top:var(--space-20); padding:8px var(--space-24); background:var(--x-color-surface); border:1px solid var(--x-color-border); border-radius:var(--radius-20); }
.entry-more h3 { margin:0; padding:var(--space-14) 0 6px; font-size:var(--text-13); font-weight:var(--weight-strong); letter-spacing:.06em; text-transform:uppercase;
  color:var(--x-color-text-muted); }
.entry-more ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--space-32); }
.entry-more a { display:flex; justify-content:space-between; gap:var(--space-12); padding:var(--space-14) 0; border-top:1px solid var(--x-color-border);
  font-weight:600; color:inherit; text-decoration:none; }
.entry-more:not(:has(h3)) li:nth-child(-n+3) a { border-top:0; }
.entry-more-price { font-weight:400; color:var(--x-color-text-muted); white-space:nowrap; }
.entry-more a:hover { color:var(--accent); }
@media (max-width:1024px) { .entry-cards, .entry-cards-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) {
  .entry-more { padding:4px var(--space-16); }
  .entry-more ul { grid-template-columns:minmax(0,1fr); }
  .entry-more:not(:has(h3)) li:nth-child(-n+3) a { border-top:1px solid var(--x-color-border); }
  .entry-more:not(:has(h3)) li:first-child a { border-top:0; }
}
@media (max-width:720px) {
  .entry-cards, .entry-cards-3 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .entry-card-body { padding:var(--space-12); }
  .entry-card h3 { font-size:var(--text-15); }
  .entry-card-body > p:not(.entry-card-foot) { display:none; }
  .entry-card-foot b { font-size:var(--text-15); }
}

/* Page builder blocks. Each block is a section with one h2. */
.block { padding:var(--space-44) 0; }
/* A link such as /page#id scrolls the block to the top with a gap. The header does not stick, so the gap is small. */
main [id] { scroll-margin-top:16px; }
.block h2 { font-size:clamp(calc(1.75rem * var(--text-scale)), calc(2.7vw * var(--text-scale)), calc(2.375rem * var(--text-scale))); font-weight:var(--weight-strong); line-height:1.15; margin:0 0 var(--space-32); letter-spacing:-.025em; text-wrap:balance; }
/* A band block takes the full width of the window with its background; its content keeps the page width. */
.block-catalog-items, .block-advantages, .block-reviews, .block-clients { --band:var(--x-color-surface); }
/* The ink band turns the neutral tokens over, so its content reads light on dark. */
.block-steps { --band:var(--ink); --x-color-text:var(--on-ink); --x-color-bg:var(--ink); --x-color-text-muted:var(--ink-band-muted);
  --x-color-border:var(--ink-band-border); --x-color-surface:var(--ink-band-surface); color:var(--x-color-text); }
/* The border image paints the band beyond the box on both sides; it does not scroll and needs no clip. */
.block:is(.block-catalog-items, .block-advantages, .block-reviews, .block-clients, .block-steps) { margin:var(--space-44) 0; padding:var(--space-80) 0;
  border-image:conic-gradient(var(--band) 0 0) fill 0 // 0 100vmax; }
/* Two bands of one color touch: the negative margin cancels the paper strip between them. */
.block:is(.block-catalog-items, .block-advantages, .block-reviews, .block-clients) + .block:is(.block-catalog-items, .block-advantages, .block-reviews, .block-clients),
.block-steps + .block-steps { margin-top:calc(-1 * var(--space-44)); }
/* The head of a section: the heading on the left, a short text on the right. */
.block-head { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-16) var(--space-40); flex-wrap:wrap; margin-bottom:var(--space-36); }
.block-head h2 { margin:0; max-width:620px; }
.block-side { max-width:460px; font-size:var(--text-17); line-height:1.5; color:var(--x-color-text-muted); }
.block h3 { font-size:calc(1.05rem * var(--text-scale)); line-height:1.3; margin:0; }
.block p { margin:0; }
.block ul, .block ol { list-style:none; margin:0; padding:0; }
.block img { display:block; width:100%; height:auto; border-radius:var(--radius-12); }
.block-intro { color:var(--x-color-text-muted); margin:calc(-1 * var(--space-20)) 0 var(--space-32) !important; }
.card-link { display:block; text-decoration:none; height:100%; }
.card-link:hover h3, .card-link:hover figcaption { text-decoration:underline; }

.solutions p { color:var(--x-color-text-muted); font-size:calc(.95rem * var(--text-scale)); }

.solution { padding:var(--space-20); border:1px solid var(--x-color-border); border-radius:var(--radius-14); background:var(--x-color-surface); }

.solutions { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-16); }
.solution { display:flex; flex-direction:column; gap:6px; height:100%; }
/* A price on a tile: the tile is a card, so the price uses the text font with even digits, not the mono font of the price table.
   The price goes to the bottom of the tile, so the prices of one row align. */
.solutions .solution-price { margin-top:auto; padding-top:4px; font-size:var(--text-18); font-weight:var(--weight-strong); color:var(--x-color-text); font-variant-numeric:tabular-nums; }
.solution-price .price-prefix { font-weight:400; color:var(--x-color-text-muted); }

/* The filter: a checked tag hides the works with other tags. Up to 12 tags. */
.block-portfolio:has(.pf-t1:checked) .pf-item:not(.pf-t1), .block-portfolio:has(.pf-t2:checked) .pf-item:not(.pf-t2),
.block-portfolio:has(.pf-t3:checked) .pf-item:not(.pf-t3), .block-portfolio:has(.pf-t4:checked) .pf-item:not(.pf-t4),
.block-portfolio:has(.pf-t5:checked) .pf-item:not(.pf-t5), .block-portfolio:has(.pf-t6:checked) .pf-item:not(.pf-t6),
.block-portfolio:has(.pf-t7:checked) .pf-item:not(.pf-t7), .block-portfolio:has(.pf-t8:checked) .pf-item:not(.pf-t8),
.block-portfolio:has(.pf-t9:checked) .pf-item:not(.pf-t9), .block-portfolio:has(.pf-t10:checked) .pf-item:not(.pf-t10),
.block-portfolio:has(.pf-t11:checked) .pf-item:not(.pf-t11), .block-portfolio:has(.pf-t12:checked) .pf-item:not(.pf-t12) { display:none; }




.block-body { max-width:72ch; }
/* The text block is prose: it keeps the gaps between paragraphs and the list markers that `.block p` and `.block ul` remove. */
.block .block-body > * + *, .block .text-shown > * + *, .block .text-rest > * + * { margin-top:1em; }
.block .block-body ul, .block .block-body ol { padding-left:1.4em; }
.block .block-body ul { list-style:disc; }
.block .block-body ol { list-style:decimal; }
/* A heading inside the text is smaller than the block heading, so the text reads as one block. */
.block .block-body :is(h2,h3) { margin:var(--space-32) 0 var(--space-12); font-weight:var(--weight-strong); letter-spacing:-.015em; }
.block .block-body > :is(h2,h3):first-child, .block .text-shown > :is(h2,h3):first-child { margin-top:0; }
.block .block-body :is(h2,h3) + * { margin-top:0; }
.block .block-body h2 { font-size:var(--text-26); line-height:1.2; }
.block .block-body h3 { font-size:var(--text-20); line-height:1.25; }
@media (max-width:720px) { .block .block-body h2 { font-size:var(--text-22); } .block .block-body h3 { font-size:var(--text-18); } }
/* The text block folds the rest of a long text under «Читать дальше». The closed text fades out; an open text stays open. */
.text-shown > *, .text-rest > * { margin:0; }
.text-fold:has(> .text-more:not([open])) > .text-shown { -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 72px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 72px), transparent); }
.text-more > summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none; font-size:var(--text-15); font-weight:600; color:var(--accent); }
.text-more > summary::-webkit-details-marker { display:none; }
.text-more > summary::after { content:"▾"; font-size:var(--text-12); }
.text-more > summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.text-more[open] > summary { display:none; }
@media(max-width:720px) { .block { padding:var(--space-18) 0; }
  .block:is(.block-catalog-items, .block-advantages, .block-reviews, .block-clients, .block-steps) { margin:var(--space-18) 0; padding:var(--space-48) 0; }
  .block:is(.block-catalog-items, .block-advantages, .block-reviews, .block-clients) + .block:is(.block-catalog-items, .block-advantages, .block-reviews, .block-clients),
  .block-steps + .block-steps { margin-top:calc(-1 * var(--space-18)); }
}

/* The admin preview marks the block of the open editor card. */
[data-preview-open] { outline: 2px dashed var(--x-color-primary); outline-offset: -2px; }
/* Another block opens its editor card on a click. */
[data-block]:not([data-preview-open]) { cursor: pointer; }
[data-block]:not([data-preview-open]):hover { outline: 2px dashed color-mix(in srgb, var(--x-color-primary) 45%, transparent); outline-offset: -2px; }
/* A part of the open block, or of a catalog or portfolio entry, opens its fields on a click. The part of the
   focused fields has a solid outline. */
:is([data-preview-open], [data-preview-entry]) [data-part] { cursor: pointer; }
/* The frame shows the page at 40 % or less, so the outlines are thick. */
:is([data-preview-open], [data-preview-entry]) [data-part]:hover { outline: 2px dashed var(--x-color-primary); outline-offset: 4px; }
:is([data-preview-open], [data-preview-entry]) [data-part][data-part-active] { outline: 4px solid var(--x-color-primary); outline-offset: 4px; }

/* The main point of an image. The renderer adds `fx-N fy-N` (N = 0, 5 … 100); each cropped slot then crops the
   image around that point. An image without the classes keeps the centre. */
img[class*="fx-"] { object-position:var(--fx, 50%) var(--fy, 50%); }
.fx-0{--fx:0%}.fx-5{--fx:5%}.fx-10{--fx:10%}.fx-15{--fx:15%}.fx-20{--fx:20%}.fx-25{--fx:25%}.fx-30{--fx:30%}.fx-35{--fx:35%}.fx-40{--fx:40%}.fx-45{--fx:45%}.fx-50{--fx:50%}.fx-55{--fx:55%}.fx-60{--fx:60%}.fx-65{--fx:65%}.fx-70{--fx:70%}.fx-75{--fx:75%}.fx-80{--fx:80%}.fx-85{--fx:85%}.fx-90{--fx:90%}.fx-95{--fx:95%}.fx-100{--fx:100%}
.fy-0{--fy:0%}.fy-5{--fy:5%}.fy-10{--fy:10%}.fy-15{--fy:15%}.fy-20{--fy:20%}.fy-25{--fy:25%}.fy-30{--fy:30%}.fy-35{--fy:35%}.fy-40{--fy:40%}.fy-45{--fy:45%}.fy-50{--fy:50%}.fy-55{--fy:55%}.fy-60{--fy:60%}.fy-65{--fy:65%}.fy-70{--fy:70%}.fy-75{--fy:75%}.fy-80{--fy:80%}.fy-85{--fy:85%}.fy-90{--fy:90%}.fy-95{--fy:95%}.fy-100{--fy:100%}

/* Photo gallery. A photo opens in a popover; a browser without popovers keeps the view hidden. */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--space-12); }
.gallery figure { margin:0; display:grid; gap:6px; }
.gallery figcaption { font-size:calc(.9rem * var(--text-scale)); color:var(--x-color-text-muted); }
.gallery-open { display:block; width:100%; padding:0; border:0; border-radius:var(--radius-12); overflow:hidden; background:none; cursor:zoom-in; }
.gallery-open img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .2s; }
.gallery-open:hover img { transform:scale(1.03); }
.gallery-open:focus-visible { outline:2px solid var(--x-color-primary); outline-offset:2px; }
.gallery-view { display:none; }
.gallery-view:popover-open { display:grid; place-items:center; width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:var(--space-24);
  border:0; background:transparent; }
.gallery-view::backdrop { background:rgb(var(--scrim-rgb) / .88); }
.gallery-view figure { margin:0; display:grid; gap:10px; justify-items:center; }
.gallery-view img { max-width:min(94vw, 1600px); max-height:86vh; width:auto; height:auto; object-fit:contain; border-radius:var(--radius-8); }
.gallery-view figcaption { color:var(--on-photo); text-align:center; }
.gallery-close { position:fixed; top:12px; right:16px; width:44px; height:44px; border:0; border-radius:50%; font-size:var(--text-28); line-height:1;
  color:var(--on-photo); background:rgb(var(--on-dark-rgb) / .12); cursor:pointer; }
.gallery-close:hover { background:rgb(var(--on-dark-rgb) / .24); }
.gallery-close:focus-visible { outline:2px solid var(--on-photo); outline-offset:2px; }

/* Hero: the copy on the left; tiles with a fact, or one image, on the right. */
h1, .hero-heading { font-size:clamp(calc(2.25rem * var(--text-scale)), calc(4.3vw * var(--text-scale)), calc(3.875rem * var(--text-scale))); line-height:1.04; font-weight:var(--weight-heavy); letter-spacing:-.035em;
  margin:0; overflow-wrap:anywhere; text-wrap:balance; }
.hero { padding:var(--space-48) 0 var(--space-64); display:grid; gap:var(--space-48); }
/* The first hero starts 48 px under the menu band line (28 px on the phone): the main padding plus this padding. */
main > :is(.hero, .block-showcase):first-child { padding-top:var(--space-20); }
@media (max-width:720px) { main > :is(.hero, .block-showcase):first-child { padding-top:8px; } }
/* Under the breadcrumbs, the heading of a showcase starts 22 px below them, as the design shows. */
.breadcrumbs + .block-showcase { padding-top:2px; }
.hero-with-image { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.hero-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:var(--space-26); min-width:0; }
.hero-eyebrow { display:flex; align-items:center; gap:10px; margin:0; font-family:var(--font-mono); font-size:var(--text-13);
  letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); }
.hero-eyebrow::before { content:""; flex:none; width:41px; height:8px;
  background:linear-gradient(to right, var(--mark-1) 0 8px, transparent 8px 11px, var(--mark-2) 11px 19px, transparent 19px 22px,
    var(--mark-3) 22px 30px, transparent 30px 33px, var(--mark-4) 33px 41px); }
.hero-description { max-width:560px; font-size:var(--text-19); line-height:1.5; color:var(--x-color-text-muted); overflow-wrap:anywhere; }
.hero-action { display:inline-flex; align-items:center; min-height:58px; padding:0 var(--space-26); border-radius:var(--button-radius, var(--radius-12)); background:var(--accent);
  color:var(--on-accent); font-size:var(--text-16); font-weight:600; text-decoration:none; }
.hero-action:hover { background:color-mix(in srgb, var(--accent) 88%, rgb(var(--scrim-rgb))); }
.hero-action:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.hero-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; max-width:620px; margin:0; padding:0; list-style:none;
  border-top:1.5px solid var(--x-color-text); }
.hero-stats li { display:flex; flex-direction:column; gap:4px; padding:var(--space-16) var(--space-16) 0; border-left:1px solid var(--x-color-border); min-width:0; }
.hero-stats li:first-child { padding-left:0; border-left:0; }
.hero-stats strong { font-size:var(--text-30); font-weight:var(--weight-strong); line-height:1.2; letter-spacing:-.03em; }
.hero-stats span { font-size:var(--text-13); line-height:1.35; color:var(--x-color-text-muted); }
/* The stats keep four columns while four fit. The copy column is the container, and em in the condition reads the
   base size of the text knob, so a larger text takes two columns sooner. A narrow desktop gets two columns too. */
.hero-copy { container-type:inline-size; }
@container (width < 28em) {
  .hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--space-16); }
  .hero-stats li:nth-child(odd) { padding-left:0; border-left:0; }
}

.hero-media { position:relative; min-width:0; }
.hero-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(260px,1fr); gap:var(--space-12); min-height:572px; }
/* An odd count of cells: the last cell takes the full row. */
.hero-tiles > :last-child:nth-child(odd):not(:first-child) { grid-column:span 2; }
.hero-tiles > :only-child { grid-column:span 2; }
.hero-tile { position:relative; display:block; overflow:hidden; border-radius:var(--radius-22); background:var(--tile); color:var(--x-color-text);
  text-decoration:none; }
.hero-tile img, .hero-single img { display:block; width:100%; height:100%; object-fit:cover; }
a.hero-tile img { transition:transform .4s ease; }
a.hero-tile:hover img { transform:scale(1.04); }
a.hero-tile:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.hero-tile-caption { position:absolute; left:14px; bottom:14px; max-width:calc(100% - 28px); padding:8px var(--space-12); border-radius:var(--radius-10);
  background:var(--plate); color:var(--on-plate); font-size:var(--text-14); font-weight:600; line-height:1.3; }
/* The copy can be taller than the photo. The frame keeps the height of the photo and stands in the middle, as the copy does. */
.hero-single { overflow:hidden; border-radius:var(--radius-22); background:var(--tile); align-self:center; }
/* One ratio for the single photo, so the main point decides the crop, not the length of the text. */
.hero-single img { height:auto; aspect-ratio:5/4; max-height:640px; }
.hero-fact { position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; margin:0; padding:var(--space-24);
  overflow:hidden; border-radius:var(--radius-22); background:var(--accent); color:var(--on-accent); }
/* A print registration mark decorates the fact tile. */
.hero-tiles > .hero-fact { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23fff' stroke-opacity='.25' stroke-width='.6'%3E%3Ccircle cx='14' cy='14' r='7'/%3E%3Cpath d='M14 0v28M0 14h28'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:160px; background-position:right -30px top -30px; }
.hero-fact-eyebrow { position:absolute; top:var(--space-24); left:var(--space-24); right:var(--space-24); font-family:var(--font-mono); font-size:var(--text-13);
  letter-spacing:.05em; text-transform:uppercase; opacity:.85; }
.hero-fact strong { font-size:clamp(calc(2rem * var(--text-scale)), calc(3vw * var(--text-scale)), calc(2.75rem * var(--text-scale))); font-weight:var(--weight-heavy); line-height:1; letter-spacing:-.03em; overflow-wrap:anywhere; }
.hero-fact-label { font-size:var(--text-15); line-height:1.35; opacity:.9; }
/* One image: the fact is a chip on it. */
.hero-single .hero-fact { position:absolute; left:14px; bottom:14px; max-width:calc(100% - 28px); padding:var(--space-14) var(--space-16); border-radius:var(--radius-14); }
.hero-single .hero-fact-eyebrow { position:static; }
/* A fact with no photo: the tile follows its content and stands at the bottom of the column, level with the stats row.
   The space above it stays paper. */
@media (min-width:901px) {
  .hero-fact-only { align-self:end; min-height:0; grid-auto-rows:auto; }
  .hero-fact-only > .hero-fact { min-height:220px; padding:var(--space-28); }
  .hero-fact-only .hero-fact-eyebrow { top:var(--space-28); left:var(--space-28); right:var(--space-28); }
  /* The corner of the fact: on one photo the card keeps the 14px inset of its corner.
     With no photo, only top or bottom applies. The phone keeps the bottom left. */
  :is(.hero-fact-bottom-right, .hero-fact-top-right) .hero-single .hero-fact { left:auto; right:14px; }
  :is(.hero-fact-top-left, .hero-fact-top-right) .hero-single .hero-fact { bottom:auto; top:14px; }
  :is(.hero-fact-top-left, .hero-fact-top-right) .hero-fact-only { align-self:start; }
  /* The tile top meets the visible top of the eyebrow: the 8px mark in the middle of the eyebrow line. */
  :is(.hero-fact-top-left, .hero-fact-top-right):has(.hero-eyebrow) .hero-fact-only { margin-top:calc((var(--text-13) * 1.6 - 8px) / 2); }
}

@media (max-width:900px) {
  .hero { padding:var(--space-28) 0 var(--space-40); gap:var(--space-28); }
  .hero-with-image { grid-template-columns:minmax(0,1fr); }
  .hero-copy { gap:var(--space-20); }
  .hero-action { width:100%; justify-content:center; }
  .hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--space-16); }
  .hero-stats li:nth-child(odd) { padding-left:0; border-left:0; }
  /* The phone shows the first tile only, with the fact as a chip on it. */
  .hero-tiles { display:block; min-height:0; }
  .hero-tiles > .hero-tile ~ .hero-tile { display:none; }
  .hero-tiles > .hero-tile { aspect-ratio:4/3; }
  .hero-single img { aspect-ratio:4/3; }
  /* On the phone the fact is one compact pill on the first tile. */
  .hero-tiles > .hero-tile ~ .hero-fact, .hero-single .hero-fact { position:absolute; left:12px; bottom:12px; display:block;
    max-width:calc(100% - 24px); max-height:40%; padding:8px var(--space-12); border-radius:var(--radius-10); background-image:none;
    font-size:var(--text-13); font-weight:600; line-height:1.35; }
  .hero-tiles > .hero-tile ~ .hero-fact .hero-fact-eyebrow, .hero-single .hero-fact-eyebrow { display:none; }
  .hero-tiles > .hero-tile ~ .hero-fact strong, .hero-single .hero-fact strong { font:inherit; letter-spacing:0; }
  .hero-tiles > .hero-tile ~ .hero-fact strong::after, .hero-single .hero-fact strong::after { content:" · "; }
  .hero-tiles > .hero-tile ~ .hero-fact .hero-fact-label, .hero-single .hero-fact-label { font-size:inherit; opacity:1; }
  .hero-tiles:has(.hero-fact) > .hero-tile .hero-tile-caption { top:14px; bottom:auto; }
  /* A fact with no photo is a normal flow box: the eyebrow on top, then the value, then the label. */
  .hero-fact-only > .hero-fact { justify-content:flex-start; padding:var(--space-20); }
  .hero-fact-only .hero-fact-eyebrow { position:static; margin-bottom:10px; }
}

/* The button and the second link of the hero. The second link is an outline button in the text color. */
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-12); margin-top:8px; }
.hero-link { display:inline-flex; align-items:center; gap:8px; min-height:58px; padding:0 var(--space-24); border-radius:var(--button-radius, var(--radius-12)); box-sizing:border-box;
  border:1.5px solid color-mix(in srgb, var(--x-color-text) 55%, transparent); color:var(--x-color-text); font-size:var(--text-16); font-weight:600;
  text-decoration:none; }
.hero-link::after { content:"→"; font-size:1.1em; line-height:1; }
.hero-link:hover { border-color:var(--x-color-text); }
.hero-link:focus-visible { outline:2px solid var(--x-color-text); outline-offset:3px; }

/* Hero «Фото фоном»: the photo covers the band, a dark shade keeps the text readable. The band turns the neutral
   tokens over, so the eyebrow, the text and the stats read light on the photo in both themes. */
.hero-photo { display:block; }
.hero-band { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-40); min-height:640px;
  box-sizing:border-box; padding:var(--space-64) var(--space-64) var(--space-40); overflow:hidden; border-radius:var(--radius-28); background:var(--ink); color:var(--on-photo);
  --x-color-text:var(--on-photo); --x-color-text-muted:var(--on-photo-muted); --x-color-border:rgb(var(--on-dark-rgb) / .2); --mark-4:var(--on-photo); }
.hero-band > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-band::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgb(var(--ink-rgb) / .9) 0%, rgb(var(--ink-rgb) / .72) 40%, rgb(var(--ink-rgb) / .1) 78%); }
/* The print registration mark in the top right corner. */
.hero-band::after { content:""; position:absolute; top:36px; right:36px; z-index:1; width:44px; height:44px; opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23fff' stroke-width='1'%3E%3Ccircle cx='14' cy='14' r='7'/%3E%3Cpath d='M14 0v28M0 14h28'/%3E%3C/svg%3E") no-repeat center / contain; }
.hero-band > :not(img) { position:relative; z-index:2; }
.hero-band .hero-copy { justify-content:flex-start; gap:var(--space-24); width:700px; max-width:100%; }
.hero-band :is(h1, .hero-heading) { font-size:clamp(calc(2.25rem * var(--text-scale)), calc(4.4vw * var(--text-scale)), calc(4rem * var(--text-scale))); line-height:1.02; }
.hero-band .hero-stats { max-width:800px; grid-template-columns:repeat(4,minmax(0,200px)); border-top:1px solid rgb(var(--on-dark-rgb) / .35); }
.hero-band .hero-stats li { padding-top:var(--space-18); }
.hero-band .hero-photo-caption { position:absolute; right:24px; bottom:24px; max-width:calc(100% - 848px - var(--space-64)); margin:0; padding:8px var(--space-12); border-radius:var(--radius-10);
  background:rgb(var(--ink-rgb) / .55); color:var(--on-photo); font-size:var(--text-13); line-height:1.35; }
/* The caption stands right of the stats; a narrow band has no room for it. */
@media (max-width:1240px) { .hero-band .hero-photo-caption { display:none; } }
@media (max-width:900px) {
  .hero-actions { flex-direction:column; align-items:stretch; width:100%; }
  .hero-link { justify-content:center; }
}
@media (max-width:720px) {
  .hero-band { justify-content:flex-end; gap:var(--space-16); min-height:620px; padding:var(--space-20) var(--space-20) var(--space-22); border-radius:var(--radius-22); }
  .hero-band::before { background:linear-gradient(180deg, rgb(var(--ink-rgb) / .15) 0%, rgb(var(--ink-rgb) / .55) 35%, rgb(var(--ink-rgb) / .92) 70%); }
  .hero-band::after { display:none; }
  .hero-band .hero-copy { gap:var(--space-16); }
  .hero-band :is(h1, .hero-heading) { font-size:var(--text-34); line-height:1.04; }
  .hero-band .hero-eyebrow { font-size:var(--text-11); }
  .hero-band .hero-eyebrow::before { display:none; }
  .hero-band .hero-description { font-size:var(--text-15); }
  .hero-band .hero-action { min-height:54px; }
  .hero-band .hero-link { min-height:50px; font-size:var(--text-15); }
  .hero-band .hero-link::after { content:none; }
  .hero-band .hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-band .hero-stats li { padding-top:var(--space-12); }
  .hero-band .hero-stats li:nth-child(n+3) { display:none; }
  .hero-band .hero-stats strong { font-size:var(--text-24); }
  .hero-band .hero-stats span { font-size:var(--text-12); }
}

/* Showcase: the head of a section and 2 to 7 cards. The renderer names the count in a class: showcase-2,
   showcase-3, or showcase-many with showcase-4 … showcase-7. */
.block-showcase { display:flex; flex-direction:column; gap:var(--space-22); }
.showcase-head { display:flex; flex-direction:column; gap:10px; }
.block-showcase .showcase-head :is(h1, h2) { margin:0; font-size:clamp(calc(2rem * var(--text-scale)), calc(3.4vw * var(--text-scale)), calc(3rem * var(--text-scale))); line-height:1.05; font-weight:var(--weight-heavy);
  letter-spacing:-.035em; }
.showcase-intro { max-width:820px; font-size:var(--text-17); line-height:1.5; color:var(--x-color-text-muted); }
.block .showcase-intro p + p { margin-top:.6em; }
.showcase-bar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-14) var(--space-24); }
.block .showcase-links { display:flex; flex-wrap:wrap; gap:10px; }
.showcase-links a { display:flex; align-items:center; height:40px; padding:0 var(--space-16); box-sizing:border-box; border-radius:var(--radius-pill);
  border:1.5px solid var(--x-color-border); background:var(--x-color-surface); font-size:var(--text-14); font-weight:500; text-decoration:none; }
.showcase-links a:hover { border-color:var(--x-color-text); }
.block .showcase-help { display:grid; grid-template-columns:44px auto; column-gap:var(--space-14); align-items:center; margin-left:auto; }
.showcase-help-icon { grid-row:span 2; display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.showcase-help > span:not(.showcase-help-icon) { font-size:var(--text-13); color:var(--x-color-text-muted); }
.showcase-help a { font-size:var(--text-16); font-weight:var(--weight-strong); text-decoration:none; }
.block .showcase-cards { display:grid; gap:var(--space-14); margin-top:6px; }
.showcase-cards > li { min-width:0; }
/* One card: a category with one published item. The card takes the full row. */
.showcase-1 .showcase-cards { height:560px; }
.showcase-2 .showcase-cards { grid-template-columns:repeat(2,minmax(0,1fr)); height:560px; }
.showcase-3 .showcase-cards { grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); height:580px; }
.showcase-many .showcase-cards { grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr)); grid-auto-rows:196px; }
.showcase-many .showcase-cards > li:first-child { grid-row:1 / span 3; }
/* The compact cards: 4 → one column of 3; 5 → 2 × 2; 6 → the last one spans 2 columns; 7 → 2 × 3. */
.showcase-4 .showcase-cards { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.showcase-5 .showcase-cards { grid-auto-rows:301px; }
.showcase-5 .showcase-cards > li:first-child { grid-row:1 / span 2; }
.showcase-6 .showcase-cards > li:last-child { grid-column:span 2; }
.showcase-card { position:relative; display:block; height:100%; box-sizing:border-box; overflow:hidden; text-decoration:none; }
.showcase-card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.showcase-photo { border-radius:var(--radius-24); background:var(--ink); color:var(--on-photo); }
.block .showcase-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; transition:transform .5s ease; }
.showcase-photo:hover img { transform:scale(1.03); }
.showcase-photo::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgb(var(--ink-rgb) / .8) 0%, rgb(var(--ink-rgb) / .4) 40%, rgb(var(--ink-rgb) / 0) 62%, rgb(var(--ink-rgb) / .35) 100%); }
.showcase-photo .showcase-text { position:absolute; z-index:2; top:var(--space-32); left:var(--space-34); right:var(--space-34); display:flex; flex-direction:column; gap:var(--space-12); }
.block .showcase-photo :is(h2, h3) { margin:0; font-size:var(--text-32); line-height:1.08; font-weight:var(--weight-heavy); letter-spacing:-.03em; text-wrap:balance; }
.block .showcase-lead { max-width:440px; font-size:var(--text-16); line-height:1.5; color:var(--on-photo-soft); }
.showcase-price { font-family:var(--font-mono); font-size:var(--text-13); }
.showcase-photo .showcase-price { color:var(--on-photo-price); }
.showcase-button { position:absolute; z-index:2; left:var(--space-34); bottom:var(--space-30); display:flex; align-items:center; gap:8px; height:48px;
  padding:0 var(--space-20); border-radius:var(--button-radius, var(--radius-pill)); background:var(--plate); color:var(--on-plate); font-size:var(--text-15); font-weight:600; }
.showcase-compact { display:flex; flex-direction:column; justify-content:space-between; padding:var(--space-22); border-radius:var(--radius-20);
  background:var(--x-color-surface); color:var(--x-color-text); transition:box-shadow .15s ease; }
.showcase-compact:hover { box-shadow:0 14px 34px color-mix(in srgb, var(--x-color-text) 12%, transparent); }
.showcase-compact .showcase-text { display:flex; flex-direction:column; gap:6px; max-width:48%; }
.block .showcase-compact :is(h2, h3) { margin:0; font-size:var(--text-19); line-height:1.2; font-weight:var(--weight-strong); letter-spacing:-.01em; }
.showcase-compact .showcase-price { color:var(--x-color-text-muted); }
.showcase-arrow { display:flex; align-items:center; justify-content:center; width:36px; height:36px; box-sizing:border-box;
  border:1.5px solid var(--x-color-border); border-radius:50%; }
.block .showcase-compact img { position:absolute; top:14px; right:14px; width:46%; height:calc(100% - 28px); object-fit:cover; border-radius:var(--radius-14); }
@media (min-width:721px) {
  .showcase-3 .showcase-cards > li:not(:first-child) :is(h2, h3) { font-size:var(--text-26); }
  .showcase-3 .showcase-cards > li:not(:first-child) .showcase-lead { font-size:var(--text-15); }
  .showcase-many .showcase-photo .showcase-text { top:var(--space-34); left:var(--space-36); right:var(--space-36); }
  .block .showcase-many .showcase-photo :is(h2, h3) { max-width:460px; font-size:var(--text-34); }
  .showcase-many .showcase-button { left:var(--space-36); bottom:var(--space-32); }
}
/* A tablet: the big card takes the first row, the compact cards go in 2 columns. */
@media (min-width:721px) and (max-width:1024px) {
  .showcase-many .showcase-cards, .showcase-4 .showcase-cards { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:196px; }
  .showcase-many .showcase-cards > li:first-child, .showcase-5 .showcase-cards > li:first-child { grid-column:span 2; grid-row:span 2; }
  .showcase-many .showcase-cards > li:not(:first-child) { grid-column:auto; }
  .showcase-many .showcase-cards > li:last-child:nth-child(even) { grid-column:span 2; }
}
/* A phone: 1 to 3 cards make a row that scrolls, and the next card peeks. 4 and more: the big card, then 2 columns. */
@media (max-width:720px) {
  .block .showcase-bar { gap:var(--space-12); }
  .block .showcase-help { margin-left:0; }
  .block .showcase-links { flex-wrap:nowrap; width:calc(100% + 2 * var(--page-gutter)); margin:0 calc(-1 * var(--page-gutter)); padding:0 var(--page-gutter); box-sizing:border-box;
    overflow-x:auto; scrollbar-width:none; }
  .showcase-links > li { flex:none; }
  .block-showcase:not(.showcase-many) .showcase-cards { display:flex; height:auto; gap:10px; margin:0 calc(-1 * var(--page-gutter)); padding:4px var(--page-gutter);
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--page-gutter); scrollbar-width:none; }
  .block-showcase:not(.showcase-many) .showcase-cards > li { flex:none; width:300px; max-width:82vw; height:440px; scroll-snap-align:start; }
  .showcase-photo { border-radius:var(--radius-20); }
  .showcase-photo .showcase-text { top:var(--space-20); left:var(--space-20); right:var(--space-20); gap:8px; }
  .block .showcase-photo :is(h2, h3) { font-size:var(--text-24); line-height:1.1; }
  .block .showcase-lead { font-size:var(--text-14); line-height:1.45; }
  .showcase-button { left:var(--space-20); bottom:var(--space-18); height:42px; padding:0 var(--space-16); font-size:var(--text-14); }
  .showcase-many .showcase-cards { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; gap:10px; }
  .showcase-many .showcase-cards > li:first-child { grid-column:span 2; grid-row:auto; height:360px; }
  /* An odd count of compact cards: the last one spans the row. */
  .showcase-many .showcase-cards > li:last-child:nth-child(even) { grid-column:span 2; }
  .showcase-compact { justify-content:flex-start; padding:0; border-radius:var(--radius-16); }
  .block .showcase-compact img { position:static; order:-1; width:100%; height:96px; border-radius:0; }
  .showcase-compact .showcase-text { max-width:none; gap:4px; padding:10px var(--space-12) var(--space-12); }
  .block .showcase-compact :is(h2, h3) { font-size:var(--text-15); }
  .showcase-compact .showcase-price { font-size:var(--text-11); }
  .showcase-arrow { display:none; }
}

/* Price table: one table in a white card. Numbers stand right in the mono font; words use the text font.
   A phone shows each row as a card: the row title, then the column label and the value of each cell. */
.block-price-table.price-with-aside { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--space-32); align-items:start; }
.price-card { min-width:0; overflow:hidden; border-radius:var(--radius-20); background:var(--x-color-surface); }
.price-top { display:flex; flex-direction:column; gap:var(--space-14); padding:var(--space-22) var(--space-28) var(--space-18); }
.price-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px var(--space-24); }
.block .price-head h2 { margin:0; font-size:var(--text-22); font-weight:var(--weight-strong); line-height:1.25; letter-spacing:-.01em; }
.price-unit { font-size:var(--text-14); color:var(--x-color-text-muted); }
.block .price-conditions { display:flex; flex-wrap:wrap; gap:8px; }
.price-conditions li { padding:5px 10px; border-radius:var(--radius-8); background:var(--x-color-bg); font-size:var(--text-13); line-height:1.4;
  color:var(--x-color-text-muted); }
.price-conditions b { font-weight:600; color:var(--x-color-text); }
.price-grid { width:100%; border-collapse:collapse; font-size:var(--text-15); line-height:1.4; }
.price-grid thead th { padding:var(--space-12) var(--space-28); border-block:1px solid var(--x-color-border);
  background:var(--price-tint); font-family:var(--font-mono); font-size:var(--text-12);
  font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); text-align:right; vertical-align:bottom; }
.price-grid :is(th, td) { padding:var(--space-14) var(--space-28); border-bottom:1px solid color-mix(in srgb, var(--x-color-border) 60%, transparent); text-align:right; }
.price-grid thead th:first-child, .price-grid tbody th { text-align:left; }
.price-grid tbody th { font-weight:600; white-space:nowrap; }
.price-grid tbody tr:last-child > * { border-bottom:0; }
.price-number { font-family:var(--font-mono); white-space:nowrap; }
.price-prefix { font-family:var(--font-text); }
.price-empty { color:var(--x-color-text-muted); }
.price-hot > * { background:var(--accent-soft); }
/* A note row spans the columns: muted text on the card surface, with the row border. A band inside a card never takes
   the page color: it reaches the card edges and the card looks torn. The soft accent stays for «Чаще берут». */
.price-grid .price-row-note td { padding:var(--space-12) var(--space-28); color:var(--x-color-text-muted); font-size:var(--text-14); text-align:left; }
/* The last note row of a card without a footnote gives the card its bottom edge. */
@media (min-width:721px) { .price-card:not(:has(.price-note)) .price-grid tbody tr.price-row-note:last-child td { padding-bottom:var(--space-20); } }
/* The card width follows the column count, so a short row stays easy to follow. The card stays left, as the page flow.
   The side card and a pair of tables set their own width. */
@media (min-width:1200px) {
  .block-price-table:not(.price-with-aside) .price-card:has(thead th:nth-child(2):last-child) { max-width:720px; }
  .block-price-table:not(.price-with-aside) .price-card:has(thead th:nth-child(3):last-child) { max-width:960px; }
  .block-pair-even .price-card { max-width:none; }
}
/* A wide table: the row under a desktop pointer gets the tint of the head, so the eye keeps the row. */
@media (hover:hover) and (min-width:721px) { .price-grid:has(thead th:nth-child(4)) tbody tr:not(.price-row-note):hover > * { background:var(--price-tint); } }
.price-badge { display:inline-block; margin-left:10px; padding:2px 8px; border-radius:var(--radius-6); background:var(--accent); color:var(--on-accent);
  font-size:var(--text-12); font-weight:600; line-height:1.4; vertical-align:1px; }
.price-note { display:flex; align-items:flex-start; gap:10px; padding:var(--space-16) var(--space-28); border-top:1px solid var(--x-color-border);
  font-size:var(--text-14); line-height:1.5; color:var(--x-color-text-muted); }
.price-note svg { flex:none; margin-top:2px; }
.price-aside { position:sticky; top:24px; display:flex; flex-direction:column; gap:var(--space-16); padding:var(--space-26); border-radius:var(--radius-20);
  background:var(--ink); color:var(--on-ink-strong); }
.price-aside-eyebrow { font-family:var(--font-mono); font-size:var(--text-12); letter-spacing:.05em; text-transform:uppercase; color:var(--on-ink-muted); }
.price-aside-title { font-size:var(--text-24); font-weight:var(--weight-strong); line-height:1.15; letter-spacing:-.02em; }
.price-aside-text { font-size:var(--text-15); line-height:1.5; color:var(--on-ink-muted); }
.price-aside-button { display:flex; align-items:center; justify-content:center; height:48px; padding:0 var(--space-20); border-radius:var(--button-radius, var(--radius-12));
  background:var(--accent); color:var(--on-accent); font-size:var(--text-15); font-weight:600; text-decoration:none; }
.price-aside-button:hover, .price-aside-button:focus-visible { background:var(--accent-hover); }
.price-aside-phone { font-size:var(--text-18); font-weight:var(--weight-strong); color:var(--on-ink-strong); text-decoration:none; }
/* Two tables in a row stand 24 px apart. A table under a table with the side card keeps the width of its column. */
@media (min-width:721px) {
  .block-price-table + .block-price-table { margin-top:calc(-1 * var(--space-20)); padding-top:0; }
  /* A table or a pair under a table or a pair stands 24 px below it, when the pair is a row and when it stacks. */
  .block-pair-even + .block-price-table { margin-top:calc(-1 * var(--space-20)); padding-top:0; }
  :is(.block-price-table, .block-pair-even) + .block-pair-even { margin-top:calc(-1 * var(--space-20)); }
  :is(.block-price-table, .block-pair-even) + .block-pair-even > .block:first-child { padding-top:0; }
  .block-pair-even > .block + .block { padding-top:0; }
}
@media (min-width:1025px) {
  .price-with-aside + .block-price-table:not(.price-with-aside) .price-card { margin-right:calc(340px + var(--space-32)); }
  /* In a pair both tables start at one line. */
  .block-pair-even > .block + .block { margin-top:0; padding-top:var(--space-16); }
  :is(.block-price-table, .block-pair-even) + .block-pair-even > .block + .block { padding-top:0; }
}
@media (max-width:1024px) {
  .block-price-table.price-with-aside { display:block; }
  .price-card { overflow-x:auto; }
  .price-grid tbody th { white-space:normal; min-width:160px; }
  .price-aside { position:static; margin-top:var(--space-16); }
  .price-grid :is(th, td) { padding-inline:var(--space-16); }
  .price-grid .price-row-note td { padding-inline:var(--space-16); }
}
@media (max-width:720px) {
  .price-card { overflow:visible; background:transparent; border-radius:0; }
  .price-top { padding:0 0 var(--space-14); }
  .price-conditions li { background:var(--x-color-surface); }
  .block-price-table + .block-price-table { padding-top:var(--space-26); }
  .price-grid, .price-grid tbody, .price-grid tr, .price-grid tbody th, .price-grid td { display:block; }
  .price-grid thead { display:none; }
  .price-grid tbody { display:flex; flex-direction:column; gap:10px; }
  .price-grid tr { overflow:hidden; border-radius:var(--radius-16); background:var(--x-color-surface); }
  .price-hot { background:var(--accent-soft); }
  .price-grid :is(th, td) { padding:10px var(--space-16); }
  .price-grid tbody th { padding-top:var(--space-14); white-space:normal; font-size:var(--text-16); }
  .price-grid td { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-16); text-align:right; }
  .price-grid td::before { content:attr(data-label); font-family:var(--font-text); font-size:var(--text-13); color:var(--x-color-text-muted);
    text-align:left; }
  .price-grid td.price-empty { display:none; }
  /* The desktop rule removes the rules of the last row; every card keeps its rules. */
  .price-grid tbody tr:last-child > * { border-bottom:1px solid color-mix(in srgb, var(--x-color-border) 60%, transparent); }
  .price-grid tbody tr > *:last-child { padding-bottom:var(--space-14); border-bottom:0; }
  .price-note { padding:var(--space-14) 0 0; border-top:0; }
  /* A note row is a plain line between the cards. */
  .price-grid tr.price-row-note { border-radius:0; background:transparent; }
  .price-grid tbody .price-row-note td { display:block; padding:2px 0; background:transparent; text-align:left; }
  .price-grid .price-row-note td::before { content:none; }
}

/* The download link of a price table: an outline button beside the heading. */
.price-file { display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 var(--space-16); margin-left:auto; border-radius:var(--button-radius, var(--radius-12));
  border:1.5px solid var(--x-color-border); font-size:var(--text-14); font-weight:600; text-decoration:none; white-space:nowrap; }
.price-file:hover, .price-file:focus-visible { border-color:var(--x-color-text); }

/* Contacts page. Two blocks of a pair (requisites, then files) stand side by side on a desktop. */
.block-pair { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--space-16); align-items:start; }
.block-pair > .block { padding-block:var(--space-16) var(--space-44); }
/* On the phone a pair of tables has the spacing of single tables: 18 px, and 26 px between two tables. */
@media (max-width:720px) {
  .block-pair.block-pair-even > .block { padding-block:var(--space-18); }
  .block-pair.block-pair-even > .block + .block, :is(.block-price-table, .block-pair-even) + .block-pair-even > .block:first-child,
  .block-pair-even + .block-price-table { padding-top:var(--space-26); }
}
/* Two narrow price tables: equal columns, 24 px apart. */
.block-pair-even { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-24); }
/* An ink surface on the dark page gets a thin border, so its edge stays visible. */
:is(.quick-ink, .requisites-file, .price-aside) { box-shadow:inset 0 0 0 1px var(--ink-edge); }
/* The contacts blocks follow each other closely, as one page part. */
.block:is(.block-quick-contacts, .block-addresses) { padding-block:var(--space-20); }
.copy-button { padding:0; border:0; background:none; font:inherit; font-size:var(--text-14); font-weight:600; color:var(--accent); cursor:pointer; }
.copy-button:hover { text-decoration:underline; }
.block .quick-contacts { display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:var(--space-12); }
.quick-contact { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; padding:var(--space-20) var(--space-22); border-radius:var(--radius-18);
  background:var(--x-color-surface); }
.quick-label { font-family:var(--font-mono); font-size:var(--text-12); letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); }
.quick-value { max-width:100%; overflow-wrap:anywhere; font-size:var(--text-18); font-weight:var(--weight-strong); line-height:1.3; letter-spacing:-.01em; text-decoration:none; }
.quick-note { font-size:var(--text-14); line-height:1.4; color:var(--x-color-text-muted); }
.quick-ink { background:var(--ink); color:var(--on-ink-strong); }
.quick-ink .quick-value { font-size:var(--text-22); }
.quick-ink :is(.quick-label, .quick-note) { color:var(--on-ink-muted); }
.addresses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-16); }
.address-card { display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-22); background:var(--x-color-surface); }
.address-map { position:relative; height:250px; background:var(--tile); }
.block .address-map img { width:100%; height:100%; object-fit:cover; border-radius:0; }
.address-map-link { position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:8px; height:38px; padding:0 var(--space-14);
  border-radius:var(--button-radius, var(--radius-10)); background:var(--plate); color:var(--on-plate); font-size:var(--text-14); font-weight:600; text-decoration:none;
  box-shadow:0 2px 8px rgb(var(--ink-rgb) / .12); }
.address-body { display:flex; flex-direction:column; gap:var(--space-18); padding:var(--space-24) var(--space-26) var(--space-26); }
.block .address-body h3 { display:flex; flex-wrap:wrap; align-items:center; gap:8px var(--space-12); font-size:var(--text-24); font-weight:var(--weight-strong); letter-spacing:-.02em; }
.address-tag { padding:3px 8px; border-radius:var(--radius-6); background:var(--x-color-bg); color:var(--x-color-text-muted); font-size:var(--text-12);
  font-weight:600; letter-spacing:0; }
.address-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-18) var(--space-24); margin:0; }
.address-facts > div { display:flex; flex-direction:column; gap:4px; }
.address-facts .address-route { grid-column:1 / -1; }
.address-facts dt { font-family:var(--font-mono); font-size:var(--text-12); letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); }
.address-facts dd { margin:0; font-size:var(--text-15); line-height:1.45; }
.address-facts dd a { color:inherit; }
.address-hours-note { display:block; margin-top:4px; font-size:var(--text-14); color:var(--x-color-text-muted); }
/* With a phone, the left column stacks the address and the phone; the hours span both rows on the right. The second row is
   flexible, so long hours do not push the phone away from the address. */
@media (min-width:721px) {
  .address-facts:has(.address-phone) { grid-template-rows:auto 1fr; }
  .address-facts .address-phone { grid-area:2 / 1; }
  .address-facts:has(.address-phone) .address-hours { grid-area:1 / 2 / span 2 / auto; }
}
.address-actions { display:flex; flex-wrap:wrap; gap:10px; }
.address-button { display:inline-flex; align-items:center; height:44px; padding:0 var(--space-16); border-radius:var(--button-radius, var(--radius-12)); border:1.5px solid var(--x-color-border);
  background:var(--x-color-surface); font-size:var(--text-14); font-weight:600; text-decoration:none; }
.address-button:hover, .address-button:focus-visible { border-color:var(--x-color-text); }
/* The map of an address without an image: roads, parks and a pin, drawn in CSS. */
.address-map-drawn { background-color:var(--map-ground);
  background-image:linear-gradient(90deg, transparent 0 46%, var(--x-color-surface) 46% 48%, transparent 48%),
    linear-gradient(0deg, transparent 0 58%, var(--x-color-surface) 58% 61%, transparent 61%),
    linear-gradient(28deg, transparent 0 30%, color-mix(in srgb, var(--x-color-surface) 60%, transparent) 30% 32%, transparent 32%),
    linear-gradient(-62deg, transparent 0 70%, color-mix(in srgb, var(--x-color-surface) 60%, transparent) 70% 71.5%, transparent 71.5%),
    radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--map-park) 45%, transparent) 0 40px, transparent 41px),
    radial-gradient(circle at 80% 78%, color-mix(in srgb, var(--map-park) 45%, transparent) 0 56px, transparent 57px); }
.address-pin { position:absolute; left:47%; top:44%; width:36px; height:36px; border-radius:50% 50% 50% 0; background:var(--accent);
  transform:translate(-50%, -100%) rotate(-45deg); box-shadow:0 6px 16px rgb(var(--ink-rgb) / .25); }
/* One address, and the last address of an odd count of 3 and more: a wide card with the map on the left half. */
@media (min-width:721px) {
  .addresses-1 .addresses { grid-template-columns:1fr; }
  .addresses-3 .address-card:last-child:nth-child(odd) { grid-column:1 / -1; }
  :is(.addresses-1 .address-card, .addresses-3 .address-card:last-child:nth-child(odd)) { display:grid; grid-template-columns:1fr 1fr; }
  :is(.addresses-1, .addresses-3 .address-card:last-child:nth-child(odd)) .address-map { height:auto; min-height:320px; }
}
.requisites-card, .files-card { display:flex; flex-direction:column; gap:var(--space-16); padding:var(--space-26) var(--space-28); border-radius:var(--radius-22); background:var(--x-color-surface); }
.requisites-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:var(--space-12) var(--space-16); }
.block :is(.requisites-head, .files-card) h2 { margin:0; font-size:var(--text-26); font-weight:var(--weight-strong); letter-spacing:-.02em; }
.requisites-actions { display:flex; flex-wrap:wrap; gap:10px; }
.requisites-actions .copy-button, .requisites-file { display:inline-flex; align-items:center; height:44px; padding:0 var(--space-16); border-radius:var(--button-radius, var(--radius-12));
  border:1.5px solid var(--x-color-border); background:var(--x-color-surface); color:var(--x-color-text); font-size:var(--text-14); font-weight:600;
  text-decoration:none; }
.requisites-actions .copy-button:hover { border-color:var(--x-color-text); text-decoration:none; }
.requisites-file { border-color:var(--ink); background:var(--ink); color:var(--on-ink-strong); }
.requisites { margin:0; }
.requisites > div { display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--space-16); padding:10px 0;
  border-bottom:1px solid color-mix(in srgb, var(--x-color-border) 60%, transparent); font-size:var(--text-15); }
.requisites > div:last-child { border-bottom:0; }
.requisites dt { color:var(--x-color-text-muted); }
.requisites dd { margin:0; overflow-wrap:anywhere; }
.requisites-number { font-family:var(--font-mono); }
.files-card { gap:6px; }
.block .files-card h2 { margin-bottom:6px; }
.file-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:var(--space-14); align-items:center; padding:var(--space-14) 0;
  border-bottom:1px solid color-mix(in srgb, var(--x-color-border) 60%, transparent); text-decoration:none; }
.files li:last-child .file-row { border-bottom:0; }
.file-type { display:flex; align-items:flex-end; justify-content:center; width:44px; height:52px; padding-bottom:6px; box-sizing:border-box;
  border:1.5px solid var(--x-color-border); border-radius:var(--radius-8); background:var(--x-color-bg); font-family:var(--font-mono); font-size:var(--text-10); font-weight:500; }
.file-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.file-title { font-size:var(--text-16); font-weight:var(--weight-strong); }
.file-caption { font-size:var(--text-13); color:var(--x-color-text-muted); }
.file-action { font-size:var(--text-14); font-weight:600; color:var(--accent); }
.file-row:hover .file-title { text-decoration:underline; }
@media (max-width:1024px) {
  .block .quick-contacts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .block-pair { display:block; }
}
@media (max-width:720px) {
  /* The messengers stand in 2 columns; the ink phone and the e-mail take the full row. */
  .block .quick-contacts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .quick-wide { grid-column:1 / -1; }
  .quick-contact { padding:var(--space-14) var(--space-12); gap:4px; }
  .quick-wide { padding-inline:var(--space-16); }
  .quick-value { font-size:var(--text-15); }
  .quick-ink .quick-value { font-size:var(--text-20); }
  .requisites-actions { gap:8px; }
  .requisites-actions .copy-button, .requisites-file { height:40px; padding:0 10px; font-size:var(--text-13); }
  .addresses { grid-template-columns:1fr; }
  .address-map { height:200px; }
  .address-body { padding:var(--space-20); }
  .address-facts { grid-template-columns:1fr; }
  .requisites-card, .files-card { padding:var(--space-20); }
  .requisites > div { grid-template-columns:1fr; gap:2px; }
  .file-row { grid-template-columns:40px minmax(0,1fr); }
  .file-action { display:none; }
}

/* Offers: promo cards. The count of cards sets the columns: 2 → 2, 4 or 8 → 4, else 3. */
.offers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-20); }
.offers:has(> li:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); }
.offers:has(> li:nth-child(4):last-child), .offers:has(> li:nth-child(8):last-child) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.offers > li { min-width:0; }
.offer { display:flex; flex-direction:column; gap:var(--space-18); height:100%; min-height:220px; padding:var(--space-28); overflow:hidden; border-radius:var(--radius-20);
  background:var(--x-color-surface); border:1.5px solid var(--x-color-border); transition:box-shadow .2s ease; }
.offers .card-link:hover .offer { box-shadow:var(--card-hover-shadow); }
.offers .card-link:hover .offer img { transform:scale(1.04); }
.offers .card-link:hover h3 { text-decoration:none; }
.offers .card-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius-20); }
.offer img { width:calc(100% + 2 * var(--space-28)); max-width:none; height:160px; margin:calc(-1 * var(--space-28)) calc(-1 * var(--space-28)) 0; object-fit:cover; border-radius:0; transition:transform .4s ease; }
.offer-eyebrow { font-family:var(--font-mono); font-size:var(--text-13); letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); }
.block .offer h3 { font-size:var(--text-26); font-weight:var(--weight-strong); line-height:1.15; letter-spacing:-.02em; overflow-wrap:anywhere; }
.offer-note { margin-top:auto !important; font-family:var(--font-mono); font-size:var(--text-20); }
.offer-more { margin-top:auto !important; display:flex; align-items:center; gap:6px; font-size:var(--text-15); font-weight:600; }
.offer-note + .offer-more { margin-top:0 !important; }
.offer-more::after { content:"→"; }
.offer-accent .offer { background:var(--accent-soft); border-color:transparent; }
.offer-accent .offer-eyebrow { color:var(--accent); }
.offer-dark .offer { background:var(--ink); border-color:transparent; color:var(--on-ink); }
.offer-dark .offer-eyebrow { color:var(--mark-3); }
@media (max-width:900px) {
  .offers, .offers:has(> li:nth-child(2):last-child), .offers:has(> li:nth-child(4):last-child), .offers:has(> li:nth-child(8):last-child) {
    grid-template-columns:minmax(0,1fr); gap:var(--space-12); }
  .offer { min-height:160px; padding:var(--space-24); }
  .offer img { width:calc(100% + 2 * var(--space-24)); margin:calc(-1 * var(--space-24)) calc(-1 * var(--space-24)) 0; }
}

/* Advantages: big numbers in columns under a rule. More than 4 items wrap to the next row. */
.advantages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1.5px solid var(--x-color-text); }
.advantages li { display:flex; flex-direction:column; gap:var(--space-14); min-width:0; padding:var(--space-28) var(--space-28) 8px; border-left:1px solid var(--x-color-border); }
.advantages li:nth-child(4n+1) { padding-left:0; border-left:0; }
.advantages li:nth-child(4n) { padding-right:0; }
.advantage-eyebrow { font-family:var(--font-mono); font-size:var(--text-13); color:var(--accent); text-transform:uppercase; }
.advantage-value { font-size:clamp(calc(2.25rem * var(--text-scale)), calc(3.1vw * var(--text-scale)), calc(2.75rem * var(--text-scale))); font-weight:var(--weight-heavy); line-height:1; letter-spacing:-.035em; overflow-wrap:anywhere; }
.block .advantages h3 { font-size:var(--text-17); font-weight:600; line-height:1.35; }
.advantage-text { font-size:var(--text-14); line-height:1.5; color:var(--x-color-text-muted); }
@media (max-width:900px) {
  .advantages { grid-template-columns:minmax(0,1fr); border-top:0; }
  .advantages li, .advantages li:nth-child(4n+1), .advantages li:nth-child(4n) { padding:var(--space-24) 0; border-left:0; border-top:1.5px solid var(--x-color-text); gap:10px; }
}

/* Catalog tiles: a cover with an optional badge, the name, the summary and the price with an arrow. */
.catalog-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-20); }
.catalog-tiles > li { min-width:0; }
.catalog-tile { display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:var(--radius-20); background:var(--x-color-surface);
  transition:box-shadow .2s ease; }
/* A tile on a white band keeps its edge with the paper color. */
.block-catalog-items .catalog-tile { background:var(--x-color-bg); }
.catalog-tiles .card-link:hover .catalog-tile { box-shadow:var(--card-hover-shadow); }
.catalog-tiles .card-link:hover h3 { text-decoration:none; }
.catalog-tiles .card-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius-20); }
.catalog-tile-cover, .catalog-card-cover { position:relative; overflow:hidden; background:var(--tile); }
.catalog-tile-cover { aspect-ratio:16/10; }
.block .catalog-tile-cover img { width:100%; height:100%; object-fit:cover; border-radius:0; transition:transform .4s ease; }
.catalog-tiles .card-link:hover .catalog-tile-cover img { transform:scale(1.04); }
.catalog-badge { position:absolute; top:12px; left:12px; max-width:calc(100% - 24px); padding:5px 10px; border-radius:var(--radius-8);
  background:var(--mark-3); color:var(--on-mark); font-size:var(--text-12); font-weight:600; line-height:1.3; }
.catalog-tile-body { display:flex; flex-direction:column; gap:8px; flex:1; padding:var(--space-18) var(--space-20) var(--space-20); }
.block .catalog-tile h3 { font-size:var(--text-19); font-weight:var(--weight-strong); line-height:1.25; overflow-wrap:anywhere; }
.catalog-tile-summary { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:var(--text-14); line-height:1.45; color:var(--x-color-text-muted); }
.catalog-tile .catalog-price { display:flex; justify-content:space-between; align-items:center; gap:var(--space-12); margin-top:auto !important;
  padding-top:6px; font-family:var(--font-mono); font-size:var(--text-17); font-weight:500; }
.catalog-tile .catalog-price::after { content:"→"; display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--x-color-bg); font-family:var(--font-text); }
.block-catalog-items .catalog-tile .catalog-price::after { background:var(--x-color-surface); }
.block-more-link { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-15); font-weight:600; text-decoration:none; }
.block-more-link::after { content:"→"; }
.block-more-link:hover { color:var(--accent); }
@media (max-width:900px) {
  .catalog-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-12); }
  .catalog-tile { border-radius:var(--radius-16); }
  .catalog-tile-body { padding:var(--space-12) var(--space-12) var(--space-14); gap:6px; }
  .block .catalog-tile h3 { font-size:var(--text-15); }
  .catalog-tile-summary { display:none; }
  .catalog-tile .catalog-price { font-size:var(--text-13); padding-top:2px; }
  .catalog-tile .catalog-price::after { display:none; }
}
.catalog-card-cover { border-radius:var(--radius-12); }

/* Steps: one row; each step under a 3 px rule. The first rule and the first number take the accent. */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-20); }
.steps li { display:flex; flex-direction:column; gap:var(--space-12); min-width:0; padding-top:var(--space-20); border-top:3px solid var(--x-color-border); }
.steps li:first-child { border-top-color:var(--accent); }
.step-number { font-family:var(--font-mono); font-size:var(--text-14); color:var(--x-color-text-muted); }
.steps li:first-child .step-number { color:var(--accent); }
.block-steps .steps li:first-child .step-number { color:var(--mark-3); }
.block .steps h3 { font-size:var(--text-19); font-weight:var(--weight-strong); line-height:1.25; overflow-wrap:anywhere; }
.steps p { font-size:var(--text-14); line-height:1.5; color:var(--x-color-text-muted); }
@media (max-width:900px) {
  .steps { grid-template-columns:minmax(0,1fr); gap:0; }
  .steps li { flex-direction:row; align-items:baseline; gap:var(--space-16); padding:var(--space-14) 0; }
  .steps p { display:none; }
}

/* Portfolio: the filter beside the heading; the first work spans 2×2 with its meta over a dark gradient. */
.portfolio-filter { display:flex; flex-wrap:wrap; gap:8px; }
.portfolio-filter label { position:relative; cursor:pointer; }
.portfolio-filter input { position:absolute; opacity:0; pointer-events:none; }
.portfolio-filter span { display:inline-flex; align-items:center; height:40px; padding:0 var(--space-16); border:1.5px solid var(--x-color-border);
  border-radius:var(--radius-pill); background:var(--x-color-surface); font-size:var(--text-14); font-weight:500; }
.portfolio-filter input:checked + span { background:var(--x-color-text); color:var(--x-color-bg); border-color:var(--x-color-text); }
.portfolio-filter input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
/* Every work is 4 : 3. The first work spans 2 × 2 cells and stretches to their height. */
.portfolio-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-16); }
.portfolio-grid > li { min-width:0; aspect-ratio:4/3; }
.portfolio-grid > li:first-child { grid-column:span 2; grid-row:span 2; }
.portfolio-grid figure { position:relative; height:100%; margin:0; overflow:hidden; border-radius:var(--radius-22); background:var(--tile); }
.block .portfolio-grid img { height:100%; object-fit:cover; border-radius:0; transition:transform .4s ease; }
.portfolio-grid .card-link:hover img { transform:scale(1.04); }
.portfolio-grid .card-link:hover figcaption { text-decoration:none; }
.portfolio-grid .card-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius-22); }
.portfolio-grid figcaption { position:absolute; left:14px; right:14px; bottom:14px; padding:10px var(--space-12); border-radius:var(--radius-10);
  background:var(--plate); color:var(--on-plate); font-size:var(--text-14); font-weight:600; line-height:1.3; }
.portfolio-grid > li:first-child figcaption { left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:4px; padding:var(--space-60) var(--space-24) var(--space-22);
  border-radius:0; background:linear-gradient(transparent, rgb(var(--scrim-rgb) / .7)); color:var(--on-photo); }
.portfolio-meta { font-family:var(--font-mono); font-size:var(--text-12); letter-spacing:.05em; text-transform:uppercase; opacity:.85; }
.portfolio-grid > li:first-child .portfolio-title { font-size:var(--text-22); font-weight:var(--weight-strong); line-height:1.25; }
.block-action { display:flex; justify-content:center; margin-top:var(--space-28) !important; }
.button-outline { display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 var(--space-26); border:1.5px solid var(--x-color-text);
  border-radius:var(--button-radius, var(--radius-12)); font-size:var(--text-15); font-weight:600; text-decoration:none; }
.button-outline::after { content:"→"; }
.button-outline:hover { background:var(--x-color-text); color:var(--x-color-bg); }
@media (max-width:900px) {
  .portfolio-filter { flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:4px; }
  .portfolio-filter label { flex:none; }
  .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-12); }
  .portfolio-grid > li:first-child { grid-row:auto; }
  .portfolio-grid figcaption { left:8px; right:8px; bottom:8px; padding:6px 8px; font-size:var(--text-12); }
  .portfolio-grid > li:first-child figcaption { padding:var(--space-40) var(--space-16) var(--space-16); }
  .portfolio-grid > li:first-child .portfolio-title { font-size:var(--text-18); }
}

/* Reviews: quote cards; on the phone the cards scroll sideways with snap. */
.reviews { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-20); }
.reviews > li { min-width:0; }
.review { display:flex; flex-direction:column; gap:var(--space-24); height:100%; margin:0; padding:var(--space-30); border-radius:var(--radius-20); background:var(--x-color-bg); }
.review::before { content:""; width:32px; height:24px; background:var(--accent);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V13C0 5 4 1 12 0v5c-4 1-6 3-6 8h6v11Zm18 0V13c0-8 4-12 12-13v5c-4 1-6 3-6 8h6v11Z'/%3E%3C/svg%3E") no-repeat; }
.review blockquote { flex-grow:1; margin:0; font-size:var(--text-17); line-height:1.55; }
.review figcaption { display:flex; flex-direction:column; gap:2px; padding-top:var(--space-16); border-top:1px solid var(--x-color-border); }
.review figcaption b { font-size:var(--text-15); }
.review figcaption span { font-size:var(--text-13); color:var(--x-color-text-muted); }
@media (max-width:900px) {
  .reviews { display:flex; gap:var(--space-12); overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(-1 * var(--space-20)); padding:0 var(--space-20) 8px; scroll-padding:0 var(--space-20); }
  .reviews > li { flex:0 0 86%; scroll-snap-align:start; }
  .review { padding:var(--space-24); }
}

/* FAQ: the heading and the intro on the left; the questions on the right, under a rule. */
.block-faq { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--space-48); align-items:start; }
.faq-head { display:flex; flex-direction:column; gap:var(--space-14); }
.block-faq .faq-head h2 { margin:0; }
.faq-intro { color:var(--x-color-text-muted); line-height:1.5; }
.faq-intro a { font-weight:600; color:var(--x-color-text); }
.faq { display:flex; flex-direction:column; border-top:1.5px solid var(--x-color-text); }
.faq details { padding:var(--space-22) 0; border-bottom:1px solid var(--x-color-border); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:var(--space-16); cursor:pointer; list-style:none;
  font-size:var(--text-18); font-weight:600; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:none; font-size:var(--text-24); font-weight:400; line-height:1; }
.faq details[open] summary::after { content:"−"; }
.faq summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.faq-answer { max-width:720px; margin-top:var(--space-12); line-height:1.6; color:var(--x-color-text-muted); }
@media (max-width:900px) {
  .block-faq { grid-template-columns:minmax(0,1fr); gap:var(--space-24); }
  .faq summary { font-size:var(--text-16); }
}

/* Shared sections: the heading on the left; white sections on the right that open on a click, the first one open.
   A section in the cards view shows each paragraph as a card, 3 in a row. */
.block-shared-sections { display:grid; grid-template-columns:380px minmax(0,1fr); gap:var(--space-48); align-items:start; }
.shared-head { display:flex; flex-direction:column; gap:var(--space-14); }
.block-shared-sections .shared-head h2 { margin:0; }
.shared-intro { color:var(--x-color-text-muted); line-height:1.5; }
.shared-intro a { font-weight:600; color:var(--x-color-text); }
.shared-list { display:flex; flex-direction:column; gap:10px; min-width:0; }
.shared-section { border-radius:var(--radius-18); background:var(--x-color-surface); }
.shared-section summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-16); align-items:center; padding:var(--space-22) var(--space-26);
  cursor:pointer; list-style:none; }
.shared-section summary::-webkit-details-marker { display:none; }
.shared-section summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-18); }
.shared-name { font-size:var(--text-20); font-weight:var(--weight-strong); letter-spacing:-.01em; }
.shared-summary { display:block; margin-top:4px; font-size:var(--text-14); font-weight:400; letter-spacing:0; color:var(--x-color-text-muted); }
.shared-mark { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1.5px solid var(--x-color-border);
  border-radius:50%; font-size:var(--text-20); line-height:1; }
.shared-mark::before { content:"+"; }
.shared-section[open] .shared-mark::before { content:"−"; }
.shared-section summary:hover .shared-mark { border-color:var(--x-color-text); }
.shared-body { max-width:760px; padding:0 var(--space-26) var(--space-26); line-height:1.6; color:var(--x-color-text-muted); }
.shared-body > * { margin:0; }
.shared-body > * + * { margin-top:.75em; }
.shared-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-14); padding:0 var(--space-26) var(--space-26); }
.shared-card { display:flex; flex-direction:column; gap:6px; padding:var(--space-16) var(--space-18); border-radius:var(--radius-14); background:var(--x-color-bg);
  font-size:var(--text-15); line-height:1.45; color:var(--x-color-text-muted); }
.shared-card strong { font-size:var(--text-16); color:var(--x-color-text); }
.shared-card p { margin:0; }
.shared-body a, .shared-card a { font-weight:600; color:var(--x-color-text); }
@media (max-width:1024px) { .shared-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .block-shared-sections { grid-template-columns:minmax(0,1fr); gap:var(--space-24); } }
@media (max-width:720px) {
  .shared-section summary { padding:var(--space-18); gap:var(--space-12); }
  .shared-name { font-size:var(--text-17); }
  .shared-mark { width:32px; height:32px; }
  .shared-body { padding:0 var(--space-18) var(--space-18); }
  .shared-cards { grid-template-columns:minmax(0,1fr); gap:8px; padding:0 var(--space-12) var(--space-12); }
  .shared-card { padding:var(--space-14) var(--space-16); }
}

/* Feature: the image on the left, 1 : 1.25; the list in 2 columns under 1 px lines. */
.block-feature { display:grid; gap:var(--space-56); align-items:center; }
.feature-with-image { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); }
/* The image keeps 4 : 5; the text column stands beside it at the middle. */
.feature-image { aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-24); background:var(--tile); }
.block .feature-image img { height:100%; object-fit:cover; border-radius:0; }
.feature-copy { display:flex; flex-direction:column; gap:var(--space-24); min-width:0; }
.block-feature .feature-copy h2 { margin:0; }
.feature-text { font-size:var(--text-17); line-height:1.5; color:var(--x-color-text-muted); }
.feature-text p + p { margin-top:.6em; }
.feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--space-32); border-top:1px solid var(--x-color-border); }
.feature-list li { display:flex; flex-direction:column; gap:2px; min-width:0; padding:var(--space-14) 0; border-bottom:1px solid var(--x-color-border); }
.feature-list b { font-size:var(--text-15); font-weight:600; overflow-wrap:anywhere; }
.feature-list span { font-family:var(--font-mono); font-size:var(--text-12); text-transform:uppercase; color:var(--x-color-text-muted); }
@media (max-width:900px) {
  .block-feature, .feature-with-image { grid-template-columns:minmax(0,1fr); gap:var(--space-24); }
  .feature-image { aspect-ratio:4/3; }
  .feature-list { grid-template-columns:minmax(0,1fr); }
}

/* Request: an accent card with a registration mark in the bottom right corner. */
.block-request { margin:var(--space-44) 0; padding:var(--space-56) var(--space-64); border-radius:var(--radius-28); background-color:var(--accent); color:var(--on-accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23fff' stroke-opacity='.18' stroke-width='.6'%3E%3Ccircle cx='14' cy='14' r='7'/%3E%3Cpath d='M14 0v28M0 14h28'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:280px; background-position:right -60px bottom -60px; }
.block-request > p, .request-copy > p { opacity:.9; font-size:var(--text-17); }
.request-contacts { display:flex; flex-wrap:wrap; gap:var(--space-12); margin-top:var(--space-24) !important; }
.request-contacts li { opacity:1; }
.request-contacts a { display:inline-flex; align-items:center; min-height:50px; padding:0 var(--space-22); border-radius:var(--button-radius, var(--radius-12)); background:var(--plate); color:var(--on-plate);
  font-weight:600; text-decoration:none; }
/* The plate stays white in both themes, so its hover stays light too; --paper turns dark in the dark theme. */
.request-contacts a:hover { background:var(--plate-hover); }
.request-contacts a:focus-visible { outline:2px solid var(--plate); outline-offset:3px; }
@media (max-width:900px) {
  .block-request { margin:var(--space-18) 0; padding:var(--space-26) var(--space-20); border-radius:var(--radius-22); background-size:200px; }
  .request-contacts li { flex:1 1 100%; }
  .request-contacts a { width:100%; justify-content:center; }
}

/* Clients: a label and a row of logos or names under a 1 px line. After reviews it joins the white band. */
.block-clients .clients-label { flex:none; margin:0; font-family:var(--font-mono); font-size:var(--text-12); font-weight:400; letter-spacing:.06em;
  text-transform:uppercase; color:var(--x-color-text-muted); }
.block-clients { display:flex; align-items:center; gap:var(--space-16) var(--space-40); flex-wrap:wrap; }
.clients { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-16) var(--space-44); }
.clients li { font-size:var(--text-17); font-weight:var(--weight-strong); letter-spacing:-.01em; color:var(--clients-text); }
.clients a { text-decoration:none; }
.clients a:hover { color:var(--x-color-text); }
/* The logo wall: equal cells, a short last row in the middle. A logo becomes a silhouette in the text colour. */
.block-clients.clients-wall { display:block; }
.clients-wall .clients { justify-content:center; gap:var(--space-12); margin:0; padding:0; list-style:none; }
.clients-wall .clients li { display:flex; width:calc((100% - 5 * var(--space-12)) / 6); height:96px; }
.clients-cell { flex:1; display:flex; align-items:center; justify-content:center; min-width:0; padding:0 var(--space-12);
  border:1px solid var(--x-color-border); border-radius:var(--radius-14); text-decoration:none; }
.clients-name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:var(--text-15);
  font-weight:var(--weight-strong); line-height:1.25; text-align:center; color:var(--x-color-text-muted); }
.block .clients-cell img { width:auto; height:auto; max-width:64%; max-height:44px; object-fit:contain; border-radius:0;
  filter:brightness(0); opacity:.55; }
a.clients-cell:hover img { opacity:1; }
a.clients-cell:hover .clients-name { color:var(--x-color-text); }
@media (prefers-color-scheme:dark) {
  .block .clients-cell img { filter:brightness(0) invert(1); opacity:.7; }
  a.clients-cell:hover img { opacity:1; }
}
/* The theme preview of the admin forces a scheme with `data-preview-scheme` on the root. The logo filter is not a color, so
   light-dark() cannot switch it, and this rule follows the attribute. The public site never sets it. */
:root[data-preview-scheme="dark"] .block .clients-cell img { filter:brightness(0) invert(1); opacity:.7; }
:root[data-preview-scheme="light"] .block .clients-cell img { filter:brightness(0); opacity:.55; }
:root[data-preview-scheme] a.clients-cell:hover img { opacity:1; }
@media (max-width:1024px) { .clients-wall .clients li { width:calc((100% - 3 * var(--space-12)) / 4); } }
@media (max-width:720px) {
  .clients-wall .clients { gap:8px; }
  .clients-wall .clients li { width:calc(50% - 4px); height:64px; }
  .clients-name { font-size:var(--text-14); }
}
/* After reviews the row sits 32 px under the cards, under a 1 px line. The band fill covers the border and the shadows, so the line is a pseudo element. */
.block-reviews:has(+ .block-clients) { padding-bottom:var(--space-32); }
.block-reviews + .block-clients { position:relative; padding-top:var(--space-13); }
.block-reviews + .block-clients::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--x-color-border); }
.block-request h2, .block-request > p { max-width:760px; }

/* Forms. The request band with a form: the heading and the text on the left, a white card with the form on the
   right (columns 7/5). The block «Форма»: the form in a card on the surface of the page. The fields read local
   properties, so one set of rules serves the white card and the page card in both themes. */
.request-with-form { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:var(--space-40); align-items:start; }
.request-copy h2 { margin-top:0; }
.request-copy .request-alt { margin-top:var(--space-24); font-size:var(--text-15); }
.request-copy .request-alt a { color:inherit; font-weight:600; white-space:nowrap; }
.request-card { padding:var(--space-28); border-radius:var(--radius-22); background:var(--plate); color:var(--on-plate); }
.form-card { max-width:760px; padding:var(--space-32); border:1px solid var(--x-color-border); border-radius:var(--radius-22); background:var(--x-color-surface); }
.site-form { --field-bg: var(--paper); --field-line: var(--x-color-border); --field-text: var(--x-color-text);
  --field-muted: var(--x-color-text-muted); --field-error: var(--form-error); --field-focus: var(--accent);
  display:flex; flex-direction:column; gap:var(--space-18); }
.request-card .site-form { --field-bg: var(--plate); --field-line: var(--plate-line); --field-text: var(--on-plate);
  --field-muted: var(--plate-muted); --field-error: var(--plate-error); --field-focus: var(--ink); }
.form-fields { display:flex; flex-wrap:wrap; gap:var(--space-16); }
.form-field { flex:1 1 100%; display:flex; flex-direction:column; gap:6px; min-width:0; }
.form-field-half { flex:1 1 calc(50% - var(--space-16)); }
.form-field > label:not(.form-choice), .form-choices legend { font-size:var(--text-14); font-weight:600; color:var(--field-text); }
.form-required { color:var(--field-muted); }
.site-form input:not([type=checkbox], [type=radio]), .site-form select, .site-form textarea {
  box-sizing:border-box; width:100%; min-height:48px; padding:var(--space-12) var(--space-14); border:1.5px solid var(--field-line);
  border-radius:var(--radius-12); background:var(--field-bg); color:var(--field-text); font:inherit; font-size:var(--text-15); }
.site-form textarea { min-height:120px; resize:vertical; }
.site-form input[type=file] { padding:7px; color:var(--field-muted); font-size:var(--text-14); cursor:pointer; }
.site-form input[type=file]::file-selector-button { margin-right:var(--space-12); padding:8px var(--space-14); border:1.5px solid var(--field-line);
  border-radius:var(--radius-8); background:transparent; color:var(--field-text); font:inherit; font-weight:600; cursor:pointer; }
.site-form input[type=file]:hover::file-selector-button { border-color:var(--field-focus); }
.site-form input:focus-visible, .site-form select:focus-visible, .site-form textarea:focus-visible { outline:2px solid var(--field-focus); outline-offset:1px; }
.request-card .site-form :is(input, select, textarea) { color-scheme:light; }
.form-choices { display:flex; flex-direction:column; gap:var(--space-12); margin:0; padding:0; border:0; }
.form-choice { display:flex; align-items:flex-start; gap:10px; font-size:var(--text-15); color:var(--field-text); cursor:pointer; }
.form-choice input { flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--field-focus); }
.form-consent { font-size:var(--text-13); color:var(--field-muted); }
.form-consent a { color:inherit; }
.form-hint { margin:0; font-size:var(--text-13); color:var(--field-muted); }
.form-field-error, .form-message { margin:0; font-size:var(--text-13); font-weight:600; color:var(--field-error); }
.has-error :is(input:not([type=checkbox], [type=radio]), select, textarea) { border-color:var(--field-error); }
.form-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-12); }
.form-submit { min-height:50px; padding:0 var(--space-28); border:0; border-radius:var(--button-radius, var(--radius-12)); background:var(--accent);
  color:var(--on-accent); font:inherit; font-size:var(--text-15); font-weight:600; cursor:pointer; }
.form-submit:hover { background:var(--accent-hover); }
.form-submit:focus-visible { outline:2px solid var(--field-focus); outline-offset:3px; }
.form-submit:disabled { opacity:.55; cursor:not-allowed; }
.request-card .form-submit { width:100%; background:var(--ink); color:var(--on-ink-strong); }
.request-card .form-submit:hover { background:var(--ink-line); }
.form-success { display:flex; flex-direction:column; gap:var(--space-12); }
.form-success:focus, .form-message:focus { outline:none; }
.form-success:focus-visible, .form-message:focus-visible { outline:2px solid var(--field-focus, var(--accent)); outline-offset:4px; border-radius:var(--radius-6); }
.form-success p { margin:0; font-size:var(--text-15); opacity:1; }
.form-success .form-success-title { font-size:var(--text-20); font-weight:var(--weight-strong); }
@media (max-width:900px) {
  .request-with-form { grid-template-columns:1fr; gap:var(--space-24); }
  .request-card { padding:var(--space-20); border-radius:var(--radius-18); }
  .form-card { padding:var(--space-20); }
  .form-field-half { flex-basis:100%; }
}

/* Top bar: the promo line above the header. The bar is dark in both themes, because the yellow mark color does
   not read on a light background. With a link, the whole bar is the link. */
.top-bar { background:var(--ink); color:var(--on-ink-strong); }
.top-bar .promo-inner { box-sizing:border-box; min-height:40px; max-width:1336px; margin:auto; padding:6px var(--space-16); display:flex;
  align-items:center; justify-content:center; gap:var(--space-14); color:inherit; text-decoration:none; }
.promo-until { flex:none; padding:5px 8px; border:1px solid rgb(var(--on-dark-rgb) / .35); border-radius:var(--radius-6); color:var(--on-ink-strong);
  font-family:var(--font-mono); font-size:var(--text-11); font-weight:500; line-height:1; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; }
/* The text and «Подробнее» share one gradient of the mark colors, so the colors move as one wave through the line.
   The gradient starts and ends on one color, so the repeated tiles meet with no seam. The magenta is 25% lighter:
   the pure mark gives less than 4.5:1 on the ink. */
.promo-line { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px var(--space-14); font-size:var(--text-14); font-weight:var(--weight-strong); line-height:1.35;
  background:linear-gradient(90deg, var(--mark-1), var(--mark-2-light) 33%, var(--mark-3) 66%, var(--mark-1));
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:promo-wave 6s linear infinite; text-wrap:balance; }
/* The text is a flex item of the line, so it balances its own lines: no word stays alone on the 2nd line. */
.promo-text { text-wrap:balance; }
@keyframes promo-wave { to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .promo-line { animation:none; } }
.promo-more { text-decoration:underline; text-decoration-color:rgb(var(--on-dark-rgb) / .6); text-underline-offset:3px; white-space:nowrap; }
.top-bar a.promo-inner:focus-visible { outline:2px solid var(--on-ink-strong); outline-offset:-4px; }
/* Phone: the chip and the text; the text takes 2 lines at most. The bar is still the link. */
@media(max-width:720px) {
  .top-bar .promo-inner { padding:6px var(--space-16); gap:10px; }
  .promo-more { display:none; }
  .promo-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
}
/* Several active promos take turns in the middle cell of the bar (variant E1). Each slide is its own link. The slides
   stand in one grid cell; the keyframes of the count show one slide at a time and switch `visibility`, so a hidden
   slide takes no click. A slide shows in the last 1/n of the cycle; the delay (i − n) × 6s makes slide 1 show at
   once. The dots run on the same timing. */
/* The grid stands in the content width of the header: the right cell ends level with the header button. */
.promo-cycle { box-sizing:border-box; max-width:1336px; margin:auto; padding:0 var(--space-28); display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:var(--space-16); min-height:40px; }
.promo-slides { grid-column:2; display:grid; }
.promo-slide { grid-area:1/1; display:flex; align-items:center; justify-content:center; gap:var(--space-14); padding:6px 0; color:inherit;
  text-decoration:none; opacity:0; visibility:hidden; animation:6s linear infinite both; }
.promo-slide:focus-visible, .top-bar .promo-all:focus-visible { outline:2px solid var(--on-ink-strong); outline-offset:2px; }
.promo-side { grid-column:3; justify-self:end; display:flex; align-items:center; gap:var(--space-14); }
.promo-dots { display:flex; gap:6px; }
.promo-dot { position:relative; width:6px; height:6px; border-radius:50%; background:rgb(var(--on-dark-rgb) / .3); }
.promo-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--on-ink-strong); opacity:0; visibility:hidden;
  animation:6s linear infinite both; }
.top-bar .promo-all { font-size:var(--text-13); font-weight:600; color:rgb(var(--on-dark-rgb) / .75); text-decoration:none; white-space:nowrap; }
.top-bar .promo-all:hover { color:var(--on-ink-strong); }
.promo-cycle:hover *, .promo-cycle:focus-within *, .promo-cycle:hover *::after, .promo-cycle:focus-within *::after { animation-play-state:paused; }
@keyframes promo-cycle-2 { 0%, 50.00% { opacity:0; visibility:hidden; } 54.17%, 95.83% { opacity:1; visibility:visible; } 100% { opacity:0; visibility:hidden; } }
.promo-cycle-2 .promo-slide, .promo-cycle-2 .promo-dot::after { animation-name:promo-cycle-2; animation-duration:12s; }
.promo-cycle-2 .promo-slide:nth-child(1), .promo-cycle-2 .promo-dot:nth-child(1)::after { animation-delay:-6s; }
.promo-cycle-2 .promo-slide:nth-child(2), .promo-cycle-2 .promo-dot:nth-child(2)::after { animation-delay:0s; }
@keyframes promo-cycle-3 { 0%, 66.67% { opacity:0; visibility:hidden; } 69.45%, 97.22% { opacity:1; visibility:visible; } 100% { opacity:0; visibility:hidden; } }
.promo-cycle-3 .promo-slide, .promo-cycle-3 .promo-dot::after { animation-name:promo-cycle-3; animation-duration:18s; }
.promo-cycle-3 .promo-slide:nth-child(1), .promo-cycle-3 .promo-dot:nth-child(1)::after { animation-delay:-12s; }
.promo-cycle-3 .promo-slide:nth-child(2), .promo-cycle-3 .promo-dot:nth-child(2)::after { animation-delay:-6s; }
.promo-cycle-3 .promo-slide:nth-child(3), .promo-cycle-3 .promo-dot:nth-child(3)::after { animation-delay:0s; }
@keyframes promo-cycle-4 { 0%, 75.00% { opacity:0; visibility:hidden; } 77.08%, 97.92% { opacity:1; visibility:visible; } 100% { opacity:0; visibility:hidden; } }
.promo-cycle-4 .promo-slide, .promo-cycle-4 .promo-dot::after { animation-name:promo-cycle-4; animation-duration:24s; }
.promo-cycle-4 .promo-slide:nth-child(1), .promo-cycle-4 .promo-dot:nth-child(1)::after { animation-delay:-18s; }
.promo-cycle-4 .promo-slide:nth-child(2), .promo-cycle-4 .promo-dot:nth-child(2)::after { animation-delay:-12s; }
.promo-cycle-4 .promo-slide:nth-child(3), .promo-cycle-4 .promo-dot:nth-child(3)::after { animation-delay:-6s; }
.promo-cycle-4 .promo-slide:nth-child(4), .promo-cycle-4 .promo-dot:nth-child(4)::after { animation-delay:0s; }
@keyframes promo-cycle-5 { 0%, 80.00% { opacity:0; visibility:hidden; } 81.67%, 98.33% { opacity:1; visibility:visible; } 100% { opacity:0; visibility:hidden; } }
.promo-cycle-5 .promo-slide, .promo-cycle-5 .promo-dot::after { animation-name:promo-cycle-5; animation-duration:30s; }
.promo-cycle-5 .promo-slide:nth-child(1), .promo-cycle-5 .promo-dot:nth-child(1)::after { animation-delay:-24s; }
.promo-cycle-5 .promo-slide:nth-child(2), .promo-cycle-5 .promo-dot:nth-child(2)::after { animation-delay:-18s; }
.promo-cycle-5 .promo-slide:nth-child(3), .promo-cycle-5 .promo-dot:nth-child(3)::after { animation-delay:-12s; }
.promo-cycle-5 .promo-slide:nth-child(4), .promo-cycle-5 .promo-dot:nth-child(4)::after { animation-delay:-6s; }
.promo-cycle-5 .promo-slide:nth-child(5), .promo-cycle-5 .promo-dot:nth-child(5)::after { animation-delay:0s; }
/* Reduced motion: the first slide and the first dot stand still. */
@media (prefers-reduced-motion: reduce) {
  .promo-cycle .promo-slide, .promo-cycle .promo-dot::after { animation:none; }
  .promo-cycle .promo-slide:first-child, .promo-cycle .promo-dot:first-child::after { opacity:1; visibility:visible; }
}
/* Phone: one column, no dots and no link to the list; the slide text takes 2 lines at most. */
@media(max-width:720px) {
  .promo-cycle { grid-template-columns:minmax(0,1fr); padding:0 var(--space-16); }
  .promo-slides { grid-column:1; }
  .promo-slide { gap:10px; }
  .promo-side { display:none; }
}

/* The promos section: the cards of the list page and the fixed top of a promo page. */
.promo-chip { display:inline-block; justify-self:start; padding:5px 8px; border:1px solid var(--x-color-border); border-radius:var(--radius-6);
  background:var(--x-color-surface); color:var(--x-color-text); font-family:var(--font-mono); font-size:var(--text-11); font-weight:500;
  line-height:1; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.promos-page h1 { margin:8px 0 var(--space-32); }
.promo-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-20); }
.promo-card { display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:var(--radius-20); background:var(--x-color-surface);
  color:inherit; text-decoration:none; }
.promo-card-cover { aspect-ratio:4/3; overflow:hidden; }
.promo-card-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.promo-card-body { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:var(--space-24); flex:1; }
.promo-card-body h2, .promo-card-body h3 { margin:0; font-size:var(--text-20); font-weight:var(--weight-strong); line-height:1.25; }
.promo-card-summary { margin:0; font-size:var(--text-15); color:var(--x-color-text-muted); display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; overflow:hidden; }
.promo-card-more { margin-top:auto; padding-top:4px; font-weight:600; color:var(--accent); }
.promo-card:hover .promo-card-more { text-decoration:underline; }
/* 1 or 2 cards are wide: 2 columns, and a card has the cover on the left 5/12 and the text on the right. The cover
   fills the full card height and crops the image. 1 card takes both columns. A poster keeps its vertical text. */
.promo-cards-wide { grid-template-columns:repeat(2, minmax(0,1fr)); }
.promo-cards-1 { grid-template-columns:minmax(0,1fr); }
.promo-cards-wide .promo-card:has(.promo-card-cover) { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.promo-cards-wide .promo-card-cover { aspect-ratio:auto; min-height:100%; }
.promo-cards-wide .promo-card-body { align-self:stretch; }
.promo-cards-wide .promo-card-poster { min-height:240px; }
/* A promo with no cover is a dark text poster in both themes. The chip of the bar stays at the top; the title with
   the moving gradient of the bar, the summary and «Подробнее →» go to the bottom as one group, so the empty space
   stands above the text and the base of the card lines up with the other cards. The same look serves the promo
   cards of «Актуальные предложения». */
.promo-card-poster, .offer-poster .offer { background:var(--ink); border-color:transparent; color:var(--on-ink-strong); }
.promo-card-poster .promo-chip { background:transparent; border-color:rgb(var(--on-dark-rgb) / .35); color:var(--on-ink-strong); }
.promo-card-poster .promo-card-body h2, .promo-card-poster .promo-card-body h3, .block .offer-poster .offer h3 {
  margin-top:auto; font-size:var(--text-36); font-weight:var(--weight-heavy); line-height:1.1; text-wrap:balance;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  background:linear-gradient(90deg, var(--mark-1), var(--mark-2-light) 33%, var(--mark-3) 66%, var(--mark-1));
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:promo-wave 6s linear infinite; }
.promo-card-poster .promo-card-summary, .offer-poster .offer-note { color:rgb(var(--on-dark-rgb) / .75); }
.promo-card-poster .promo-card-more, .offer-poster .offer-more { margin-top:0 !important; color:var(--on-ink-strong); font-weight:600; }
.offer-poster .offer-eyebrow { color:var(--on-ink-strong); }
.offer-poster .offer-note { margin-top:0 !important; font-family:inherit; font-size:var(--text-15); }
@media (prefers-reduced-motion: reduce) {
  .promo-card-poster .promo-card-body h2, .promo-card-poster .promo-card-body h3, .block .offer-poster .offer h3 { animation:none; }
}
.promos-empty p { margin:0 0 var(--space-12); font-size:var(--text-18); color:var(--x-color-text-muted); }
.promos-empty a { font-weight:600; color:var(--accent); }
.promo-head h1 { font-size:var(--text-44); font-weight:var(--weight-heavy); line-height:1.1; }
.promo-head .promo-chip { margin:4px 0 var(--space-12); }
/* The chip row of a promo page: the chip on the left, the link to all promos on the right end of the row. */
.promo-chip-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-16); margin:4px 0 var(--space-12); }
.promo-head .promo-chip-row .promo-chip { margin:0; }
.promo-all-link { margin-left:auto; font-size:var(--text-15); font-weight:600; color:var(--x-color-text-muted); text-decoration:none; white-space:nowrap; }
.promo-all-link:hover { color:var(--x-color-text); }
/* The band «Другие акции» under the blocks of a promo page. */
.promo-others h2 { font-size:var(--text-32); font-weight:var(--weight-heavy); }
.promo-ended { margin:0 0 var(--space-16); padding:var(--space-12) var(--space-16); border-radius:var(--radius-12); background:var(--paper); border:1px solid var(--x-color-border); font-size:var(--text-15); }
.promo-ended a { font-weight:600; color:var(--accent); }
/* Tablet: 2 columns, phone: 1 column; the cards are vertical. */
@media(max-width:1000px) {
  .promo-cards, .promo-cards-1 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .promo-cards-wide .promo-card:has(.promo-card-cover) { display:flex; }
  .promo-cards-wide .promo-card-cover { aspect-ratio:4/3; min-height:0; }
}
@media(max-width:720px) {
  .promo-cards, .promo-cards-1 { grid-template-columns:minmax(0,1fr); }
  .promo-head h1 { font-size:var(--text-32); }
}

/* A section of posts: the list with the cards of the posts, the pager and the fixed top of a post page. The title of
   a card is its link; the card has no nested link. */
.posts-page h1 { margin:8px 0 var(--space-16); }
.posts-page .entry-lead { margin-bottom:var(--space-32); }
.posts-page h1 + .post-cards { margin-top:var(--space-32); }
.post-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-20); }
.post-card { position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:var(--radius-20);
  background:var(--x-color-surface); }
.post-card-cover { aspect-ratio:16/10; overflow:hidden; }
.post-card-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.post-card-body { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:var(--space-24); flex:1; }
.post-card-body h2, .post-card-body h3 { margin:0; font-size:var(--text-20); font-weight:var(--weight-strong); line-height:1.25; }
/* The link of the title covers the whole card, so a click anywhere opens the post. */
.post-card-link { color:inherit; text-decoration:none; }
.post-card-link::after { content:""; position:absolute; inset:0; }
.post-card:hover .post-card-link { text-decoration:underline; }
.post-card-link:focus-visible { outline:none; }
.post-card:has(.post-card-link:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.post-card-summary { margin:0; font-size:var(--text-15); color:var(--x-color-text-muted); display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; overflow:hidden; }
.post-date { font-family:var(--font-mono); font-size:var(--text-12); letter-spacing:.04em; text-transform:uppercase; color:var(--x-color-text-muted); }
/* A post with no cover: the title is larger, and the card keeps the height of its neighbours. */
.post-card-poster { min-height:220px; }
.post-card-poster .post-card-body h2, .post-card-poster .post-card-body h3 { font-size:var(--text-24); text-wrap:balance; }
.posts-empty { margin:0 0 var(--space-32); font-size:var(--text-18); color:var(--x-color-text-muted); }
.pager { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-16); margin:var(--space-32) 0 0; }
.pager-link { font-weight:600; color:var(--accent); text-decoration:none; }
.pager-link:hover { text-decoration:underline; }
.pager-link[rel="next"] { justify-self:end; }
.pager-text { font-size:var(--text-15); color:var(--x-color-text-muted); }
.post-head h1 { font-size:var(--text-44); font-weight:var(--weight-heavy); line-height:1.1; text-wrap:balance; }
.post-meta { margin:4px 0 var(--space-12); }
.post-others h2 { font-size:var(--text-32); font-weight:var(--weight-heavy); }
@media(max-width:1000px) {
  .post-cards { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:720px) {
  .post-cards { grid-template-columns:minmax(0,1fr); }
  .post-head h1 { font-size:var(--text-32); }
  .pager { grid-template-columns:1fr 1fr; }
  .pager-text { grid-column:1 / -1; grid-row:1; }
}

/* Footer: a full-width ink band in both themes. Row 1: the brand, the footer columns, the contacts.
   Row 2: the copyright and up to 2 links. The phone stacks one column with the contacts after the brand. */
.site-footer { background:var(--ink); color:var(--on-ink-muted); font-size:var(--text-15); line-height:1.5; margin-top:var(--space-44);
  box-shadow:inset 0 1px 0 var(--ink-edge); }
.site-footer-inner { max-width:1336px; margin:auto; padding:var(--space-64) var(--page-gutter) var(--space-40); display:flex; flex-direction:column; gap:var(--space-56); }
.site-footer-main { display:flex; gap:var(--space-40); }
.site-footer-brand { flex:1.4 1 0; min-width:0; display:flex; flex-direction:column; gap:var(--space-16); }
.site-footer-nav { flex:3 1 0; min-width:0; display:flex; gap:var(--space-40); }
.site-footer-nav > .site-footer-column { flex:1 1 0; }
.site-footer-contacts { flex:1.2 1 0; }
.site-footer-column { min-width:0; overflow-wrap:anywhere; }
.site-footer-logo { display:block; width:auto; max-width:200px; height:40px; object-fit:contain; object-position:left center; }
.site-footer-name { margin:0; font-size:var(--text-24); line-height:1.2; font-weight:var(--weight-heavy); letter-spacing:-0.03em; color:var(--on-ink-strong); }
.site-footer-about { margin:0; max-width:280px; }
.site-footer-column h2 { margin:0 0 var(--space-12); font-family:var(--font-mono); font-size:var(--text-12); font-weight:500; line-height:1.4; letter-spacing:.06em; text-transform:uppercase; color:var(--on-ink-faint); }
.site-footer-column ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-12); }
.site-footer-column address { font-style:normal; }
.site-footer a { color:var(--on-ink-soft); text-decoration:none; }
.site-footer a:hover, .site-footer a:focus-visible { color:var(--on-ink-strong); text-decoration:underline; }
.site-footer-phone a { color:var(--on-ink-strong); font-size:var(--text-20); font-weight:var(--weight-strong); }
.site-footer .contact-text p { margin:0; }
.site-footer-bottom { border-top:1px solid var(--ink-line); padding-top:var(--space-24); display:flex; justify-content:space-between; gap:var(--space-12) var(--space-24); flex-wrap:wrap; font-size:var(--text-13); color:var(--on-ink-faint); }
.site-footer-bottom p { margin:0; }
.site-footer-bottom ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px var(--space-24); }
.site-footer-bottom a { color:var(--on-ink-faint); }
@media(max-width:1024px) and (min-width:721px) {
  .site-footer-inner { padding:var(--space-56) var(--page-gutter) var(--space-36); }
  .site-footer-main { flex-wrap:wrap; }
  .site-footer-brand { flex-basis:100%; }
}
@media(max-width:720px) {
  .site-footer { margin-top:var(--space-18); }
  .site-footer-inner { padding:var(--space-32) var(--page-gutter); gap:var(--space-22); }
  .site-footer-main { flex-direction:column; gap:var(--space-22); }
  .site-footer-contacts { order:-1; }
  .site-footer-brand { order:-2; }
  .site-footer-contacts h2 { display:none; }
  .site-footer-contacts ul { gap:8px; }
  /* The phone shows all footer links in one grid of 2 columns, without the column titles. */
  .site-footer-nav { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; border-top:1px solid var(--ink-line); padding-top:var(--space-18); }
  .site-footer-nav > .site-footer-column, .site-footer-nav ul { display:contents; }
  .site-footer-nav h2 { display:none; }
  .site-footer-bottom { border-top:0; padding-top:0; flex-direction:column; font-size:var(--text-12); }
}

/* Catalog menu. The band shows one line; the items that do not fit wrap out of the fixed height and stay hidden.
   A panel is a native popover: a button opens it on any device. A desktop pointer also opens it on hover. */
.site-nav-catalog .menu-band { position:relative; max-width:1336px; margin:auto; padding:0 var(--page-gutter); }
.menu-row { list-style:none; margin:0; padding:0; height:56px; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center;
  column-gap:var(--space-36); font-size:var(--text-15); font-weight:500; anchor-name:--menu-band; }
/* The first link of the end part takes the free space in front of it, so the end part ends at the content edge. */
.menu-item-end { margin-inline-start:auto; }
.menu-item { display:flex; align-items:center; gap:2px; height:56px; }
.menu-item > a { display:block; white-space:nowrap; padding:6px 0; border-bottom:2px solid transparent; }
.menu-item > a[aria-current] { font-weight:600; border-bottom-color:var(--accent); }
.menu-all-button { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 var(--space-14); border:0; border-radius:var(--button-radius, var(--radius-10));
  background:var(--x-color-text); color:var(--x-color-bg); font:inherit; font-weight:600; cursor:pointer; }
.menu-all-button::before { content:""; width:14px; height:14px; flex:none;
  background:linear-gradient(currentColor 0 0) 0 0 / 6px 6px no-repeat, linear-gradient(currentColor 0 0) 8px 0 / 6px 6px no-repeat,
    linear-gradient(currentColor 0 0) 0 8px / 6px 6px no-repeat, linear-gradient(currentColor 0 0) 8px 8px / 6px 6px no-repeat; }
.menu-toggle { width:24px; height:32px; padding:0; border:0; background:none; color:inherit; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; }
.menu-toggle::before { content:""; width:6px; height:6px; margin-top:-4px; border:solid currentColor; border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg); opacity:.6; }
.menu-toggle:focus-visible, .menu-all-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-8); }

/* The panel box. The popover resets of the browser are replaced here. */
.menu-panel { margin:0; border:1px solid var(--x-color-border); padding:var(--space-32); color:var(--x-color-text); background:var(--x-color-surface);
  border-radius:var(--radius-20); box-shadow:0 30px 60px rgb(var(--ink-rgb) / .25); font-size:var(--text-15); font-weight:400; white-space:normal;
  box-sizing:border-box; overflow:visible; }
.menu-panel:popover-open { position:absolute; inset:auto; top:anchor(--menu-band bottom); left:anchor(--menu-band left);
  right:anchor(--menu-band right); width:auto; height:auto; }
@supports not (anchor-name: --a) {
  .menu-panel:popover-open { position:fixed; top:0; left:0; right:0; max-height:100vh; overflow:auto; border-radius:0 0 var(--radius-24) var(--radius-24); }
}
@media (hover:hover) and (pointer:fine) {
  /* A short open delay and a longer close delay keep the panel on a diagonal move of the mouse. */
  .menu-item > .menu-panel:not(:popover-open) { display:none; position:absolute; inset:auto; top:100%; left:var(--page-gutter); right:var(--page-gutter); width:auto; height:auto; z-index:20;
    opacity:0; transition:display .2s allow-discrete, opacity .15s .05s; }
  .menu-item:hover > .menu-panel:not(:popover-open) { display:block; opacity:1; transition-delay:.12s; }
  @starting-style { .menu-item:hover > .menu-panel:not(:popover-open) { opacity:0; } }
}
.menu-panel a { text-decoration:none; }
.menu-panel a:hover { text-decoration:underline; }

/* A manual link to a collection opens the panel of that collection. With fewer tiles than columns, the panel is
   compact: as wide as its content. It sits 8 px under its band item and stays inside the content edges. The end
   margin equals the gap from the content edge to the viewport edge, so the margin box overflows exactly when the
   panel passes the content edge. Then the panel aligns its right edge to the item, then to the content edge (the
   band row). The scope keeps each item the anchor of its own panel. The bridge keeps the hover over the gap. */
.menu-panel.menu-panel-compact { width:max-content; max-width:calc(100vw - 32px); padding:var(--space-24); }
@position-try --menu-end { left:auto; right:anchor(right); margin-inline-end:0; }
@position-try --menu-content { left:auto; right:anchor(--menu-band right); margin-inline-end:0; }
@supports (anchor-name: --a) {
  .menu-item { anchor-name:--menu-item; anchor-scope:--menu-item; }
  .menu-panel.menu-panel-compact:popover-open, .menu-item > .menu-panel.menu-panel-compact:not(:popover-open) {
    position-anchor:--menu-item; top:calc(anchor(bottom) + 8px); left:anchor(left); right:auto;
    margin-inline-end:max(var(--page-gutter), (100vw - 1336px) / 2 + var(--page-gutter)); position-try-fallbacks:--menu-end, --menu-content; }
  .menu-panel-compact::before { content:""; position:absolute; left:0; right:0; top:-9px; height:9px; }
  /* A panel that the hover opens is fixed, not absolute: only then does the browser apply the fallbacks, so the
     panel of a link at the end of the band flips and does not pass the viewport edge. */
  .menu-item > .menu-panel.menu-panel-compact:not(:popover-open) { position:fixed; }
}

/* The «Все услуги» panel: the rail of menu groups on the left, the pane of the active group on the right. Each
   rail item holds its pane. The rows of the rail are auto tracks, and every pane spans all rows and the last 1fr
   track in one cell. An inactive pane is only invisible, so the tallest pane sets one panel height for all groups.
   The first group is active until another group gets the pointer or the focus. */
.menu-groups { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:260px minmax(0,1fr);
  grid-template-rows:repeat(20, auto) 1fr; align-items:start; }
.menu-groups > li { display:contents; }
.menu-group-link { grid-column:1; display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); box-sizing:border-box;
  position:relative; width:calc(100% - 16px); height:42px; margin:0; padding:0 var(--space-12); border:0; border-radius:var(--radius-10); background:none;
  color:inherit; font:inherit; font-size:var(--text-15); font-weight:600; text-align:left; cursor:pointer; transition:background-color 0s .15s; }
.menu-group-link::after { content:"→"; opacity:0; transition:opacity 0s .15s; }
/* The row reaches over the gap to its pane: the pointer on the way to the pane stays on its group. */
.menu-group-link::before { content:""; position:absolute; top:0; bottom:0; left:100%; width:16px; }
.menu-group-link:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* A pane shows and hides after 150 ms. A pointer that crosses other rows on a diagonal to the pane does not
   switch the group, and the pane it leaves stays until the pointer reaches it. */
.menu-group-pane { grid-column:2; grid-row:1 / -1; visibility:hidden; align-self:stretch; padding-left:var(--space-40);
  border-left:1px solid var(--x-color-border); transition:visibility 0s .15s; }
.menu-groups > li:is(:hover, :focus-within) > .menu-group-pane,
.menu-groups > li:first-child > .menu-group-pane { visibility:visible; }
.menu-groups:has(> li:not(:first-child):is(:hover, :focus-within)) > li:first-child > .menu-group-pane { visibility:hidden; }
.menu-groups > li:is(:hover, :focus-within) > .menu-group-link,
.menu-groups:not(:has(> li:not(:first-child):is(:hover, :focus-within))) > li:first-child > .menu-group-link { background:var(--paper); }
.menu-groups > li:is(:hover, :focus-within) > .menu-group-link::after,
.menu-groups:not(:has(> li:not(:first-child):is(:hover, :focus-within))) > li:first-child > .menu-group-link::after { opacity:1; }
/* The categories of a group in 4 columns. Each category is a subgrid of 2 rows (tile, body), so the names of one
   grid row stay level when a category has no tile. The body holds the name and its item links. */
.menu-group-cats { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--space-32) var(--space-40); }
.menu-group-cats > li { display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; align-content:start; min-width:0; }
.menu-gcat-tile { grid-row:1; display:block; width:112px; height:112px; overflow:hidden; border-radius:var(--radius-16); background:var(--tile); }
.menu-gcat-tile img { display:block; width:100%; height:100%; object-fit:cover; }
.menu-gcat-body { grid-row:2; display:flex; flex-direction:column; gap:8px; padding-top:var(--space-16); min-width:0; }
.menu-gcat-name { font-size:var(--text-18); font-weight:var(--weight-strong); line-height:1.25; hyphens:manual; color:inherit; }
.menu-gcat-items { list-style:none; margin:0; padding:0; }
.menu-gcat-items a { display:block; overflow:hidden; font-size:var(--text-14); line-height:25px; color:var(--x-color-text-muted); white-space:nowrap;
  text-overflow:ellipsis; }
.menu-panel .menu-gcat-items a:hover { color:var(--x-color-text); text-decoration:none; }
.menu-panel .menu-gcat-items .menu-gcat-all { font-weight:600; color:var(--accent); }
.menu-rail-all { display:inline-block; margin-top:var(--space-20); padding:0 var(--space-12); font-weight:600; color:var(--accent); }

/* A collection panel: the tiles, then the promo of 300 px; 4 columns, 3 with a promo. A tile row takes the height
   of its content: 168 px with a picture, 88 px when no tile of the row has a picture. */
.menu-collection { display:flex; gap:var(--space-16); align-items:stretch; }
.menu-tiles { flex:1; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:auto; gap:var(--space-16); min-width:0; }
.menu-tiles-1 { grid-template-columns:minmax(0,1fr); }
.menu-tiles-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.menu-tiles-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
/* A compact panel: the columns are the tile count, 260 px each. */
.menu-panel-compact .menu-tiles-1 { grid-template-columns:260px; }
.menu-panel-compact .menu-tiles-2 { grid-template-columns:repeat(2, 260px); }
.menu-panel-compact .menu-tiles-3 { grid-template-columns:repeat(3, 260px); }
/* The edge is an inset shadow, so a tile with a picture is 128 + 2 × 20 = 168 px high. */
.menu-tile { position:relative; display:flex; justify-content:space-between; gap:var(--space-12); box-sizing:border-box; min-height:88px; padding:var(--space-20);
  border-radius:var(--radius-20); background:var(--x-color-surface); box-shadow:inset 0 0 0 1px var(--x-color-border); color:inherit; min-width:0; }
.menu-panel .menu-tile:hover { text-decoration:none; box-shadow:inset 0 0 0 1px var(--x-color-border), 0 8px 24px rgb(var(--ink-rgb) / .12); }
.menu-tile-text { display:flex; flex-direction:column; gap:6px; min-width:0; hyphens:auto; overflow-wrap:break-word; }
/* The name keeps 3 lines at most, the second line 2 lines at most. */
.menu-tile-name, .menu-tile-second { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.menu-tile-name { -webkit-line-clamp:3; }
.menu-tile-second { -webkit-line-clamp:2; }
.menu-tile-name { font-size:var(--text-16); font-weight:var(--weight-strong); line-height:1.3; }
.menu-tile-second, .menu-price { color:var(--x-color-text-muted); font-size:var(--text-15); line-height:1.35; }
.menu-tile-cover { flex:none; width:128px; height:128px; border-radius:var(--radius-12); object-fit:cover; }
.menu-tile-arrow { position:absolute; right:var(--space-20); bottom:var(--space-16); font-size:var(--text-18); color:var(--x-color-text-muted); }
/* The text of a tile with no picture keeps room for the arrow. */
.menu-tile-plain .menu-tile-text { padding-inline-end:var(--space-28); }
.menu-promo { position:relative; flex:none; width:300px; border-radius:var(--radius-20); overflow:hidden; background:var(--ink); color:var(--on-photo);
  display:flex; align-items:flex-end; }
.menu-promo-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.menu-promo::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 30%, rgb(var(--ink-rgb) / .75)); }
.menu-promo-text { position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; padding:var(--space-24); }
.menu-promo-title { font-size:var(--text-22); font-weight:var(--weight-strong); line-height:1.2; letter-spacing:-.01em; text-wrap:balance; }
.menu-promo-link { font-weight:600; }
/* Only the link line of the promo gets the underline on hover, not the title. */
.menu-panel .menu-promo:hover { text-decoration:none; }
.menu-promo:hover .menu-promo-link { text-decoration:underline; }
.menu-collection-all { margin:var(--space-16) 0 0; text-align:right; font-size:var(--text-15); font-weight:600; }
.menu-panel .menu-collection-all a { color:var(--accent); }
/* With groups, a group lists its category links: one row of 44 px each, a line between the rows. */
.menu-mobile .menu-mobile-cats { list-style:none; margin:0; padding:0 0 8px; display:block; }
.menu-mobile details:has(> .menu-mobile-cats) > summary { font-size:var(--text-18); font-weight:var(--weight-strong); }
/* The category rows stand 16 px in from the group title; their lines start at the same indent. */
.menu-mobile-cats li { margin-left:var(--space-16); }
.menu-mobile-cats li + li { border-top:1px solid var(--x-color-border); }
.menu-mobile-cat { display:flex; align-items:center; min-height:44px; font-size:var(--text-16); font-weight:500; }
.menu-mobile-cat[aria-current] { margin-left:calc(-1 * (var(--space-12) + 3px)); padding-left:var(--space-12); border-left:3px solid var(--accent); color:var(--accent); }

/* Tablet and phone: the pills row and the burger list replace the band. */
.menu-pills, .menu-burger { display:none; }
.menu-burger { width:44px; height:44px; padding:0; border:1.5px solid var(--x-color-border); border-radius:var(--button-radius, var(--radius-12)); background:var(--x-color-surface);
  color:var(--x-color-text); cursor:pointer; align-items:center; justify-content:center; }
.menu-burger span, .menu-burger span::before, .menu-burger span::after { display:block; width:18px; height:2px; background:currentColor; border-radius:1px; }
.menu-burger span { position:relative; }
.menu-burger span::before, .menu-burger span::after { content:""; position:absolute; left:0; }
.menu-burger span::before { top:-6px; } .menu-burger span::after { top:6px; }
.menu-mobile { position:fixed; inset:0; width:auto; height:auto; max-width:none; max-height:none; margin:0; border:0; padding:var(--space-12) var(--space-20) var(--space-32);
  overflow:auto; background:var(--x-color-surface); color:var(--x-color-text); }
.menu-mobile a { text-decoration:none; }
.menu-mobile-head { display:flex; justify-content:space-between; align-items:center; min-height:44px; margin-bottom:8px; font-size:var(--text-20); font-weight:var(--weight-heavy); }
.menu-mobile-close { width:44px; height:44px; border:1.5px solid var(--x-color-border); border-radius:var(--button-radius, var(--radius-12)); background:none; color:inherit; cursor:pointer; position:relative; }
.menu-mobile-close::before, .menu-mobile-close::after { content:""; position:absolute; left:12px; right:12px; top:20px; height:2px; background:currentColor; transform:rotate(45deg); }
.menu-mobile-close::after { transform:rotate(-45deg); }
.menu-mobile details { border-bottom:1px solid var(--x-color-border); }
.menu-mobile summary { display:flex; justify-content:space-between; align-items:center; padding:var(--space-14) 0; font-size:var(--text-17); font-weight:600; cursor:pointer; list-style:none; }
.menu-mobile summary::-webkit-details-marker { display:none; }
.menu-mobile summary::after { content:""; width:7px; height:7px; margin-right:6px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); }
.menu-mobile details[open] summary::after { transform:rotate(-135deg); }
.menu-mobile details ul { list-style:none; margin:0; padding:0 0 var(--space-14); display:grid; gap:10px; }
/* The row «item — price». A row that holds a list never takes it. */
.menu-mobile details li:has(> .menu-price) { display:flex; justify-content:space-between; gap:var(--space-12); }
.menu-mobile-all { font-weight:600; color:var(--accent); }
.menu-mobile-links { list-style:none; margin:var(--space-18) 0 0; padding:0; display:grid; gap:var(--space-12); font-weight:500; }
/* The link of the current page: accent text 600 and a 3 px accent bar at the left edge. The negative margin keeps the
   text in line with the other links. */
.menu-mobile-links a[aria-current] { display:block; margin-left:calc(-1 * (var(--space-12) + 3px)); padding-left:var(--space-12); border-left:3px solid var(--accent);
  font-weight:600; color:var(--accent); }
.menu-mobile-phone { display:inline-block; margin-top:var(--space-22); font-size:var(--text-20); font-weight:var(--weight-strong); }
@media (max-width:1024px) {
  .site-nav-catalog { display:none; }
  .site-header-catalog .site-header-contacts, .site-header-catalog .site-nav-button { display:none; }
  .site-header-catalog .site-header-call { display:inline-flex; align-items:center; height:44px; padding:0 var(--space-16); border-radius:var(--button-radius, var(--radius-12));
    background:var(--accent); color:var(--on-accent); font-size:var(--text-15); font-weight:600; white-space:nowrap; }
  .site-header-catalog .site-header-actions { gap:8px; }
  .menu-burger { display:inline-flex; }
  .menu-pills { display:block; background:var(--x-color-surface); border-top:1px solid var(--x-color-border); border-bottom:1px solid var(--x-color-border); }
  .menu-pills ul { list-style:none; margin:0; padding:10px var(--space-20); display:flex; gap:8px; overflow-x:auto; scroll-padding-inline:var(--space-20); scrollbar-width:none;
    font-size:var(--text-14); font-weight:500; }
  .menu-pills ul::-webkit-scrollbar { display:none; }
  .menu-pills ul::after { content:""; flex:0 0 12px; }
  .menu-pills a { display:block; white-space:nowrap; padding:8px var(--space-12); border-radius:var(--radius-pill); background:var(--paper); text-decoration:none; }
  .menu-pills a[aria-current] { background:var(--x-color-text); color:var(--x-color-bg); scroll-initial-target:nearest; }
}

/* A text for screen readers only. */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Header search: a field between the identity and the contacts; the phone puts it on its own row. */
.site-search { position:relative; flex:1 1 0; min-width:0; margin:0; }
.site-search::before { content:""; position:absolute; left:var(--space-16); top:50%; width:18px; height:18px; margin-top:-9px; pointer-events:none;
  background:var(--x-color-text-muted); -webkit-mask:url(/images/icons/search.svg) center / contain no-repeat; mask:url(/images/icons/search.svg) center / contain no-repeat; }
.site-search input { box-sizing:border-box; width:100%; height:48px; padding:0 var(--space-16) 0 var(--space-46); border:1.5px solid var(--x-color-border); border-radius:var(--radius-12);
  background:var(--paper); color:var(--x-color-text); font:inherit; font-size:var(--text-15); }
.site-search input::placeholder { color:var(--x-color-text-muted); opacity:1; }
.site-search input:focus { outline:none; border-color:var(--accent); }
.site-search input::-webkit-search-cancel-button { cursor:pointer; }
/* The live panel under the header field: up to 6 hits with a thumbnail and the link to all the results. */
.search-live { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; padding:6px; border:1px solid var(--x-color-border);
  border-radius:var(--radius-16); background:var(--x-color-surface); color:var(--x-color-text);
  box-shadow:0 14px 34px color-mix(in srgb, var(--x-color-text) 14%, transparent); max-height:min(70vh, 560px); overflow:auto; }
.search-live[hidden] { display:none; }
.search-live-hits { list-style:none; margin:0; padding:0; }
.search-live-link { display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--space-12); align-items:center; padding:8px;
  border-radius:var(--radius-10); color:inherit; text-decoration:none; }
.search-live-link:hover, .search-live-link:focus-visible { background:var(--x-color-bg); outline:none; }
.search-live-link:focus-visible { box-shadow:inset 0 0 0 2px var(--accent); }
.search-live-image { aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-6); background:var(--x-color-bg); }
.search-live-image img { display:block; width:100%; height:100%; object-fit:cover; }
.search-live-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.search-live-kind { font-family:var(--font-mono); font-size:var(--text-12); letter-spacing:.04em; text-transform:uppercase; color:var(--x-color-text-muted); }
.search-live-title { font-weight:600; font-size:var(--text-15); line-height:1.3; }
.search-live-snippet { font-size:var(--text-14); line-height:1.4; color:var(--x-color-text-muted); overflow:hidden; display:-webkit-box;
  -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:anywhere; }
/* The link to all the results stays in view when the panel scrolls. */
.search-live-all { position:sticky; bottom:-6px; display:block; margin-top:4px; padding:10px 8px 12px; border-top:1px solid var(--x-color-border);
  background:var(--x-color-surface); color:var(--accent);
  font-weight:600; font-size:var(--text-15); text-decoration:none; }
.search-live-all:hover { text-decoration:underline; }
.search-live-all:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--radius-10); }
.search-live-empty { margin:0; padding:12px 8px; font-size:var(--text-15); color:var(--x-color-text-muted); }
@media (max-width:1024px) { .site-header-email { display:none; } }
@media (max-width:720px) {
  .site-header-bar { flex-wrap:wrap; }
  .site-search { order:3; flex-basis:100%; }
  .site-search input { height:44px; }
  .search-live-link { grid-template-columns:48px minmax(0,1fr); }
  /* The on-screen keyboard takes the lower half; the link to all the results stays above it. */
  .search-live { max-height:min(50dvh, 560px); }
}

/* A person who asks for less motion gets no zoom on hover. */
@media (prefers-reduced-motion: reduce) {
  .showcase-photo img, a.hero-tile img, .offer img, .catalog-tile-cover img, .catalog-tile, .offer { transition:none; }
  .showcase-photo:hover img, a.hero-tile:hover img, .card-link:hover :is(.offer, .catalog-tile-cover) img { transform:none; }
}

/* Portfolio: the list of works, the page of a tag and the case page of a work. */
.portfolio-page, .case { padding-bottom:var(--space-32); }
.portfolio-page h1 { margin:0 0 var(--space-20); }
.work-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 var(--space-24); }
.work-tags a, .case-tags a { display:inline-flex; align-items:center; height:34px; padding:0 var(--space-12); border:1.5px solid var(--x-color-border);
  border-radius:var(--radius-pill); background:var(--x-color-surface); color:var(--x-color-text); font-size:var(--text-14); font-weight:500; text-decoration:none; }
.work-tags a:hover, .case-tags a:hover { border-color:var(--x-color-text); }
.work-tags a[aria-current="page"] { border-color:var(--ink); background:var(--ink); color:var(--on-ink-strong); }
.work-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-14); }
.work-card a { display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:var(--radius-20); background:var(--x-color-surface);
  color:var(--x-color-text); text-decoration:none; }
.work-card-cover { background:var(--x-color-border); }
.work-card-cover img { display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; }
.work-card-cover:empty { aspect-ratio:16 / 10; }
.work-card-text { display:flex; flex-direction:column; gap:6px; padding:var(--space-16) var(--space-18) var(--space-18); }
.work-card :is(h2, h3) { margin:0; font-size:var(--text-18); font-weight:var(--weight-strong); line-height:1.3; }
.work-card-meta { font-size:var(--text-14); color:var(--x-color-text-muted); }
.work-card a:hover :is(h2, h3) { text-decoration:underline; text-underline-offset:3px; }
.work-empty { color:var(--x-color-text-muted); }

.case-head { display:flex; flex-direction:column; gap:var(--space-22); }
.case-head h1 { max-width:980px; margin:0; font-size:clamp(calc(2rem * var(--text-scale)), calc(4.2vw * var(--text-scale)), calc(3.25rem * var(--text-scale))); line-height:1.04; font-weight:var(--weight-heavy); letter-spacing:-.035em; text-wrap:balance; }
.case-facts { display:flex; flex-wrap:wrap; margin:0; padding:var(--space-18) 0; border-top:1.5px solid var(--x-color-text); border-bottom:1px solid var(--x-color-border); }
.case-facts > div { display:flex; flex-direction:column; gap:4px; padding:0 var(--space-24); border-left:1px solid var(--x-color-border); }
.case-facts > div:first-child { padding-left:0; border-left:0; }
.case-facts dt { font-family:var(--font-mono); font-size:var(--text-12); letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); }
.case-facts dd { margin:0; font-size:var(--text-17); font-weight:600; }
.case-facts a { color:inherit; }
.case-gallery { display:grid; gap:var(--space-14); margin-top:var(--space-28); }
.case-gallery-3 { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); grid-template-rows:300px 300px; }
.case-gallery-3 .case-photo:first-child { grid-row:1 / span 2; }
.case-gallery-2 { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); grid-template-rows:460px; }
.case-gallery-1 { grid-template-rows:520px; }
.case-photo { position:relative; margin:0; overflow:hidden; border-radius:var(--radius-20); background:var(--x-color-border); }
.case-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.case-more { position:absolute; right:14px; bottom:14px; display:flex; align-items:center; height:38px; padding:0 var(--space-14); border-radius:var(--button-radius, var(--radius-10));
  background:var(--plate); color:var(--on-plate); font-size:var(--text-14); font-weight:600; text-decoration:none; }
.case-columns { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--space-64); align-items:start; margin-top:var(--space-48); }
.case-step { display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--space-20); padding:var(--space-22) 0; border-top:1px solid var(--x-color-border); }
.case .case-step h2 { margin:0; padding-top:4px; font-family:var(--font-mono); font-size:var(--text-12); font-weight:400; letter-spacing:.05em;
  line-height:1.4; text-transform:uppercase; color:var(--x-color-text-muted); }
.case-text { font-size:var(--text-17); line-height:1.55; }
.case-text > * { margin:0; }
.case-text > * + * { margin-top:.75em; }
.case-numbers { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:8px 0 0; padding:0; border-top:1.5px solid var(--x-color-text); }
.case-numbers li { display:flex; flex-direction:column; gap:4px; padding:var(--space-18) var(--space-20) 0 0; }
.case-numbers strong { font-size:var(--text-40); font-weight:var(--weight-heavy); line-height:1; letter-spacing:-.03em; }
.case-numbers span { font-size:var(--text-14); color:var(--x-color-text-muted); }
.case-quote { display:flex; flex-direction:column; gap:var(--space-14); margin:var(--space-40) 0 0; padding:var(--space-28) var(--space-30); border-radius:var(--radius-20); background:var(--x-color-surface); }
.case-quote blockquote { margin:0; }
.case-quote blockquote p { margin:0; font-size:var(--text-20); line-height:1.5; font-weight:500; }
.case-quote figcaption { font-size:var(--text-14); color:var(--x-color-text-muted); }
.case-photos { margin-top:var(--space-56); }
.case .case-photos h2 { margin:0 0 var(--space-16); font-size:var(--text-24); }
.case-photos ul { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-12); margin:0; padding:0; }
.case-photos img { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--radius-14); }
.case-side { position:sticky; top:24px; display:flex; flex-direction:column; gap:var(--space-14); }
.case-cta { display:flex; flex-direction:column; gap:var(--space-14); padding:var(--space-26); border-radius:var(--radius-20); background:var(--ink); color:var(--on-ink-strong); }
.case-cta p { margin:0; font-size:var(--text-15); line-height:1.5; color:var(--on-ink-muted); }
.case-cta .case-cta-title { font-size:var(--text-24); font-weight:var(--weight-strong); line-height:1.15; letter-spacing:-.02em; color:var(--on-ink-strong); }
.case-cta a { display:flex; align-items:center; justify-content:center; height:52px; padding:0 var(--space-22); border-radius:var(--button-radius, var(--radius-12)); font-weight:600; text-decoration:none; }
.case-cta-main { background:var(--accent); color:var(--on-accent); }
.case-cta-call { border:1.5px solid var(--ink-line-strong); color:var(--on-ink-strong); }
.case-cta-call:hover { border-color:var(--on-ink-strong); }
.case-tags { display:flex; flex-direction:column; gap:var(--space-12); padding:var(--space-22) var(--space-24); border-radius:var(--radius-20); background:var(--x-color-surface); }
.case-tags p { margin:0; }
.case-tags .case-tags-title { font-family:var(--font-mono); font-size:var(--text-12); letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); }
.case-tags ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.case-tags .case-tags-note { font-size:var(--text-13); color:var(--x-color-text-muted); }
.block-similar .similar-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-16); margin-bottom:var(--space-22); }
.block-similar .similar-head h2 { margin:0; }
.similar-head a { color:var(--accent); font-weight:600; text-decoration:none; white-space:nowrap; }
.case-cta { box-shadow:inset 0 0 0 1px var(--ink-edge); }
@media (max-width:1024px) {
  .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .case-columns { grid-template-columns:minmax(0,1fr); gap:var(--space-32); }
  .case-side { position:static; }
}
@media (max-width:720px) {
  .work-grid { grid-template-columns:minmax(0,1fr); }
  .case-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-14) 0; }
  .case-facts > div { padding:0 var(--space-12); }
  .case-facts > div:nth-child(odd) { padding-left:0; border-left:0; }
  .case-facts dd { font-size:var(--text-15); }
  .case-gallery { gap:8px; margin-top:var(--space-20); }
  .case-gallery-3 { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:240px 150px; }
  .case-gallery-3 .case-photo:first-child { grid-row:auto; grid-column:1 / span 2; }
  .case-gallery-2 { grid-template-columns:minmax(0,1fr); grid-template-rows:240px 180px; }
  .case-gallery-1 { grid-template-rows:260px; }
  .case-photo { border-radius:var(--radius-16); }
  .case-more { right:8px; bottom:8px; height:32px; padding:0 10px; font-size:var(--text-13); }
  .case-columns { margin-top:var(--space-32); }
  .case-main > .case-step:first-child { padding-top:0; border-top:0; }
  .case-step { grid-template-columns:minmax(0,1fr); gap:8px; padding:var(--space-18) 0; }
  .case-text { font-size:var(--text-16); }
  .case-numbers strong { font-size:var(--text-28); }
  .case-numbers li { padding:var(--space-14) 10px 0 0; }
  .case-quote { margin-top:var(--space-28); padding:var(--space-20); }
  .case-quote blockquote p { font-size:var(--text-17); }
  .case-photos ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .block-similar .similar-head { flex-direction:column; align-items:flex-start; }
}
/* Below 480 px each number is a row: the value, then its label on the right. A long value such as «150 000» fits. */
@media (max-width:479px) {
  .case-numbers { grid-template-columns:1fr; }
  .case-numbers li { flex-direction:row; align-items:baseline; gap:var(--space-12); padding:var(--space-14) 0; }
  .case-numbers li + li { border-top:1px solid var(--x-color-border); }
}

/* Quick actions: up to 5 horizontal link tiles in one row under the first screen. The last tile can be ink.
   The row belongs to the first screen: the small gap (32, phone 24) above and below it replaces the block gap. */
.block.block-quick-actions { padding-block:var(--space-32); }
:is(.hero, .block):has(+ .block-quick-actions) { padding-bottom:0; }
.block-quick-actions + .block { padding-top:0; }
.quick-actions { list-style:none; display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0,1fr)); gap:var(--space-12); margin:0; padding:0; }
.quick-actions-1 { --n:1; } .quick-actions-2 { --n:2; } .quick-actions-3 { --n:3; } .quick-actions-4 { --n:4; }
.quick-action { box-sizing:border-box; display:flex; align-items:center; gap:var(--space-14); height:100%;
  min-height:72px; padding:var(--space-14) var(--space-18); border-radius:var(--radius-18); background:var(--x-color-surface); color:var(--x-color-text); text-decoration:none; }
.quick-action-icon { flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-12);
  background:var(--accent-soft); color:var(--accent); }
.quick-action-label { flex:1; min-width:0; font-size:var(--text-16); font-weight:var(--weight-strong); line-height:1.25;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.quick-action-go { flex:none; display:flex; color:var(--x-color-text-muted); transition:transform .2s ease; }
.quick-action:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (hover:hover) {
  .quick-action:hover .quick-action-label { text-decoration:underline; text-underline-offset:3px; }
  .quick-action:hover .quick-action-go { transform:translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .quick-action-go { transition:none; } }
.quick-action-ink { background:var(--ink); color:var(--on-ink-strong); }
.quick-action-ink .quick-action-icon { background:rgb(var(--on-dark-rgb) / .12); color:var(--on-ink-strong); }
.quick-action-ink .quick-action-go { color:var(--on-ink-strong); }
.quick-action-ink { box-shadow:inset 0 0 0 1px var(--ink-edge); }
@media (max-width:1024px) { .quick-actions { grid-template-columns:repeat(min(var(--n, 5), 3), minmax(0,1fr)); } }
@media (max-width:720px) {
  .block.block-quick-actions { padding-block:var(--space-24); }
  .quick-actions { grid-template-columns:1fr; gap:8px; }
  .quick-action { min-height:60px; padding:var(--space-12) var(--space-14); gap:var(--space-12); }
  .quick-action-label { font-size:var(--text-15); }
}

/* The theme choices on the html element. The layout sets each attribute from the theme; the design has none.
   A dark header: the header band takes the ink. Its subtree redefines the neutral inputs and the roles that its rules
   read, so the rules of the header stay as they are. The menu panels and the mobile menu open over the page, so they
   take the page colors back from the --page-* copies. */
:root {
  --page-bg: var(--x-color-bg);
  --page-surface: var(--x-color-surface);
  --page-text: var(--x-color-text);
  --page-text-muted: var(--x-color-text-muted);
  --page-border: var(--x-color-border);
  --page-paper: var(--paper);
  --page-tile: var(--tile);
}
:root[data-header="dark"] .site-header {
  --x-color-bg: var(--ink-band-surface); --x-color-surface: var(--ink); --x-color-text: var(--on-ink-strong);
  --x-color-text-muted: var(--on-ink-muted); --x-color-border: var(--ink-line-strong); --paper: var(--ink-band-surface);
  --tile: var(--ink-band-surface); color:var(--x-color-text); box-shadow:inset 0 -1px 0 var(--ink-edge); }
/* The search field of a dark header draws its native parts (the clear glyph, the autofill) for a dark ground. */
:root[data-header="dark"] .site-header .site-search input { color-scheme:dark; }
:root[data-header="dark"] .site-header :is(.menu-panel, .menu-mobile, .search-live) {
  --x-color-bg: var(--page-bg); --x-color-surface: var(--page-surface); --x-color-text: var(--page-text);
  --x-color-text-muted: var(--page-text-muted); --x-color-border: var(--page-border); --paper: var(--page-paper);
  --tile: var(--page-tile); }
/* Decorations «Черта»: one accent line instead of the squares, and the gradient text in one color. */
:root[data-decor="line"] .hero-eyebrow::before { width:24px; height:3px; background:var(--accent); }
:root[data-decor="none"] .hero-eyebrow::before { display:none; }
:root:is([data-decor="line"], [data-decor="none"]) :is(.promo-line, .promo-card-poster .promo-card-body :is(h2, h3), .block .offer-poster .offer h3) {
  background:none; color:var(--on-ink-strong); animation:none; }
/* The icon of the catalog button: three lines, four dots or no icon. The design shows four squares. */
:root[data-catalog-icon="lines"] .menu-all-button::before {
  background:linear-gradient(currentColor 0 0) 0 1px / 14px 2px no-repeat, linear-gradient(currentColor 0 0) 0 6px / 14px 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 11px / 14px 2px no-repeat; }
:root[data-catalog-icon="dots"] .menu-all-button::before { background:radial-gradient(circle, currentColor 0 2.5px, transparent 3px) 0 0 / 7px 7px; }
:root[data-catalog-icon="none"] .menu-all-button::before { display:none; }

/* The page of the site search: the field, the count, the hits as rows with a preview image, the pager. */
.search-page { max-width:880px; padding-bottom:var(--space-40); }
.search-page h1 { margin:8px 0 var(--space-24); font-size:var(--text-44); line-height:1.1; }
.search-page-form { display:flex; gap:var(--space-12); margin:0 0 var(--space-24); }
.search-page-form input { box-sizing:border-box; flex:1; min-width:0; height:52px; padding:0 var(--space-16); border:1.5px solid var(--x-color-border);
  border-radius:var(--radius-12); background:var(--x-color-surface); color:var(--x-color-text); font:inherit; font-size:var(--text-18); }
.search-page-form input:focus { border-color:var(--accent); }
.search-page-form input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.search-page-submit { height:52px; padding:0 var(--space-24); border:0; border-radius:var(--button-radius, var(--radius-12)); background:var(--accent);
  color:var(--on-accent); font:inherit; font-size:var(--text-15); font-weight:600; cursor:pointer; }
.search-page-submit:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.search-total { margin:0 0 var(--space-16); font-size:var(--text-15); color:var(--x-color-text-muted); }
/* An empty live region keeps its node for the next text; it takes no room. */
.search-total:empty, .search-total:has(> span:empty) { margin:0; }
.search-hits { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-12); }
.search-hit { position:relative; display:grid; grid-template-columns:140px minmax(0,1fr); gap:var(--space-20); align-items:start;
  padding:var(--space-16); border-radius:var(--radius-16); background:var(--x-color-surface); }
.search-hit-text { grid-template-columns:minmax(0,1fr); }
.search-hit-image { aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-10); }
.search-hit-image img { display:block; width:100%; height:100%; object-fit:cover; }
.search-hit-body { display:flex; flex-direction:column; gap:6px; min-width:0; }
.search-hit-kind { margin:0; font-family:var(--font-mono); font-size:var(--text-12); letter-spacing:.04em; text-transform:uppercase; color:var(--x-color-text-muted); }
.search-hit-body h2 { margin:0; font-size:var(--text-20); font-weight:var(--weight-strong); line-height:1.25; }
/* The link of the title covers the whole row, so a click anywhere opens the page. */
.search-hit-link { color:inherit; text-decoration:none; }
.search-hit-link::after { content:""; position:absolute; inset:0; }
.search-hit:hover .search-hit-link { text-decoration:underline; }
@supports selector(:has(*)) { .search-hit-link:focus-visible { outline:none; } }
.search-hit:has(.search-hit-link:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.search-hit-snippet { margin:0; font-size:var(--text-15); line-height:1.5; color:var(--x-color-text-muted); overflow-wrap:anywhere; }
.search-hit-snippet mark, .search-live mark { background:var(--accent-soft); color:var(--x-color-text); border-radius:var(--radius-6); padding:0 2px; font-weight:600; }
.search-empty-text { margin:0 0 var(--space-16); font-size:var(--text-18); color:var(--x-color-text-muted); }
.search-empty-links { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.search-empty-links a { display:block; padding:8px var(--space-16); border-radius:var(--radius-pill); background:var(--x-color-surface); color:inherit;
  text-decoration:none; font-weight:600; font-size:var(--text-15); }
.search-empty-links a:hover { color:var(--accent); }
@media (max-width:720px) {
  .search-page h1 { font-size:var(--text-32); }
  .search-hit { grid-template-columns:88px minmax(0,1fr); gap:var(--space-14); padding:var(--space-12); }
  .search-hit-text { grid-template-columns:minmax(0,1fr); }
  .search-hit-body h2 { font-size:var(--text-18); }
}
/* The page of a refused form POST: a short text and a link back. */
.form-refusal { max-width:640px; margin:var(--space-64) auto; padding:0 var(--page-gutter); }