/* 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.
   Beyond the BareDOM neutrals the design uses 4 tokens: --accent, --accent-soft, --ink (dark surfaces)
   and --paper (the page background). The --mark-* colors paint the eyebrow squares. */
: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;
  --tile: #eceae3;
  --on-accent: #ffffff;
  /* 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. */
  --card-hover-shadow: 0 1px 2px rgb(20 20 20 / .06), 0 18px 40px -12px rgb(20 20 20 / .22);
}
@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;
    --tile: #262522;
    --on-accent: #141414;
    --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 18px 40px -12px rgb(0 0 0 / .7);
  }
}
@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);
    --tile: light-dark(#eceae3, #262522);
    --on-accent: light-dark(#ffffff, #141414);
  }
}
:root {
  --paper: var(--x-color-bg);
  --accent: var(--x-color-primary);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--x-color-surface));
  --ink: #141414;
  --on-ink: #f5f4f0;
  --mark-1: #00a0df;
  --mark-2: #e5007e;
  --mark-3: #ffd200;
  --mark-4: var(--x-color-text);
  --font-text: Onest, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  font-family:var(--font-text);
  color:var(--x-color-text);
  background:var(--x-color-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* 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;
}
body {
  margin:0;
}
a {
  color:inherit;
}
main {
  max-width:1336px;
  margin:auto;
  padding:28px;
}
.preview-note {
  padding:10px 24px;
  background:color-mix(in srgb, var(--x-color-warning) 15%, var(--x-color-surface));
  text-align:center;
}
@media(max-width:720px) {
  main {
    padding:20px;
  }
}
.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 28px; min-height:84px; display:flex; align-items:center; gap:36px; }
.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:24px; font-weight:800; line-height:1.2; letter-spacing:-0.03em; }
.site-header-actions { flex:none; margin-left:auto; display:flex; align-items:center; gap:18px; min-width:0; }
.site-header-contacts { font-style:normal; display:flex; align-items:center; gap:18px; }
.site-header-reach { display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:1.3; }
.site-header-phone { font-size:18px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap; }
.site-header-email { font-size:13px; color:var(--x-color-text-muted); }
.site-header-link { min-width:46px; height:46px; padding:0 14px; border:1.5px solid var(--x-color-border); border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; 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:13px; font-weight:700; }
/* 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 22px; border-radius:12px; background:var(--accent); color:var(--on-accent);
  display:inline-flex; align-items:center; font-size:15px; font-weight:600; white-space:nowrap; }
.site-nav-button:hover, .site-nav-button:focus-visible { background:color-mix(in srgb, var(--accent) 86%, #000); }
.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 28px; min-height:56px; display:flex; align-items:center; gap:32px;
  font-size:15px; 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:24px; } .site-header-link { display:none; } }
@media(max-width:720px) {
  .site-header-bar { min-height:0; padding:12px 20px; gap:12px; }
  .site-name { font-size:20px; }
  .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 16px; border-radius:12px;
    background:var(--accent); color:var(--on-accent); font-size:15px; 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 20px; gap:8px; overflow-x:auto; scroll-padding-inline:20px; scrollbar-width:none; font-size:14px; }
  .site-nav > ul::-webkit-scrollbar { display:none; }
  .site-nav > ul::after { content:""; flex:0 0 12px; }
  .site-nav > ul > li > a { padding:8px 12px; border:0; border-radius:999px; 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 only at a space inside a label, so the
   separator never starts a line. */
.breadcrumbs ol { list-style:none; padding:0; margin:0 0 20px; font-size:.9rem; color:var(--x-color-text-muted); }
.breadcrumbs li { display:inline; }
.breadcrumbs li + li::before { content:"›"; margin:0 6px; }
.breadcrumbs a { text-decoration:none; }
.page-title { padding:8px 0 24px; }
.page-title h1 { margin:0; }
.breadcrumbs a:hover { text-decoration:underline; }
.catalog-grid { list-style:none; padding:0; margin:32px 0; display:grid; gap:24px; 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:12px; }
.catalog-card-link:hover h2 { text-decoration:underline; }
.catalog-card h2 { font-size:1.2rem; line-height:1.3; margin:0; overflow-wrap:anywhere; }
.catalog-card .catalog-cover { aspect-ratio:4/3; object-fit:cover; border-radius:12px; 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:700; }
.catalog-price-main { font-size:1.4rem; margin:0 0 20px; }
.catalog-lead { font-size:1.2rem; color:var(--x-color-text-muted); max-width:760px; margin:0 0 20px; }
.catalog-cover { display:block; width:100%; max-width:760px; height:auto; border-radius:16px; margin:0 0 28px; }
.catalog-body { max-width:760px; }
.catalog-body img { display:block; max-width:100%; height:auto; border-radius:12px; }
.catalog-body table { border-collapse:collapse; width:100%; margin:16px 0; }
.catalog-body th, .catalog-body td { border:1px solid var(--x-color-border); padding:8px 12px; text-align:left; }
.catalog-body blockquote { margin:16px 0; padding-left:16px; 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:32px 0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.catalog-gallery img { display:block; width:100%; height:auto; border-radius:12px; }
.catalog-entry h1 { max-width:900px; margin:0 0 28px; }
@media (max-width:720px) { .catalog-entry h1 { margin-bottom:20px; } }
.not-found { padding:60px 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:48px; align-items:center; padding:4px 0 40px; }
.entry-head-wide { grid-template-columns:minmax(0,1fr); }
.entry-head .breadcrumbs ol { margin-bottom:18px; }
.entry-head h1 { font-size:clamp(2.375rem,4.4vw,3.5rem); font-weight:800; line-height:1.02; letter-spacing:-.03em; margin:0 0 16px; text-wrap:balance; }
.entry-lead { font-size:1.125rem; 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 20px; margin:24px 0 0; }
.entry-price-line strong { font-size:1.75rem; font-weight:800; letter-spacing:-.02em; }
.entry-price-line span { font-size:.9375rem; color:var(--x-color-text-muted); }
.entry-head .hero-actions { margin-top:28px; }
.entry-head-cover { aspect-ratio:4/3; border-radius:20px; 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:24px; }
  .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 16px; border-radius:999px; font-weight:600; font-size:.9375rem; 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:40px; align-items:start; padding:4px 0 40px; }
.entry-gallery { display:grid; gap:12px; }
.entry-gallery-main { aspect-ratio:4/3; border-radius:20px; 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:12px; }
.entry-gallery li { aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--tile); }
.entry-buy { position:sticky; top:76px; padding:32px; background:var(--x-color-surface); border:1px solid var(--x-color-border); border-radius:24px; }
.entry-buy .breadcrumbs ol { margin-bottom:14px; }
.entry-buy h1 { font-size:clamp(2.125rem,3.2vw,2.75rem); font-weight:800; line-height:1.05; letter-spacing:-.03em; margin:0 0 12px; text-wrap:balance; }
.entry-buy .entry-lead { font-size:1rem; }
.entry-buy-price { margin:22px 0 4px; font-size:2.5rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.entry-buy-price small { margin-left:8px; font-size:1rem; font-weight:500; letter-spacing:0; color:var(--x-color-text-muted); }
.entry-buy .hero-actions { display:grid; gap:10px; margin-top:24px; }
.entry-buy .hero-actions a { justify-content:center; }
.entry-head .entry-buy-terms { margin-top:18px; }
/* 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:14px 0; border-top:1px solid var(--x-color-border); width:100%; font-weight:600; color:var(--accent); text-decoration:none; }
.entry-buy-terms { margin:16px 0 0; font-size:.875rem; 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:20px; }
  .entry-buy { position:static; padding:20px; border-radius:20px; }
  .entry-buy-price { font-size:2rem; }
}
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:-20px; padding-inline:20px; scroll-padding-inline:20px; }
}

/* 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:20px; }
.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:20px; 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:16px 18px 18px; }
.entry-card h3 { margin:0; font-size:1.125rem; font-weight:700; line-height:1.25; }
.entry-card-body > p:not(.entry-card-foot) { margin:0; font-size:.875rem; 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:1.0625rem; }
.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:20px; padding:8px 24px; background:var(--x-color-surface); border:1px solid var(--x-color-border); border-radius:20px; }
.entry-more h3 { margin:0; padding:14px 0 6px; font-size:.8125rem; font-weight:700; 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:32px; }
.entry-more a { display:flex; justify-content:space-between; gap:12px; padding:14px 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 16px; }
  .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:12px; }
  .entry-card h3 { font-size:.9375rem; }
  .entry-card-body > p:not(.entry-card-foot) { display:none; }
  .entry-card-foot b { font-size:.9375rem; }
}

/* Page builder blocks. Each block is a section with one h2. */
.block { padding:44px 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(1.75rem,2.7vw,2.375rem); font-weight:700; line-height:1.15; margin:0 0 32px; 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:#a3a097;
  --x-color-border:#33322e; --x-color-surface:#1c1c1a; 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:44px 0; padding:80px 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:-44px; }
/* 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:16px 40px; flex-wrap:wrap; margin-bottom:36px; }
.block-head h2 { margin:0; max-width:620px; }
.block-side { max-width:460px; font-size:1.0625rem; line-height:1.5; color:var(--x-color-text-muted); }
.block h3 { font-size:1.05rem; 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:12px; }
.block-intro { color:var(--x-color-text-muted); margin:-20px 0 32px !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:.95rem; }

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

.solutions { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.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:18px; font-weight:700; 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:32px 0 12px; font-weight:700; 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:1.625rem; line-height:1.2; }
.block .block-body h3 { font-size:1.25rem; line-height:1.25; }
@media (max-width:720px) { .block .block-body h2 { font-size:1.375rem; } .block .block-body h3 { font-size:1.125rem; } }
/* 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:.9375rem; font-weight:600; color:var(--accent); }
.text-more > summary::-webkit-details-marker { display:none; }
.text-more > summary::after { content:"▾"; font-size:.75rem; }
.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:18px 0; }
  .block:is(.block-catalog-items, .block-advantages, .block-reviews, .block-clients, .block-steps) { margin:18px 0; padding:48px 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:-18px; }
}

/* 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:12px; }
.gallery figure { margin:0; display:grid; gap:6px; }
.gallery figcaption { font-size:.9rem; color:var(--x-color-text-muted); }
.gallery-open { display:block; width:100%; padding:0; border:0; border-radius:12px; 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:24px;
  border:0; background:transparent; }
.gallery-view::backdrop { background:rgb(0 0 0 / .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:8px; }
.gallery-view figcaption { color:#fff; text-align:center; }
.gallery-close { position:fixed; top:12px; right:16px; width:44px; height:44px; border:0; border-radius:50%; font-size:28px; line-height:1;
  color:#fff; background:rgb(255 255 255 / .12); cursor:pointer; }
.gallery-close:hover { background:rgb(255 255 255 / .24); }
.gallery-close:focus-visible { outline:2px solid #fff; 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(2.25rem,4.3vw,3.875rem); line-height:1.04; font-weight:800; letter-spacing:-.035em;
  margin:0; overflow-wrap:anywhere; text-wrap:balance; }
.hero { padding:48px 0 64px; display:grid; gap:48px; }
/* 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:20px; }
@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:26px; min-width:0; }
.hero-eyebrow { display:flex; align-items:center; gap:10px; margin:0; font-family:var(--font-mono); font-size:.8125rem;
  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:1.1875rem; 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 26px; border-radius:12px; background:var(--accent);
  color:var(--on-accent); font-size:1rem; font-weight:600; text-decoration:none; }
.hero-action:hover { background:color-mix(in srgb, var(--accent) 88%, black); }
.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:16px 16px 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:1.875rem; font-weight:700; line-height:1.2; letter-spacing:-.03em; }
.hero-stats span { font-size:.8125rem; line-height:1.35; color:var(--x-color-text-muted); }

.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:12px; 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:22px; 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 12px; border-radius:10px;
  background:#fff; color:#141414; font-size:.875rem; 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:22px; 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:24px;
  overflow:hidden; border-radius:22px; 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:24px; left:24px; right:24px; font-family:var(--font-mono); font-size:.8125rem;
  letter-spacing:.05em; text-transform:uppercase; opacity:.85; }
.hero-fact strong { font-size:clamp(2rem,3vw,2.75rem); font-weight:800; line-height:1; letter-spacing:-.03em; overflow-wrap:anywhere; }
.hero-fact-label { font-size:.9375rem; 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:14px 16px; border-radius:14px; }
.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:28px; }
  .hero-fact-only .hero-fact-eyebrow { top:28px; left:28px; right:28px; }
  /* 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((.8125rem * 1.6 - 8px) / 2); }
}

@media (max-width:900px) {
  .hero { padding:28px 0 40px; gap:28px; }
  .hero-with-image { grid-template-columns:minmax(0,1fr); }
  .hero-copy { gap:20px; }
  .hero-action { width:100%; justify-content:center; }
  .hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:16px; }
  .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 12px; border-radius:10px; background-image:none;
    font-size:.8125rem; 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:20px; }
  .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:12px; margin-top:8px; }
.hero-link { display:inline-flex; align-items:center; gap:8px; min-height:58px; padding:0 24px; border-radius:12px; 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:1rem; 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:40px; min-height:640px;
  box-sizing:border-box; padding:64px 64px 40px; overflow:hidden; border-radius:28px; background:var(--ink); color:#fff;
  --x-color-text:#fff; --x-color-text-muted:#d9d7d0; --x-color-border:rgb(255 255 255 / .2); --mark-4:#fff; }
.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(20 20 20 / .9) 0%, rgb(20 20 20 / .72) 40%, rgb(20 20 20 / .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:24px; width:700px; max-width:100%; }
.hero-band :is(h1, .hero-heading) { font-size:clamp(2.25rem,4.4vw,4rem); line-height:1.02; }
.hero-band .hero-stats { max-width:800px; grid-template-columns:repeat(4,minmax(0,200px)); border-top:1px solid rgb(255 255 255 / .35); }
.hero-band .hero-stats li { padding-top:18px; }
.hero-band .hero-photo-caption { position:absolute; right:24px; bottom:24px; max-width:calc(100% - 912px); margin:0; padding:8px 12px; border-radius:10px;
  background:rgb(20 20 20 / .55); color:#fff; font-size:.8125rem; 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:16px; min-height:620px; padding:20px 20px 22px; border-radius:22px; }
  .hero-band::before { background:linear-gradient(180deg, rgb(20 20 20 / .15) 0%, rgb(20 20 20 / .55) 35%, rgb(20 20 20 / .92) 70%); }
  .hero-band::after { display:none; }
  .hero-band .hero-copy { gap:16px; }
  .hero-band :is(h1, .hero-heading) { font-size:2.125rem; line-height:1.04; }
  .hero-band .hero-eyebrow { font-size:.6875rem; }
  .hero-band .hero-eyebrow::before { display:none; }
  .hero-band .hero-description { font-size:.9375rem; }
  .hero-band .hero-action { min-height:54px; }
  .hero-band .hero-link { min-height:50px; font-size:.9375rem; }
  .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:12px; }
  .hero-band .hero-stats li:nth-child(n+3) { display:none; }
  .hero-band .hero-stats strong { font-size:1.5rem; }
  .hero-band .hero-stats span { font-size:.75rem; }
}

/* 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:22px; }
.showcase-head { display:flex; flex-direction:column; gap:10px; }
.block-showcase .showcase-head :is(h1, h2) { margin:0; font-size:clamp(2rem,3.4vw,3rem); line-height:1.05; font-weight:800;
  letter-spacing:-.035em; }
.showcase-intro { max-width:820px; font-size:1.0625rem; 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:14px 24px; }
.block .showcase-links { display:flex; flex-wrap:wrap; gap:10px; }
.showcase-links a { display:flex; align-items:center; height:40px; padding:0 16px; box-sizing:border-box; border-radius:999px;
  border:1.5px solid var(--x-color-border); background:var(--x-color-surface); font-size:.875rem; 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:14px; 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:.8125rem; color:var(--x-color-text-muted); }
.showcase-help a { font-size:1rem; font-weight:700; text-decoration:none; }
.block .showcase-cards { display:grid; gap:14px; 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:24px; background:var(--ink); color:#fff; }
.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(20 20 20 / .8) 0%, rgb(20 20 20 / .4) 40%, rgb(20 20 20 / 0) 62%, rgb(20 20 20 / .35) 100%); }
.showcase-photo .showcase-text { position:absolute; z-index:2; top:32px; left:34px; right:34px; display:flex; flex-direction:column; gap:12px; }
.block .showcase-photo :is(h2, h3) { margin:0; font-size:2rem; line-height:1.08; font-weight:800; letter-spacing:-.03em; text-wrap:balance; }
.block .showcase-lead { max-width:440px; font-size:1rem; line-height:1.5; color:#e9e7e1; }
.showcase-price { font-family:var(--font-mono); font-size:.8125rem; }
.showcase-photo .showcase-price { color:#ffd200; }
.showcase-button { position:absolute; z-index:2; left:34px; bottom:30px; display:flex; align-items:center; gap:8px; height:48px;
  padding:0 20px; border-radius:999px; background:#fff; color:#141414; font-size:.9375rem; font-weight:600; }
.showcase-compact { display:flex; flex-direction:column; justify-content:space-between; padding:22px; border-radius:20px;
  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:1.1875rem; line-height:1.2; font-weight:700; 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:14px; }
@media (min-width:721px) {
  .showcase-3 .showcase-cards > li:not(:first-child) :is(h2, h3) { font-size:1.625rem; }
  .showcase-3 .showcase-cards > li:not(:first-child) .showcase-lead { font-size:.9375rem; }
  .showcase-many .showcase-photo .showcase-text { top:34px; left:36px; right:36px; }
  .block .showcase-many .showcase-photo :is(h2, h3) { max-width:460px; font-size:2.125rem; }
  .showcase-many .showcase-button { left:36px; bottom:32px; }
}
/* 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:12px; }
  .block .showcase-help { margin-left:0; }
  .block .showcase-links { flex-wrap:nowrap; width:calc(100% + 40px); margin:0 -20px; padding:0 20px; 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 -20px; padding:4px 20px;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px; 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:20px; }
  .showcase-photo .showcase-text { top:20px; left:20px; right:20px; gap:8px; }
  .block .showcase-photo :is(h2, h3) { font-size:1.5rem; line-height:1.1; }
  .block .showcase-lead { font-size:.875rem; line-height:1.45; }
  .showcase-button { left:20px; bottom:18px; height:42px; padding:0 16px; font-size:.875rem; }
  .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:16px; }
  .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 12px 12px; }
  .block .showcase-compact :is(h2, h3) { font-size:.9375rem; }
  .showcase-compact .showcase-price { font-size:.6875rem; }
  .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:32px; align-items:start; }
.price-card { min-width:0; overflow:hidden; border-radius:20px; background:var(--x-color-surface); }
.price-top { display:flex; flex-direction:column; gap:14px; padding:22px 28px 18px; }
.price-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 24px; }
.block .price-head h2 { margin:0; font-size:1.375rem; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
.price-unit { font-size:.875rem; color:var(--x-color-text-muted); }
.block .price-conditions { display:flex; flex-wrap:wrap; gap:8px; }
.price-conditions li { padding:5px 10px; border-radius:8px; background:var(--x-color-bg); font-size:.8125rem; 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:.9375rem; line-height:1.4; }
.price-grid thead th { padding:12px 28px; border-block:1px solid var(--x-color-border);
  background:var(--price-tint); font-family:var(--font-mono); font-size:.75rem;
  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:14px 28px; 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:12px 28px; color:var(--x-color-text-muted); font-size:14px; 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:20px; } }
/* 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:6px; background:var(--accent); color:var(--on-accent);
  font-size:.75rem; font-weight:600; line-height:1.4; vertical-align:1px; }
.price-note { display:flex; align-items:flex-start; gap:10px; padding:16px 28px; border-top:1px solid var(--x-color-border);
  font-size:.875rem; 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:16px; padding:26px; border-radius:20px;
  background:var(--ink); color:#fff; }
.price-aside-eyebrow { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:#bdbab2; }
.price-aside-title { font-size:1.5rem; font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.price-aside-text { font-size:.9375rem; line-height:1.5; color:#bdbab2; }
.price-aside-button { display:flex; align-items:center; justify-content:center; height:48px; padding:0 20px; border-radius:12px;
  background:var(--accent); color:var(--on-accent); font-size:.9375rem; font-weight:600; text-decoration:none; }
.price-aside-button:hover, .price-aside-button:focus-visible { background:color-mix(in srgb, var(--accent) 86%, #000); }
.price-aside-phone { font-size:1.125rem; font-weight:700; color:#fff; 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:-20px; 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:-20px; padding-top:0; }
  :is(.block-price-table, .block-pair-even) + .block-pair-even { margin-top:-20px; }
  :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:372px; }
  /* In a pair both tables start at one line. */
  .block-pair-even > .block + .block { margin-top:0; padding-top:16px; }
  :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:16px; }
  .price-grid :is(th, td) { padding-inline:16px; }
  .price-grid .price-row-note td { padding-inline:16px; }
}
@media (max-width:720px) {
  .price-card { overflow:visible; background:transparent; border-radius:0; }
  .price-top { padding:0 0 14px; }
  .price-conditions li { background:var(--x-color-surface); }
  .block-price-table + .block-price-table { padding-top:26px; }
  .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:16px; background:var(--x-color-surface); }
  .price-hot { background:var(--accent-soft); }
  .price-grid :is(th, td) { padding:10px 16px; }
  .price-grid tbody th { padding-top:14px; white-space:normal; font-size:1rem; }
  .price-grid td { display:flex; justify-content:space-between; align-items:baseline; gap:16px; text-align:right; }
  .price-grid td::before { content:attr(data-label); font-family:var(--font-text); font-size:.8125rem; 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:14px; border-bottom:0; }
  .price-note { padding:14px 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 16px; margin-left:auto; border-radius:12px;
  border:1.5px solid var(--x-color-border); font-size:.875rem; 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:16px; align-items:start; }
.block-pair > .block { padding-block:16px 44px; }
/* 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:18px; }
  .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:26px; }
}
/* Two narrow price tables: equal columns, 24 px apart. */
.block-pair-even { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
/* An ink surface on the dark page gets a thin border, so its edge stays visible. */
@media (prefers-color-scheme: dark) {
  :is(.quick-ink, .requisites-file, .price-aside) { box-shadow:inset 0 0 0 1px var(--x-color-border); }
}
/* The contacts blocks follow each other closely, as one page part. */
.block:is(.block-quick-contacts, .block-addresses) { padding-block:20px; }
.copy-button { padding:0; border:0; background:none; font:inherit; font-size:.875rem; 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:12px; }
.quick-contact { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; padding:20px 22px; border-radius:18px;
  background:var(--x-color-surface); }
.quick-label { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); }
.quick-value { max-width:100%; overflow-wrap:anywhere; font-size:1.125rem; font-weight:700; line-height:1.3; letter-spacing:-.01em; text-decoration:none; }
.quick-note { font-size:.875rem; line-height:1.4; color:var(--x-color-text-muted); }
.quick-ink { background:var(--ink); color:#fff; }
.quick-ink .quick-value { font-size:1.375rem; }
.quick-ink :is(.quick-label, .quick-note) { color:#bdbab2; }
.addresses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.address-card { display:flex; flex-direction:column; overflow:hidden; border-radius:22px; 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 14px;
  border-radius:10px; background:#fff; color:#141414; font-size:.875rem; font-weight:600; text-decoration:none;
  box-shadow:0 2px 8px rgb(20 20 20 / .12); }
.address-body { display:flex; flex-direction:column; gap:18px; padding:24px 26px 26px; }
.block .address-body h3 { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:1.5rem; font-weight:700; letter-spacing:-.02em; }
.address-tag { padding:3px 8px; border-radius:6px; background:var(--x-color-bg); color:var(--x-color-text-muted); font-size:.75rem;
  font-weight:600; letter-spacing:0; }
.address-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; 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:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); }
.address-facts dd { margin:0; font-size:.9375rem; line-height:1.45; }
.address-facts dd a { color:inherit; }
.address-hours-note { display:block; margin-top:4px; font-size:14px; 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 16px; border-radius:12px; border:1.5px solid var(--x-color-border);
  background:var(--x-color-surface); font-size:.875rem; 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:color-mix(in srgb, var(--tile) 70%, #d9d4c4);
  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, #9fc48a 45%, transparent) 0 40px, transparent 41px),
    radial-gradient(circle at 80% 78%, color-mix(in srgb, #9fc48a 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(20 20 20 / .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:16px; padding:26px 28px; border-radius:22px; background:var(--x-color-surface); }
.requisites-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px 16px; }
.block :is(.requisites-head, .files-card) h2 { margin:0; font-size:1.625rem; font-weight:700; 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 16px; border-radius:12px;
  border:1.5px solid var(--x-color-border); background:var(--x-color-surface); color:var(--x-color-text); font-size:.875rem; 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:#fff; }
.requisites { margin:0; }
.requisites > div { display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; padding:10px 0;
  border-bottom:1px solid color-mix(in srgb, var(--x-color-border) 60%, transparent); font-size:.9375rem; }
.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:14px; align-items:center; padding:14px 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:8px; background:var(--x-color-bg); font-family:var(--font-mono); font-size:.625rem; font-weight:500; }
.file-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.file-title { font-size:1rem; font-weight:700; }
.file-caption { font-size:.8125rem; color:var(--x-color-text-muted); }
.file-action { font-size:.875rem; 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:14px 12px; gap:4px; }
  .quick-wide { padding-inline:16px; }
  .quick-value { font-size:.9375rem; }
  .quick-ink .quick-value { font-size:1.25rem; }
  .requisites-actions { gap:8px; }
  .requisites-actions .copy-button, .requisites-file { height:40px; padding:0 10px; font-size:.8125rem; }
  .addresses { grid-template-columns:1fr; }
  .address-map { height:200px; }
  .address-body { padding:20px; }
  .address-facts { grid-template-columns:1fr; }
  .requisites-card, .files-card { padding:20px; }
  .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:20px; }
.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:18px; height:100%; min-height:220px; padding:28px; overflow:hidden; border-radius:20px;
  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:20px; }
.offer img { width:calc(100% + 56px); max-width:none; height:160px; margin:-28px -28px 0; object-fit:cover; border-radius:0; transition:transform .4s ease; }
.offer-eyebrow { font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); }
.block .offer h3 { font-size:1.625rem; font-weight:700; line-height:1.15; letter-spacing:-.02em; overflow-wrap:anywhere; }
.offer-note { margin-top:auto !important; font-family:var(--font-mono); font-size:1.25rem; }
.offer-more { margin-top:auto !important; display:flex; align-items:center; gap:6px; font-size:.9375rem; 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:12px; }
  .offer { min-height:160px; padding:24px; }
  .offer img { width:calc(100% + 48px); margin:-24px -24px 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:14px; min-width:0; padding:28px 28px 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:.8125rem; color:var(--accent); text-transform:uppercase; }
.advantage-value { font-size:clamp(2.25rem,3.1vw,2.75rem); font-weight:800; line-height:1; letter-spacing:-.035em; overflow-wrap:anywhere; }
.block .advantages h3 { font-size:1.0625rem; font-weight:600; line-height:1.35; }
.advantage-text { font-size:.875rem; 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:24px 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:20px; }
.catalog-tiles > li { min-width:0; }
.catalog-tile { display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:20px; 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:20px; }
.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:8px;
  background:var(--mark-3); color:#141414; font-size:.75rem; font-weight:600; line-height:1.3; }
.catalog-tile-body { display:flex; flex-direction:column; gap:8px; flex:1; padding:18px 20px 20px; }
.block .catalog-tile h3 { font-size:1.1875rem; font-weight:700; 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:.875rem; line-height:1.45; color:var(--x-color-text-muted); }
.catalog-tile .catalog-price { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto !important;
  padding-top:6px; font-family:var(--font-mono); font-size:1.0625rem; 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:.9375rem; 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:12px; }
  .catalog-tile { border-radius:16px; }
  .catalog-tile-body { padding:12px 12px 14px; gap:6px; }
  .block .catalog-tile h3 { font-size:.9375rem; }
  .catalog-tile-summary { display:none; }
  .catalog-tile .catalog-price { font-size:.8125rem; padding-top:2px; }
  .catalog-tile .catalog-price::after { display:none; }
}
.catalog-card-cover { border-radius:12px; }

/* 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:20px; }
.steps li { display:flex; flex-direction:column; gap:12px; min-width:0; padding-top:20px; 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:.875rem; 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:1.1875rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.steps p { font-size:.875rem; 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:16px; padding:14px 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 16px; border:1.5px solid var(--x-color-border);
  border-radius:999px; background:var(--x-color-surface); font-size:.875rem; 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:16px; }
.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:22px; 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:22px; }
.portfolio-grid figcaption { position:absolute; left:14px; right:14px; bottom:14px; padding:10px 12px; border-radius:10px;
  background:#fff; color:#141414; font-size:.875rem; 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:60px 24px 22px;
  border-radius:0; background:linear-gradient(transparent, rgb(0 0 0 / .7)); color:#fff; }
.portfolio-meta { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; opacity:.85; }
.portfolio-grid > li:first-child .portfolio-title { font-size:1.375rem; font-weight:700; line-height:1.25; }
.block-action { display:flex; justify-content:center; margin-top:28px !important; }
.button-outline { display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 26px; border:1.5px solid var(--x-color-text);
  border-radius:12px; font-size:.9375rem; 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:12px; }
  .portfolio-grid > li:first-child { grid-row:auto; }
  .portfolio-grid figcaption { left:8px; right:8px; bottom:8px; padding:6px 8px; font-size:.75rem; }
  .portfolio-grid > li:first-child figcaption { padding:40px 16px 16px; }
  .portfolio-grid > li:first-child .portfolio-title { font-size:1.125rem; }
}

/* Reviews: quote cards; on the phone the cards scroll sideways with snap. */
.reviews { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.reviews > li { min-width:0; }
.review { display:flex; flex-direction:column; gap:24px; height:100%; margin:0; padding:30px; border-radius:20px; 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:1.0625rem; line-height:1.55; }
.review figcaption { display:flex; flex-direction:column; gap:2px; padding-top:16px; border-top:1px solid var(--x-color-border); }
.review figcaption b { font-size:.9375rem; }
.review figcaption span { font-size:.8125rem; color:var(--x-color-text-muted); }
@media (max-width:900px) {
  .reviews { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -20px; padding:0 20px 8px; scroll-padding:0 20px; }
  .reviews > li { flex:0 0 86%; scroll-snap-align:start; }
  .review { padding:24px; }
}

/* 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:48px; align-items:start; }
.faq-head { display:flex; flex-direction:column; gap:14px; }
.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:22px 0; border-bottom:1px solid var(--x-color-border); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; list-style:none;
  font-size:1.125rem; font-weight:600; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:none; font-size:1.5rem; 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:12px; line-height:1.6; color:var(--x-color-text-muted); }
@media (max-width:900px) {
  .block-faq { grid-template-columns:minmax(0,1fr); gap:24px; }
  .faq summary { font-size:1rem; }
}

/* 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:48px; align-items:start; }
.shared-head { display:flex; flex-direction:column; gap:14px; }
.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:18px; background:var(--x-color-surface); }
.shared-section summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:22px 26px;
  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:18px; }
.shared-name { font-size:1.25rem; font-weight:700; letter-spacing:-.01em; }
.shared-summary { display:block; margin-top:4px; font-size:.875rem; 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:1.25rem; 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 26px 26px; 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:14px; padding:0 26px 26px; }
.shared-card { display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:14px; background:var(--x-color-bg);
  font-size:.9375rem; line-height:1.45; color:var(--x-color-text-muted); }
.shared-card strong { font-size:1rem; 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:24px; } }
@media (max-width:720px) {
  .shared-section summary { padding:18px; gap:12px; }
  .shared-name { font-size:1.0625rem; }
  .shared-mark { width:32px; height:32px; }
  .shared-body { padding:0 18px 18px; }
  .shared-cards { grid-template-columns:minmax(0,1fr); gap:8px; padding:0 12px 12px; }
  .shared-card { padding:14px 16px; }
}

/* Feature: the image on the left, 1 : 1.25; the list in 2 columns under 1 px lines. */
.block-feature { display:grid; gap:56px; 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:24px; background:var(--tile); }
.block .feature-image img { height:100%; object-fit:cover; border-radius:0; }
.feature-copy { display:flex; flex-direction:column; gap:24px; min-width:0; }
.block-feature .feature-copy h2 { margin:0; }
.feature-text { font-size:1.0625rem; 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:32px; border-top:1px solid var(--x-color-border); }
.feature-list li { display:flex; flex-direction:column; gap:2px; min-width:0; padding:14px 0; border-bottom:1px solid var(--x-color-border); }
.feature-list b { font-size:.9375rem; font-weight:600; overflow-wrap:anywhere; }
.feature-list span { font-family:var(--font-mono); font-size:.75rem; 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:24px; }
  .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:44px 0; padding:56px 64px; border-radius:28px; 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 { opacity:.9; font-size:1.0625rem; }
.request-contacts { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px !important; }
.request-contacts li { opacity:1; }
.request-contacts a { display:inline-flex; align-items:center; min-height:50px; padding:0 22px; border-radius:12px; background:#fff; color:#141414;
  font-weight:600; text-decoration:none; }
.request-contacts a:hover { background:var(--paper); }
.request-contacts a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (max-width:900px) {
  .block-request { margin:18px 0; padding:26px 20px; border-radius:22px; 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:.75rem; font-weight:400; letter-spacing:.06em;
  text-transform:uppercase; color:var(--x-color-text-muted); }
.block-clients { display:flex; align-items:center; gap:16px 40px; flex-wrap:wrap; }
.clients { display:flex; flex-wrap:wrap; align-items:center; gap:16px 44px; }
.clients li { font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; color:#6e6b64; }
.clients a { text-decoration:none; }
.clients a:hover { color:var(--x-color-text); }
@media (prefers-color-scheme:dark) { .clients li { color:var(--x-color-text-muted); } }
/* 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:12px; margin:0; padding:0; list-style:none; }
.clients-wall .clients li { display:flex; width:calc((100% - 5 * 12px) / 6); height:96px; }
.clients-cell { flex:1; display:flex; align-items:center; justify-content:center; min-width:0; padding:0 12px;
  border:1px solid var(--x-color-border); border-radius:14px; text-decoration:none; }
.clients-name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:.9375rem;
  font-weight:700; 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; }
}
@media (max-width:1024px) { .clients-wall .clients li { width:calc((100% - 3 * 12px) / 4); } }
@media (max-width:720px) {
  .clients-wall .clients { gap:8px; }
  .clients-wall .clients li { width:calc(50% - 4px); height:64px; }
  .clients-name { font-size:.875rem; }
}
/* 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:32px; }
.block-reviews + .block-clients { position:relative; padding-top:13px; }
.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; }

/* 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:#fff; }
.top-bar .promo-inner { box-sizing:border-box; min-height:40px; max-width:1336px; margin:auto; padding:6px 16px; display:flex;
  align-items:center; justify-content:center; gap:14px; color:inherit; text-decoration:none; }
.promo-until { flex:none; padding:5px 8px; border:1px solid rgb(255 255 255 / .35); border-radius:6px; color:#fff;
  font-family:var(--font-mono); font-size:11px; 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 14px; font-size:14px; font-weight:700; line-height:1.35;
  background:linear-gradient(90deg, var(--mark-1), color-mix(in srgb, var(--mark-2), #fff 25%) 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(255 255 255 / .6); text-underline-offset:3px; white-space:nowrap; }
.top-bar a.promo-inner:focus-visible { outline:2px solid #fff; 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 16px; 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 28px; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:16px; 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:14px; 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 #fff; outline-offset:2px; }
.promo-side { grid-column:3; justify-self:end; display:flex; align-items:center; gap:14px; }
.promo-dots { display:flex; gap:6px; }
.promo-dot { position:relative; width:6px; height:6px; border-radius:50%; background:rgb(255 255 255 / .3); }
.promo-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:#fff; opacity:0; visibility:hidden;
  animation:6s linear infinite both; }
.top-bar .promo-all { font-size:13px; font-weight:600; color:rgb(255 255 255 / .75); text-decoration:none; white-space:nowrap; }
.top-bar .promo-all:hover { color:#fff; }
.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 16px; }
  .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:6px;
  background:var(--x-color-surface); color:var(--x-color-text); font-family:var(--font-mono); font-size:11px; font-weight:500;
  line-height:1; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.promos-page h1 { margin:8px 0 32px; }
.promo-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.promo-card { display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:20px; 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:24px; flex:1; }
.promo-card-body h2, .promo-card-body h3 { margin:0; font-size:20px; font-weight:700; line-height:1.25; }
.promo-card-summary { margin:0; font-size:15px; 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:#fff; }
.promo-card-poster .promo-chip { background:transparent; border-color:rgb(255 255 255 / .35); color:#fff; }
.promo-card-poster .promo-card-body h2, .promo-card-poster .promo-card-body h3, .block .offer-poster .offer h3 {
  margin-top:auto; font-size:36px; font-weight:800; 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), color-mix(in srgb, var(--mark-2), #fff 25%) 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(255 255 255 / .75); }
.promo-card-poster .promo-card-more, .offer-poster .offer-more { margin-top:0 !important; color:#fff; font-weight:600; }
.offer-poster .offer-eyebrow { color:#fff; }
.offer-poster .offer-note { margin-top:0 !important; font-family:inherit; font-size:15px; }
@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 12px; font-size:18px; color:var(--x-color-text-muted); }
.promos-empty a { font-weight:600; color:var(--accent); }
.promo-head h1 { font-size:44px; font-weight:800; line-height:1.1; }
.promo-head .promo-chip { margin:4px 0 12px; }
/* 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:16px; margin:4px 0 12px; }
.promo-head .promo-chip-row .promo-chip { margin:0; }
.promo-all-link { margin-left:auto; font-size:15px; 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:32px; font-weight:800; }
.promo-ended { margin:0 0 16px; padding:12px 16px; border-radius:12px; background:var(--paper); border:1px solid var(--x-color-border); font-size:15px; }
.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:32px; }
}

/* 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:#bdbab2; font-size:15px; line-height:1.5; margin-top:44px; }
@media (prefers-color-scheme: dark) { .site-footer { border-top:1px solid var(--x-color-border); } }
.site-footer-inner { max-width:1336px; margin:auto; padding:64px 28px 40px; display:flex; flex-direction:column; gap:56px; }
.site-footer-main { display:flex; gap:40px; }
.site-footer-brand { flex:1.4 1 0; min-width:0; display:flex; flex-direction:column; gap:16px; }
.site-footer-nav { flex:3 1 0; min-width:0; display:flex; gap:40px; }
.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:24px; line-height:1.2; font-weight:800; letter-spacing:-0.03em; color:#ffffff; }
.site-footer-about { margin:0; max-width:280px; }
.site-footer-column h2 { margin:0 0 12px; font:500 12px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:#8a877f; }
.site-footer-column ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.site-footer-column address { font-style:normal; }
.site-footer a { color:#e9e7e1; text-decoration:none; }
.site-footer a:hover, .site-footer a:focus-visible { color:#ffffff; text-decoration:underline; }
.site-footer-phone a { color:#ffffff; font-size:20px; font-weight:700; }
.site-footer .contact-text p { margin:0; }
.site-footer-bottom { border-top:1px solid #2e2d2b; padding-top:24px; display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; font-size:13px; color:#8a877f; }
.site-footer-bottom p { margin:0; }
.site-footer-bottom ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 24px; }
.site-footer-bottom a { color:#8a877f; }
@media(max-width:1024px) and (min-width:721px) {
  .site-footer-inner { padding:56px 28px 36px; }
  .site-footer-main { flex-wrap:wrap; }
  .site-footer-brand { flex-basis:100%; }
}
@media(max-width:720px) {
  .site-footer { margin-top:18px; }
  .site-footer-inner { padding:32px 20px; gap:22px; }
  .site-footer-main { flex-direction:column; gap:22px; }
  .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 #2e2d2b; padding-top:18px; }
  .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:12px; }
}

/* 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 28px; }
.menu-row { list-style:none; margin:0; padding:0; height:56px; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center;
  column-gap:36px; font-size:15px; 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 14px; border:0; border-radius:10px;
  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:8px; }

/* The panel box. The popover resets of the browser are replaced here. */
.menu-panel { margin:0; border:1px solid var(--x-color-border); padding:32px; color:var(--x-color-text); background:var(--x-color-surface);
  border-radius:20px; box-shadow:0 30px 60px rgb(20 20 20 / .25); font-size:15px; 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 24px 24px; }
}
@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:28px; right:28px; 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:24px; }
@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(28px, (100vw - 1336px) / 2 + 28px); 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:12px; box-sizing:border-box;
  position:relative; width:calc(100% - 16px); height:42px; margin:0; padding:0 12px; border:0; border-radius:10px; background:none;
  color:inherit; font:inherit; font-size:15px; 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:40px;
  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:32px 40px; }
.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:16px; 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:16px; min-width:0; }
.menu-gcat-name { font-size:18px; font-weight:700; 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:14px; 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:20px; padding:0 12px; 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:16px; align-items:stretch; }
.menu-tiles { flex:1; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:auto; gap:16px; 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:12px; box-sizing:border-box; min-height:88px; padding:20px;
  border-radius:20px; 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(20 20 20 / .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:16px; font-weight:700; line-height:1.3; }
.menu-tile-second, .menu-price { color:var(--x-color-text-muted); font-size:15px; line-height:1.35; }
.menu-tile-cover { flex:none; width:128px; height:128px; border-radius:12px; object-fit:cover; }
.menu-tile-arrow { position:absolute; right:20px; bottom:16px; font-size:18px; 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:28px; }
.menu-promo { position:relative; flex:none; width:300px; border-radius:20px; overflow:hidden; background:var(--ink); color:#fff;
  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(20 20 20 / .75)); }
.menu-promo-text { position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; padding:24px; }
.menu-promo-title { font-size:22px; font-weight:700; 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:16px 0 0; text-align:right; font-size:15px; 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:18px; font-weight:700; }
/* The category rows stand 16 px in from the group title; their lines start at the same indent. */
.menu-mobile-cats li { margin-left:16px; }
.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:16px; font-weight:500; }
.menu-mobile-cat[aria-current] { margin-left:-15px; padding-left:12px; 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:12px; 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:12px 20px 32px;
  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:20px; font-weight:800; }
.menu-mobile-close { width:44px; height:44px; border:1.5px solid var(--x-color-border); border-radius:12px; 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:14px 0; font-size:17px; 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 14px; 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:12px; }
.menu-mobile-all { font-weight:600; color:var(--accent); }
.menu-mobile-links { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; 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:-15px; padding-left:12px; border-left:3px solid var(--accent);
  font-weight:600; color:var(--accent); }
.menu-mobile-phone { display:inline-block; margin-top:22px; font-size:20px; font-weight:700; }
@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 16px; border-radius:12px;
    background:var(--accent); color:var(--on-accent); font-size:15px; 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 20px; display:flex; gap:8px; overflow-x:auto; scroll-padding-inline:20px; scrollbar-width:none;
    font-size:14px; 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 12px; border-radius:999px; 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:16px; 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 16px 0 46px; border:1.5px solid var(--x-color-border); border-radius:12px;
  background:var(--paper); color:var(--x-color-text); font:inherit; font-size:15px; }
.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; }
@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; }
}

/* 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:32px; }
.portfolio-page h1 { margin:0 0 20px; }
.work-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.work-tags a, .case-tags a { display:inline-flex; align-items:center; height:34px; padding:0 12px; border:1.5px solid var(--x-color-border);
  border-radius:999px; background:var(--x-color-surface); color:var(--x-color-text); font-size:.875rem; 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:#fff; }
.work-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.work-card a { display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:20px; 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:16px 18px 18px; }
.work-card :is(h2, h3) { margin:0; font-size:1.125rem; font-weight:700; line-height:1.3; }
.work-card-meta { font-size:.875rem; 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:22px; }
.case-head h1 { max-width:980px; margin:0; font-size:clamp(2rem,4.2vw,3.25rem); line-height:1.04; font-weight:800; letter-spacing:-.035em; text-wrap:balance; }
.case-facts { display:flex; flex-wrap:wrap; margin:0; padding:18px 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 24px; 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:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--x-color-text-muted); }
.case-facts dd { margin:0; font-size:1.0625rem; font-weight:600; }
.case-facts a { color:inherit; }
.case-gallery { display:grid; gap:14px; margin-top:28px; }
.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:20px; 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 14px; border-radius:10px;
  background:#fff; color:#141414; font-size:.875rem; font-weight:600; text-decoration:none; }
.case-columns { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:64px; align-items:start; margin-top:48px; }
.case-step { display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px; padding:22px 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:.75rem; font-weight:400; letter-spacing:.05em;
  line-height:1.4; text-transform:uppercase; color:var(--x-color-text-muted); }
.case-text { font-size:1.0625rem; 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:18px 20px 0 0; }
.case-numbers strong { font-size:2.5rem; font-weight:800; line-height:1; letter-spacing:-.03em; }
.case-numbers span { font-size:.875rem; color:var(--x-color-text-muted); }
.case-quote { display:flex; flex-direction:column; gap:14px; margin:40px 0 0; padding:28px 30px; border-radius:20px; background:var(--x-color-surface); }
.case-quote blockquote { margin:0; }
.case-quote blockquote p { margin:0; font-size:1.25rem; line-height:1.5; font-weight:500; }
.case-quote figcaption { font-size:.875rem; color:var(--x-color-text-muted); }
.case-photos { margin-top:56px; }
.case .case-photos h2 { margin:0 0 16px; font-size:1.5rem; }
.case-photos ul { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0; padding:0; }
.case-photos img { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:14px; }
.case-side { position:sticky; top:24px; display:flex; flex-direction:column; gap:14px; }
.case-cta { display:flex; flex-direction:column; gap:14px; padding:26px; border-radius:20px; background:var(--ink); color:#fff; }
.case-cta p { margin:0; font-size:.9375rem; line-height:1.5; color:#bdbab2; }
.case-cta .case-cta-title { font-size:1.5rem; font-weight:700; line-height:1.15; letter-spacing:-.02em; color:#fff; }
.case-cta a { display:flex; align-items:center; justify-content:center; height:52px; padding:0 22px; border-radius:12px; font-weight:600; text-decoration:none; }
.case-cta-main { background:var(--accent); color:var(--on-accent); }
.case-cta-call { border:1.5px solid #3a3936; color:#fff; }
.case-cta-call:hover { border-color:#fff; }
.case-tags { display:flex; flex-direction:column; gap:12px; padding:22px 24px; border-radius:20px; background:var(--x-color-surface); }
.case-tags p { margin:0; }
.case-tags .case-tags-title { font-family:var(--font-mono); font-size:.75rem; 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:.8125rem; color:var(--x-color-text-muted); }
.block-similar .similar-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.block-similar .similar-head h2 { margin:0; }
.similar-head a { color:var(--accent); font-weight:600; text-decoration:none; white-space:nowrap; }
@media (prefers-color-scheme: dark) { .case-cta { box-shadow:inset 0 0 0 1px var(--x-color-border); } }
@media (max-width:1024px) {
  .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .case-columns { grid-template-columns:minmax(0,1fr); gap:32px; }
  .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:14px 0; }
  .case-facts > div { padding:0 12px; }
  .case-facts > div:nth-child(odd) { padding-left:0; border-left:0; }
  .case-facts dd { font-size:.9375rem; }
  .case-gallery { gap:8px; margin-top:20px; }
  .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:16px; }
  .case-more { right:8px; bottom:8px; height:32px; padding:0 10px; font-size:.8125rem; }
  .case-columns { margin-top:32px; }
  .case-main > .case-step:first-child { padding-top:0; border-top:0; }
  .case-step { grid-template-columns:minmax(0,1fr); gap:8px; padding:18px 0; }
  .case-text { font-size:1rem; }
  .case-numbers strong { font-size:1.75rem; }
  .case-numbers li { padding:14px 10px 0 0; }
  .case-quote { margin-top:28px; padding:20px; }
  .case-quote blockquote p { font-size:1.0625rem; }
  .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:12px; padding:14px 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:32px; }
: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:12px; 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:14px; height:100%;
  min-height:72px; padding:14px 18px; border-radius:18px; 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:12px;
  background:var(--accent-soft); color:var(--accent); }
.quick-action-label { flex:1; min-width:0; font-size:1rem; font-weight:700; 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:#fff; }
.quick-action-ink .quick-action-icon { background:rgba(255,255,255,.12); color:#fff; }
.quick-action-ink .quick-action-go { color:#fff; }
@media (prefers-color-scheme: dark) { .quick-action-ink { box-shadow:inset 0 0 0 1px var(--x-color-border); } }
@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:24px; }
  .quick-actions { grid-template-columns:1fr; gap:8px; }
  .quick-action { min-height:60px; padding:12px 14px; gap:12px; }
  .quick-action-label { font-size:.9375rem; }
}