/*
 * brand.css — «Точка Ремонта» brand layer (Фаза 0, дизайн-фундамент).
 *
 * Loaded AFTER the constructor's styles-1-*.min.css on every page. Holds the
 * single source of truth for brand color + type. The constructor red is
 * tokenized inside min.css to var(--brand)/var(--brand-dark)/var(--brand-rgb),
 * so a palette change is a one-line edit in :root below.
 *
 * See docs/design/README.md for the brand spec.
 */

/* ── Manrope (self-hosted, variable, cyrillic + latin) ──────────────────── */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope/manrope-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;
}

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* Raw brand colors — the ONLY place HEX lives. Edit here to reskin. */
  --c-blue:      #2563EB;   /* основной */
  --c-blue-dark: #1D4ED8;   /* тёмный (hover/active) */
  --c-dark:      #1F2937;   /* текст */
  --c-bg:        #F8FAFC;   /* фон */
  --c-green:     #22C55E;   /* акцент/успех */
  --c-blue-rgb:  37, 99, 235;

  /* Roles — reference raw. Point these to re-map without touching HEX. */
  --brand:      var(--c-blue);
  --brand-dark: var(--c-blue-dark);
  --brand-rgb:  var(--c-blue-rgb);
  --text:       var(--c-dark);
  --bg:         var(--c-bg);
  --ok:         var(--c-green);
  --link:       var(--c-blue);
  --btn-bg:     var(--c-blue);

  --font-brand: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── Typography: Manrope everywhere (replaces Officina Serif) ────────────── */
body,
input, button, textarea, select {
  font-family: var(--font-brand) !important;
}

/* ── Header logo → «Точка Ремонта» text wordmark ────────────────────────────
   Original .logotype is a background PNG of the old brand on a red badge with
   a curved drip (:after). We drop the image + the drip and render a plain blue
   rectangle with the brand name + slogan as text. Scoped to #header (higher
   specificity than the bare .logotype rules across breakpoints). */
/* Anchor the absolute logo to the centered grid container, not the full-width
   fixed header — so its left edge sits on the same line as H1 / cards. */
#header > .container { position: relative; }

#header .logotype {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  position: absolute;
  top: 0;
  left: 10px;
  bottom: auto;
  width: auto;
  min-width: 200px;
  height: 80px;
  padding: 0 22px;
  background-image: none;
  background-color: var(--brand, #2563eb);
  background-size: auto;
  border-radius: 0;
  opacity: 1;
  z-index: 5;
  text-decoration: none;
  box-sizing: border-box;
}
#header .logotype:after { content: none; display: none; }  /* убрать изгиб-«язычок» */
#header .logotype .logo-name {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
#header .logotype .logo-tagline {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

/* ── Consent checkbox (152-ФЗ, in every lead form incl. the modal) ───────── */
.consent {
  display: block;
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text, #1f2937);
  text-align: left;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  margin: 0 6px 0 0;
  vertical-align: -2px;
  cursor: pointer;
}
/* Vendor sets a{white-space:nowrap} globally, so the policy link jumps to a
   new line as one block, leaving a ragged half-empty line. Let it wrap. */
.consent a { color: var(--link, #2563eb); white-space: normal; }

/* Row-flex forms (hero, mid-page promo): wrap so the label drops below the
   button on a full-width line. Column forms must NOT wrap (fixed height +
   column + wrap pushes the label into a side column) — grow them instead. */
#promoForm,
.service_form__send { flex-wrap: wrap; }
.order-form .consent { flex: 1 1 100%; width: 100%; }
.service_form__send .consent { flex: 1 1 100%; width: 100%; }

/* Hero form → true column: field on top, full-width button below, consent
   last. !important beats the constructor's inline style="flex:.4" on the
   button. */
.hero-form.order-form { flex-direction: column; }
.hero-form.order-form .hero-form__field,
.hero-form.order-form .hero-form__btn {
  flex: 0 0 auto !important;
  /* !important: the constructor pins width:50%!important at 768–1024px */
  width: 100% !important;
  box-sizing: border-box;
}
/* the 12px left margin is a leftover of the old field|button row */
.hero-form.order-form .hero-form__btn { margin: 8px 0 0 !important; }

/* Countdown: label on its own line (semibold, capital «Д» via first-letter),
   timer on its own line below — digits of varying width can no longer push
   the units onto a new line. Equal-width digit boxes kill the jitter. */
.hero__counts { height: auto; min-height: 55px; }
.hero__counts-name {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.hero__counts-name::first-letter { text-transform: uppercase; }
.until3d { display: block; white-space: nowrap; margin-left: 0; }
.until3d > span {
  display: inline-block;
  min-width: 2.9ch;   /* 1-digit box = 2-digit box, no width jitter */
  text-align: center;
  box-sizing: border-box;
}
/* Promo box: donor ships it with almost no vertical rhythm — heading, copy,
   the phone field, button and consent all butt together. Give the stacked copy
   real spacing and rebuild the form as a centered flex column with a gap. */
.service__promo-box { height: auto; min-height: 260px; padding: 34px 20px; }
.service__promo-heading { line-height: 1.2; }
.service__promo-description { margin-top: 14px; }
.service__promo .service__promo-form {
  height: auto;
  min-height: 0;
  width: 100%;
  max-width: 320px;
  margin: 26px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.service__promo-form input[name="phone"],
.service__promo-form input[name="send"] {
  width: 100%;
  box-sizing: border-box;
}
.service__promo-form input[name="send"] { padding: 12px; cursor: pointer; }
.service__promo-form .consent { margin-top: 2px; }

/* Forms on dark/colored promo backgrounds need a light consent line:
   promoForm (brand blue), callback-form (muted blue tile). */
.service__promo-form .consent,
#promoForm .consent,
#callback-form .consent {
  color: rgba(255, 255, 255, 0.85);
}
.service__promo-form .consent a,
#promoForm .consent a,
#callback-form .consent a {
  color: #fff;
  text-decoration: underline;
}

/* Fault tiles (#services .tiles .row): flex instead of the donor's float+%
   grid, so the trailing tile.contact always fills whatever's left in its row
   instead of a hardcoded width. Home (5 fault tiles) and brand pages (6) leave
   different remainders in row 2 — a fixed px width can only fit one of them;
   flex-grow computes it for both, and any future tile count. */
#services .tiles .row {
  display: flex;
  flex-wrap: wrap;
}
#services .tiles .row .tile {
  float: none;
  flex: 0 0 25%;
}
#services .tiles .row .tile.promo {
  flex: 0 0 50%;
}
#services .tiles .row .tile.contact {
  flex: 1 1 220px;
  height: auto;
  min-height: 280px;
  padding-bottom: 14px;
  /* Drop the donor's operator-photo bg (tile-contact.png) — the tile is now a
     plain brand-blue panel. Overriding here (not in min.css) means the browser
     never requests the removed file, so no 404 once it's deleted. The color
     stays: min.css set `background:var(--brand) url(...)`, we null only the
     image. */
  background-image: none;
}
#services .tiles .row .tile.contact .text { height: auto; }
#services .tiles .row .tile.contact .consent { font-size: 10.5px; margin-top: 8px; }
/* Vendor '#services .tiles .row .tile a{display:block}' (for fault-tile links)
   also blockifies the consent policy link, forcing it onto its own line. Keep
   it inline — needs the tile-scoped specificity to beat that rule. */
#services .tiles .row .tile.contact .consent a { display: inline; }

@media screen and (max-width: 767px) {
  /* Promo counts as 2 units in its row (row 1: promo + 2 regular = 4).
     At 2-per-row it can't share a line evenly with a sibling, so give it
     the full row instead — the 2 remaining regular tiles then pair up
     cleanly on the next line. */
  #services .tiles .row .tile {
    flex-basis: 50%;
  }
  #services .tiles .row .tile.promo {
    flex-basis: 100%;
  }
}
@media screen and (max-width: 480px) {
  #services .tiles .row .tile,
  #services .tiles .row .tile.promo,
  #services .tiles .row .tile.contact {
    flex-basis: 100%;
  }
}

/* ── Headings: drop the dated red PNG underline (devider.png) ────────────── */
.heading { background-image: none !important; }

/* ── Section headings: bolder (constructor renders h2/h3/.h2 at 400 despite
   its own min.css saying bold in places — some later, more specific rule
   wins the cascade) + «Выберите неисправность» centred like every other
   section heading instead of the constructor's left `padding-left:30px`. */
h2, h3, .h2, .services__title { font-weight: 700; }
.services__title { text-align: center; padding-left: 0; }

/* ── Наши мастера: plain responsive grid, not a carousel ──────────────────
   8 cards fit in 4/2 columns without sliding, so we dropped the constructor's
   owl-carousel classes and lay it out ourselves. Specialization/experience
   split into two lines, both secondary to the name (smaller, spec grey,
   experience brand-blue) — was one blue line, indistinguishable from the name. */
.masters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 20px;
}
/* Drop the donor's 40px top padding so the card starts flush with the photo
   (keep a little bottom padding for the text). Applies to homepage + o-kompanii. */
.master_cart { width: auto; margin: 0; padding: 0 0 20px; }
.master_cart img { display: block; width: 100%; max-width: 100%; height: auto; }
.master_cart p { margin: 14px 0 4px; }
.master_cart .master_spec,
.master_cart .master_exp {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
}
.master_cart .master_spec { color: #6b7280; }
.master_cart .master_exp { color: var(--brand, #2563eb); font-weight: 600; margin-top: 2px; }

/* Show 4 (desktop) / 2 (mobile) cards, reveal the rest via "Показать всех". */
.masters-grid .master_cart:nth-child(n+5) { display: none; }
.master .more { margin-top: 25px; text-align: center; }
.master .master_show-all {
  display: inline-block;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-brand);
  font-size: 14px;
  color: var(--brand, #2563eb);
  cursor: pointer;
}
.master .master_show-all:hover { color: #1f1f1f; }

/* On info pages (o-kompanii) .master sits inside #content .hero .text
   .content, unlike the homepage where it's a top-level section — a donor
   rule for in-article h2/.h2 headings outranks `.master .h2` on specificity
   (has an #id) and gives it a -10px bottom margin, pulling the grid up into
   the heading text. Restore the intended spacing for this nested case. */
#content .hero .text .content .master .h2 { margin-bottom: 30px; }

@media (max-width: 767px) {
  .masters-grid { grid-template-columns: repeat(2, 1fr); }
  .masters-grid .master_cart:nth-child(n+3) { display: none; }
}
/* Must come after the base + media-query hide rules above: equal
   specificity to both, so source order is what makes "Показать всех"
   win on every breakpoint. */
.masters-grid.expanded .master_cart { display: block; }

/* ── Hero H1: two-tone, tighter, no underline (conversion-oriented) ──────── */
#hero .text .heading--normal {
  color: var(--text, #1f2937);
  padding-bottom: 0;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
#hero .text .heading--normal .h1-accent { color: var(--brand, #2563eb); }

/* Inner-page titles (#content .heading / .heading-pagetitle): the donor
   paints them fully brand-blue, which reads as odd. Dark like the hero H1
   base — applies to «О компании» and every service-page title. */
#content .hero .text .heading,
#content .heading-pagetitle { color: var(--text, #1f2937); }

/* Inner-page content headings (#content h2 / .h2 / .pricelist-heading): the
   donor paints these brand-blue as well. Match the dark title tone. The promo
   box heading is a <div> on a dark bg, so these h2/h3 rules leave it white. */
#content h2,
#content h3,
#content .h2 { color: var(--text, #1f2937); }
/* pricelist title: donor selector is '#content .hero div.pricelist-heading'
   (1,2,1) — match its depth so brand.css wins on source order. */
#content .hero div.pricelist-heading { color: var(--text, #1f2937); }

/* ════════════════════════════════════════════════════════════════════════
   HEADER LAYOUT — clean rebuild (bug-fix session)
   ────────────────────────────────────────────────────────────────────────
   The donor stacks .nav-secondary (dark) + .nav-primary (white) inside a
   fixed 82px #header, but lays their contents out with floats, an absolute
   phone, an absolute burger and a `padding-top:10px` — so the two rows
   summed to ~100px and spilled 18px below the 82px box (phone icon leaked
   onto the hero) while nothing was vertically centered.

   We stop fighting it piecemeal: pin each row to a fixed height that sums to
   82px and flex-center its contents. Everything is scoped to #header and
   relies on the id for specificity, so it beats the donor's scattered
   class-level rules across all their breakpoints. #header stays 82px, so the
   global `body{padding-top:82px}` offset is untouched — no other page moves.

   Row split: 40px (dark) + 42px (white) = 82px.
   ════════════════════════════════════════════════════════════════════════ */

/* Kill the float clearfixes on both rows — they become stray flex items (or
   just noise) once we flex the rows, and flex needs no float-clearing. */
#header .nav-secondary::before, #header .nav-secondary::after,
#header .nav-primary::before,   #header .nav-primary::after,
#header .nav-secondary > .container::before, #header .nav-secondary > .container::after,
#header .nav-primary  > .container::before,  #header .nav-primary  > .container::after {
  content: none;
  display: none;
}

/* Dark row: work-hours + region, hugged to the right (logo sits on the left,
   as its own absolutely-positioned tab — not part of this flow). */
#header .nav-secondary { height: 40px; padding: 0; }
#header .nav-secondary > .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
#header .nav-secondary .links { align-items: center; }

/* White row: nav links (left, cleared past the logo by the donor's own
   margin-left:230px) + phone (far right). height is enough for the 36px
   phone icon to center without overflowing. */
#header .nav-primary { height: 42px; padding: 0; background: #fff; }
#header .nav-primary > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
#header .nav-primary .links { float: none; }   /* flex item now, not a float */
#header .nav-primary .links a { margin-top: 0; margin-bottom: 0; }

/* ── Header phone → inline SVG icon (blue circle recolors via --brand) ───── */
#header .nav-primary .phone {
  float: none;
  margin: 0;
  background-image: none;
  padding: 0 0 0 46px;
  position: relative;
}
#header .nav-primary .phone::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--brand, #2563eb);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
}

/* ── Burger (.menu): desktop hides it; here we just fix its bars ──────────
   Donor fills the bars with var(--brand) but left a literal red border
   (#DA063C) — a hex outside the #db073d family the Фаза 0 sweep tokenized,
   so it slipped through and rendered as a blue bar with a red rim. */
#header .nav-primary .menu span { border-color: var(--brand, #2563eb); }

/* ── Mobile (<768px): logo tab in the dark row, phone|burger in the white ─ */
@media (max-width: 767px) {
  /* logo → compact blue tab filling the dark row's 40px */
  #header .logotype {
    height: 40px;
    width: auto;
    min-width: 0;
    padding: 0 12px;
    left: 0;
    justify-content: center;
  }
  #header .logotype .logo-name { font-size: 16px; }
  #header .logotype .logo-tagline { display: none; }   /* слоган прячем на узких экранах */

  /* dark bar: drop the duplicate work-hours block the logo would overlap,
     keep «Без выходных / Москва и область» on the right */
  #header .nav-secondary .header__job--mob { display: none; }

  /* white row: phone flush-left, burger absolute-right (its slot reserved) */
  #header .nav-primary > .container {
    padding-left: 12px;
    padding-right: 54px;         /* room for the absolute burger (right:10, w:40) */
    position: relative;          /* anchor for the centered burger below */
  }
  #header .nav-primary .phone {
    padding-left: 34px;
    font-size: 16px;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    /* neutralize the donor's ≤676px absolute-centering leftover
       (left:50%/translateX(-43%), written for position:absolute) — under our
       position:relative it would instead shove the phone ~half a row right. */
    left: 0;
    transform: none;
  }
  #header .nav-primary .phone::before {
    width: 28px;
    height: 28px;
    background-size: 15px 15px;
  }

  /* burger: vertically centered in the 42px white row (donor pinned it with
     a fixed top:19/40/44px + padding-top:5px → bars hugged the top). Center
     the box AND its 3 bars as a group. Scope to the CLOSED state only — the
     open «×» switches to position:fixed and is repositioned by the donor's
     own top-right rules, so we must not force top:50% onto it (that would
     drop the × into the vertical middle of the screen). */
  #header .menu:not(.menu--open) {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    right: 10px;
    height: 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Donor gives the hero H1 only 30px of clearance under the header at
   ≤414px (vs. 100px on desktop) — matches the donor's own breakpoint so it
   doesn't also eat into the roomier 415-767px range. */
@media (max-width: 414px) {
  #hero { margin-top: 48px; }
}

/* ── Hero service/problem icons → Lucide-style SVG, tinted via --brand ─────
   The old red PNG line-icons are replaced by a masked <span>: the SVG shape
   is the mask, the fill is the brand token → recolors with the palette.
   Modifier class keeps the original icon name; --svc-ico maps it to an SVG. */
.icon .svc-ico {
  display: block;
  width: 78px;
  height: 78px;
  background-color: var(--brand, #2563eb);
  -webkit-mask: var(--svc-ico) center / contain no-repeat;
          mask: var(--svc-ico) center / contain no-repeat;
}
.svc-ico--maintenance          { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z'/%3E%3C/svg%3E"); }
.svc-ico--cleaning             { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17.7%207.7a2.5%202.5%200%201%201%201.8%204.3H2'/%3E%3Cpath%20d='M9.6%204.6A2%202%200%201%201%2011%208H2'/%3E%3Cpath%20d='M12.6%2019.4A2%202%200%201%200%2014%2016H2'/%3E%3C/svg%3E"); }
.svc-ico--computer-diagnostics { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2012h-4l-3%209L9%203l-3%209H2'/%3E%3C/svg%3E"); }
.svc-ico--configuring-router   { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020h.01'/%3E%3Cpath%20d='M8.5%2016.5a5%205%200%200%201%207%200'/%3E%3Cpath%20d='M5%2013a10%2010%200%200%201%2014%200'/%3E%3Cpath%20d='M2%208.82a15%2015%200%200%201%2020%200'/%3E%3C/svg%3E"); }
.svc-ico--install              { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4'/%3E%3Cpath%20d='M7%2010l5%205%205-5'/%3E%3Cpath%20d='M12%2015V3'/%3E%3C/svg%3E"); }
.svc-ico--miningIcon           { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='4'%20width='16'%20height='16'%20rx='2'/%3E%3Crect%20x='9'%20y='9'%20width='6'%20height='6'/%3E%3Cpath%20d='M15%202v2'/%3E%3Cpath%20d='M15%2020v2'/%3E%3Cpath%20d='M2%2015h2'/%3E%3Cpath%20d='M2%209h2'/%3E%3Cpath%20d='M20%2015h2'/%3E%3Cpath%20d='M20%209h2'/%3E%3Cpath%20d='M9%202v2'/%3E%3Cpath%20d='M9%2020v2'/%3E%3C/svg%3E"); }
.svc-ico--network-new          { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20'/%3E%3Cpath%20d='M2%2012h20'/%3E%3C/svg%3E"); }
.svc-ico--no-picture           { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='20'%20height='14'%20x='2'%20y='3'%20rx='2'/%3E%3Cpath%20d='M8%2021h8'/%3E%3Cpath%20d='M12%2017v4'/%3E%3Cpath%20d='M9%207l6%206'/%3E%3Cpath%20d='M15%207l-6%206'/%3E%3C/svg%3E"); }
.svc-ico--no-sound             { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11%205L6%209H2v6h4l5%204z'/%3E%3Cpath%20d='M22%209l-6%206'/%3E%3Cpath%20d='M16%209l6%206'/%3E%3C/svg%3E"); }
.svc-ico--not-downloading      { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012a9%209%200%201%201-9-9c2.52%200%204.93%201%206.74%202.74L21%208'/%3E%3Cpath%20d='M21%203v5h-5'/%3E%3C/svg%3E"); }
.svc-ico--not-see-device       { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2012H2'/%3E%3Cpath%20d='M5.45%205.11%202%2012v6a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-6l-3.45-6.89A2%202%200%200%200%2016.76%204H7.24a2%202%200%200%200-1.79%201.11z'/%3E%3Cpath%20d='M6%2016h.01'/%3E%3Cpath%20d='M10%2016h.01'/%3E%3C/svg%3E"); }
.svc-ico--not-turn-on          { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202v10'/%3E%3Cpath%20d='M18.36%206.64a9%209%200%201%201-12.73%200'/%3E%3C/svg%3E"); }
.svc-ico--system               { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E"); }
.svc-ico--upgrade              { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17%2011l-5-5-5%205'/%3E%3Cpath%20d='M17%2018l-5-5-5%205'/%3E%3C/svg%3E"); }
.svc-ico--upgrade-new          { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17%2011l-5-5-5%205'/%3E%3Cpath%20d='M17%2018l-5-5-5%205'/%3E%3C/svg%3E"); }
.svc-ico--virus                { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%202l1.88%201.88'/%3E%3Cpath%20d='M14.12%203.88%2016%202'/%3E%3Cpath%20d='M9%207.13v-1a3.003%203.003%200%201%201%206%200v1'/%3E%3Cpath%20d='M12%2020c-3.3%200-6-2.7-6-6v-3a4%204%200%200%201%204-4h4a4%204%200%200%201%204%204v3c0%203.3-2.7%206-6%206'/%3E%3Cpath%20d='M12%2020v-9'/%3E%3Cpath%20d='M6.53%209C4.6%208.8%203%207.1%203%205'/%3E%3Cpath%20d='M6%2013H2'/%3E%3Cpath%20d='M3%2021c0-2.1%201.7-3.9%203.8-4'/%3E%3Cpath%20d='M20.97%205c0%202.1-1.6%203.8-3.5%204'/%3E%3Cpath%20d='M22%2013h-4'/%3E%3Cpath%20d='M17.2%2017c2.1.1%203.8%201.9%203.8%204'/%3E%3C/svg%3E"); }
.svc-ico--windows              { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='7'%20height='7'%20x='3'%20y='3'%20rx='1'/%3E%3Crect%20width='7'%20height='7'%20x='14'%20y='3'%20rx='1'/%3E%3Crect%20width='7'%20height='7'%20x='14'%20y='14'%20rx='1'/%3E%3Crect%20width='7'%20height='7'%20x='3'%20y='14'%20rx='1'/%3E%3C/svg%3E"); }

/* Преимущества block only (Фаза 1) */
.svc-ico--zap                  { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolygon%20points='13%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010'/%3E%3C/svg%3E"); }
.svc-ico--map-pin              { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='3'/%3E%3C/svg%3E"); }
.svc-ico--package              { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%208l9-5%209%205v8l-9%205-9-5z'/%3E%3Cpath%20d='M3%208l9%205%209-5'/%3E%3Cpath%20d='M12%2013v8'/%3E%3C/svg%3E"); }
.svc-ico--shield-check         { --svc-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3Cpath%20d='M9%2012l2%202%204-4'/%3E%3C/svg%3E"); }

/* ── Преимущества (replaces the old #features tabs on главная) ───────────
   Same list/grid markup as .howwework__list (constructor CSS), own icon
   circle since these are masked spans, not <img>, and .icon .svc-ico (78px)
   is scoped to the service tiles only. */
.advantages__icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.advantages__icon .svc-ico {
  display: block;
  width: 44px;
  height: 44px;
  background-color: var(--brand, #2563eb);
  -webkit-mask: var(--svc-ico) center / contain no-repeat;
          mask: var(--svc-ico) center / contain no-repeat;
}
/* Drop the big faded counter digit under advantages icons — unlike the
   "how we work" steps these aren't a numbered sequence. Keep the icon. */
.advantages .howwework__icon::before { content: none; }

/* ── «Как работаем» / «Преимущества»: заголовки пунктов (.howwework__caption)
   унифицированы со стилем заголовков плиток-неисправностей
   (#services .tiles .row .tile .heading): bold, 18px, тёмный тон.
   Один оверрайд — действует на index.html и o-kompanii. ─────────────────── */
.howwework__caption {
  font-weight: bold;
  font-size: 18px;
  color: var(--text, #1f2937);
}

/* ── Lead modal (#lead-modal, injected by app.js) ─────────────────────────
   The single popup that replaced the constructor's three per-page popups
   (.dialog-cb, .dialog--order, #order.popUp). Markup lives in app.js.
   z-index: above the floating phone button (9999), below SweetAlert (99999). */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(31, 41, 55, 0.6);
}
.lead-modal.open { display: flex; }
body.lead-modal-open { overflow: hidden; }

.lead-modal__card {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 28px 26px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-family: var(--font-brand);
  box-sizing: border-box;
}
.lead-modal__card *, .lead-modal__card *::before, .lead-modal__card *::after {
  box-sizing: border-box;
}

.lead-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lead-modal__close::before,
.lead-modal__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--text, #1f2937);
  transform: translate(-50%, -50%) rotate(45deg);
}
.lead-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.lead-modal__title {
  padding: 0 20px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text, #1f2937);
}
.lead-modal__service {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand, #2563eb);
}

.lead-modal__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.lead-modal__form input[type="text"],
.lead-modal__form input[type="tel"] {
  height: 46px;
  padding: 0 14px;
  border: 1px solid #d5dbe3;
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-brand);
  font-size: 15px;
  color: var(--text, #1f2937);
}
.lead-modal__form input[type="text"]:focus,
.lead-modal__form input[type="tel"]:focus {
  outline: none;
  border-color: var(--brand, #2563eb);
}
.lead-modal__form input[type="submit"] {
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--btn-bg, #2563eb);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lead-modal__form input[type="submit"]:hover {
  background: var(--brand-dark, #1d4ed8);
}
.lead-modal__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: #6b7280;
}

/* Price rows / build cards open the modal — make them look clickable */
.lead-modal-row { cursor: pointer; }
.lead-modal-row:hover td { background: rgba(var(--brand-rgb, 37, 99, 235), 0.06); }
.service_pk > a { cursor: pointer; }

/* ── Страница брендов (modeli): алфавитный список → колонки ───────────────
   Донор: каждая буква — блочный .row на всю ширину (35px паддинг+бордер),
   .symbol — 70px колонка слева, ul фиксирован на 640px. У буквы с 1 брендом
   (больше половины из 26 групп) это давало длинную почти пустую строку.
   Перекладываем в CSS-колонки: буква — заголовок над вертикальным списком,
   группа не рвётся между колонками (break-inside: avoid). ────────────────── */
.brands {
  column-width: 210px;
  column-gap: 32px;
}
.brands .row {
  display: block;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  padding: 0 0 18px;
  border-bottom: 0;
}
.brands .row .symbol {
  display: block;
  width: auto;
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand, #2563eb);
  margin-bottom: 6px;
}
.brands .row ul {
  width: auto;
  display: block;
}
.brands .row ul li {
  width: auto;
  display: block;
  line-height: 1.6;
}
.brands .row:hover {
  background: none;
}
.brands .row:hover .symbol {
  color: var(--brand, #2563eb);
}

/* ── Modern footer ──────────────────────────────────────────────────────
   Replaces the donor #promo ("Счастливые часы") block and the thin
   requisites bar with a dark 3-column footer (brand / contacts / nav) plus a
   bottom bar. Vendor a{white-space:nowrap;color:brand} is overridden below. */
#footer.footer-modern {
  background: #1f1f1f;
  color: #fff;
  font-size: 14px;
  padding: 48px 0 24px;
  height: auto;
}
.footer-modern__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}
.footer-modern__col { flex: 1 1 220px; min-width: 190px; }
.footer-modern__col--brand { flex: 1 1 300px; max-width: 360px; }
.footer-modern__logo {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}
.footer-modern__logo span { color: var(--brand, #2563eb); }
.footer-modern__desc {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
  font-size: 13px;
}
.footer-modern__title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 16px;
  color: #fff;
}
.footer-modern__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  line-height: 1.4;
}
a.footer-modern__contact:hover { color: #fff; }
.footer-modern__contact svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--brand, #2563eb);
}
.footer-modern__nav { list-style: none; margin: 0; padding: 0; }
.footer-modern__nav li { margin-bottom: 12px; }
.footer-modern__nav a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  white-space: normal;
}
.footer-modern__nav a:hover { color: #fff; }
.footer-modern__bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
}
.footer-modern__copy { color: rgba(255, 255, 255, 0.6); font-size: 13px; }
.footer-modern__legal { color: rgba(255, 255, 255, 0.35); font-size: 11px; }
@media screen and (max-width: 767px) {
  #footer.footer-modern { padding: 32px 0 20px; }
  .footer-modern__col,
  .footer-modern__col--brand { flex: 1 1 100%; max-width: none; }
}

/* ══ Sidebar (#sidebar) — compact service-links nav ═════════════════════════
   Donor links are 66px tall / 18px in thick 4px-blue boxes — needlessly bulky
   and, next to short content, they leave a big void. Slim the whole list down.
   Global: applies on every page that renders the #sidebar column. Vendor sets
   '#sidebar .links .main .link{padding:20px 15px;font-size:18px}' (0,3,2), so
   match its '.main .link' depth to win on later source order; '.links{border:
   4px}' (0,1,0) is beaten by '#sidebar .links' (0,2,0). */
#sidebar .links { border-width: 2px; margin-bottom: 18px; }
#sidebar .links .main .link {
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.3;
}
#sidebar .menu-left-show a {
  padding: 11px 14px;
  font-size: 14px;
}

/* ══ o-kompanii (body.page-about) ═══════════════════════════════════════════
   The info-page template puts «О компании» text + «Наши мастера» +
   «Наши преимущества» in the right #content column beside a service-links
   #sidebar. Donor styles broke it: section headings rendered brand-blue/20px/
   centred, and the tall sidebar towered over the short content leaving a big
   void beside it. Everything below is scoped to this page. */

/* Section headings (Мастера / Преимущества) → match the dark, left H1. The
   donor '#content .hero .text .content h2/.h2' rule (1,4,1) paints them
   blue/20px, so match its depth to win on color + size. */
.page-about #content .hero .text .content .master .h2,
.page-about #content .hero .text .content .advantages h2 {
  color: #1f1f1f;
  font-size: 26px;
  font-weight: 700;
  text-align: left;
  margin: 44px 0 26px;
  padding: 0;
}

/* Show the full team (all 8), drop the "показать всех" toggle. */
.page-about #content .masters-grid .master_cart { display: block; }
.page-about #content .master .more { display: none; }

/* Kill the donor's full-width section spacing (.master margin-bottom:110px,
   .advantages padding:70px 0) — a gaping hole in this narrow column. The
   section headings' own top margin gives the rhythm. */
.page-about #content .master { margin-bottom: 0; }
.page-about #content .advantages { padding-top: 0; padding-bottom: 72px; }

/* ── Promo countdown timer (.promo-form banner, homepage + brand landings) ──
   White cards on the blue .wrapper. Counts down to the end of the week; the
   plugin-free logic lives in assets/js/promo-timer.js. */
.promo-timer {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
}
.promo-timer__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
  padding: 6px 7px 5px;
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}
.promo-timer__num {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 21px;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.promo-timer__lbl {
  margin-top: 4px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #6b7280;
}
@media (max-width: 380px) {
  .promo-timer { gap: 6px; }
  .promo-timer__item { min-width: 42px; padding: 6px 5px 5px; }
  .promo-timer__num { font-size: 19px; }
}
/* Light variant — hero form sits on a white card, so swap the white cards +
   shadow for soft grey plates that read against it. */
.promo-timer--light { margin: 8px 0 0; }
.promo-timer--light .promo-timer__item {
  background: #eef2f7;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

/* Mobile: the donor drops the hero form's white card under 767px
   (.hero__form{background:none}), leaving the discount + form + timer floating
   on the grey page. Keep the card on mobile too — same rounded white plate. */
@media (max-width: 767px) {
  .hero__form {
    background: #fff;
    padding: 22px 18px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
  }
}

/* Testimonial rating → gold stars (replaces the donor's red icon strip). */
.rating .stars {
  color: #ffb400;
  font-size: 19px;
  letter-spacing: 3px;
  line-height: 1;
  vertical-align: middle;
}
.rating .stars + span { vertical-align: middle; margin-left: 6px; }


/* ══ Certificates gallery (homepage — between Примеры работ and Бренды) ═════
   3 portrait scans; Fancybox opens the full image (group "certificates"). */
.certificates { margin-bottom: 60px; }
/* Match the big centered section headings (.work/.master use the same rule). */
.certificates .h2 { text-align: center; font-size: 36px; margin: 30px auto; }
.certificates__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 24px;
}
.certificates__item {
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(31, 41, 55, 0.08);
  box-shadow: 0 6px 20px rgba(31, 41, 55, 0.10);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: zoom-in;
}
.certificates__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.18);
}
.certificates__item img { display: block; width: 100%; height: auto; }

@media screen and (max-width: 767px) {
  .certificates { margin-bottom: 40px; }
  .certificates__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}


/* ══ Brands heading — lifted out of the white .row card, onto the page
   background, and styled like the other section headings (was a small
   18px title stuck inside the card). ═══════════════════════════════════════ */
#brands .title {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #1f1f1f;
  margin: 30px auto;
}
/* Drop the top padding that used to sit above the (now lifted) heading, so
   the first logo row hugs the top of the white card (matches the bottom). */
#brands .container .row { padding-top: 0; }
#brands .container .row .brands-block { margin-top: 0; }