/* ============================================================
   Городская Ритуальная Служба — site.css
   Общая стилевая основа для всех страниц проекта.
   Токены встроены ниже (синхронизировать с /colors_and_type.css вручную).
   ============================================================ */

:root {
  /* ---------- Color: Ink (text) ---------- */
  --ink:        #1F2421;
  --ink-2:      #42473F;
  --ink-3:      #6C7268;
  --ink-4:      #8E9388;
  --ink-inv:    #F5F1EA;

  /* ---------- Color: Surface ---------- */
  --parchment:    #F5F1EA;
  --parchment-2:  #EBE5DB;
  --parchment-3:  #DED5C5;
  --surface:      #FFFFFF;

  /* ---------- Color: Brand ---------- */
  --evergreen:    #2C4A3E;
  --evergreen-2:  #3D6353;
  --evergreen-3:  #21372E;
  --brass:        #9A7B3D;
  --brass-soft:   #C9A86A;
  --maroon:       #7A2E2A;
  --maroon-2:     #93423D;

  /* ---------- Color: Lines ---------- */
  --line:    #D9D2C5;
  --line-2:  #BFB6A2;
  --line-3:  #A29A86;

  /* ---------- Color: Semantic ---------- */
  --fg:        var(--ink);
  --fg-muted:  var(--ink-2);
  --fg-faint:  var(--ink-3);
  --bg:        var(--parchment);
  --bg-alt:    var(--parchment-2);
  --bg-card:   var(--surface);
  --border:    var(--line);
  --accent:    var(--evergreen);
  --accent-emphasis: var(--evergreen-3);
  --price:     var(--brass);
  --urgent:    var(--maroon);

  /* ---------- Typography: Families ---------- */
  --font-serif: 'PT Serif', 'Times New Roman', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Typography: Scale ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;

  /* ---------- Typography: Line height ---------- */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ---------- Typography: Letter spacing ---------- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(31,36,33,.04), 0 1px 1px rgba(31,36,33,.06);
  --shadow-2: 0 4px 12px rgba(31,36,33,.08), 0 1px 3px rgba(31,36,33,.06);
  --shadow-3: 0 16px 40px rgba(31,36,33,.12), 0 2px 6px rgba(31,36,33,.06);
  --shadow-inset-line: inset 0 -1px 0 var(--line);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.6,.2,1);
  --ease-in-out: cubic-bezier(.4,.0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter-mobile: 20px;
  --gutter-desktop: 48px;
  --header-height: 72px;
}

/* ============================================================
   Base elements — semantic typography
   ============================================================ */

html { font-size: 16px; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }

h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  margin: 0;
}
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
  margin: 0 0 var(--sp-4);
}

small, .caption {
  font-size: var(--fs-sm);
  color: var(--fg-faint);
  line-height: var(--lh-normal);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.display {
  font-family: var(--font-serif);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.lede {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

.price {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--price);
  letter-spacing: var(--tracking-normal);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-base) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--parchment);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========== Layout primitives =========== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-desktop);
}
.container--narrow {
  max-width: var(--container-narrow);
}
.section { padding: 80px 0; }
.section--tight { padding: 56px 0; }
.section--alt  { background: var(--parchment-2); }
.section--dark { background: var(--evergreen); color: var(--ink-inv); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--ink-inv); }
.section__head { margin-bottom: 40px; max-width: 760px; }
.section__head .eyebrow { margin-bottom: 12px; }
.section__head p { color: var(--ink-2); margin: 12px 0 0; max-width: 680px; }

/* =========== Top emergency strip =========== */
.top-strip {
  background: var(--evergreen);
  color: var(--ink-inv);
  font-size: 13px;
}
.top-strip__row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 9px 0;
  flex-wrap: wrap;
}
.top-strip__row > span,
.top-strip__row > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #BFB6A2;
  text-decoration: none;
}
.top-strip__row > a:hover { color: var(--ink-inv); }
.top-strip__row > span:nth-of-type(2) { margin-left: auto; }
.top-strip__row svg { color: var(--brass-soft); }

/* =========== Header =========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--parchment);
  border-bottom: 1px solid var(--line);
}
.main-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 48px;
  max-width: var(--container);
  margin: 0 auto;
}
.logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.logo-link__mark { width: 44px; height: 44px; color: var(--evergreen); }
.logo-link__name {
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.logo-link__name strong { font-weight: 400; }
.logo-link__name small { font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }

.main-nav {
  display: flex;
  gap: 20px;
  margin-left: 8px;
  flex-wrap: wrap;
}
.nav-link {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.is-active { border-color: var(--evergreen); }

.cta-cluster { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.phone-cta__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--maroon);
  animation: pulse 2s var(--ease-out) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.phone-cta__inner { display: flex; flex-direction: column; }
.phone-cta__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-3); font-weight: 600;
}
.phone-cta__number { font-family: var(--font-serif); font-size: 18px; color: var(--ink); }

/* Burger menu (mobile, no JS) */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); }
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-left: 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--dur-base) var(--ease-out);
}
.nav-burger:hover { background: rgba(0,0,0,0.04); }
.nav-burger__bars,
.nav-burger__bars::before,
.nav-burger__bars::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              top var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.nav-burger__bars { position: relative; }
.nav-burger__bars::before,
.nav-burger__bars::after { content: ""; position: absolute; left: 0; }
.nav-burger__bars::before { top: -6px; }
.nav-burger__bars::after  { top: 6px; }
.nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--evergreen); outline-offset: 2px; }
.nav-toggle:checked ~ .nav-burger .nav-burger__bars { background: transparent; }
.nav-toggle:checked ~ .nav-burger .nav-burger__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle:checked ~ .nav-burger .nav-burger__bars::after  { top: 0; transform: rotate(-45deg); }

/* =========== Buttons =========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn--primary { background: var(--evergreen); color: var(--ink-inv); }
.btn--primary:hover { background: var(--evergreen-2); }
.btn--secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--ink-inv); }
.btn--ghost { background: transparent; color: var(--ink); padding: 9px 16px; }
.btn--ghost:hover { background: var(--parchment-2); }
.btn--urgent { background: var(--maroon); color: var(--ink-inv); }
.btn--urgent:hover { background: var(--maroon-2); }
.btn--lg { padding: 15px 26px; font-size: 16px; }
.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--on-dark { background: transparent; border-color: var(--ink-inv); color: var(--ink-inv); }
.btn--on-dark:hover { background: var(--ink-inv); color: var(--evergreen); }

/* =========== Breadcrumbs =========== */
.breadcrumbs {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
  padding: 18px 0 0;
}
.breadcrumbs a {
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs__sep { color: var(--ink-4); }
.breadcrumbs__current { color: var(--ink); }

/* =========== Hero =========== */
.hero { padding: 56px 0 48px; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero__eyebrow { color: var(--brass); margin-bottom: 14px; }
.hero h1 {
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}
.hero h1.hero__title--md { font-size: 45px; }
.hero h1.hero__title--sm { font-size: 45px; }
.hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 580px;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.hero__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 14px;
  color: var(--ink-2);
}
.hero__points li { display: inline-flex; align-items: center; gap: 8px; }
.hero__points strong { color: var(--ink); font-weight: 600; }
.hero__points svg { color: var(--evergreen); width: 18px; height: 18px; }
.hero__art {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--evergreen);
  color: var(--ink-inv);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 70% 10%, rgba(245,241,234,0.06), transparent 60%),
    linear-gradient(180deg, rgba(33,55,46,0.0) 0%, rgba(33,55,46,0.5) 100%);
}
.hero__art-mark {
  position: absolute;
  top: 28px; left: 28px;
  color: var(--brass-soft);
  width: 56px; height: 56px;
}
.hero__art-stat {
  position: relative;
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 1;
  color: var(--brass-soft);
  margin-bottom: 6px;
}
.hero__art-stat-sub {
  position: relative;
  font-size: 14px;
  color: #DED5C5;
  max-width: 280px;
  line-height: 1.5;
}
/* Rating variant: content flows from top, no fixed aspect, visible on green */
.hero__art--rating {
  aspect-ratio: auto;
  justify-content: flex-start;
  padding: 32px 28px;
  gap: 14px;
}
.hero__art--rating .hero__art-mark {
  position: static;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
}
.hero__art--rating .hero__art-stat {
  font-size: 56px;
}
.hero__art--rating .hero__art-stat-sub {
  max-width: 320px;
  margin-bottom: 8px;
}
.hero__art-list {
  position: relative;
  list-style: none;
  padding: 16px 0 0;
  margin: 0;
  border-top: 1px solid rgba(245,241,234,0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #DED5C5;
}
.hero__art-list strong {
  color: var(--brass-soft);
  font-weight: 600;
}

/* =========== Cards & generic blocks =========== */
.cards-grid {
  display: grid;
  gap: 16px;
}
.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
a.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card__icon { color: var(--evergreen); }
.card__title {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}
.card__title--sm { font-size: 18px; }
.card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.card__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.card__foot--link { color: var(--ink); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.card--featured { background: var(--evergreen); color: var(--ink-inv); border-color: var(--evergreen); }
.card--featured .card__title { color: var(--ink-inv); }
.card--featured .card__desc { color: #DED5C5; }
.card--featured .card__icon { color: var(--brass-soft); }
.card--featured .card__foot { border-color: rgba(245,241,234,0.18); }
.card--featured .price { color: var(--brass-soft); }
.card--featured .card__foot--link { color: var(--ink-inv); text-decoration-color: rgba(245,241,234,0.3); }
.card--quiet { background: var(--parchment-2); border-color: var(--line); }
.card--frame { padding: 18px; }
.card--frame .card__title--sm { font-size: 16px; }

/* =========== Eyebrow / labels =========== */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--brass { color: var(--brass); }
.eyebrow--inv   { color: var(--brass-soft); }

/* =========== Pages content prose =========== */
.prose h2 {
  font-size: 36px;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.prose h3 {
  font-size: 24px;
  margin: 28px 0 12px;
  letter-spacing: -0.005em;
}
.prose p { margin: 0 0 14px; max-width: 760px; }
.prose .lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 780px;
}
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; max-width: 760px; }
.prose ul li, .prose ol li { padding: 4px 0; }
.prose ul.bullet-clean { list-style: none; padding-left: 0; }
.prose ul.bullet-clean li {
  position: relative;
  padding: 6px 0 6px 24px;
  border-bottom: 1px solid var(--line);
}
.prose ul.bullet-clean li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 8px; height: 8px;
  background: var(--evergreen);
  border-radius: 1px;
}
.prose ul.bullet-clean li:last-child { border-bottom: none; }
.prose strong { font-weight: 600; }

/* =========== Product grid (catalog) =========== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.product {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--parchment-2), var(--parchment-3));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.product__media svg {
  color: var(--ink-3);
  width: 64px; height: 64px;
  opacity: 0.4;
}
.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--ease-out);
}
.product:hover .product__media img { transform: scale(1.04); }
.product__body { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product__title { font-family: var(--font-serif); font-size: 19px; margin: 0; }
.product__meta { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.product__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.product__cat {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.product__price {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* =========== Tables =========== */
.t {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  font-size: 15px;
}
.t th, .t td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.t th {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  background: var(--parchment-2);
}
.t tbody tr:last-child td { border-bottom: none; }
.t .price { color: var(--brass); }
.t__caption {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 10px;
}

/* Requisites table — keep th in normal case (sentence-like labels) */
.t.requisites th {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-2);
  background: transparent;
  white-space: nowrap;
}
.t.requisites td {
  font-size: 15px;
}
.t .num,
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ink);
}

/* =========== Mobile overflow fix: tables + prose =========== */
@media (max-width: 640px) {
  /* Таблицы: horizontal scroll. table сам по себе остаётся table-layout:auto,
     обёртывается в scrollable block. Ячейки сохраняют natural ширину. */
  .t {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 14px;
    /* визуальный hint что можно скроллить вправо */
    background: linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 20px 100% no-repeat,
                linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center / 20px 100% no-repeat,
                radial-gradient(ellipse at left,  rgba(0,0,0,.12), transparent 70%) left center / 10px 100% no-repeat,
                radial-gradient(ellipse at right, rgba(0,0,0,.12), transparent 70%) right center / 10px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .t th, .t td {
    padding: 10px 12px;
    white-space: normal;
    min-width: 120px;
  }
  .t th { font-size: 12px; }

  /* .prose ограничиваем по ширине viewport, длинные строки переносим */
  .prose,
  .prose * {
    max-width: 100%;
  }
  .prose img { height: auto; }
  .prose pre, .prose code {
    overflow-x: auto;
    word-break: break-word;
    white-space: pre-wrap;
  }
  .prose a {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Card-grid внутри prose / sections — 1 колонка на мобиле */
  .cards-grid--2,
  .cards-grid--3,
  .cards-grid--4 { grid-template-columns: 1fr; }

  /* Карточка эксперта (на /company/) — на мобиле в столбик */
  .card--featured[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
    padding: var(--sp-5) !important;
  }
  .card--featured img,
  .card--featured > div:first-child {
    margin: 0 auto;
  }
}

/* Map platforms cards — hover */
.map-platforms__card { transition: border-color .18s var(--ease-out), background .18s var(--ease-out); }
.map-platforms__card:hover { border-color: var(--evergreen) !important; background: var(--parchment-2) !important; }

/* =========== Emergency strip (inline block) =========== */
.emergency-strip {
  background: var(--maroon);
  color: var(--ink-inv);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 4px;
  margin: 28px 0;
}
.emergency-strip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-inv);
  animation: pulse 2s var(--ease-out) infinite;
  flex-shrink: 0;
}
.emergency-strip__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #EBE5DB;
}
.emergency-strip__phone {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink-inv);
  text-decoration: none;
}
.emergency-strip__sub { font-size: 13px; color: #EBE5DB; margin-left: auto; }

/* =========== Steps =========== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step__num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.step__title {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.25;
}
.step__body { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* =========== Trust-strip (полоса со статистикой на главной) =========== */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 32px 0;
}
.trust-strip__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px;
}
.trust-strip__num {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.1;
  color: var(--evergreen);
  letter-spacing: -0.01em;
}
.trust-strip__lbl {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* =========== Atomic — мелкий замечание/пояснение под секцией =========== */
.atomic {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--parchment-2);
  border-left: 3px solid var(--brass);
  border-radius: 0 4px 4px 0;
}

/* =========== Table modifier — компактная =========== */
.t--compact {
  font-size: 14px;
}
.t--compact th,
.t--compact td {
  padding: 8px 12px;
}

/* =========== Article meta (single blog post) =========== */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-3);
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line);
}
.article-meta__author {
  color: var(--ink-2);
}
.article-meta__author a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
}
.article-meta__sep {
  color: var(--line-2);
}

/* =========== Map platforms (contacts page) =========== */
.map-platforms__card:hover {
  border-color: var(--evergreen) !important;
}
.map-platforms__card strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 18px;
  margin-bottom: 6px;
}
.map-platforms__card small {
  display: block;
  color: var(--ink-3);
  font-size: 13px;
}

/* =========== Steps-7 (вариант для главной — компактные карточки) =========== */
.steps-7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
@media (min-width: 1100px) {
  .steps-7 { grid-template-columns: repeat(4, 1fr); }
}
.step-mini {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-mini__n {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.step-mini__t {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
}
.step-mini__d {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* =========== FAQ accordion =========== */
.faq {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  overflow: hidden;
  max-width: 880px;
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: none; }
.faq__row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.faq__row:hover { background: var(--parchment); }
.faq__q { font-size: 16px; color: var(--ink); }
.faq__a {
  padding: 0 22px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  display: none;
  max-width: 720px;
}
.faq__item--open .faq__a { display: block; }
.faq__item--open .faq__row svg { transform: rotate(180deg); color: var(--evergreen); }
.faq__row svg { transition: transform var(--dur-base) var(--ease-out); color: var(--ink-3); }

/* =========== Service / page layout helpers =========== */
.page-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}
.page-layout__sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 16px; }
.page-layout--full { grid-template-columns: 1fr; }

.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px;
}
.sidebar-card h4 { font-family: var(--font-serif); font-size: 20px; margin: 0 0 12px; }
.sidebar-card p { font-size: 13px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.55; }
.sidebar-card a {
  display: block;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.sidebar-card a:last-of-type { border-bottom: none; }
.sidebar-card a:hover { color: var(--evergreen); }
.sidebar-card--quiet { background: var(--parchment-2); }
.sidebar-card--dark {
  background: var(--evergreen);
  color: var(--ink-inv);
  border-color: var(--evergreen);
}
.sidebar-card--dark h4 { color: var(--ink-inv); }
.sidebar-card--dark p { color: #DED5C5; }
.sidebar-card--dark a { color: #DED5C5; border-color: rgba(245,241,234,0.15); }
.sidebar-card--dark a:hover { color: var(--ink-inv); }
.sidebar-card__phone {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--ink-inv);
  text-decoration: none;
  display: block;
  margin: 4px 0 14px;
}

/* =========== Section anchors =========== */
.s-anchor {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 10px;
}

/* =========== Footer =========== */
.site-footer {
  background: var(--evergreen-3);
  color: var(--ink-inv);
  padding: 64px 0 28px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.site-footer h3,
.site-footer__h {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin: 0 0 16px;
}
.site-footer a {
  display: block;
  font-size: 14px;
  color: #EBE5DB;
  text-decoration: none;
  padding: 5px 0;
}
.site-footer a:hover { color: var(--ink-inv); }
.site-footer p { color: #DED5C5; font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.site-footer__brand p { margin-top: 14px; max-width: 320px; }
.site-footer__phone {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink-inv);
  text-decoration: none;
  display: inline-block;
  margin-top: 6px;
}
.site-footer__legal {
  display: flex;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(245,241,234,0.1);
  font-size: 13px;
  color: #BFB6A2;
  flex-wrap: wrap;
}
.site-footer__legal a { color: #BFB6A2; padding: 0; display: inline; text-decoration: underline; text-underline-offset: 3px; }

/* =========== Sitemap (navigator) =========== */
.sitemap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sitemap__group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px;
}
.sitemap__group h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  margin: 0 0 6px;
}
.sitemap__group p { font-size: 13px; color: var(--ink-3); margin: 0 0 14px; }
.sitemap__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.sitemap__list a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.sitemap__list a:hover { color: var(--evergreen); }
.sitemap__list a:last-child { border-bottom: none; }
.sitemap__list-url { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.sitemap__list .pill {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--parchment-2);
  color: var(--ink-3);
}
.sitemap__list .pill--w1 { background: var(--evergreen); color: var(--ink-inv); }
.sitemap__list .pill--w2 { background: var(--brass); color: var(--ink-inv); }
.sitemap__list .pill--w3 { background: var(--line-3); color: var(--ink); }
.sitemap__list .pill--w4 { background: var(--parchment-3); color: var(--ink-2); }
.sitemap__list .pill--new { background: var(--maroon); color: var(--ink-inv); }

.sitemap-hero {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%);
  padding: 56px 0 24px;
}
.sitemap-hero h1 { font-size: 52px; line-height: 1.05; margin: 0 0 14px; letter-spacing: -0.015em; }
.sitemap-hero p { font-size: 18px; color: var(--ink-2); max-width: 760px; margin: 0 0 28px; }
.sitemap-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 36px;
}
.sitemap-hero__stat {
  padding: 18px 24px 18px 0;
  border-right: 1px solid var(--line);
}
.sitemap-hero__stat:last-child { border-right: none; padding-right: 0; }
.sitemap-hero__stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--ink);
  line-height: 1;
}
.sitemap-hero__stat span {
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  display: block;
  margin-top: 6px;
}

/* =========== Mini icon utilities =========== */
.ic { width: 24px; height: 24px; color: currentColor; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 32px; height: 32px; }
.ic-xl { width: 44px; height: 44px; }
.ic-inline { vertical-align: -3px; margin-right: 6px; }

/* =========== Two-column simple split =========== */
.split-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
.split-2 .split-2__art {
  position: sticky; top: 120px;
  background: var(--evergreen);
  color: var(--ink-inv);
  padding: 28px;
  border-radius: 4px;
}
.split-2 .split-2__art h4 { color: var(--ink-inv); font-family: var(--font-serif); margin: 0 0 12px; font-size: 22px; }
.split-2 .split-2__art p { color: #DED5C5; font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.split-2 .split-2__art a { color: var(--brass-soft); text-decoration: underline; text-underline-offset: 3px; }

/* =========== Process / pricing inline blocks =========== */
.kv-list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.kv-list__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.kv-list__row strong { font-weight: 500; font-family: var(--font-serif); font-size: 17px; }
.kv-list__row p { font-size: 13px; color: var(--ink-3); margin: 4px 0 0; }
.kv-list__row .price { font-family: var(--font-sans); font-size: 16px; }

/* =========== Service / category tag chip =========== */
.tag {
  display: inline-flex; align-items: center;
  font-size: 12px; padding: 4px 10px;
  background: var(--parchment-2);
  color: var(--ink-2);
  border-radius: 2px;
  border: 1px solid var(--line);
}
.tag--brass { background: rgba(154,123,61,0.12); color: var(--brass); border-color: rgba(154,123,61,0.3); }
.tag--green { background: rgba(44,74,62,0.08); color: var(--evergreen); border-color: rgba(44,74,62,0.2); }
.tag--red { background: rgba(122,46,42,0.08); color: var(--maroon); border-color: rgba(122,46,42,0.18); }

/* =========== Responsive =========== */
@media (max-width: 1024px) {
  .container { padding: 0 var(--gutter-mobile); }
  .main-row { padding: 12px 20px; gap: 14px; }

  /* Drop address in top strip, keep time only */
  .top-strip__row > span:nth-of-type(2) { display: none; margin-left: 0; }

  /* Burger replaces horizontal nav */
  .nav-burger { display: inline-flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 6px 0;
    background: var(--parchment);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(0,0,0,0.08);
    z-index: 60;
  }
  .nav-toggle:checked ~ .main-nav { display: flex; }
  .main-nav .nav-link {
    padding: 14px var(--gutter-mobile);
    font-size: 16px;
    border-bottom: 1px solid var(--line);
    width: 100%;
  }
  .main-nav .nav-link:last-child { border-bottom: none; }
  .main-nav .nav-link.is-active { background: rgba(44,74,62,0.06); border-bottom-color: var(--line); }

  /* Section reflows */
  .hero { padding: 40px 0 32px; }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 36px; }
  .hero h1.hero__title--md { font-size: 36px; }
  .hero h1.hero__title--sm { font-size: 36px; }
  .hero__art { aspect-ratio: 3 / 2; }
  .hero__art--rating { aspect-ratio: auto; padding: 24px 22px; }
  .hero__art--rating .hero__art-stat { font-size: 44px; }
  .hero__art--rating .hero__art-mark { width: 36px; height: 36px; }
  .cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .page-layout { grid-template-columns: 1fr; gap: 32px; }
  .page-layout__sidebar { position: static; }
  .split-2 { grid-template-columns: 1fr; gap: 32px; }
  .split-2 .split-2__art { position: static; }
  .sitemap { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .sitemap-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .sitemap-hero__stat:nth-child(2) { border-right: none; }
  .sitemap-hero__stat { padding: 16px 16px 16px 0; }
}

@media (max-width: 640px) {
  .cards-grid--4, .cards-grid--3, .cards-grid--2 { grid-template-columns: 1fr; }
  .sitemap { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .sitemap-hero h1 { font-size: 36px; }
  .sitemap-hero p { font-size: 16px; }
  .sitemap-hero__stats { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 28px; }
  .prose h2 { font-size: 28px; }

  /* Top-strip: time only */
  .top-strip { font-size: 12px; }
  .top-strip__row { gap: 14px; padding: 6px 0; flex-wrap: nowrap; }
  .top-strip__row > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Main row: keep brand name + phone, smaller */
  .main-row { padding: 10px 16px; gap: 10px; }
  .logo-link { gap: 10px; min-width: 0; }
  .logo-link__mark { width: 36px; height: 36px; flex-shrink: 0; }
  .logo-link__name { font-size: 13px; min-width: 0; }
  .logo-link__name small { display: none; }
  .logo-link__name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

  .cta-cluster { margin-left: auto; gap: 0; }
  .phone-cta { gap: 8px; }
  .phone-cta__label { display: none; }
  .phone-cta__number { font-size: 15px; letter-spacing: -0.01em; }
}

@media (max-width: 420px) {
  .top-strip__row > span:first-of-type { font-size: 11px; }
  .main-row { padding: 8px 14px; gap: 8px; }
  .logo-link__name { display: none; }
  .phone-cta__number { font-size: 14px; }
  .phone-cta__dot { width: 7px; height: 7px; }
}