/* Site-wide layout fixes (2026-09-08). Loaded on every page from inc/outcome-dark.php.
   Keep it small and comment every rule with the reason. */

/* 1. Hero with a video: on mobile/tablet the video goes first, copy + CTA after
      (owner decision 2026-09-08). The theme's --upgrade hero puts the text block
      at order:-1, so the video wrapper needs -2. Heroes with a static image keep
      the theme order. */
@media screen and (max-width: 1023px) {
  .internal_hero .internal_hero__container--grid2 > .js-video-wrapper { order: -2; }
}

/* 2. Footer v12: the grid columns were fixed px (290+300+280+262+278 = 1410px),
      so on 1280–1500px viewports the last column and the legal row were cut off
      by the footer's overflow:hidden, and on ≥1536px the block did not fill the
      container. Same proportions, now fluid. */
@media (min-width: 1280px) {
  .footer .container {
    grid-template-columns:
      minmax(0, 290fr) minmax(0, 300fr) minmax(0, 280fr)
      minmax(0, 262fr) minmax(0, 278fr) !important;
  }
}

/* 3. Reading progress bar — single blog posts (inc/reading-progress.php).
      Sits on the bottom edge of the fixed header and spans its full width. */
.lua-rp {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; z-index: 3; overflow: hidden; pointer-events: none;
  background: rgba(0, 0, 0, .07);
}
.lua-rp__fill {
  display: block; width: 100%; height: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--red-1, #f43563);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .lua-rp__fill { transition: transform .1s linear; }
}

/* 4. Header CTA → free-audit landing (inc/header-cta.php). 2026-09-09.
      Sits immediately before the burger. Header space at 1512px: logo ends at
      366, the mail block starts at 1044 — 678px free, so the pill costs nothing.
      Below 1280 the mail/phone blocks plus the pill would crowd the burger, so
      the pill hides and the same link is carried by the burger menu instead. */
.header .header__cta {
  display: inline-flex; align-items: center; gap: .9rem;
  flex: 0 0 auto; height: 4.4rem; padding: 0 2rem;
  border-radius: 1.2rem;
  background: var(--red-1, #f43563); color: #fff;
  font-size: 1.5rem; font-weight: 500; line-height: 1; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.header .header__cta:hover,
.header .header__cta:focus-visible {
  background: #e0234f; color: #fff;
  transform: translateY(-.1rem);
  box-shadow: 0 .8rem 2rem rgba(244, 53, 99, .28);
}
.header .header__cta-dot {
  width: .8rem; height: .8rem; border-radius: 50%;
  background: #fff; flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .header .header__cta-dot { animation: lua-cta-pulse 2.4s ease-in-out infinite; }
}
@keyframes lua-cta-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.78); }
}
/* Everything in this header is sized in the theme's vw-rem, so the row keeps
   its proportions instead of getting tight — measured total at 1512 is 1140px
   of 1411 available, and that ratio holds all the way down. So the pill and the
   messenger labels drop out at the same 1023 breakpoint the theme already uses
   for the mail/phone labels, not earlier. */
@media (max-width: 1023px) {
  .header .header__cta { display: none; }
}

/* The audit page inside the burger menu. Owner's call after three passes at
   the big nav grid (7.2rem in a 37rem column never fit the whole label, and a
   red or shrunken item read as foreign): the link belongs in the «Послуги»
   list, last, right after «Айдентика та бренд». Menu item 6349 was moved from
   menu 13 into the services menu and relabelled «Аудит для забудовника».

   That list auto-flows — measured positions are pure DOM order of the visible
   items into a 2 × 4 grid, so the f-cN/f-rN classes do nothing there and the
   item only has to be last in the menu to land in column 2, row 4.

   The same menu is printed again in the footer, where those classes DO place
   items into six groups. The audit page already has its own footer link
   («Аудит реклами» under «З чого почати», item 5915), so this one is hidden
   there rather than given a group it doesn't belong to. display:none takes it
   out of the footer grid entirely, so nothing shifts. */
.footer-nav .lua-audit { display: none; }

/* 5. Section-head right column — one geometry site-wide. 2026-09-09.
      The intro paragraph next to a section title started at a different x in
      every block: measured on the LP 862 / 1036 / 1131 and on
      /real-estate-marketing/ 884 / 1036, all inside the same 50→1462 content
      box. Three different blocks (.lp-shead grid, .need-head flex,
      .specialization__top flex with space-between) each did their own thing.
      Now all three: 55.5rem wide, flush to the right content edge, balanced
      wrapping. Sibling selectors so a head that has only the paragraph and no
      title is left alone. Blocks nested in a padded card (.lp-dark) stay inset
      by that card's padding — that inset is intentional. */
.lp-shead > * + .lp-shead__text,
.need-head .need-title ~ .need-text,
.specialization__top .specialization__title ~ .specialization__top_info {
  max-width: 55.5rem;
  margin-left: auto;
  text-wrap: balance;
}

/* 6. Quiz options: hover and keyboard affordance. 2026-09-09.
      The options had :checked styling and nothing else — no signal that a row
      is clickable until it is already chosen. Unchecked rows now pick up the
      red ring and the radio outline on hover; the checked row is left alone
      (it is already solid black). */
.quiz-choise span {
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.quiz-choise span::before {
  transition: border-color .2s, background-color .2s;
}
.quiz-choise > input:not(:checked) + span:hover {
  box-shadow: inset 0 0 0 .2rem var(--red-1, #f43563);
  transform: translateY(-.2rem);
}
.quiz-choise > input:not(:checked) + span:hover::before {
  border-color: var(--red-1, #f43563);
}
.quiz-choise > input:focus-visible + span {
  box-shadow: inset 0 0 0 .2rem var(--red-1, #f43563);
}
@media (hover: none) {
  /* no hover on touch — keep the tap target from flashing a ring on scroll */
  .quiz-choise > input:not(:checked) + span:hover {
    box-shadow: none; transform: none;
  }
}

/* 7. Header always visible. 2026-09-09.
      The theme hid it on scroll-down with
      `@media (min-width:1023px) .header.header--scroll_state.header--pos_state
       { transform: translateY(calc(-100% - 5rem)) }`
      driven by two JS classes. Nothing to patch in the bundle — one selector of
      equal specificity plus the body element wins, the classes keep toggling
      (they also carry the compact/blur look) and only the hiding stops. */
body .header.header--scroll_state.header--pos_state { transform: none; }

/* 8. Messenger links in the header (inc/header-cta.php). 2026-09-09.
      Typography copied from the theme's own mail/phone toggles — 1.7rem, 400,
      black, 2.4rem icon, 1.2rem gap — so the row reads as one set. Hover paints
      the label brand red; the icon keeps its platform colour. */
.header .header__msg {
  display: inline-flex; align-items: center; gap: 1.2rem; flex: 0 0 auto;
  font-size: 1.7rem; font-weight: 400; line-height: 1;
  color: var(--black-1, #000); text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.header .header__msg:hover,
.header .header__msg:focus-visible { color: var(--red-1, #f43563); }
.header .header__msg-ico {
  width: 2.4rem; height: 2.4rem; display: block; flex: 0 0 auto;
}
@media (max-width: 1023px) {
  /* same breakpoint the theme uses for its own contact labels — icons stay */
  .header .header__msg-txt { display: none; }
}


/* 9. The «Маркетинг-підтримка» cards are links now (inc/support-links.php).
      2026-09-09. The theme printed them as <div>, so they carried no affordance
      at all — nothing said the price was clickable. The anchor inherits the
      card's own look (class is unchanged), this only strips the UA link styling
      and adds the lift the rest of the site already uses on clickable cards. */
a.support-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.support-card:hover {
  transform: translateY(-.2rem);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, .08);
}
a.support-card:focus-visible {
  outline: .2rem solid var(--red-1, #f43563);
  outline-offset: .3rem;
}
@media (hover: none) {
  a.support-card:hover { transform: none; box-shadow: none; }
}


/* 10. Mobile header row. 2026-09-09.
       Two separate defects, both leftovers from the labelled desktop layout.

       The burger: below 1024 the «Меню» label is display:none, but the white
       pill kept `padding-left: 2.4rem` that used to hold it — measured
       4.68/4.68/4.68/18.72, so the pill stuck out 14px to the left of the icon
       as a white crescent. Symmetric padding plus a 1:1 box turns it back into
       a ring around the icon.

       The four icons: measured at 390 the glyph boxes were 22 / 22 / 19 / 19 px
       with 28 / 18 / 8 px of air between them — the mail and phone toggles still
       carry the margins that separated them from their labels, and the two
       messenger icons are a different size. One size and one gap for all four. */
@media (max-width: 1023px) {
  /* aspect-ratio does nothing here — both dimensions are content-driven, so it
     came out 43×55. The icon itself is a 44px circle, so a 7rem box leaves an
     even ~5px ring on all four sides. */
  .header .header__menu_btn {
    padding: 0;
    width: 7rem;
    height: 7rem;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
  }
  .header .header_burger__lines { margin: 0; }
  .header .header-contact-toggle { margin: 0; }
  .header .header-contact-toggle img,
  .header .header__msg-ico { width: 2.7rem; height: 2.7rem; margin: 0; }
  /* Equal air between the four, and the row still has to end inside the
     container's 3.9rem right padding. Budget at 390: 340px of content box for
     logo 136 + four 21px icons + the 54.6px burger = 274.6, so 65px is all
     there is for five gaps. .4rem on top of the container's own 1rem gap gives
     10.9px between every pair and lands the row at 338 of 340. */
  .header .header-contact,
  .header .header__msg { align-items: center; margin-left: .4rem; }
  .header .header__logo_w + .header-contact { margin-left: 1.6rem; }
}

/* 11. Lazily-loaded images fade in instead of snapping (inc/img-lazyload.php).
       The class is only ever added by JS, and only to an image that has not
       decoded yet — so with JS off, or if a load event is missed, the image is
       simply visible. Nothing here can leave an image hidden. */
img.lua-fade { opacity: 0; transition: opacity .45s ease; }
img.lua-fade.lua-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  img.lua-fade { opacity: 1; transition: none; }
}


/* 12. Site-wide: a hard <br> authored for the desktop line-break sits inside
       the intro paragraphs. On a phone the sentence already wraps, so the break
       leaves an orphan («…в одному місці.» / «одному місці.») and the paragraph
       reads as if it slid sideways. Measured: .actual-text carries exactly one
       <br>, and there is a space before it, so hiding the element leaves the
       sentences correctly spaced. */
@media (max-width: 767px) {
  .actual-text br,
  .specialization__top_descr br,
  .specialization__top_info br { display: none; }
  .actual-text,
  .specialization__top_descr { text-wrap: pretty; }
}

/* 13. Mobile footer — two real columns, headings that read as headings.
       2026-09-09, after both stacked previews (B5/B1) were rejected.

       Reference: arounda.agency — bold white group headings, dimmer links, two
       columns, no accordions.

       What the theme gives us to work with: the group captions («Маркетинг»,
       «Сайти», «SEO» …) are ::before on the first item of each group, and they
       were 11px / 400 / rgba(255,255,255,.38) against 14px white links — the
       caption was quieter than the links under it, which is exactly why the two
       blurred together. Captions become 15px/600/white, links step back to 72%.

       Column split without hardcoding item counts (the EN and RU footers have
       different ones): «Компанія» keeps column 1, and .f-h2 plus everything
       after it («З чого почати») goes to column 2; in the services list the
       f-c4/5/6 groups go to column 2. `grid-auto-flow: row dense` is what lets
       column 2 start at row 1 instead of continuing after column 1.

       Order, per the brief: logo+descr → nav (Компанія | З чого почати) →
       services (2 cols) → socials + descr → phone, email, CTA → legal → logo. */
@media (max-width: 767px) {

  /* ── headings vs links ───────────────────────────────────────────────── */
  .footer .footer-nav > li::before {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    margin: 2.8rem 0 1.2rem;
  }
  .footer .footer-nav > li:first-child::before { margin-top: 0; }
  .footer .footer-nav > li > a { color: rgba(255, 255, 255, .72); }
  .footer .footer-nav > li.f-soon > a,
  .footer .footer-nav > li.f-soon > .footer_nav__link { color: rgba(255, 255, 255, .34); }
  /* the section eyebrows («Компанія», «Digital-продукти», «Контакти») step down
     so the group headings own the hierarchy */
  .footer .footer-descr {
    display: block;
    margin-bottom: 1.6rem;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
  }

  /* ── order ───────────────────────────────────────────────────────────── */
  .footer .footer-body { display: flex; flex-direction: column; gap: 3.6rem; }
  .footer .footer-pages    { order: 1; }
  .footer .footer-services { order: 2; }
  .footer .footer-contacts { order: 3; }
  .footer .footer-info     { order: 4; }

  /* ── nav: Компанія | З чого почати ───────────────────────────────────── */
  .footer .footer-pages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.4rem;
    align-items: start;
  }
  .footer .footer-pages .footer-descr { grid-column: 1; grid-row: 1; }
  .footer .footer-pages .footer-nav--v2 { display: contents; }
  .footer .footer-pages .footer-nav--v2 > li { grid-column: 1; }
  .footer .footer-pages .footer-nav--v2 > li.f-h2,
  .footer .footer-pages .footer-nav--v2 > li.f-h2 ~ li { grid-column: 2; }
  /* column 2 starts level with the «Компанія» eyebrow so both headings line up */
  .footer .footer-pages .footer-nav--v2 > li.f-h2 { grid-row: 1; }
  .footer .footer-pages .footer-nav--v2 > li.f-h2::before { margin-top: 0; }

  /* ── services: 6 groups → 2 columns ──────────────────────────────────── */
  .footer .footer-services .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    column-gap: 2.4rem;
    row-gap: 0;
    align-items: start;
  }
  .footer .footer-services .footer-nav > li { grid-column: 1; margin-bottom: 1rem; }
  .footer .footer-services .footer-nav > li[class*="f-c4"],
  .footer .footer-services .footer-nav > li[class*="f-c5"],
  .footer .footer-services .footer-nav > li[class*="f-c6"] { grid-column: 2; }
  .footer .footer-services .footer-nav > li.f-hide { display: none; }

  /* ── contacts, then phone / email / CTA ──────────────────────────────── */
  .footer .footer-contacts { display: flex; flex-direction: column; gap: 1.6rem; }
  .footer .footer-contacts .footer-nav--contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.4rem;
    row-gap: 1.2rem;
  }
  .footer .footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }
}

/* 14. Mobile footer — overrides. 2026-09-09.
       Section 13 above sets the layout, but two things in it lose to the
       theme's own rules, measured live: the group caption keeps 11px /
       rgba(255,255,255,.38) / uppercase (only font-weight got through), and the
       list items keep grid-column: auto, so the six service groups interleave
       across the two columns instead of splitting 1-3 / 4-6. The theme's
       selectors for both are more specific than any plain descendant chain, so
       these exact properties are forced. Nothing else here is !important. */
@media (max-width: 767px) {
  .footer .footer-nav > li::before {
    font-size: 15px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #fff !important;
    margin: 2.8rem 0 1rem !important;
  }
  .footer .footer-nav > li:first-child::before { margin-top: 0 !important; }

  .footer .footer-services .footer-nav > li { grid-column: 1 !important; }
  .footer .footer-services .footer-nav > li[class*='f-c4'],
  .footer .footer-services .footer-nav > li[class*='f-c5'],
  .footer .footer-services .footer-nav > li[class*='f-c6'] { grid-column: 2 !important; }

  .footer .footer-pages .footer-nav--v2 > li { grid-column: 1 !important; }
  .footer .footer-pages .footer-nav--v2 > li.f-h2,
  .footer .footer-pages .footer-nav--v2 > li.f-h2 ~ li { grid-column: 2 !important; }
  .footer .footer-pages .footer-nav--v2 > li.f-h2 { grid-row: 1 !important; }

  /* «Компанія» heads column 1 of the nav grid, so it is a heading, not the
     section eyebrow that «Digital-продукти» and «Контакти» remain. */
  .footer .footer-pages .footer-descr {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    margin-bottom: 1rem;
  }
}

/* 15. Mobile: reviews block + footer holes + legal type. 2026-09-09.

   REVIEWS — two things read as 'nothing loaded' on a phone:
   1) .reviews-logo-anim / .reviews-anim start at opacity 0 and wait for the
      theme's scroll reveal. Measured live: the stats and the «Наші клієнти»
      title do get revealed, the nine client logos never do — so the block
      shows its heading and then a blank hole. The reveal is a nice touch, not
      load-bearing, so on phones these start visible.
   2) The slider stretches every slide to the tallest one and the card's grey
      panel stretches with it — a short review leaves ~600px of empty grey
      inside the card. Slides hug their content instead.

   FOOTER HOLES — the two-column lists were one grid, and grid rows are shared
   between columns: column 2's first cell is a caption plus a two-line link
   (~90px), so column 1's first link had to start below it. Hence the gaps under
   «Компанія», «Безкоштовна консультація» and «Контакти». Multi-column layout
   flows each column independently — no shared rows — and break-before: column
   puts the split exactly on the group boundary. On .footer-pages the container
   itself is the multicol, which lands «Компанія» at the top of column 1; on the
   services list the multicol is the <ul>, so «Digital-продукти» stays above both.

   LEGAL LINE — was 19.5px with 24-34px gaps, bigger than the nav links above.
   Down to the link size and tightened. */
@media (max-width: 767px) {
  .reviews .reviews-anim,
  .reviews .reviews-logo-anim { opacity: 1 !important; }
  .reviews__list .swiper-wrapper { align-items: flex-start; }
  .reviews__list .swiper-slide { height: auto; }
  .reviews__list .reviews_list__item { height: auto; }

  .footer .footer-pages { display: block !important; column-count: 2; column-gap: 2.4rem; }
  .footer .footer-pages .footer-nav--v2 { display: block !important; }
  .footer .footer-pages .footer-nav--v2 > li {
    grid-column: auto !important;
    grid-row: auto !important;
    break-inside: avoid;
  }
  .footer .footer-pages .footer-nav--v2 > li.f-h2 {
    -webkit-column-break-before: always;
    break-before: column;
  }

  .footer .footer-services .footer-nav {
    display: block !important;
    column-count: 2;
    column-gap: 2.4rem;
  }
  .footer .footer-services .footer-nav > li {
    grid-column: auto !important;
    break-inside: avoid;
  }
  .footer .footer-services .footer-nav > li[class*='f-c4'].f-h {
    -webkit-column-break-before: always;
    break-before: column;
  }

  .footer .footer-contacts { padding-bottom: 1.6rem; }
  .footer .footer-contacts .footer-phone { margin-top: 2rem; padding-top: 2rem; }

  .footer .footer-bottom { padding-bottom: 2.4rem; }
  .footer .footer-bottom,
  .footer .footer-bottom__left,
  .footer .footer-bottom__right,
  .footer .footer-bottom a,
  .footer .footer-bottom .footer-copy,
  .footer .footer-bottom .footer-link,
  .footer .footer-bottom .footer-sity,
  .footer .footer-bottom .footer-gtm,
  .footer .footer-bottom .footer-time {
    font-size: 14px;
    line-height: 1.4;
  }
  .footer .footer-bottom__left { gap: 1rem 2rem; }
  .footer .footer-bottom__right { margin-top: 2rem; gap: .8rem 2rem; }
}

/* == 16. Mobile: header trim, footer order, gap trim =====================
   Header was 80px (padding 1.6rem x2 + burger 7rem = 54.6). Now ~75.6:
   padding 1.42rem, burger 6.75rem. The theme scales the burger 1.25,
   so the white plate renders 68 -> 65.8.
   Footer: contacts + email/CTA move ahead of the main menu (owner call).
   Holes between blocks were 33.5 + 28 + 32.8 = 94px per seam. */
@media (max-width: 1023px) {
  .header { padding-top: 1.42rem; padding-bottom: 1.42rem; }
  .header .header__menu_btn { width: 6.75rem; height: 6.75rem; }
}

@media (max-width: 767px) {
  .footer .footer-contacts { order: 1 !important; }
  .footer .footer-info     { order: 2 !important; }
  .footer .footer-pages    { order: 3 !important; }
  .footer .footer-services { order: 4 !important; }

  .footer .footer-body { gap: 2.4rem; }
  .footer .footer-contacts,
  .footer .footer-pages,
  .footer .footer-services {
    padding-top: 2.4rem !important;
    padding-bottom: 0 !important;
  }
  .footer .footer-pages { border-top: 1px solid rgba(207, 209, 210, .15); }

  /* divider between phone and email removed, the one above the phone stays */
  .footer .footer-info { border-top: 0 !important; padding-top: 0 !important; margin-top: -1.2rem; }
  .footer .footer-contacts .footer-phone { margin-top: 1.6rem; padding-top: 1.6rem; }
}

/* == 17. Mobile: cases top padding, ad-case reveal ======================
   .cases padding-top was 0.2rem, so «Улюблені проєкти» sat flush against
   the block above it.
   .lp-kase declares transition: transform .25s for its hover lift, which
   overrode the opacity .6s coming from .fade-in — the card snapped from
   opacity 0 to 1 with no fade. Both transitions are listed together now. */
.lp-cases .lp-kase.fade-in { transition: opacity .6s ease-out, transform .25s; }

@media (max-width: 767px) {
  .cases { padding-top: 4.8rem; }
}

/* ==========================================================================
   Мобільні правки 10.09.2026. Джерело кожного правила - замір, не здогадка.
   ========================================================================== */

/* Шапку повернули на першому екрані: механізм lua-hdr-off видалено
   в inc/outcome-dark.php, тому глушити transform тут більше не треба. */

@media screen and (max-width: 1023px) {

	/* Telegram і WhatsApp у шапці прибрані - їх замінює плаваючий віджет.
	   На десктопі лишаються. */
	.header__msg--tg,
	.header__msg--wa { display: none !important; }

	/* Картки бандлів: жорсткі br розраховані на десктоп, на вузькому екрані
	   рвуть рядки посеред фрази. */
	.support-inner br { display: none; }

	/* Заголовок принципів: слово 'довгострокове' з'їдало цілий рядок. */
	.principles__title { font-size: 2.9rem; line-height: 1.18; }

	/* Футер, соцмережі. Іконка була position:absolute; left:-46px - на десктопі
	   вона висіла ліворуч від колонки, на мобільному колонка починається з x=24,
	   тому іконка йшла на x=-22 і обрізалася екраном.
	   Рішення власника 10.09: на мобільному лишаємо тільки іконки в один ряд. */
	.footer-nav--contacts {
		display: flex !important;
		flex-flow: row wrap;
		gap: 1.6rem;
	}
	.footer-nav--contacts > * { width: auto; }
	.footer-nav--contacts a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 4.4rem;
		height: 4.4rem;
		padding: 0;
	}
	.footer-nav--contacts a span,
	.footer-nav--contacts a i { display: none; }
	.footer-nav--contacts a img {
		position: static !important;
		left: auto !important;
		margin: 0 !important;
		width: 4.4rem;
		height: 4.4rem;
		flex: 0 0 auto;
	}

	/* Абзац перед контактами: було 4 рядки при 20.5px. */
	.footer-text--moved { font-size: 1.6rem; line-height: 1.4; }

	/* Телефон і пошта були 31px і 41px з різними відступами. Зводимо до
	   одного розміру, рівних полів і додаємо іконки. */
	.footer-phone,
	.footer-email {
		display: flex;
		align-items: center;
		gap: 1.2rem;
		font-size: 2.8rem;
		line-height: 1.2;
		margin: 0;
		padding: 1.4rem 0;
	}
	.footer-phone::before,
	.footer-email::before {
		content: '';
		flex: 0 0 auto;
		width: 2.4rem;
		height: 2.4rem;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.footer-email::before {
		-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4.6 7H19.4L12 12.2zM4 8.9V17h16V8.9l-8 5.6-8-5.6z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4.6 7H19.4L12 12.2zM4 8.9V17h16V8.9l-8 5.6-8-5.6z'/%3E%3C/svg%3E");
	}

	/* Кнопка: було 16px від пошти зверху і 42px порожнечі знизу. */
	.footer-info .footer-btn { margin-top: 2.4rem; }
	.footer-info { padding-bottom: 1.6rem; }
}

@media screen and (max-width: 1023px) {

	/* У пункті меню 'Маркетинг-команда' стоїть емодзі, WordPress перетворює його
	   на img.emoji, після якого лишається пробіл. Через це рядок починається
	   не там, де сусідні, і колонка посилань виглядає рваною. Ховаємо саме
	   картинку - пробіл після цього стає початковим і браузер його з'їдає. */
}

/* --- Відгуки Upwork: сторінка 'дихала' по висоті. Swiper має autoHeight,
       тобто вішає інлайновий height на .swiper-wrapper і переміряє його на
       кожному слайді. Тексти відгуків 3 / 6 / 9 рядків, тому картка була
       318 / 419 / 519 px і вся сторінка стрибала.
       Фіксуємо текст рівно на 6 рядках з трикрапкою - усі картки стають
       однакові, wrapper перестає змінювати висоту. LUA 10.09.2026 --- */
@media screen and (max-width: 1023px) {
	.reviews .swiper-wrapper { height: auto !important; }
	.reviews .reviews_item__text {
		line-height: 1.4;
		height: 8.4em;
		display: -webkit-box;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

@media screen and (max-width: 1023px) {

	/* Шапка: була 100px (16 + 68 + 16) і фон rgba(243,245,245,.9) - при такій
	   непрозорості блюр під нею не читався. Робимо 94px і справжнє скло. */
	.header { height: 8.9rem; }
	.header:not(.header--scroll_state) {
		background-color: rgba(255, 255, 255, .72);
		-webkit-backdrop-filter: blur(14px) saturate(140%);
		backdrop-filter: blur(14px) saturate(140%);
		border-bottom: 1px solid rgba(0, 0, 0, .06);
	}

	/* Повітря під шапкою. Компенсація дорівнювала точній висоті шапки,
	   тому заголовок упирався в неї. 12.2rem = 94px шапки + 28px повітря. */
	.hero,
	.internal_hero { padding-top: 12.2rem; }

	/* Політика і умови в один рядок. Заважав копірайт: у тому ж ряду він займав
	   262px, разом із посиланнями 584px при ширині 507, тому вони переносилися.
	   Віддаємо копірайту власний рядок - посилання 182 + 140 + 20 = 342px влазять. */
	.footer-bottom__right { flex-flow: row wrap; }
	.footer-bottom__right .footer-copy { flex: 0 0 100%; }
	.footer-bottom__right a { width: auto; }
}

/* ===== LUA mobile pass 8 — 2026-09-10 ===== */
@media screen and (max-width: 1023px) {
  /* 1 — «Усі» з нового рядка */
  .combo-title > span { display: block; }

  /* 2 — картки підтримки: відступ + тире перед ціною */
  .support-card__text { margin-top: 1.2rem; }
  .support-card__price::before { content: "— "; }

  /* 4 — соцмережі у футері: іконки не залежать від hover/JS */
  .footer-nav--contacts a img { opacity: 1 !important; }

  /* 5 — GEO/SEO опис: рівно два рядки */
  .footer-head__descr { font-size: 1.4rem; line-height: 1.45; }

  /* 6 — «Маркетинг-команда»: відступ як у сусідів */
  .footer .footer-services .footer-nav .f-top { margin-bottom: .8rem !important; }

  /* 8 — GMT+2 і time.is в один рядок із Kooperativ */
  .footer .footer-bottom .footer-bottom__left { column-gap: .8rem; row-gap: .8rem; }
  .footer .footer-bottom .footer-bottom__left .footer-sity img { width: 2.4rem; height: 2.4rem; }
  .footer-bottom__left > * { width: auto; flex: 0 0 auto; }

  /* 9 — liquid glass у шапці + компактніша кнопка меню */
  .header.js-header, .header.header--scroll_state {
    background-color: rgba(255, 255, 255, .58) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 .6rem 2rem rgba(0, 0, 0, .10);
  }
  .header__menu_btn.header_burger { box-sizing: border-box; width: 6.2rem; height: 6.2rem; }
  .header_burger__lines { width: 5.2rem; height: 5.2rem; }
}
@media screen and (max-width: 767px) {
  .footer-time img { display: none !important; }
}

/* FAQ: поява при скролі на мобільних (тема глушить fade-in нижче 1024px) */
@media screen and (max-width: 1023px) {
  .faq .lua-rv { opacity: 0; transform: translateY(2.4rem); transition: opacity .55s ease-out, transform .55s cubic-bezier(.22, 1, .36, 1); }
  .faq .lua-rv.lua-rv-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq .lua-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== LUA mobile pass 9 — 2026-09-10 ===== */
@media screen and (max-width: 1023px) {
  /* 1 — кнопка меню компактніша, з повітрям до краю шапки */
  .header__menu_btn.header_burger { box-sizing: border-box; width: 4.8rem; height: 4.8rem; transform: none !important; background: transparent !important; box-shadow: none !important; }
  .header .header_burger__lines { width: 4.6rem; height: 4.6rem; transform: none !important; }
  .header_burger__lines span,
  .header_burger__lines::before,
  .header_burger__lines::after { width: 2rem; height: .2rem; left: 1.3rem; }
  .header_burger__lines::before { top: 1.6rem; }
  .header_burger__lines span { top: 2.2rem; }
  .header_burger__lines::after { top: 2.8rem; }

  /* 2 — описові тексти під заголовками: 2rem -> 1.8rem */
  .hero__subtitle,
  .internal_hero__text,
  .internal_hero__suptitle,
  .specialization__top_descr,
  .specialization_item__text,
  .cases_descr,
  .cases_item__descr,
  .cases-text,
  .featured_case__descr,
  .case_hero_in__descr,
  .case_about__descr,
  .blog_hero__descr,
  .tools__descr,
  .services__descr,
  .services_item__descr,
  .purpose_item__text,
  .purpose__description_text,
  .principles__descr,
  .journal__descr,
  .faq__descr,
  .footer__contacts_descr,
  .footer-descr,
  .exp-text,
  .actual-text,
  .actual-item__text,
  .combo-text,
  .combo-uptitle,
  .combo-item__text,
  .support-text,
  .propos__text,
  .propos_form_descr,
  .create-text,
  .create-item__text,
  .internal-feature__text,
  .visual-feature__text,
  .visual-image-1__descr,
  .visual-image-2__descr,
  .package-text,
  .package-uptitle,
  .package-item__text,
  .package-item__subtitle,
  .package-item__feature-text,
  .help-text,
  .other-item__text,
  .other-description,
  .gallery-feature__text,
  .need-item__text,
  .need-text--v2,
  .need-item__text--v2,
  .result-text,
  .result-item__text,
  .result-feature__text,
  .process-text,
  .process-step__text,
  .process-cta__text,
  .testing-text,
  .testing-main__text--v2,
  .identity-text,
  .identity-item__text,
  .how-text,
  .how-item__text,
  .trouble-text,
  .trouble-inner__text,
  .get-item__text,
  .benefit-item__text,
  .outcome-item__text,
  .entire-text,
  .typical-text,
  .change-text,
  .integration-item__text,
  .geography__text,
  .thanks__text,
  .more__text,
  .brand-uptitle { font-size: 1.8rem; }

  /* 3 — «Компанія» і «З чого почати» у тому ж ритмі, що інші колонки футера */
  .footer .footer-pages .footer-nav > li { margin-bottom: .8rem !important; }
  .footer .footer-pages .footer-nav > li > a { line-height: 2.4rem; }

  /* 1b — контейнер шапки по центру: 93 = 22.5 + 48 + 22.5 */
  /* body перед .header — щоб перебити wp-custom-css (Додатковий CSS у Кастомайзері) */
  body .header { padding-top: 2.05rem; padding-bottom: 2.05rem; }
}

/* ===== LUA mobile pass 10 — 2026-09-10 ===== */
@media screen and (max-width: 1023px) {
  /* повітря між поштою, телефоном і кнопкою меню */
  .header__container { gap: 1.8rem; }

  /* емодзі одразу за текстом, а не біля правого краю колонки */
  .footer .footer-nav > li.menu-item-5918 > a,
  .footer .footer-nav > li.menu-item-2875 > a { justify-content: flex-start; gap: .4rem; }
}
@media screen and (max-width: 767px) {
  /* «Безкоштовна консультація» має влазити в один рядок */
  .footer .footer-pages .footer-nav { grid-template-columns: 34% 66%; column-gap: .6rem; }
}

/* ===== LUA mobile pass 11 — 2026-09-10 ===== */
@media screen and (max-width: 1023px) {
  /* фірмовий підпис під логотипом — як у лоадері */
  .header__logo_w { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .header__logo_w::after {
    content: "Digital для Нерухомості";
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .17rem; /* підпис = 174.95px при лого 175px */
    text-transform: uppercase;
    line-height: 1;
    color: rgba(0, 0, 0, .45);
    white-space: nowrap;
  }
}

/* ===== LUA mobile pass 12 — 2026-09-10 ===== */
@media screen and (max-width: 1023px) {
  /* «Контакти» -> телефон: без лінії-роздільника і без зайвого повітря */
  .footer .footer-contacts .footer-descr { margin-bottom: .4rem; }
  .footer .footer-contacts .footer-phone { border-top: 0 !important; margin-top: 0 !important; }

  /* телефон <-> пошта: відстань удвічі менша */
  .footer .footer-contacts .footer-phone,
  .footer .footer-contacts .footer-email { padding-top: .3rem !important; padding-bottom: .3rem !important; }
}

/* ===== LUA pass 14 — герой головної як на LP + стрічка логотипів ===== */
/* 1. Ліва колонка героя головної: біла картка на сірій секції, як на лендінгу аудиту */
.home .hero--v2 { background: var(--white-2, #f3f5f5); padding-bottom: 1.8rem; }
.home .hero__left--v2 {
  background: var(--white-1, #fff);
  border-radius: 3.2rem;
  padding: 3.2rem 6.4rem;   /* мінімальне повітря; решту дає justify-content: center у розтягнутій картці */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 1023px) {
  .home .hero__left--v2 { padding: 2.8rem 2.4rem; border-radius: 2.4rem; }
}

/* 2. Стрічка логотипів. Власні класи, щоб не перетинатися з .lp-marquee лендінгу */
.lua-marquee { overflow: hidden; margin-top: 5.6rem; padding-bottom: 4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lua-marquee__track { display: flex; align-items: center; gap: 8rem; padding-right: 8rem; width: max-content; will-change: transform;
  animation: luaMarquee 42s linear infinite; animation-play-state: paused; }
/* стартуємо тільки коли всі лого завантажені — інакше ширина треку змінюється на ходу і петля смикається */
.lua-marquee.is-ready .lua-marquee__track { animation-play-state: running; }
.lua-marquee.is-ready:hover .lua-marquee__track { animation-play-state: paused; }
.lua-marquee__item { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 4.8rem; }
.lua-marquee__item img { max-height: 100%; width: auto; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.lua-marquee__item:hover img { filter: grayscale(0); opacity: 1; }
@keyframes luaMarquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .lua-marquee__track { animation: none; } }
@media screen and (max-width: 767px) {
  .lua-marquee__track { gap: 4rem; padding-right: 4rem; animation-duration: 28s; }
  .lua-marquee__item { height: 3.6rem; }
}

/* ===== LUA pass 15 — стрічка логотипів у нижній край першого екрана (десктоп) ===== */
@media screen and (min-width: 1024px) {
  .home .hero--v2 {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-top: 11.2rem;   /* як на лендінгу */
    padding-bottom: 2.4rem;
  }
  body.admin-bar .home .hero--v2 { min-height: calc(100svh - 32px); }
  /* Висоту диктує відео (object-fit: cover), а не картка. Обмежуємо контейнер рівно тим,
     що лишається від першого екрана: 11.2 (padding-top) + 10 (стрічка) + 1.2 (padding-bottom) = 22.4rem.
     Відео підрізається кропом, картка лишається на своїй природній висоті. */
  /* Контейнер забирає ВСЮ вільну висоту першого екрана, картка розтягується під нього,
     а вміст центрується. Тому повітря в картці рахується само: (вільно - контент) / 2.
     Так і на низькому вікні нічого не ламається, і на високому картка дихає. */
  /* Канон лендінгу аудиту: колонки 80rem, як .internal_hero__left--white.
     11.2 (padding-top) + 80 (колонки) + 5.6 (відступ) + 4.8 (лого) + 4 (padding-bottom стрічки)
     + 2.4 (padding-bottom секції) = 108rem = 850.5px при 1512. Екран 861 -> 10.5px повітря знизу. */
  .home .hero__container--v2 { flex: 0 0 auto; height: 80rem; }
  /* flex-елементи мають min-height:auto і не стискаються нижче контенту відео.
     min-height:0 + stretch змушують колонку взяти рівно висоту контейнера. */
  .home .hero__container--v2 > * { min-height: 0; align-self: stretch; }
  /* права колонка має власну height: 90rem — перебиваємо, щоб узяла висоту контейнера */
  .home .hero__container--v2 > .internal_hero__right { height: 100%; }
  /* margin-top:auto притискає стрічку донизу, коли є запас висоти; */
  /* padding-top тримає мінімальний відступ, коли запасу немає */
  /* margin-top фіксований, а не auto: інакше стрічку притисне до самого низу і повітря зникне */
  .home .lua-marquee { margin-top: 5.6rem; padding-top: 0; padding-bottom: 4rem; }
}

/* ===== LUA pass 16 — канон першого екрана на сервісних сторінках ===== */
/* Клас lua-hero-canon вішає PHP (lua_hero_canon_page) на головну і сторінки зі списку. */
@media screen and (min-width: 1024px) {
  .lua-hero-canon .internal_hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    /* перебиваємо модифікатори теми --pt18 і --pb11 */
    padding-top: 11.2rem !important;
    padding-bottom: 2.4rem !important;
  }
  body.admin-bar.lua-hero-canon .internal_hero { min-height: calc(100svh - 32px); }

  .lua-hero-canon .internal_hero > .internal_container { flex: 0 0 auto; height: 80rem; }
  .lua-hero-canon .internal_hero > .internal_container > * { min-height: 0; align-self: stretch; }
  .lua-hero-canon .internal_hero__right { height: 100%; }

  .lua-hero-canon .internal_hero .lua-marquee { margin-top: 5.6rem; padding-top: 0; padding-bottom: 4rem; }
}


/* ===== LUA pass 17 — /marketyngova-komanda/: бейджі Google/Meta в ряду CTA ===== */
/* Друга кнопка «Дізнатись більше» прибрана, бейджі переносяться всередину
   .internal_hero__btns скриптом lua_komanda_partners_row().
   Мета — той самий DOM, що вже стоїть на /real-estate-marketing/,
   тому власних стилів для бейджів не треба: працює тема. */
.page-id-2832 .internal_hero__btns .internal_hero__btn--white { display: none; }

/* ===== LUA pass 18 — блок «Маркетинг-команда під ключ» ===== */
/* Акценти в списку: перша частина рядка жирна, решта приглушена. */
.fractional__list-item span { color: rgba(0, 0, 0, .62); }
.fractional__list-item span strong { font-weight: 600; color: #000; }
/* Виноска про 2 задачі в роботі. */
.fractional__offer-text small { display: inline-block; margin-top: .8rem; font-size: 1.3rem; color: rgba(0, 0, 0, .45); }
/* Логотипи сервісів під кнопкою. */
.fractional__stack {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.6rem 1.8rem;
  margin-top: 2.4rem; padding-top: 2.4rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
  list-style: none;
}
.fractional__stack-item { display: flex; align-items: center; }
/* Flatris, Binotel і Clarity є в бібліотеці лише як SVG з растровою
   підкладкою всередині — grayscale перетворює їх на плашки.
   mix-blend-mode: multiply з'їдає білі підкладки на світлій картці,
   темна плашка Binotel лишається темною — це його власний брендинг. */
.fractional__stack-item img {
  display: block; height: 2rem; width: auto;
  mix-blend-mode: multiply;
  opacity: .78;
  transition: opacity .25s ease;
}
.fractional__stack-item img[alt="Google Analytics"] { height: 1.8rem; }
/* Квадратні іконки оптично більші за вордмарки — тримаємо їх нижчими. */
.fractional__stack-item img[alt="Google Ads"],
.fractional__stack-item img[alt="Facebook"],
.fractional__stack-item img[alt="Instagram"] { height: 1.7rem; }
.fractional__stack-item img[alt="Binotel"] { opacity: .62; }
.fractional__stack-item img:hover { opacity: 1; }
@media screen and (max-width: 1023px) {
  .fractional__stack { gap: 1.6rem 2rem; margin-top: 2rem; padding-top: 2rem; }
  .fractional__stack-item img { height: 2rem; }
}

/* ===== LUA pass 19 — слайдер ретейнерів (вмикається при >3 картках) ===== */
/* Без Swiper: нативний scroll-snap + дві стрілки. Свайп на мобільному
   працює з коробки, залежностей нема, версія Swiper ні на що не впливає. */
.retainers--slider .retainers__grid {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .4rem;
}
.retainers--slider .retainers__grid::-webkit-scrollbar { display: none; }
.retainers--slider .retainers__grid > * {
  flex: 0 0 calc((100% - 3.2rem) / 3);
  scroll-snap-align: start;
}
.retainers__nav {
  display: flex; justify-content: flex-end; gap: 1.2rem;
  margin-top: 2.4rem;
}
.retainers__arrow {
  width: 4.8rem; height: 4.8rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid rgba(0,0,0,.14); border-radius: 50%;
  background: transparent; color: #000; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.retainers__arrow svg { width: 2rem; height: 2rem; display: block; }
.retainers__arrow:hover:not(:disabled) { background: #000; border-color: #000; color: #fff; }
.retainers__arrow:disabled { opacity: .28; cursor: default; }
@media screen and (max-width: 1023px) {
  /* На мобільному тільки свайп — стрілки зайві. */
  .retainers__nav { display: none; }
  .retainers--slider .retainers__grid { gap: 1.2rem; }
  .retainers--slider .retainers__grid > * { flex: 0 0 86%; }
}

/* ===== LUA pass 20 — пак «що входить у ціну» в бандлах ===== */
/* Замінив блок відгуку: він дублював цитати з ретейнерів на тій самій
   сторінці й не закривав головне питання — чи входить рекламний бюджет. */
.bundles__pack-title {
  font-size: 1.4rem; font-weight: 600; color: rgba(0,0,0,.55);
  margin-bottom: 1.6rem;
}
.bundles__pack-list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem; list-style: none; margin: 0; padding: 0;
}
.bundles__pack-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .6rem; padding: 1.2rem .8rem;
  border: 1px solid rgba(0,0,0,.08); border-radius: 1.6rem;
  background: rgba(255,255,255,.5);
}
.bundles__pack-ico { font-size: 2.2rem; line-height: 1; }
.bundles__pack-ico img.emoji { width: 1em !important; height: 1em !important; margin: 0 !important; }
/* Дворядковий підпис («Рекламний бюджет») не має зсувати позначку вниз. */
.bundles__pack-label {
  font-size: 1.3rem; line-height: 1.3; color: #000;
  display: flex; align-items: center; justify-content: center;
  min-height: 3.4rem;
}
.bundles__pack-mark { font-size: 1.4rem; line-height: 1; }
.bundles__pack-mark img.emoji { width: 1em !important; height: 1em !important; margin: 0 !important; }
.bundles__pack-item--out { opacity: .55; }
.bundles__pack .bundles__review-pay { margin-top: 1.6rem; }
@media screen and (max-width: 1023px) {
  .bundles__pack-list { grid-template-columns: repeat(2, 1fr); }
}

/* ===== LUA pass 21 — стрілки слайдера переїхали в заголовок ===== */
/* Під сіткою вони губилися. Тепер праворуч від заголовка секції,
   чорна заливка як у CTA-кнопок сайту, між ними лічильник. */
.retainers--slider .retainers__head { position: relative; padding-right: 19rem; }
.retainers__nav--head {
  position: absolute; right: 0; bottom: .4rem;
  margin-top: 0; align-items: center; gap: 1.2rem;
}
.retainers__arrow {
  background: #000; border-color: #000; color: #fff;
  box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .18);
}
.retainers__arrow:hover:not(:disabled) { background: #f43563; border-color: #f43563; color: #fff; }
.retainers__arrow:disabled { opacity: .22; box-shadow: none; }
.retainers__count {
  font-size: 1.5rem; line-height: 1; color: rgba(0, 0, 0, .5);
  min-width: 4.4rem; text-align: center; white-space: nowrap;
}
.retainers__count b { color: #000; font-weight: 600; }
.retainers__count i { font-style: normal; }
@media screen and (max-width: 1023px) {
  .retainers--slider .retainers__head { padding-right: 0; }
}

/* ===== LUA pass 22 — зірочки .decor у заголовках ===== */
/* Було top: -3rem — фіксований підйом у пікселях. h1 на різних сторінках
   різного кегля, тому зсув гуляв від -7 до -19 px. Прив'язуємо до тексту. */
.internal_hero__title .decor,
.section_title .decor,
h1 .decor, h2 .decor {
  top: 0;
  vertical-align: middle;
}

/* ===== LUA_MOBILE_SCALE_START — мобільний масштаб, усі сторінки сайту =====
   Клас body.lua-m ставиться у inc/lp-mobile-anim.php.
   Базовий rem на телефоні = 100vw/50.3 (плаваючий), тому всі значення в rem
   і тягнуться пропорційно від 320 до 575px. Числа в коментарях — для 390px.
   Видалення: вирізати блок цілком між маркерами START/END. */
@media (max-width: 1023px) {

  /* --- типографіка ---
     Без прив’язки до <main>: на /quiz/ його немає взагалі,
     а header і footer у цій темі не містять жодного h1-h3 чи <p>. */
  body.lua-m h1,
  body.lua-m .internal_hero__title { font-size: 3.35rem !important; line-height: 1.18 !important; }
  body.lua-m h2 { font-size: 2.55rem !important; line-height: 1.28 !important; }
  body.lua-m h3 { font-size: 2.2rem !important; line-height: 1.32 !important; }
  body.lua-m p,
  body.lua-m .internal_hero__text,
  body.lua-m .exp-text,
  body.lua-m .testing-text,
  body.lua-m .identity-item__text,
  body.lua-m .how-text,
  body.lua-m .brand-text,
  body.lua-m .other-item__text { font-size: max(13.5px, 1.87rem) !important; line-height: 1.5 !important; }

  /* --- кнопки: висоту диктував фіксований height, не паддінги --- */
  body.lua-m .btn { border-radius: 16px !important; justify-content: center !important;
    gap: 1.2rem !important; padding-left: 2.2rem !important; padding-right: 2.2rem !important;
    height: auto !important; min-height: max(48px, 6.2rem) !important; }
  body.lua-m .btn i { width: 4.4rem !important; height: 4.4rem !important; padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; }
  body.lua-m .btn i .icon { width: 1.8rem !important; height: 1.8rem !important; }
  body.lua-m .btn .desc-btn-text { font-size: 1.75rem !important; }

  /* standalone-кнопки тягнуться по контенту, а не на всю смугу */
  body.lua-m .cases_btn,
  body.lua-m .help-remain__btn,
  body.lua-m .other-item__btn,
  body.lua-m .footer-btn { width: auto !important; max-width: 100% !important; margin-right: auto !important; }

  /* hero: дві кнопки в один ряд, стрілки прибрані — інакше текст ламається.
     Контейнери з бейджами партнерів не чіпаємо: там кнопка одна і ряд її розчавлює. */
  body.lua-m .internal_hero__btns:not(:has(.hero__partners)) { flex-direction: row !important; flex-wrap: nowrap !important; gap: 1.2rem !important; }
  body.lua-m .internal_hero__btns:not(:has(.hero__partners)) .btn { flex: 1 1 0 !important; min-width: 0 !important;
    padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
  body.lua-m .internal_hero__btns:not(:has(.hero__partners)) .btn i { display: none !important; }
  body.lua-m .internal_hero__btns:not(:has(.hero__partners)) .btn .desc-btn-text { font-size: 1.6rem !important; }

  /* CTA прайс-картки — на всю ширину, без іконки, текст по центру */
  body.lua-m .price-card__btn { width: 100% !important; min-height: max(52px, 6.7rem) !important; }
  body.lua-m .price-card__btn i { display: none !important; }

  /* «Показати більше» — текстове посилання, а не друга кнопка */
  body.lua-m .price-card__more { background: none !important; border: 0 !important; box-shadow: none !important;
    width: auto !important; height: auto !important; min-height: 0 !important; border-radius: 0 !important;
    margin: 1.8rem auto 0 !important; padding: .6rem 0 !important; align-self: center !important;
    color: rgba(0, 0, 0, .55) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

  /* --- вертикальні відступи секцій (нульові залишаємо нульовими) ---
     hero padding-top не чіпаємо: під ним фіксований хедер 69px */
  body.lua-m .internal_hero { padding-bottom: 3rem !important; }
  body.lua-m .exp       { padding-top: 3.1rem !important; padding-bottom: 4.65rem !important; }
  body.lua-m .testing   { padding-top: 4.65rem !important; }
  body.lua-m .identity  { padding-top: 4.65rem !important; padding-bottom: 2.3rem !important; }
  body.lua-m .cases     { padding-top: 3.1rem !important; padding-bottom: 4.4rem !important; }
  body.lua-m .retainers { padding-top: 4.9rem !important; padding-bottom: 4.9rem !important; }
  body.lua-m .brand     { padding-bottom: 4.65rem !important; }
  body.lua-m .support   { padding-bottom: 4.65rem !important; }
  body.lua-m .how       { padding-top: 4.9rem !important; }
  body.lua-m .help      { padding-top: 3.6rem !important; padding-bottom: 3.9rem !important; }

  /* --- акцентні розміри всередині секцій --- */
  body.lua-m .testing-main__title { font-size: 3.08rem !important; line-height: 1.2 !important; }
  body.lua-m .cases_item__title   { font-size: 2.7rem !important; line-height: 1.25 !important; }
  body.lua-m .exp-stats__item b   { font-size: 2.5rem !important; }
  body.lua-m .how-item__num       { font-size: 2.31rem !important; }
  body.lua-m .footer-email,
  body.lua-m .footer-phone        { font-size: 2.24rem !important; }
  body.lua-m .price-card__per     { font-size: 1.99rem !important; }
  body.lua-m .help-question,
  body.lua-m .help-question summary,
  body.lua-m summary              { font-size: 1.99rem !important; line-height: 1.35 !important; }

  /* --- дрібний текст зводимо до єдиних 14.5px --- */
  body.lua-m .price-card__subtitle,
  body.lua-m .price-card__list li,
  body.lua-m .retainers__head-text,
  body.lua-m .testing-item__name,
  body.lua-m .help-answer,
  body.lua-m .help-answer > div,
  body.lua-m .help-answer p,
  body.lua-m .help-remain__text   { font-size: 1.86rem !important; line-height: 1.5 !important; }
  body.lua-m .footer-descr        { font-size: 1.73rem !important; }
  body.lua-m .price-card__list li { color: rgba(0, 0, 0, .82) !important; }

  /* --- внутрішні відступи та радіуси карток --- */
  body.lua-m .identity-item { padding: 3.1rem !important; border-radius: 3rem !important; }
  body.lua-m .how-item      { padding: 2.3rem !important; border-radius: 3rem !important; }
  body.lua-m .help-remain   { padding: 3.1rem 2.3rem !important; border-radius: 3rem !important; }
  body.lua-m .cases_item    { padding-top: 5.65rem !important; padding-bottom: 3.6rem !important; }

  /* «Landing.ua закриває весь цикл…» врівень з «Ми будуємо…» (на десктопі обидва 15px) */
  body.lua-m .exp-stats__title { font-size: 1.87rem !important; line-height: 1.5 !important; }

  /* заголовки, що не влазили в рядок буквально на кілька пікселів */
  body.lua-m .cases_title h2,
  body.lua-m .retainers__title h2,
  body.lua-m .retainers__title { font-size: 2.45rem !important; }

  /* на головній .cases_title — сам текст, а не обгортка */
  body.lua-m .cases_title { font-size: 2.55rem !important; line-height: 1.28 !important; }

  /* темні картки на телефоні зводимо до світлих */
  body.lua-m .price-card--dark .price-card__top,
  body.lua-m .price-card--dark .price-card__bottom { background: #fff !important; }
  body.lua-m .price-card--dark .price-card__name { background: rgb(243, 245, 245) !important; color: #000 !important; border-color: #000 !important; }
  body.lua-m .price-card--dark .price-card__price,
  body.lua-m .price-card--dark .price-card__per,
  body.lua-m .price-card--dark .price-card__subtitle { color: #000 !important; }
  body.lua-m .price-card--dark .price-card__desc { color: rgb(111, 119, 128) !important; }

  /* --- універсальний слайдер (розмітку ставить inc/lp-mobile-anim.php) --- */
  body.lua-m .lua-slider { display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 1.6rem !important; scrollbar-width: none; }
  body.lua-m .lua-slider::-webkit-scrollbar { display: none; }
  body.lua-m .lua-slider > * { flex: 0 0 86% !important; scroll-snap-align: start; }
  body.lua-m .lua-slider .identity-card-reveal,
  body.lua-m .lua-slider .specialization-card-reveal { opacity: 1 !important; transform: none !important; }
  /* Навігація стоїть окремим рядком над заголовком, праворуч.
     З float заголовок обтікав стрілки і рвався на короткі куски. */
  body.lua-m .lua-slider-nav { display: flex !important; float: none; align-items: center; gap: 1rem;
    width: -moz-fit-content; width: fit-content; margin: 0 0 1.2rem auto; }

  /* рядки заголовків вирівнюються по довжині, без висячих слів */
  body.lua-m h2,
  body.lua-m .trouble-title,
  body.lua-m .trouble-inner__title,
  body.lua-m .actual-title { text-wrap: balance; }

  /* жорсткі <br> у заголовках розставлені під десктоп — на телефоні вони рвуть рядок */
  body.lua-m h1 br,
  body.lua-m h2 br,
  body.lua-m h3 br { display: none; }
  body.lua-m .lua-slider-arrow { width: 3.6rem; height: 3.6rem; display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 50%; background: #000; color: #fff; font-size: 1.9rem; line-height: 1;
    cursor: pointer; box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .18); transition: background .2s ease; }
  body.lua-m .lua-slider-arrow:hover:not(:disabled) { background: #f43563; }
  body.lua-m .lua-slider-arrow:disabled { opacity: .22; box-shadow: none; }
  body.lua-m .lua-slider-count { font-size: 1.5rem; color: rgba(0, 0, 0, .5); min-width: 4.2rem; text-align: center; }

  /* головна: «Актуальні послуги,» окремим рядком */
  body.lua-m .actual-title span { display: block; }

  /* «Весь візуал для реклами» — на телефоні блок надто розтягнутий */
  body.lua-m .entire { display: none !important; }

  /* галерея креативів: доріжка ширша за екран і зсунута вліво — вирівнюємо по вікну */
  body.lua-m .sample-list { width: 100vw !important; max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; }

  /* ряд логотипів під блоком експертизи — по центру */
  body.lua-m .exp-tools { justify-content: center !important; }

  /* ===== пас 5 ===== */

  /* Анімації появи на телефоні вимкнені: блок має з’являтися цілком.
     Через них же порожнів блок «Етапи роботи» — .fade-in не отримував .visible. */
  body.lua-m .fade-in:not(.sample-track),
  body.lua-m [class*="-reveal"]:not(.sample-track),
  body.lua-m .identity-anim { opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important; }

  /* статистика знову 2×2 — правило загубилось при перебиранні блоку */
  body.lua-m .exp-stats__item { grid-column: auto !important; font-size: 1.7rem !important; line-height: 1.35 !important; }
  body.lua-m .exp-stats__list { gap: 2.4rem 2rem !important; }

  /* третя картка підтримки — <div> замість <a>, тому display:flex,
     а .support-card__row з display:contents робить спани флекс-елементами
     і блокіфікує їх — ціна падала на власний рядок. Робимо рядок справжнім флексом. */
  body.lua-m .support-card__row { display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }

  /* кейси стоять на темному тлі — чорні стрілки там не видно */
  body.lua-m .lp-cases .lua-slider-arrow { background: #fff !important; color: #000 !important;
    box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .35) !important; }
  body.lua-m .lp-cases .lua-slider-arrow:hover:not(:disabled) { background: #f43563 !important; color: #fff !important; }
  body.lua-m .lp-cases .lua-slider-count { color: rgba(255, 255, 255, .7) !important; }

  /* ховер на телефоні тільки заважає */
  body.lua-m .lua-slider > *:hover { transform: none !important; }

  /* пари «проблема → рішення»: список збирає компонент, оригінальні списки ховаємо */
  body.lua-m .lua-paired .trouble-list { display: none !important; }
  body.lua-m .lua-pairs { margin-top: 1.6rem; }
  /* грид-елемент за замовчуванням має min-width:auto — трек слайдера розпирав колонку */
  body.lua-m .lua-paired,
  body.lua-m .lua-paired .trouble-inner { min-width: 0 !important; }
  body.lua-m .lua-paired .trouble-inner > * { min-width: 0; max-width: 100%; }
  /* пари гортаються по одній, зліва направо */
  body.lua-m .lua-pairs.lua-slider { flex-direction: row !important; gap: 1.2rem !important; }
  body.lua-m .lua-pairs.lua-slider > * { flex: 0 0 100% !important; }
  body.lua-m .lua-pair { background: #fff; border-radius: 2.4rem; padding: 1.8rem;
    box-shadow: 0 .2rem 1.2rem rgba(0, 0, 0, .05); }
  body.lua-m .lua-pair .trouble-item { border-radius: 0 !important; }
  body.lua-m .lua-pair .trouble-item { padding: 0 !important; margin: 0 !important; background: none !important; }
  body.lua-m .lua-pair .trouble-item + .trouble-item { margin-top: .8rem !important; padding-top: .8rem !important;
    border-top: 1px solid rgba(0, 0, 0, .1); }
  body.lua-m .lua-pair .trouble-item { align-items: flex-start !important; min-height: 0 !important; }
  body.lua-m .lua-pair .trouble-item__info { min-height: 0 !important; }
  body.lua-m .lua-paired .trouble-inner { padding-top: 2.2rem !important; padding-bottom: 2.2rem !important; }

  /* ===== пас 6 ===== */

  /* біжучий рядок креативів: анімація має жити (пас 5 вимикав її разом із .fade-in) */
  body.lua-m .sample-track { opacity: 1 !important; animation-play-state: running !important; }

  /* відступ заголовка «Візуальні рішення...» від блоку вище (.entire прихований на мобілці) */
  body.lua-m .sample { padding-top: 5.2rem !important; }

  /* липкий :hover після тапу на картках */
  body.lua-m .need-item:hover,
  body.lua-m .need-item:active,
  body.lua-m .create-item:hover,
  body.lua-m .create-item:active { background-color: #f3f5f5 !important; }
  body.lua-m .need-item:hover .need-item__icon,
  body.lua-m .create-item:hover .create-item__icon { background-color: #000 !important; }
  body.lua-m .need-item:hover .need-item__icon img,
  body.lua-m .create-item:hover .create-item__icon img { filter: none !important; }
  body.lua-m .need-item:hover .need-item__title,
  body.lua-m .create-item:hover .create-item__title { color: #000 !important; }
  body.lua-m .need-item:hover .need-item__text,
  body.lua-m .create-item:hover .create-item__text { color: rgb(111, 119, 128) !important; }

  /* опис у картках цін — дрібніше, щоб влазив */
  body.lua-m .price-card__desc { font-size: max(12.5px, 1.78rem) !important; line-height: 1.45 !important; }

  /* картка цін розгорнута одразу: «Показати більше» не потрібна, коли блок став слайдером.
     Тема ховає li:nth-child(n+5) і показує їх лише через .is-expanded — знімаємо обидва кроки. */
  body.lua-m .price-card__top .price-card__list li { display: list-item !important; }
  body.lua-m .price-card__more,
  body.lua-m .price-card__less { display: none !important; }

  /* ===== пас 7 ===== */

  /* грубий <br> з десктопної верстки рве абзац на телефоні */
  body.lua-m .fractional__text br { display: none !important; }

  /* «Розробка сайтів»: третій лого-значок переносився в окремий ряд і ламав картку */
  body.lua-m .actual-item__tools .actual-item__tool:nth-child(n+3) { display: none !important; }

  /* ===== пас 8 — знайдено аудитом решти сторінок ===== */

  /* мікро-лейбли лендінга «Розбір об'єкта»: 1.2–1.4rem = 9.4–10.9px на 390.
     clamp, а не max: інакше на 575px (rem 11.4) лейбл роздувся б до 16px. */
  body.lua-m .lp-type__eyebrow,
  body.lua-m .lp-type__label,
  body.lua-m .lp-sheet__k,
  body.lua-m .lp-chip,
  body.lua-m .lp-snum,
  body.lua-m .lp-branch__sub,
  body.lua-m .lp-stages__time,
  body.lua-m .lp-kase__ch { font-size: clamp(11px, 1.45rem, 13px) !important; }

  /* дрібна копія 1.49–1.6rem = 11.7–12.5px на 390 */
  body.lua-m .testing-item__text,
  body.lua-m .testing-info,
  body.lua-m .trouble-item__text,
  body.lua-m .gallery-advantage__text,
  body.lua-m .smm-item__text,
  body.lua-m .actual-item__feature { font-size: clamp(12.8px, 1.72rem, 15px) !important; line-height: 1.45 !important; }
}

/* стрілки слайдера існують лише на мобілці */
body.lua-m .lua-slider-nav { display: none; }

/* ===== LUA_MOBILE_SCALE_END ===== */

/* ===== LUA_DESKTOP_1024_START — читабельність у смузі 1024–1439px =====
   Тема масштабує rem = 0.5209vw (100vw/192): макет розрахований на 1920.
   На 1024 rem = 5.33px і копія падає до 6.7–10.7px.
   Базу rem НЕ чіпаємо. Замір при html{font-size:6.8px} на 1024:
   .internal_hero__right-content вилазить за вікно (r1126), .stages-in
   починає різати вміст (1024<1216), кількість переповнень 41→126.
   Тому піднімаємо ЛИШЕ кегль тексту через max(): геометрія не рухається,
   а щойно rem доростає до порога — правило само перестає діяти.
   Класи згруповані за рідним кеглем, щоб max() ніде не зменшив текст.
   Без !important — точковіші правила теми лишаються головними.
   Видалення: вирізати блок цілком між маркерами START/END. */
@media (min-width: 1024px) and (max-width: 1439px) {

  /* --- рідний кегль 2rem → 10.7px на 1024 --- */
  .internal_hero__text,
  .exp-text,
  .exp-stats__title,
  .exp-stats__title strong,
  .testing-text,
  .testing-item__text,
  .identity-text,
  .cases_descr,
  .retainers__head-text,
  .price-card__subtitle,
  .brand-text,
  .support-card__price,
  .faq__answer span,
  .faq__descr,
  .journal__descr,
  .journal_item__excerpt,
  .principles__btn span,
  .principles__descr,
  .specialization__top_descr,
  .other-description,
  .fractional__list-title,
  .fractional__offer-title,
  .lp-kase__n,
  .smm__addons-title,
  .smm__text,
  .entire-slide__text,
  .need-text,
  .sample-text,
  .show-text { font-size: max(14px, 2rem); }

  /* --- рідний кегль 1.8rem → 9.6px на 1024 --- */
  .internal_hero__suptitle,
  .desc-btn-text,
  .btn span,
  .cases_btn span,
  .actual-item__btn span,
  .actual-item__text,
  .exp-image__btn span,
  .hero__connect_btn span,
  .hero__uptitle,
  .combo-item__text,
  .combo-text,
  .combo-uptitle,
  .testing-info,
  .identity-item__text,
  .cases_item__descr,
  .price-card__desc,
  .price-card__list li,
  .brand-uptitle,
  .how-text,
  .how-item__text,
  .help-text,
  .help-answer,
  .help-answer div,
  .help-remain__text,
  .need-item__text,
  .create-item__text,
  .principles_item__author strong,
  .principles_item__head p,
  .propos__feature_text,
  .purpose__description_text,
  .purpose_item__text,
  .specialization__tabs_btn,
  .specialization__tabs_btn_label,
  .fractional__label,
  .fractional__list-item strong,
  .fractional__pay-text,
  .lp-shead__text,
  .smm__addons-label,
  .trouble-inner__text,
  .trouble-text,
  .trouble-more__btn span,
  .entire-slide__list li,
  .entire-text,
  .show-item__text { font-size: max(13px, 1.8rem); }

  /* --- рідний кегль 1.6rem → 8.5px на 1024 --- */
  .actual-item__feature,
  .cases_item__tags li,
  .exp-stats__item span,
  .journal_item__bottom,
  .reviews__stats span,
  .reviews_platform__top_rated_text,
  .specialization_item__list b,
  .specialization_item__list span,
  .specialization_item__subtitle,
  .specialization_item__text,
  .other-item__text,
  .stages-item__list li,
  .trouble-item__text,
  .trouble-more__text,
  .lp-kase__r b,
  .wpcf7-list-item-label a { font-size: max(12px, 1.6rem); }

  /* --- рідний кегль 1.4–1.55rem → 7.5–8.3px на 1024 --- */
  .principles_item__author span,
  .fractional__price-note,
  .lp-kase__g { font-size: max(11px, 1.4rem); }
  .lp-kase__r span,
  .stages-item__time { font-size: max(11px, 1.5rem); }

  /* --- рідний кегль 1.25–1.3rem → 6.7–7px на 1024 --- */
  .fractional__offer-text small,
  .lp-kase__ch,
  .lp-kase__cpl-v small { font-size: max(10.5px, 1.3rem); }

  /* тут виграє точковіше правило теми (.lp-shead .lp-shead__text) — потрібен !important */
  .lp-shead__text { font-size: max(13px, 1.8rem) !important; }
}
/* ===== LUA_DESKTOP_1024_END ===== */