/* Site-wide edge gutter, 20px (originally 16px, matching Koto) instead of
   the theme's default 40px. The theme's own mobile breakpoints don't use a
   literal 16px though — they read one shared custom property,
   --mobile-padding (defined 16px in the theme's own :root), across 100+
   rules. Redefining it here — custom.css loads after the theme stylesheet,
   so this wins the cascade — repoints every one of those rules at once
   instead of chasing them individually. */
:root {
  --mobile-padding: 20px;
}

/* .menu-2-copy/.menu-2-copy-copy (the fixed header bar) and .contact (the
   shared footer symbol) are reused with identical markup on every page
   across the whole site, so this one unscoped rule is what actually rolls
   the gutter out everywhere at once on desktop — page-specific content
   sections below still need their own rule per page/template, since those
   class names aren't shared. */
.menu-2-copy,
.menu-2-copy-copy,
.contact {
  padding-left: 20px;
  padding-right: 20px;
}

/* Cases page: same 16px gutter for its own hero/grid sections, which aren't
   shared with any other page. Scoped to body.body-5, the Webflow-generated
   class unique to cases.html. */
body.body-5 .div-block-63,
body.body-5 .cases-block {
  padding-left: 20px;
  padding-right: 20px;
}

/* Koto's "Our values" section: header, intro text and the 3 cards fill
   close to one screen. .menu-2-copy (the header) is position:fixed and
   doesn't take up document flow space, so margin-top here is really the
   only thing separating this section from the very top of the page —
   pushed down from the shared stylesheet's default 100px to 160px so the
   whole section (intro text + cards) sits lower on the page. min-height's
   subtracted constant trims 126px off the cards' own height (70px + a
   further 56px — the cards row fills whatever's left of min-height after
   the intro text, via .slider-container-5's flex: 1 below) without
   touching margin-top, so the section's top position is unaffected — only
   the cards get shorter. The existing justify-content: space-between
   (from the shared .mega-cases rule) then naturally pushes the intro text
   to the top and the cards row to the bottom of that space, matching the
   reference layout with no extra markup needed. */
body.body-5 .mega-cases {
  margin-top: 160px;
  min-height: calc(100vh - 226px);
}

/* Breathing room after that first full-screen section, so the tag
   sidebar/cases grid doesn't start flush against the bottom edge of the
   viewport the moment you scroll past it. */
body.body-5 .cases-block {
  margin-top: 100px;
}

/* .div-block-53 sits directly inside .contact and carries its own,
   redundant copy of the same edge padding — zero it out instead of
   matching it, otherwise the footer content would sit inset by both
   (32px) instead of lining up with the 16px edge everywhere else. */
body.body-5 .div-block-53 {
  padding-left: 0;
  padding-right: 0;
}

/* Intro text above the mega-cases row (koto-style): one flowing sentence
   that wraps across ~2 lines, bold/white lead-in followed by a lighter
   gray continuation, instead of the old "big 96px heading + separate small
   16px paragraph in its own 172px-gapped column" layout. Both parts share
   one font-size/line-height and sit in the same <h1> as inline <span>s (not
   as an <h1> + a separate <p>) specifically so the color change can fall
   wherever the text naturally wraps, matching the reference — two stacked
   block-level elements would each wrap independently instead of forming
   one continuous paragraph. */
body.body-5 .div-block-63 {
  display: block;
  margin-bottom: 40px;
}

body.body-5 .heading-11.mega-cases-intro {
  width: auto;
  max-width: 900px;
  font-size: 40px;
  font-weight: 400;
  line-height: 100%;
}

body.body-5 .mega-cases-intro-light {
  color: var(--color--gray--500);
}

/* "Мега кейси" row: this used to be a Webflow slider widget showing 3 fixed
   540px-wide cards (the .w-slider/.w-slide/arrow/nav markup has been
   removed from cases.html entirely, so Webflow's slider JS never
   initializes on it here) — the fixed pixel widths meant the whole row
   topped out at ~540px regardless of viewport and never grew past that, no
   matter how wide the window was. Replaced with a plain 3-column flex row
   that fills the full page width (minus the site's 16px edge gutter), so
   all three mega-cases sit side by side at full size with no slider/arrows
   needed to see any of them. */
/* flex: 1 (plus min-height: 0, needed for a flex child to be allowed to
   shrink/grow below its content's natural size) makes this row GROW to
   fill whatever's left of .mega-cases's one-screen height after the intro
   text — instead of staying a fixed height and leaving
   .mega-cases's own justify-content: space-between to stretch a big gap
   between the text and the row to reach the bottom of the screen. That
   was pushing the two apart on any viewport taller than the old fixed
   358px card height; growing the row itself to fill the remainder keeps
   the text sitting right above the cards with just .mega-cases's normal
   32px gap, and the cards fill the rest of the screen at whatever height
   that leaves. align-items: stretch (overriding the shared rule's
   `center`) is what actually lets that filled height reach all the way
   down through the wrapper chain into each card. */
/* The chain from here down to each card's image is several layers of
   legacy single-child Webflow wrapper divs (slider-container-5 >
   slider-wrapper-2-copy-2 > mega-cases-track > mega-cases-mask > each
   item > slide-content-wrapper-3 > slide-content-wrapper-5 > image div).
   Percentage heights (height: 100%) turned out unreliable across that
   many levels — a flex item sized purely by flex-grow (no explicit
   height) doesn't reliably count as a "definite height" for a percentage
   child to resolve against, so several of the height: 100%s silently
   collapsed to the content's natural (tiny) size instead of actually
   filling the row. Making every wrapper `display: flex` instead lets each
   level's height propagate via ordinary flex stretch (align-items,
   default "stretch") — no percentages involved, so nothing to fail to
   resolve. flex: 1 + min-height: 0 only needs to appear on the two
   elements actually GROWING along a main axis: this row within
   .mega-cases's column, and the image div within its own card's column. */
body.body-5 .slider-container-5 {
  width: 100%;
  padding: 0 16px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

body.body-5 .slider-wrapper-2-copy-2 {
  width: 100%;
  height: auto;
  gap: 8px;
  align-items: stretch;
}

body.body-5 .mega-cases-track {
  width: 100%;
  display: flex;
}

/* same 8px gap as between cards in the .grid-2 cases grid below, for a
   consistent rhythm between the two card rows on this page. No
   flex-wrap/justify-content here (unlike an earlier version): the 3 items
   are flex: 1 below, so they always divide the row into equal thirds and
   never need to wrap or be spread apart — a fixed pixel width was what
   caused them to wrap onto 2 lines on an ordinary 1440px screen (3 ×
   478px + gaps > the available width), which broke the height-fill below
   (a wrapped multi-line flex row only stretches items to each LINE's own
   height, not the full row). */
body.body-5 .mega-cases-mask {
  width: 100%;
  display: flex;
  gap: 8px;
}

/* flex: 1 1 0 (equal thirds, ignoring content's natural width) so each
   card fills a third of the row; height comes from the mask's default
   align-items: stretch, not set explicitly here. */
body.body-5 .mega-cases-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

body.body-5 .slide-content-wrapper-3 {
  width: 100%;
  align-items: stretch;
  /* This <a> is the actual clipping box for the mega-cases card (overflow:
     clip) — the shared stylesheet's own 16px here is what was still making
     these corners visibly rounder than the 8px standard used everywhere
     else (cases grid, homepage client cards), even though the badge/photo
     div inside (.prom/.masterzoo/.div-block-104-copy-5) is clipped by this
     box regardless of its own radius. */
  border-radius: 8px;
}

body.body-5 .prom,
body.body-5 .masterzoo,
body.body-5 .div-block-104-copy-5 {
  border-radius: 8px;
}

body.body-5 .slide-content-wrapper-5 {
  width: 100%;
}

/* the image div and the caption (.div-block-937) are the two stacked
   children of .slide-content-wrapper-5 (a flex column) — flex: 1 on the
   image lets IT absorb all the height the row grew into, while the
   caption text below keeps its own natural height instead of also being
   stretched. display:flex (plus alignment/gap/padding) also replaces the
   old baked-in award badge PNGs (effie prom.png etc, flat images that
   couldn't be restyled) with real HTML badges below — laid out as normal
   flex children here (not absolutely positioned like the grid cards'
   award badges) since a card can carry more than one (Prom has both
   Effie 2024 and Effie 2025), which would collide if stacked on top of
   each other in one corner. */
body.body-5 .prom,
body.body-5 .masterzoo,
body.body-5 .div-block-104-copy-5 {
  flex: 1;
  min-height: 0;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
}

/* Same glass look as the grid cards' award badges (.cases-tabs
   .div-block-775 further down) — background/blur/border/corners/column
   layout duplicated here rather than shared, since these sit in normal
   flex flow (not absolutely positioned bottom-right) so more than one can
   sit side by side without overlapping. */
body.body-5 .mega-cases .div-block-775 {
  position: static;
  flex: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  gap: 4px;
  padding: 10px;
  background-color: rgba(20, 20, 20, 0.45);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 6px;
  border: none;
}


/* Cases page: vertical filter sidebar (left) instead of the default horizontal tab bar.
   Scoped to .cases-tabs so it never touches the shared .tabs/.tab-link component used elsewhere. */

.cases-tabs.tabs.w-tabs {
  flex-flow: row;
  align-items: flex-start;
}

.cases-tabs .tabs-menu.w-tab-menu {
  flex-flow: column;
  align-items: flex-start;
  grid-column-gap: 4px;
  grid-row-gap: 6px;
  position: sticky;
  top: 140px;
  flex: 0 0 300px;
  width: 300px;
  padding-bottom: 0;
}

.cases-tabs .w-tab-content {
  flex: 1;
  min-width: 0;
  margin-left: 56px;
}

.cases-tabs .grid-2 {
  grid-template-columns: 1fr 1fr;
}

.cases-tabs .cs-sidebar-title {
  color: var(--color--white);
  font-family: Taktikasans, sans-serif;
  font-size: 28px;
  line-height: 100%;
  margin-bottom: 12px;
}

.cases-tabs .tab-link {
  background-color: transparent;
  border: none;
  border-radius: 0;
  align-self: stretch;
  width: 100%;
  text-align: left;
  padding: 8px 0 8px 14px;
  position: relative;
}

/* .tabs-menu is a flex column with the 5 tag links, then all 5 (mostly
   hidden) descriptions, in that DOM order — Webflow ships them grouped that
   way rather than interleaved. Explicit flex `order` values here let the
   currently active tag's description visually slot in right underneath
   that one tag instead of sitting after the whole tag list: each link gets
   a base order 10 apart, and the :has() rule below gives the active
   description an order 5 higher than its own tag's — enough to land it
   right after that tag but still before the next one. */
.cases-tabs .tab-link[data-w-tab="Всі кейси"] {
  order: 10;
}
.cases-tabs .tab-link[data-w-tab="Дизайн"] {
  order: 20;
}
.cases-tabs .tab-link[data-w-tab="Сайт"] {
  order: 30;
}
.cases-tabs .tab-link[data-w-tab="Стратегія"] {
  order: 40;
}
.cases-tabs .tab-link[data-w-tab="Реклама"] {
  order: 50;
}

.cases-tabs .tab-link .text-block-12 {
  color: var(--color--gray--500);
  transition: color 0.2s ease;
  /* the shared .text-block-12 class centers its own text by default — the
     tab-link box around it is already flush left, but that default made
     the tag label itself look centered inside the row instead of sitting
     at the left edge with everything else in the sidebar. */
  text-align: left;
}

.cases-tabs .tab-link:hover .text-block-12 {
  color: var(--color--white);
}

.cases-tabs .tab-link.w--current {
  background-color: transparent;
}

.cases-tabs .tab-link.w--current .text-block-12 {
  color: var(--color--white);
}

/* small dot next to the currently selected tag */
.cases-tabs .tab-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color--white);
  transition: transform 0.15s ease;
}

.cases-tabs .tab-link.w--current::before {
  transform: translateY(-50%) scale(1);
}

/* one-line blurb describing whichever category is currently selected —
   only the description matching the active tag is shown, and (via the
   per-tag `order` rules below) it's slotted right after that tag rather
   than after the whole tag list. */
.cases-tabs .cs-sidebar-desc {
  display: none;
  color: var(--color--gray--500);
  font-family: Taktikasans, sans-serif;
  font-size: 13px;
  line-height: 140%;
  /* .tabs-menu's row-gap (6px, shared with the space between tags) already
     adds space above this — a negative margin here claws most of that back
     so the description sits close under its own tag without touching the
     gap between tags itself. */
  margin-top: -4px;
  margin-bottom: 8px;
  padding-left: 14px;
}

.cases-tabs .tabs-menu:has(a[data-w-tab="Всі кейси"].w--current) .cs-sidebar-desc[data-desc="Всі кейси"],
.cases-tabs .tabs-menu:has(a[data-w-tab="Дизайн"].w--current) .cs-sidebar-desc[data-desc="Дизайн"],
.cases-tabs .tabs-menu:has(a[data-w-tab="Сайт"].w--current) .cs-sidebar-desc[data-desc="Сайт"],
.cases-tabs .tabs-menu:has(a[data-w-tab="Стратегія"].w--current) .cs-sidebar-desc[data-desc="Стратегія"],
.cases-tabs .tabs-menu:has(a[data-w-tab="Реклама"].w--current) .cs-sidebar-desc[data-desc="Реклама"] {
  display: block;
}

.cases-tabs .tabs-menu:has(a[data-w-tab="Всі кейси"].w--current) .cs-sidebar-desc[data-desc="Всі кейси"] {
  order: 15;
}
.cases-tabs .tabs-menu:has(a[data-w-tab="Дизайн"].w--current) .cs-sidebar-desc[data-desc="Дизайн"] {
  order: 25;
}
.cases-tabs .tabs-menu:has(a[data-w-tab="Сайт"].w--current) .cs-sidebar-desc[data-desc="Сайт"] {
  order: 35;
}
.cases-tabs .tabs-menu:has(a[data-w-tab="Стратегія"].w--current) .cs-sidebar-desc[data-desc="Стратегія"] {
  order: 45;
}
.cases-tabs .tabs-menu:has(a[data-w-tab="Реклама"].w--current) .cs-sidebar-desc[data-desc="Реклама"] {
  order: 55;
}

@media screen and (max-width: 767px) {
  .cases-tabs.tabs.w-tabs {
    flex-flow: column;
  }

  .cases-tabs .tabs-menu.w-tab-menu {
    flex-flow: row;
    flex-wrap: wrap;
    position: static;
    flex: none;
    width: 100%;
  }

  .cases-tabs .w-tab-content {
    margin-left: 0;
  }

  .cases-tabs .tab-link {
    width: auto;
    padding: 6px 0;
    margin-right: 16px;
  }
}

/* The fixed top nav bar (.menu-2-copy) spans the full page width/height as
   a position:fixed strip, but its background is fully transparent — only
   the logo and the nav links inside it are actually visible. Because the
   strip itself still has pointer-events:auto, it silently swallows hover
   on any card that scrolls up underneath it, even though nothing is drawn
   there. Let clicks/hover pass through the empty parts, keep them working
   on the logo/links themselves. */
body:has(.cases-tabs) .menu-2-copy {
  pointer-events: none;
}

body:has(.cases-tabs) .menu-2-copy > * {
  pointer-events: auto;
}

/* Case cards: Koto-style masonry. Each card has its own fixed aspect ratio
   (varied per position, like Koto's mixed tall/short tiles), covers are
   packed with a tight gap, and on hover the cover shrinks upward to reveal
   the name + description underneath — no gradient, no shadow, just the
   card's own background showing through. Structure is untouched; every
   variant (.case-card, .case-card-prom-school, .case-card-inzur, etc.) is
   matched generically as "an <a> that contains a .text-case block". */

/* CSS column-count masonry turned out to be the real cause of the "right
   column doesn't hover" bug: Chrome renders each CSS-column as its own
   fragmentation box, and hover/pointer handling for content placed in the
   second+ column can silently break, independent of anything else on the
   card. cases.js splits each .grid-2's children into two explicit flex
   columns instead (each just a normal, fully independent container), which
   sidesteps that whole class of bug. This is just the flex scaffold; column
   widths/gap live here, ordering/aspect-ratio assignment is JS-driven. */
.cases-tabs .grid-2 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cases-tabs .grid-2-col {
  /* a flex item of .grid-2 (the row), sharing width equally with its
     sibling column — but plain display:block for its OWN children: they
     just need to stack top-to-bottom, which block flow already does with
     zero extra help. Making this display:flex too (as an earlier version
     did) turned every card inside it into a flex item, and aspect-ratio on
     a flex-column item only reliably resolves for the first child in
     Chrome — every other card's width/height measurement came out
     unreliable depending on exactly when the browser settled the flex
     layout, which is what caused entire columns to render empty. Plain
     block children with aspect-ratio have no such issue. */
  flex: 1;
  min-width: 0;
  display: block;
}

/* Most cards are a plain <a class="case-card">, but a good number of them
   were duplicated in Webflow as <div class="case-card-xxx"><a
   class="link-block">...</a></div> — a wrapper div with its own unique,
   one-off class holding the actual link. Both shapes are real, roughly
   evenly mixed .grid-2 children, so the masonry sizing (position, gap,
   rounding) has to be driven by the direct child, whichever tag it is —
   not by the inner <a>. Aspect ratio itself is assigned inline by
   cases.js (based on each card's original position before the column
   split), not by nth-child — nth-child would count position *within*
   each new column instead of the original sequence once cases.js splits
   the cards into .grid-2-col wrappers. ".grid-2 >" covers mobile, where
   cases.js leaves the cards flat (a single column needs no split);
   ".grid-2-col >" covers desktop once the split has run. */
.cases-tabs .grid-2 > *:not(.grid-2-col),
.cases-tabs .grid-2-col > * {
  /* several of the per-instance Webflow wrapper classes (case-card-viyar,
     case-card-prom-x-rozetka, etc.) ship their own display:flex; flex:1;
     height:100%; max-height:100% — meant for their original parent, which
     had a definite height. Inside our auto-height .grid-2-col that turns
     into a circular 0-height flex item, so all of that gets reset back to
     plain block sizing here before anything else applies. 700px also caps
     how tall the tallest ratio (3/4, portrait) is allowed to get on wide
     columns — object-fit: cover on the image inside just crops a bit more
     instead of the card towering over its neighbors. */
  display: block;
  flex: 0 0 auto;
  height: auto;
  max-height: 700px;
  position: relative;
  /* varied per-card ratio assigned inline by cases.js (based on each
     card's original position before the column split — nth-child would
     count position *within* the new column instead). Now that these are
     plain block children of a block .grid-2-col (not flex items), a plain
     aspect-ratio + width just works, no JS-measured pixel height needed. */
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0 0 8px;
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

/* Koto-style hover: while the pointer is anywhere over the grid, every card
   OTHER than the one actually under the pointer dims, so the hovered one
   visually pops against the rest. `.grid-2:hover` fires from a hover
   anywhere inside it — the pointer being over a card bubbles :hover up
   through that card, its .grid-2-col column, and the grid itself — so this
   naturally reacts to a hover in EITHER column, not just one; and
   `:not(:hover)` on each card excludes only the one actually being pointed
   at (that :hover match bubbles up from whatever's under the cursor, so it
   still matches a plain <a> card or a wrapper-div card the same way). The
   ":not(.grid-2-col)" branch covers mobile, where cases.js leaves cards
   flat instead of splitting them into columns. */
.cases-tabs .grid-2:hover > .grid-2-col > *:not(:hover),
.cases-tabs .grid-2:hover > *:not(.grid-2-col):not(:hover) {
  opacity: 0.5;
}

.cases-tabs .grid-2 > div:not(.grid-2-col) > a,
.cases-tabs .grid-2-col > div > a {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cases-tabs .grid-2 a {
  display: block;
  height: auto;
  /* for a plain <a class="case-card"> this <a> IS the sized box, so it needs
     the same 700px cap as the box rule above — a plain "none" here has
     higher specificity (class + type selector) than that rule's
     "class + universal" and was silently winning, letting these cards grow
     past 700px again. For an <a> nested in a wrapper-div card this is a
     harmless no-op: that <a> is absolutely positioned at height:100% of an
     already-capped parent, so it can never exceed 700px either way. */
  max-height: 700px;
}

.cases-tabs .grid-2 a > div:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* the outer <a> now owns the rounded corners + clip, so the inner image
     wrapper stays square — otherwise its own border-radius shows through
     as a stray rounded notch partway down the card while it's shrinking */
  border-radius: 0;
  transition: height 167ms linear;
}

/* .image-12 (used by the duplicated combo cards) isn't absolutely
   positioned/cover-fitted like .image-12-copy is by default, so on its own
   it wouldn't fill the taller aspect-ratio box above — force the same
   fill behavior on whichever image class ends up in that first child. */
.cases-tabs .grid-2 a > div:first-child > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* driven by the outer box's :hover (not the inner <a>'s) so that hovering
   ANY part of the card — including badges/overlays that sit outside or on
   top of the <a> — reliably triggers the reveal across the full card, not
   just the portion where the <a> happens to be the topmost hit target.
   Written as two explicit branches (plain <a> card vs <a> nested in a
   wrapper div) rather than a "box:hover ... a" descendant selector: for a
   plain card the <a> IS the hovered box itself, so a selector that goes
   looking for some *further* descendant <a> inside it can never match —
   there's nothing to find (this was the "Viber card's hover doesn't
   work" bug: it's a plain <a class="case-card">, not a wrapper-div combo
   card, so it never matched the old single combined selector). */
.cases-tabs .grid-2 > a:hover > div:first-child,
.cases-tabs .grid-2 > div:not(.grid-2-col):hover > a > div:first-child,
.cases-tabs .grid-2-col > a:hover > div:first-child,
.cases-tabs .grid-2-col > div:hover > a > div:first-child {
  height: calc(100% - 28px);
}

/* the original Webflow theme had these image classes zoom in on hover
   (transform: scale(1.05)) — that old zoom was still firing underneath our
   own height-shrink animation, fighting the clip-path and causing the
   rounded corners to visibly break mid-transition. Kill it here. */
.cases-tabs .image-12:hover,
.cases-tabs .image-12-copy:hover,
.cases-tabs .image-12-copy-copy:hover,
.cases-tabs .grid-2 > a:hover .image-12,
.cases-tabs .grid-2 > a:hover .image-12-copy,
.cases-tabs .grid-2 > a:hover .image-12-copy-copy,
.cases-tabs .grid-2 > div:not(.grid-2-col):hover .image-12,
.cases-tabs .grid-2 > div:not(.grid-2-col):hover .image-12-copy,
.cases-tabs .grid-2 > div:not(.grid-2-col):hover .image-12-copy-copy,
.cases-tabs .grid-2-col > a:hover .image-12,
.cases-tabs .grid-2-col > a:hover .image-12-copy,
.cases-tabs .grid-2-col > a:hover .image-12-copy-copy,
.cases-tabs .grid-2-col > div:hover .image-12,
.cases-tabs .grid-2-col > div:hover .image-12-copy,
.cases-tabs .grid-2-col > div:hover .image-12-copy-copy {
  transform: none;
}

.cases-tabs .text-case {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  z-index: 1;
  padding: 8px 0 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  opacity: 0;
  /* reveal the caption only after the cover has finished shrinking, same
     stagger Koto uses: shrink first, then fade the text in on top of it */
  transition: opacity 167ms linear 167ms;
  pointer-events: none;
}

.cases-tabs .grid-2 > a:hover .text-case,
.cases-tabs .grid-2 > div:not(.grid-2-col):hover .text-case,
.cases-tabs .grid-2-col > a:hover .text-case,
.cases-tabs .grid-2-col > div:hover .text-case {
  opacity: 1;
}

.cases-tabs .heading-15 {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
}

.cases-tabs .text-case {
  min-width: 0;
}

.cases-tabs .text-block-6 {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

/* descriptions were authored with a hard <br> assuming a 2-line caption —
   drop it so nowrap+ellipsis above can actually keep them on one line */
.cases-tabs .text-block-6 br {
  display: none;
}

/* Category tags overlaid on each case card (replacing the old "Новий
   проєкт" ribbon badge, removed from the HTML). Positioned top-left like
   that badge and the award ribbons (Red Dot/Effie) already were — inset:0
   on the outer box (set above) makes it the positioning parent regardless
   of which card shape this is (plain <a class="case-card"> vs a wrapper
   <div> around the real <a>), so this same top:12/left:12 lands correctly
   overlaid on the image either way. flex-wrap lets a card with 2-3 tags
   (a case can be filed under several tabs at once) wrap onto a second
   line instead of overflowing the card width. */
.cases-tabs .case-card-tags {
  z-index: 3;
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}

/* small glass/blur rectangle, per the reference — a translucent dark
   background plus backdrop-filter blur (not just a flat dark fill) is
   what gives it that "frosted glass" look rather than a plain solid
   badge. */
.cases-tabs .case-card-tag {
  background-color: rgba(20, 20, 20, 0.45);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: none;
  border-radius: 6px;
  color: var(--color--white);
  font-family: Taktikasans, sans-serif;
  font-size: 11px;
  line-height: 140%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  white-space: nowrap;
}

/* Award ribbons (Red Dot/Effie, .div-block-775) moved from their shared-CSS
   default of top-left to bottom-right — that's also where the "See
   website" glass CTA used to sit before being replaced by the ribbon
   itself here, so the category tags above can stay at a plain top:12px
   on every card now (no more top-left collision to dodge, no more need
   for a taller offset on ribboned cards). Restyled to match the same
   glass look as .case-card-tag (translucent + blur) instead of the
   shared stylesheet's solid black, fully-round (border-radius: 50px)
   pill — square corners read as part of the same tag family instead of
   a separate pill shape. Stacked into a column (icon above, name below)
   instead of side-by-side, and sized down to content, so the shape reads
   as a small square badge rather than a wide horizontal pill — the icon
   (.image-519) already carries `order: -1` from the shared stylesheet
   (originally just to visually lead a row despite sitting second in the
   HTML), which also puts it first/top in a column layout for free. The
   award icon and text themselves are untouched, only this container's
   background/border/corners/layout change. */
.cases-tabs .div-block-775 {
  top: auto;
  left: auto;
  bottom: 12px;
  right: 12px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  gap: 4px;
  padding: 10px;
  background-color: rgba(20, 20, 20, 0.45);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 6px;
  border: none;
}

@media screen and (max-width: 767px) {
  .cases-tabs .grid-2 {
    flex-direction: column;
  }

  .cases-tabs .grid-2 a {
    aspect-ratio: auto !important;
  }

  .cases-tabs .grid-2 a > div:first-child {
    position: relative;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .cases-tabs .grid-2 a > div:first-child > img {
    position: static;
    width: 100%;
    height: 100%;
  }

  .cases-tabs .text-case {
    position: static;
    height: auto;
    opacity: 1;
    padding: 8px 0 0;
    pointer-events: auto;
  }
}

/* Homepage "Клієнти" logo wall — near-black cards, muted/grayscale logos,
   instead of the original dark-gray cards with full-color logos. Scoped to
   body.body-3 (index.html's Webflow body class, the only page using
   .clients) so this never touches any other page that might reuse these
   generic Webflow class names with different content. Gap (8px) and corner
   radius (8px) match the site-wide values established on the cases page
   grid — the start of one shared spacing/radius standard instead of each
   page's own Webflow defaults (this grid's original gap was 20px, its
   cards' radius 16px). Five columns (instead of the original four) on
   desktop only — the 3/2-column tablet/mobile breakpoints below 992px
   already come from the shared stylesheet and are left as-is. */
body.body-3 .grid {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

@media screen and (min-width: 992px) {
  body.body-3 .grid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: none;
  }
}

/* height comes from aspect-ratio instead of the shared stylesheet's fixed
   per-breakpoint row pixel heights, so the card keeps the same proportions
   at any column count (6 on desktop, 3 on tablet, 2 on mobile) instead of
   getting oddly tall/narrow as columns narrow the card width.
   background-color is !important because Webflow's own hover interaction
   (IX2) sets this same property as an inline style on mouseenter/mouseleave
   — inline styles normally beat a plain class rule, so without !important
   the card would render our #0d0d0d correctly until the first hover, then
   get stuck on the interaction's hard-coded "mouse-out" color (the
   original, pre-redesign #232121) forever after. */
body.body-3 .div-block-48 {
  background-color: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  height: auto;
  aspect-ratio: 3 / 2;
}

/* On hover, override that same !important with the brand accent instead —
   :hover's higher specificity wins over the plain class rule above, so this
   still needs !important itself to also beat Webflow's own (now-neutralized)
   inline style. The hover-reveal text panel (.div-block-51) is untouched
   Webflow markup/behavior — it was already toggling visibility on hover,
   just unreadable (dark text) against the card's default near-black
   background; it reads fine now against this lighter accent color, as
   originally designed. */
body.body-3 .div-block-48:hover {
  background-color: #7c86ff !important;
}

/* grayscale + dimmed so every logo (regardless of its own brand color)
   reads as a flat, muted mark, brightening back to full color on hover as a
   subtle interactive cue. The "2021-2026 / 3 проєкти" line underneath keeps
   its shared-stylesheet layout as-is (space-between, pinned to the bottom
   of the card by the logo wrapper's flex: 1 above it) — just restyled to
   fit the darker card. */
body.body-3 .image-4 {
  max-width: 70%;
  filter: grayscale(1) brightness(1.7);
  opacity: 0.75;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

body.body-3 .div-block-48:hover .image-4 {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* Homepage edge gutter, 20px — matches the header/footer pattern used
   site-wide (cases.html etc.) and every other page on the site (body.body-3
   is index.html's own body class; this only ever touches the homepage, but
   the value itself matches everywhere else too, by request — 32px was
   tried and reverted). The header, each top-level content section, and the
   footer all carry their own copy of this padding rather than one shared
   wrapper, so every one of them needs its own rule here. .div-block-67 sits
   directly inside .contact and duplicates the same padding a second time
   (same bug as .div-block-53 on cases.html), so it's zeroed instead of
   matched, otherwise the footer content would sit inset by 40px total
   instead of lining up with the 20px edge everywhere else. .about only
   carries padding on its left (the right side already bleeds to the edge
   by design), so only that side is set.

   .services/.contact go through the same rule, but their actual heading
   text still landed 36px further in than .about's or .news-main's —
   traced to .card-services/.card-contact both independently centering a
   1400px max-width content box inside the already-padded section, which
   only shows up as extra space once the viewport is wide enough that
   1400px doesn't fill the available width (most real desktop windows). No
   other section on this page uses a max-width cap, so instead of matching
   that cap everywhere, .card-services/.card-contact drop it here and just
   fill the section's own available width like every other block does —
   .clients had the opposite problem (zero gutter of its own, 100vw
   full-bleed in the base theme; its heading's baked-in 40px padding-left
   only approximated a gutter, and didn't match this page's real one), so
   it gets the section-level padding added and that now-redundant heading
   padding zeroed out. */
body.body-3 .div-block-1173,
body.body-3 .section-101,
body.body-3 .services,
body.body-3 .contact,
body.body-3 .clients {
  padding-left: 20px;
  padding-right: 20px;
}

/* .grid (the clients-logos grid) used to carry this same 20px itself, back
   when .clients (its parent section) had none of its own — now that
   .clients carries it directly, same as every other section, leaving
   .grid in the list above would double it up (40px instead of 20px),
   which is exactly why the logo grid sat further in than the "Клієнти"
   heading right above it. */
body.body-3 .grid {
  padding-left: 0;
  padding-right: 0;
}

body.body-3 .about {
  padding-left: 20px;
}

body.body-3 .div-block-67 {
  padding-left: 0;
  padding-right: 0;
}

body.body-3 .card-services,
body.body-3 .card-contact,
body.body-3 .contact-footer,
body.body-5 .card-contact,
body.body-8 .card-contact,
body.body-8 .contact-footer,
body.body-5 .contact-footer {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

body.body-3 .heading-2 {
  padding-left: 0;
}

body.body-3 .div-block-44,
body.body-3 .contact-rows,
body.body-5 .contact-rows,
body.body-8 .contact-rows {
  max-width: none;
}

/* Hero "orbit the symbol" 3D scene, now a self-hosted Three.js canvas
   (assets/3d/symbol.glb, js/symbol3d.js) instead of the old Spline embed —
   .spline-scene-3 itself keeps its original Webflow sizing/breakpoints
   (700px square, cursor: grab), only the canvas inside needs to be told to
   fill that box, which the old <canvas> (sized internally by Spline's own
   runtime) never needed. */
body.body-3 .symbol-3d-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Header nav, koto.com-style: smaller nav-link text relative to the logo
   (reference showed nav text noticeably smaller/lighter than the wordmark,
   not the near-equal size the theme originally set them at — 18px links
   next to a 149px-wide logo). Unscoped (no body.bodyClass prefix): .case,
   .link-10, .link-10-copy-copy, .link-11, .link-4 and .image-97/.image-97-copy
   are this exact top-nav's own dedicated classes, reused with identical
   markup and content across every page's header, so one rule here keeps
   every page's header in sync instead of repeating it per page. Only sizes
   change; link text, case, weight and colors are untouched. */
.case,
.link-10,
.link-10-copy-copy,
.link-11,
.link-4 {
  font-size: 14px;
}

/* .image-97-copy is the visible desktop logo on every page EXCEPT
   index.html (which reuses the same source image under plain .image-97
   instead) — the two classes were sized differently by the shared
   stylesheet (130px vs ~156px), which is what made the header visibly
   "jump" in logo size when navigating from the homepage to any other page.
   Both need the same width for the header to read as one consistent
   component site-wide. */
.image-97,
.image-97-copy {
  width: 130px;
}

/* Same koto.com reference: nav links sit close to the logo on the left,
   not pushed to the far right edge by the theme's original space-between.
   .menu-2-copy (cases/about/services/vacancies/blog...) and
   .menu-2-copy-copy (index.html only) are the two header-bar classes across
   the site — both get the same treatment so every page's header matches. */
.menu-2-copy,
.menu-2-copy-copy {
  justify-content: flex-start;
}

.div-block-189 {
  margin-left: 64px;
}

/* Header scrim: the theme's original version confined both the darkening
   and the blur to exactly the header's own 70px box, which cuts off dead
   flat right at that line — visible as a hard seam over busy content like
   the showreel video. Moving both effects into a taller ::after (130px,
   past the 70px bar) and fading them out with mask-image instead of
   just background-image lets the BLUR itself taper off along with the
   darkness, so it reads as one soft gradient instead of a blurred box
   sitting on top of a sharp one. z-index: -1 keeps it behind the logo/nav
   links (which stay perfectly crisp, unblurred) while still being behind
   the header bar's own fixed positioning context, not the page content. */
.menu-2-copy,
.menu-2-copy-copy {
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.menu-2-copy::after,
.menu-2-copy-copy::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.45) 35%,
    rgba(0, 0, 0, 0.18) 65%,
    rgba(0, 0, 0, 0) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
}

/* City-clock header widget (koto.com reference: the small "12:58 UTC+2 ::"
   trigger top-right that opens a city-picker panel). Reuses the same glass
   look as the cases-page tag/award badges (dark translucent + blur +
   hairline border) for one consistent "chip" style site-wide. margin-left:
   auto pushes it to the header's right edge inside the now flex-start
   (logo+nav-left) row, filling the space that opened up after the nav was
   moved next to the logo. */
/* position: fixed + a body-level position in the DOM (a sibling of
   .menu-2-copy-copy, not a child of it) instead of a flex item inside the
   header: the header itself is its own stacking context (z-index: 20), so
   a child's z-index can never out-rank .city-panel (z-index: 30) no matter
   how high it's set — it'd stay trapped under the open panel and unable to
   receive the second click that closes it again. Living outside that
   stacking context lets z-index: 31 actually win. */
.city-clock-trigger {
  box-sizing: border-box;
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 31;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: Taktikasans, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 10px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.city-clock-trigger:hover,
.city-clock-trigger.is-active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.18);
}

/* Dark variant, toggled by city-clock.js only while the chip is actually
   sitting over something light (a white page section) — see the JS
   comment for why this can't just be a permanent dark background. */
.city-clock-trigger.on-light {
  background-color: rgba(20, 20, 20, 0.75);
}
.city-clock-trigger.on-light:hover {
  background-color: rgba(20, 20, 20, 0.85);
}

/* Hidden (not removed — it still needs to keep ticking in the background)
   while the panel is open, since it would otherwise sit right on top of
   the tabs row at the same top/right position. The dots at the end of the
   tabs row (.city-panel-close-dots) take over as the visible "4 dots"
   control until the panel closes again. */
.city-clock-trigger.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.city-clock-time {
  font-variant-numeric: tabular-nums;
}

.city-clock-tz {
  color: rgba(255, 255, 255, 0.45);
}

.city-clock-dots {
  display: grid;
  grid-template-columns: repeat(2, 3px);
  grid-template-rows: repeat(2, 3px);
  gap: 3px;
}

.city-clock-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
}

/* Backdrop: dims + blurs the whole page behind the panel, click-to-close.
   Hidden by default (opacity 0 + pointer-events none), faded in via a class
   toggle rather than display:none so the opacity transition can run. */
.city-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 29;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.city-panel-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* No outer card/backing here on purpose — koto's own panel has none either:
   the tab pill and each grid tile carry their own background, and they
   just float directly over the full-page dimmed/blurred backdrop
   (.city-panel-backdrop) instead of sitting inside one big enclosing card. */
.city-panel {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 30;
  width: 660px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.city-panel.is-open {
  pointer-events: auto;
}

/* koto's own panel doesn't fade/slide in as one block — each tile animates
   in on its own (confirmed by inspecting their live site: separate
   transition-delay values of 0/67/133/217ms per element), which is what
   reads as the content "emerging from the right" rather than the whole
   panel just sliding over. Same idea here: every tile starts translated
   right + blurred + transparent, and each gets its own (slightly
   increasing) delay on the way in; closing has no delay on any of them, so
   it stays snappy instead of feeling laggy. */
.city-panel-tabs,
.city-panel-hero,
.city-panel-bento-frame,
.city-panel-hello,
.city-panel-news {
  opacity: 0;
  transform: translateX(28px);
  filter: blur(6px);
  transition: opacity 0.35s cubic-bezier(0.15, 0, 0.3, 1), transform 0.45s cubic-bezier(0.15, 0, 0.3, 1),
    filter 0.35s cubic-bezier(0.15, 0, 0.3, 1);
}

.city-panel.is-open .city-panel-tabs {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: 0ms;
}

.city-panel.is-open .city-panel-hero {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: 70ms;
}

.city-panel.is-open .city-panel-bento-frame {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: 110ms;
}

.city-panel.is-open .city-panel-hello {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: 90ms;
}

.city-panel.is-open .city-panel-news {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: 160ms;
}

.city-panel-tabs {
  align-self: flex-end;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background-color: #000;
  border-radius: 10px;
}

.city-tab {
  font-family: Taktikasans, sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: none;
  border: none;
  padding: 5px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.city-tab:hover {
  color: rgba(255, 255, 255, 0.85);
}

.city-tab.is-active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Same 4-dot icon as the header trigger, now living at the right end of the
   tabs row itself (koto's own pill has a small icon in that exact spot) —
   clicking it closes the panel, same as clicking the header trigger again.
   The floating header trigger hides itself while the panel is open (see
   .city-clock-trigger.is-hidden in city-clock.js) so this is the one "4
   dots" control visible at a time, instead of two overlapping ones. */
.city-panel-close-dots {
  margin-left: auto;
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  grid-template-columns: repeat(2, 3px);
  grid-template-rows: repeat(2, 3px);
  gap: 3px;
  place-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.city-panel-close-dots:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.city-panel-close-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
}

/* Bento grid body (koto.com reference): two columns, each its own stack of
   tiles. No fabricated team/office photos here (we don't have real ones to
   show) — the "hero" tile uses an honest brand treatment (gradient + city
   name) instead of pretending to be a candid photo, and the small mark tile
   reuses the actual 3D-symbol texture asset. The news tile reuses the same
   3 real posts already on the homepage "Новини" section, not invented
   content. */
/* Column proportions measured directly off koto.com's own panel (its two
   columns are NOT equal width — 276px/376px, fixed) — gaps between tiles
   use 8px instead of koto's own 16px, matching the same card-gap standard
   used on the cases page grid rather than koto's spacing exactly. */
.city-panel-grid {
  display: flex;
  gap: 8px;
}

.city-panel-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.city-panel-col:first-child {
  flex: 0 0 276px;
}

.city-panel-col:last-child {
  flex: 0 0 376px;
}

/* All bento tiles share one glass treatment — same dark translucent color +
   blur + hairline border as the tab pill above them — instead of each tile
   having its own flat tint. .city-panel-hello/.city-panel-news (right
   column) keep that dark-glass look; the left column's weather/date/sun/
   clock cluster below intentionally breaks from it with saturated flat
   colors (iOS-widget style, per reference) instead. */
.city-panel-hello,
.city-panel-news {
  background-color: #000;
}

/* Now-playing tile: an Apple Music embed (Apple's own official <iframe>
   widget, not a locally hosted cover image) — the artwork, audio preview
   and playback controls all come straight from Apple's servers, so this
   never involves rehosting any label-owned artwork or audio ourselves. */
.city-panel-hero {
  position: relative;
  height: 150px;
  padding: 0;
}

.city-panel-hero-music {
  display: block;
  width: 100%;
  height: 150px;
  border: none;
}

/* Weather/date/sunrise/clock cluster — sits below the hero tile, filling
   the space the old single-row analog clock used to occupy. A 3-col x
   2-row grid: the weather tile spans both rows on the left (col 1), date
   and sunrise sit side by side top-right (col 2, col 3), and the clock
   spans both of their width along the bottom (col 2-3, row 2) — same
   proportions as the reference, just shorter overall to fit in this one
   row's worth of height instead of the whole column. Real data throughout:
   weather and sunrise both come from Open-Meteo (no API key, no login)
   keyed to each city's own coordinates in city-clock.js, not invented
   numbers. */
/* Outer black frame around the four colored tiles, matching the reference:
   the tiles sit inset on a black card instead of floating directly in the
   column, with the frame's own (larger) radius nesting around each tile's
   (smaller) one — same relationship a real iOS widget stack uses. */
.city-panel-bento-frame {
  background-color: #000;
  border-radius: 20px;
  padding: 8px;
  aspect-ratio: 2 / 1;
  max-width: 100%;
  overflow: hidden;
}

.city-panel-bento {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  height: 100%;
}

.cpb-weather {
  grid-column: 1;
  grid-row: 1 / 3;
  min-width: 0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #4b9fe1;
}

/* Material Symbols (Sharp, Google Fonts — Apache-licensed, self-hosted
   like every other font here) instead of mixed-style Unicode emoji: a
   ligature font where the element's own text (e.g. "cloud", "wb_twilight")
   is the icon name, rendered as a glyph. font-variation-settings match the
   Fill/Weight/Grade/Optical-size point requested. */
.cpb-weather-icon,
.cpb-sun-icon {
  font-family: "Material Symbols Sharp";
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
}

.cpb-weather-top {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cpb-weather-icon {
  font-size: 22px;
  line-height: 1;
}

.cpb-weather-label {
  font-family: Taktikasans, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 100%;
  color: rgba(12, 32, 54, 0.8);
}

.cpb-weather-temp {
  font-family: Taktikasans, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: #0c2036;
}

.cpb-weather-city {
  font-family: Taktikasans, sans-serif;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(12, 32, 54, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpb-date {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  border-radius: 12px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ef9433;
}

.cpb-date-day {
  font-family: Taktikasans, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #341c00;
}

.cpb-date-num {
  font-family: Taktikasans, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: #2a1600;
}

.cpb-sun {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background-color: #000;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.cpb-sun-icon {
  font-size: 17px;
  line-height: 1;
  color: #f0a838;
}

.cpb-sun-time {
  font-family: Taktikasans, sans-serif;
  font-size: 13px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* World-clock tile: city/date/UTC text on the left, a classic analog watch
   face (light dial, dark ticks/hands, red second hand) on the right —
   reads as an actual miniature clock rather than a plain timestamp. The
   dial stays light regardless of the tile's own color (same as it would on
   the old dark tile) since a light dial with dark hands is what actually
   reads as "a watch face". */
.cpb-clock {
  grid-column: 2 / 4;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 10px;
  background-color: #dd4c3d;
}

.cpb-clock .city-panel-clock-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cpb-clock .city-panel-clock-city {
  font-family: Taktikasans, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #2c0a05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpb-clock .city-panel-clock-date {
  margin-top: 2px;
  font-family: Taktikasans, sans-serif;
  font-size: 8px;
  color: rgba(44, 10, 5, 0.7);
  line-height: 1.3;
}

.cpb-clock .city-panel-clock-tz {
  margin-top: 0;
  font-family: Taktikasans, sans-serif;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(44, 10, 5, 0.7);
}

/* Analog face: 60 tick marks (12 bold hour ticks + 48 thin minute ticks)
   drawn once as a static inline SVG, plus three CSS-only hands (plain divs,
   not SVG) rotated from their own bottom edge via transform-origin —
   city-clock.js sets each hand's `rotate()` angle on every tick, computed
   from the active city's own timezone (see clockAngles()). */
.city-panel-clock-face {
  position: relative;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.city-panel-clock-ticks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.city-panel-clock-ticks .tick-hour {
  stroke: #1a1a1a;
  stroke-width: 3;
  stroke-linecap: round;
}

.city-panel-clock-ticks .tick-minute {
  stroke: #1a1a1a;
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.5;
}

.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  border-radius: 1px;
  background-color: #1a1a1a;
}

.clock-hand-hour {
  width: 2.6px;
  height: 25%;
  margin-left: -1.3px;
}

.clock-hand-minute {
  width: 1.8px;
  height: 37%;
  margin-left: -0.9px;
}

.clock-hand-second {
  width: 1.2px;
  height: 40%;
  margin-left: -0.6px;
  background-color: #d54b3f;
}

.clock-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background-color: #1a1a1a;
  z-index: 3;
}

.city-panel-hello {
  position: relative;
  aspect-ratio: 5 / 3;
  height: auto;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.city-panel-hello-label,
.city-panel-hello-email {
  position: relative;
  z-index: 2;
}

.city-panel-hello-label {
  font-family: Taktikasans, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}

.city-panel-hello-email {
  font-family: Taktikasans, sans-serif;
  font-size: 15px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

.city-panel-hello-email:hover {
  text-decoration-color: #fff;
}

/* Khmelnytskyi-only "stories" photo gallery living behind the Напишіть нам
   text (real photos from a team member's own Instagram, downloaded once and
   hosted locally like every other insta-*.jpg here — not hotlinked, since
   Instagram's CDN URLs are signed/expiring). Injected/removed by
   renderStory() in city-clock.js so every other city keeps the plain card. */
.city-panel-hello-story {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.city-panel-hello-story-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.city-panel-hello-story-slide.is-active {
  opacity: 1;
}

.city-panel-hello-story-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.05) 35%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.city-panel-hello-story-bars {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 3px;
}

.city-panel-hello-story-bar {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.city-panel-hello-story-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 1px;
  background: #fff;
}

.city-panel-hello-story-bar-fill.is-done {
  width: 100%;
}

/* Duration here must match STORY_DURATION in city-clock.js (3500ms). */
.city-panel-hello-story-bar-fill.is-filling {
  width: 100%;
  transition: width 3.5s linear;
}

.city-panel-news {
  flex: 1;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Wraps just the item links (not the "Останні новини / Всі" head above it)
   so JS can swap this one list's innerHTML per city without touching the
   head row. */
.city-panel-news-list {
  display: flex;
  flex-direction: column;
}

.city-panel-news-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Taktikasans, sans-serif;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  padding-bottom: 8px;
}

.city-panel-news-head a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.city-panel-news-head a:hover {
  color: #fff;
}

.city-panel-news-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.city-panel-news-item:last-child {
  border-bottom: none;
}

.city-panel-news-item img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}

.city-panel-news-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.city-panel-news-item-title {
  font-family: Taktikasans, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 130%;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.city-panel-news-item-cat {
  font-family: Taktikasans, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 130%;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

@media screen and (max-width: 1023px) {
  .city-clock-trigger {
    display: none;
  }
}

/* Site-wide 16px edge gutter (continued from the .menu-2-copy/.contact rule
   near the top of this file) for the rest of the site's page templates.
   Each page's own top-level content sections still carry their own copy of
   the theme's original 40px, so every template needs its own line here —
   unscoped where the class name is exclusive to that one page/template
   (verified via grep across every .html file), body-class-scoped where it
   isn't (about.html's .team is reused, with different content, by
   hello.html). Sections that already render at 0px padding by design
   (full-bleed sliders like vacancies' .section-7 or blog's .tabs-3) are
   deliberately left out. */
body.body-7 .principles,
body.body-7 .team-2,
body.body-7 .team,
body.body-7 .team-3 {
  padding-left: 20px;
  padding-right: 20px;
}

body.body-8 .open-vacancies,
body.body-8 .baza {
  padding-left: 20px;
  padding-right: 20px;
}

.service-section,
.designs,
.brands,
.advertising-section,
.naming-section {
  padding-left: 20px;
  padding-right: 20px;
}

.service-section-copy-copy,
.fs-example_layout {
  padding-left: 20px;
  padding-right: 20px;
}

/* Job-posting pages (akaunt-menedzher.html, event-manager.html, etc. — 18
   pages sharing one template, confirmed via grep that .section-8/.section-57
   appear nowhere else on the site). */
.section-8,
.section-57 {
  padding-left: 20px;
  padding-right: 20px;
}

/* Site-wide card/photo corner rounding, matching the cases-page grid's 8px
   standard. Deliberately low-specificity (bare type selector) so it acts as
   a fallback default — any more specific existing rule still wins, notably
   the case-card grid's own inner image (border-radius: 0 is intentional
   there: the outer <a> owns the rounded clip, see .cases-tabs .grid-2 a >
   div:first-child > img above). Small chrome icons (wordmark, mobile
   menu open/close) are excluded since rounding a 24-32px icon mark reads as
   a rendering glitch rather than a design choice. */
img {
  border-radius: 8px;
}

/* Same fallback default as above, extended to <video> and to Webflow's own
   background-video/embed wrappers (.w-embed, .w-background-video) — these
   carry the actual visible corner on a case-page background-video, not the
   <video> tag itself. Also gives every such wrapper overflow: hidden
   instead of Webflow's shipped overflow: clip, which Safari doesn't
   reliably apply to the wrapper's absolutely-positioned <video> child (see
   the SCM case-page block below for the full story — this generalizes that
   one fix site-wide instead of leaving every other case page to hit it
   individually). Scoped with :has() to only the embed wrappers that
   actually contain a background-video, so a handful of case pages' other
   .w-embed uses (small decorative SVG/CSS shapes) don't get clipped. */
video,
.w-embed {
  border-radius: 8px;
}

.w-embed:has(.w-background-video),
.w-background-video {
  overflow: hidden;
  border-radius: 8px;
}

.image-97,
.image-97-copy,
.image-101,
.image-103 {
  border-radius: 0;
}

/* "Новини" card grid (homepage + about.html, same shared markup/classes on
   both): the visible rounding comes from .div-block-988/-993, the <img>'s
   own clipping wrapper (overflow: clip) — not the <img> itself, so the
   blanket `img { border-radius: 8px }` above never reached it. Shared
   stylesheet default was 20px, well past the site's 8px standard; grid gap
   was 32px, past the site's 8px standard. */
.div-block-988,
.div-block-993 {
  border-radius: 8px;
}

.grid-162 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

/* SCM case page (cases/scm.html, <body class="body-98">) — a pilot for
   the case-page template: pull the 40px left/right gutter every content
   block ships with (Webflow per-instance classes, hardcoded) in to 20px,
   tighten the photo-grid gap from 20px down to the site's 8px card-gap
   standard (see the "Новини" grid above and the cases-page grid), and round
   every photo/video to that same 8px instead of the per-instance 16px the
   Webflow export shipped with. Scoped to .body-98 so no other case page is
   affected — once approved this same block gets rolled out to the rest. */
.body-98 .div-block-1564,
.body-98 .div-block-1566,
.body-98 .one-photo-16-9-2,
.body-98 .two-photo-4-5-10,
.body-98 .heading-body-67,
.body-98 .two-photo-hover-slider-1-1-2,
.body-98 .two-photo-1-1-26,
.body-98 .one-photo-2-39-1-22,
.body-98 .two-photo-3-2-2,
.body-98 .one-video-16-9-7,
.body-98 .grid-209,
.body-98 .heading-2377,
.body-98 .two-photo-16-9-44,
.body-98 .div-block-53 {
  padding-left: 20px;
  padding-right: 20px;
}

.body-98 .two-photo-4-5-10,
.body-98 .two-photo-hover-slider-1-1-2,
.body-98 .two-photo-1-1-26,
.body-98 .two-photo-3-2-2,
.body-98 .two-photo-16-9-44 {
  gap: 8px;
}

/* These five are 2-column CSS grids (Webflow's own "1fr 1fr" template) with
   an 8px gap: splitting a container's width in half plus a gap is exactly
   the kind of division that doesn't land on a whole pixel most of the time,
   and Safari rounds each column up instead of down where Chrome doesn't —
   so on any block with two photos, or a photo next to a video/gif, the
   right-hand item ends up 1-3px wider than the grid actually has room for.
   Invisible at that size, so the fix is just to clip it instead of trying
   to out-calculate Safari's own rounding. (.two-photo-16-9-44 additionally
   ships from Webflow with overflow: visible outright, which is the same
   problem with nothing even catching it.) */
.body-98 .two-photo-4-5-10,
.body-98 .two-photo-hover-slider-1-1-2,
.body-98 .two-photo-1-1-26,
.body-98 .two-photo-3-2-2,
.body-98 .two-photo-16-9-44 {
  overflow: hidden;
}

/* Both sides of every one of these pairs already carry their own explicit
   aspect-ratio (4/5, 1/1, 3/2...) plus width: 100% (see the two rules
   further down), which is normally enough on its own to size each side
   correctly regardless of the other. The default grid behavior
   (align-items: stretch) still layers a SECOND, conflicting instruction on
   top of that: "also stretch to match the row's height" — and confirmed in
   a real Safari session, Safari resolves that conflict by letting stretch
   win over the aspect-ratio math for one side but not the other, so a
   photo and its paired video/photo end up two completely different
   heights (one reading its own ratio, the other stretched to whatever the
   row turned out to be). Turning stretch off removes the conflict outright
   — each side just sizes itself from its own aspect-ratio and width, which
   is identical maths for both sides of every one of these pairs, so they
   can no longer disagree. */
.body-98 .two-photo-4-5-10,
.body-98 .two-photo-hover-slider-1-1-2,
.body-98 .two-photo-1-1-26,
.body-98 .two-photo-3-2-2,
.body-98 .two-photo-16-9-44 {
  align-items: start;
}

/* align-items: start fixed the HEIGHT mismatch, but a real Safari test
   afterwards showed the two columns themselves still land at different
   WIDTHS (663px vs 741px for one pair) — a different symptom, same root
   cause one layer further out. Webflow's own .w-layout-grid sets
   "grid-template-columns: 1fr 1fr" with nothing else, and a bare 1fr track
   is really "minmax(auto, 1fr)": its floor is its content's own automatic
   minimum size, not zero. When one side's content (again, aspect-ratio
   doing its own sizing math) wants to be wider than an even 50/50 split,
   that track is allowed to grow past its share and the other track shrinks
   to make room — Safari and Chrome apparently don't compute that
   content-based minimum the same way here, so only Safari actually lets it
   happen. Pinning each track's floor to 0 (minmax(0, 1fr) instead of 1fr)
   removes that content-based floor entirely, so the two columns are
   forced to stay an even, equal split no matter what either side's own
   content would otherwise prefer. */
.body-98 .two-photo-4-5-10,
.body-98 .two-photo-hover-slider-1-1-2,
.body-98 .two-photo-1-1-26,
.body-98 .two-photo-3-2-2,
.body-98 .two-photo-16-9-44 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* div-block-1570 (the compare-slider / square-photo side of a pair) ships
   with max-width: 100% instead of width: 100% — max-width only stops it
   from going OVER 100%, it doesn't stop it landing under, so once stretch
   is turned off above it needs its own explicit width to fill the column
   the same way its aspect-ratio-driven sibling does. */
.body-98 .div-block-1570 {
  width: 100%;
}

.body-98 img,
.body-98 video {
  border-radius: 8px;
}

/* The hover-compare slider (gold card / bottle pair) paints its two photos
   as CSS background-images on plain <div>s, not <img> tags, so the blanket
   ".body-98 img" rule above never reached them — found by auditing every
   background-image element on the page, not just <img>/<video>. */
.body-98 .div-block-1083-copy,
.body-98 .div-block-1576 {
  border-radius: 8px;
}

/* Vertical rhythm between stacked photo/video blocks down the page used to
   be 20px (section-146's own gap) while the photos sit 8px apart
   side-by-side within each block — matching that up so the gap reads the
   same whichever direction you look. */
.body-98 .section-146 {
  gap: 8px;
}

/* Every Webflow "background video" (autoplaying <video> used as a photo
   substitute) sits inside a .w-background-video wrapper that owns the real
   overflow:hidden clip; Webflow ships that wrapper with border-radius: 0
   regardless of the <video>'s own radius, so the video's corners were
   getting clipped back to square by the wrapper even though the video
   itself already had the right 8px (see ".body-98 video" above — it was
   never the problem, the clipping box around it was). */
.body-98 .w-background-video {
  border-radius: 8px;
}

/* The top hero photo's own clipping wrapper ships with a 20px
   bottom-corner radius (top stays square on purpose — it's full-bleed
   under the nav), out of step with every other photo's 8px. */
.body-98 .div-block-1567 {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  overflow: hidden;
}

/* One more layer out: every video/embed sits in Webflow's own ".w-embed"
   wrapper (code-embed-36, code-embed-37, code-embed-38, size-video-16-9-7,
   all sharing that one class), which ALSO clips at its own radius — 16px,
   ie. bigger than the 8px the .w-background-video fix above lands on. Two
   same-size nested clip boxes: the wider (16px) one cuts more off the
   corner than the tighter (8px) one, so it's the one that actually shows
   through — found this by walking every clipping ancestor of every photo,
   not just the immediate one. */
.body-98 .w-embed {
  border-radius: 8px;
  overflow: hidden;
}

/* Both overflow: hidden overrides just above matter for more than the
   radius: Webflow ships these wrappers (and .div-block-1567, the hero's
   own wrapper) with overflow: CLIP, not hidden. Chrome treats the two the
   same here, but Safari doesn't clip an absolutely-positioned descendant
   (which is exactly what the background-video's own <video> is) when the
   ancestor uses "clip" — only "hidden" reliably does. Without this, Safari
   painted each video at its full native pixel size, uncropped, spilling
   out past its card and past the viewport itself. */

/* .div-block-1579 in the hover-slider pair holds only the background-video
   wrapper, whose actual <video> is position:absolute (so it contributes
   zero intrinsic height to its parent). Desktop hides this because the
   grid row stretches it to match its sibling's own aspect-ratio; Webflow's
   own mobile breakpoint switches this grid to a column flex, where nothing
   stretches cross-items anymore, so this side collapses to 0 height and
   its video disappears entirely. Every other video-holding wrapper on this
   page already carries its own explicit aspect-ratio (4/5, 1/1) — this was
   the one gap, found by checking aspect-ratio on all of them at once. */
.body-98 .div-block-1579 {
  aspect-ratio: 1;
}

/* Root cause of the Safari-only gif/video overflow that scrolled the whole
   page sideways: .image-333, .image-7481 and .image-7482 (several of the
   scm2442/3242344245/2342423369 gifs, plus a few jpgs sharing the same
   classes) ship from Webflow with only aspect-ratio + object-fit: cover and
   NO width — every other photo class on this page that also uses
   aspect-ratio + object-fit: cover (image-7480, image-7484, image-7485,
   image-653-copy, image-7422-copy...) carries an explicit width alongside
   it, so these three are just an incomplete export, not a deliberate
   choice. Without that width, the <img> falls back to its own intrinsic
   size (a gif's native pixel dimensions, or a plain HTML width="" attribute)
   instead of filling its grid cell.
   Deliberately width: 100% only, no height: the wrapper these three sit in
   (unlike the other classes above) gets ITS OWN height purely from its own
   aspect-ratio, not a definite pixel value — pairing that with height: 100%
   here is a percentage measured against an ancestor whose height is only
   "on paper" via aspect-ratio, not an actually-resolved value yet at the
   point Safari needs it, and it blew the box up far past its card instead
   of respecting the ratio. Leaving height unset lets this element's own
   aspect-ratio (already declared on it) compute the height from the
   resolved width instead, which needs no percentage resolution at all and
   renders identically in both engines. */
.body-98 .image-333,
.body-98 .image-7481,
.body-98 .image-7482 {
  width: 100%;
}

/* The same "aspect-ratio with no width" gap as just above, but one level
   up the tree: the WRAPPER around a photo/video (not just the <img> itself)
   also ships from Webflow with only aspect-ratio and no width for several
   of the two-photo pair slots — div-block-1571/1577 (the 4:5 pair), 1568
   (the 3:2 pair) and the hover-slider's own background-image divs
   (1083-copy, 1576). Confirmed this is the real, measured cause (not just
   a theory) via getBoundingClientRect() in an actual Safari session: these
   wrappers were rendering 68-288px wider than the viewport, a different
   amount each time depending on what else was in that row — consistent
   with Safari computing the wrapper's width FROM its aspect-ratio and
   whatever height the grid row ended up with, instead of just stretching
   it to the grid column's own width like a plain block with no ratio
   would. Forcing width: 100% here removes that path entirely: the wrapper
   just takes its column's width like its sibling does, and its own
   aspect-ratio (still in place) sizes the height from that, same fix and
   same reasoning as image-333/7481/7482 above. image-7476 included
   pre-emptively — same aspect-ratio-without-width shape, just not yet
   caught overflowing in what's been tested. */
.body-98 .div-block-1571,
.body-98 .div-block-1577,
.body-98 .div-block-1568,
.body-98 .div-block-1083-copy,
.body-98 .div-block-1576,
.body-98 .image-7476 {
  width: 100%;
}

/* Backstop: even a single element that still manages to slip past its
   container shouldn't be able to drag the whole page into side-scrolling.
   Safari specifically has a known quirk where overflow-x: hidden on <body>
   alone doesn't reliably stop the viewport itself from scrolling/showing
   whatever slipped past — it needs the same rule on <html> too, or content
   can still hang off the right edge even though nothing scrolls. Chrome
   doesn't need this (body alone is enough there), so it's not the fix for
   the underlying overflow, just closing the one gap Safari has in how it
   enforces it. */
html:has(body.body-98) {
  overflow-x: hidden;
}

.body-98 {
  overflow-x: hidden;
}

/* ============================================================
   Case-page Safari fixes + SCM-style spacing/rounding, rolled out
   site-wide from the SCM pilot (cases/scm.html). Auto-generated
   by cross-referencing each page's own markup against the Webflow
   shared stylesheet. See the SCM block above for the full reasoning
   behind each rule; short version:

   - width: 100% on any photo/video (or its wrapper) that ships with
     a REAL, numeric aspect-ratio but no width. "aspect-ratio: auto"
     doesn't count as real here. Skipped for wrappers that use their
     own margin (not a grid track) for their gutter.
   - overflow: hidden + gap: 8px (was 20px) on every photo/video
     grid — not just two-column pairs, three- and four-across ones
     too (found missing on viber.html's grid-124, a 3-video "color
     squares" row that still had a 20px gap after the first pass,
     since that pass only ever looked at exactly-2-child grids).
     grid-template-columns re-declared with minmax(0, ...) wherever
     the original template could be read cleanly, preserving
     whatever ratio the page already used across its columns.
   - align-items: start on top of that, but only where every column
     in the grid has its own real aspect-ratio to size itself with —
     checked per grid, and also cross-checked against a live-browser
     pass done on the two-column grids earlier (every one of the 232
     pairs loaded and measured; a few came back collapsed even
     though the static check called them safe, and those keep the
     default alignment regardless of what this second pass says).
   - overflow: hidden on background-video clipping wrappers that
     shipped with overflow: clip.
   - padding-left/right 40px -> 20px on every recognized content
     block, scanned across the whole page body rather than a single
     "content section" — several pages bundle multiple case studies
     or a brief/logo/colors/fonts structure with no one wrapping
     section. Forms, nav and footer chrome are excluded.

   One page-specific note: viber.html's grid-124 (three
   "background-video" elements placed directly as grid items, no
   wrapping div, using Webflow's custom w-node column-span
   positioning rather than a plain N-equal-columns template) renders
   at 0x0 in testing regardless of any rule here — its column count
   is browser-generated (10 implicit tracks from grid-auto-columns),
   not something this fix touches, and it predates this pass (no
   entry for it existed before this rollout). It still gets gap and
   overflow like every other grid, but the collapse itself is a
   separate, deeper issue flagged for its own look rather than
   guessed at here. */

/* cases/6037.html */
.body-93 .div-block-1503,
.body-93 .image-7424 {
  width: 100%;
}
.body-93 .size-video-1080x1350-2,
.body-93 .size-video-16-9-4 {
  overflow: hidden;
}
.body-93 .two-photo-16-9-44,
.body-93 .two-photo-4-5-7 {
  overflow: hidden;
}
.body-93 .two-photo-16-9-44,
.body-93 .two-photo-4-5-7 {
  gap: 8px;
}
.body-93 .two-photo-4-5-7 {
  align-items: start;
}
.body-93 .two-photo-16-9-44 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-93 .two-photo-4-5-7 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-93 .div-block-1494,
.body-93 .heading-body-64,
.body-93 .one-photo-16-9-2,
.body-93 .one-photo-2-39-1-20,
.body-93 .one-video-16-9-7,
.body-93 .two-photo-4-5-7 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/alterra.html */
.body-75 .div-block-1189,
.body-75 .div-block-1190,
.body-75 .div-block-1196,
.body-75 .div-block-1198,
.body-75 .image-7182,
.body-75 .image-7183,
.body-75 .image-7187,
.body-75 .image-7188,
.body-75 .image-7192,
.body-75 .one-photo-16-9-3,
.body-75 .size-video-16-9-3-copy,
.body-75 .size-video-16-9-3-copy-copy,
.body-75 .size-video-16-9-copy-c-opy,
.body-75 .size-video-16-9-copy-c6opy-copy,
.body-75 .size-video-16-9-copy-copy-copy,
.body-75 .size-video-16-9-copy-copy4-copy,
.body-75 .size-video-16-copy {
  width: 100%;
}
.body-75 .size-video-16-9-3-copy,
.body-75 .size-video-16-9-3-copy-copy,
.body-75 .size-video-16-9-copy-c-opy,
.body-75 .size-video-16-9-copy-c6opy-copy,
.body-75 .size-video-16-9-copy-copy-copy,
.body-75 .size-video-16-9-copy-copy4-copy,
.body-75 .size-video-16-copy {
  overflow: hidden;
}
.body-75 .grid-163,
.body-75 .six-photo,
.body-75 .three-photo-4-5-6,
.body-75 .two-photo-1-1-19,
.body-75 .two-photo-16-9-11,
.body-75 .two-photo-16-9_950-1070-8,
.body-75 .two-photo-4-5-4-copy,
.body-75 .two-photo-video-1-1-9 {
  overflow: hidden;
}
.body-75 .grid-163,
.body-75 .six-photo,
.body-75 .three-photo-4-5-6,
.body-75 .two-photo-1-1-19,
.body-75 .two-photo-16-9-11,
.body-75 .two-photo-16-9_950-1070-8,
.body-75 .two-photo-4-5-4-copy,
.body-75 .two-photo-video-1-1-9 {
  gap: 8px;
}
.body-75 .six-photo,
.body-75 .three-photo-4-5-6,
.body-75 .two-photo-1-1-19,
.body-75 .two-photo-16-9-11,
.body-75 .two-photo-4-5-4-copy,
.body-75 .two-photo-video-1-1-9 {
  align-items: start;
}
.body-75 .grid-163 {
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
}
.body-75 .six-photo {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-75 .three-photo-4-5-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-75 .two-photo-1-1-19 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-75 .two-photo-16-9-11 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-75 .two-photo-16-9_950-1070-8 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-75 .two-photo-4-5-4-copy {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-75 .two-photo-video-1-1-9 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-75 .div-block-1209,
.body-75 .grid-163,
.body-75 .heading-subheading-body-8-copy-3,
.body-75 .heading-subheading-body-8-copy-copy,
.body-75 .one-photo-16-9-3,
.body-75 .one-photo-2-39-1-6,
.body-75 .one-photo-2-39-1-6-copy,
.body-75 .one-photo-21-7-2,
.body-75 .one-video-16-9-7,
.body-75 .one-video-case-16-9-15-copy,
.body-75 .six-photo,
.body-75 .three-photo-4-5-6,
.body-75 .two-photo-1-1-19,
.body-75 .two-photo-16-9_950-1070-8,
.body-75 .two-photo-4-5-4-copy,
.body-75 .two-photo-video-1-1-9 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/bezpekove-seredovishche.html */
.body-33 .div-block-425,
.body-33 .image-205,
.body-33 .image-318,
.body-33 .image-319,
.body-33 .image-321 {
  width: 100%;
}
.body-33 .fora-color,
.body-33 .fora-fonts-copy,
.body-33 .video-illustration {
  overflow: hidden;
}
.body-33 .two-photo-16-9-6,
.body-33 .two-photo-slider-1-1-3,
.body-33 .two-photo-video-1-1-3 {
  overflow: hidden;
}
.body-33 .two-photo-16-9-6,
.body-33 .two-photo-slider-1-1-3,
.body-33 .two-photo-video-1-1-3 {
  gap: 8px;
}
.body-33 .two-photo-slider-1-1-3,
.body-33 .two-photo-video-1-1-3 {
  align-items: start;
}
.body-33 .two-photo-16-9-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-33 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-33 .two-photo-video-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-33 .div-block-70,
.body-33 .heading-body-5,
.body-33 .one-photo-16-9-2,
.body-33 .one-photo-2-39-1-5,
.body-33 .one-slider-16-9-4,
.body-33 .one-video-16-9-5,
.body-33 .one-video-2-39-1-2,
.body-33 .two-photo-slider-1-1-3,
.body-33 .two-photo-video-1-1-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/brabrabra.html */
.body-54 .div-block-738,
.body-54 .image-144,
.body-54 .image-500 {
  width: 100%;
}
.body-54 .three-photo-4-5-3,
.body-54 .two-photo-16-9-16 {
  overflow: hidden;
}
.body-54 .three-photo-4-5-3,
.body-54 .two-photo-16-9-16 {
  gap: 8px;
}
.body-54 .three-photo-4-5-3 {
  align-items: start;
}
.body-54 .three-photo-4-5-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-54 .two-photo-16-9-16 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-54 .div-block-734,
.body-54 .heading-body-30,
.body-54 .heading-body-31,
.body-54 .one-video-case-16-9-9,
.body-54 .three-photo-4-5-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/demine-ukraine.html */
.body-50 .div-block-686,
.body-50 .div-block-688,
.body-50 .div-block-689,
.body-50 .div-block-692,
.body-50 .div-block-694,
.body-50 .image-333,
.body-50 .image-470,
.body-50 .image-474 {
  width: 100%;
}
.body-50 .video-illustration {
  overflow: hidden;
}
.body-50 .three-photo-1-1-2,
.body-50 .two-photo-1-1-7,
.body-50 .two-photo-1-1-8,
.body-50 .two-photo-16-9-12,
.body-50 .two-photo-3-2-2,
.body-50 .two-photo-video-1-1-3 {
  overflow: hidden;
}
.body-50 .three-photo-1-1-2,
.body-50 .two-photo-1-1-7,
.body-50 .two-photo-1-1-8,
.body-50 .two-photo-16-9-12,
.body-50 .two-photo-3-2-2,
.body-50 .two-photo-video-1-1-3 {
  gap: 8px;
}
.body-50 .three-photo-1-1-2,
.body-50 .two-photo-3-2-2,
.body-50 .two-photo-video-1-1-3 {
  align-items: start;
}
.body-50 .three-photo-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-50 .two-photo-1-1-7 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-50 .two-photo-1-1-8 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-50 .two-photo-16-9-12 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-50 .two-photo-3-2-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-50 .two-photo-video-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-50 .div-block-684,
.body-50 .heading-body-25,
.body-50 .heading-body-26,
.body-50 .one-photo-16-9-2,
.body-50 .one-photo-2-39-1-5,
.body-50 .three-photo-1-1-2,
.body-50 .two-photo-1-1-7,
.body-50 .two-photo-1-1-8,
.body-50 .two-photo-3-2-2,
.body-50 .two-photo-video-1-1-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/divo.html */
.body-56 .div-block-252-copy,
.body-56 .div-block-253-copy,
.body-56 .div-block-722,
.body-56 .div-block-765,
.body-56 .div-block-766,
.body-56 .image-511,
.body-56 .image-517 {
  width: 100%;
}
.body-56 .two-photo-1-1-11,
.body-56 .two-photo-16-9-18,
.body-56 .two-photo-slider-1-1-3 {
  overflow: hidden;
}
.body-56 .two-photo-1-1-11,
.body-56 .two-photo-16-9-18,
.body-56 .two-photo-slider-1-1-3 {
  gap: 8px;
}
.body-56 .two-photo-1-1-11,
.body-56 .two-photo-slider-1-1-3 {
  align-items: start;
}
.body-56 .two-photo-1-1-11 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-56 .two-photo-16-9-18 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-56 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-56 .div-block-761,
.body-56 .heading-body-33,
.body-56 .one-photo-16-9-2,
.body-56 .two-photo-1-1-11,
.body-56 .two-photo-slider-1-1-3 {
  padding-left: 20px;
  padding-right: 20px;
}
.body-56 .div-block-253-copy,
.body-56 .div-block-765 {
  border-radius: 8px;
}

/* cases/dobrodiy-club.html */
.body-58 .div-block-722,
.body-58 .div-block-942,
.body-58 .div-block-950,
.body-58 .div-block-956,
.body-58 .image-333,
.body-58 .image-651,
.body-58 .image-657,
.body-58 .image-659,
.body-58 .image-666 {
  width: 100%;
}
.body-58 .size-video-1080x1080,
.body-58 .size-video-16-9 {
  overflow: hidden;
}
.body-58 .three-photo-4-5-4,
.body-58 .three-photo-video-photo-1-1-4,
.body-58 .two-photo-1-1-15,
.body-58 .two-photo-16-9-11,
.body-58 .two-photo-16-9_950-1070-6,
.body-58 .two-photo-3-2-3,
.body-58 .two-photo-video-1-1-5,
.body-58 .two-photo-video-1-1-6,
.body-58 .two-video-video-16-9_950-1070-11 {
  overflow: hidden;
}
.body-58 .three-photo-4-5-4,
.body-58 .three-photo-video-photo-1-1-4,
.body-58 .two-photo-1-1-15,
.body-58 .two-photo-16-9-11,
.body-58 .two-photo-16-9_950-1070-6,
.body-58 .two-photo-3-2-3,
.body-58 .two-photo-video-1-1-5,
.body-58 .two-photo-video-1-1-6,
.body-58 .two-video-video-16-9_950-1070-11 {
  gap: 8px;
}
.body-58 .three-photo-4-5-4,
.body-58 .three-photo-video-photo-1-1-4,
.body-58 .two-photo-1-1-15,
.body-58 .two-photo-16-9-11,
.body-58 .two-photo-16-9_950-1070-6,
.body-58 .two-photo-3-2-3,
.body-58 .two-photo-video-1-1-5,
.body-58 .two-photo-video-1-1-6 {
  align-items: start;
}
.body-58 .three-photo-4-5-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-58 .three-photo-video-photo-1-1-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-58 .two-photo-1-1-15 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-58 .two-photo-16-9-11 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-58 .two-photo-16-9_950-1070-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-58 .two-photo-3-2-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-58 .two-photo-video-1-1-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-58 .two-photo-video-1-1-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-58 .two-video-video-16-9_950-1070-11 {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .5fr);
}
.body-58 .div-block-941,
.body-58 .div-block-948,
.body-58 .heading-body-44,
.body-58 .heading-body-45,
.body-58 .heading-body-46,
.body-58 .heading-subheading-body-8-copy,
.body-58 .heading-subheading-body-8-copy-copy,
.body-58 .one-photo-16-9-2,
.body-58 .one-photo-2-39-1-6,
.body-58 .one-photo-2-39-1-6-copy,
.body-58 .one-photo-2-39-1-7,
.body-58 .one-photo-2-39-1-8,
.body-58 .one-photo-2-39-1-9,
.body-58 .one-photo-21-7-2,
.body-58 .one-video-16-9,
.body-58 .one-video-16-9-7,
.body-58 .one-video-case-16-9-15-copy,
.body-58 .three-photo-4-5-4,
.body-58 .three-photo-video-photo-1-1-4,
.body-58 .two-photo-1-1-15,
.body-58 .two-photo-16-9_950-1070-6,
.body-58 .two-photo-3-2-3,
.body-58 .two-photo-video-1-1-5,
.body-58 .two-photo-video-1-1-6,
.body-58 .two-video-video-16-9_950-1070-11 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/favbet.html */
.body-45 .image-427 {
  width: 100%;
}
.body-45 .two-photo-16-9-10 {
  overflow: hidden;
}
.body-45 .two-photo-16-9-10 {
  gap: 8px;
}
.body-45 .two-photo-16-9-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-45 .div-block-70,
.body-45 .heading-body-18,
.body-45 .one-video-16-9-7,
.body-45 .one-video-case-16-9-7 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/fishka.html */
.body-92 .code-embed-20,
.body-92 .code-embed-21,
.body-92 .code-embed-21-copy,
.body-92 .code-embed-22,
.body-92 .code-embed-23,
.body-92 .code-embed-24,
.body-92 .code-embed-25,
.body-92 .code-embed-26,
.body-92 .code-embed-27,
.body-92 .code-embed-28,
.body-92 .code-embed-29,
.body-92 .div-block-1486,
.body-92 .div-block-351,
.body-92 .image-7415,
.body-92 .image-7416,
.body-92 .image-7419 {
  width: 100%;
}
.body-92 .code-embed-20,
.body-92 .code-embed-21-copy,
.body-92 .code-embed-22,
.body-92 .code-embed-24,
.body-92 .code-embed-25,
.body-92 .code-embed-26,
.body-92 .code-embed-27,
.body-92 .code-embed-28,
.body-92 .code-embed-29 {
  overflow: hidden;
}
.body-92 .photo-944x710-video-2-3-2,
.body-92 .three-photo-1-1-2,
.body-92 .two-photo-1-1-25,
.body-92 .two-photo-16-9-43,
.body-92 .two-photo-slider-1-1-3,
.body-92 .two-photo-video-1-1-13,
.body-92 .two-photo-video-2-3-2,
.body-92 .video-slider {
  overflow: hidden;
}
.body-92 .photo-944x710-video-2-3-2,
.body-92 .three-photo-1-1-2,
.body-92 .two-photo-1-1-25,
.body-92 .two-photo-16-9-43,
.body-92 .two-photo-slider-1-1-3,
.body-92 .two-photo-video-1-1-13,
.body-92 .two-photo-video-2-3-2 {
  gap: 8px;
}
.body-92 .three-photo-1-1-2,
.body-92 .two-photo-1-1-25,
.body-92 .two-photo-slider-1-1-3,
.body-92 .two-photo-video-1-1-13,
.body-92 .two-photo-video-2-3-2,
.body-92 .video-slider {
  align-items: start;
}
.body-92 .photo-944x710-video-2-3-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-92 .three-photo-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-92 .two-photo-1-1-25 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-92 .two-photo-16-9-43 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-92 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-92 .two-photo-video-1-1-13 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-92 .two-photo-video-2-3-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-92 .video-slider {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-92 .div-block-1488,
.body-92 .heading-subheading-body-21,
.body-92 .one-photo-16-9-2,
.body-92 .one-photo-2-39-1-19,
.body-92 .one-slider-2-1-4,
.body-92 .one-video-16-9-7,
.body-92 .one-video-2-39-1-4,
.body-92 .photo-944x710-video-2-3-2,
.body-92 .three-photo-1-1-2,
.body-92 .two-photo-1-1-25,
.body-92 .two-photo-slider-1-1-3,
.body-92 .two-photo-video-1-1-13,
.body-92 .two-photo-video-2-3-2,
.body-92 .video-slider {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/fora-cafe.html */
.body-38 .div-block-486,
.body-38 .div-block-495,
.body-38 .div-block-500,
.body-38 .image-361 {
  width: 100%;
}
.body-38 .div-block-268 {
  overflow: hidden;
}
.body-38 .three-photo-video-photo-1-1-3,
.body-38 .two-photo-1-1-3,
.body-38 .two-photo-16-9-10,
.body-38 .two-photo-slider-1-1-3,
.body-38 .two-photo-video-1-1-3,
.body-38 .two-photo-video-16-9_950-1070-2 {
  overflow: hidden;
}
.body-38 .three-photo-video-photo-1-1-3,
.body-38 .two-photo-1-1-3,
.body-38 .two-photo-16-9-10,
.body-38 .two-photo-slider-1-1-3,
.body-38 .two-photo-video-1-1-3,
.body-38 .two-photo-video-16-9_950-1070-2 {
  gap: 8px;
}
.body-38 .three-photo-video-photo-1-1-3,
.body-38 .two-photo-1-1-3,
.body-38 .two-photo-slider-1-1-3,
.body-38 .two-photo-video-1-1-3 {
  align-items: start;
}
.body-38 .three-photo-video-photo-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-38 .two-photo-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-38 .two-photo-16-9-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-38 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-38 .two-photo-video-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-38 .two-photo-video-16-9_950-1070-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-38 .div-block-70,
.body-38 .heading-body-11,
.body-38 .one-photo-16-9-2,
.body-38 .one-video-16-9-7,
.body-38 .three-photo-video-photo-1-1-3,
.body-38 .two-photo-1-1-3,
.body-38 .two-photo-slider-1-1-3,
.body-38 .two-photo-video-1-1-3,
.body-38 .two-photo-video-16-9_950-1070-2 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/fora-rk.html */
.body-34 .div-block-278,
.body-34 .div-block-291,
.body-34 .div-block-335,
.body-34 .image-192,
.body-34 .image-269,
.body-34 .image-324,
.body-34 .image-326,
.body-34 .image-327 {
  width: 100%;
}
.body-34 .three-photo-4-5-2,
.body-34 .two-photo-1-1-3,
.body-34 .two-photo-16-9-7,
.body-34 .two-photo-video-1-1-3 {
  overflow: hidden;
}
.body-34 .three-photo-4-5-2,
.body-34 .two-photo-1-1-3,
.body-34 .two-photo-16-9-7,
.body-34 .two-photo-video-1-1-3 {
  gap: 8px;
}
.body-34 .three-photo-4-5-2,
.body-34 .two-photo-video-1-1-3 {
  align-items: start;
}
.body-34 .three-photo-4-5-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-34 .two-photo-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-34 .two-photo-16-9-7 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-34 .two-photo-video-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-34 .div-block-70,
.body-34 .heading-body-5,
.body-34 .one-photo-16-9-2,
.body-34 .one-photo-21-7-2,
.body-34 .one-slider-16-9-4,
.body-34 .one-video-case-16-9-2,
.body-34 .one-video-case-16-9-2-copy,
.body-34 .three-photo-4-5-2,
.body-34 .two-photo-1-1-3,
.body-34 .two-photo-video-1-1-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/fora.html */
.body-24 .div-block-1010,
.body-24 .div-block-1013,
.body-24 .div-block-1021,
.body-24 .div-block-1023,
.body-24 .div-block-1026,
.body-24 .div-block-1513,
.body-24 .div-block-230,
.body-24 .div-block-278,
.body-24 .div-block-291,
.body-24 .div-block-317,
.body-24 .div-block-335,
.body-24 .div-block-370,
.body-24 .div-block-379,
.body-24 .div-block-383,
.body-24 .div-block-386,
.body-24 .image-130,
.body-24 .image-131,
.body-24 .image-192,
.body-24 .image-236,
.body-24 .image-269,
.body-24 .image-283,
.body-24 .image-284,
.body-24 .image-285,
.body-24 .image-289,
.body-24 .image-292,
.body-24 .image-293,
.body-24 .image-294,
.body-24 .image-295,
.body-24 .image-297,
.body-24 .image-298,
.body-24 .image-324,
.body-24 .image-326,
.body-24 .image-327,
.body-24 .image-696,
.body-24 .image-697,
.body-24 .image-699,
.body-24 .image-705,
.body-24 .image-7148,
.body-24 .image-7150,
.body-24 .image-7431,
.body-24 .image-7435,
.body-24 .size-video-16-9-fora,
.body-24 .size-video-16-9-fora2,
.body-24 .size-video-16-9-fora3,
.body-24 .size-video-16-9-fora4,
.body-24 .slide-116 {
  width: 100%;
}
.body-24 .div-block-1024,
.body-24 .fora-banner,
.body-24 .fora-banner-long,
.body-24 .fora-banner_2-copy,
.body-24 .fora-banner_3,
.body-24 .fora-color,
.body-24 .fora-fonts,
.body-24 .fora-light,
.body-24 .fora-pin,
.body-24 .size-video-1080x1080,
.body-24 .size-video-16-9-fora,
.body-24 .size-video-16-9-fora2,
.body-24 .size-video-16-9-fora3,
.body-24 .size-video-16-9-fora4,
.body-24 .size-video-950x1070,
.body-24 .video-illustration,
.body-24 .video-illustration-copy-copy {
  overflow: hidden;
}
.body-24 .four-poster-3,
.body-24 .grid-36,
.body-24 .photo-944x710-video-2-3-2,
.body-24 .three-photo-1-1-2,
.body-24 .three-photo-4-5-2,
.body-24 .three-photo-4-5-5,
.body-24 .three-photo-video-photo-1-1-3,
.body-24 .two-photo-1-1-16,
.body-24 .two-photo-1-1-17,
.body-24 .two-photo-1-1-2,
.body-24 .two-photo-1-1-3,
.body-24 .two-photo-16-9-31,
.body-24 .two-photo-5-4-4,
.body-24 .two-photo-slider-1-1-2,
.body-24 .two-photo-slider-1-1-3,
.body-24 .two-photo-video-1-1-2,
.body-24 .two-photo-video-1-1-3,
.body-24 .two-photo-video-1-1-7,
.body-24 .two-photo-video-16-9_950-1070-2,
.body-24 .two-photo-video-16-9_950-1070-2-copy,
.body-24 .two-photo-video-16-9_950-1070-3,
.body-24 .two-slider-slider-16-9_950-1070-2,
.body-24 .two-video-video-16-9_950-1070-2,
.body-24 .video-slider {
  overflow: hidden;
}
.body-24 .grid-36,
.body-24 .photo-944x710-video-2-3-2,
.body-24 .three-photo-1-1-2,
.body-24 .three-photo-4-5-2,
.body-24 .three-photo-4-5-5,
.body-24 .three-photo-video-photo-1-1-3,
.body-24 .two-photo-1-1-16,
.body-24 .two-photo-1-1-17,
.body-24 .two-photo-1-1-2,
.body-24 .two-photo-1-1-3,
.body-24 .two-photo-16-9-31,
.body-24 .two-photo-5-4-4,
.body-24 .two-photo-slider-1-1-2,
.body-24 .two-photo-slider-1-1-3,
.body-24 .two-photo-video-1-1-2,
.body-24 .two-photo-video-1-1-3,
.body-24 .two-photo-video-1-1-7,
.body-24 .two-photo-video-16-9_950-1070-2,
.body-24 .two-photo-video-16-9_950-1070-2-copy,
.body-24 .two-photo-video-16-9_950-1070-3,
.body-24 .two-slider-slider-16-9_950-1070-2 {
  gap: 8px;
}
.body-24 .grid-36,
.body-24 .three-photo-1-1-2,
.body-24 .three-photo-4-5-2,
.body-24 .three-photo-4-5-5,
.body-24 .three-photo-video-photo-1-1-3,
.body-24 .two-photo-1-1-17,
.body-24 .two-photo-1-1-2,
.body-24 .two-photo-5-4-4,
.body-24 .two-photo-slider-1-1-2,
.body-24 .two-photo-slider-1-1-3,
.body-24 .two-photo-video-1-1-2,
.body-24 .two-photo-video-1-1-3,
.body-24 .two-photo-video-1-1-7,
.body-24 .two-photo-video-16-9_950-1070-2,
.body-24 .two-photo-video-16-9_950-1070-2-copy,
.body-24 .video-slider {
  align-items: start;
}
.body-24 .four-poster-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .grid-36 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .photo-944x710-video-2-3-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-24 .three-photo-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .three-photo-4-5-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .three-photo-4-5-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .three-photo-video-photo-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-1-1-16 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-1-1-17 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-16-9-31 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-5-4-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-slider-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-video-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-video-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-video-1-1-7 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .two-photo-video-16-9_950-1070-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-24 .two-photo-video-16-9_950-1070-2-copy {
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
}
.body-24 .two-photo-video-16-9_950-1070-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-24 .two-slider-slider-16-9_950-1070-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-24 .two-video-video-16-9_950-1070-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .video-slider {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-24 .div-block-1012,
.body-24 .div-block-1028,
.body-24 .div-block-1136,
.body-24 .div-block-1518,
.body-24 .div-block-646,
.body-24 .div-block-70,
.body-24 .four-poster-3,
.body-24 .grid-36,
.body-24 .heading-body-2,
.body-24 .heading-body-4,
.body-24 .heading-body-47,
.body-24 .heading-body-48,
.body-24 .heading-body-49,
.body-24 .heading-body-5,
.body-24 .heading-body-5-copy,
.body-24 .heading-body-8-copy-copy,
.body-24 .heading-subheading-body-2,
.body-24 .heading-subheading-body-22,
.body-24 .one-photo-16-9-2,
.body-24 .one-photo-2-39-1-11,
.body-24 .one-photo-2-39-1-2,
.body-24 .one-photo-2-39-1-3,
.body-24 .one-photo-21-7-2,
.body-24 .one-slider-16-9-2,
.body-24 .one-slider-16-9-4,
.body-24 .one-slider-2-1-2,
.body-24 .one-video-16-9-2,
.body-24 .one-video-16-9-3,
.body-24 .one-video-16-9-8,
.body-24 .one-video-16-9-9,
.body-24 .one-video-1920x494-2,
.body-24 .one-video-2-39-1-2,
.body-24 .one-video-case-16-9-16,
.body-24 .one-video-case-16-9-2,
.body-24 .one-video-case-16-9-2-copy,
.body-24 .one-video-case-16-9-22,
.body-24 .one-video-case-16-9-3-copy-2,
.body-24 .photo-944x710-video-2-3-2,
.body-24 .three-photo-1-1-2,
.body-24 .three-photo-4-5-2,
.body-24 .three-photo-4-5-5,
.body-24 .three-photo-video-photo-1-1-3,
.body-24 .two-photo-1-1-16,
.body-24 .two-photo-1-1-17,
.body-24 .two-photo-1-1-2,
.body-24 .two-photo-1-1-3,
.body-24 .two-photo-5-4-4,
.body-24 .two-photo-slider-1-1-2,
.body-24 .two-photo-slider-1-1-3,
.body-24 .two-photo-video-1-1-2,
.body-24 .two-photo-video-1-1-3,
.body-24 .two-photo-video-1-1-7,
.body-24 .two-photo-video-16-9_950-1070-2,
.body-24 .two-photo-video-16-9_950-1070-2-copy,
.body-24 .two-photo-video-16-9_950-1070-3,
.body-24 .two-slider-slider-16-9_950-1070-2,
.body-24 .two-video-video-16-9_950-1070-2,
.body-24 .video-slider {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/grain-from-ukraine.html */
.body-36 .div-block-722,
.body-36 .div-block-899,
.body-36 .div-block-901,
.body-36 .div-block-903,
.body-36 .image-333,
.body-36 .image-608 {
  width: 100%;
}
.body-36 .grid-137,
.body-36 .two-photo-1-1-13,
.body-36 .two-photo-16-9-25,
.body-36 .two-photo-slider-1-1-3,
.body-36 .two-photo-slider-16-9-4,
.body-36 .two-photo-slider-3-2-3 {
  overflow: hidden;
}
.body-36 .grid-137,
.body-36 .two-photo-1-1-13,
.body-36 .two-photo-16-9-25,
.body-36 .two-photo-slider-1-1-3,
.body-36 .two-photo-slider-16-9-4,
.body-36 .two-photo-slider-3-2-3 {
  gap: 8px;
}
.body-36 .grid-137,
.body-36 .two-photo-1-1-13,
.body-36 .two-photo-16-9-25,
.body-36 .two-photo-slider-1-1-3,
.body-36 .two-photo-slider-3-2-3 {
  align-items: start;
}
.body-36 .grid-137 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-36 .two-photo-1-1-13 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-36 .two-photo-16-9-25 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-36 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-36 .two-photo-slider-16-9-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-36 .two-photo-slider-3-2-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-36 .div-block-905,
.body-36 .grid-137,
.body-36 .heading-body-42,
.body-36 .one-photo-16-9-2,
.body-36 .one-photo-21-7-6,
.body-36 .one-video-16-9-7,
.body-36 .two-photo-1-1-13,
.body-36 .two-photo-slider-1-1-3,
.body-36 .two-photo-slider-16-9-4,
.body-36 .two-photo-slider-3-2-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/green-light-films.html */
.body-48 .div-block-663,
.body-48 .div-block-667,
.body-48 .div-block-671,
.body-48 .image-452,
.body-48 .image-457,
.body-48 .image-458,
.body-48 .image-464,
.body-48 .image-466 {
  width: 100%;
}
.body-48 .fora-light,
.body-48 .fora-pin,
.body-48 .video-illustration,
.body-48 .video-poster-2-glf,
.body-48 .video-poster-glf {
  overflow: hidden;
}
.body-48 .photo-1-1-video-2000x1000-3,
.body-48 .photo-1200x710-photo-998x1300-5-glf2,
.body-48 .photo-1200x710-photo-998x1300-6-glf,
.body-48 .two-photo-1-1-5,
.body-48 .two-photo-1-1-6,
.body-48 .two-photo-16-9-11,
.body-48 .two-photo-16-9_950-1070-2,
.body-48 .two-photo-video-1-1-4,
.body-48 .two-video-video-16-9_950-1070-2 {
  overflow: hidden;
}
.body-48 .two-photo-1-1-5,
.body-48 .two-photo-1-1-6,
.body-48 .two-photo-16-9-11,
.body-48 .two-photo-16-9_950-1070-2,
.body-48 .two-photo-video-1-1-4 {
  gap: 8px;
}
.body-48 .two-photo-1-1-5,
.body-48 .two-photo-1-1-6,
.body-48 .two-photo-16-9-11,
.body-48 .two-photo-16-9_950-1070-2,
.body-48 .two-photo-video-1-1-4 {
  align-items: start;
}
.body-48 .photo-1200x710-photo-998x1300-5-glf2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-48 .photo-1200x710-photo-998x1300-6-glf {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-48 .two-photo-1-1-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-48 .two-photo-1-1-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-48 .two-photo-16-9-11 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-48 .two-photo-16-9_950-1070-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-48 .two-photo-video-1-1-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-48 .two-video-video-16-9_950-1070-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-48 .div-block-661,
.body-48 .heading-body-21,
.body-48 .heading-body-22,
.body-48 .heading-body-23,
.body-48 .heading-body-24,
.body-48 .one-photo-16-9-2,
.body-48 .one-photo-2-39-1-5,
.body-48 .photo-1-1-video-2000x1000-3,
.body-48 .photo-1200x710-photo-998x1300-5-glf2,
.body-48 .photo-1200x710-photo-998x1300-6-glf,
.body-48 .two-photo-1-1-5,
.body-48 .two-photo-1-1-6,
.body-48 .two-photo-16-9_950-1070-2,
.body-48 .two-photo-video-1-1-4,
.body-48 .two-video-video-16-9_950-1070-2 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/gvardiya-nastupu.html */
.body-39 .div-block-722,
.body-39 .image-578,
.body-39 .image-581,
.body-39 .image-582,
.body-39 .image-583,
.body-39 .image-584 {
  width: 100%;
}
.body-39 .citylight,
.body-39 .div-block-873 {
  overflow: hidden;
}
.body-39 .two-photo-16-9-23,
.body-39 .two-photo-slider-1-1-3,
.body-39 .two-photo-video-1-1-3 {
  overflow: hidden;
}
.body-39 .two-photo-16-9-23,
.body-39 .two-photo-slider-1-1-3,
.body-39 .two-photo-video-1-1-3 {
  gap: 8px;
}
.body-39 .two-photo-16-9-23,
.body-39 .two-photo-slider-1-1-3,
.body-39 .two-photo-video-1-1-3 {
  align-items: start;
}
.body-39 .two-photo-16-9-23 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-39 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-39 .two-photo-video-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-39 .div-block-872,
.body-39 .grid-132,
.body-39 .heading-body-40,
.body-39 .one-photo-16-9-2,
.body-39 .one-photo-21-7-2,
.body-39 .one-slider-16-9-4,
.body-39 .two-photo-slider-1-1-3,
.body-39 .two-photo-video-1-1-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/hartiya.html */
.body-80 .div-block-1304,
.body-80 .div-block-1306,
.body-80 .div-block-1309,
.body-80 .hartya1,
.body-80 .hartya2,
.body-80 .hartya3,
.body-80 .hartya4,
.body-80 .hartya5,
.body-80 .hartya6,
.body-80 .hartya7,
.body-80 .image-268,
.body-80 .image-7248,
.body-80 .image-7254,
.body-80 .image-7256 {
  width: 100%;
}
.body-80 .hartya1,
.body-80 .hartya2,
.body-80 .hartya3,
.body-80 .hartya4,
.body-80 .hartya5,
.body-80 .hartya6,
.body-80 .hartya7 {
  overflow: hidden;
}
.body-80 .photo-1200x710-photo-998x1300-8,
.body-80 .two-photo-16-9-35,
.body-80 .two-photo-3-4-4,
.body-80 .two-photo-slider-3-4-5,
.body-80 .two-photo-video-1-1-10,
.body-80 .two-photo-video-1-1-11,
.body-80 .two-photo-video-3-4-3 {
  overflow: hidden;
}
.body-80 .two-photo-16-9-35,
.body-80 .two-photo-3-4-4,
.body-80 .two-photo-slider-3-4-5,
.body-80 .two-photo-video-1-1-10,
.body-80 .two-photo-video-1-1-11,
.body-80 .two-photo-video-3-4-3 {
  gap: 8px;
}
.body-80 .two-photo-3-4-4,
.body-80 .two-photo-slider-3-4-5,
.body-80 .two-photo-video-1-1-10,
.body-80 .two-photo-video-1-1-11,
.body-80 .two-photo-video-3-4-3 {
  align-items: start;
}
.body-80 .photo-1200x710-photo-998x1300-8 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-80 .two-photo-16-9-35 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-80 .two-photo-3-4-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-80 .two-photo-slider-3-4-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-80 .two-photo-video-1-1-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-80 .two-photo-video-1-1-11 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-80 .two-photo-video-3-4-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-80 .div-block-1300,
.body-80 .heading-subheading-body-2,
.body-80 .one-photo-16-9-2,
.body-80 .one-video-1920x494-8,
.body-80 .one-video-21-7-5,
.body-80 .photo-1200x710-photo-998x1300-8,
.body-80 .two-photo-3-4-4,
.body-80 .two-photo-slider-3-4-5,
.body-80 .two-photo-video-1-1-10,
.body-80 .two-photo-video-1-1-11,
.body-80 .two-photo-video-3-4-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/intertop.html */
.body-6 .image-73 {
  width: 100%;
}
.body-6 .grid-5,
.body-6 .grid-6 {
  overflow: hidden;
}
.body-6 .grid-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-6 .div-block-70,
.body-6 .grid-11,
.body-6 .grid-14,
.body-6 .grid-15,
.body-6 .grid-7,
.body-6 .grid-8,
.body-6 .grid-9,
.body-6 .grid-9-copy,
.body-6 .heading-subheading-body {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/inzur.html */
.body-99 .image-7493 {
  width: 100%;
}
.body-99 .three-photo-4-5-12,
.body-99 .two-photo-16-9-46 {
  overflow: hidden;
}
.body-99 .three-photo-4-5-12,
.body-99 .two-photo-16-9-46 {
  gap: 8px;
}
.body-99 .three-photo-4-5-12 {
  align-items: start;
}
.body-99 .three-photo-4-5-12 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-99 .two-photo-16-9-46 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-99 .div-block-1588,
.body-99 .heading-body-68,
.body-99 .heading-body-69,
.body-99 .heading-subheading-body-24,
.body-99 .one-photo-16-9-2,
.body-99 .one-video-case-16-9-24,
.body-99 .three-photo-4-5-12 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/jabko-mega-case.html */
.body-23 .div-block-722,
.body-23 .image-599,
.body-23 .image-600,
.body-23 .image-601 {
  width: 100%;
}
.body-23 .colors-jabko_2,
.body-23 .div-block-889,
.body-23 .flag,
.body-23 .fora-fonts,
.body-23 .jabko-emboss {
  overflow: hidden;
}
.body-23 .grid-134,
.body-23 .grid-135,
.body-23 .two-photo-16-9-24,
.body-23 .two-photo-slider-1-1-3,
.body-23 .two-photo-slider-16-9_950-1070-6,
.body-23 .two-photo-video-1-1-3,
.body-23 .two-photo-video-16-9_950-1070-2,
.body-23 .video-slider {
  overflow: hidden;
}
.body-23 .grid-134,
.body-23 .grid-135,
.body-23 .two-photo-16-9-24,
.body-23 .two-photo-slider-1-1-3,
.body-23 .two-photo-slider-16-9_950-1070-6,
.body-23 .two-photo-video-1-1-3,
.body-23 .two-photo-video-16-9_950-1070-2 {
  gap: 8px;
}
.body-23 .two-photo-16-9-24,
.body-23 .two-photo-slider-1-1-3,
.body-23 .two-photo-video-1-1-3,
.body-23 .video-slider {
  align-items: start;
}
.body-23 .grid-135 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.body-23 .two-photo-16-9-24 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-23 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-23 .two-photo-slider-16-9_950-1070-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-23 .two-photo-video-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-23 .two-photo-video-16-9_950-1070-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-23 .video-slider {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-23 .div-block-887,
.body-23 .grid-134,
.body-23 .grid-135,
.body-23 .heading-body-41,
.body-23 .heading-subheading-body-3-copy-copy-2,
.body-23 .heading-subheading-body-3-copy-copy-copy,
.body-23 .one-photo-16-9-2,
.body-23 .one-photo-21-7-2,
.body-23 .one-slider-16-9-4,
.body-23 .one-video-16-9-7,
.body-23 .two-photo-slider-1-1-3,
.body-23 .two-photo-slider-16-9_950-1070-6,
.body-23 .two-photo-video-1-1-3,
.body-23 .two-photo-video-16-9_950-1070-2,
.body-23 .video-slider {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/klo.html */
.body-53 .div-block-722,
.body-53 .div-block-724,
.body-53 .image-492,
.body-53 .image-494 {
  width: 100%;
}
.body-53 .three-photo-4-5-2,
.body-53 .two-photo-1-1-10,
.body-53 .two-photo-16-9-14,
.body-53 .two-photo-16-9-15,
.body-53 .two-photo-16-9_950-1070-3 {
  overflow: hidden;
}
.body-53 .three-photo-4-5-2,
.body-53 .two-photo-1-1-10,
.body-53 .two-photo-16-9-14,
.body-53 .two-photo-16-9-15,
.body-53 .two-photo-16-9_950-1070-3 {
  gap: 8px;
}
.body-53 .three-photo-4-5-2 {
  align-items: start;
}
.body-53 .three-photo-4-5-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-53 .two-photo-1-1-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-53 .two-photo-16-9-14 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-53 .two-photo-16-9-15 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-53 .two-photo-16-9_950-1070-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-53 .div-block-719,
.body-53 .div-block-727,
.body-53 .heading-body-28-copy,
.body-53 .heading-body-29,
.body-53 .one-photo-16-9-2,
.body-53 .one-slider-2-1-2,
.body-53 .one-video-21-7-4,
.body-53 .three-photo-4-5-2,
.body-53 .two-photo-1-1-10,
.body-53 .two-photo-16-9-14,
.body-53 .two-photo-16-9_950-1070-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/liven.html */
.body-90 .div-block-1442,
.body-90 .image-7369,
.body-90 .size-video-1920x494-2 {
  width: 100%;
}
.body-90 .size-video-1920x494-2 {
  overflow: hidden;
}
.body-90 .three-photo-4-5-11,
.body-90 .three-photo-4-5-6,
.body-90 .two-photo-16-9-32,
.body-90 .two-photo-slider-16-9-9 {
  overflow: hidden;
}
.body-90 .three-photo-4-5-11,
.body-90 .three-photo-4-5-6,
.body-90 .two-photo-16-9-32,
.body-90 .two-photo-slider-16-9-9 {
  gap: 8px;
}
.body-90 .three-photo-4-5-11,
.body-90 .three-photo-4-5-6 {
  align-items: start;
}
.body-90 .three-photo-4-5-11 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-90 .three-photo-4-5-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-90 .two-photo-16-9-32 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-90 .two-photo-slider-16-9-9 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-90 .div-block-1439,
.body-90 .heading-subheading-body-19,
.body-90 .heading-subheading-body-8-copy-7,
.body-90 .one-video-1920x494-9,
.body-90 .three-photo-4-5-11,
.body-90 .three-photo-4-5-6,
.body-90 .two-photo-slider-16-9-9 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/lonza.html */
.body-67 .div-block-1101,
.body-67 .div-block-1107,
.body-67 .div-block-1111,
.body-67 .div-block-1112,
.body-67 .div-block-1113,
.body-67 .image-7128,
.body-67 .image-7130,
.body-67 .image-7131,
.body-67 .image-7135,
.body-67 .image-7136,
.body-67 .image-7139,
.body-67 .image-7142,
.body-67 .image-73-copy-copy {
  width: 100%;
}
.body-67 .div-block-1110,
.body-67 .size-video-16-9 {
  overflow: hidden;
}
.body-67 .grid-156,
.body-67 .three-photo-4-5-6,
.body-67 .three-photo-4-5-7,
.body-67 .two-photo-1-1-18,
.body-67 .two-photo-1-1-18-copy,
.body-67 .two-photo-16-9-11,
.body-67 .two-photo-16-9_950-1070-7,
.body-67 .two-photo-4-5-4,
.body-67 .two-photo-5-4-3,
.body-67 .two-photo-video-1-1-8 {
  overflow: hidden;
}
.body-67 .grid-156,
.body-67 .three-photo-4-5-6,
.body-67 .three-photo-4-5-7,
.body-67 .two-photo-1-1-18,
.body-67 .two-photo-1-1-18-copy,
.body-67 .two-photo-16-9-11,
.body-67 .two-photo-16-9_950-1070-7,
.body-67 .two-photo-4-5-4,
.body-67 .two-photo-5-4-3,
.body-67 .two-photo-video-1-1-8 {
  gap: 8px;
}
.body-67 .three-photo-4-5-6,
.body-67 .three-photo-4-5-7,
.body-67 .two-photo-16-9-11,
.body-67 .two-photo-4-5-4,
.body-67 .two-photo-5-4-3 {
  align-items: start;
}
.body-67 .grid-156 {
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
}
.body-67 .three-photo-4-5-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-67 .three-photo-4-5-7 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-67 .two-photo-1-1-18 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-67 .two-photo-1-1-18-copy {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-67 .two-photo-16-9-11 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-67 .two-photo-16-9_950-1070-7 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-67 .two-photo-4-5-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-67 .two-photo-5-4-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-67 .two-photo-video-1-1-8 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-67 .div-block-1100,
.body-67 .div-block-1118,
.body-67 .grid-156,
.body-67 .heading-subheading-body-8-copy-2,
.body-67 .heading-subheading-body-8-copy-copy,
.body-67 .one-photo-16-9-2,
.body-67 .one-photo-2-39-1-10,
.body-67 .one-photo-2-39-1-6-copy,
.body-67 .one-video-16-9-7,
.body-67 .one-video-case-16-9-15-copy,
.body-67 .three-photo-4-5-6,
.body-67 .three-photo-4-5-7,
.body-67 .two-photo-1-1-18,
.body-67 .two-photo-1-1-18-copy,
.body-67 .two-photo-16-9_950-1070-7,
.body-67 .two-photo-4-5-4,
.body-67 .two-photo-5-4-3,
.body-67 .two-photo-video-1-1-8 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/lyut.html */
.body-37 .div-block-722,
.body-37 .div-block-826,
.body-37 .div-block-827,
.body-37 .image-548 {
  width: 100%;
}
.body-37 .flag {
  overflow: hidden;
}
.body-37 .two-photo-16-9-21,
.body-37 .two-photo-slider-1-1-3,
.body-37 .two-photo-video-1-1-3 {
  overflow: hidden;
}
.body-37 .two-photo-16-9-21,
.body-37 .two-photo-slider-1-1-3,
.body-37 .two-photo-video-1-1-3 {
  gap: 8px;
}
.body-37 .two-photo-16-9-21,
.body-37 .two-photo-slider-1-1-3,
.body-37 .two-photo-video-1-1-3 {
  align-items: start;
}
.body-37 .two-photo-16-9-21 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-37 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-37 .two-photo-video-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-37 .div-block-830,
.body-37 .heading-body-37,
.body-37 .heading-subheading-body-6,
.body-37 .one-photo-16-9-2,
.body-37 .one-photo-21-7-5,
.body-37 .two-photo-slider-1-1-3,
.body-37 .two-photo-video-1-1-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/masterzoo.html */
.body-35 .div-block-449,
.body-35 .div-block-722,
.body-35 .div-block-913,
.body-35 .div-block-922,
.body-35 .image-331,
.body-35 .image-333,
.body-35 .image-336,
.body-35 .image-338,
.body-35 .image-340,
.body-35 .image-391,
.body-35 .image-392,
.body-35 .image-616,
.body-35 .image-617,
.body-35 .image-620,
.body-35 .image-622,
.body-35 .image-623,
.body-35 .image-625,
.body-35 .image-627 {
  width: 100%;
}
.body-35 .div-block-918,
.body-35 .masterzoo-video-1,
.body-35 .video-illustration,
.body-35 .video-logo,
.body-35 .video-merch,
.body-35 .video-sale,
.body-35 .video-text {
  overflow: hidden;
}
.body-35 .grid-140,
.body-35 .grid-78,
.body-35 .two-photo-1-1-14,
.body-35 .two-photo-16-9-8,
.body-35 .two-photo-hover-photo-1-1-3,
.body-35 .two-photo-slider-1-1-3,
.body-35 .two-photo-slider-16-9-2,
.body-35 .two-photo-video-1-1-3,
.body-35 .two-photo-video-16-9_950-1070-2,
.body-35 .video-slider {
  overflow: hidden;
}
.body-35 .grid-140,
.body-35 .grid-78,
.body-35 .two-photo-1-1-14,
.body-35 .two-photo-16-9-8,
.body-35 .two-photo-hover-photo-1-1-3,
.body-35 .two-photo-slider-1-1-3,
.body-35 .two-photo-slider-16-9-2,
.body-35 .two-photo-video-1-1-3,
.body-35 .two-photo-video-16-9_950-1070-2 {
  gap: 8px;
}
.body-35 .grid-140,
.body-35 .two-photo-16-9-8,
.body-35 .two-photo-hover-photo-1-1-3,
.body-35 .two-photo-slider-1-1-3,
.body-35 .two-photo-slider-16-9-2,
.body-35 .two-photo-video-1-1-3,
.body-35 .video-slider {
  align-items: start;
}
.body-35 .grid-140 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-35 .grid-78 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.body-35 .two-photo-1-1-14 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-35 .two-photo-16-9-8 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-35 .two-photo-hover-photo-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-35 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-35 .two-photo-slider-16-9-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-35 .two-photo-video-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-35 .two-photo-video-16-9_950-1070-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-35 .video-slider {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-35 .div-block-1004,
.body-35 .div-block-1226,
.body-35 .div-block-646,
.body-35 .div-block-70,
.body-35 .div-block-927,
.body-35 .grid-140,
.body-35 .grid-61,
.body-35 .grid-78,
.body-35 .heading-body-43,
.body-35 .heading-body-5-4,
.body-35 .heading-body-5-copy-copy,
.body-35 .heading-body-50,
.body-35 .heading-body-6,
.body-35 .heading-body-7,
.body-35 .heading-body-8,
.body-35 .heading-body-8-copy-copy,
.body-35 .heading-subheading-body-11,
.body-35 .heading-subheading-body-3-copy-copy,
.body-35 .heading-subheading-body-7,
.body-35 .one-photo-16-9-2,
.body-35 .one-photo-2-39-1-12,
.body-35 .one-slider-16-9-4,
.body-35 .one-video-16-9-7,
.body-35 .one-video-2-39-1-2,
.body-35 .one-video-21-7-3,
.body-35 .one-video-case-16-9-14,
.body-35 .one-video-case-16-9-3,
.body-35 .one-video-case-16-9-3-copy,
.body-35 .one-video-case-16-9-3-copy-3,
.body-35 .two-photo-1-1-14,
.body-35 .two-photo-16-9-8,
.body-35 .two-photo-hover-photo-1-1-3,
.body-35 .two-photo-slider-1-1-3,
.body-35 .two-photo-slider-16-9-2,
.body-35 .two-photo-video-1-1-3,
.body-35 .two-photo-video-16-9_950-1070-2,
.body-35 .two-slider-slider-16-9_950-1070-2,
.body-35 .video-slider {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/multiplex.html */
.body-55 .div-block-752,
.body-55 .image-504 {
  width: 100%;
}
.body-55 .four-poster-3,
.body-55 .photo-1200x710-photo-998x1300-7,
.body-55 .two-photo-16-9-17 {
  overflow: hidden;
}
.body-55 .two-photo-16-9-17 {
  gap: 8px;
}
.body-55 .four-poster-3 {
  align-items: start;
}
.body-55 .four-poster-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-55 .photo-1200x710-photo-998x1300-7 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-55 .two-photo-16-9-17 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-55 .div-block-747,
.body-55 .four-poster-3,
.body-55 .heading-body-32,
.body-55 .one-video-case-16-9-10,
.body-55 .photo-1200x710-photo-998x1300-7 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/oneclan.html */
.body-97 .div-block-1553,
.body-97 .div-block-1554,
.body-97 .div-block-1557,
.body-97 .div-block-1558,
.body-97 .div-block-1563,
.body-97 .image-7475,
.body-97 .image-7488,
.body-97 .size-video-1080x1350-3,
.body-97 .size-video-16-9-6 {
  width: 100%;
}
.body-97 .div-block-1561,
.body-97 .size-video-1080x1350-3,
.body-97 .size-video-16-9-6,
.body-97 .size-video-1920x803,
.body-97 .size-video-720x1080 {
  overflow: hidden;
}
.body-97 .grid-207,
.body-97 .photo-944x710-video-2-3-3,
.body-97 .three-photo-1-1-2,
.body-97 .two-photo-16-9-44,
.body-97 .two-photo-16-9_950-1070-11,
.body-97 .two-photo-4-5-9,
.body-97 .two-photo-video-4-5-6,
.body-97 .two-photo-video-4-5-6-copy {
  overflow: hidden;
}
.body-97 .grid-207,
.body-97 .three-photo-1-1-2,
.body-97 .two-photo-16-9-44,
.body-97 .two-photo-16-9_950-1070-11,
.body-97 .two-photo-4-5-9,
.body-97 .two-photo-video-4-5-6,
.body-97 .two-photo-video-4-5-6-copy {
  gap: 8px;
}
.body-97 .three-photo-1-1-2,
.body-97 .two-photo-4-5-9,
.body-97 .two-photo-video-4-5-6,
.body-97 .two-photo-video-4-5-6-copy {
  align-items: start;
}
.body-97 .grid-207 {
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
}
.body-97 .photo-944x710-video-2-3-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-97 .three-photo-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-97 .two-photo-16-9-44 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-97 .two-photo-16-9_950-1070-11 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-97 .two-photo-4-5-9 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-97 .two-photo-video-4-5-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-97 .two-photo-video-4-5-6-copy {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-97 .div-block-1552,
.body-97 .grid-207,
.body-97 .heading-body-66,
.body-97 .one-photo-16-9-2,
.body-97 .one-photo-16-9-2-copy,
.body-97 .one-video-16-9-7,
.body-97 .photo-944x710-video-2-3-3,
.body-97 .three-photo-1-1-2,
.body-97 .two-photo-16-9_950-1070-11,
.body-97 .two-photo-4-5-9,
.body-97 .two-photo-video-4-5-6,
.body-97 .two-photo-video-4-5-6-copy {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/port-frankivsk.html */
.body-51 .div-block-706,
.body-51 .div-block-707 {
  width: 100%;
}
.body-51 .fora-fonts,
.body-51 .photo-1-1-video-2000x1000-copy,
.body-51 .video-illustration {
  overflow: hidden;
}
.body-51 .photo-1-1-video-2000x1000-3,
.body-51 .photo-1-1-video-2000x1000-copy,
.body-51 .three-photo-1-1-2,
.body-51 .three-photo-video-photo-1-1-3,
.body-51 .two-photo-1-1-9,
.body-51 .two-photo-16-9-13 {
  overflow: hidden;
}
.body-51 .three-photo-1-1-2,
.body-51 .three-photo-video-photo-1-1-3,
.body-51 .two-photo-1-1-9,
.body-51 .two-photo-16-9-13 {
  gap: 8px;
}
.body-51 .photo-1-1-video-2000x1000-copy,
.body-51 .three-photo-1-1-2,
.body-51 .three-photo-video-photo-1-1-3 {
  align-items: start;
}
.body-51 .three-photo-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-51 .three-photo-video-photo-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-51 .two-photo-1-1-9 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-51 .two-photo-16-9-13 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-51 .div-block-704,
.body-51 .heading-body-27,
.body-51 .one-photo-2-39-1-5,
.body-51 .one-video-16-9-7,
.body-51 .pf-camos,
.body-51 .photo-1-1-video-2000x1000-3,
.body-51 .photo-1-1-video-2000x1000-copy,
.body-51 .three-photo-1-1-2,
.body-51 .three-photo-video-photo-1-1-3,
.body-51 .two-photo-1-1-9 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/privat-konverty.html */
.body-43 .image-419 {
  width: 100%;
}
.body-43 .photo-1200x710-photo-998x1300-3,
.body-43 .photo-1200x710-photo-998x1300-4,
.body-43 .two-photo-16-9-10 {
  overflow: hidden;
}
.body-43 .two-photo-16-9-10 {
  gap: 8px;
}
.body-43 .photo-1200x710-photo-998x1300-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-43 .photo-1200x710-photo-998x1300-4 {
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
}
.body-43 .two-photo-16-9-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-43 .div-block-70,
.body-43 .heading-body-16,
.body-43 .one-photo-21-7-2,
.body-43 .one-video-21-7-2,
.body-43 .one-video-case-16-9-4,
.body-43 .one-video-case-16-9-5,
.body-43 .photo-1200x710-photo-998x1300-3,
.body-43 .photo-1200x710-photo-998x1300-4 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/prom-dostavka.html */
.body-41 .image-391,
.body-41 .image-392 {
  width: 100%;
}
.body-41 .two-photo-16-9-10 {
  overflow: hidden;
}
.body-41 .two-photo-16-9-10 {
  gap: 8px;
}
.body-41 .two-photo-16-9-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-41 .div-block-70,
.body-41 .heading-body-14,
.body-41 .one-slider-16-9-4,
.body-41 .one-video-case-16-9-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/prom-katehoriyi.html */
.body-47 .div-block-637 {
  width: 100%;
}
.body-47 .two-photo-1-1-4,
.body-47 .two-photo-16-9-10 {
  overflow: hidden;
}
.body-47 .two-photo-1-1-4,
.body-47 .two-photo-16-9-10 {
  gap: 8px;
}
.body-47 .two-photo-1-1-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-47 .two-photo-16-9-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-47 .div-block-70,
.body-47 .heading-body-20,
.body-47 .one-video-case-16-9-8,
.body-47 .two-photo-1-1-4 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/prom-new-year.html */
.body-42 .image-399,
.body-42 .image-400,
.body-42 .image-401 {
  width: 100%;
}
.body-42 .two-photo-16-9-10 {
  overflow: hidden;
}
.body-42 .two-photo-16-9-10 {
  gap: 8px;
}
.body-42 .two-photo-16-9-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-42 .div-block-70,
.body-42 .heading-body-15,
.body-42 .one-slider-16-9-4,
.body-42 .one-video-1920x494-3,
.body-42 .one-video-case-16-9-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/prom.html */
.body-41 .div-block-1386,
.body-41 .div-block-1410,
.body-41 .div-block-1449,
.body-41 .div-block-1609,
.body-41 .div-block-637,
.body-41 .image-391,
.body-41 .image-392,
.body-41 .image-534,
.body-41 .image-535,
.body-41 .image-7234,
.body-41 .image-7236,
.body-41 .image-7309,
.body-41 .image-7325,
.body-41 .image-7376,
.body-41 .image-7512 {
  width: 100%;
}
.body-41 .size-video-16-9,
.body-41 .size-video-16-9-copy {
  overflow: hidden;
}
.body-41 .four-stories-2,
.body-41 .grid-78,
.body-41 .three-photo-4-5,
.body-41 .two-photo-1-1-21,
.body-41 .two-photo-1-1-22,
.body-41 .two-photo-1-1-24,
.body-41 .two-photo-1-1-28,
.body-41 .two-photo-1-1-4,
.body-41 .two-photo-16-9-10,
.body-41 .two-slider-slider-16-9_950-1070-5 {
  overflow: hidden;
}
.body-41 .grid-78,
.body-41 .three-photo-4-5,
.body-41 .two-photo-1-1-21,
.body-41 .two-photo-1-1-22,
.body-41 .two-photo-1-1-24,
.body-41 .two-photo-1-1-28,
.body-41 .two-photo-1-1-4,
.body-41 .two-photo-16-9-10,
.body-41 .two-slider-slider-16-9_950-1070-5 {
  gap: 8px;
}
.body-41 .four-stories-2,
.body-41 .three-photo-4-5 {
  align-items: start;
}
.body-41 .four-stories-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-41 .grid-78 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.body-41 .three-photo-4-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-41 .two-photo-1-1-21 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-41 .two-photo-1-1-22 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-41 .two-photo-1-1-24 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-41 .two-photo-1-1-28 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-41 .two-photo-1-1-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-41 .two-photo-16-9-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-41 .two-slider-slider-16-9_950-1070-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-41 .div-block-1266,
.body-41 .div-block-1391,
.body-41 .div-block-1415,
.body-41 .div-block-1456,
.body-41 .div-block-1610,
.body-41 .div-block-646,
.body-41 .div-block-70,
.body-41 .div-block-816,
.body-41 .four-stories-2,
.body-41 .grid-78,
.body-41 .heading-body-13,
.body-41 .heading-body-14,
.body-41 .heading-body-20,
.body-41 .heading-body-36,
.body-41 .heading-body-52,
.body-41 .heading-body-55,
.body-41 .heading-body-56,
.body-41 .heading-body-57,
.body-41 .heading-body-58,
.body-41 .heading-body-61,
.body-41 .heading-body-62,
.body-41 .heading-body-8,
.body-41 .heading-body-8-copy-copy,
.body-41 .heading-subheading-body-12,
.body-41 .heading-subheading-body-17,
.body-41 .heading-subheading-body-18,
.body-41 .heading-subheading-body-20,
.body-41 .heading-subheading-body-26,
.body-41 .one-photo-16-9-2,
.body-41 .one-photo-2-39-1-13,
.body-41 .one-slider-16-9-4,
.body-41 .one-slider-16-9-4-bk,
.body-41 .one-slider-2-1-2,
.body-41 .one-video-21-7-3,
.body-41 .one-video-case-16-9-13,
.body-41 .one-video-case-16-9-17,
.body-41 .one-video-case-16-9-19,
.body-41 .one-video-case-16-9-20,
.body-41 .one-video-case-16-9-21,
.body-41 .one-video-case-16-9-25,
.body-41 .one-video-case-16-9-3,
.body-41 .one-video-case-16-9-3-copy,
.body-41 .one-video-case-16-9-8,
.body-41 .three-photo-4-5,
.body-41 .two-photo-1-1-21,
.body-41 .two-photo-1-1-22,
.body-41 .two-photo-1-1-24,
.body-41 .two-photo-1-1-28,
.body-41 .two-photo-1-1-4,
.body-41 .two-slider-slider-16-9_950-1070-2,
.body-41 .two-slider-slider-16-9_950-1070-5 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/prostor.html */
.body-96 .div-block-1535,
.body-96 .div-block-1538,
.body-96 .div-block-1541,
.body-96 .div-block-1544,
.body-96 .div-block-1545,
.body-96 .div-block-1546,
.body-96 .div-block-1550,
.body-96 .image-7453,
.body-96 .image-7454,
.body-96 .image-7456,
.body-96 .image-7457,
.body-96 .size-video-1080x1350-3 {
  width: 100%;
}
.body-96 .div-block-1550,
.body-96 .size-video-1024x768,
.body-96 .size-video-1080x1080,
.body-96 .size-video-1080x1350-3 {
  overflow: hidden;
}
.body-96 .three-photo-video-photo-1-1-3,
.body-96 .two-photo-16-9-43,
.body-96 .two-photo-4-5-8,
.body-96 .two-photo-5-4-6,
.body-96 .two-photo-slider4-5-5,
.body-96 .two-photo-video-4-3-3,
.body-96 .two-photo-video-4-5-5,
.body-96 .video-slider {
  overflow: hidden;
}
.body-96 .three-photo-video-photo-1-1-3,
.body-96 .two-photo-16-9-43,
.body-96 .two-photo-4-5-8,
.body-96 .two-photo-5-4-6,
.body-96 .two-photo-slider4-5-5,
.body-96 .two-photo-video-4-3-3,
.body-96 .two-photo-video-4-5-5 {
  gap: 8px;
}
.body-96 .three-photo-video-photo-1-1-3,
.body-96 .two-photo-4-5-8,
.body-96 .two-photo-5-4-6,
.body-96 .two-photo-slider4-5-5,
.body-96 .two-photo-video-4-3-3,
.body-96 .two-photo-video-4-5-5,
.body-96 .video-slider {
  align-items: start;
}
.body-96 .three-photo-video-photo-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-96 .two-photo-16-9-43 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-96 .two-photo-4-5-8 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-96 .two-photo-5-4-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-96 .two-photo-slider4-5-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-96 .two-photo-video-4-3-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-96 .two-photo-video-4-5-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-96 .video-slider {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-96 .div-block-1539,
.body-96 .heading-body-65,
.body-96 .one-photo-16-9-2,
.body-96 .one-photo-2-39-1-21,
.body-96 .one-slider-16-9-6,
.body-96 .three-photo-video-photo-1-1-3,
.body-96 .two-photo-4-5-8,
.body-96 .two-photo-5-4-6,
.body-96 .two-photo-slider4-5-5,
.body-96 .two-photo-video-4-3-3,
.body-96 .two-photo-video-4-5-5,
.body-96 .video-slider {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/rozetka.html */
.body-66 .code-embed-6-copy,
.body-66 .cover-mob {
  width: 100%;
}
.body-66 .div-block-938 {
  overflow: hidden;
}
.body-66 .two-photo-16-9-28,
.body-66 .two-photo-16-9-29 {
  overflow: hidden;
}
.body-66 .two-photo-16-9-28,
.body-66 .two-photo-16-9-29 {
  gap: 8px;
}
.body-66 .two-photo-16-9-28 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-66 .two-photo-16-9-29 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-66 .div-block-1080,
.body-66 .heading-body-3,
.body-66 .heading-subheading-body-10,
.body-66 .one-video-case-16-9-15,
.body-66 .two-photo-16-9-28 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/skvot.html */
.body-44 .div-block-601 {
  width: 100%;
}
.body-44 .four-slider-poster-2,
.body-44 .two-photo-16-9-10,
.body-44 .video-slider {
  overflow: hidden;
}
.body-44 .two-photo-16-9-10 {
  gap: 8px;
}
.body-44 .four-slider-poster-2,
.body-44 .video-slider {
  align-items: start;
}
.body-44 .four-slider-poster-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-44 .two-photo-16-9-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-44 .video-slider {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-44 .div-block-70,
.body-44 .four-slider-poster-2,
.body-44 .heading-body-17,
.body-44 .one-photo-2-39-1-5,
.body-44 .one-video-case-16-9-6,
.body-44 .one-video-case-16-9-6-copy,
.body-44 .one-video-case-16-9-6-copy-copy,
.body-44 .video-slider {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/smart-prom-rozetka.html */
.body-95 .div-block-1528,
.body-95 .div-block-1529,
.body-95 .image-7440,
.body-95 .image-7444,
.body-95 .size-video-16-9-5 {
  width: 100%;
}
.body-95 .size-video-16-9-5 {
  overflow: hidden;
}
.body-95 .two-photo-16-9-46,
.body-95 .two-photo-5-4-5,
.body-95 .two-photo-slider-1-1-3 {
  overflow: hidden;
}
.body-95 .two-photo-16-9-46,
.body-95 .two-photo-5-4-5,
.body-95 .two-photo-slider-1-1-3 {
  gap: 8px;
}
.body-95 .two-photo-5-4-5,
.body-95 .two-photo-slider-1-1-3 {
  align-items: start;
}
.body-95 .two-photo-16-9-46 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-95 .two-photo-5-4-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-95 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-95 .div-block-1533,
.body-95 .heading-subheading-body-23,
.body-95 .one-photo-16-9-2,
.body-95 .one-slider-16-9-4,
.body-95 .one-video-16-9-7,
.body-95 .one-video-case-16-9-23,
.body-95 .two-photo-5-4-5,
.body-95 .two-photo-slider-1-1-3 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/sota-store.html */
.body-89 .div-block-1437,
.body-89 .image-7365 {
  width: 100%;
}
.body-89 .code-embed-15,
.body-89 .size-video-1080x1080,
.body-89 .size-video-16-9-3 {
  overflow: hidden;
}
.body-89 .photo-1200x710-photo-998x1300-8,
.body-89 .photo-1200x710-photo-998x1300-copy,
.body-89 .two-photo-1-1-23,
.body-89 .two-photo-16-9-32,
.body-89 .two-photo-slider-1-1-3,
.body-89 .two-photo-video-1-1-12 {
  overflow: hidden;
}
.body-89 .two-photo-1-1-23,
.body-89 .two-photo-16-9-32,
.body-89 .two-photo-slider-1-1-3,
.body-89 .two-photo-video-1-1-12 {
  gap: 8px;
}
.body-89 .two-photo-slider-1-1-3,
.body-89 .two-photo-video-1-1-12 {
  align-items: start;
}
.body-89 .photo-1200x710-photo-998x1300-8 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-89 .photo-1200x710-photo-998x1300-copy {
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
}
.body-89 .two-photo-1-1-23 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-89 .two-photo-16-9-32 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-89 .two-photo-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-89 .two-photo-video-1-1-12 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-89 .div-block-1431,
.body-89 .heading-body-4-copy,
.body-89 .heading-body-60,
.body-89 .one-photo-16-9-2,
.body-89 .one-photo-2-39-1-17,
.body-89 .one-video-16-9-7,
.body-89 .one-video-2-39-1-2,
.body-89 .photo-1200x710-photo-998x1300-8,
.body-89 .photo-1200x710-photo-998x1300-copy,
.body-89 .two-photo-1-1-23,
.body-89 .two-photo-slider-1-1-3,
.body-89 .two-photo-video-1-1-12 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/svitolina-foundation.html */
.body-25 .div-block-399,
.body-25 .div-block-404,
.body-25 .div-block-415,
.body-25 .image-307,
.body-25 .image-308,
.body-25 .image-310,
.body-25 .image-311,
.body-25 .image-312,
.body-25 .image-314 {
  width: 100%;
}
.body-25 .balls,
.body-25 .bottle,
.body-25 .bracellet,
.body-25 .div-block-397,
.body-25 .fora-fonts,
.body-25 .racket,
.body-25 .video-illustration {
  overflow: hidden;
}
.body-25 .grid-72,
.body-25 .grid-74,
.body-25 .three-photo-video-photo-1-1-2,
.body-25 .two-photo-1-1-3,
.body-25 .two-photo-16-9-5,
.body-25 .two-photo-3-2-2,
.body-25 .two-photo-video-1-1-3,
.body-25 .two-video-video-16-9_950-1070-7,
.body-25 .two-video-video-16-9_950-1070-8 {
  overflow: hidden;
}
.body-25 .grid-72,
.body-25 .grid-74,
.body-25 .three-photo-video-photo-1-1-2,
.body-25 .two-photo-1-1-3,
.body-25 .two-photo-16-9-5,
.body-25 .two-photo-3-2-2,
.body-25 .two-photo-video-1-1-3,
.body-25 .two-video-video-16-9_950-1070-7,
.body-25 .two-video-video-16-9_950-1070-8 {
  gap: 8px;
}
.body-25 .grid-72,
.body-25 .grid-74,
.body-25 .three-photo-video-photo-1-1-2,
.body-25 .two-photo-1-1-3,
.body-25 .two-photo-3-2-2,
.body-25 .two-photo-video-1-1-3 {
  align-items: start;
}
.body-25 .grid-72 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-25 .grid-74 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-25 .three-photo-video-photo-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-25 .two-photo-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-25 .two-photo-16-9-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-25 .two-photo-3-2-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-25 .two-photo-video-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-25 .two-video-video-16-9_950-1070-7 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-25 .two-video-video-16-9_950-1070-8 {
  grid-template-columns: minmax(0, 68%) minmax(0, 30%);
}
.body-25 .div-block-70,
.body-25 .grid-72,
.body-25 .grid-74,
.body-25 .heading-body-5,
.body-25 .one-photo-16-9-2,
.body-25 .one-photo-2-39-1-5,
.body-25 .one-slider-16-9-4,
.body-25 .one-slider-2-1-2,
.body-25 .one-video-16-9-4,
.body-25 .three-photo-video-photo-1-1-2,
.body-25 .two-photo-1-1-3,
.body-25 .two-photo-3-2-2,
.body-25 .two-photo-video-1-1-3,
.body-25 .two-video-video-16-9_950-1070-7,
.body-25 .two-video-video-16-9_950-1070-8 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/svitolina.html */
.body-78 .div-block-1249,
.body-78 .div-block-1252,
.body-78 .div-block-1255,
.body-78 .div-block-1258,
.body-78 .div-block-1259,
.body-78 .image-333,
.body-78 .image-7221,
.body-78 .image-7224,
.body-78 .image-7227,
.body-78 .image-7228,
.body-78 .image-7229,
.body-78 .svitolia-1,
.body-78 .svitolina-2,
.body-78 .svitolina-3,
.body-78 .svitolina-4 {
  width: 100%;
}
.body-78 .size-video-16-9-copy-copy,
.body-78 .svitolia-1,
.body-78 .svitolina-2,
.body-78 .svitolina-3,
.body-78 .svitolina-4 {
  overflow: hidden;
}
.body-78 .three-photo-1-1-2,
.body-78 .three-photo-4-5-8,
.body-78 .two-photo-16-9-32,
.body-78 .two-photo-3-2-2,
.body-78 .two-photo-4-5-2 {
  overflow: hidden;
}
.body-78 .three-photo-1-1-2,
.body-78 .three-photo-4-5-8,
.body-78 .two-photo-16-9-32,
.body-78 .two-photo-3-2-2,
.body-78 .two-photo-4-5-2 {
  gap: 8px;
}
.body-78 .three-photo-1-1-2,
.body-78 .three-photo-4-5-8,
.body-78 .two-photo-3-2-2,
.body-78 .two-photo-4-5-2 {
  align-items: start;
}
.body-78 .three-photo-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-78 .three-photo-4-5-8 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-78 .two-photo-16-9-32 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-78 .two-photo-3-2-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-78 .two-photo-4-5-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-78 .div-block-1245,
.body-78 .heading-body-51,
.body-78 .one-photo-16-9-2,
.body-78 .one-photo-21-7-2,
.body-78 .one-video-16-9-7,
.body-78 .three-photo-1-1-2,
.body-78 .three-photo-4-5-8,
.body-78 .two-photo-16-9_950-1070-9,
.body-78 .two-photo-3-2-2,
.body-78 .two-photo-4-5-2,
.body-78 .two-photo-5-4-2 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/ta-da.html */
.body-88 .code-embed-19-copy,
.body-88 .code-embed-19-copy-copy,
.body-88 .div-block-1465,
.body-88 .div-block-1468,
.body-88 .div-block-1471,
.body-88 .div-block-1473,
.body-88 .div-block-1476,
.body-88 .div-block-1478,
.body-88 .div-block-1479,
.body-88 .size-video-1080x1350 {
  width: 100%;
}
.body-88 .div-block-1475,
.body-88 .size-video-1080x1350,
.body-88 .size-video-16-9-2 {
  overflow: hidden;
}
.body-88 .two-photo-16-9-42,
.body-88 .two-photo-4-5-6,
.body-88 .two-photo-hover-photo-1-1-5,
.body-88 .two-photo-slider-16-9_950-1070-8,
.body-88 .two-photo-slider4-5-4,
.body-88 .two-photo-video-4-5-2 {
  overflow: hidden;
}
.body-88 .two-photo-16-9-42,
.body-88 .two-photo-4-5-6,
.body-88 .two-photo-hover-photo-1-1-5,
.body-88 .two-photo-slider-16-9_950-1070-8,
.body-88 .two-photo-slider4-5-4,
.body-88 .two-photo-video-4-5-2 {
  gap: 8px;
}
.body-88 .two-photo-4-5-6,
.body-88 .two-photo-hover-photo-1-1-5,
.body-88 .two-photo-slider4-5-4,
.body-88 .two-photo-video-4-5-2 {
  align-items: start;
}
.body-88 .two-photo-16-9-42 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-88 .two-photo-4-5-6 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-88 .two-photo-hover-photo-1-1-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-88 .two-photo-slider-16-9_950-1070-8 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-88 .two-photo-slider4-5-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-88 .two-photo-video-4-5-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-88 .div-block-1464,
.body-88 .heading-body-63,
.body-88 .one-photo-16-9-2,
.body-88 .one-photo-2-39-1-18,
.body-88 .one-slider-2-1-4,
.body-88 .two-photo-4-5-6,
.body-88 .two-photo-hover-photo-1-1-5,
.body-88 .two-photo-slider-16-9_950-1070-8,
.body-88 .two-photo-slider4-5-4,
.body-88 .two-photo-video-4-5-2 {
  padding-left: 20px;
  padding-right: 20px;
}
.body-88 .div-block-1471 {
  border-radius: 8px;
}

/* cases/tylovyky.html */
.body-46 .div-block-624,
.body-46 .image-203,
.body-46 .image-219,
.body-46 .image-431,
.body-46 .image-434 {
  width: 100%;
}
.body-46 .mentor,
.body-46 .mentor-military {
  overflow: hidden;
}
.body-46 .four-poster-2,
.body-46 .two-photo-1-1-4,
.body-46 .two-photo-16-9-10,
.body-46 .two-photo-hover-slider-1-1-3,
.body-46 .two-photo-video-16-9_950-1070-2,
.body-46 .two-photo-video-16-9_950-1070-2-copy,
.body-46 .video-slider {
  overflow: hidden;
}
.body-46 .two-photo-1-1-4,
.body-46 .two-photo-16-9-10,
.body-46 .two-photo-hover-slider-1-1-3,
.body-46 .two-photo-video-16-9_950-1070-2,
.body-46 .two-photo-video-16-9_950-1070-2-copy {
  gap: 8px;
}
.body-46 .four-poster-2,
.body-46 .two-photo-hover-slider-1-1-3,
.body-46 .video-slider {
  align-items: start;
}
.body-46 .four-poster-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-46 .two-photo-1-1-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-46 .two-photo-16-9-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-46 .two-photo-hover-slider-1-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-46 .two-photo-video-16-9_950-1070-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-46 .two-photo-video-16-9_950-1070-2-copy {
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
}
.body-46 .video-slider {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-46 .div-block-70,
.body-46 .four-poster-2,
.body-46 .heading-body-19,
.body-46 .heading-body-copy-copy,
.body-46 .one-photo-16-9-2,
.body-46 .one-photo-2-39-1-5,
.body-46 .two-photo-1-1-4,
.body-46 .two-photo-hover-slider-1-1-3,
.body-46 .two-photo-video-16-9_950-1070-2,
.body-46 .two-photo-video-16-9_950-1070-2-copy,
.body-46 .video-slider {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/viber.html */
.body-57 .div-block-782,
.body-57 .div-block-790,
.body-57 .image-333,
.body-57 .image-520,
.body-57 .image-524,
.body-57 .image-527 {
  width: 100%;
}
.body-57 .one-video-21-7,
.body-57 .viber-3-post,
.body-57 .viber_ig_posts_video,
.body-57 .viber_out_video,
.body-57 .viber_pay_video {
  overflow: hidden;
}
/* grid-124's "Nice colors" card (background-video-32-copy-copy) ships
   with a hardcoded width: 400px + height: 400px instead of the 100%
   its two sibling cards both use — so it never stretched to fill its
   own grid cell (a span-3-of-10 column), leaving blank space between
   it and the next card that read as a way-too-big gap even though the
   grid's own gap was already the correct 8px. Letting width go to
   100% and dropping the fixed height (aspect-ratio: 1, already on
   this class, computes it instead) fills the cell like its siblings
   do. */
.body-57 .background-video-32-copy-copy {
  width: 100%;
  height: auto;
}
.body-57 .grid-124,
.body-57 .two-photo-16-9-19,
.body-57 .two-photo-16-9_950-1070-4,
.body-57 .two-photo-16-9_950-1070-5,
.body-57 .two-photo-3-2-2,
.body-57 .two-photo-video-16-9-2,
.body-57 .two-photo-video-3-2-2,
.body-57 .two-photo-video-4-3-2 {
  overflow: hidden;
}
.body-57 .grid-124,
.body-57 .two-photo-16-9-19,
.body-57 .two-photo-16-9_950-1070-4,
.body-57 .two-photo-16-9_950-1070-5,
.body-57 .two-photo-3-2-2,
.body-57 .two-photo-video-16-9-2,
.body-57 .two-photo-video-3-2-2,
.body-57 .two-photo-video-4-3-2 {
  gap: 8px;
}
.body-57 .grid-124,
.body-57 .two-photo-16-9_950-1070-4,
.body-57 .two-photo-3-2-2,
.body-57 .two-photo-video-3-2-2,
.body-57 .two-photo-video-4-3-2 {
  align-items: start;
}
.body-57 .two-photo-16-9-19 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-57 .two-photo-16-9_950-1070-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-57 .two-photo-16-9_950-1070-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-57 .two-photo-3-2-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-57 .two-photo-video-16-9-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-57 .two-photo-video-3-2-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-57 .two-photo-video-4-3-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-57 .div-block-776,
.body-57 .grid-124,
.body-57 .heading-body-34,
.body-57 .one-photo-16-9-2,
.body-57 .one-video-16-9-7,
.body-57 .one-video-21-7,
.body-57 .one-video-case-16-9-11,
.body-57 .two-photo-16-9_950-1070-4,
.body-57 .two-photo-16-9_950-1070-5,
.body-57 .two-photo-3-2-2,
.body-57 .two-photo-video-16-9-2,
.body-57 .two-photo-video-3-2-2,
.body-57 .two-photo-video-4-3-2 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/viyar.html */
.body-100 .div-block-1590,
.body-100 .div-block-1592,
.body-100 .div-block-1595,
.body-100 .image-333,
.body-100 .image-7496,
.body-100 .image-7499,
.body-100 .image-7502,
.body-100 .image-7503,
.body-100 .image-7505 {
  width: 100%;
}
.body-100 .size-video-1080x1080,
.body-100 .size-video-1920x803-2 {
  overflow: hidden;
}
.body-100 .two-photo-1-1-27,
.body-100 .two-photo-16-9-44,
.body-100 .two-photo-16-9_950-1070-12,
.body-100 .two-photo-3-2-2,
.body-100 .two-photo-hover-slider-1-1-2,
.body-100 .two-photo-video-1-1-14 {
  overflow: hidden;
}
.body-100 .two-photo-1-1-27,
.body-100 .two-photo-16-9-44,
.body-100 .two-photo-16-9_950-1070-12,
.body-100 .two-photo-3-2-2,
.body-100 .two-photo-hover-slider-1-1-2,
.body-100 .two-photo-video-1-1-14 {
  gap: 8px;
}
.body-100 .two-photo-3-2-2,
.body-100 .two-photo-hover-slider-1-1-2,
.body-100 .two-photo-video-1-1-14 {
  align-items: start;
}
.body-100 .two-photo-1-1-27 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-100 .two-photo-16-9-44 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-100 .two-photo-16-9_950-1070-12 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-100 .two-photo-3-2-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-100 .two-photo-hover-slider-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-100 .two-photo-video-1-1-14 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-100 .div-block-1594,
.body-100 .heading-body-70,
.body-100 .heading-subheading-body-25,
.body-100 .one-photo-16-9-2,
.body-100 .one-photo-2-39-1-23,
.body-100 .one-photo-21-7-2,
.body-100 .one-slider-16-9-7,
.body-100 .one-video-2-39-1-2,
.body-100 .two-photo-1-1-27,
.body-100 .two-photo-16-9_950-1070-12,
.body-100 .two-photo-3-2-2,
.body-100 .two-photo-hover-slider-1-1-2,
.body-100 .two-photo-video-1-1-14 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/yasno.html */
.body-81 .div-block-1318,
.body-81 .image-333,
.body-81 .image-7260,
.body-81 .image-7268 {
  width: 100%;
}
.body-81 .two-photo-16-9-36,
.body-81 .two-photo-16-9-38,
.body-81 .two-photo-3-2-2,
.body-81 .two-photo-slider-16-9-8 {
  overflow: hidden;
}
.body-81 .two-photo-16-9-36,
.body-81 .two-photo-16-9-38,
.body-81 .two-photo-3-2-2,
.body-81 .two-photo-slider-16-9-8 {
  gap: 8px;
}
.body-81 .two-photo-3-2-2 {
  align-items: start;
}
.body-81 .two-photo-16-9-36 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-81 .two-photo-16-9-38 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-81 .two-photo-3-2-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-81 .two-photo-slider-16-9-8 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-81 .div-block-1320,
.body-81 .div-block-1332,
.body-81 .heading-subheading-body-13,
.body-81 .heading-subheading-body-14,
.body-81 .one-photo-16-9-2,
.body-81 .two-photo-16-9-36,
.body-81 .two-photo-3-2-2,
.body-81 .two-photo-slider-16-9-8 {
  padding-left: 20px;
  padding-right: 20px;
}

/* cases/yes.html */
.body-79 .div-block-1357,
.body-79 .div-block-1359,
.body-79 .div-block-1362,
.body-79 .div-block-1364,
.body-79 .image-7294,
.body-79 .image-7296,
.body-79 .image-7297,
.body-79 .svitolina-4,
.body-79 .yes,
.body-79 .yes-3,
.body-79 .yes-6 {
  width: 100%;
}
.body-79 .svitolina-4,
.body-79 .video-sale-2,
.body-79 .yes,
.body-79 .yes-2,
.body-79 .yes-3,
.body-79 .yes-4,
.body-79 .yes-5,
.body-79 .yes-6 {
  overflow: hidden;
}
.body-79 .four-poster-4,
.body-79 .grid-54,
.body-79 .three-photo-4-5-10-copy,
.body-79 .two-photo-1-1-20,
.body-79 .two-photo-16-9-34,
.body-79 .two-photo-16-9_950-1070-10,
.body-79 .two-photo-3-2-2,
.body-79 .two-photo-hover-slider-1-1-2,
.body-79 .two-photo-video-16-9_950-1070-4 {
  overflow: hidden;
}
.body-79 .three-photo-4-5-10-copy,
.body-79 .two-photo-1-1-20,
.body-79 .two-photo-16-9-34,
.body-79 .two-photo-16-9_950-1070-10,
.body-79 .two-photo-3-2-2,
.body-79 .two-photo-hover-slider-1-1-2,
.body-79 .two-photo-video-16-9_950-1070-4 {
  gap: 8px;
}
.body-79 .four-poster-4,
.body-79 .three-photo-4-5-10-copy,
.body-79 .two-photo-3-2-2,
.body-79 .two-photo-hover-slider-1-1-2 {
  align-items: start;
}
.body-79 .four-poster-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-79 .grid-54 {
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
}
.body-79 .three-photo-4-5-10-copy {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-79 .two-photo-1-1-20 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-79 .two-photo-16-9-34 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-79 .two-photo-16-9_950-1070-10 {
  grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
}
.body-79 .two-photo-3-2-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-79 .two-photo-hover-slider-1-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.body-79 .two-photo-video-16-9_950-1070-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.body-79 .div-block-1282,
.body-79 .div-block-1355,
.body-79 .four-poster-4,
.body-79 .grid-54,
.body-79 .heading-body-13-copy,
.body-79 .heading-body-53,
.body-79 .heading-body-54,
.body-79 .heading-subheading-body-15,
.body-79 .heading-subheading-body-16,
.body-79 .heading-subheading-body-8-copy-4,
.body-79 .heading-subheading-body-8-copy-5,
.body-79 .heading-subheading-body-8-copy-6,
.body-79 .one-photo-16-9-2,
.body-79 .one-photo-2-39-1-14,
.body-79 .one-photo-2-39-1-15,
.body-79 .one-slider-2-1-2,
.body-79 .one-video-case-16-9-18,
.body-79 .one-video-case-16-9-3-copy-4,
.body-79 .three-photo-4-5-10-copy,
.body-79 .two-photo-1-1-20,
.body-79 .two-photo-16-9_950-1070-10,
.body-79 .two-photo-3-2-2,
.body-79 .two-photo-hover-slider-1-1-2,
.body-79 .two-photo-video-16-9_950-1070-4,
.body-79 .two-slider-slider-16-9_950-1070-2 {
  padding-left: 20px;
  padding-right: 20px;
}
.body-79 .div-block-1362 {
  border-radius: 8px;
}
/* ============================================================
   Site-wide image/video corner-rounding fix, all case pages except
   SCM (already has its own copy above). The blanket "img {
   border-radius: 8px }" fallback earlier in this file is a bare
   type selector — the lowest possible specificity — so it loses to
   every one of Webflow's own per-instance rules like
   ".image-7182 { border-radius: 16px }", which is exactly what was
   still showing 16px corners across every case page except SCM
   (SCM has ".body-98 img { border-radius: 8px }", a class+type
   selector that outranks a bare class selector and so actually
   wins). This is that same rule for every other case page, plus a
   few pages whose hero photo uses an asymmetric radius (rounded
   bottom only, square top under the nav — the same intentional
   pattern as SCM's own hero) re-declared as 0 0 8px 8px instead of
   flat 8px so that shape isn't lost, and the background-image
   hover-slider divs (photos painted as CSS backgrounds rather than
   <img> tags, so neither of the above ever reached them) rounded
   the same way SCM's own div-block-1083-copy/1576 needed. */

/* cases/6037.html */
.body-93 img,
.body-93 video {
  border-radius: 8px;
}

/* cases/alterra.html */
.body-75 img,
.body-75 video {
  border-radius: 8px;
}
.body-75 .image-7188 {
  border-radius: 0 0 8px 8px;
}

/* cases/bezpekove-seredovishche.html */
.body-33 img,
.body-33 video {
  border-radius: 8px;
}

/* cases/brabrabra.html */
.body-54 img,
.body-54 video {
  border-radius: 8px;
}

/* cases/demine-ukraine.html */
.body-50 img,
.body-50 video {
  border-radius: 8px;
}

/* cases/divo.html */
.body-56 img,
.body-56 video {
  border-radius: 8px;
}
.body-56 .div-block-253-copy,
.body-56 .div-block-765 {
  border-radius: 8px;
}

/* cases/dobrodiy-club.html */
.body-58 img,
.body-58 video {
  border-radius: 8px;
}
.body-58 .image-650 {
  border-radius: 0 0 8px 8px;
}

/* cases/favbet.html */
.body-45 img,
.body-45 video {
  border-radius: 8px;
}

/* cases/fishka.html */
.body-92 img,
.body-92 video {
  border-radius: 8px;
}

/* cases/fora-cafe.html */
.body-38 img,
.body-38 video {
  border-radius: 8px;
}

/* cases/fora-rk.html */
.body-34 img,
.body-34 video {
  border-radius: 8px;
}

/* cases/fora.html */
.body-24 img,
.body-24 video {
  border-radius: 8px;
}
.body-24 .div-block-378 {
  border-radius: 8px;
}

/* cases/grain-from-ukraine.html */
.body-36 img,
.body-36 video {
  border-radius: 8px;
}

/* cases/green-light-films.html */
.body-48 img,
.body-48 video {
  border-radius: 8px;
}
.body-48 .image-452 {
  border-radius: 0 0 8px 8px;
}

/* cases/gvardiya-nastupu.html */
.body-39 img,
.body-39 video {
  border-radius: 8px;
}

/* cases/hartiya.html */
.body-80 img,
.body-80 video {
  border-radius: 8px;
}

/* cases/intertop.html */
.body-6 img,
.body-6 video {
  border-radius: 8px;
}
.body-6 .beige,
.body-6 .black,
.body-6 .blue,
.body-6 .blue-green,
.body-6 .div-block-78,
.body-6 .div-block-79,
.body-6 .div-block-87,
.body-6 .div-block-88,
.body-6 .div-block-89,
.body-6 .div-block-90,
.body-6 .div-block-91,
.body-6 .div-block-92,
.body-6 .div-block-93,
.body-6 .div-block-94,
.body-6 .gray,
.body-6 .mint,
.body-6 .red,
.body-6 .yellow {
  border-radius: 8px;
}

/* cases/inzur.html */
.body-99 img,
.body-99 video {
  border-radius: 8px;
}

/* cases/jabko-mega-case.html */
.body-23 img,
.body-23 video {
  border-radius: 8px;
}

/* cases/klo.html */
.body-53 img,
.body-53 video {
  border-radius: 8px;
}

/* cases/liven.html */
.body-90 img,
.body-90 video {
  border-radius: 8px;
}

/* cases/lonza.html */
.body-67 img,
.body-67 video {
  border-radius: 8px;
}
.body-67 .image-7128 {
  border-radius: 0 0 8px 8px;
}
.body-67 .image-7139 {
  border-radius: 0 0 8px 8px;
}

/* cases/lyut.html */
.body-37 img,
.body-37 video {
  border-radius: 8px;
}

/* cases/masterzoo.html */
.body-35 img,
.body-35 video {
  border-radius: 8px;
}
.body-35 .div-block-926 {
  border-radius: 8px;
}

/* cases/multiplex.html */
.body-55 img,
.body-55 video {
  border-radius: 8px;
}

/* cases/oneclan.html */
.body-97 img,
.body-97 video {
  border-radius: 8px;
}

/* cases/port-frankivsk.html */
.body-51 img,
.body-51 video {
  border-radius: 8px;
}
.body-51 .div-block-216-copy {
  border-radius: 8px;
}

/* cases/privat-konverty.html */
.body-43 img,
.body-43 video {
  border-radius: 8px;
}

/* cases/prom-dostavka.html */
.body-41 img,
.body-41 video {
  border-radius: 8px;
}

/* cases/prom-katehoriyi.html */
.body-47 img,
.body-47 video {
  border-radius: 8px;
}

/* cases/prom-new-year.html */
.body-42 img,
.body-42 video {
  border-radius: 8px;
}

/* cases/prom.html */
.body-41 img,
.body-41 video {
  border-radius: 8px;
}

/* cases/prostor.html */
.body-96 img,
.body-96 video {
  border-radius: 8px;
}

/* cases/rozetka.html */
.body-66 img,
.body-66 video {
  border-radius: 8px;
}

/* cases/skvot.html */
.body-44 img,
.body-44 video {
  border-radius: 8px;
}

/* cases/smart-prom-rozetka.html */
.body-95 img,
.body-95 video {
  border-radius: 8px;
}

/* cases/sota-store.html */
.body-89 img,
.body-89 video {
  border-radius: 8px;
}

/* cases/svitolina-foundation.html */
.body-25 img,
.body-25 video {
  border-radius: 8px;
}

/* cases/svitolina.html */
.body-78 img,
.body-78 video {
  border-radius: 8px;
}

/* cases/ta-da.html */
.body-88 img,
.body-88 video {
  border-radius: 8px;
}
.body-88 .div-block-1471,
.body-88 .image-7390 {
  border-radius: 8px;
}

/* cases/tylovyky.html */
.body-46 img,
.body-46 video {
  border-radius: 8px;
}

/* cases/viber.html */
.body-57 img,
.body-57 video {
  border-radius: 8px;
}

/* cases/viyar.html */
.body-100 img,
.body-100 video {
  border-radius: 8px;
}

/* cases/yasno.html */
.body-81 img,
.body-81 video {
  border-radius: 8px;
}

/* cases/yes.html */
.body-79 img,
.body-79 video {
  border-radius: 8px;
}
.body-79 .div-block-1362,
.body-79 .image-202 {
  border-radius: 8px;
}
/* ============================================================
   Vertical rhythm between stacked content blocks, every case page —
   same fix as SCM's own .section-146 (was 20px top-to-bottom while
   photos sit 8px apart side-by-side within a block; now both read
   the same 8px). Hero/cover sections (main-section*) are excluded —
   that gap is between the title text and the cover photo, a
   different relationship, not the card-to-card rhythm this fixes. */

/* cases/6037.html */
.body-93 .section-142,
.body-93 .section-143 {
  gap: 8px;
}

/* cases/alterra.html */
.body-75 .identity-overview,
.body-75 .section-104,
.body-75 .section-106,
.body-75 .section-107,
.body-75 .section-108,
.body-75 .strategy1-2 {
  gap: 8px;
}

/* cases/bezpekove-seredovishche.html */
.body-33 .section-29 {
  gap: 8px;
}

/* cases/brabrabra.html */
.body-54 .section-68 {
  gap: 8px;
}

/* cases/demine-ukraine.html */
.body-50 .identity-3,
.body-50 .logotype-3,
.body-50 .overview {
  gap: 8px;
}

/* cases/divo.html */
.body-56 .section-27 {
  gap: 8px;
}

/* cases/dobrodiy-club.html */
.body-58 .color,
.body-58 .elements,
.body-58 .identity-overview,
.body-58 .logo-2,
.body-58 .strategy1 {
  gap: 8px;
}

/* cases/favbet.html */
.body-45 .section-61 {
  gap: 8px;
}

/* cases/fishka.html */
.body-92 .section-140,
.body-92 .section-141,
.body-92 .typography {
  gap: 8px;
}

/* cases/fora-rk.html */
.body-34 .section-29 {
  gap: 8px;
}

/* cases/fora.html */
.body-24 .brief,
.body-24 .colors,
.body-24 .fonts,
.body-24 .fora-hr,
.body-24 .fora-kus,
.body-24 .section-28,
.body-24 .section-29,
.body-24 .section-98 {
  gap: 8px;
}

/* cases/grain-from-ukraine.html */
.body-36 .section-76 {
  gap: 8px;
}

/* cases/green-light-films.html */
.body-48 .layout,
.body-48 .logotype-2 {
  gap: 8px;
}

/* cases/gvardiya-nastupu.html */
.body-39 .section-74 {
  gap: 8px;
}

/* cases/hartiya.html */
.body-80 .example-2,
.body-80 .section-117,
.body-80 .section-118,
.body-80 .section-119 {
  gap: 8px;
}

/* cases/jabko-mega-case.html */
.body-23 .identity-jabko {
  gap: 8px;
}

/* cases/klo.html */
.body-53 .identity-3,
.body-53 .section-67 {
  gap: 8px;
}

/* cases/liven.html */
.body-90 .strategy1-2 {
  gap: 8px;
}

/* cases/lonza.html */
.body-67 .identity-overview,
.body-67 .strategy1 {
  gap: 8px;
}

/* cases/masterzoo.html */
.body-35 .advertising-companies-3,
.body-35 .identity-4,
.body-35 .karaoke,
.body-35 .masterzoo-ny,
.body-35 .section-110 {
  gap: 8px;
}

/* cases/port-frankivsk.html */
.body-51 .identity-3 {
  gap: 8px;
}

/* cases/privat-konverty.html */
.body-43 .section-59 {
  gap: 8px;
}

/* cases/prom-dostavka.html */
.body-41 .section-54 {
  gap: 8px;
}

/* cases/prom-katehoriyi.html */
.body-47 .section-63 {
  gap: 8px;
}

/* cases/prom-new-year.html */
.body-42 .section-55 {
  gap: 8px;
}

/* cases/prom.html */
.body-41 .prom-black-friday,
.body-41 .prom-jingle-bells,
.body-41 .prom-love-season,
.body-41 .section-115,
.body-41 .section-53,
.body-41 .section-54,
.body-41 .section-63,
.body-41 .section-72 {
  gap: 8px;
}

/* cases/prostor.html */
.body-96 .section-145 {
  gap: 8px;
}

/* cases/skvot.html */
.body-44 .section-60 {
  gap: 8px;
}

/* cases/sota-store.html */
.body-89 .one-elements {
  gap: 8px;
}

/* cases/svitolina-foundation.html */
.body-25 .section-29,
.body-25 .section-40,
.body-25 .section-41 {
  gap: 8px;
}

/* cases/svitolina.html */
.body-78 .section-114 {
  gap: 8px;
}

/* cases/tylovyky.html */
.body-46 .section-62 {
  gap: 8px;
}

/* cases/viber.html */
.body-57 .section-69 {
  gap: 8px;
}

/* cases/viyar.html */
.body-100 .section-148 {
  gap: 8px;
}

/* cases/yasno.html */
.body-81 .section-120 {
  gap: 8px;
}

/* cases/yes.html */
.body-79 .section-116 {
  gap: 8px;
}
/* ============================================================
   Cover/hero photo rounding, every case page (added after the
   img/video/bg-image sweep above still left the hero banner right
   under the nav unrounded on every page except SCM — SCM's hero
   wrapper, div-block-1567, was fixed by hand early on with a
   deliberately asymmetric border-bottom-*-radius: 8px (square top,
   since it runs full-bleed under the nav; rounded bottom, where it
   meets the rest of the page). Every other page's hero wrapper
   turned out to follow the exact same shape — same clip pattern,
   same "square top / rounded bottom" — so it gets the same
   treatment here: bottom-only 8px where Webflow's own CSS already
   used a bottom-only radius (or set none at all, which is what SCM
   and Viber's own wrappers do — the asymmetry lives in the design,
   not always in an explicit CSS value), flat 8px + overflow: hidden
   for anything else inside the hero section (secondary video
   embeds etc. that just needed the same rounding as everywhere
   else, not the hero's own asymmetric shape). */

/* cases/6037.html */
.body-93 .div-block-1505 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.body-93 .image-7422,
.body-93 .image-7423,
.body-93 .image-7424,
.body-93 .image-7425,
.body-93 .size-video-1080x1350-2,
.body-93 .size-video-16-9-4 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/alterra.html */
.body-75 .div-block-1187,
.body-75 .image-7188 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/bezpekove-seredovishche.html */
.body-33 .div-block-274 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/brabrabra.html */
.body-54 .div-block-737 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/demine-ukraine.html */
.body-50 .div-block-683 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/divo.html */
.body-56 .div-block-764 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/dobrodiy-club.html */
.body-58 .div-block-938,
.body-58 .image-650 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/favbet.html */
.body-45 .div-block-605 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/fishka.html */
.body-92 .div-block-331 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/fora-cafe.html */
.body-38 .div-block-268,
.body-38 .div-block-485,
.body-38 .image-361,
.body-38 .image-363,
.body-38 .image-365 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/fora-rk.html */
.body-34 .div-block-430 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/fora.html */
.body-24 .div-block-248 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/grain-from-ukraine.html */
.body-36 .div-block-898 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/green-light-films.html */
.body-48 .div-block-658,
.body-48 .image-452 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/gvardiya-nastupu.html */
.body-39 .div-block-871 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/hartiya.html */
.body-80 .div-block-1298 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/intertop.html */
.body-6 .div-block-69 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/inzur.html */
.body-99 .div-block-1587 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.body-99 .div-block-1585,
.body-99 .image-7445,
.body-99 .image-7445-copy,
.body-99 .image-7493,
.body-99 .image-7494 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/jabko-mega-case.html */
.body-23 .div-block-884 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/klo.html */
.body-53 .div-block-718,
.body-53 .image-490 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/liven.html */
.body-90 .div-block-1441,
.body-90 .left-arrow-54,
.body-90 .right-arrow-60 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.body-90 .image-7369,
.body-90 .image-7370,
.body-90 .size-video-1920x494-2 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/lonza.html */
.body-67 .div-block-1097,
.body-67 .image-7128 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/lyut.html */
.body-37 .div-block-825 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.body-37 .flag,
.body-37 .image-545,
.body-37 .image-548,
.body-37 .image-549 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/masterzoo.html */
.body-35 .div-block-432,
.body-35 .image-339 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/multiplex.html */
.body-55 .div-block-755 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.body-55 .div-block-758,
.body-55 .image-503,
.body-55 .image-505,
.body-55 .image-506,
.body-55 .image-508 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/oneclan.html */
.body-97 .div-block-1561,
.body-97 .size-video-1920x803 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.body-97 .code-embed-35,
.body-97 .div-block-1504-copy,
.body-97 .div-block-1557,
.body-97 .image-7422,
.body-97 .image-7466,
.body-97 .image-7467,
.body-97 .image-7469,
.body-97 .image-7470,
.body-97 .image-7471,
.body-97 .image-7474,
.body-97 .image-7475,
.body-97 .image-7487,
.body-97 .image-7488,
.body-97 .image-7489,
.body-97 .size-video-1080x1350-3,
.body-97 .size-video-16-9-6,
.body-97 .size-video-720x1080 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/port-frankivsk.html */
.body-51 .div-block-703,
.body-51 .logo-pf {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/privat-konverty.html */
.body-43 .div-block-231 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/prom-dostavka.html */
.body-41 .div-block-551 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/prom-katehoriyi.html */
.body-47 .div-block-632 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/prom-new-year.html */
.body-42 .div-block-563 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/prom.html */
.body-41 .div-block-632 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/prostor.html */
.body-96 .div-block-1543 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.body-96 .div-block-1535,
.body-96 .div-block-1550,
.body-96 .image-7411,
.body-96 .image-7450,
.body-96 .image-7456,
.body-96 .image-7457,
.body-96 .image-7458,
.body-96 .image-7460,
.body-96 .image-7461,
.body-96 .one-slider-16-9-6,
.body-96 .size-video-1024x768,
.body-96 .size-video-1080x1080,
.body-96 .size-video-1080x1350-3 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/rozetka.html */
.body-66 .div-block-938 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/skvot.html */
.body-44 .div-block-594 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/smart-prom-rozetka.html */
.body-95 .div-block-1532 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.body-95 .div-block-1527,
.body-95 .image-7439,
.body-95 .image-7440,
.body-95 .image-7444,
.body-95 .image-7445,
.body-95 .size-video-16-9-5 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/sota-store.html */
.body-89 .div-block-1433 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/svitolina-foundation.html */
.body-25 .div-block-417 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/svitolina.html */
.body-78 .div-block-1248 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/ta-da.html */
.body-88 .div-block-1475 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.body-88 .image-7397,
.body-88 .image-7404,
.body-88 .size-video-1080x1350,
.body-88 .size-video-16-9-2 {
  border-radius: 8px;
  overflow: hidden;
}

/* cases/tylovyky.html */
.body-46 .div-block-616 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/viber.html */
.body-57 .div-block-779 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/viyar.html */
.body-100 .div-block-1598 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/yasno.html */
.body-81 .div-block-1317 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* cases/yes.html */
.body-79 .div-block-1358 {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.body-79 .div-block-1362,
.body-79 .image-202,
.body-79 .image-207,
.body-79 .image-209,
.body-79 .image-7293,
.body-79 .image-7297,
.body-79 .image-7299,
.body-79 .image-7302,
.body-79 .svitolina-4,
.body-79 .yes,
.body-79 .yes-2,
.body-79 .yes-3,
.body-79 .yes-4,
.body-79 .yes-5,
.body-79 .yes-6 {
  border-radius: 8px;
  overflow: hidden;
}

/* Site-wide header pill (every page — .menu-2-copy is the wrapper class
   everywhere except index.html, which uses .menu-2-copy-copy; piloted on
   the homepage first, now rolled out everywhere so every page's header
   matches). Logo + nav links live together in one small floating glass
   chip, top-left, mirroring the clock+dots chip top-right. (Centering was
   tried and reverted — back to top-left.) */
.menu-2-copy,
.menu-2-copy-copy {
  box-sizing: border-box;
  width: fit-content;
  height: 44px;
  top: 16px;
  left: 20px;
  right: auto;
  padding: 8px 16px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.menu-2-copy.on-light,
.menu-2-copy-copy.on-light {
  background-color: rgba(20, 20, 20, 0.75);
}
.menu-2-copy::after,
.menu-2-copy-copy::after {
  display: none;
}
/* The logo image carries its own 130x27.57px size site-wide
   (.image-97/.image-97-copy), taller than the room this 44px-tall chip
   has once its 8px top/bottom padding is subtracted. width: auto (letting
   the SVG's own intrinsic ratio compute it from height: 24px) works once
   the page has already laid out once, but on a cold load the SVG's
   intrinsic size isn't always known yet at the moment this fixed,
   fit-content-width box first measures itself, and the auto-width
   calculation gets stuck at 0 instead of re-running once the asset
   resolves — reproduced directly (inline style toggles after load always
   render correctly; only the very first paint could come back 0). A
   hardcoded width sized to the same 130:27.57 ratio at 24px tall sidesteps
   needing that intrinsic-size lookup at all. */
.menu-2-copy .div-block-198 .image-97,
.menu-2-copy .div-block-198 .image-97-copy,
.menu-2-copy-copy .div-block-198 .image-97,
.menu-2-copy-copy .div-block-198 .image-97-copy {
  height: 24px;
  width: 113px;
}
.menu-2-copy .div-block-189,
.menu-2-copy-copy .div-block-189 {
  margin-left: 24px;
}

/* Homepage "Сервіси" block — laid out and sized like koto.com's own
   Contact block (big light-weight title top-left over a photo card,
   divider-line row list top-right: label | description, on the page's own
   dark background, no white card). The section already existed in the
   Webflow export with this content, it's just `display: none` in the base
   theme CSS — turning it back on and giving it the same 16px page gutter
   as every other section instead of touching the viewport edges. */
.services {
  display: flex;
  justify-content: center;
  padding-top: 170px;
  padding-bottom: 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.card-services {
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  column-gap: 140px;
}

/* Left column: title + photo card. .card-services now stretches both
   columns to the same height (the row list's height), and this puts
   `justify-content: space-between` on the left column so the slideshow
   sits pinned to its bottom, level with the row list's last divider,
   instead of floating right under the heading — matching koto.com's
   photo card, which sits low in its column, not right under the title. */
.services-left {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  flex: 0 1 420px;
  min-width: 260px;
}

.card-services .heading-7 {
  color: var(--color--white);
  font-weight: 300;
  font-size: 40px;
  line-height: 110%;
  letter-spacing: -0.01em;
}

/* Slideshow of real case covers, replacing the static team photo — each
   slide links straight to that case's page. Slides are stacked absolutely
   and cross-fade via .is-active (toggled by js/services-slideshow.js);
   plain CSS keeps the first slide visible even if the script fails to
   load. */
.services-slideshow {
  display: block;
  position: relative;
  width: 100%;
  max-width: 366px;
  height: 220px;
  margin-top: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.services-slideshow-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.services-slideshow-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.services-slideshow-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Darkens the bottom third of each slide so the caption stays legible
   over bright/busy case photos. A real element (not a ::before/::after on
   the slide) so it reliably paints between the img and the caption text
   regardless of stacking order. */
.services-slideshow-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.services-slideshow-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  flex-flow: column;
  gap: 2px;
  color: var(--color--white);
}

.services-slideshow-caption-name {
  font-family: Taktikasans, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 140%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.services-slideshow-caption-tagline {
  font-family: Taktikasans, sans-serif;
  font-size: 13px;
  line-height: 140%;
  color: rgba(255, 255, 255, 0.7);
}

/* Rows/label column were hardcoded to a fixed 870px/145px in the Webflow
   export (sized for a much wider prototype layout) — make them fluid so
   the list can actually shrink to the page's 16px gutter instead of
   overflowing it. */
.div-block-44 {
  width: 100%;
  max-width: 800px;
  min-width: 0;
  flex: 1;
}

.div-block-151,
.div-block-64,
.div-block-65,
.services-row-web {
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  padding-top: 36px;
  padding-bottom: 36px;
}

.div-block-44 > *:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.card-services .heading-8 {
  width: 258px;
  flex: 0 0 258px;
  color: var(--color--white);
  font-size: 16px;
  font-weight: 500;
  line-height: 125%;
}

.card-services .paragraph-2 {
  width: 100%;
  font-size: 16px;
  line-height: 125%;
  color: var(--color--gray--500);
}

.card-services .text-span-2 {
  color: var(--color--white);
}

/* The example cards this "+" used to reveal (.service-tab) were all
   identical Webflow placeholder content anyway, and toggling them broke —
   Webflow's own IX2 animation positioned the revealed panel absolutely,
   overlapping the rows below instead of pushing them down. That content
   moved into the real-case .services-slideshow to the left, so the
   trigger has nothing left to expand; hide both it and the icon instead
   of leaving a dead click target. */
.card-services .service-tab {
  display: none !important;
}

.card-services .div-block-59 img {
  display: none;
}

/* The Webflow export left these three rows inconsistent: .div-block-151
   (Дизайн) always stayed row (label | description), but .div-block-64/65
   (Бренд-стратегія, Реклама) had a leftover ≤767px override collapsing them
   to column — which is exactly our preview pane's width, so two of the
   three rows broke while the first looked fine. Force all three to the
   same row layout, and give them one shared, deliberate stacking
   breakpoint instead of that mismatched leftover one. */
.card-services .div-block-151,
.card-services .div-block-64,
.card-services .div-block-65,
.card-services .services-row-web {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 96px;
}

@media screen and (max-width: 900px) {
  .card-services {
    flex-flow: column;
    grid-row-gap: 48px;
  }

  .services-left {
    flex: none;
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .card-services .div-block-151,
  .card-services .div-block-64,
  .card-services .div-block-65,
  .card-services .services-row-web {
    flex-flow: column;
    grid-row-gap: 12px;
  }

  .card-services .heading-8 {
    width: auto;
    flex: none;
  }
}

/* Homepage section titles ("Новини", "Клієнти", "Напишіть нам:") were each
   a different leftover size (96px/96px/64px) — bringing them to the same
   40px as "Сервіси" (.heading-7, styled earlier to match koto.com) so the
   page reads as one consistent heading scale instead of every section
   picking its own size. .heading-2-copy-copy is shared with about.html's
   "Публікації про нас", so that one is scoped to .news-main (the homepage
   duplicate news section) rather than changed globally. */
.heading-2,
.heading-18 {
  font-size: 40px;
}

.news-main .heading-2-copy-copy {
  font-size: 40px;
}

/* "Клієнти" heading sat 56px above its card grid (the section's own
   row-gap) while "Новини" sits only 32px above its cards — tightening
   this one to match, per user request. .clients is homepage-only. */
.clients {
  grid-row-gap: 32px;
}

/* Homepage contact section — same koto.com-style layout/tokens as the
   "Сервіси" block above (dark bg, light 40px heading + photo card left,
   divider-line rows right), rebuilt from scratch with new class names
   (contact-*) instead of reusing .card-services/.div-block-44 etc.: this
   section used to be its own white rounded card (.div-block-67, base
   Webflow styling) with a different structure, and reusing the services
   classes here would also wire it into services-slideshow.js's hover
   logic, which only makes sense for the case-cover slideshow. */
.contact {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  width: 100%;
  height: auto;
  padding: 170px 20px 0;
  box-sizing: border-box;
}

.card-contact {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  column-gap: 140px;
}

.contact-left {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  flex: 0 1 420px;
  min-width: 260px;
}

.contact-left .heading-18 {
  color: var(--color--white);
  font-weight: 300;
  font-size: 40px;
  line-height: 110%;
  letter-spacing: -0.01em;
  margin: 0;
}

.contact-photo-card {
  display: block;
  position: relative;
  width: 100%;
  max-width: 366px;
  height: 220px;
  margin-top: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.contact-photo-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-photo-card-caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: var(--color--white);
  font-family: Taktikasans, sans-serif;
  font-size: 13px;
  line-height: 140%;
}

.contact-rows {
  width: 100%;
  max-width: 800px;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-flow: column;
}

.contact-row {
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 40px;
}

.contact-rows > .contact-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-row-label {
  width: 258px;
  flex: 0 0 258px;
  margin: 0;
  color: var(--color--white);
  font-family: Taktikasans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 125%;
}

.contact-row-content {
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 8px;
}

/* NewBiz / Прес і медіа rows: koto.com's office-row layout — label, then
   person (name + title), then contact details, as three separate
   columns instead of the plain label|content split every other row
   uses. Overrides the base .contact-row's flex-row + space-between with
   an explicit grid so the three columns line up consistently even
   though the person/details content is a different length per row. */
.contact-row-3col {
  display: grid;
  grid-template-columns: 258px 220px 1fr;
  column-gap: 40px;
}

.contact-row-person,
.contact-row-details {
  display: flex;
  flex-flow: column;
  gap: 8px;
}

.contact-person-name {
  color: var(--color--white);
  font-family: Taktikasans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 125%;
}

.contact-person-title {
  color: var(--color--gray--500);
  font-family: Taktikasans, sans-serif;
  font-size: 14px;
  line-height: 125%;
  margin-bottom: 4px;
}

.contact-link {
  color: var(--color--gray--500);
  font-family: Taktikasans, sans-serif;
  font-size: 14px;
  line-height: 125%;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-link:hover {
  color: var(--color--white);
}

.contact-links-row {
  display: flex;
  flex-flow: row wrap;
  column-gap: 20px;
  row-gap: 4px;
}

.contact-footer {
  width: 100%;
  max-width: 1400px;
  margin: 56px auto 0;
  padding: 24px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 140px;
}

/* Same 420px width as .contact-left, so the copyright text lines up
   under the row labels ("NewBiz", "Соцмережі"...) instead of floating
   flush against the right edge. */
.contact-footer-left {
  flex: 0 1 420px;
  min-width: 260px;
}

.contact-footer-logo {
  height: 22px;
  width: auto;
  filter: invert(1);
  opacity: 0.6;
}

.contact-footer-copy {
  color: var(--color--gray--500);
  font-family: Taktikasans, sans-serif;
  font-size: 14px;
}

.contact-footer-link {
  margin-left: auto;
  color: var(--color--gray--500);
  font-family: Taktikasans, sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-footer-link:hover {
  color: var(--color--white);
}

@media screen and (max-width: 900px) {
  .card-contact {
    flex-flow: column;
    row-gap: 48px;
  }

  .contact-left {
    flex: none;
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .contact-row {
    flex-flow: column;
    row-gap: 12px;
  }

  .contact-row-3col {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .contact-row-label {
    width: auto;
    flex: none;
  }
}

/* ── Плавний перехід між сторінками (кросфейд) ─────────────────────────
   Браузер сам робить fade зі старої сторінки в нову при кожному переході
   в межах сайту — зокрема при відкритті кейсу. Chromium підтримує; інші
   браузери просто відкривають без анімації. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .3s;
  animation-timing-function: ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   Мега-кейси: нижня пігулка "Timeline {бренд} +" + таймлайн-модал у новому
   стилі (скло-ефект, скруглення, сірі лінії/цифри замість зелених).
   Діє на сторінках, де є [class*="modal_timeline"] (promall / masterzoo / fora).
   ═══════════════════════════════════════════════════════════════════════ */

/* — Зелене → сіре — */
[class*="modal_timeline"] .text-block-84 { color: #a6a6a6 !important; }            /* роки */
[class*="modal_timeline"] .scroll-line-2 { background-color: rgba(255,255,255,.22) !important; } /* лінія */
[class*="modal_timeline"] .scroll-indicator { background-color: #a6a6a6 !important; }            /* крапки */

/* — Нижня пігулка (скло-ефект як у city-clock) — */
.timeline-pill {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(40px);
  z-index: 45;
  height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: Taktikasans, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.10);
  border: none;
  border-radius: 10px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .2s ease, opacity .35s ease;
}
.timeline-pill.is-ready { opacity: 1; transform: translateX(-50%) translateY(0); }
.timeline-pill:hover { background-color: rgba(255,255,255,.17); transform: translateX(-50%) translateY(-3px); }
.timeline-pill .tp-plus { opacity: .55; font-size: 15px; line-height: 1; }
.timeline-pill.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(24px); }

/* — Модал: скло-оверлей на весь екран, плавна поява — */
[class*="modal_timeline"].is-open {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  animation: tlModalIn .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes tlModalIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

/* — Скруглення карток таймлайну — */
[class*="modal_timeline"] .project-card { border-radius: 8px; overflow: hidden; }
[class*="modal_timeline"] .image-443 { border-radius: 0; }
[class*="modal_timeline"] .div-block-644 { border-radius: 8px 8px 0 0; overflow: hidden; }

/* ═══ Слайдери кейсів: пагінація-крапки + делікатні стрілки (всі 107 слайдерів) ═══ */
.w-slider-nav { padding-top: 8px; height: auto; }
.w-slider-dot {
  width: 8px !important;
  height: 8px !important;
  margin: 0 5px !important;
  background-color: rgba(255, 255, 255, 0.35);
  transition: background-color .2s ease, transform .2s ease;
}
.w-slider-dot.w-active {
  background-color: #fff;
  transform: scale(1.2);
}
.w-slider-arrow-left, .w-slider-arrow-right {
  width: 44px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  transition: color .2s ease;
}
.w-slider-arrow-left:hover, .w-slider-arrow-right:hover { color: #fff; }
.w-icon-slider-left, .w-icon-slider-right { font-size: 16px; }

/* ═══ Уніфікація кейсів під Allo (обережно): скруглення контент-медіа 8px ═══
   Заскоуплено на .case-page і лише на контент-блоки (фото/відео/слайдери) —
   лого, іконки й нав не чіпаються. Відступи контенту (20px) вже уніфіковано. */
.case-page [class*="one-photo"] img,
.case-page [class*="two-photo"] img,
.case-page [class*="photo-1200"] img,
.case-page [class*="one-photo"] .w-background-video,
.case-page [class*="two-photo"] .w-background-video,
.case-page [class*="one-video"] .w-background-video,
.case-page [class*="two-video"] .w-background-video,
.case-page [class*="size-video"],
.case-page .w-slider .w-slide img {
  border-radius: 8px;
  overflow: clip;
}

/* ═══ Головна: картки слайдера кейсів/новин — уніфікація заокруглення + без ховеру ═══
   Обгортки-ковери (div-block-988/992/993/994/995) та їхні <img> (image-8 / -copy…)
   мали різні радіуси (8/16/20px), тож більший радіус картинки «зарізав» кут усередині
   8px-обрізки обгортки. Зводимо все до 8px і прибираємо zoom по ховеру. Тільки головна. */
.body-3 .div-block-988,
.body-3 .div-block-992,
.body-3 .div-block-993,
.body-3 .div-block-994,
.body-3 .div-block-995 {
  border-radius: 8px !important;
}
.body-3 .image-8,
.body-3 .image-8-copy,
.body-3 .image-8-copy-copy,
.body-3 .image-8-copy-copy-copy {
  border-radius: 8px !important;
  transition: none !important;
}
.body-3 .image-8:hover,
.body-3 .image-8-copy:hover,
.body-3 .image-8-copy-copy:hover,
.body-3 .image-8-copy-copy-copy:hover {
  transform: none !important;
}

/* ═══ Ховер-пігулка "VIEW CASE" / "READ MORE" на картках ═══
   Маленька прямокутна скло-пігулка зі стрілкою, зʼявляється знизу ковера
   при наведенні на картку (кейси, блог, новини на головній). Ін'єктується
   у ковер скриптом city-clock.js як <span class="tk-card-cta">. */
.tk-card-cta {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border-radius: 12px;
  background-color: rgba(20, 20, 20, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.tk-card-cta svg { width: 15px; height: 15px; display: block; flex: 0 0 auto; }

.cases-v2-page .cases-tabs .grid-2 a:hover .tk-card-cta,
.blog-v2-page [class*="w-tab-pane"] a[class*="link-block-3"]:hover .tk-card-cta,
.body-3 [class*="slide-box-small-copy"]:hover .tk-card-cta {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .tk-card-cta { transition: none; }
}


/* Vacancies page: flat grouped list (title / type+location / "View role"),
   replacing the old Webflow grid of duplicate desktop+mobile job cards —
   one row per role, thin hairline dividers, small gray category labels
   above each group. Background stays the page's own black (.body-8,
   vacancies.html's own body class, unique to this page) — only the layout
   changes, not the theme. */
/* The base theme's own .open-vacancies switches to display: flex (row)
   below 991px for its old grid layout — overridden back to a plain block
   here (2-class selector outranks the theme's bare .open-vacancies at any
   viewport) so the intro and the list stack vertically instead of sitting
   side by side. */
.body-8 .open-vacancies {
  display: block;
}

.body-8 .vacancies-list-intro {
  max-width: 900px;
  margin-bottom: 96px;
}

.body-8 .vacancies-list-intro .paragraph-21 {
  margin-top: 24px;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.4;
}

.body-8 .vacancies-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
}

.body-8 .vacancies-list-group {
  display: flex;
  flex-direction: column;
}

.body-8 .vacancies-list-group + .vacancies-list-group {
  margin-top: 64px;
}

.body-8 .vacancies-list-group-label {
  color: var(--color--gray--500);
  font-family: Taktikasans, sans-serif;
  font-size: 15px;
  margin-bottom: 20px;
}

.body-8 .vacancies-list-row {
  display: grid;
  grid-template-columns: 1fr 1fr 100px;
  align-items: center;
  column-gap: 24px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.body-8 .vacancies-list-group .vacancies-list-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.body-8 .vacancies-list-title {
  color: var(--color--white);
  font-family: Taktikasans, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}

.body-8 .vacancies-list-meta {
  color: var(--color--white);
  font-family: Taktikasans, sans-serif;
  font-size: 16px;
}

.body-8 .vacancies-list-cta {
  color: var(--color--gray--500);
  font-family: Taktikasans, sans-serif;
  font-size: 14px;
  text-align: right;
  transition: color 0.2s ease, transform 0.2s ease;
}

.body-8 .vacancies-list-row {
  position: relative;
}

.body-8 .vacancies-list-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color--white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}

.body-8 .vacancies-list-row:hover::after {
  transform: scaleX(1);
}

/* "View role" rolls: the label slides up and out while a copy rolls in from below */
.body-8 .vacancies-list-cta {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 1.5;
}

.body-8 .vacancies-list-cta .vl-cta-in {
  display: block;
  transition: transform 0.58s cubic-bezier(0.65, 0, 0.35, 1);
}

.body-8 .vacancies-list-cta::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  color: var(--color--white);
  transition: transform 0.58s cubic-bezier(0.65, 0, 0.35, 1);
}

.body-8 .vacancies-list-row:hover .vacancies-list-cta .vl-cta-in,
.body-8 .vacancies-list-row:hover .vacancies-list-cta::after {
  transform: translateY(-100%);
}

.body-8 .vacancies-list-row:hover .vacancies-list-cta {
  color: var(--color--gray--500);
}

@media screen and (max-width: 767px) {
  .body-8 .vacancies-list-row {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 22px 0;
  }

  .body-8 .vacancies-list-title {
    font-size: 22px;
  }

  .body-8 .vacancies-list-meta {
    font-size: 14px;
  }

  .body-8 .vacancies-list-cta {
    text-align: left;
  }
}

/* Vacancies: talent-base split block — story-style videos (left) + text and
   an "apply" button (right); the form lives in a modal opened by the button. */
body.body-8 .baza.baza-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  align-items: center;
  min-height: 100vh;
  padding: 85px 8vw;
  background: #fff;
  border-radius: 0;
}

.baza-stories {
  position: relative;
  justify-self: start;
  height: calc(100vh - 170px);
  min-height: 420px;
  max-height: 900px;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}

.baza-stories .bs-frame,
.baza-stories .bs-frame iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 6px);
  height: auto;
  aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 0;
  pointer-events: none;
}

.baza-stories .bs-bars {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.baza-stories .bs-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
}

.baza-stories .bs-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

.baza-stories .bs-meta {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 5;
  pointer-events: none;
  color: #fff;
  font-family: Taktikasans, sans-serif;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.baza-stories .bs-role { margin-bottom: 4px; font-size: 12px; opacity: 0.8; }
.baza-stories .bs-name { font-size: 20px; line-height: 1.1; }

.baza-stories .bs-nav {
  position: absolute;
  top: 28px;
  bottom: 64px;
  width: 35%;
  z-index: 4;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.baza-stories .bs-prev { left: 0; }
.baza-stories .bs-next { right: 0; }

.baza-stories .bs-mute {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  padding: 7px 12px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  font-family: Taktikasans, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: rgba(20, 20, 20, 0.45);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.baza-text {
  max-width: 420px;
  padding-left: 0;
  justify-self: center;
  color: #0a0a0a;
  font-family: Taktikasans, sans-serif;
}

.baza-eyebrow {
  margin-bottom: 14px;
  font-size: 14px;
  color: #777;
}

.baza-title {
  margin: 0 0 18px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0a0a0a;
}

.baza-desc {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.4;
  color: #777;
}

.baza-open {
  padding: 9px 16px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: Taktikasans, sans-serif;
  font-size: 13px;
  color: #0a0a0a;
  background: #e6e6e6;
  transition: background-color 0.2s ease;
}
.baza-open:hover { background: #d8d8d8; }

.baza-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  padding: 40px 20px;
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.baza-modal.is-open { display: block; }

.baza-modal-box {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 32px;
  border-radius: 8px;
  background: #111;
}

.baza-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  body.body-8 .baza.baza-split {
    grid-template-columns: 1fr;
    row-gap: 32px;
    min-height: 0;
    padding: 60px 20px;
  }
  .baza-stories { height: auto; width: 100%; max-height: none; }
  .baza-text { max-width: none; }
  .baza-title { font-size: 30px; }
}

/* Vacancy detail: a narrow floating card on the right (monologue.framer
   careers reference). Used by the 18 standalone vacancy pages (.section-57)
   and by the drawer that opens over the list on vacancies.html (.vac-drawer).
   Structure inside: .vac-head (meta + apply), title, sections, form. */
.section-8 { display: none; }

.section-57 {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 100vh;
  padding: 20px;
}

.vac-close {
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 40;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease;
}
.vac-close:hover { background: rgba(255, 255, 255, 0.16); }

.section-57 .div-block-580,
.vac-drawer .vac-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: clamp(420px, 27vw, 540px);
  max-width: 100%;
  min-height: calc(100vh - 40px);
  padding: 0 28px 60px;
  border-radius: 8px;
  background: #161616;
  color: #fff;
}

.section-57 .div-block-581,
.vac-drawer .div-block-581 {
  width: 100%;
  max-width: none;
  display: block;
}

.vac-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 26px 56px 0 0;
  color: #8a8a8a;
  font-family: Taktikasans, sans-serif;
  font-size: 13px;
}
.vac-head-meta > div:first-child { display: none; }

.vac-apply {
  padding: 10px 16px;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease;
}
.vac-apply:hover { background: rgba(255, 255, 255, 0.16); }

.section-57 .heading-47,
.vac-drawer .heading-47 {
  margin: 34px 0 26px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}

.section-57 .div-block-132,
.vac-drawer .div-block-132 { display: none; }

.section-57 .div-block-136,
.vac-drawer .div-block-136,
.section-57 .div-block-582,
.vac-drawer .div-block-582 {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 26px 0 0;
  border: 0;
}

.section-57 .div-block-136 .heading-48,
.vac-drawer .div-block-136 .heading-48,
.section-57 .vac-form-title,
.vac-drawer .vac-form-title {
  margin: 0 0 14px;
  font-family: Taktikasans, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.section-57 .list,
.vac-drawer .list {
  margin: 0;
  padding-left: 18px;
}
.section-57 .list-item-2,
.vac-drawer .list-item-2 {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: #c4c4c4;
}

.section-57 .div-block-582 .form-block-5,
.section-57 .div-block-582 .w-form,
.vac-drawer .div-block-582 .form-block-5,
.vac-drawer .div-block-582 .w-form {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.section-57 .form-3,
.vac-drawer .form-3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: none;
}

.section-57 .text-field-cf2,
.section-57 .text-field-cf2-4,
.vac-drawer .text-field-cf2,
.vac-drawer .text-field-cf2-4 {
  width: 100%;
  margin: 0;
  padding: 14px 14px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #0a0a0a;
  font-size: 14px;
}
.section-57 .text-field-cf2-4,
.vac-drawer .text-field-cf2-4 { min-height: 120px; }

.section-57 .checkbox-label-3,
.vac-drawer .checkbox-label-3 { color: #b0b0b0; font-size: 13px; }
.section-57 .text-block-244,
.vac-drawer .text-block-244 { color: #8a8a8a; font-size: 12px; line-height: 1.4; }

.section-57 .submit-button-2,
.vac-drawer .submit-button-2 {
  align-self: flex-start;
  width: auto;
  height: auto;
  min-height: 0;
  margin-top: 6px;
  padding: 12px 22px;
  border: 0;
  border-radius: 6px;
  background: #ececec;
  color: #0a0a0a;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}

body:has(.section-57) .city-clock-trigger { display: none; }

/* drawer on vacancies.html */
.vac-drawer {
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: clamp(420px, 27vw, 540px);
  max-width: calc(100vw - 40px);
  overflow-y: auto;
  border-radius: 8px;
  transform: translateX(calc(100% + 40px));
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.vac-drawer.is-open { transform: translateX(0); }
.vac-drawer .vac-card { min-height: 100%; width: 100%; }
.vac-drawer .vac-close { position: absolute; top: 20px; right: 20px; }

.vacancies-list-row.is-active .vacancies-list-title { color: #8a8a8a; }

@media screen and (max-width: 767px) {
  .section-57 { padding: 12px; }
  .section-57 .div-block-580 { width: 100%; padding: 0 20px 50px; }
  .vac-close { top: 22px; right: 22px; }
  .vac-drawer { top: 10px; right: 10px; bottom: 10px; width: calc(100vw - 20px); max-width: none; }
}

/* --- vacancy card refinements --- */
.section-57 .div-block-581,
.vac-drawer .div-block-581 { display: contents; }

.vac-head {
  position: sticky;
  top: 0;
  z-index: 8;
  align-items: flex-start;
  gap: 12px;
  margin: 0 -28px;
  padding: 22px 28px 18px;
  background: #161616;
  border-radius: 8px 8px 0 0;
}
.vac-head-meta { flex: 1; min-width: 0; }
.vac-head-meta > div:first-child { display: block; }
.vac-head .heading-47 {
  margin: 0 0 6px;
  font-size: 26px;
  padding-right: 0;
}
.vac-head-sub { color: #8a8a8a; font-size: 13px; }
.vac-head .vac-apply { margin-right: 48px; margin-top: 2px; }
.vac-drawer .vac-head .vac-close {
  position: absolute;
  top: 18px;
  right: 28px;
}

.section-57 .list-item-2,
.vac-drawer .list-item-2 {
  margin: 0 0 4px;
  padding: 0;
}
.section-57 .div-block-136 + .div-block-136,
.vac-drawer .div-block-136 + .div-block-136 { padding-top: 22px; }

.section-57 .text-field-cf2::placeholder,
.section-57 .text-field-cf2-4::placeholder,
.vac-drawer .text-field-cf2::placeholder,
.vac-drawer .text-field-cf2-4::placeholder { color: #6b6b6b; opacity: 1; }

/* Homepage "Сервіси" block on a white background (only this block) */
body.body-3 .services { background-color: #fff; }
body.body-3 .services .heading-7,
body.body-3 .services .card-services .heading-8,
body.body-3 .services .card-services .text-span-2 { color: #0a0a0a; }
body.body-3 .services .card-services .paragraph-2 { color: #777; }
body.body-3 .services .div-block-151,
body.body-3 .services .div-block-64,
body.body-3 .services .div-block-65,
body.body-3 .services .services-row-web { border-top-color: rgba(0, 0, 0, 0.14); }
body.body-3 .services .div-block-44 > *:last-child { border-bottom-color: rgba(0, 0, 0, 0.14); }
body.body-3 .services { padding-top: 130px; padding-bottom: 130px; }

.vac-head .vac-apply { display: none; }
.vac-head .vac-close,
.vac-drawer .vac-head .vac-close { right: 28px; }
.section-57 .list,
.vac-drawer .list { display: flex; flex-direction: column; gap: 6px; }
.section-57 .list-item-2,
.vac-drawer .list-item-2 { margin: 0; line-height: 1.4; }

/* vacancy drawer: dimmed + blurred page behind, no scroll chaining */
.vac-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.4s ease;
}
.vac-backdrop.is-open { opacity: 1; pointer-events: auto; }
.vac-drawer { overscroll-behavior: contain; }
html.vac-lock, html.vac-lock body { overflow: hidden; }

/* theme makes the form wrappers sticky, so the form stayed put while the
   "Подати заявку" label scrolled away — keep them in normal flow */
.section-57 .div-block-582,
.section-57 .div-block-582 .form-block-5,
.section-57 .div-block-582 .form-3,
.vac-drawer .div-block-582,
.vac-drawer .div-block-582 .form-block-5,
.vac-drawer .div-block-582 .form-3 {
  position: static;
  top: auto;
}

/* tighter spacing under the consent checkbox / note / submit */
.section-57 .form-3,
.vac-drawer .form-3 { gap: 8px; }
.section-57 .checkbox-field-3,
.vac-drawer .checkbox-field-3 { margin: 0; padding-top: 0; padding-bottom: 0; }
.section-57 .text-block-244,
.vac-drawer .text-block-244 { margin: 0; padding: 0; }
.section-57 .submit-button-2,
.vac-drawer .submit-button-2 { margin-top: 2px; }
.section-57 .div-block-580,
.vac-drawer .vac-card { padding-bottom: 28px; }

/* application thank-you screen */
.section-57 .w-form-done,
.section-57 .w-form-fail,
.vac-drawer .w-form-done,
.vac-drawer .w-form-fail { display: none !important; }
.vac-thanks { padding: 40px 0 30px; }
.vac-thanks-title {
  margin: 0 0 14px;
  font-family: Taktikasans, sans-serif;
  font-size: 30px;
  line-height: 1.1;
  color: #fff;
}
.vac-thanks-text {
  font-family: Taktikasans, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: #b0b0b0;
}
.is-done .div-block-136,
.is-done .vac-form-title { display: none; }
.is-done .div-block-582 { border-top: 0; padding-top: 0; }
.is-done .vac-thanks { padding: 60px 0; }

/* One button style site-wide (light grey pill-rect, dark text, 6px corners):
   news "Всі матеріали", talent-base apply, application form submits. */
.button-12,
.baza-open,
.submit-button-2-copy,
.section-57 .submit-button-2,
.vac-drawer .submit-button-2,
body.body-8 .submit-button-2-copy {
  display: inline-block;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 11px 20px;
  border: 0;
  border-radius: 6px;
  background-color: #e6e6e6;
  background-image: none;
  color: #0a0a0a;
  font-family: Taktikasans, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.button-12:hover,
.baza-open:hover,
.submit-button-2-copy:hover,
.section-57 .submit-button-2:hover,
.vac-drawer .submit-button-2:hover { background-color: #d8d8d8; color: #0a0a0a; }
.button-12 .bold-text-19 { font-weight: 400; color: inherit; }

/* Card hover (homepage news, cases, blog): cover zooms slightly, the grey
   caption text lights up to full contrast. */
body.body-3 .grid-162 > a img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
body.body-3 .grid-162 > a:hover img {
  transform: scale(1.05) !important;
}
body.body-3 .grid-162 > a .paragraph-copy-copy {
  line-height: 15px;
  transition: color 0.3s ease;
}
body.body-3 .grid-162 > a:hover .paragraph-copy-copy { color: #fff; }

body.cases-v2-page .cases-tabs .grid-2 a > div:first-child > img,
body.cases-v2-page .cases-tabs .grid-2 a > div:first-child > video {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
body.cases-v2-page .cases-tabs .grid-2 a:hover > div:first-child > img,
body.cases-v2-page .cases-tabs .grid-2 a:hover > div:first-child > video {
  transform: scale(1.05) !important;
}
body.cases-v2-page .cases-tabs .grid-2 a .text-block-6 { transition: color 0.3s ease; }
body.cases-v2-page .cases-tabs .grid-2 a:hover .text-block-6 { color: #0a0a0a; }

/* hover chips ("VIEW CASE" / "READ MORE") removed site-wide */
.tk-card-cta { display: none !important; }

/* "Мега кейси" cards: same hover as the grid cards — the cover zooms a
   touch (via a background-inheriting ::before so the award badges stay put),
   the grey caption goes full-contrast. */
body.cases-v2-page .mega-cases-item .slide-content-wrapper-5 > div:first-child {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 8px;
}
body.cases-v2-page .mega-cases-item .slide-content-wrapper-5 > div:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
body.cases-v2-page .mega-cases-item:hover .slide-content-wrapper-5 > div:first-child::before {
  transform: scale(1.05);
}
body.cases-v2-page .mega-cases-item .heading-356 { transition: color 0.3s ease; }
body.cases-v2-page .mega-cases-item:hover .heading-356 { color: #0a0a0a; }

/* Contact block gutters: one rule for every page that has it (previously
   only the homepage, cases and vacancies dropped the theme's width caps,
   so on every other page the block sat 56px from the edges). */
.contact {
  padding-left: 20px;
  padding-right: 20px;
}
.card-contact,
.contact-footer {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.contact-rows { max-width: none; }

/* talent-base form inside the right drawer (same look as vacancy forms) */
.baza-modal { display: none !important; }
.vac-drawer .baza-drawer-form .form-block-5,
.vac-drawer .baza-drawer-form .w-form { margin: 0; padding: 0; max-width: none; width: 100%; background: none; }
.vac-drawer .form-baza {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: none;
}
.vac-drawer .form-baza input[type="text"],
.vac-drawer .form-baza textarea {
  width: 100%;
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #0a0a0a;
  font-size: 14px;
}
.vac-drawer .form-baza textarea { min-height: 120px; }
.vac-drawer .form-baza input::placeholder,
.vac-drawer .form-baza textarea::placeholder { color: #6b6b6b; opacity: 1; }
.vac-drawer .form-baza .checkbox-label-3-copy { color: #b0b0b0; font-size: 13px; }
.vac-drawer .form-baza .submit-button-2-copy { align-self: flex-start; margin-top: 4px; }
.vac-drawer .baza-drawer-form { padding-top: 10px; }
.vac-drawer .baza-drawer-form .w-form-done,
.vac-drawer .baza-drawer-form .w-form-fail { display: none !important; }

/* About: team grid = photo + name/role under it, cards on the cases-page
   rhythm (28px rows / 8px columns, 8px photo corners). Click opens the
   drawer built by js/team-drawer.js. */
body.body-7 section.team .container-2 { gap: 28px 8px; }
body.body-7 section.team .flipcard-wrapper,
body.body-7 section.team .d-31-card {
  height: auto;
  min-height: 0;
  cursor: pointer;
}
body.body-7 section.team .flipcard-front {
  height: auto;
  background: none;
  border-radius: 0;
  overflow: visible;
  transform: none;
}
body.body-7 section.team .flipcard-back,
body.body-7 section.team .flipcard-more,
body.body-7 section.team .flipcard-less { display: none !important; }
body.body-7 section.team .team-ph {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: #1d1d1d;
}
body.body-7 section.team .team-ph img.image-449 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.body-7 section.team .flipcard-wrapper:hover .team-ph img.image-449 { transform: scale(1.05); }
body.body-7 section.team .div-block-974 {
  display: block !important;
  position: static;
  padding: 8px 2px 0 14px;
  background: none;
}
body.body-7 section.team .heading-375 {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  text-transform: none;
}
body.body-7 section.team .text-block-119 {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.25;
  color: #8a8a8a;
  transition: color 0.3s ease;
}
body.body-7 section.team .flipcard-wrapper:hover .text-block-119 { color: #fff; }

.vac-drawer .team-photo {
  display: block;
  width: 100%;
  margin: 8px 0 20px;
  border-radius: 8px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.vac-drawer .team-bio {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.45;
  color: #c4c4c4;
}
.vac-drawer .team-links { display: flex; flex-direction: column; gap: 8px; }
.vac-drawer .team-link { color: #fff; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* team photos: full colour (the black & white filter was removed) */
body.body-7 section.team .team-ph img.image-449 {
  filter: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* team drawer: photo first, then name / role, then text */
.vac-drawer .team-head { min-height: 56px; padding: 0 28px; background: transparent; position: sticky; top: 0; z-index: 8; }
.vac-drawer .team-head .vac-close { top: 18px; right: 28px; }
.vac-drawer .team-photo { margin: 0 0 22px; }
.vac-drawer .team-who { margin-bottom: 18px; }
.vac-drawer .team-name { font-size: 26px; line-height: 1.1; color: #fff; }
.vac-drawer .team-role { font-size: 26px; line-height: 1.1; color: #8a8a8a; }

/* the old flip-card CSS (backface-visibility: hidden + 3D transform styles)
   made a card vanish as soon as its photo got a hover transform — the flip
   is gone now, so switch all of that off for the team cards */
body.body-7 section.team .flipcard-wrapper,
body.body-7 section.team .d-31-card,
body.body-7 section.team .flipcard-front,
body.body-7 section.team .team-ph {
  perspective: none;
  transform-style: flat;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* Webflow IX flips .d-31-card (rotateY 180deg) on hover/click via inline
   styles — pin it so the team cards never rotate */
body.body-7 section.team .d-31-card,
body.body-7 section.team .flipcard-front,
body.body-7 section.team .flipcard-wrapper {
  transform: none !important;
  transform-style: flat !important;
}

.vac-drawer .team-name,
.vac-drawer .team-role,
.vac-drawer .team-bio,
.vac-drawer .team-link { font-family: Taktikasans, sans-serif; }
.vac-drawer .team-role { font-size: 18px; margin-top: 4px; }

/* team drawer top: just a slim row for the close button above the photo */
.vac-drawer .vac-head.team-head {
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: #161616;
}
.vac-drawer .vac-head.team-head .vac-close { top: 12px; right: 0; }

/* team drawer: a bit more air before the text, link pinned to the card bottom */
.vac-drawer .team-who { margin-bottom: 26px; }
.vac-drawer .team-bio { margin-bottom: 0; }
.vac-drawer .team-links { margin-top: auto; padding-top: 40px; }

.vac-drawer .team-link { text-decoration: none; }
.vac-drawer .team-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* this one photo stays in colour */
body.body-7 section.team .team-ph img[src*="team-sasha-kutsachenko"] { filter: none; }

/* team link: underline grows left → right on hover (retracts to the right) */
.vac-drawer .team-link,
.vac-drawer .team-link:hover {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  padding-bottom: 3px;
  transition: background-size 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.vac-drawer .team-link:hover {
  background-position: 0 100%;
  background-size: 100% 1px;
}

/* close cross without the square behind it */
.vac-close,
.vac-close:hover,
.vac-drawer .vac-close {
  background: none;
}
.vac-close { opacity: 0.85; transition: opacity 0.2s ease; }
.vac-close:hover { opacity: 1; }

/* team drawer: tighter top, cross flush with the photo's right edge */
.vac-drawer .vac-head.team-head { height: 40px; }
.vac-drawer .vac-head.team-head .vac-close {
  top: 10px;
  right: 0;
  width: 20px;
  height: 20px;
  font-size: 22px;
}

/* about: tighter gap between the "Команда" heading and the photo grid */
body.body-7 section.team { row-gap: 0; grid-row-gap: 0; }
body.body-7 section.team .heading-36 { margin-bottom: 32px; }

/* Contact block / footer links: a thin line slides in from the left across
   the whole width of the word on hover and slides back out on leave
   (same sweep as ora-portfolio's footer links). */
.contact-link,
.contact-footer-link {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 3px;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: -600px 100%;
  transition: background-position 0.5s cubic-bezier(0.65, 0, 0.35, 1), color 0.2s ease;
}
.contact-link:hover,
.contact-footer-link:hover {
  background-position: 0 100%;
}

/* about: "Публікації про нас" heading at the same size as the other section headings */
body.body-7 .heading-2-copy-copy { font-size: 56px; line-height: 1; }

/* team link: same sweep as the contact links — line slides in from the left
   across the whole width on hover and slides back out */
.vac-drawer .team-link {
  align-self: flex-start;
  width: fit-content;
  background-size: 100% 1px;
  background-position: -800px 100%;
  transition: background-position 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.vac-drawer .team-link:hover {
  background-size: 100% 1px;
  background-position: 0 100%;
}

/* multi-line team link: the line runs under every wrapped line of text
   (inline box, fragments sliced so the sweep continues line to line) */
.vac-drawer .team-links { display: block; }
.vac-drawer .team-link,
.vac-drawer .team-link:hover {
  display: inline;
  width: auto;
  align-self: auto;
  line-height: 1.6;
  padding-bottom: 2px;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}

/* about hero: small uppercase heading on the left, text in two columns */
body.body-7 .div-block-107 .grid-16 {
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
  align-items: start;
  height: auto;
}
body.body-7 .div-block-107 .heading-33 {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
body.body-7 .div-block-107 .div-block-72 {
  grid-column: 2 / 4;
  display: block;
  column-count: 2;
  column-gap: 20px;
  width: auto;
  max-width: none;
}
body.body-7 .div-block-107 .paragraph-13 {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.45;
  break-inside: avoid-column;
}
@media screen and (max-width: 767px) {
  body.body-7 .div-block-107 .grid-16 { grid-template-columns: 1fr; row-gap: 20px; }
  body.body-7 .div-block-107 .div-block-72 { grid-column: 1; column-count: 1; }
}

/* about hero: text columns start on the same line as the heading */
body.body-7 .div-block-107 .paragraph-13 { padding-top: 0; }
body.body-7 .div-block-107 .div-block-72 { margin-top: 0; padding-top: 0; }

/* about: principles as a clean 4-up grid (tile, number pill, title, text)
   instead of the stacked colour cards */
body.body-7 .principles-grid {
  padding: 120px 20px 60px;
  background: #000;
}
body.body-7 .pr-heading {
  margin: 0 0 40px;
  max-width: 560px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}
body.body-7 .pr-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
}
body.body-7 .pr-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 10%;
  border-radius: 8px;
  background: #161616;
}
body.body-7 .pr-tile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
body.body-7 .pr-num {
  display: inline-block;
  margin: 20px 0 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #1f1f1f;
  color: #fff;
  font-size: 14px;
  line-height: 1;
}
body.body-7 .pr-title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}
body.body-7 .pr-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #8a8a8a;
}
@media screen and (max-width: 991px) {
  body.body-7 .pr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 600px) {
  body.body-7 .pr-list { grid-template-columns: 1fr; }
  body.body-7 .principles-grid { padding-top: 80px; }
}

/* principles: cases-page rhythm (8px columns / 28px rows); the image now
   fills the whole square tile so a ready-made cover can be dropped in */
body.body-7 .pr-list { gap: 28px 8px; }
body.body-7 .pr-tile { padding: 0; overflow: hidden; }
body.body-7 .pr-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* principles heading = cases "Мега кейси" intro: 40px, white + grey */
body.body-7 .pr-heading {
  max-width: 900px;
  margin: 0 0 40px;
  font-family: Taktikasans, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: normal;
  text-transform: none;
}
body.body-7 .pr-heading-strong { color: #fff; }
body.body-7 .pr-heading-soft { color: #a6a6a6; }
@media screen and (max-width: 767px) {
  body.body-7 .pr-heading { font-size: 28px; line-height: 30px; }
}

/* principles slider: 3 visible, arrows top right */
body.body-7 .pr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}
body.body-7 .pr-head .pr-heading { margin: 0; }
body.body-7 .pr-arrows { display: flex; gap: 4px; flex: none; }
body.body-7 .pr-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
body.body-7 .pr-arrow svg { width: 18px; height: 18px; }
body.body-7 .pr-arrow:hover:not(:disabled) { background: #333; }
body.body-7 .pr-arrow:disabled { opacity: 0.35; cursor: default; }
body.body-7 .pr-viewport { overflow: hidden; }
body.body-7 .pr-list {
  display: flex;
  gap: 8px;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
body.body-7 .pr-item { flex: 0 0 calc((100% - 16px) / 3); min-width: 0; }
@media screen and (max-width: 991px) {
  body.body-7 .pr-list { grid-template-columns: none; }
  body.body-7 .pr-item { flex-basis: calc((100% - 8px) / 2); }
}
@media screen and (max-width: 600px) {
  body.body-7 .pr-list { grid-template-columns: none; }
  body.body-7 .pr-item { flex-basis: 100%; }
}

body.body-7 .pr-num,
body.body-7 .pr-title,
body.body-7 .pr-text { font-family: Taktikasans, sans-serif; }

/* principles: pill, title and text inset from the tile's edges on both sides */
body.body-7 .pr-num { margin-left: 14px; }
body.body-7 .pr-title,
body.body-7 .pr-text { padding-left: 14px; padding-right: 14px; }

/* about hero: same 20px left/right gutter as every other block */
body.body-7 .div-block-107 { padding-left: 20px; padding-right: 20px; }

/* principles tile proportion = 484 x 525 at 1512px wide (aspect 484 / 525) */
body.body-7 .pr-tile { aspect-ratio: 484 / 525; }
body.body-7 .pr-tile { background: transparent; overflow: visible; }
body.body-7 .pr-tile img { border-radius: 0; }

/* principles slider: drag affordance */
body.body-7 .pr-viewport { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
body.body-7 .pr-viewport.is-dragging { cursor: grabbing; }
body.body-7 .pr-viewport img { -webkit-user-drag: none; pointer-events: none; }

/* about "Публікації про нас": same card logic as the blog — 3 equal cards,
   8px gaps, 20px gutter, 4:3 cover with zoom on hover, caption = title (left)
   + arrow (right) that lights up on hover */
body.body-7 .news-copy-copy .div-block-1173,
body.body-7 .news-copy-copy .section-101 {
  padding-left: 20px;
  padding-right: 20px;
}
body.body-7 .news-copy-copy .grid-162 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column-gap: 8px;
  grid-row-gap: 28px;
  padding: 0;
}
body.body-7 .news-copy-copy .grid-162 > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-width: 0;
}
body.body-7 .news-copy-copy .grid-162 > a > div:first-child {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
}
body.body-7 .news-copy-copy .grid-162 > a > div:first-child img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
body.body-7 .news-copy-copy .grid-162 > a:hover > div:first-child img { transform: scale(1.05) !important; }
body.body-7 .news-copy-copy .grid-162 > a > div:last-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding: 0 14px;
  height: auto;
}
body.body-7 .news-copy-copy .grid-162 > a > div:last-child > p {
  margin: 0;
  font-size: 15px;
  line-height: 116%;
  text-transform: uppercase;
  color: #fff;
}
body.body-7 .news-copy-copy .grid-162 > a > div:last-child > p br { display: none; }
body.body-7 .news-copy-copy .grid-162 > a > div:last-child > h1 {
  flex: none;
  margin: 0;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: #8a8a8a;
  transition: color 0.3s ease;
}
body.body-7 .news-copy-copy .grid-162 > a:hover > div:last-child > h1 { color: #fff; }
@media screen and (max-width: 767px) {
  body.body-7 .news-copy-copy .grid-162 { grid-template-columns: 1fr; }
}
body.body-7 .news-copy-copy .grid-162 > a,
body.body-7 .news-copy-copy .grid-162 > a:hover {
  transform: none !important;
  transition: none;
}
body.body-7 .news-copy-copy .grid-162 > a > div:first-child { margin: 0; }
body.body-7 .news-copy-copy .grid-162 > a > div:last-child > p {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}
body.body-7 .news-copy-copy .grid-162 { align-items: start; }
body.body-7 .news-copy-copy .grid-162 > a { align-self: start; }

/* ===== Mobile menu (<=767px): Koto-style header chips + full-screen panel ===== */
@media screen and (max-width: 1023px) {
  .menu-2-copy, .menu-2-copy-copy {
    width: auto; left: 0; right: 0; top: 16px; height: 44px;
    padding: 0 20px; background: none; border: 0; border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transform: none !important;
  }
  .menu-2-copy.on-light, .menu-2-copy-copy.on-light { background: none; }
  .menu-2-copy .div-block-198, .menu-2-copy-copy .div-block-198 {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 44px; margin: 0; padding: 0;
    position: relative; z-index: 2;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .div-block-198 > a:nth-child(2) {
    position: absolute; right: 52px; top: 0; height: 44px; margin: 0;
    padding: 0 22px; display: flex; align-items: center; box-sizing: border-box;
    border-radius: 10px; color: #fff; text-decoration: none;
    background-color: rgba(20, 20, 20, 0.78);
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  }
  .div-block-198 > a:nth-child(2) img { display: none; }
  .div-block-198 > a:nth-child(2)::after {
    content: "МЕНЮ"; font-family: Taktikasans, sans-serif; font-size: 12px;
    letter-spacing: .06em; text-transform: uppercase;
  }
  html.mm-open .div-block-198 > a:nth-child(2)::after { content: "ЗАКРИТИ"; }
  .menu-2-copy .div-block-189, .menu-2-copy-copy .div-block-189 { display: none; }
  .div-block-198 > a:first-child {
    display: flex; align-items: center; height: 44px; padding: 0 14px; box-sizing: border-box;
    border-radius: 10px; background-color: rgba(20, 20, 20, 0.78);
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  }
  body:has(.cases-tabs) .menu-2-copy { background: none; }

  /* clock chip collapses to the dots-only square */
  .city-clock-trigger:not(.on-light) { background-color: rgba(20, 20, 20, 0.78); }
  .city-clock-trigger { display: flex !important; width: 44px; padding: 0; justify-content: center; }
  .city-clock-time, .city-clock-tz { display: none; }

  .div-block-197 {
    display: none !important; position: fixed; inset: 0; z-index: 1;
    width: auto; height: auto; overflow-y: auto; box-sizing: border-box;
    padding: 96px 20px 32px; background: #060606; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1 !important;
    transform: none !important; flex-direction: column; justify-content: flex-start;
  }
  html.mm-open .div-block-197 { display: flex !important; }
  html.mm-open, html.mm-open body { overflow: hidden; }
  html.mm-open .menu-2-copy, html.mm-open .menu-2-copy-copy { z-index: 40; }
  html.mm-open .city-clock-trigger { z-index: 41; }
  .div-block-197 .div-block-200 { display: none; }
  .div-block-197 .div-block-201 {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    width: 100%; padding: 0 0 28px; margin: 0; border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .div-block-197 .div-block-201::before {
    content: "Навігація"; display: block; margin-bottom: 20px;
    font: 500 12px/1 Taktikasans, sans-serif; letter-spacing: .08em;
    text-transform: uppercase; color: #8a8a8a;
  }
  .div-block-197 .div-block-201 a {
    display: block; width: auto; margin: 0; padding: 9px 0; text-decoration: none;
    background: none;
  }
  .div-block-197 .heading-57 {
    margin: 0; font-family: Taktikasans, sans-serif; font-size: 38px; line-height: 1.15;
    font-weight: 300; letter-spacing: -.01em; text-transform: none; color: #fff;
  }
  .div-block-197 .mm-foot { width: 100%; align-self: stretch; padding-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .div-block-197 .mm-label {
    font: 500 12px/1 Taktikasans, sans-serif; letter-spacing: .08em;
    text-transform: uppercase; color: #8a8a8a; margin-bottom: 6px;
  }
  .div-block-197 .mm-foot a {
    font: 500 13px/1 Taktikasans, sans-serif; letter-spacing: .06em;
    text-transform: uppercase; color: #fff; text-decoration: none;
  }
}
@media screen and (min-width: 1024px) { .mm-foot { display: none; } }

/* mobile: contact footer wraps instead of a 140px-gap nowrap row (it was
   676px wide and stretched the whole page, pushing the header off-screen) */
@media screen and (max-width: 767px) {
  .contact-footer { flex-wrap: wrap; column-gap: 20px; row-gap: 12px; max-width: 100%; }
  .contact-footer-left { flex: 0 0 100%; }
  html, body { overflow-x: clip; }
}


/* ===== Mobile side gutters: 12px (auto-derived from every 20px gutter rule) ===== */
@media screen and (max-width: 767px) {
  body.body-5 .div-block-63, body.body-5 .cases-block { padding-left: 12px !important; padding-right: 12px !important; }
  body.body-3 .div-block-1173, body.body-3 .section-101, body.body-3 .services, body.body-3 .contact, body.body-3 .clients { padding-left: 12px !important; padding-right: 12px !important; }
  body.body-3 .about { padding-left: 12px !important; }
  .city-panel { right: 12px !important; }
  body.body-7 .principles, body.body-7 .team-2, body.body-7 .team, body.body-7 .team-3 { padding-left: 12px !important; padding-right: 12px !important; }
  body.body-8 .open-vacancies, body.body-8 .baza { padding-left: 12px !important; padding-right: 12px !important; }
  .service-section, .designs, .brands, .advertising-section, .naming-section { padding-left: 12px !important; padding-right: 12px !important; }
  .service-section-copy-copy, .fs-example_layout { padding-left: 12px !important; padding-right: 12px !important; }
  .section-8, .section-57 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-98 .div-block-1564, .body-98 .div-block-1566, .body-98 .one-photo-16-9-2, .body-98 .two-photo-4-5-10, .body-98 .heading-body-67, .body-98 .two-photo-hover-slider-1-1-2, .body-98 .two-photo-1-1-26, .body-98 .one-photo-2-39-1-22, .body-98 .two-photo-3-2-2, .body-98 .one-video-16-9-7, .body-98 .grid-209, .body-98 .heading-2377, .body-98 .two-photo-16-9-44, .body-98 .div-block-53 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-93 .div-block-1494, .body-93 .heading-body-64, .body-93 .one-photo-16-9-2, .body-93 .one-photo-2-39-1-20, .body-93 .one-video-16-9-7, .body-93 .two-photo-4-5-7 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-75 .div-block-1209, .body-75 .grid-163, .body-75 .heading-subheading-body-8-copy-3, .body-75 .heading-subheading-body-8-copy-copy, .body-75 .one-photo-16-9-3, .body-75 .one-photo-2-39-1-6, .body-75 .one-photo-2-39-1-6-copy, .body-75 .one-photo-21-7-2, .body-75 .one-video-16-9-7, .body-75 .one-video-case-16-9-15-copy, .body-75 .six-photo, .body-75 .three-photo-4-5-6, .body-75 .two-photo-1-1-19, .body-75 .two-photo-16-9_950-1070-8, .body-75 .two-photo-4-5-4-copy, .body-75 .two-photo-video-1-1-9 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-33 .div-block-70, .body-33 .heading-body-5, .body-33 .one-photo-16-9-2, .body-33 .one-photo-2-39-1-5, .body-33 .one-slider-16-9-4, .body-33 .one-video-16-9-5, .body-33 .one-video-2-39-1-2, .body-33 .two-photo-slider-1-1-3, .body-33 .two-photo-video-1-1-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-54 .div-block-734, .body-54 .heading-body-30, .body-54 .heading-body-31, .body-54 .one-video-case-16-9-9, .body-54 .three-photo-4-5-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-50 .div-block-684, .body-50 .heading-body-25, .body-50 .heading-body-26, .body-50 .one-photo-16-9-2, .body-50 .one-photo-2-39-1-5, .body-50 .three-photo-1-1-2, .body-50 .two-photo-1-1-7, .body-50 .two-photo-1-1-8, .body-50 .two-photo-3-2-2, .body-50 .two-photo-video-1-1-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-56 .div-block-761, .body-56 .heading-body-33, .body-56 .one-photo-16-9-2, .body-56 .two-photo-1-1-11, .body-56 .two-photo-slider-1-1-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-58 .div-block-941, .body-58 .div-block-948, .body-58 .heading-body-44, .body-58 .heading-body-45, .body-58 .heading-body-46, .body-58 .heading-subheading-body-8-copy, .body-58 .heading-subheading-body-8-copy-copy, .body-58 .one-photo-16-9-2, .body-58 .one-photo-2-39-1-6, .body-58 .one-photo-2-39-1-6-copy, .body-58 .one-photo-2-39-1-7, .body-58 .one-photo-2-39-1-8, .body-58 .one-photo-2-39-1-9, .body-58 .one-photo-21-7-2, .body-58 .one-video-16-9, .body-58 .one-video-16-9-7, .body-58 .one-video-case-16-9-15-copy, .body-58 .three-photo-4-5-4, .body-58 .three-photo-video-photo-1-1-4, .body-58 .two-photo-1-1-15, .body-58 .two-photo-16-9_950-1070-6, .body-58 .two-photo-3-2-3, .body-58 .two-photo-video-1-1-5, .body-58 .two-photo-video-1-1-6, .body-58 .two-video-video-16-9_950-1070-11 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-45 .div-block-70, .body-45 .heading-body-18, .body-45 .one-video-16-9-7, .body-45 .one-video-case-16-9-7 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-92 .div-block-1488, .body-92 .heading-subheading-body-21, .body-92 .one-photo-16-9-2, .body-92 .one-photo-2-39-1-19, .body-92 .one-slider-2-1-4, .body-92 .one-video-16-9-7, .body-92 .one-video-2-39-1-4, .body-92 .photo-944x710-video-2-3-2, .body-92 .three-photo-1-1-2, .body-92 .two-photo-1-1-25, .body-92 .two-photo-slider-1-1-3, .body-92 .two-photo-video-1-1-13, .body-92 .two-photo-video-2-3-2, .body-92 .video-slider { padding-left: 12px !important; padding-right: 12px !important; }
  .body-38 .div-block-70, .body-38 .heading-body-11, .body-38 .one-photo-16-9-2, .body-38 .one-video-16-9-7, .body-38 .three-photo-video-photo-1-1-3, .body-38 .two-photo-1-1-3, .body-38 .two-photo-slider-1-1-3, .body-38 .two-photo-video-1-1-3, .body-38 .two-photo-video-16-9_950-1070-2 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-34 .div-block-70, .body-34 .heading-body-5, .body-34 .one-photo-16-9-2, .body-34 .one-photo-21-7-2, .body-34 .one-slider-16-9-4, .body-34 .one-video-case-16-9-2, .body-34 .one-video-case-16-9-2-copy, .body-34 .three-photo-4-5-2, .body-34 .two-photo-1-1-3, .body-34 .two-photo-video-1-1-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-24 .div-block-1012, .body-24 .div-block-1028, .body-24 .div-block-1136, .body-24 .div-block-1518, .body-24 .div-block-646, .body-24 .div-block-70, .body-24 .four-poster-3, .body-24 .grid-36, .body-24 .heading-body-2, .body-24 .heading-body-4, .body-24 .heading-body-47, .body-24 .heading-body-48, .body-24 .heading-body-49, .body-24 .heading-body-5, .body-24 .heading-body-5-copy, .body-24 .heading-body-8-copy-copy, .body-24 .heading-subheading-body-2, .body-24 .heading-subheading-body-22, .body-24 .one-photo-16-9-2, .body-24 .one-photo-2-39-1-11, .body-24 .one-photo-2-39-1-2, .body-24 .one-photo-2-39-1-3, .body-24 .one-photo-21-7-2, .body-24 .one-slider-16-9-2, .body-24 .one-slider-16-9-4, .body-24 .one-slider-2-1-2, .body-24 .one-video-16-9-2, .body-24 .one-video-16-9-3, .body-24 .one-video-16-9-8, .body-24 .one-video-16-9-9, .body-24 .one-video-1920x494-2, .body-24 .one-video-2-39-1-2, .body-24 .one-video-case-16-9-16, .body-24 .one-video-case-16-9-2, .body-24 .one-video-case-16-9-2-copy, .body-24 .one-video-case-16-9-22, .body-24 .one-video-case-16-9-3-copy-2, .body-24 .photo-944x710-video-2-3-2, .body-24 .three-photo-1-1-2, .body-24 .three-photo-4-5-2, .body-24 .three-photo-4-5-5, .body-24 .three-photo-video-photo-1-1-3, .body-24 .two-photo-1-1-16, .body-24 .two-photo-1-1-17, .body-24 .two-photo-1-1-2, .body-24 .two-photo-1-1-3, .body-24 .two-photo-5-4-4, .body-24 .two-photo-slider-1-1-2, .body-24 .two-photo-slider-1-1-3, .body-24 .two-photo-video-1-1-2, .body-24 .two-photo-video-1-1-3, .body-24 .two-photo-video-1-1-7, .body-24 .two-photo-video-16-9_950-1070-2, .body-24 .two-photo-video-16-9_950-1070-2-copy, .body-24 .two-photo-video-16-9_950-1070-3, .body-24 .two-slider-slider-16-9_950-1070-2, .body-24 .two-video-video-16-9_950-1070-2, .body-24 .video-slider { padding-left: 12px !important; padding-right: 12px !important; }
  .body-36 .div-block-905, .body-36 .grid-137, .body-36 .heading-body-42, .body-36 .one-photo-16-9-2, .body-36 .one-photo-21-7-6, .body-36 .one-video-16-9-7, .body-36 .two-photo-1-1-13, .body-36 .two-photo-slider-1-1-3, .body-36 .two-photo-slider-16-9-4, .body-36 .two-photo-slider-3-2-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-48 .div-block-661, .body-48 .heading-body-21, .body-48 .heading-body-22, .body-48 .heading-body-23, .body-48 .heading-body-24, .body-48 .one-photo-16-9-2, .body-48 .one-photo-2-39-1-5, .body-48 .photo-1-1-video-2000x1000-3, .body-48 .photo-1200x710-photo-998x1300-5-glf2, .body-48 .photo-1200x710-photo-998x1300-6-glf, .body-48 .two-photo-1-1-5, .body-48 .two-photo-1-1-6, .body-48 .two-photo-16-9_950-1070-2, .body-48 .two-photo-video-1-1-4, .body-48 .two-video-video-16-9_950-1070-2 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-39 .div-block-872, .body-39 .grid-132, .body-39 .heading-body-40, .body-39 .one-photo-16-9-2, .body-39 .one-photo-21-7-2, .body-39 .one-slider-16-9-4, .body-39 .two-photo-slider-1-1-3, .body-39 .two-photo-video-1-1-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-80 .div-block-1300, .body-80 .heading-subheading-body-2, .body-80 .one-photo-16-9-2, .body-80 .one-video-1920x494-8, .body-80 .one-video-21-7-5, .body-80 .photo-1200x710-photo-998x1300-8, .body-80 .two-photo-3-4-4, .body-80 .two-photo-slider-3-4-5, .body-80 .two-photo-video-1-1-10, .body-80 .two-photo-video-1-1-11, .body-80 .two-photo-video-3-4-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-6 .div-block-70, .body-6 .grid-11, .body-6 .grid-14, .body-6 .grid-15, .body-6 .grid-7, .body-6 .grid-8, .body-6 .grid-9, .body-6 .grid-9-copy, .body-6 .heading-subheading-body { padding-left: 12px !important; padding-right: 12px !important; }
  .body-99 .div-block-1588, .body-99 .heading-body-68, .body-99 .heading-body-69, .body-99 .heading-subheading-body-24, .body-99 .one-photo-16-9-2, .body-99 .one-video-case-16-9-24, .body-99 .three-photo-4-5-12 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-23 .div-block-887, .body-23 .grid-134, .body-23 .grid-135, .body-23 .heading-body-41, .body-23 .heading-subheading-body-3-copy-copy-2, .body-23 .heading-subheading-body-3-copy-copy-copy, .body-23 .one-photo-16-9-2, .body-23 .one-photo-21-7-2, .body-23 .one-slider-16-9-4, .body-23 .one-video-16-9-7, .body-23 .two-photo-slider-1-1-3, .body-23 .two-photo-slider-16-9_950-1070-6, .body-23 .two-photo-video-1-1-3, .body-23 .two-photo-video-16-9_950-1070-2, .body-23 .video-slider { padding-left: 12px !important; padding-right: 12px !important; }
  .body-53 .div-block-719, .body-53 .div-block-727, .body-53 .heading-body-28-copy, .body-53 .heading-body-29, .body-53 .one-photo-16-9-2, .body-53 .one-slider-2-1-2, .body-53 .one-video-21-7-4, .body-53 .three-photo-4-5-2, .body-53 .two-photo-1-1-10, .body-53 .two-photo-16-9-14, .body-53 .two-photo-16-9_950-1070-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-90 .div-block-1439, .body-90 .heading-subheading-body-19, .body-90 .heading-subheading-body-8-copy-7, .body-90 .one-video-1920x494-9, .body-90 .three-photo-4-5-11, .body-90 .three-photo-4-5-6, .body-90 .two-photo-slider-16-9-9 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-67 .div-block-1100, .body-67 .div-block-1118, .body-67 .grid-156, .body-67 .heading-subheading-body-8-copy-2, .body-67 .heading-subheading-body-8-copy-copy, .body-67 .one-photo-16-9-2, .body-67 .one-photo-2-39-1-10, .body-67 .one-photo-2-39-1-6-copy, .body-67 .one-video-16-9-7, .body-67 .one-video-case-16-9-15-copy, .body-67 .three-photo-4-5-6, .body-67 .three-photo-4-5-7, .body-67 .two-photo-1-1-18, .body-67 .two-photo-1-1-18-copy, .body-67 .two-photo-16-9_950-1070-7, .body-67 .two-photo-4-5-4, .body-67 .two-photo-5-4-3, .body-67 .two-photo-video-1-1-8 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-37 .div-block-830, .body-37 .heading-body-37, .body-37 .heading-subheading-body-6, .body-37 .one-photo-16-9-2, .body-37 .one-photo-21-7-5, .body-37 .two-photo-slider-1-1-3, .body-37 .two-photo-video-1-1-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-35 .div-block-1004, .body-35 .div-block-1226, .body-35 .div-block-646, .body-35 .div-block-70, .body-35 .div-block-927, .body-35 .grid-140, .body-35 .grid-61, .body-35 .grid-78, .body-35 .heading-body-43, .body-35 .heading-body-5-4, .body-35 .heading-body-5-copy-copy, .body-35 .heading-body-50, .body-35 .heading-body-6, .body-35 .heading-body-7, .body-35 .heading-body-8, .body-35 .heading-body-8-copy-copy, .body-35 .heading-subheading-body-11, .body-35 .heading-subheading-body-3-copy-copy, .body-35 .heading-subheading-body-7, .body-35 .one-photo-16-9-2, .body-35 .one-photo-2-39-1-12, .body-35 .one-slider-16-9-4, .body-35 .one-video-16-9-7, .body-35 .one-video-2-39-1-2, .body-35 .one-video-21-7-3, .body-35 .one-video-case-16-9-14, .body-35 .one-video-case-16-9-3, .body-35 .one-video-case-16-9-3-copy, .body-35 .one-video-case-16-9-3-copy-3, .body-35 .two-photo-1-1-14, .body-35 .two-photo-16-9-8, .body-35 .two-photo-hover-photo-1-1-3, .body-35 .two-photo-slider-1-1-3, .body-35 .two-photo-slider-16-9-2, .body-35 .two-photo-video-1-1-3, .body-35 .two-photo-video-16-9_950-1070-2, .body-35 .two-slider-slider-16-9_950-1070-2, .body-35 .video-slider { padding-left: 12px !important; padding-right: 12px !important; }
  .body-55 .div-block-747, .body-55 .four-poster-3, .body-55 .heading-body-32, .body-55 .one-video-case-16-9-10, .body-55 .photo-1200x710-photo-998x1300-7 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-97 .div-block-1552, .body-97 .grid-207, .body-97 .heading-body-66, .body-97 .one-photo-16-9-2, .body-97 .one-photo-16-9-2-copy, .body-97 .one-video-16-9-7, .body-97 .photo-944x710-video-2-3-3, .body-97 .three-photo-1-1-2, .body-97 .two-photo-16-9_950-1070-11, .body-97 .two-photo-4-5-9, .body-97 .two-photo-video-4-5-6, .body-97 .two-photo-video-4-5-6-copy { padding-left: 12px !important; padding-right: 12px !important; }
  .body-51 .div-block-704, .body-51 .heading-body-27, .body-51 .one-photo-2-39-1-5, .body-51 .one-video-16-9-7, .body-51 .pf-camos, .body-51 .photo-1-1-video-2000x1000-3, .body-51 .photo-1-1-video-2000x1000-copy, .body-51 .three-photo-1-1-2, .body-51 .three-photo-video-photo-1-1-3, .body-51 .two-photo-1-1-9 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-43 .div-block-70, .body-43 .heading-body-16, .body-43 .one-photo-21-7-2, .body-43 .one-video-21-7-2, .body-43 .one-video-case-16-9-4, .body-43 .one-video-case-16-9-5, .body-43 .photo-1200x710-photo-998x1300-3, .body-43 .photo-1200x710-photo-998x1300-4 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-41 .div-block-70, .body-41 .heading-body-14, .body-41 .one-slider-16-9-4, .body-41 .one-video-case-16-9-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-47 .div-block-70, .body-47 .heading-body-20, .body-47 .one-video-case-16-9-8, .body-47 .two-photo-1-1-4 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-42 .div-block-70, .body-42 .heading-body-15, .body-42 .one-slider-16-9-4, .body-42 .one-video-1920x494-3, .body-42 .one-video-case-16-9-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-41 .div-block-1266, .body-41 .div-block-1391, .body-41 .div-block-1415, .body-41 .div-block-1456, .body-41 .div-block-1610, .body-41 .div-block-646, .body-41 .div-block-70, .body-41 .div-block-816, .body-41 .four-stories-2, .body-41 .grid-78, .body-41 .heading-body-13, .body-41 .heading-body-14, .body-41 .heading-body-20, .body-41 .heading-body-36, .body-41 .heading-body-52, .body-41 .heading-body-55, .body-41 .heading-body-56, .body-41 .heading-body-57, .body-41 .heading-body-58, .body-41 .heading-body-61, .body-41 .heading-body-62, .body-41 .heading-body-8, .body-41 .heading-body-8-copy-copy, .body-41 .heading-subheading-body-12, .body-41 .heading-subheading-body-17, .body-41 .heading-subheading-body-18, .body-41 .heading-subheading-body-20, .body-41 .heading-subheading-body-26, .body-41 .one-photo-16-9-2, .body-41 .one-photo-2-39-1-13, .body-41 .one-slider-16-9-4, .body-41 .one-slider-16-9-4-bk, .body-41 .one-slider-2-1-2, .body-41 .one-video-21-7-3, .body-41 .one-video-case-16-9-13, .body-41 .one-video-case-16-9-17, .body-41 .one-video-case-16-9-19, .body-41 .one-video-case-16-9-20, .body-41 .one-video-case-16-9-21, .body-41 .one-video-case-16-9-25, .body-41 .one-video-case-16-9-3, .body-41 .one-video-case-16-9-3-copy, .body-41 .one-video-case-16-9-8, .body-41 .three-photo-4-5, .body-41 .two-photo-1-1-21, .body-41 .two-photo-1-1-22, .body-41 .two-photo-1-1-24, .body-41 .two-photo-1-1-28, .body-41 .two-photo-1-1-4, .body-41 .two-slider-slider-16-9_950-1070-2, .body-41 .two-slider-slider-16-9_950-1070-5 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-96 .div-block-1539, .body-96 .heading-body-65, .body-96 .one-photo-16-9-2, .body-96 .one-photo-2-39-1-21, .body-96 .one-slider-16-9-6, .body-96 .three-photo-video-photo-1-1-3, .body-96 .two-photo-4-5-8, .body-96 .two-photo-5-4-6, .body-96 .two-photo-slider4-5-5, .body-96 .two-photo-video-4-3-3, .body-96 .two-photo-video-4-5-5, .body-96 .video-slider { padding-left: 12px !important; padding-right: 12px !important; }
  .body-66 .div-block-1080, .body-66 .heading-body-3, .body-66 .heading-subheading-body-10, .body-66 .one-video-case-16-9-15, .body-66 .two-photo-16-9-28 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-44 .div-block-70, .body-44 .four-slider-poster-2, .body-44 .heading-body-17, .body-44 .one-photo-2-39-1-5, .body-44 .one-video-case-16-9-6, .body-44 .one-video-case-16-9-6-copy, .body-44 .one-video-case-16-9-6-copy-copy, .body-44 .video-slider { padding-left: 12px !important; padding-right: 12px !important; }
  .body-95 .div-block-1533, .body-95 .heading-subheading-body-23, .body-95 .one-photo-16-9-2, .body-95 .one-slider-16-9-4, .body-95 .one-video-16-9-7, .body-95 .one-video-case-16-9-23, .body-95 .two-photo-5-4-5, .body-95 .two-photo-slider-1-1-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-89 .div-block-1431, .body-89 .heading-body-4-copy, .body-89 .heading-body-60, .body-89 .one-photo-16-9-2, .body-89 .one-photo-2-39-1-17, .body-89 .one-video-16-9-7, .body-89 .one-video-2-39-1-2, .body-89 .photo-1200x710-photo-998x1300-8, .body-89 .photo-1200x710-photo-998x1300-copy, .body-89 .two-photo-1-1-23, .body-89 .two-photo-slider-1-1-3, .body-89 .two-photo-video-1-1-12 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-25 .div-block-70, .body-25 .grid-72, .body-25 .grid-74, .body-25 .heading-body-5, .body-25 .one-photo-16-9-2, .body-25 .one-photo-2-39-1-5, .body-25 .one-slider-16-9-4, .body-25 .one-slider-2-1-2, .body-25 .one-video-16-9-4, .body-25 .three-photo-video-photo-1-1-2, .body-25 .two-photo-1-1-3, .body-25 .two-photo-3-2-2, .body-25 .two-photo-video-1-1-3, .body-25 .two-video-video-16-9_950-1070-7, .body-25 .two-video-video-16-9_950-1070-8 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-78 .div-block-1245, .body-78 .heading-body-51, .body-78 .one-photo-16-9-2, .body-78 .one-photo-21-7-2, .body-78 .one-video-16-9-7, .body-78 .three-photo-1-1-2, .body-78 .three-photo-4-5-8, .body-78 .two-photo-16-9_950-1070-9, .body-78 .two-photo-3-2-2, .body-78 .two-photo-4-5-2, .body-78 .two-photo-5-4-2 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-88 .div-block-1464, .body-88 .heading-body-63, .body-88 .one-photo-16-9-2, .body-88 .one-photo-2-39-1-18, .body-88 .one-slider-2-1-4, .body-88 .two-photo-4-5-6, .body-88 .two-photo-hover-photo-1-1-5, .body-88 .two-photo-slider-16-9_950-1070-8, .body-88 .two-photo-slider4-5-4, .body-88 .two-photo-video-4-5-2 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-46 .div-block-70, .body-46 .four-poster-2, .body-46 .heading-body-19, .body-46 .heading-body-copy-copy, .body-46 .one-photo-16-9-2, .body-46 .one-photo-2-39-1-5, .body-46 .two-photo-1-1-4, .body-46 .two-photo-hover-slider-1-1-3, .body-46 .two-photo-video-16-9_950-1070-2, .body-46 .two-photo-video-16-9_950-1070-2-copy, .body-46 .video-slider { padding-left: 12px !important; padding-right: 12px !important; }
  .body-57 .div-block-776, .body-57 .grid-124, .body-57 .heading-body-34, .body-57 .one-photo-16-9-2, .body-57 .one-video-16-9-7, .body-57 .one-video-21-7, .body-57 .one-video-case-16-9-11, .body-57 .two-photo-16-9_950-1070-4, .body-57 .two-photo-16-9_950-1070-5, .body-57 .two-photo-3-2-2, .body-57 .two-photo-video-16-9-2, .body-57 .two-photo-video-3-2-2, .body-57 .two-photo-video-4-3-2 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-100 .div-block-1594, .body-100 .heading-body-70, .body-100 .heading-subheading-body-25, .body-100 .one-photo-16-9-2, .body-100 .one-photo-2-39-1-23, .body-100 .one-photo-21-7-2, .body-100 .one-slider-16-9-7, .body-100 .one-video-2-39-1-2, .body-100 .two-photo-1-1-27, .body-100 .two-photo-16-9_950-1070-12, .body-100 .two-photo-3-2-2, .body-100 .two-photo-hover-slider-1-1-2, .body-100 .two-photo-video-1-1-14 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-81 .div-block-1320, .body-81 .div-block-1332, .body-81 .heading-subheading-body-13, .body-81 .heading-subheading-body-14, .body-81 .one-photo-16-9-2, .body-81 .two-photo-16-9-36, .body-81 .two-photo-3-2-2, .body-81 .two-photo-slider-16-9-8 { padding-left: 12px !important; padding-right: 12px !important; }
  .body-79 .div-block-1282, .body-79 .div-block-1355, .body-79 .four-poster-4, .body-79 .grid-54, .body-79 .heading-body-13-copy, .body-79 .heading-body-53, .body-79 .heading-body-54, .body-79 .heading-subheading-body-15, .body-79 .heading-subheading-body-16, .body-79 .heading-subheading-body-8-copy-4, .body-79 .heading-subheading-body-8-copy-5, .body-79 .heading-subheading-body-8-copy-6, .body-79 .one-photo-16-9-2, .body-79 .one-photo-2-39-1-14, .body-79 .one-photo-2-39-1-15, .body-79 .one-slider-2-1-2, .body-79 .one-video-case-16-9-18, .body-79 .one-video-case-16-9-3-copy-4, .body-79 .three-photo-4-5-10-copy, .body-79 .two-photo-1-1-20, .body-79 .two-photo-16-9_950-1070-10, .body-79 .two-photo-3-2-2, .body-79 .two-photo-hover-slider-1-1-2, .body-79 .two-photo-video-16-9_950-1070-4, .body-79 .two-slider-slider-16-9_950-1070-2 { padding-left: 12px !important; padding-right: 12px !important; }
  .services { padding-left: 12px !important; padding-right: 12px !important; }
  .vac-drawer { right: 12px !important; }
  .vac-drawer .vac-close { right: 12px !important; }
  .contact { padding-left: 12px !important; padding-right: 12px !important; }
  body.body-7 .div-block-107 { padding-left: 12px !important; padding-right: 12px !important; }
  body.body-7 .news-copy-copy .div-block-1173, body.body-7 .news-copy-copy .section-101 { padding-left: 12px !important; padding-right: 12px !important; }
  :root { --mobile-padding: 12px; }
  .menu-2-copy, .menu-2-copy-copy { padding-left: 12px; padding-right: 12px; }
  .city-clock-trigger { right: 12px; }
  .div-block-198 > a:nth-child(2) { right: 56px; }
  .div-block-197 { padding-left: 12px; padding-right: 12px; }
  .contact, .contact-footer, .card-contact { padding-left: 12px; padding-right: 12px; }
}

/* mobile 12px gutters: case-page wrappers, blog tabs, vacancy form column */
@media screen and (max-width: 767px) {
  [class*="main-section-4"] > :not([class*="div-block-981"]) { padding-left: 12px !important; padding-right: 12px !important; }
  .div-block-1607, [class*="div-block-1028"] { padding-left: 12px !important; padding-right: 12px !important; }
  .blog-v2-page .tabs-menu-5.w-tab-menu { padding-left: 12px; padding-right: 12px; }
  .tab-pane, .tab-pane-tab-3, .blog-v2-page [class*="w-tab-pane"] { padding-left: 12px !important; padding-right: 12px !important; }
  .section-57 .div-block-580 { padding-left: 12px; padding-right: 12px; }
}

/* ===== Mobile: «Мега кейси» as a swipe row, smaller intro, left-aligned lists ===== */
@media screen and (max-width: 767px) {
  body.body-5 .mega-cases { margin-top: 96px; min-height: 0; }
  body.body-5 .heading-11.mega-cases-intro { font-size: 24px; line-height: 1.08; }
  body.body-5 .div-block-63 { margin-bottom: 24px; }
  body.body-5 .slider-container-5 { padding: 0; overflow: visible; flex: none; }
  body.body-5 .slider-wrapper-2-copy-2 { height: auto; }
  body.body-5 .mega-cases-mask {
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px;
    padding: 0 12px; scroll-padding: 0 12px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.body-5 .mega-cases-mask::-webkit-scrollbar { display: none; }
  body.body-5 .mega-cases-item { flex: 0 0 78%; padding: 0; scroll-snap-align: start; }
  body.body-5 .slide-content-wrapper-5 { display: flex; flex-direction: column; }
  body.body-5 .prom, body.body-5 .masterzoo, body.body-5 .div-block-104-copy-5 {
    flex: none; height: auto; aspect-ratio: 4 / 5; padding: 12px;
  }
  body.body-5 .div-block-937 { padding: 0 2px 0 2px; }
  body.body-5 .heading-357 { font-size: 15px; line-height: 1.15; }
  body.body-5 .heading-356 { font-size: 13px; line-height: 1.25; }
  body.body-5 .heading-356 br { content: " "; }

  .cases-list-row, .blog-list-row { justify-items: start; text-align: left; }
  .cases-list-title, .cases-list-tag, .cases-list-desc,
  .blog-list-title, .blog-list-tag, .blog-list-date { text-align: left; justify-self: start; }
  .blog-list { padding-left: 0 !important; padding-right: 0 !important; }
}
@media screen and (max-width: 767px) {
  body.body-5 .heading-11.mega-cases-intro { padding-left: 0 !important; padding-right: 0 !important; }
  body.body-5 .slider-container-5, body.body-5 .slider-wrapper-2-copy-2, body.body-5 .mega-cases-track,
  body.body-5 .mega-cases-mask, body.body-5 .mega-cases-item, body.body-5 .slide-content-wrapper-3 { height: auto !important; min-height: 0 !important; }
  body.body-5 .mega-cases-item { align-self: flex-start; }
  body.body-5 .mega-cases { margin-bottom: 0; }
}
@media screen and (max-width: 767px) {
  body.body-5 .div-block-937 { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0 0; }
  body.body-5 .heading-357, body.body-5 .heading-356 { text-align: left; white-space: normal; width: 100%; margin: 0; }
  body.body-5 .heading-356 { color: #8a8a8a; }
  body.body-5 .mega-cases .div-block-775 { padding: 6px 8px; font-size: 10px; }
  body.body-5 .mega-cases .div-block-775 img { height: 18px; width: auto; }
  body.body-5 .cases-block { margin-top: 48px; }
}

/* mobile: floating grid/list switch at the bottom of the screen */
@media screen and (max-width: 767px) {
  .cases-view-toggle.vt-float, .blog-view-toggle.vt-float {
    position: fixed; left: 50%; bottom: 16px; top: auto; margin: 0; z-index: 25;
    transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  }
  .cases-view-toggle.vt-float.vt-show, .blog-view-toggle.vt-float.vt-show {
    transform: translate(-50%, 0); opacity: 1; pointer-events: auto;
  }
}

/* mobile: tighter pill filters */
@media screen and (max-width: 767px) {
  .cases-tabs .tabs-menu { gap: 6px; padding-bottom: 20px; }
  .cases-tabs .tabs-menu .tab-link { padding: 8px 14px; }
  .blog-v2-page .tabs-menu-5.w-tab-menu { gap: 6px; padding-bottom: 20px; }
  .blog-v2-page .tabs-menu-5 .w-tab-link { padding: 8px 14px; }
}
@media screen and (max-width: 767px) {
  /* mega-case covers keep the photo's own 1386:800 proportions */
  body.body-5 .prom, body.body-5 .masterzoo, body.body-5 .div-block-104-copy-5 { aspect-ratio: 1386 / 800; }
  body.body-5 .mega-cases-item { flex-basis: 84%; }
}

/* mobile: principles go card after card — one card plus a peek of the next */
@media screen and (max-width: 767px) {
  /* mobile: 3D ring carousel (mosaique-style) — perspective(1200px); neighbours swing in on ±60° */
  body.body-7 .principles-grid { display: flex; flex-direction: column; }
  body.body-7 .pr-head { display: contents; }
  body.body-7 .pr-heading { order: 0; margin-bottom: 28px; }
  body.body-7 .pr-viewport { order: 1; overflow: hidden; touch-action: pan-y; }
  body.body-7 .pr-arrows { order: 2; display: flex; align-self: center; margin-top: 24px; gap: 8px; }
  body.body-7 .pr-arrow { width: 56px; height: 44px; }
  body.body-7 .pr-list {
    display: block; position: relative; gap: 0;
    height: calc((100vw - 24px) * 0.68);
    transform: perspective(1200px) !important; transform-style: preserve-3d; transition: none;
  }
  body.body-7 .pr-item {
    position: absolute; top: 0; left: 50%; width: 62%; margin-left: -31%;
    transition: transform .7s cubic-bezier(.65,0,.35,1), filter .7s ease;
    transform: translateZ(-360px) rotateY(0deg); z-index: 1;
  }
  body.body-7 .pr-item[data-pos="0"] { transform: translateZ(0) rotateY(0deg); z-index: 4; }
  body.body-7 .pr-item[data-pos="1"] { transform: translateZ(-220px) rotateY(60deg); z-index: 3; filter: brightness(.5); }
  body.body-7 .pr-item[data-pos="3"] { transform: translateZ(-220px) rotateY(-60deg); z-index: 3; filter: brightness(.5); }
  body.body-7 .pr-item[data-pos="2"] { filter: brightness(.4); }
  body.body-7 .pr-num, body.body-7 .pr-title, body.body-7 .pr-text { display: none; }
}

/* mobile About: team grid visible (theme hid it), 2 columns, click → full-screen
   drawer sliding in from the right */
@media screen and (max-width: 767px) {
  body.body-7 section.team { display: block !important; padding: 56px 12px 0 !important; }
  body.body-7 section.team .heading-36 { font-size: 40px; line-height: 1; margin-bottom: 24px; }
  body.body-7 section.team .container-2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px 8px; width: 100%; }
  body.body-7 section.team .flipcard-wrapper { width: 100%; min-width: 0; }
  body.body-7 section.team .heading-375 { font-size: 15px; }
  body.body-7 section.team .text-block-119 { font-size: 14px; }

  .vac-drawer.team-drawer {
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0;
    width: 100vw; max-width: none; border-radius: 0;
    transform: translateX(100%);
  }
  .vac-drawer.team-drawer.is-open { transform: translateX(0); }
  .vac-drawer.team-drawer .vac-card { border-radius: 0; min-height: 100%; padding: 0 12px 40px; }
  .vac-drawer.team-drawer .vac-head { margin: 0 -12px; padding: 14px 12px 12px; border-radius: 0; }
  .vac-drawer.team-drawer .vac-close { right: 12px !important; }
  .vac-drawer.team-drawer .team-photo { width: 100%; height: auto; aspect-ratio: auto; }
}
@media screen and (max-width: 767px) {
  body.body-7 section.team .flipcard-wrapper,
  body.body-7 section.team .d-31-card,
  body.body-7 section.team .flipcard-front { display: block !important; width: 100% !important; max-width: none; }
  body.body-7 section.team .team-ph { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; }
  body.body-7 section.team .div-block-974 { padding: 8px 0 0 2px; width: 100%; }
  body.body-7 section.team { padding-top: 96px !important; }
}
@media screen and (max-width: 767px) {
  body.body-7 .principles-grid { padding-left: 12px !important; padding-right: 12px !important; }
}
@media screen and (max-width: 1023px) {
  html.vac-lock .menu-2-copy, html.vac-lock .menu-2-copy-copy, html.vac-lock .city-clock-trigger { visibility: hidden; }
}

/* ===== Mobile header = Monologue-style floating glass bar at the bottom:
   logo left, 2x2 dots (menu) right ===== */
@media screen and (max-width: 767px) {
  .menu-2-copy, .menu-2-copy-copy {
    top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; height: 56px;
    padding: 0 20px; border-radius: 14px; box-sizing: border-box;
    background: linear-gradient(135deg, rgba(60, 56, 54, .72), rgba(28, 24, 24, .78)) !important;
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  }
  .menu-2-copy .div-block-198, .menu-2-copy-copy .div-block-198 { height: 56px; }
  .div-block-198 > a:first-child { height: auto; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
  .div-block-198 > a:nth-child(2) {
    position: static; right: auto; height: 44px; width: 44px; padding: 0; margin-right: -10px;
    justify-content: center; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .div-block-198 > a:nth-child(2)::after,
  html.mm-open .div-block-198 > a:nth-child(2)::after { letter-spacing: 0; }
  .div-block-198 > a:nth-child(2)::after {
    content: ""; display: block; width: 18px; height: 18px;
    background:
      linear-gradient(#fff, #fff) 0 0 / 8px 8px no-repeat,
      linear-gradient(#fff, #fff) 100% 0 / 8px 8px no-repeat,
      linear-gradient(#fff, #fff) 0 100% / 8px 8px no-repeat,
      linear-gradient(#fff, #fff) 100% 100% / 8px 8px no-repeat;
  }
  html.mm-open .div-block-198 > a:nth-child(2)::after {
    content: "\2715"; width: auto; height: auto; background: none; color: #fff; font-size: 20px; line-height: 1;
  }
  html .city-clock-trigger { display: none !important; }
  .div-block-197 { padding: 28px 12px 96px; }
  .contact-footer { padding-bottom: 88px; }
  .cases-view-toggle.vt-float, .blog-view-toggle.vt-float { bottom: 84px; }
}
@media screen and (max-width: 1023px) {
  /* glass sits on the inner row, not the fixed header — a filter on the header would trap the full-screen menu panel */
  .menu-2-copy, .menu-2-copy-copy {
    background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: none; padding: 0; border-radius: 0;
  }
  .menu-2-copy .div-block-198, .menu-2-copy-copy .div-block-198 {
    padding: 0 20px; box-sizing: border-box; border-radius: 14px;
    background: linear-gradient(135deg, rgba(60, 56, 54, .72), rgba(28, 24, 24, .78));
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  }
}
@media screen and (max-width: 767px) {
  /* bar back on top; smaller dots */
  .menu-2-copy, .menu-2-copy-copy { top: 12px; bottom: auto; }
  .div-block-198 > a:nth-child(2)::after {
    width: 14px; height: 14px;
    background:
      linear-gradient(#fff, #fff) 0 0 / 5px 5px no-repeat,
      linear-gradient(#fff, #fff) 100% 0 / 5px 5px no-repeat,
      linear-gradient(#fff, #fff) 0 100% / 5px 5px no-repeat,
      linear-gradient(#fff, #fff) 100% 100% / 5px 5px no-repeat;
  }
  html.mm-open .div-block-198 > a:nth-child(2)::after { width: auto; height: auto; background: none; font-size: 18px; }
  .div-block-197 { padding: 92px 12px 32px; }
  .contact-footer { padding-bottom: 0; }
  .cases-view-toggle.vt-float, .blog-view-toggle.vt-float { bottom: 16px; }
}

/* ===== Mobile menu opens as a blurred glass card (Monologue-style) ===== */
@media screen and (max-width: 1023px) {
  .div-block-197 {
    inset: 12px !important; width: auto; height: auto; border-radius: 14px;
    padding: 84px 20px 20px !important;
    background: linear-gradient(135deg, rgba(70, 62, 60, .55), rgba(30, 24, 24, .7));
    backdrop-filter: blur(40px) saturate(160%); -webkit-backdrop-filter: blur(40px) saturate(160%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  }
  html.mm-open .menu-2-copy .div-block-198, html.mm-open .menu-2-copy-copy .div-block-198 {
    background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html.mm-open .div-block-198 > a:nth-child(2)::after {
    content: ""; width: 14px; height: 14px; font-size: 0;
    background:
      linear-gradient(#fff, #fff) 0 0 / 5px 5px no-repeat,
      linear-gradient(#fff, #fff) 100% 0 / 5px 5px no-repeat,
      linear-gradient(#fff, #fff) 0 100% / 5px 5px no-repeat,
      linear-gradient(#fff, #fff) 100% 100% / 5px 5px no-repeat;
  }
  .div-block-197 .div-block-201 { border-bottom: 0; padding-bottom: 0; }
  .div-block-197 .div-block-201::before { display: none; }
  .div-block-197 .heading-57 { font-size: 38px; line-height: 1.12; text-transform: uppercase; letter-spacing: 0; font-weight: 400; }
  .div-block-197 .mm-foot { margin-top: auto; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding-top: 24px; }
  .div-block-197 .mm-foot a, .div-block-197 .mm-time { font: 500 12px/1 Taktikasans, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6); }
  .div-block-197 .mm-time { margin-left: auto; font-variant-numeric: tabular-nums; }
}
@media screen and (max-width: 767px) {
  .body-8 .vacancies-list-row { justify-items: start; text-align: left; }
  .body-8 .vacancies-list-title, .body-8 .vacancies-list-meta, .body-8 .vacancies-list-cta { text-align: left; justify-self: start; }
  .body-8 .vacancies-list-cta { order: 3; }
}
@media screen and (max-width: 1023px) {
  /* a bit narrower bar + menu card */
  .menu-2-copy, .menu-2-copy-copy { left: 20px; right: 20px; }
  .div-block-197 { inset: 12px 20px 20px !important; }

  /* animated dots: hover/press squeeze, open = spin 90deg while the squares spread */
  .div-block-198 > a:nth-child(2)::after {
    transition: transform .5s cubic-bezier(.65, 0, .35, 1), width .5s cubic-bezier(.65, 0, .35, 1), height .5s cubic-bezier(.65, 0, .35, 1), background-size .5s cubic-bezier(.65, 0, .35, 1);
  }
  .div-block-198 > a:nth-child(2):active::after { transform: scale(.8); }
  html.mm-open .div-block-198 > a:nth-child(2)::after {
    transform: rotate(90deg); width: 16px; height: 16px;
    background-size: 6px 6px;
  }
}
@media screen and (max-width: 1023px) {
  .div-block-198 > a:nth-child(2)::after {
    width: 11px; height: 11px;
    background:
      linear-gradient(#fff, #fff) 0 0 / 4px 4px no-repeat,
      linear-gradient(#fff, #fff) 100% 0 / 4px 4px no-repeat,
      linear-gradient(#fff, #fff) 0 100% / 4px 4px no-repeat,
      linear-gradient(#fff, #fff) 100% 100% / 4px 4px no-repeat;
  }
  html.mm-open .div-block-198 > a:nth-child(2)::after { width: 13px; height: 13px; background-size: 5px 5px; }
}
@media screen and (max-width: 1023px) {
  .div-block-197 .heading-57 { font-size: 30px; line-height: 1.15; }
}
@media screen and (max-width: 767px) {
  /* vacancies row: title + meta stacked on the left, "Детальніше" centered on the right */
  .body-8 .vacancies-list-row { grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; align-items: center; padding: 22px 0; }
  .body-8 .vacancies-list-title { grid-column: 1; grid-row: 1; }
  .body-8 .vacancies-list-meta { grid-column: 1; grid-row: 2; }
  .body-8 .vacancies-list-cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; text-align: right; order: 0; }
}
@media screen and (max-width: 767px) {
  /* vacancy / talent-base drawers: full-screen, sliding in from the right */
  .vac-drawer {
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0;
    width: 100vw; max-width: none; border-radius: 0; transform: translateX(100%);
  }
  .vac-drawer.is-open { transform: translateX(0); }
  .vac-drawer .vac-card { border-radius: 0; min-height: 100%; padding-left: 12px; padding-right: 12px; }
  .vac-drawer .vac-head { margin: 0 -12px; padding: 18px 12px 14px; border-radius: 0; padding-right: 56px; }
  .vac-drawer .vac-close { top: 18px !important; right: 12px !important; }
  html.vac-lock .menu-2-copy, html.vac-lock .menu-2-copy-copy { visibility: hidden; }
}
@media screen and (max-width: 767px) {
  /* only the round ✕ stays put; head + content scroll away. No transform while open,
     so position:fixed is relative to the screen instead of the sliding drawer. */
  .vac-drawer.is-open { transform: none; }
  .vac-drawer .vac-head, .vac-drawer .vac-head.team-head { position: static; height: auto; }
  .vac-drawer .vac-close, .vac-drawer .vac-head .vac-close, .vac-drawer .team-head .vac-close, .vac-drawer .vac-head.team-head .vac-close {
    position: fixed !important; top: 12px !important; right: 12px !important; z-index: 80;
    width: 44px; height: 44px; border-radius: 50%; font-size: 22px;
    background: #ececec; color: #0a0a0a;
  }
  .vac-drawer .vac-close:hover { background: #fff; }
  .vac-drawer .vac-head { padding-top: 22px; }
}

/* mobile menu: card fades in, then links rise in one by one (soft blur → sharp) */
@keyframes mm-card { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mm-rise { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media screen and (max-width: 1023px) {
  html.mm-open .div-block-197 { animation: mm-card .45s cubic-bezier(.2, .7, .2, 1) both; }
  html.mm-open .div-block-197 .div-block-201 a,
  html.mm-open .div-block-197 .mm-foot {
    animation: mm-rise .75s cubic-bezier(.2, .7, .2, 1) both;
  }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(1) { animation-delay: .18s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(2) { animation-delay: .25s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(3) { animation-delay: .32s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(4) { animation-delay: .39s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(5) { animation-delay: .46s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(6) { animation-delay: .53s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(7) { animation-delay: .6s; }
  html.mm-open .div-block-197 .mm-foot { animation-delay: .75s; }
}
@media (prefers-reduced-motion: reduce) {
  html.mm-open .div-block-197, html.mm-open .div-block-197 .div-block-201 a, html.mm-open .div-block-197 .mm-foot { animation: none; }
}

@media screen and (max-width: 767px) {
  /* round close button: translucent glass with blur */
  .vac-drawer .vac-close, .vac-drawer .vac-head .vac-close, .vac-drawer .team-head .vac-close, .vac-drawer .vac-head.team-head .vac-close {
    background: rgba(120, 120, 120, .38) !important; color: #fff;
    backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
  .vac-drawer .vac-close:hover { background: rgba(150, 150, 150, .5) !important; }
}

/* show reel: square corners (desktop + mobile) */
.showreel-mob, .showreel-desktop,
.showreel-mob .w-background-video, .showreel-desktop .w-background-video,
.showreel-mob video, .showreel-desktop video { border-radius: 0 !important; }
@media screen and (max-width: 1023px) {
  /* menu bar + card use the same 12px side gutters as the page content */
  .menu-2-copy, .menu-2-copy-copy { left: 12px; right: 12px; }
  .div-block-197 { inset: 12px !important; }
}

/* mobile: smaller buttons ("Всі матеріали →", "Залишити заявку", submit…) */
@media screen and (max-width: 767px) {
  .button-12, .baza-open, .submit-button-2-copy,
  .section-57 .submit-button-2, .vac-drawer .submit-button-2, body.body-8 .submit-button-2-copy {
    padding: 8px 14px; font-size: 12px; line-height: 1.2; border-radius: 6px;
  }
  .button-12 .bold-text-19 { font-size: 12px; }
}

/* mobile contact (koto-style): title, label | value rows, photo last, then footer */
@media screen and (max-width: 767px) {
  .card-contact { display: flex; flex-direction: column; gap: 0; }
  .contact-left { display: contents; }
  .contact-left .heading-18 { order: 0; margin: 0 0 32px; }
  .contact-rows { order: 1; width: 100%; }
  .contact-photo-card { order: 2; margin-top: 40px; width: 100%; }
  .contact-row { grid-template-columns: 40% 1fr; column-gap: 12px; padding: 16px 0; }
  .contact-row-label { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .contact-row-person, .contact-row-details, .contact-row-content { grid-column: 2; }
  .contact-row-content { display: flex; flex-direction: column; }
}
@media screen and (max-width: 767px) {
  .card-contact { padding-left: 0 !important; padding-right: 0 !important; }
  .contact-row { display: grid !important; align-items: start; }
  .contact-row-label { align-self: start; }
  .contact-row-content { grid-row: 1 / span 2; }
}
@media screen and (max-width: 767px) {
  .contact-footer { padding-left: 0 !important; padding-right: 0 !important; margin-top: 56px; }
}
@media screen and (max-width: 767px) {
  body.body-3 .contact { padding-top: 56px !important; }
}
@media screen and (max-width: 767px) {
  /* homepage: .section-94 is a flex column with a 112px row gap — cancel it before the contacts */
  body.body-3 .contact { margin-top: -112px; padding-top: 72px !important; }
}

/* mobile cases grid captions: name + grey description stacked, ↗ arrow on the right */
@media screen and (max-width: 767px) {
  .cases-tabs .text-case {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 2px; padding: 10px 40px 0 2px;
  }
  .cases-tabs .text-case .heading-15 { font-size: 15px; line-height: 1.2; white-space: normal; max-width: 100%; }
  .cases-tabs .text-case .text-block-6 { text-align: left; white-space: normal; font-size: 13px; line-height: 1.3; max-width: 100%; }
  .cases-tabs .text-case::after {
    content: ""; position: absolute; top: 12px; right: 4px; width: 16px; height: 16px;
    background: currentColor; color: #0a0a0a;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12L12 4M12 4H6M12 4V10'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12L12 4M12 4H6M12 4V10'/></svg>") center / contain no-repeat;
  }
}
@media screen and (max-width: 767px) {
  body.cases-v2-page .cases-tabs .text-case { position: relative !important; padding: 10px 36px 0 14px !important; }
  body.cases-v2-page .cases-tabs .text-case .text-block-6 { width: 100%; }
  body.cases-v2-page .cases-tabs .div-block-368::after { display: none !important; }
}
@media screen and (max-width: 767px) {
  body.cases-v2-page .cases-tabs .text-case > * { width: 100% !important; max-width: none !important; flex: none !important; }
}
@media screen and (max-width: 767px) {
  body.cases-v2-page .cases-tabs .text-case .text-block-6 { justify-content: flex-start !important; }
}
@media screen and (max-width: 767px) {
  /* smaller filter pills */
  .cases-tabs .tabs-menu { gap: 6px; }
  .cases-tabs .tabs-menu .tab-link { padding: 7px 14px; font-size: 13px; line-height: 1.2; border-radius: 8px; }
  .cases-tabs .tabs-menu .tab-link > div { font-size: 13px; line-height: 1.2; }
  .blog-v2-page .tabs-menu-5 .w-tab-link { padding: 7px 14px; font-size: 13px; line-height: 1.2; border-radius: 8px; }
  .blog-v2-page .tabs-menu-5 .w-tab-link > div { font-size: 13px; line-height: 1.2; }
}
@media screen and (max-width: 767px) {
  .cases-tabs .tabs-menu .tab-link, .blog-v2-page .tabs-menu-5 .w-tab-link {
    height: 32px !important; min-height: 0 !important; padding: 0 14px !important; display: inline-flex !important; align-items: center;
  }
  .cases-tabs .tabs-menu .tab-link > div, .blog-v2-page .tabs-menu-5 .w-tab-link > div { padding: 0 !important; margin: 0 !important; }
}
@media screen and (max-width: 767px) {
  /* caption text flush with the cover's left edge, arrow with its right edge */
  body.cases-v2-page .cases-tabs .text-case { padding-left: 0 !important; }
  body.cases-v2-page .cases-tabs .text-case::after { right: 0; }
}
@media screen and (max-width: 767px) {
  .cases-v2-page .cs-sidebar-title { margin-bottom: 6px !important; }
}
@media screen and (max-width: 767px) {
  body.cases-v2-page .cases-tabs .text-case { padding-top: 0 !important; margin-top: 0 !important; }
  body.cases-v2-page .cases-tabs .text-case .heading-15 { margin-top: 0; }
  body.cases-v2-page .cases-tabs .text-case::after { top: 2px; }
}
@media screen and (max-width: 767px) {
  body.cases-v2-page .cases-tabs .text-case { padding-top: 6px !important; }
  body.cases-v2-page .cases-tabs .text-case::after { top: 8px; }
}

/* mobile cases list view: compact rows — name | category | → */
@media screen and (max-width: 767px) {
  .cases-list-row { grid-template-columns: 1fr 1fr 20px !important; column-gap: 12px; row-gap: 0; align-items: center; padding: 8px 0 !important; position: relative; }
  .cases-list-row .cases-list-title { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 500; line-height: 1.25; }
  .cases-list-row .cases-list-tag { grid-column: 2; grid-row: 1; font-size: 14px; line-height: 1.25; }
  .cases-list-row .cases-list-desc { display: none; }
  .cases-list-row::after {
    content: ""; grid-column: 3; grid-row: 1; width: 18px; height: 18px; justify-self: end; background: #6b6b6b;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8H13M9 4l4 4-4 4'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8H13M9 4l4 4-4 4'/></svg>") center / contain no-repeat;
  }
}

/* mobile blog list view: same compact rows — title | category | → (date hidden) */
@media screen and (max-width: 767px) {
  .blog-list-row { grid-template-columns: 1.5fr 1fr 20px !important; column-gap: 12px; row-gap: 0; align-items: center; padding: 10px 0 !important; }
  .blog-list-row .blog-list-title { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 500; line-height: 1.25; }
  .blog-list-row .blog-list-tag { grid-column: 2; grid-row: 1; font-size: 13px; line-height: 1.25; }
  .blog-list-row .blog-list-date { display: none; }
  .blog-list-row::after {
    content: ""; grid-column: 3; grid-row: 1; width: 18px; height: 18px; justify-self: end; background: #8a8a8a;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8H13M9 4l4 4-4 4'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8H13M9 4l4 4-4 4'/></svg>") center / contain no-repeat;
  }
}
@media screen and (max-width: 767px) {
  .blog-list-row { grid-template-columns: 2.1fr 1fr 18px !important; column-gap: 10px; }
}

/* mobile blog grid captions = cases captions: title flush left + ↗, grey date under it */
@media screen and (max-width: 767px) {
  body.blog-v2-page [class*="w-tab-pane"] a[class*="link-block-3"] { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  body.blog-v2-page [class*="w-tab-pane"] a[class*="link-block-3"] > h1:not(:first-child) {
    grid-column: 1; position: relative; padding: 6px 36px 0 0 !important; margin: 0 !important;
  }
  body.blog-v2-page [class*="w-tab-pane"] a[class*="link-block-3"] > h1:not(:first-child)::after {
    content: ""; position: absolute; top: 8px; right: 0; width: 16px; height: 16px; background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12L12 4M12 4H6M12 4V10'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12L12 4M12 4H6M12 4V10'/></svg>") center / contain no-repeat;
  }
  body.blog-v2-page [class*="w-tab-pane"] a[class*="link-block-3"] > .blog-card-date { grid-column: 1; margin: 2px 0 0; padding: 0; }
}
@media screen and (max-width: 767px) {
  body.blog-v2-page [class*="w-tab-pane"] a[class*="link-block-3"] > .blog-card-date { text-align: left !important; justify-self: start; width: 100%; }
}

/* mobile About heading: bigger, two lines, normal case */
.mob-br { display: none; }
@media screen and (max-width: 767px) {
  .mob-br { display: inline; }
  body.body-7 .div-block-107 .heading-33 { font-size: 56px; line-height: 1; letter-spacing: -0.02em; text-transform: none; }
}
@media screen and (max-width: 767px) {
  /* the hero article is a fixed 100vh in the theme — let it grow with the (now larger) heading + text */
  body.body-7 article.about-taktika { height: auto !important; min-height: 0; }
}

/* mobile news / «Публікації про нас» (About + home): smaller heading, button fits, cards = swipe slider */
@media screen and (max-width: 767px) {
  .news-copy-copy .div-block-1173, .news-main .div-block-1173 {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box;
  }
  .news-copy-copy .heading-2-copy-copy, .news-main .heading-2-copy-copy {
    font-size: 36px !important; line-height: 1.02 !important; margin: 0; flex: 1 1 auto; min-width: 0;
  }
  .news-copy-copy .div-block-1173 .button-12, .news-main .div-block-1173 .button-12 { flex: none; margin: 0; white-space: nowrap; align-self: center; }

  .news-copy-copy .section-101, .news-main .section-101 { padding-left: 0 !important; padding-right: 0 !important; }
  body .news-copy-copy .grid-162, body .news-main .grid-162 {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: flex-start !important;
    gap: 8px !important; width: 100%; max-width: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; padding: 0 12px;
    box-sizing: border-box; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body .news-copy-copy .grid-162::-webkit-scrollbar, body .news-main .grid-162::-webkit-scrollbar { display: none; }
  body .news-copy-copy .grid-162 > a, body .news-main .grid-162 > a {
    flex: 0 0 84% !important; width: 84% !important; min-width: 0; margin: 0 !important; scroll-snap-align: start;
  }
}
@media screen and (max-width: 767px) {
  body .news-main .section-101, body .news-copy-copy .section-101 { padding-left: 0 !important; padding-right: 0 !important; }
  body.body-3 .news-main .grid-162 > a .div-block-39 { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 0 0 !important; }
  body.body-3 .news-main .grid-162 > a .div-block-39 > * { text-align: left !important; width: 100%; margin: 0; }
}

/* mobile About «Публікації про нас» captions = cases captions: flush-left title, ↗ on the right */
@media screen and (max-width: 767px) {
  body.body-7 .news-copy-copy .grid-162 > a .div-block-39 { padding: 6px 0 0 !important; gap: 12px; align-items: flex-start; justify-content: space-between; }
  body.body-7 .news-copy-copy .grid-162 > a .div-block-39 > p { text-align: left !important; flex: 1 1 auto; min-width: 0; margin: 0; }
  body.body-7 .news-copy-copy .grid-162 > a .div-block-39 > h1.text-effie-copy {
    flex: none; font-size: 0 !important; width: 16px; height: 16px; margin: 2px 0 0; background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12L12 4M12 4H6M12 4V10'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12L12 4M12 4H6M12 4V10'/></svg>") center / contain no-repeat;
  }
}

/* mobile home news captions = cases captions: 15px title, 13px grey line, ↗ top-right */
@media screen and (max-width: 767px) {
  body.body-3 .news-main .grid-162 > a .div-block-39 { position: relative; padding: 6px 36px 0 0 !important; gap: 2px; }
  body.body-3 .news-main .grid-162 > a .div-block-39 > h1 { font-size: 15px !important; line-height: 1.2 !important; margin: 0; }
  body.body-3 .news-main .grid-162 > a .div-block-39 > p { font-size: 13px !important; line-height: 1.3 !important; color: #8a8a8a; margin: 0; }
  body.body-3 .news-main .grid-162 > a .div-block-39::after {
    content: ""; position: absolute; top: 8px; right: 0; width: 16px; height: 16px; background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12L12 4M12 4H6M12 4V10'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12L12 4M12 4H6M12 4V10'/></svg>") center / contain no-repeat;
  }
}

/* About news: same caption treatment for the -copy caption variant, a bit smaller text */
@media screen and (max-width: 767px) {
  body.body-7 .news-copy-copy .grid-162 > a [class*="div-block-39"] { padding: 6px 0 0 !important; gap: 12px; align-items: flex-start; justify-content: space-between; }
  body.body-7 .news-copy-copy .grid-162 > a [class*="div-block-39"] > p { text-align: left !important; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px !important; line-height: 1.25 !important; }
  body.body-7 .news-copy-copy .grid-162 > a [class*="div-block-39"] > h1.text-effie-copy,
  body.body-7 .news-copy-copy .grid-162 > a [class*="div-block-39"] > h1:last-child:not(.text-effie) {
    flex: none; font-size: 0 !important; width: 16px; height: 16px; margin: 1px 0 0; background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12L12 4M12 4H6M12 4V10'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12L12 4M12 4H6M12 4V10'/></svg>") center / contain no-repeat;
  }
}
@media screen and (max-width: 767px) {
  body.body-7 .news-copy-copy .grid-162 > a [class*="div-block-39"] > p { order: 1; }
  body.body-7 .news-copy-copy .grid-162 > a [class*="div-block-39"] > h1 { order: 2; }
}

@media screen and (max-width: 767px) {
  /* home news titles ("Taktika + Typetika", "mmr + Taktika") stay on one line */
  .dk-br { display: none; }
}

/* mobile About: only the team grid that opens the drawer; drawer = white card */
@media screen and (max-width: 767px) {
  body.body-7 section.team-2, body.body-7 section.team-3 { display: none !important; }
  .vac-drawer.team-drawer, .vac-drawer.team-drawer .vac-card, .vac-drawer.team-drawer .vac-head, .vac-drawer.team-drawer .vac-head.team-head { background: #fff !important; color: #0a0a0a; }
  .vac-drawer.team-drawer .team-name { color: #0a0a0a; }
  .vac-drawer.team-drawer .team-role { color: #8a8a8a; }
  .vac-drawer.team-drawer .team-bio { color: #1a1a1a; }
  .vac-drawer.team-drawer .team-link { color: #0a0a0a; }
  .vac-drawer.team-drawer .vac-close, .vac-drawer.team-drawer .vac-head .vac-close {
    background: rgba(20, 20, 20, .12) !important; color: #0a0a0a;
  }
}

/* ===== mobile team grid + drawer polish ===== */
@keyframes tm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media screen and (max-width: 767px) {
  /* captions closer to the photo */
  body.body-7 section.team .div-block-974 { padding-top: 4px !important; }
  body.body-7 section.team .heading-375 { margin-top: 0; }

  /* the ✕ is truly fixed: no transform on the open drawer */
  .vac-drawer.team-drawer.is-open { transform: none !important; }
  .vac-drawer.team-drawer .vac-head.team-head { height: 0; min-height: 0; padding: 0; margin: 0; }
  .vac-drawer.team-drawer .vac-card { padding: 0 12px 28px; }
  .vac-drawer.team-drawer .team-photo { margin: 12px 0 18px; aspect-ratio: 4 / 5; }
  .vac-drawer.team-drawer .team-who { margin-bottom: 18px; }
  .vac-drawer.team-drawer .team-name { font-size: 28px; line-height: 1.05; font-weight: 600; letter-spacing: -0.01em; }
  .vac-drawer.team-drawer .team-role { font-size: 22px; line-height: 1.1; font-weight: 600; margin-top: 2px; }
  .vac-drawer.team-drawer .team-bio { font-size: 17px; line-height: 1.3; margin-bottom: 0; }
  .vac-drawer.team-drawer .team-links { margin-top: 22px; padding-top: 0; }
  .vac-drawer.team-drawer .team-link { font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }

  /* content fades in step by step while the card slides in */
  .vac-drawer.team-drawer.is-open .team-photo,
  .vac-drawer.team-drawer.is-open .team-name,
  .vac-drawer.team-drawer.is-open .team-role,
  .vac-drawer.team-drawer.is-open .team-bio,
  .vac-drawer.team-drawer.is-open .team-links { animation: tm-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
  .vac-drawer.team-drawer.is-open .team-photo { animation-delay: .15s; }
  .vac-drawer.team-drawer.is-open .team-name  { animation-delay: .24s; }
  .vac-drawer.team-drawer.is-open .team-role  { animation-delay: .3s; }
  .vac-drawer.team-drawer.is-open .team-bio   { animation-delay: .36s; }
  .vac-drawer.team-drawer.is-open .team-links { animation-delay: .44s; }
}
@media (prefers-reduced-motion: reduce) {
  .vac-drawer.team-drawer.is-open .team-photo, .vac-drawer.team-drawer.is-open .team-name,
  .vac-drawer.team-drawer.is-open .team-role, .vac-drawer.team-drawer.is-open .team-bio,
  .vac-drawer.team-drawer.is-open .team-links { animation: none; }
}
@media screen and (max-width: 767px) {
  .vac-drawer.team-drawer .team-name { font-weight: 500; }
  .vac-drawer.team-drawer .team-role { font-size: 20px; font-weight: 500; }
}

/* livelier drawer slide: gentle start, then it accelerates and snaps in fast at the end */
.vac-drawer { transition: transform 0.6s cubic-bezier(0.8, 0, 0.12, 1); }
@media screen and (max-width: 767px) {
  .vac-drawer, .vac-drawer.team-drawer { transition: transform 0.6s cubic-bezier(0.8, 0, 0.12, 1); }
}

/* ===== mobile vacancy / talent-base drawer: white card + step-by-step content ===== */
@media screen and (max-width: 767px) {
  .vac-drawer:not(.team-drawer), .vac-drawer:not(.team-drawer) .vac-card, .vac-drawer:not(.team-drawer) .vac-head { background: #fff !important; color: #0a0a0a; }
  .vac-drawer:not(.team-drawer) .vac-head h1, .vac-drawer:not(.team-drawer) .heading-47 { color: #0a0a0a; }
  .vac-drawer:not(.team-drawer) .list li, .vac-drawer:not(.team-drawer) .list-item-2 { color: #2a2a2a; }
  .vac-drawer:not(.team-drawer) .vac-close, .vac-drawer:not(.team-drawer) .vac-head .vac-close { background: rgba(20, 20, 20, .12) !important; color: #0a0a0a; }
  .vac-drawer:not(.team-drawer) .vac-apply { background: rgba(0, 0, 0, .06); color: #0a0a0a; }
  .vac-drawer:not(.team-drawer) input.text-field-cf2, .vac-drawer:not(.team-drawer) textarea,
  .vac-drawer:not(.team-drawer) .form-baza input, .vac-drawer:not(.team-drawer) .form-baza textarea { background: #f2f2f2 !important; color: #0a0a0a !important; border: 0; }
  .vac-drawer:not(.team-drawer) input::placeholder, .vac-drawer:not(.team-drawer) textarea::placeholder { color: #8a8a8a; opacity: 1; }
  .vac-drawer:not(.team-drawer) .w-checkbox, .vac-drawer:not(.team-drawer) .w-form-label, .vac-drawer:not(.team-drawer) .checkbox-label-3-copy { color: #0a0a0a !important; }
  .vac-drawer:not(.team-drawer) .w-checkbox-input { background-color: #f2f2f2; border-color: #c9c9c9; }
  .vac-drawer:not(.team-drawer) .submit-button-2, .vac-drawer:not(.team-drawer) .submit-button-2-copy { background-color: #0a0a0a !important; color: #fff !important; }
  .vac-drawer:not(.team-drawer) .success-message-3, .vac-drawer:not(.team-drawer) .w-form-done { background: #f2f2f2 !important; color: #0a0a0a !important; }
}

@keyframes vac-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media screen and (max-width: 767px) {
  .vac-drawer:not(.team-drawer).is-open .div-block-581 > *,
  .vac-drawer:not(.team-drawer).is-open .div-block-582 > *,
  .vac-drawer:not(.team-drawer).is-open .baza-drawer-form > * { animation: vac-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
  .vac-drawer:not(.team-drawer).is-open .div-block-581 > :nth-child(1) { animation-delay: .15s; }
  .vac-drawer:not(.team-drawer).is-open .div-block-581 > :nth-child(2) { animation-delay: .23s; }
  .vac-drawer:not(.team-drawer).is-open .div-block-581 > :nth-child(3) { animation-delay: .31s; }
  .vac-drawer:not(.team-drawer).is-open .div-block-581 > :nth-child(4) { animation-delay: .39s; }
  .vac-drawer:not(.team-drawer).is-open .div-block-582 > :nth-child(1) { animation-delay: .47s; }
  .vac-drawer:not(.team-drawer).is-open .div-block-582 > :nth-child(2) { animation-delay: .55s; }
  .vac-drawer:not(.team-drawer).is-open .baza-drawer-form > :nth-child(1) { animation-delay: .2s; }
  .vac-drawer:not(.team-drawer).is-open .baza-drawer-form > :nth-child(2) { animation-delay: .3s; }
  .vac-drawer:not(.team-drawer).is-open .baza-drawer-form > :nth-child(3) { animation-delay: .4s; }
}
@media (prefers-reduced-motion: reduce) {
  .vac-drawer.is-open .div-block-581 > *, .vac-drawer.is-open .div-block-582 > *, .vac-drawer.is-open .baza-drawer-form > * { animation: none; }
}

/* mobile: contact block starts closer to what is above it, on every page */
@media screen and (max-width: 767px) {
  .contact { padding-top: 56px !important; margin-top: 0; }
}
@media screen and (max-width: 767px) {
  /* these templates add a 56px section margin / flex gap before the contacts on top of the padding */
  body.body-7 .contact, body.body-5 .contact, body.body-74 .contact, body.body-8 .contact { margin-top: -56px; }
}

/* mobile principles: back to stacked cards, one under another, with their text */
@media screen and (max-width: 767px) {
  body.body-7 .principles-grid { display: block; }
  body.body-7 .pr-head { display: block; margin-bottom: 24px; }
  body.body-7 .pr-heading { margin-bottom: 0; }
  body.body-7 .pr-arrows { display: none !important; }
  body.body-7 .pr-viewport { overflow: visible; touch-action: auto; }
  body.body-7 .pr-list { display: flex; flex-direction: column; gap: 28px; height: auto; transform: none !important; transform-style: flat; }
  body.body-7 .pr-item { position: static; width: 100%; margin: 0; flex: 0 0 auto; transform: none !important; filter: none !important; opacity: 1 !important; transition: none; }
  body.body-7 .pr-num, body.body-7 .pr-title, body.body-7 .pr-text { display: block; }
}
@media screen and (max-width: 767px) {
  body.body-7 .pr-num { display: inline-flex; }
}
@media screen and (max-width: 767px) {
  /* the sticker already carries the title — keep only the number and the text */
  body.body-7 .pr-title { display: none !important; }
}

/* mobile menu: quicker text reveal */
@media screen and (max-width: 1023px) {
  html.mm-open .div-block-197 { animation-duration: .3s; }
  html.mm-open .div-block-197 .div-block-201 a, html.mm-open .div-block-197 .mm-foot { animation-duration: .45s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(1) { animation-delay: .08s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(2) { animation-delay: .12s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(3) { animation-delay: .16s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(4) { animation-delay: .2s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(5) { animation-delay: .24s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(6) { animation-delay: .28s; }
  html.mm-open .div-block-197 .div-block-201 a:nth-child(7) { animation-delay: .32s; }
  html.mm-open .div-block-197 .mm-foot { animation-delay: .4s; }
}

/* case pages, mobile: "Інші проєкти" — the cover images stacked in one column */
@media screen and (max-width: 767px) {
  .other-projects-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; width: 100%; height: auto !important; }
  .other-projects-grid > div { width: 100% !important; min-width: 0; height: auto !important; grid-column: auto !important; grid-row: auto !important; }
  .other-projects-grid a { display: block; width: 100%; }
  .other-projects-grid img { display: block; width: 100% !important; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
}

@media screen and (max-width: 767px) {
  .other-projects-title { font-size: clamp(28px, 9.5vw, 40px) !important; line-height: 1.05 !important; white-space: nowrap; padding-left: 20px !important; padding-right: 20px !important; margin-bottom: 20px; }
}

/* ===== compact open menu: card hugs its content (Monologue-style), tap outside closes ===== */
@media screen and (max-width: 1023px) {
  .div-block-197 { inset: 12px 12px auto 12px !important; height: auto !important; max-height: calc(100vh - 24px); padding: 76px 20px 18px !important; }
  .div-block-197 .div-block-201 a { padding: 4px 0; }
  .div-block-197 .heading-57 { font-size: 30px; line-height: 1.08; }
  .div-block-197 .mm-foot { margin-top: 28px; padding-top: 0; }
}
@media screen and (max-width: 1023px) {
  /* slightly smaller corner radius on the mobile menu bar + open card */
  .menu-2-copy .div-block-198, .menu-2-copy-copy .div-block-198 { border-radius: 10px; }
  .div-block-197 { border-radius: 10px; }
}
@media screen and (max-width: 767px) {
  /* more air between the principles and «Публікації про нас» */
  body.body-7 .principles-grid { padding-bottom: 110px !important; }
}
@media screen and (max-width: 767px) {
  /* ✕ must stay visible over dark photos and white cards alike: frosted white disc + soft shadow */
  .vac-drawer.team-drawer .vac-close, .vac-drawer.team-drawer .vac-head .vac-close,
  .vac-drawer:not(.team-drawer) .vac-close, .vac-drawer:not(.team-drawer) .vac-head .vac-close {
    background: rgba(255, 255, 255, .88) !important; color: #0a0a0a !important;
    backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .22);
  }
}

/* ===== case pages: credits — grey title, then "Role: Name" rows ===== */
.cr-block { display: block; width: 100%; box-sizing: border-box; padding: 0 32px; margin: 0 0 40px; text-align: left; }
.cr-title, .cr-group-title, .cr-rows { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 16px; line-height: 1.45; font-weight: 500; }
.cr-title { margin: 0 0 14px; color: #8d8d8d; }
.cr-group { margin: 0 0 20px; }
.cr-group-title { margin: 0 0 4px; color: #fff; }
.cr-rows { margin: 0; color: #fff; }
.cr-role { color: #8d8d8d; }
.cr-name { color: #fff; }
/* desktop / tablet: companies side by side, 2 or 3 columns */
@media screen and (min-width: 768px) {
  .cr-block { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .cr-block[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-block[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-block > .cr-title { grid-column: 1 / -1; }
}
@media screen and (max-width: 991px) {
  .cr-block { padding: 0 20px; }
}
@media screen and (max-width: 767px) {
  .cr-title, .cr-group-title, .cr-rows { font-size: 14px; }
}

/* ===== case pages, mobile: title + client logo in one row ===== */
@media screen and (max-width: 767px) {
  .case-intro { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; height: auto !important; grid-template-columns: none !important; }
  .case-intro > h1 { flex: 1 1 auto !important; min-width: 0; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; font-size: clamp(20px, 6vw, 26px) !important; line-height: 1.15 !important; }
  .case-intro > img { flex: 0 0 auto !important; width: auto !important; height: auto !important; max-width: 88px !important; max-height: 56px !important; margin: 0 !important; object-fit: contain; align-self: center !important; }
}

/* ===== case pages, mobile: background videos must keep their box =====
   In the stacked (flex column) grids the video's wrapper chain computed to
   0x0 in some browsers; give the wrapper the full width and pin the video
   to whatever box the embed's own aspect-ratio defines. */
@media screen and (max-width: 767px) {
  .case-page div:has(> .w-embed > .w-background-video) { width: 100%; min-width: 0; max-width: 100%; }
  .case-page .w-embed:has(> .w-background-video) { position: relative; width: 100%; height: auto; overflow: hidden; }
  .case-page .w-embed:has(> .w-background-video) > .w-background-video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
  .case-page .w-embed:has(> .w-background-video) > .w-background-video > video { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
}

/* Inzhur: the logo tile was 12% of the page width — too large on wide screens. */
@media screen and (min-width: 768px) {
  .case-intro > img.image-7495 { width: 7%; min-width: 88px; max-width: 140px; }
}

/* case pages, mobile: tighter vertical rhythm around the title row */
@media screen and (max-width: 767px) {
  .case-page :has(+ .case-intro) { margin-bottom: 0 !important; }
  .case-page .case-intro { margin-top: 12px !important; margin-bottom: 0 !important; }
  .case-page .case-intro + * { margin-top: 40px !important; }
}

/* case pages, mobile: one size for every section heading (Бриф, Рішення,
   Інші проєкти, Напишіть нам…); the title row above keeps its own size. */
@media screen and (max-width: 767px) {
  .case-page :not(.case-intro):not(a) > h1 { font-size: 28px !important; line-height: 1.15 !important; }
}

/* case pages, mobile: compact spacing between text blocks and media */
@media screen and (max-width: 767px) {
  /* text sections ("Бриф/Рішення", "Лого", "Кольори"…): heading + copy */
  .case-page [class*="w-layout-grid"]:has(> h1),
  .case-page [class*="w-layout-grid"]:has(> div > h1) {
    row-gap: 28px !important; grid-row-gap: 28px !important; margin-bottom: 0 !important; padding-bottom: 0 !important;
  }
  .case-page [class*="w-layout-grid"]:has(> h1) { row-gap: 14px !important; grid-row-gap: 14px !important; }
  .case-page div:has(> h1 + p), .case-page div:has(> h1 + div) { row-gap: 14px; grid-row-gap: 14px; }
  .case-page h1 + p, .case-page h1 + div > p:first-child { padding-top: 0 !important; }
  /* gap above a text section */
  .case-page div:has(> [class*="w-layout-grid"]:has(> h1)):not(.case-intro + *),
  .case-page div:has(> [class*="w-layout-grid"]:has(> div > h1)):not(.case-intro + *) { margin-top: 40px !important; }
}

/* vacancy / talent-base card, mobile: the ✕ is one pinned button outside the
   scrolling card, so it always sits in the top-right corner — a frosted
   glass disc with a dark ✕, readable on the white card. */
.vac-close-pin { display: none; }
@media screen and (max-width: 767px) {
  html.vac-lock button.vac-close.vac-close-pin {
    display: flex; position: fixed; top: 20px; right: 20px; z-index: 90;
    width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 50%;
    align-items: center; justify-content: center;
    font-size: 26px; line-height: 1; opacity: 1;
    background: rgba(120, 120, 120, .34) !important; color: #0a0a0a !important;
    backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 14px rgba(0, 0, 0, .16);
  }
  .vac-drawer .vac-close, .vac-drawer .vac-head .vac-close { display: none !important; }
}

/* ===== services.html: unit cards (Taktika / Dynamika / Typetika) + panels ===== */
.svc-hero { padding: 120px 20px 0; }
.svc-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 32px; align-items: start; margin-bottom: 120px; }
.svc-hero-top .heading-7-copy-copy-copy { margin: 0; }
.svc-hero-text { padding-top: 18px; max-width: 520px; }
.svc-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 18px 28px; border-radius: 999px;
  background: #fff; color: #0a0a0a; font-size: 18px; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.svc-pill:hover { background: #e9e9e9; }
.svc-units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* same frosted glass, 8px corners and 8px gaps as the rest of the site */
.svc-unit {
  appearance: none; -webkit-appearance: none; border: 0; text-align: left; cursor: pointer; color: #fff; position: relative;
  display: flex; flex-direction: column; align-items: flex-start; min-height: 440px; padding: 32px; border-radius: 8px;
  background: rgba(255, 255, 255, .1); font-family: inherit;
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: background-color .25s ease;
}
.svc-unit:hover, .svc-unit.is-active { background: rgba(255, 255, 255, .16); }
.svc-unit:focus-visible { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
/* plain arrow, no disc: nudges down on hover, flips up on the open unit */
.svc-unit::after {
  content: "↓"; position: absolute; top: 28px; right: 32px; color: rgba(255, 255, 255, .6); font-size: 22px; line-height: 1;
  transition: transform .25s ease, color .25s ease;
}
.svc-unit:hover::after { transform: translateY(5px); color: #fff; }
.svc-unit.is-active::after { content: "↑"; color: #fff; }
.svc-unit.is-active:hover::after { transform: translateY(-5px); }
.svc-unit-ico { display: block; width: 72px; height: 72px; }
.svc-unit-ico img { display: block; width: 100%; height: 100%; }
.svc-unit-name { margin-top: auto; font-family: Taktikasans, sans-serif; font-weight: 500; font-size: clamp(28px, 2.5vw, 40px); line-height: 1.1; }
.svc-unit-sub { margin-top: 8px; max-width: 30ch; min-height: 2.8em; color: rgba(255, 255, 255, .6); font-size: 15px; line-height: 1.4; }
.svc-panels { margin-top: 96px; }
.svc-panel[hidden] { display: none !important; }
.svc-panel.is-active { animation: svc-in .45s ease both; }
@keyframes svc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.svc-ico { display: block; width: 246px; height: 246px; margin-top: 40px; }
.svc-ico img, .svc-ico svg { display: block; width: 100%; height: 100%; }
@media screen and (max-width: 991px) {
  .svc-hero { padding-top: 96px; }
  .svc-hero-top { grid-template-columns: 1fr; margin-bottom: 56px; gap: 20px; }
  .svc-hero-text { padding-top: 0; }
  .svc-pill { justify-self: start; }
  .svc-units { grid-template-columns: 1fr; gap: 8px; }
  .svc-unit { min-height: 220px; padding: 20px; }
  .svc-unit-ico { width: 56px; height: 56px; }
  .svc-unit::after { top: 18px; right: 20px; }
  .svc-panels { margin-top: 56px; }
  .svc-ico { width: 160px; height: 160px; margin-top: 24px; }
}

/* ===== services.html: Dynamika panel — label pills, big headings with a grey accent, mixed card types ===== */
.msym {
  font-family: "Material Symbols Sharp"; font-weight: 400; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; font-feature-settings: "liga";
}
.svc-pill-glass { justify-self: start; align-self: start; width: fit-content; background: rgba(255, 255, 255, .1); color: #fff; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: 8px; padding: 16px 22px; margin-top: 24px; }
.svc-pill-glass:hover { background: rgba(255, 255, 255, .18); }
.dyn-sec { padding: 0 20px; margin-top: 140px; }
.dyn-head { margin-bottom: 56px; }
.dyn-label { display: inline-block; margin-bottom: 28px; padding: 9px 14px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #b8b8b8; font-size: 14px; line-height: 1; }
.dyn-h { margin: 0; max-width: 17em; font-family: Taktikasans, sans-serif; font-weight: 400; font-size: clamp(32px, 3.3vw, 54px); line-height: 1.1; color: #fff; }
.dyn-h em { font-style: normal; color: #8d8d8d; }
.dyn-grid { display: grid; gap: 8px; }
.dyn-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dyn-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dyn-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 380px; padding: 32px; border-radius: 8px; box-sizing: border-box; }
.dyn-card-white { background: #fff; color: #0a0a0a; }
.dyn-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: #0a0a0a; color: #fff; font-size: 26px; flex: 0 0 auto; }
.dyn-card-title { margin: auto 0 12px; font-family: Taktikasans, sans-serif; font-weight: 400; font-size: 28px; line-height: 1.1; }
.dyn-card-text { margin: 0; min-height: 5.9em; color: #6b6b6b; font-size: 16px; line-height: 1.45; }
/* big-number cards */
.dyn-stat { background: rgba(255, 255, 255, .07); color: #fff; justify-content: space-between; }
.dyn-stat-val { font-family: Taktikasans, sans-serif; font-weight: 400; font-size: clamp(48px, 5vw, 80px); line-height: 1; letter-spacing: -.02em; }
.dyn-stat-unit { margin-left: 6px; font-size: .32em; letter-spacing: 0; color: #9a9a9a; white-space: nowrap; }
.dyn-stat-text { margin: 0; max-width: 24ch; color: rgba(255, 255, 255, .7); font-size: 16px; line-height: 1.45; }
/* bento: images, a request list, a highlighted claim */
.dyn-b { position: relative; margin: 0; border-radius: 8px; overflow: hidden; box-sizing: border-box; }
.dyn-b-list { padding: 32px; background: rgba(255, 255, 255, .07); color: #fff; }
.dyn-b-h { margin: 0 0 20px; font-family: Taktikasans, sans-serif; font-weight: 400; font-size: 28px; line-height: 1.1; }
.dyn-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dyn-list li { display: flex; align-items: center; gap: 14px; font-size: 18px; line-height: 1.25; }
.dyn-li-ico { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #fff; color: #0a0a0a; font-size: 22px; flex: 0 0 auto; }
.dyn-b-claim { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; background: #fff; color: #0a0a0a; }
.dyn-claim { margin: auto 0 12px; font-family: Taktikasans, sans-serif; font-size: 28px; line-height: 1.1; }
.dyn-claim-sub { margin: 0; color: #6b6b6b; font-size: 15px; line-height: 1.4; }
/* big feature card: board mock-up + text */
.dyn-feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; padding: 20px; border-radius: 8px; background: #fff; color: #0a0a0a; }
.dyn-feature-vis { display: flex; align-items: center; justify-content: center; min-height: 520px; padding: 32px; border-radius: 8px; background: linear-gradient(145deg, #161616, #3b3b3b 55%, #8c8c8c); }
.dyn-board { width: min(100%, 420px); padding: 24px; border-radius: 8px; background: #fff; color: #0a0a0a; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.dyn-board-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-family: Taktikasans, sans-serif; font-size: 20px; }
.dyn-board-tag { padding: 6px 10px; border-radius: 8px; background: #efefef; color: #6b6b6b; font-family: inherit; font-size: 13px; }
.dyn-board-list { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.dyn-board-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.2; }
.dyn-board-list li span:last-child { background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1px; transition: color .4s ease, background-size .5s ease; }
.dyn-board-list li.is-done span:last-child { color: #8d8d8d; background-size: 100% 1px; }
.dyn-chk { transition: background-color .3s ease, border-color .3s ease; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #c9c9c9; font-size: 16px; flex: 0 0 auto; }
.dyn-chk svg { opacity: 0; transform: scale(.4); transition: opacity .25s ease .1s, transform .3s ease .1s; }
.is-done .dyn-chk { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.is-done .dyn-chk svg { opacity: 1; transform: none; }
.dyn-board-foot { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid #ececec; color: #6b6b6b; font-size: 14px; }
.dyn-board-foot .msym { font-size: 18px; }
.dyn-feature-body { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 12px 12px 0; }
.dyn-feature-h { margin: 28px 0 12px; font-family: Taktikasans, sans-serif; font-weight: 400; font-size: 32px; line-height: 1.1; }
.dyn-feature-p { margin: 0; color: #6b6b6b; font-size: 17px; line-height: 1.5; }
.dyn-feature-list { width: 100%; margin-top: auto; padding-top: 32px; }
.dyn-feature-item { padding: 20px 0; border-top: 1px solid #e3e3e3; }
.dyn-feature-item h4 { margin: 0 0 6px; font-family: Taktikasans, sans-serif; font-weight: 400; font-size: 20px; line-height: 1.2; }
.dyn-feature-item p { margin: 0; color: #6b6b6b; font-size: 15px; line-height: 1.45; }
.dyn-cta { padding-bottom: 120px; display: flex; flex-direction: column; align-items: flex-start; }
.dyn-cta .dyn-h { margin-bottom: 36px; }
@media screen and (max-width: 991px) {
  .dyn-sec { margin-top: 88px; }
  .dyn-head { margin-bottom: 32px; }
  .dyn-grid-3, .dyn-grid-4 { grid-template-columns: 1fr; }
  .dyn-card { min-height: 240px; padding: 24px; }
  .dyn-card-text { min-height: 0; }
  .dyn-feature { grid-template-columns: 1fr; padding: 12px; gap: 20px; }
  .dyn-feature-vis { min-height: 380px; padding: 20px; }
  .dyn-feature-body { padding: 8px; }
}

/* Dynamika "Запити": board lists different task types; request types as rows with hairlines */
.dyn-feature-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.dyn-feature-row h4 { margin: 0; font-size: 18px; }
.dyn-feature-row .dyn-li-ico { background: #0a0a0a; color: #fff; }
.dyn-task-ico { display: inline-flex; color: #8d8d8d; font-size: 18px; }
.dyn-board-list li { gap: 10px; }

/* Dynamika simple */
.dyn-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dyn-step{background:#fff;color:#0a0a0a;border-radius:8px;padding:32px;min-height:360px;display:flex;flex-direction:column}
.dyn-step-n{font-size:96px;line-height:1;color:#b5b5b5;letter-spacing:-.03em;margin-bottom:auto}
.dyn-step .dyn-card-title{margin-top:48px}
.dyn-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.dyn-tag{display:inline-flex;align-items:center;gap:12px;padding:20px 28px;border-radius:8px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);font-size:28px;line-height:1.1}
.dyn-tag .msym{font-size:28px}
@media (max-width:991px){.dyn-steps{grid-template-columns:1fr}.dyn-step{min-height:0;padding:24px}.dyn-step-n{font-size:64px;margin-bottom:32px}.dyn-step .dyn-card-title{margin-top:0}.dyn-tag{font-size:18px;padding:14px 18px}.dyn-tag .msym{font-size:20px}}

/* Dynamika infinite-style */
.dyn-cover{margin:96px 0 0;border-radius:8px;overflow:hidden;aspect-ratio:16/7;background:#161616}
.dyn-cover img{width:100%;height:100%;object-fit:cover;display:block}
.dyn-statement{margin:24px 0 0;max-width:1100px;font-size:56px;line-height:1.05;font-weight:400;letter-spacing:-.02em}
.dyn-statement em{font-style:normal;color:#8c8c8c}
.dyn-rows{margin-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.dyn-row{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.dyn-row-n{color:#8c8c8c;font-size:20px}
.dyn-row-t{margin:0;font-size:40px;line-height:1.05;font-weight:400}
.dyn-row-p{margin:0;font-size:18px;line-height:1.35;color:#bdbdbd}
.dyn-cases{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dyn-case{position:relative;display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none}
.dyn-case img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;margin-bottom:12px;transition:opacity .3s}
a.dyn-case:hover img{opacity:.85}
.dyn-case-name{font-size:28px;line-height:1.1}
.dyn-case-desc{font-size:16px;color:#8c8c8c}
.dyn-case-go{position:absolute;right:0;bottom:0;font-size:24px}
@media (max-width:991px){.dyn-cover{margin-top:56px;aspect-ratio:4/3}.dyn-statement{font-size:28px}.dyn-row{grid-template-columns:1fr;gap:8px;padding:24px 0}.dyn-row-t{font-size:28px}.dyn-cases{grid-template-columns:1fr}}

/* ===== services.html: white theme + Rehtrew-style work rows ===== */
body:has(.svc-hero) { background: #fff; color: #0a0a0a; }
body:has(.svc-hero) .svc-hero h1, body:has(.svc-hero) .svc-hero p, body:has(.svc-hero) .svc-hero-text * { color: #0a0a0a; }
body:has(.svc-hero) .svc-pill { background: #0a0a0a; color: #fff; }
body:has(.svc-hero) .svc-pill:hover { background: #333; }
body:has(.svc-hero) .svc-unit { background: #f1f1f1; color: #0a0a0a; backdrop-filter: none; -webkit-backdrop-filter: none; }
body:has(.svc-hero) .svc-unit:hover { background: #e8e8e8; }
body:has(.svc-hero) .svc-unit.is-active { background: #0a0a0a; color: #fff; }
body:has(.svc-hero) .svc-unit-sub { color: #777; }
body:has(.svc-hero) .svc-unit.is-active .svc-unit-sub { color: rgba(255, 255, 255, .6); }
body:has(.svc-hero) .svc-unit::after { color: #999; }
body:has(.svc-hero) .svc-unit:hover::after { color: #0a0a0a; }
body:has(.svc-hero) .svc-unit.is-active::after { color: #fff; }
body:has(.svc-hero) .svc-panels { margin-top: 72px; color: #0a0a0a; }

.wk-intro { padding: 0 0 56px; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.wk-label { display: block; margin-bottom: 20px; color: #8a8a8a; font-size: 14px; }
.wk-h { margin: 0; max-width: 18em; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; font-weight: 400; letter-spacing: -.02em; }
.wk-h em { font-style: normal; color: #9a9a9a; }
.wk-sub { margin: 28px 0 0; max-width: 34em; color: #777; font-size: 16px; line-height: 1.4; }
.wk-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 80px; align-items: stretch; padding: 40px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.wk-text { display: flex; flex-direction: column; justify-content: flex-end; max-width: 440px; }
.wk-n { color: #9a9a9a; font-size: 14px; margin-bottom: 14px; }
.wk-t { margin: 0; font-size: clamp(30px, 3vw, 44px); line-height: 1.05; font-weight: 400; letter-spacing: -.01em; }
.wk-tag { margin: 8px 0 0; color: #8a8a8a; font-size: 14px; }
.wk-p { margin: 28px 0 0; font-size: 15px; line-height: 1.4; color: #0a0a0a; max-width: 28em; }
.wk-meta { margin: 28px 0 0; display: grid; gap: 14px; }
.wk-meta dt { color: #9a9a9a; font-size: 13px; }
.wk-meta dd { margin: 2px 0 0; font-size: 14px; line-height: 1.35; }
.wk-link { margin-top: 28px; align-self: flex-start; color: #0a0a0a; font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .25); padding-bottom: 2px; }
.wk-link:hover { border-bottom-color: #0a0a0a; }
.wk-vis { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wk-main { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 3/2; background: #eee; }
.wk-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.wk-main:hover img { transform: scale(1.03); }
.wk-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wk-thumbs:has(> :nth-child(1):nth-last-child(1)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk-thumbs:has(> :nth-child(3):nth-last-child(1)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wk-thumb { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; background: #eee; }
.wk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.wk-thumb:hover img { transform: scale(1.06); }
.wk-card { background: #f1f1f1; border-radius: 8px; min-height: 420px; padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; }
.wk-card-center { align-items: center; justify-content: center; }
.wk-list-i { display: flex; gap: 24px; padding: 20px 0; border-top: 1px solid rgba(0, 0, 0, .12); font-size: 24px; line-height: 1.15; }
.wk-list-i:first-child { border-top: 0; }
.wk-list-i span { color: #9a9a9a; font-size: 14px; padding-top: 6px; }
.wk-list-i b { font-weight: 400; }
.wk-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wk-tile { background: #f1f1f1; border-radius: 8px; min-height: 200px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.wk-tile-v { font-size: clamp(48px, 5vw, 80px); line-height: 1; letter-spacing: -.03em; }
.wk-tile-v small { font-size: 18px; letter-spacing: 0; color: #777; }
.wk-tile p { margin: 0; font-size: 14px; color: #555; }
.wk-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wk-spec { display: flex; flex-direction: column; min-height: 240px; padding: 24px; border-radius: 8px; background: #f1f1f1; color: #0a0a0a; text-decoration: none; transition: background-color .25s; }
.wk-spec:hover { background: #e6e6e6; }
.wk-spec-aa { font-family: Taktikasans, sans-serif; font-size: 96px; line-height: 1; margin-bottom: auto; }
.wk-spec-n { font-size: 20px; }
.wk-spec-s { margin-top: 4px; font-size: 13px; color: #8a8a8a; }
.wk-end { padding: 120px 0 40px; }
.wk-end .wk-h { margin-bottom: 36px; }
body:has(.svc-hero) .dyn-board { box-shadow: 0 8px 30px rgba(0, 0, 0, .08); }
@media (max-width: 991px) {
  .wk-row { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
  .wk-text { max-width: none; }
  .wk-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-card { min-height: 300px; padding: 20px; }
  .wk-specs { grid-template-columns: 1fr 1fr; }
  .wk-end { padding-top: 72px; }
  .wk-tile { min-height: 150px; padding: 16px; }
}
.svc-panels{padding:0 20px}@media (max-width:991px){.svc-panels{padding:0 16px}}
body:has(.svc-hero) section.contact { background-color: #0a0a0a; color: #fff; }
body:has(.svc-hero) section.contact { margin-top: 40px; }
.wk-acc { margin-top: 28px; }
.wk-acc-h { color: #9a9a9a; font-size: 13px; margin-bottom: 6px; }
.wk-d { border-top: 1px solid rgba(0, 0, 0, .12); }
.wk-d:last-child { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.wk-d summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; font-size: 15px; line-height: 1.3; }
.wk-d summary::-webkit-details-marker { display: none; }
.wk-d summary i { position: relative; flex: none; width: 14px; height: 14px; }
.wk-d summary i::before, .wk-d summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: #0a0a0a; transition: transform .25s ease; }
.wk-d summary i::after { transform: rotate(90deg); }
.wk-d[open] summary i::after { transform: rotate(0); }
.wk-d summary:hover { opacity: .65; }
.wk-d p { margin: 0 0 16px; max-width: 30em; color: #666; font-size: 14px; line-height: 1.45; }

/* Solutions-style rows */
.sv-row { padding: 28px 0 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.sv-hd { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); column-gap: 40px; align-items: start; cursor: pointer; padding-bottom: 28px; }
.sv-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); column-gap: 40px; padding: 12px 0 72px; }
.sv-row.is-closed .sv-body { display: none; }
.sv-x { grid-column: 3; justify-self: end; position: relative; width: 28px; height: 28px; margin-top: 18px; transition: transform .3s ease; transform: rotate(45deg); }
.sv-x::before, .sv-x::after { content: ""; position: absolute; left: 0; top: 13px; width: 28px; height: 1.5px; background: #0a0a0a; }
.sv-x::after { transform: rotate(90deg); }
.sv-row.is-closed .sv-x { transform: rotate(0); }
.sv-hd:hover .sv-t { opacity: .6; }
.sv-n, .sv-t { margin: 0; font-size: clamp(34px, 4.4vw, 64px); line-height: 1; font-weight: 400; letter-spacing: -.02em; }
.sv-t { grid-column: 2; }
.sv-d { grid-column: 2; }
.sv-s { grid-column: 3; }
.sv-l { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(0, 0, 0, .12); font-size: 14px; color: #9a9a9a; }
.sv-d p { margin: 0; font-size: 16px; line-height: 1.4; max-width: 30em; }
.sv-d .wk-link { display: inline-block; margin-top: 28px; }
.sv-li { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); font-size: 15px; line-height: 1.3; }
.sv-li b { width: 5px; height: 5px; border-radius: 50%; background: #0a0a0a; }
.sv-s .wk-d { border-top: 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.sv-s .wk-d:last-child { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.sv-cases { margin-top: 28px; display: flex; gap: 16px; align-items: center; }
.sv-cases-l { color: #9a9a9a; font-size: 13px; }
.sv-cases-r { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-case { display: block; width: 64px; height: 48px; border-radius: 6px; overflow: hidden; background: #eee; transition: transform .25s ease; }
.sv-case:hover { transform: translateY(-3px); }
.sv-case img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991px) {
  .sv-row { padding-top: 20px; }
  .sv-hd { grid-template-columns: 1fr auto; row-gap: 4px; padding-bottom: 20px; }
  .sv-n { grid-column: 1 / 3; }
  .sv-t { grid-column: 1; margin-top: 0; }
  .sv-x { grid-column: 2; grid-row: 2; margin-top: 4px; width: 22px; height: 22px; }
  .sv-x::before, .sv-x::after { width: 22px; top: 10px; }
  .sv-body { grid-template-columns: 1fr; row-gap: 28px; padding-bottom: 40px; }
  .sv-d, .sv-s { grid-column: 1; }
  .sv-n { color: #9a9a9a; font-size: 18px; }
  .sv-t { font-size: 32px; }
  .sv-cases { flex-wrap: wrap; }
}

/* three columns: card + its rows underneath */
.svc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.svc-col { min-width: 0; }
.svc-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 360px; padding: 28px; border-radius: 8px; background: #f1f1f1; color: #0a0a0a; }
.svc-col-sub { margin: 20px 0 0; padding: 0 4px; color: #777; font-size: 15px; line-height: 1.4; }
.svc-col-rows { margin-top: 24px; }
.svc-col .sv-row { padding-top: 20px; }
.svc-col .sv-hd { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; }
.svc-col .sv-n { font-size: 14px; color: #9a9a9a; }
.svc-col .sv-t { font-size: 30px; flex: 1; }
.svc-col .sv-x { margin: 0; width: 18px; height: 18px; align-self: center; }
.svc-col .sv-x::before, .svc-col .sv-x::after { width: 18px; top: 8px; }
.svc-col .sv-body { display: block; padding: 4px 0 28px; }
.svc-col .sv-d { margin-bottom: 24px; }
.svc-col .sv-d p { font-size: 15px; }
.svc-col .sv-s .sv-l, .svc-col .sv-d .sv-l { display: none; }
.svc-col .sv-d p + .wk-link { margin-top: 16px; }
@media (max-width: 991px) { .svc-cols { grid-template-columns: 1fr; gap: 40px; } .svc-card { min-height: 220px; padding: 20px; } }
/* Dynamika cards variant: calmer, smaller visuals */
.svc-panel[data-unit="dynamika"] .wk-main { aspect-ratio: 2/1; }
.svc-panel[data-unit="dynamika"] .wk-tile { min-height: 170px; }
.svc-panel[data-unit="dynamika"] .wk-card { min-height: 340px; }
.svc-panel[data-unit="dynamika"] .wk-row { padding: 32px 0; }

/* side drawers (team card, vacancy card), desktop/tablet: full viewport height,
   flush with the top and bottom edges, no site strip above or below */
@media screen and (min-width: 768px) {
  .vac-drawer, .vac-drawer.team-drawer { top: 0; bottom: 0; right: 0; height: 100vh; height: 100dvh; border-radius: 8px 0 0 8px; transform: translateX(calc(100% + 20px)); }
  .vac-drawer.is-open, .vac-drawer.team-drawer.is-open { transform: none; }
  .vac-drawer .vac-card { min-height: 100%; border-radius: 0; }
}

/* Taktika: vacancy-style list + side drawer */
.sl-list { display: flex; flex-direction: column; }
.sl-label { color: #9a9a9a; font-size: 15px; margin: 40px 0 20px; }
.sl-row { position: relative; display: grid; grid-template-columns: 1fr 1fr 100px; align-items: center; column-gap: 24px; padding: 26px 0; border-top: 1px solid rgba(0, 0, 0, .14); color: #0a0a0a; text-decoration: none; }
.sl-row:last-child { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.sl-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #0a0a0a; transform: scaleX(0); transform-origin: left center; transition: transform .75s cubic-bezier(.65, 0, .35, 1); }
.sl-row:hover::after { transform: scaleX(1); }
.sl-t { font-family: Taktikasans, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.1; }
.sl-m { font-size: 16px; line-height: 1.35; }
.sl-cta { position: relative; display: block; overflow: hidden; line-height: 1.5; text-align: right; font-size: 14px; color: #9a9a9a; }
.sl-cta-in { display: block; transition: transform .58s cubic-bezier(.65, 0, .35, 1); }
.sl-cta::after { content: attr(data-text); position: absolute; left: 0; right: 0; top: 100%; color: #0a0a0a; transition: transform .58s cubic-bezier(.65, 0, .35, 1); }
.sl-row:hover .sl-cta-in, .sl-row:hover .sl-cta::after { transform: translateY(-100%); }
.sl-row.is-active .sl-t { color: #9a9a9a; }
.sd-body { padding: 8px 0 20px; }
.sd-l { color: #8a8a8a; font-size: 13px; margin: 20px 0 8px; }
.sd-item { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.sd-item h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: #fff; line-height: 1.2; }
.sd-item p { margin: 0; color: #b5b5b5; font-size: 15px; line-height: 1.45; }
.sd-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 16px 24px; border-radius: 999px; background: #fff; color: #0a0a0a; font-size: 16px; text-decoration: none; }
.sd-btn:hover { background: #e4e4e4; }
@media (max-width: 767px) {
  .sl-row { grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; padding: 22px 0; }
  .sl-t { grid-column: 1; font-size: 22px; }
  .sl-m { grid-column: 1; grid-row: 2; font-size: 14px; color: #777; }
  .sl-cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Taktika: service cards (click opens the side drawer) */
.sc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.sc-card { grid-column: span 2; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; padding: 24px; border-radius: 8px; background: #f1f1f1; color: #0a0a0a; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.sc-card:nth-child(n+4) { grid-column: span 3; }
.sc-card:hover { background: #0a0a0a; color: #fff; }
.sc-n { font-size: 14px; color: #9a9a9a; }
.sc-plus { position: absolute; top: 22px; right: 24px; width: 18px; height: 18px; transition: transform .35s ease; }
.sc-plus::before, .sc-plus::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 1.5px; background: currentColor; }
.sc-plus::after { transform: rotate(90deg); }
.sc-card:hover .sc-plus { transform: rotate(90deg); }
.sc-t { margin: 0; font-family: Taktikasans, sans-serif; font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; line-height: 1.05; }
.sc-d { margin: 12px 0 0; max-width: 30em; color: #777; font-size: 15px; line-height: 1.4; transition: color .3s ease; }
.sc-card:hover .sc-d { color: rgba(255, 255, 255, .65); }
.sc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.sc-tag { padding: 6px 12px; border-radius: 999px; background: #fff; color: #0a0a0a; font-size: 13px; line-height: 1.2; transition: background-color .3s ease, color .3s ease; }
.sc-card:hover .sc-tag { background: rgba(255, 255, 255, .12); color: #fff; }
.sc-card.is-active { background: #0a0a0a; color: #fff; }
@media (max-width: 991px) { .sc-grid { grid-template-columns: 1fr; } .sc-card, .sc-card:nth-child(n+4) { grid-column: 1; min-height: 260px; } }

/* ===== SURE-style: sub-tabs + expandable cards ===== */
.sx-label { color: #0a0a0a; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-align: center; margin: 8px 0 56px; }
.sx-tabs { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 56px; }
.sx-tab { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit; color: #b0b0b0; text-align: left; flex: 0 1 auto; transition: color .3s ease; }
.sx-tab:hover { color: #6a6a6a; }
.sx-tab.is-active { color: #0a0a0a; }
.sx-tab-t { display: block; font-family: Taktikasans, sans-serif; font-size: clamp(26px, 3vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }
.sx-tab-d { display: none; margin-top: 16px; max-width: 26em; color: #666; font-size: 15px; line-height: 1.45; }
.sx-tab.is-active .sx-tab-d { display: block; }
.sx-tab:last-child { text-align: right; }
.sx-tab:last-child .sx-tab-d { margin-left: auto; }
.sx-tab:not(:first-child):not(:last-child) { text-align: center; }
.sx-tab:not(:first-child):not(:last-child) .sx-tab-d { margin-left: auto; margin-right: auto; }
.sx-pane { display: none; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.sx-pane.is-active { display: grid; }
.sx-pane.is-active.sx-anim { animation: svc-in .4s ease both; }
.sx-card { appearance: none; -webkit-appearance: none; border: 0; font-family: inherit; text-align: left; color: #0a0a0a; position: relative; grid-column: span 4; min-height: 380px; padding: 22px 24px 24px; border-radius: 8px; background: #f1f1f1; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; transition: background-color .3s ease; }
.sx-card.sx-static { cursor: default; }
.sx-card:hover:not(.sx-static) { background: #e8e8e8; }
.sx-n1 .sx-card { grid-column: span 12; }
.sx-n2 .sx-card { grid-column: span 6; }
.sx-n3 .sx-card { grid-column: span 4; }
.sx-n4 .sx-card { grid-column: span 3; }
.sx-n5 .sx-card { grid-column: span 4; }
.sx-n5 .sx-card:nth-child(n+4) { grid-column: span 6; }
.sx-ct { font-size: 17px; line-height: 1.2; padding-right: 40px; }
.sx-plus { position: absolute; top: 24px; right: 24px; width: 16px; height: 16px; transition: transform .35s ease; }
.sx-plus::before, .sx-plus::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 1.5px; background: #0a0a0a; }
.sx-plus::after { transform: rotate(90deg); }
.sx-card.is-open .sx-plus { transform: rotate(45deg); }
.sx-vis { flex: 1; display: flex; align-items: center; justify-content: center; color: #bdbdbd; transition: opacity .3s ease; }
.sx-vis .msym { font-size: 96px; font-weight: 200; }
.sx-aa { font-family: Taktikasans, sans-serif; font-size: 120px; line-height: 1; color: #0a0a0a; }
.sx-cd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; color: #555; font-size: 15px; line-height: 1.45; }
.sx-cd > span { overflow: hidden; }
.sx-card.is-open .sx-cd { grid-template-rows: 1fr; }
.sx-card.is-open .sx-vis { opacity: .35; }
@media (max-width: 991px) {
  .sx-tabs { flex-wrap: wrap; gap: 8px 20px; margin-bottom: 28px; }
  .sx-tab, .sx-tab:last-child, .sx-tab:not(:first-child):not(:last-child) { text-align: left; }
  .sx-tab-t { font-size: 22px; }
  .sx-tab-d { display: none !important; }
  .sx-pane.is-active { grid-template-columns: 1fr; }
  .sx-pane .sx-card, .sx-n5 .sx-card:nth-child(n+4) { grid-column: 1; min-height: 240px; }
  .sx-label { margin-bottom: 28px; }
}

/* trimmed services page */
.svc-proof { display: flex; align-items: baseline; gap: 24px; margin-top: 32px; }
.svc-proof-l { flex: none; color: #9a9a9a; font-size: 13px; }
.svc-proof-r { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.svc-proof-r a { font-family: Taktikasans, sans-serif; font-size: 20px; color: #9a9a9a; text-decoration: none; transition: color .2s ease; }
.svc-proof-r a:hover { color: #0a0a0a; }
.svc-proof-r .svc-proof-all { font-size: 14px; color: #0a0a0a; border-bottom: 1px solid rgba(0, 0, 0, .25); align-self: center; }
body:has(.svc-hero) .svc-hero-top { margin-bottom: 56px; }
body:has(.svc-hero) .svc-unit { min-height: 240px; padding: 24px; }
body:has(.svc-hero) .svc-unit-ico { width: 56px; height: 56px; }
body:has(.svc-hero) .svc-unit::after { top: 22px; right: 24px; }
body:has(.svc-hero) .svc-panels { margin-top: 56px; }
.sd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-tag { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 14px; line-height: 1.2; }
.sd-note { margin: 20px 0 0; color: #b5b5b5; font-size: 15px; line-height: 1.45; }
@media (max-width: 991px) { .svc-proof { flex-direction: column; gap: 10px; } body:has(.svc-hero) .svc-unit { min-height: 150px; } }

/* Dynamika: layout tweaks + animated numbers / board */
.svc-panel[data-unit="dynamika"] .wk-row { grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); }
.svc-panel[data-unit="dynamika"] .wk-text { justify-content: center; }
.svc-panel[data-unit="dynamika"] .wk-tile { min-height: 250px; padding: 28px; }
.svc-panel[data-unit="dynamika"] .wk-card { min-height: 508px; }
.wk-tile-v { display: flex; align-items: flex-end; gap: 6px; }
.wk-tile-v small { padding-bottom: .55em; font-size: 18px; }
.wk-odo { display: inline-block; height: 1em; overflow: hidden; }
.wk-odo-s { display: flex; flex-direction: column; transition: transform 1.2s cubic-bezier(.16, .84, .24, 1); }
.wk-odo-s i { display: block; height: 1em; font-style: normal; line-height: 1; }
.wk-odo.no-anim .wk-odo-s { transition: none; }
@media (max-width: 991px) { .svc-panel[data-unit="dynamika"] .wk-row { grid-template-columns: 1fr; } .svc-panel[data-unit="dynamika"] .wk-tile { min-height: 170px; padding: 20px; } .svc-panel[data-unit="dynamika"] .wk-card { min-height: 340px; } }
/* Dynamika bento: bigger, bolder numbers + fuller captions */
.svc-panel[data-unit="dynamika"] .wk-tile { min-height: 290px; }
.svc-panel[data-unit="dynamika"] .wk-tile-v { font-family: Taktikasans, sans-serif; font-weight: 500; font-size: clamp(72px, 8vw, 128px); letter-spacing: -.04em; }
.svc-panel[data-unit="dynamika"] .wk-tile-v small { font-size: 20px; font-weight: 400; letter-spacing: 0; padding-bottom: .3em; }
.svc-panel[data-unit="dynamika"] .wk-tile p { font-size: 15px; line-height: 1.4; color: #666; max-width: 24em; }
.svc-panel[data-unit="dynamika"] .wk-tile p b { display: block; margin-bottom: 6px; color: #0a0a0a; font-size: 17px; font-weight: 500; }
.svc-panel[data-unit="dynamika"] .wk-tile p span { display: block; }
.svc-panel[data-unit="dynamika"] .wk-card { min-height: 588px; }
@media (max-width: 991px) { .svc-panel[data-unit="dynamika"] .wk-tile { min-height: 210px; } .svc-panel[data-unit="dynamika"] .wk-tile-v { font-size: 72px; } }

/* "З чим ми можемо допомогти": tilted pills */
.wk-card.wk-help { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12px 10px; padding: 32px 24px; }
.wk-pill { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px 16px 16px; border-radius: 8px; background: #0a0a0a; color: #fff; font-family: Taktikasans, sans-serif; font-size: clamp(18px, 1.7vw, 26px); font-weight: 500; line-height: 1.1; max-width: 100%; transition: transform .35s ease; }
.wk-pill i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #0a0a0a; }
.wk-pill i .msym { font-size: 20px; }
.wk-pill:nth-child(1) { transform: rotate(-2deg); }
.wk-pill:nth-child(2) { transform: rotate(1.5deg); }
.wk-pill:nth-child(3) { transform: rotate(-1deg); }
.wk-pill:nth-child(4) { transform: rotate(2deg); }
.wk-pill:nth-child(5) { transform: rotate(-3deg); }
.wk-help:not(.is-in) .wk-pill { opacity: 0; transform: translateY(26px) scale(.9); }
.wk-help.is-in .wk-pill { animation: wk-pop .7s cubic-bezier(.2, .9, .3, 1.2) both, wk-bob 4.5s ease-in-out infinite; }
.wk-help.is-in .wk-pill:nth-child(1) { animation-delay: .05s, .8s; }
.wk-help.is-in .wk-pill:nth-child(2) { animation-delay: .17s, 1.4s; }
.wk-help.is-in .wk-pill:nth-child(3) { animation-delay: .29s, 2s; }
.wk-help.is-in .wk-pill:nth-child(4) { animation-delay: .41s, 1.1s; }
.wk-help.is-in .wk-pill:nth-child(5) { animation-delay: .53s, 1.7s; }
.wk-help .wk-pill:hover { transform: rotate(0) scale(1.03); animation-play-state: paused; }
@keyframes wk-pop { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; } }
@keyframes wk-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .wk-help:not(.is-in) .wk-pill { opacity: 1; transform: none; } .wk-help.is-in .wk-pill { animation: none; } }
@media (max-width: 991px) { .wk-pill { font-size: 17px; padding: 12px 16px 12px 12px; } .wk-pill i { width: 28px; height: 28px; } }
.svc-panel[data-unit="dynamika"] .wk-pill { font-size: clamp(15px, 1.3vw, 21px); padding: 12px 18px 12px 12px; gap: 10px; }
.svc-panel[data-unit="dynamika"] .wk-pill i { width: 28px; height: 28px; }
.svc-panel[data-unit="dynamika"] .wk-pill i .msym { font-size: 17px; }
.svc-panel[data-unit="dynamika"] .wk-card.wk-help { gap: 14px 10px; }
.svc-panel[data-unit="dynamika"] .dyn-board { width: min(100%, 500px); padding: 28px; } .svc-panel[data-unit="dynamika"] .dyn-board-list { gap: 16px; } .svc-panel[data-unit="dynamika"] .dyn-board-list li { font-size: 16px; }

/* Dynamika intro block: "Тактичний супровід" + rat slot (img now, video later) */
.dyn-hero2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; min-height: 560px; margin-bottom: 8px; border-radius: 8px; background: #000; color: #fff; overflow: hidden; }
.dyn-hero2-l { padding: 40px; display: flex; flex-direction: column; justify-content: flex-start; }
.dyn-hero2-ico { display: flex; gap: 6px; margin-bottom: 36px; }
.dyn-hero2-ico i { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #000; }
.dyn-hero2-ico .msym { font-size: 28px; }
.dyn-hero2-h { margin: 0; font-family: Taktikasans, sans-serif; font-size: clamp(44px, 6vw, 92px); font-weight: 500; line-height: .98; letter-spacing: -.03em; }
.dyn-hero2-p { margin: 28px 0 0; max-width: 31em; color: #e6e6e6; font-size: 16px; line-height: 1.35; }
.dyn-hero2-vis { position: relative; display: flex; align-items: center; justify-content: center; padding: 32px; }
.dyn-hero2-vis img, .dyn-hero2-vis video { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 991px) { .dyn-hero2 { grid-template-columns: 1fr; min-height: 0; } .dyn-hero2-l { padding: 24px; } .dyn-hero2-ico { margin-bottom: 24px; } .dyn-hero2-vis { padding: 0 24px 24px; height: 280px; } }
.dyn-hero2-vis { padding: 16px; }
.dyn-hero2-panel { width: 100%; height: 100%; min-height: 360px; border-radius: 8px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.dyn-hero2-panel video { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 991px) { .dyn-hero2-vis { padding: 0 16px 16px; height: auto; } .dyn-hero2-panel { min-height: 0; aspect-ratio: 1000 / 828; } }
/* Dynamika intro on white */
.dyn-hero2 { background: #fff; color: #0a0a0a; border-radius: 0; min-height: 0; margin-bottom: 40px; }
.dyn-hero2-l { padding: 8px 0 0; }
.dyn-hero2-ico i { background: #0a0a0a; color: #fff; }
.dyn-hero2-p { color: #555; }
.dyn-hero2-vis { padding: 0; }
.dyn-hero2-panel { min-height: 0; aspect-ratio: 1000 / 828; border-radius: 0; background: #fff; }
@media (max-width: 991px) { .dyn-hero2-l { padding: 0; } .dyn-hero2-vis { padding: 0; } }

/* services: the intro (title + three cards) fills exactly one screen */
body:has(.svc-hero) .svc-hero { min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; padding: 96px 20px 20px; }
body:has(.svc-hero) .svc-hero-top { margin-bottom: 40px; flex: none; }
body:has(.svc-hero) .svc-units { flex: 1 1 auto; min-height: 0; }
body:has(.svc-hero) .svc-unit { min-height: 240px; }
body:has(.svc-hero) .svc-panels { margin-top: 0; padding-top: 56px; }
@media (max-width: 991px) {
  body:has(.svc-hero) .svc-hero { padding: 84px 16px 16px; }
  body:has(.svc-hero) .svc-hero-top { margin-bottom: 24px; gap: 12px; }
  body:has(.svc-hero) .svc-unit { min-height: 120px; }
  body:has(.svc-hero) .svc-units { grid-auto-rows: 1fr; }
}
.dyn-hero2-ico i img { display: block; width: 28px; height: 28px; object-fit: contain; }

/* services intro: one screen = title + shorter cards + the start of the chosen direction */
body:has(.svc-hero) .svc-hero { min-height: 0; display: block; padding: 96px 20px 0; }
body:has(.svc-hero) .svc-hero-top { margin-bottom: 32px; }
body:has(.svc-hero) .svc-unit { min-height: 300px; }
body:has(.svc-hero) .svc-panels { padding-top: 40px; }
@media (max-width: 991px) {
  body:has(.svc-hero) .svc-hero { padding: 84px 16px 0; }
  body:has(.svc-hero) .svc-unit { min-height: 130px; }
}
.dyn-hero2 { align-items: center; }
.dyn-hero2-l { justify-content: center; padding: 0; }

/* services: title on top, cards pinned to the bottom of the first screen */
body:has(.svc-hero) .svc-hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding-bottom: 20px; }
body:has(.svc-hero) .svc-hero-top { margin-bottom: 40px; }
body:has(.svc-hero) .svc-units { margin-top: auto; flex: none; }
body:has(.svc-hero) .svc-unit { min-height: 300px; }
body:has(.svc-hero) .svc-panels { padding-top: 56px; }
@media (max-width: 991px) { body:has(.svc-hero) .svc-unit { min-height: 130px; } }

/* "Тактичний супровід" intro: 80% of the screen height */
@media (min-width: 992px) {
  .dyn-hero2 { height: 80vh; height: 80svh; min-height: 480px; }
  .dyn-hero2-vis { height: 100%; }
  .dyn-hero2-panel { height: 100%; aspect-ratio: auto; }
}

/* Dynamika "Як це працює": black block, three white cards */
.dyn-how { margin-bottom: 8px; padding: 40px; border-radius: 8px; background: #000; color: #fff; }
.dyn-how-head { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.dyn-how-ico { display: flex; gap: 4px; flex: none; }
.dyn-how-ico i { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #000; }
.dyn-how-ico .msym, .dyn-how-i .msym { font-size: 28px; font-weight: 600; }
.dyn-how-h { margin: 0; font-family: Taktikasans, sans-serif; font-size: clamp(36px, 4.6vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.dyn-how-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dyn-how-card { display: flex; flex-direction: column; min-height: 440px; padding: 28px; border-radius: 8px; background: #fff; color: #0a0a0a; }
.dyn-how-i { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #0a0a0a; color: #fff; }
.dyn-how-card h3 { margin: auto 0 0; font-family: Taktikasans, sans-serif; font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; line-height: 1.02; letter-spacing: -.02em; }
.dyn-how-card p { margin: 16px 0 0; font-size: 16px; line-height: 1.3; }
@media (max-width: 991px) { .dyn-how { padding: 20px; } .dyn-how-cards { grid-template-columns: 1fr; } .dyn-how-card { min-height: 260px; padding: 20px; } .dyn-how-head { gap: 12px; margin-bottom: 24px; } .dyn-how-ico i { width: 40px; height: 40px; } }
.dyn-how-i .msym { font-size: 40px; } .dyn-how-ico .msym { font-size: 30px; }
/* "Як це працює": white background, black cards */
.dyn-how { background: #fff; color: #0a0a0a; padding: 0; border-radius: 0; margin: 8px 0 40px; }
.dyn-how-ico i { background: #0a0a0a; color: #fff; }
.dyn-how-card { background: #0a0a0a; color: #fff; }
.dyn-how-i { background: #fff; color: #0a0a0a; }
.dyn-how-card p { color: #d8d8d8; }
@media (max-width: 991px) { .dyn-how { padding: 0; } }

/* ===== side cards (team + vacancies): white, all screen sizes ===== */
.vac-drawer .vac-card, .vac-drawer .vac-head, .vac-drawer .vac-head.team-head { background: #fff !important; color: #0a0a0a; }
.vac-drawer .vac-card :where(h1, h2, h3, h4, p, li, span, div, a, label) { color: #0a0a0a; }
.vac-drawer .vac-head-sub, .vac-drawer .vac-form-title, .vac-drawer .team-role { color: #8a8a8a; }
.vac-drawer .list-item-2, .vac-drawer .team-bio { color: #2a2a2a; }
.vac-drawer .checkbox-label-3 { color: #666; }
.vac-drawer .text-block-244 { color: #8a8a8a; }
.vac-drawer .text-field-cf2-4, .vac-drawer .text-field-cf2 { background: #f1f1f1; color: #0a0a0a; }
.vac-drawer .text-field-cf2-4::placeholder, .vac-drawer .text-field-cf2::placeholder { color: #8a8a8a; }
.vac-drawer .submit-button-2 { background: #0a0a0a; color: #fff; }
.vac-drawer .submit-button-2:hover { background: #333; }
.vac-drawer .vac-close, .vac-drawer .vac-head .vac-close { background: rgba(20, 20, 20, .08); color: #0a0a0a; }
.vac-drawer .vac-close:hover { background: rgba(20, 20, 20, .16); }
.vac-drawer .team-link, .vac-drawer .team-name { color: #0a0a0a; }
@media screen and (max-width: 767px) {
  .vac-drawer .vac-close, .vac-drawer .vac-head .vac-close, .vac-drawer .team-head .vac-close, .vac-drawer .vac-head.team-head .vac-close { background: rgba(20, 20, 20, .12) !important; color: #0a0a0a; }
  .vac-drawer .vac-close:hover { background: rgba(20, 20, 20, .2) !important; }
}

/* ===== services page: dark theme (black background) ===== */
body:has(.svc-hero) { background: #000; color: #fff; }
body:has(.svc-hero) .svc-hero h1, body:has(.svc-hero) .svc-hero p, body:has(.svc-hero) .svc-hero-text * { color: #fff; }
body:has(.svc-hero) .svc-pill { background: #fff; color: #0a0a0a; }
body:has(.svc-hero) .svc-pill:hover { background: #e2e2e2; }
body:has(.svc-hero) .svc-unit { background: rgba(255, 255, 255, .1); color: #fff; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
body:has(.svc-hero) .svc-unit:hover { background: rgba(255, 255, 255, .16); }
body:has(.svc-hero) .svc-unit.is-active { background: #fff; color: #0a0a0a; }
body:has(.svc-hero) .svc-unit-sub { color: rgba(255, 255, 255, .6); }
body:has(.svc-hero) .svc-unit.is-active .svc-unit-sub { color: #666; }
body:has(.svc-hero) .svc-unit::after { color: rgba(255, 255, 255, .6); }
body:has(.svc-hero) .svc-unit:hover::after { color: #fff; }
body:has(.svc-hero) .svc-unit.is-active::after { color: #0a0a0a; }
body:has(.svc-hero) .svc-panels { color: #fff; }
/* Taktika list */
body:has(.svc-hero) .sl-row { color: #fff; border-top-color: rgba(255, 255, 255, .16); }
body:has(.svc-hero) .sl-row:last-child { border-bottom-color: rgba(255, 255, 255, .16); }
body:has(.svc-hero) .sl-row::after { background: #fff; }
body:has(.svc-hero) .sl-label, body:has(.svc-hero) .sl-cta, body:has(.svc-hero) .sl-row.is-active .sl-t { color: #8a8a8a; }
body:has(.svc-hero) .sl-cta::after { color: #fff; }
/* Dynamika / Typetika rows */
body:has(.svc-hero) .wk-row { border-bottom-color: rgba(255, 255, 255, .16); }
body:has(.svc-hero) .wk-t, body:has(.svc-hero) .wk-p, body:has(.svc-hero) .wk-meta dd { color: #fff; }
body:has(.svc-hero) .wk-n, body:has(.svc-hero) .wk-tag, body:has(.svc-hero) .wk-meta dt { color: #8a8a8a; }
body:has(.svc-hero) .wk-link { color: #fff; border-bottom-color: rgba(255, 255, 255, .35); }
body:has(.svc-hero) .wk-link:hover { border-bottom-color: #fff; }
body:has(.svc-hero) .wk-card, body:has(.svc-hero) .wk-tile, body:has(.svc-hero) .wk-spec { background: #161616; color: #fff; }
body:has(.svc-hero) .wk-spec:hover { background: #232323; }
body:has(.svc-hero) .wk-spec-aa, body:has(.svc-hero) .wk-spec-n { color: #fff; }
body:has(.svc-hero) .wk-spec-s, body:has(.svc-hero) .wk-tile-v small { color: #8a8a8a; }
body:has(.svc-hero) .svc-panel[data-unit="dynamika"] .wk-tile p { color: #b5b5b5; }
body:has(.svc-hero) .svc-panel[data-unit="dynamika"] .wk-tile p b { color: #fff; }
body:has(.svc-hero) .dyn-board { box-shadow: none; }
/* Dynamika intro + "how it works" */
body:has(.svc-hero) .dyn-hero2 { background: #000; color: #fff; }
body:has(.svc-hero) .dyn-hero2-ico i { background: #fff; }
body:has(.svc-hero) .dyn-hero2-ico i img { filter: invert(1); }
body:has(.svc-hero) .dyn-hero2-p { color: #bdbdbd; }
body:has(.svc-hero) .dyn-hero2-panel { border-radius: 8px; }
body:has(.svc-hero) .dyn-how { background: transparent; color: #fff; }
body:has(.svc-hero) .dyn-how-ico i { background: #fff; color: #000; }
body:has(.svc-hero) .dyn-how-card { background: #fff; color: #0a0a0a; }
body:has(.svc-hero) .dyn-how-i { background: #0a0a0a; color: #fff; }
body:has(.svc-hero) .dyn-how-card p { color: #444; }
/* "Як це працює" as a Формат-style row: three icon tiles */
.wk-bento-3 .wk-tile:nth-child(3) { grid-column: 1 / -1; }
.wk-tile-i { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #0a0a0a; }
.wk-tile-i .msym { font-size: 34px; font-weight: 600; }
body:has(.svc-hero) .wk-tile-i { background: #fff; color: #0a0a0a; }
.svc-panel[data-unit="dynamika"] .wk-bento-3 .wk-tile { min-height: 250px; }
body:has(.svc-hero) .dyn-hero2-panel { background: #000; border-radius: 0; }

/* hero cards: taller + short description */
body:has(.svc-hero) .svc-unit { min-height: 400px; }
.svc-unit-desc { display: block; margin-top: 14px; max-width: 32ch; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .85); }
body:has(.svc-hero) .svc-unit.is-active .svc-unit-desc { color: #333; }
.svc-unit-name { margin-top: auto; }
@media (max-width: 991px) { body:has(.svc-hero) .svc-unit { min-height: 200px; } .svc-unit-desc { font-size: 14px; margin-top: 10px; } }
.svc-unit-desc { min-height: 5.6em; } @media (max-width: 991px) { .svc-unit-desc { min-height: 0; } }
body:has(.svc-hero) .svc-unit-sub { display: none; }

/* hero cards: wider description, bigger names and icons */
body:has(.svc-hero) .svc-unit-ico { width: 88px; height: 88px; }
body:has(.svc-hero) .svc-unit-name { font-size: clamp(36px, 3.8vw, 60px); line-height: 1.02; }
body:has(.svc-hero) .svc-unit-desc { max-width: 44ch; min-height: 4.2em; font-size: 16px; }
@media (max-width: 991px) {
  body:has(.svc-hero) .svc-unit-ico { width: 60px; height: 60px; }
  body:has(.svc-hero) .svc-unit-name { font-size: 32px; }
  body:has(.svc-hero) .svc-unit-desc { max-width: none; min-height: 0; font-size: 14px; }
}

/* hero cards: icons without the grey tile, no arrows */
body:has(.svc-hero) .svc-unit::after { display: none; }
body:has(.svc-hero) .svc-unit:not(.is-active) .svc-unit-ico img.mono { filter: invert(1); }
body:has(.svc-hero) .svc-unit-ico { width: 96px; height: 96px; }
body:has(.svc-hero) .svc-unit-ico img { object-fit: contain; }
body:has(.svc-hero) .svc-unit-ico { width: 104px; height: 104px; }
body:has(.svc-hero) .svc-unit-ico img { object-position: left top; }
/* equal-height logo icons in the hero cards */
body:has(.svc-hero) .svc-unit-ico { width: auto; height: 96px; }
body:has(.svc-hero) .svc-unit-ico img { width: auto; height: 100%; max-width: none; }
@media (max-width: 991px) { body:has(.svc-hero) .svc-unit-ico { height: 60px; } }
body:has(.svc-hero) .svc-unit-ico { height: 64px; }
@media (max-width: 991px) { body:has(.svc-hero) .svc-unit-ico { height: 48px; } }

/* Dynamika: "З чим ми могли б допомагати" - tilted pink pills (as in the offer) */
.dyn-help { margin: 8px 0 40px; padding: 0; color: #fff; }
.dyn-help-pills { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px 0 8px; }
.dyn-help-row { display: flex; justify-content: center; gap: 22px; width: 100%; }
.dyn-pill { display: inline-flex; align-items: center; gap: 18px; padding: 26px 36px 26px 26px; border-radius: 10px; background: #ff10b4; color: #fff; font-family: Taktikasans, sans-serif; font-weight: 500; font-size: clamp(20px, 2.5vw, 40px); line-height: 1.02; letter-spacing: -.01em; max-width: 46%; transition: transform .35s ease; }
.dyn-pill i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: #fff; color: #ff10b4; }
.dyn-pill i .msym { font-size: .85em; font-weight: 600; }
.dyn-help-row:nth-child(2) .dyn-pill { max-width: 56%; }
.dyn-help-row:nth-child(1) .dyn-pill:nth-child(1) { transform: rotate(-1.2deg); }
.dyn-help-row:nth-child(1) .dyn-pill:nth-child(2) { transform: rotate(.8deg); }
.dyn-help-row:nth-child(2) .dyn-pill { transform: rotate(1.2deg); }
.dyn-help-row:nth-child(3) .dyn-pill:nth-child(1) { transform: rotate(1.5deg); }
.dyn-help-row:nth-child(3) .dyn-pill:nth-child(2) { transform: rotate(-3.5deg); }
.dyn-help:not(.is-in) .dyn-pill { opacity: 0; transform: translateY(30px) scale(.92); }
.dyn-help.is-in .dyn-pill { animation: wk-pop .7s cubic-bezier(.2, .9, .3, 1.2) both, wk-bob 4.5s ease-in-out infinite; }
.dyn-help.is-in .dyn-help-row:nth-child(1) .dyn-pill:nth-child(1) { animation-delay: .05s, .8s; }
.dyn-help.is-in .dyn-help-row:nth-child(1) .dyn-pill:nth-child(2) { animation-delay: .17s, 1.4s; }
.dyn-help.is-in .dyn-help-row:nth-child(2) .dyn-pill { animation-delay: .29s, 2s; }
.dyn-help.is-in .dyn-help-row:nth-child(3) .dyn-pill:nth-child(1) { animation-delay: .41s, 1.1s; }
.dyn-help.is-in .dyn-help-row:nth-child(3) .dyn-pill:nth-child(2) { animation-delay: .53s, 1.7s; }
.dyn-help .dyn-pill:hover { transform: rotate(0) scale(1.03); animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .dyn-help:not(.is-in) .dyn-pill { opacity: 1; } .dyn-help.is-in .dyn-pill { animation: none; } }
@media (max-width: 991px) { .dyn-help-row { flex-direction: column; align-items: center; gap: 14px; } .dyn-help-pills { gap: 14px; } .dyn-pill, .dyn-help-row:nth-child(2) .dyn-pill { max-width: 100%; padding: 16px 20px 16px 16px; font-size: 20px; } }
.dyn-help-pills { gap: 38px; padding-top: 36px; }

/* Typetika (same design as Dynamika): fast font flicker */
.ty-panel { position: relative; }
.ty-f { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; opacity: 0; animation: ty-flick 1.8s steps(1) infinite; }
.ty-f b { font-weight: 500; font-size: clamp(120px, 20vw, 320px); line-height: 1; letter-spacing: -.02em; }
.ty-f em { font-style: normal; font-family: Taktikasans, sans-serif; font-size: 14px; color: #8a8a8a; }
@keyframes ty-flick { 0% { opacity: 1; } 16.6% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ty-f { animation: none; } .ty-f:first-child { opacity: 1; } }
.dyn-pill i { font-style: normal; }
.dyn-pill i:not(:has(.msym)) { font-size: .62em; font-weight: 600; }
a.dyn-pill { text-decoration: none; }
body:has(.svc-hero) .dyn-hero2-ico i { color: #000; } .dyn-hero2-ico .msym { font-size: 28px; }
/* Typetika intro: smaller video, centred in its half */
@media (min-width: 992px) {
  .ty-hero .dyn-hero2-vis { display: flex; align-items: center; justify-content: center; }
  .ty-hero .dyn-hero2-panel { width: min(100%, 520px); height: auto; aspect-ratio: 1212 / 1244; }
}
.ty-hero .dyn-hero2-panel video { object-fit: contain; }
.dyn-how-ico { display: none; } .dyn-how-head { gap: 0; }

/* Typetika: font specimen cards */
.ty-cards-wrap { margin: 8px 0 40px; }
.ty-cards-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.ty-all { flex: none; padding: 12px 22px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; color: #fff; font-size: 15px; text-decoration: none; transition: background-color .2s, color .2s; }
.ty-all:hover { background: #fff; color: #0a0a0a; }
.ty-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ty-card { position: relative; display: flex; flex-direction: column; min-height: 520px; padding: 28px; border-radius: 16px; background: #161616; color: #fff; text-decoration: none; overflow: hidden; transition: background-color .3s ease; }
.ty-card:hover { background: #222; }
.ty-badge { position: absolute; top: 24px; right: 24px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); font-size: 14px; line-height: 1; }
.ty-name { padding-right: 70px; font-family: Taktikasans, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.ty-meta { margin-top: 8px; color: #8a8a8a; font-size: 16px; line-height: 1.3; }
.ty-aa { margin-top: auto; font-size: clamp(110px, 11vw, 200px); line-height: .9; letter-spacing: -.03em; }
@media (max-width: 991px) { .ty-cards { grid-template-columns: 1fr 1fr; } .ty-card { min-height: 300px; padding: 18px; } .ty-name { font-size: 20px; padding-right: 54px; } .ty-badge { top: 16px; right: 16px; } .ty-aa { font-size: 96px; } }
@media (max-width: 560px) { .ty-cards { grid-template-columns: 1fr; } .ty-cards-head { flex-wrap: wrap; } }
/* font cards: shorter, case-style tags */
.ty-card { min-height: 360px; }
.ty-aa { font-size: clamp(90px, 8vw, 150px); }
.ty-badge { top: 24px; right: 24px; padding: 7px 12px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); font-family: Taktikasans, sans-serif; font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 991px) { .ty-card { min-height: 240px; } .ty-aa { font-size: 80px; } }
.dyn-how { margin-bottom: 96px; } .ty-cards-wrap { margin-top: 96px; } @media (max-width: 991px) { .dyn-how { margin-bottom: 56px; } .ty-cards-wrap { margin-top: 56px; } }

/* site-style buttons on the services page: light grey, 8px corners */
body:has(.svc-hero) .svc-pill { background: #e6e6e6; color: #0a0a0a; border-radius: 8px; padding: 22px 34px; font-size: 20px; }
body:has(.svc-hero) .svc-pill:hover { background: #fff; }
body:has(.svc-hero) .sd-btn { background: #e6e6e6; color: #0a0a0a; border-radius: 8px; padding: 18px 28px; font-size: 18px; }
body:has(.svc-hero) .sd-btn:hover { background: #fff; }
/* more air between the blocks of Dynamika / Typetika */
body:has(.svc-hero) .dyn-hero2 { margin-bottom: 140px; }
body:has(.svc-hero) .dyn-how { margin: 0 0 180px; }
body:has(.svc-hero) .ty-cards-wrap { margin: 0 0 80px; }
body:has(.svc-hero) .dyn-help { margin: 0 0 80px; }
@media (max-width: 991px) { body:has(.svc-hero) .dyn-hero2 { margin-bottom: 72px; } body:has(.svc-hero) .dyn-how { margin-bottom: 96px; } }
/* services buttons = the site's standard button size (same as homepage "Всі матеріали") */
body:has(.svc-hero) .svc-pill, body:has(.svc-hero) .sd-btn { padding: 11px 20px; border-radius: 6px; font-size: 14px; font-weight: 400; line-height: 1.2; background: #e6e6e6; color: #0a0a0a; gap: 6px; }
body:has(.svc-hero) .svc-pill:hover, body:has(.svc-hero) .sd-btn:hover { background: #d8d8d8; }

/* services headings at the homepage size (40px / regular), card titles 28px / 500 */
body:has(.svc-hero) .dyn-hero2-h, body:has(.svc-hero) .dyn-how-h { font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: 0; }
body:has(.svc-hero) .dyn-how-card h3, body:has(.svc-hero) .sc-t { font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: 0; }
body:has(.svc-hero) .ty-name { font-size: 22px; }
@media (max-width: 991px) { body:has(.svc-hero) .dyn-hero2-h, body:has(.svc-hero) .dyn-how-h { font-size: 28px; } body:has(.svc-hero) .dyn-how-card h3 { font-size: 24px; } }
/* font cards: the "Aa" breathes between light and heavy */
.ty-aa { font-weight: var(--w2, 700); animation: ty-wt 2.2s ease-in-out infinite alternate; }
@keyframes ty-wt { from { font-weight: var(--w1, 500); } to { font-weight: var(--w2, 900); } }
@media (prefers-reduced-motion: reduce) { .ty-aa { animation: none; } }
/* intro titles ("Тактичний супровід", "Шрифти для брендів") back to the big size */
body:has(.svc-hero) .dyn-hero2-h { font-size: clamp(44px, 6vw, 92px); font-weight: 500; line-height: .98; letter-spacing: -.03em; }
@media (max-width: 991px) { body:has(.svc-hero) .dyn-hero2-h { font-size: 40px; } }

/* Taktika panel in the Dynamika/Typetika design */
body:has(.svc-hero) .tk-panel { background: #000; }
body:has(.svc-hero) .tk-panel img { width: 70%; max-height: 90%; object-fit: contain; display: block; }
body:has(.svc-hero) .tk-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body:has(.svc-hero) .tk-cards .tk-card { grid-column: span 2; text-decoration: none; display: flex; flex-direction: column; cursor: pointer; transition: transform .25s ease; }
body:has(.svc-hero) .tk-cards .tk-card:nth-child(n+4) { grid-column: span 3; }
body:has(.svc-hero) .tk-cards .tk-card:hover { transform: translateY(-4px); }
body:has(.svc-hero) .tk-card .tk-more { margin-top: auto; padding-top: 24px; font-size: 14px; color: #0a0a0a; }
@media (max-width: 991px) {
  body:has(.svc-hero) .tk-cards { grid-template-columns: 1fr; }
  body:has(.svc-hero) .tk-cards .tk-card, body:has(.svc-hero) .tk-cards .tk-card:nth-child(n+4) { grid-column: auto; }
}
body:has(.svc-hero) .tk-panel img { filter: invert(1); }
body:has(.svc-hero) .tk-cards .tk-card { min-height: 260px; }
/* Taktika: five cards in one row */
body:has(.svc-hero) .tk-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body:has(.svc-hero) .tk-cards .tk-card, body:has(.svc-hero) .tk-cards .tk-card:nth-child(n+4) { grid-column: auto; min-height: 340px; }
body:has(.svc-hero) .tk-cards .tk-card h3 { font-size: 24px; overflow-wrap: anywhere; hyphens: manual; }
@media (max-width: 991px) {
  body:has(.svc-hero) .tk-cards { grid-template-columns: 1fr; }
  body:has(.svc-hero) .tk-cards .tk-card { min-height: 0; }
}
/* Taktika cards: numbered, all info on the card */
body:has(.svc-hero) .tk-cards .tk-card { cursor: default; min-height: 0; text-decoration: none; padding: 28px 26px 30px; }
body:has(.svc-hero) .tk-cards .tk-card:hover { transform: none; }
body:has(.svc-hero) .tk-num { display: flex; gap: 2px; margin-bottom: 56px; }
body:has(.svc-hero) .tk-num b { width: 30px; height: 30px; border-radius: 50%; background: #0a0a0a; color: #fff; font: 700 15px/30px "Courier New", ui-monospace, monospace; text-align: center; }
body:has(.svc-hero) .tk-card h3 { margin: 0 0 18px; }
body:has(.svc-hero) .tk-card .tk-desc { font-size: 14px; line-height: 1.4; color: #444; margin: 0 0 20px; }
body:has(.svc-hero) .tk-card .sd-tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
body:has(.svc-hero) .tk-card .sd-tag { background: #efefef; color: #0a0a0a; border: 0; font-size: 12px; padding: 5px 10px; border-radius: 6px; }
body:has(.svc-hero) .tk-card .tk-note { font-size: 12px; line-height: 1.4; color: #777; margin: 14px 0 0; }
/* Taktika cards as a horizontal slider */
body:has(.svc-hero) .tk-cards { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-right: -20px; padding-right: 20px; cursor: grab; }
body:has(.svc-hero) .tk-cards::-webkit-scrollbar { display: none; }
body:has(.svc-hero) .tk-cards.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
body:has(.svc-hero) .tk-cards .tk-card, body:has(.svc-hero) .tk-cards .tk-card:nth-child(n+4) { flex: 0 0 min(424px, 82vw); grid-column: auto; scroll-snap-align: start; min-height: 390px; }
@media (max-width: 991px) { body:has(.svc-hero) .tk-cards { flex-direction: row; } body:has(.svc-hero) .tk-cards .tk-card { min-height: 0; } }
/* Taktika slider cards: smaller */
body:has(.svc-hero) .tk-cards { gap: 14px; }
body:has(.svc-hero) .tk-cards .tk-card, body:has(.svc-hero) .tk-cards .tk-card:nth-child(n+4) { flex: 0 0 min(320px, 78vw); min-height: 330px; padding: 22px 22px 24px; }
body:has(.svc-hero) .tk-num { margin-bottom: 36px; }
body:has(.svc-hero) .tk-cards .tk-card h3 { font-size: 22px; margin-bottom: 12px; }
body:has(.svc-hero) .tk-card .tk-desc { font-size: 13px; margin-bottom: 16px; }
/* slider arrows */
body:has(.svc-hero) .tk-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body:has(.svc-hero) .tk-arrows { display: flex; gap: 8px; }
body:has(.svc-hero) .tk-arr { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #e6e6e6; color: #0a0a0a; font: 500 20px/1 Taktikasans, sans-serif; cursor: pointer; transition: background .2s, opacity .2s; }
body:has(.svc-hero) .tk-arr:hover:not(:disabled) { background: #d8d8d8; }
body:has(.svc-hero) .tk-arr:disabled { opacity: .3; cursor: default; }
/* Taktika intro: interactive 3D symbol from the homepage */
body:has(.svc-hero) .tk-3d { width: 100%; height: 100%; min-height: 360px; cursor: grab; }
body:has(.svc-hero) .tk-3d canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
/* Taktika slider cards: black, font-card size, 8px (cases) corners */
body:has(.svc-hero) .tk-cards { gap: 12px; margin-right: 0; padding-right: 0; }
body:has(.svc-hero) .tk-cards .tk-card, body:has(.svc-hero) .tk-cards .tk-card:nth-child(n+4) { flex: 0 0 calc((100% - 36px) / 4); min-height: 480px; padding: 28px; border-radius: 8px; background: #161616; color: #fff; }
body:has(.svc-hero) .tk-cards .tk-card h3 { font-size: 28px; color: #fff; margin-bottom: 14px; }
body:has(.svc-hero) .tk-card .tk-desc { font-size: 15px; color: rgba(255,255,255,.62); }
body:has(.svc-hero) .tk-num { margin-bottom: 72px; }
body:has(.svc-hero) .tk-num b { background: #fff; color: #0a0a0a; }
body:has(.svc-hero) .tk-card .sd-tag { background: rgba(255,255,255,.12); color: #fff; }
body:has(.svc-hero) .tk-card .tk-note { color: rgba(255,255,255,.45); }
@media (max-width: 991px) { body:has(.svc-hero) .tk-cards .tk-card, body:has(.svc-hero) .tk-cards .tk-card:nth-child(n+4) { flex-basis: min(300px, 80vw); min-height: 360px; padding: 20px; } body:has(.svc-hero) .tk-num { margin-bottom: 40px; } }
/* Taktika cards: same height as the Typetika font cards */
body:has(.svc-hero) .tk-cards .tk-card, body:has(.svc-hero) .tk-cards .tk-card:nth-child(n+4) { min-height: 360px; }
body:has(.svc-hero) .tk-num { margin-bottom: 40px; }
body:has(.svc-hero) .tk-cards .tk-card h3 { font-size: 24px; margin-bottom: 10px; }
body:has(.svc-hero) .tk-card .tk-desc { font-size: 14px; margin-bottom: 16px; }
/* Taktika intro: light panel for the clear balloon symbol */
body:has(.svc-hero) .tk-panel { background: #e9e9ec; }
body:has(.svc-hero) .tk-panel { border-radius: 8px; }
/* balloon symbol sits on the black page, no light panel */
body:has(.svc-hero) .tk-panel { background: transparent; }
/* Taktika cards: no numbers, bigger title + text */
body:has(.svc-hero) .tk-cards .tk-card h3 { font-size: 32px; line-height: 1.05; margin-bottom: 14px; }
body:has(.svc-hero) .tk-card .tk-desc { font-size: 16px; line-height: 1.4; }
body:has(.svc-hero) .tk-card .sd-tag { font-size: 13px; }
@media (max-width: 991px) { body:has(.svc-hero) .tk-cards .tk-card h3 { font-size: 26px; } body:has(.svc-hero) .tk-card .tk-desc { font-size: 15px; } }
/* Taktika cards: everything in Taktika Sans */
body:has(.svc-hero) .tk-card, body:has(.svc-hero) .tk-card h3, body:has(.svc-hero) .tk-card p, body:has(.svc-hero) .tk-card .sd-tag, body:has(.svc-hero) .tk-card .tk-note { font-family: Taktikasans, sans-serif; }
/* Taktika intro: balloon-symbol picture (placeholder for the 3D) */
body:has(.svc-hero) .tk-panel .tk-balloon { filter: none; width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 0; }
/* balloon picture inserted as-is (white background) */
body:has(.svc-hero) .tk-panel { background: #fefefe; border-radius: 8px; overflow: hidden; }
body:has(.svc-hero) .tk-panel .tk-balloon { border-radius: 0; }
/* the supplied PNG/WebP is already cut out (alpha) — no panel background */
body:has(.svc-hero) .tk-panel { background: transparent; }
/* Taktika intro text: same typography as the homepage "Креатив має бути…" block */
body:has(.svc-hero) .tk-hero .dyn-hero2-h { font-family: Taktikasans, sans-serif; font-weight: 400; font-size: clamp(44px, 5.8vw, 84px); line-height: .9; letter-spacing: 0; }
body:has(.svc-hero) .tk-hero .dyn-hero2-p { font-family: Taktikasans, sans-serif; font-weight: 400; font-size: 22px; line-height: 1.4; letter-spacing: .5px; color: #a3a3a3; max-width: 600px; margin-top: 40px; }
body:has(.svc-hero) .tk-hero .tk-lead { color: #fff; }
@media (max-width: 991px) { body:has(.svc-hero) .tk-hero .dyn-hero2-h { font-size: 44px; } body:has(.svc-hero) .tk-hero .dyn-hero2-p { font-size: 16px; margin-top: 24px; } }
/* Services hero paragraph: homepage text style (white lead + grey rest) */
body:has(.svc-hero) .svc-hero-text .paragraph-2-copy-copy-copy { font-size: 22px; line-height: 1.4; letter-spacing: .5px; color: #a3a3a3; max-width: 600px; }
body:has(.svc-hero) .svc-hero-text .tk-lead { color: #fff; }
@media (max-width: 991px) { body:has(.svc-hero) .svc-hero-text .paragraph-2-copy-copy-copy { font-size: 16px; } }
/* all three intros: one heading + paragraph style (Dynamika heading weight/size, Taktika Sans everywhere) */
body:has(.svc-hero) .dyn-hero2-h, body:has(.svc-hero) .tk-hero .dyn-hero2-h { font-family: Taktikasans, sans-serif; font-size: clamp(44px, 6vw, 92px); font-weight: 500; line-height: .98; letter-spacing: -.03em; }
body:has(.svc-hero) .dyn-hero2-p, body:has(.svc-hero) .tk-hero .dyn-hero2-p { font-family: Taktikasans, sans-serif; font-weight: 400; font-size: 22px; line-height: 1.4; letter-spacing: .5px; color: #a3a3a3; max-width: 600px; margin-top: 40px; }
body:has(.svc-hero) .dyn-hero2-p .tk-lead { color: #fff; }
@media (max-width: 991px) { body:has(.svc-hero) .dyn-hero2-h, body:has(.svc-hero) .tk-hero .dyn-hero2-h { font-size: 40px; } body:has(.svc-hero) .dyn-hero2-p, body:has(.svc-hero) .tk-hero .dyn-hero2-p { font-size: 16px; margin-top: 24px; } }
/* intro paragraphs back to the original small size (all three tabs), Taktika Sans kept */
body:has(.svc-hero) .dyn-hero2-p, body:has(.svc-hero) .tk-hero .dyn-hero2-p { font-family: Taktikasans, sans-serif; font-size: 16px; line-height: 1.35; letter-spacing: 0; color: #e6e6e6; max-width: 31em; margin-top: 28px; }
body:has(.svc-hero) .dyn-hero2-p .tk-lead { color: inherit; }
@media (max-width: 991px) { body:has(.svc-hero) .dyn-hero2-p, body:has(.svc-hero) .tk-hero .dyn-hero2-p { font-size: 15px; margin-top: 20px; } }
/* Services hero paragraph: smaller (16px), keep white lead + grey rest */
body:has(.svc-hero) .svc-hero-text .paragraph-2-copy-copy-copy { font-size: 16px; line-height: 1.35; letter-spacing: 0; max-width: 31em; }
body:has(.svc-hero) .dyn-hero2-p { text-wrap: balance; }
/* "how it works" / "what we do" cards (Dynamika, Typetika): lower, Taktika Sans text */
body:has(.svc-hero) .dyn-how-card { min-height: 300px; }
body:has(.svc-hero) .dyn-how-card p { font-family: Taktikasans, sans-serif; }
@media (max-width: 991px) { body:has(.svc-hero) .dyn-how-card { min-height: 240px; } }
/* slider arrows: glass style */
body:has(.svc-hero) .tk-arr { width: 48px; height: 48px; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
body:has(.svc-hero) .tk-arr:hover:not(:disabled) { background: rgba(255,255,255,.2); }
body:has(.svc-hero) .tk-arr:disabled { opacity: .3; }
body:has(.svc-hero) .dyn-how-card { min-height: 370px; }
@media (max-width: 991px) { body:has(.svc-hero) .dyn-how-card { min-height: 250px; } }
/* font cards on mobile: left-aligned like a type-foundry list (title+meta top-left, tag top-right, big Aa bottom-left) */
body:has(.svc-hero) .ty-card { align-items: flex-start; text-align: left; }
body:has(.svc-hero) .ty-card .ty-name, body:has(.svc-hero) .ty-card .ty-meta, body:has(.svc-hero) .ty-card .ty-aa { align-self: flex-start; text-align: left; }
@media (max-width: 991px) {
  body:has(.svc-hero) .ty-cards { grid-template-columns: 1fr; gap: 10px; }
  body:has(.svc-hero) .ty-card { min-height: 300px; padding: 22px; border-radius: 16px; }
  body:has(.svc-hero) .ty-card .ty-name { font-size: 22px; padding-right: 84px; }
  body:has(.svc-hero) .ty-card .ty-meta { font-size: 15px; }
  body:has(.svc-hero) .ty-card .ty-badge { top: 20px; right: 20px; left: auto; }
  body:has(.svc-hero) .ty-card .ty-aa { font-size: 120px; margin-top: auto; }
}
/* mobile: smaller icon circles in the white cards (Dynamika, Typetika) */
@media (max-width: 991px) {
  body:has(.svc-hero) .dyn-how-card .dyn-how-i { width: 48px; height: 48px; }
  body:has(.svc-hero) .dyn-how-card .dyn-how-i .msym { font-size: 26px; }
}
/* the three unit cards are <button>s, which don't inherit the font: force Taktika Sans on all their text */
body:has(.svc-hero) .svc-unit, body:has(.svc-hero) .svc-unit span { font-family: Taktikasans, sans-serif; }
/* unit-card logos: a bit smaller */
body:has(.svc-hero) .svc-unit-ico { height: 56px; }
@media (max-width: 991px) { body:has(.svc-hero) .svc-unit-ico { height: 38px; } }
/* homepage services: on mobile the cases sit under each row's text (JS builds .svc-row-cases) */
.svc-row-cases { display: none; }
@media screen and (max-width: 900px) {
  .services-left .services-slideshow { display: none; }
  .svc-row-cases { display: block; position: relative; width: 100%; max-width: 440px; height: 210px; margin-top: 20px; border-radius: 8px; overflow: hidden; }
}
@media screen and (max-width: 900px) {
  .card-services .div-block-60, .card-services .div-block-150 { row-gap: 20px; grid-row-gap: 20px; }
  .svc-row-cases { margin-top: 0; }
}
/* mobile only: Бренд-стратегія goes before Сайт (desktop keeps the original order) */
@media screen and (max-width: 900px) {
  .card-services .div-block-44 { display: flex; flex-direction: column; }
  .card-services .div-block-151 { order: 1; }
  .card-services .div-block-64 { order: 2; }
  .card-services .services-row-web { order: 3; }
  .card-services .div-block-65 { order: 4; }
}
/* slideshow captions: always left-aligned (they inherited right alignment on mobile) */
.services-slideshow-caption, .svc-row-cases .services-slideshow-caption { text-align: left; align-items: flex-start; }
.services-slideshow-caption-name, .services-slideshow-caption-tagline { text-align: left; }

/* Case results (js/case-results.js): dark cards, count-up number, filling bar */
.res-hidden { display: none !important; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; width: 100%; max-width: 1400px; margin: 40px auto; padding: 0 20px; box-sizing: border-box; }
.res-card { display: flex; flex-direction: column; min-height: 300px; padding: 28px; border-radius: 8px; background: #161616; color: #fff; font-family: Taktikasans, sans-serif; opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.res-card.is-in { opacity: 1; transform: none; }
.res-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.res-num { font-size: clamp(64px, 7vw, 120px); font-weight: 500; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.res-unit { font-size: 22px; color: rgba(255, 255, 255, .5); }
.res-bar { height: 4px; margin-top: 22px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.res-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: #fff; transition: width 1.6s cubic-bezier(.2, .7, .2, 1) .15s; }
.res-card.is-in .res-bar i { width: var(--w); }
.res-label { margin: auto 0 0; padding-top: 28px; font-size: 18px; line-height: 1.3; color: rgba(255, 255, 255, .62); }
@media (max-width: 991px) { .res-grid { padding: 0 16px; margin: 28px auto; } .res-card { min-height: 220px; padding: 22px; } .res-num { font-size: 72px; } .res-label { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .res-card { opacity: 1; transform: none; transition: none; } .res-bar i { width: var(--w); transition: none; } }
.res-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); max-width: none; margin: 40px 0; box-sizing: border-box; }
@media (max-width: 991px) { .res-grid { margin: 28px 0; grid-template-columns: 1fr; } }
/* result bar: thick block instead of a thin line */
.res-bar { height: 56px; margin-top: 28px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.res-bar i { border-radius: 8px; }
@media (max-width: 991px) { .res-bar { height: 44px; margin-top: 22px; } }
/* result bar, charge-meter style: 0 / 50 / 100 scale, outlined track, mid tick, no glow */
.res-scale { display: flex; justify-content: space-between; margin-top: 26px; font: 400 14px/1 "Courier New", ui-monospace, monospace; color: rgba(255, 255, 255, .45); }
.res-bar { position: relative; height: 84px; margin-top: 12px; padding: 5px; box-sizing: border-box; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .18); background: #262626; overflow: hidden; }
.res-bar::after { content: ""; position: absolute; left: 50%; top: 32%; bottom: 32%; width: 1px; background: rgba(255, 255, 255, .22); }
.res-bar i { position: relative; z-index: 1; border-radius: 11px; background: #f2f2f2; }
@media (max-width: 991px) { .res-bar { height: 68px; border-radius: 14px; } .res-bar i { border-radius: 9px; } }
/* clients grid: hover text panel must always fit — rows follow the cards (3:2 min) instead of fixed pixel rows, and the copy tightens on small screens */
body.body-3 .grid { grid-template-rows: none; grid-auto-rows: auto; }
@media (max-width: 560px) {
  body.body-3 .div-block-48 { padding: 10px; }
  body.body-3 .div-block-48 .paragraph-5 { font-size: 14px; line-height: 1.15; }
  body.body-3 .div-block-48 .paragraph-9 { font-size: 12px; line-height: 1.2; }
  body.body-3 .div-block-48 .paragraph-4 { font-size: 11.5px; line-height: 1.25; }
  body.body-3 .div-block-48 .paragraph-8 { font-size: 11px; }
}

/* Case results as ONE panel on desktop: heading + text on the left, metric cards on the right */
.res-panel { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: 56px; align-items: start; margin: 40px 20px; padding: 48px; border-radius: 8px; background: #161616; box-sizing: border-box; }
.res-panel > [class*="heading-body"] { display: block; margin: 0; padding: 0; width: auto; max-width: none; }
.res-panel > [class*="heading-body"] > h1 { margin: 0 0 24px; }
.res-panel > [class*="heading-body"] > div { width: auto; max-width: 34em; }
.res-panel .res-grid.in-panel { margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.res-panel .res-card { background: #0d0d0d; min-height: 300px; }
.res-panel .res-grid.single .res-card { min-height: 380px; padding: 36px; }
.res-panel .res-grid.single .res-num { font-size: clamp(96px, 11vw, 180px); }
@media (max-width: 991px) {
  .res-panel { grid-template-columns: 1fr; gap: 28px; margin: 28px 16px; padding: 24px; }
  .res-panel .res-grid.single .res-card { min-height: 260px; padding: 22px; }
  .res-panel .res-grid.single .res-num { font-size: 72px; }
}
/* panel without metrics (qualitative results): heading + text only */
.res-panel.no-metrics { grid-template-columns: 1fr; }
.res-panel > .res-head { display: block; margin: 0; padding: 0; width: auto; max-width: none; }
.res-panel > .res-head h1 { margin: 0 0 24px; }
.res-panel.no-metrics > .res-head p { max-width: 40em; }
.res-panel > .res-head h1 { font-size: 48px; line-height: 1; font-weight: 400; letter-spacing: 0; }
.res-panel .res-card.res-long .res-num, .res-panel .res-grid.single .res-card.res-long .res-num { font-size: clamp(44px, 5vw, 84px); }
@media (max-width: 991px) { .res-panel > .res-head h1 { font-size: 36px; } .res-panel .res-card.res-long .res-num, .res-panel .res-grid.single .res-card.res-long .res-num { font-size: 40px; } }
/* panel with a visual next to the text (KLO donation counter) */
.res-panel.with-media { grid-template-columns: minmax(260px, 5fr) 7fr; }
.res-panel.with-media > :not(.res-head) { margin: 0; width: 100%; }
.res-panel.with-media img { width: 100%; height: auto; display: block; border-radius: 8px; }
@media (max-width: 991px) { .res-panel.with-media { grid-template-columns: 1fr; } }
/* results panel: always the full content width, even when it sits inside a multi-column Webflow grid */
.res-panel { grid-column: 1 / -1; justify-self: stretch; width: auto; max-width: none; box-sizing: border-box; }
.grid-113-copy:has(> .res-panel), [class*="heading-body"]:has(> .res-panel), .div-block-727:has(.res-panel) { display: block; }

/* credits with one long crew list: small companies stacked left, the long list in two columns */
@media screen and (min-width: 768px) {
  .cr-block.has-big { grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); column-gap: 48px; }
  .cr-block.has-big .cr-main .cr-rows { column-count: 2; column-gap: 40px; }
}
.cr-line { display: block; break-inside: avoid; }
.cr-block.has-big .cr-side .cr-group:last-child, .cr-block.has-big .cr-main .cr-group { margin-bottom: 0; }
/* result numbers always fit their card: size follows the card width and the number of characters */
.res-card { container-type: inline-size; }
.res-card .res-num { font-size: min(120px, calc(100cqw / (var(--n, 3) * 0.82))); }
.res-panel .res-grid.single .res-card .res-num { font-size: min(180px, calc(100cqw / (var(--n, 3) * 0.82))); }
.res-panel .res-card.res-long .res-num, .res-panel .res-grid.single .res-card.res-long .res-num { font-size: min(84px, calc(100cqw / (var(--n, 3) * 0.82))); }
@media (max-width: 991px) { .res-card .res-num, .res-panel .res-grid.single .res-card .res-num, .res-panel .res-card.res-long .res-num { font-size: min(72px, calc(100cqw / (var(--n, 3) * 0.82))); } }
/* result cards: number at the top, label + 0/50/100 scale + bar pinned to the bottom edge (bars line up across cards) */
.res-card .res-label { margin: auto 0 0; padding-top: 24px; }
.res-card .res-scale { margin-top: 20px; }
.res-card .res-bar { margin-top: 10px; }
.res-card .res-scale { margin-top: auto; padding-top: 24px; }
.res-card .res-label + .res-scale { margin-top: 0; padding-top: 20px; }
/* Prom: the third story video had a 16:9 / square wrapper — all four vertical stories share the same box */
.four-stories-2 > div > [class*="size-video-16-9"] { aspect-ratio: 9 / 18; width: 100%; height: auto; display: block; overflow: clip; border-radius: 16px; }
.res-panel > .res-grid.in-panel + .res-grid.in-panel { margin-top: 12px; }

/* ===== Prom mega-case: campaign transitions (js/case-chapters.js) ===== */
.ch-hidden { display: none !important; }
.ch-count { font: 400 14px/1 "Courier New", ui-monospace, monospace; letter-spacing: .02em; color: rgba(255, 255, 255, .55); }
/* 1) chapter band */
.ch-band { margin: 120px 0 80px; padding: 56px 20px 40px; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); background: #000; color: #fff; font-family: Taktikasans, sans-serif; box-sizing: border-box; }
.ch-band-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ch-next-label { font-size: 14px; color: rgba(255, 255, 255, .55); }
.ch-band .ch-title { margin: 56px 0 0; max-width: 16em; font-size: clamp(36px, 6vw, 92px); font-weight: 500; line-height: .98; letter-spacing: -.03em; color: #fff; }
.ch-ticks { display: flex; gap: 6px; margin-top: 56px; }
.ch-ticks i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
.ch-ticks i.on { background: #fff; }
/* 2) slim line + floating pill */
.ch-slim { display: flex; align-items: center; gap: 16px; margin: 100px 20px 60px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .16); color: #fff; font-family: Taktikasans, sans-serif; font-size: 18px; }
.ch-slim .ch-slim-title { flex: 1; }
.ch-slim .ch-arrow { color: rgba(255, 255, 255, .55); }
.ch-pill { position: fixed; left: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100vw - 40px)); padding: 12px 16px; border-radius: 8px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); color: #fff; font-family: Taktikasans, sans-serif; font-size: 14px; line-height: 1.25; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.ch-pill.is-on { opacity: 1; transform: none; }
.ch-pill .ch-pill-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 3) next-campaign teaser card */
.ch-card { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 100px 20px 60px; padding: 36px; border-radius: 8px; background: #161616; color: #fff; font-family: Taktikasans, sans-serif; cursor: pointer; transition: background-color .25s ease; }
.ch-card:hover { background: #202020; }
.ch-card .ch-title { margin: 28px 0 0; max-width: 18em; font-size: clamp(28px, 4vw, 56px); font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.ch-card-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 8px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); font-size: 22px; transition: transform .25s ease; }
.ch-card:hover .ch-card-btn { transform: translateY(4px); }
@media (max-width: 991px) {
  .ch-band { margin: 80px 0 56px; padding: 32px 16px 28px; }
  .ch-band .ch-title { margin-top: 36px; }
  .ch-ticks { margin-top: 36px; }
  .ch-slim, .ch-card { margin-left: 16px; margin-right: 16px; }
  .ch-card { padding: 24px; }
  .ch-pill { left: 16px; bottom: 76px; }
}
/* chapter band, calmer: smaller title, tighter band (overrides the first version above) */
.ch-band { margin: 96px 0 64px; padding: 28px 20px 24px; }
.ch-band .ch-title { margin: 28px 0 0; max-width: 28em; font-size: clamp(26px, 3vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.ch-ticks { margin-top: 28px; }
@media (max-width: 991px) { .ch-band { margin: 64px 0 44px; padding: 22px 16px 20px; } .ch-band .ch-title { margin-top: 20px; } .ch-ticks { margin-top: 20px; } }
/* Taktika intro: fast-cut symbol video (same 25fps / 5-frame cuts as the Dynamika rat) */
body:has(.svc-hero) .tk-panel video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ===== campaign dividers (js/case-dividers.js): narrow centred line, hairline on top, text rolls like the vacancy "Детальніше" ===== */
.cd-sec { position: relative; margin: 100px 0 64px; padding: 44px 0 0; }
.cd-sec::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: rgba(255, 255, 255, .2); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.cd-sec.is-in::before { transform: scaleX(1); }
.cd-sec .cd-text { display: block; max-width: 22em; margin-left: auto; margin-right: auto; padding: 0 20px; text-align: center; box-sizing: border-box; line-height: 1.35; }
.cd-w { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.cd-w > span { display: block; color: #6f6f6f; transition: transform .58s cubic-bezier(.65, 0, .35, 1) var(--d, 0ms); }
.cd-w::after { content: attr(data-text); position: absolute; left: 0; right: 0; top: 100%; color: #fff; text-align: center; transition: transform .58s cubic-bezier(.65, 0, .35, 1) var(--d, 0ms); }
.cd-sec.is-in .cd-w > span, .cd-sec.is-in .cd-w::after { transform: translateY(-100%); }
@media (max-width: 991px) { .cd-sec { margin: 64px 0 44px; padding: 32px 0 0; } .cd-sec::before { left: 16px; right: 16px; } }
@media (prefers-reduced-motion: reduce) { .cd-sec::before { transform: none; transition: none; } .cd-w > span { color: #fff; transition: none; } .cd-w::after { display: none; } }

/* case pages, phones: breathing room between sub-case blocks; credits fold under "Credits +" */
@media (max-width: 767px) {
  body .section-54 { margin-top: 48px; }
  body .section-54 .heading-body-14 { margin-top: 56px; }
  .cr-block.has-big .cr-side { margin-bottom: 20px; }
  .cr-block .cr-title { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 14px 0; cursor: pointer; color: #fff; border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; }
  .cr-block .cr-title::after { content: "+"; font-size: 24px; line-height: 1; font-weight: 400; color: #8d8d8d; transition: transform .3s; }
  .cr-block.is-open .cr-title::after { transform: rotate(45deg); }
  .cr-block:not(.is-open) > :not(.cr-title) { display: none; }
  .cr-block.is-open > .cr-title { margin-bottom: 20px; }
}


/* tablet (768-1023px): mega-case row scrolls sideways with ~2.3 cards, caption stacks */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body.body-5 .mega-cases-mask { overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none; }
  body.body-5 .mega-cases-mask::-webkit-scrollbar { display: none; }
  body.body-5 .mega-cases-item { flex: 0 0 42%; scroll-snap-align: start; }
  body.body-5 .div-block-937 { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0 0; }
  body.body-5 .heading-357, body.body-5 .heading-356 { text-align: left; white-space: normal; width: 100%; margin: 0; }
  body.body-5 .heading-356 { color: #8a8a8a; }
}

/* homepage hero symbol: never wider than the screen share it has on tablets/small laptops */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  body.body-3 .section-94 { overflow-x: clip; }
  body.body-3 .div-block-212 { width: 52vw; }
}

/* footer strip: gaps shrink so the three items fit on tablets / small laptops */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .contact-footer { column-gap: 40px; flex-wrap: wrap; }
  .contact-footer-left { flex: 0 1 260px; }
}

/* contacts block on small laptops / tablet landscape (901-1279px): tighter gaps so rows fit */
@media screen and (min-width: 901px) and (max-width: 1279px) {
  .card-contact { column-gap: 48px; }
  .contact-left { flex: 0 1 300px; min-width: 220px; }
  .contact-row-3col { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
}

/* tablet (768-1023px) uses the mobile header + full-screen menu */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .menu-2-copy, .menu-2-copy-copy {
    top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; height: 56px;
    padding: 0 20px; border-radius: 14px; box-sizing: border-box;
    background: linear-gradient(135deg, rgba(60, 56, 54, .72), rgba(28, 24, 24, .78)) !important;
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  }
  .menu-2-copy .div-block-198, .menu-2-copy-copy .div-block-198 { height: 56px; }
  .div-block-198 > a:first-child { height: auto; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
  .div-block-198 > a:nth-child(2) {
    position: static; right: auto; height: 44px; width: 44px; padding: 0; margin-right: -10px;
    justify-content: center; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .div-block-198 > a:nth-child(2)::after,
  html.mm-open .div-block-198 > a:nth-child(2)::after { letter-spacing: 0; }
  .div-block-198 > a:nth-child(2)::after {
    content: ""; display: block; width: 18px; height: 18px;
    background:
      linear-gradient(#fff, #fff) 0 0 / 8px 8px no-repeat,
      linear-gradient(#fff, #fff) 100% 0 / 8px 8px no-repeat,
      linear-gradient(#fff, #fff) 0 100% / 8px 8px no-repeat,
      linear-gradient(#fff, #fff) 100% 100% / 8px 8px no-repeat;
  }
  html.mm-open .div-block-198 > a:nth-child(2)::after {
    content: "\2715"; width: auto; height: auto; background: none; color: #fff; font-size: 20px; line-height: 1;
  }
  html .city-clock-trigger { display: none !important; }
  .div-block-197 { padding: 28px 12px 96px; }
  /* bar back on top; smaller dots */
  .menu-2-copy, .menu-2-copy-copy { top: 12px; bottom: auto; }
  .div-block-198 > a:nth-child(2)::after {
    width: 14px; height: 14px;
    background:
      linear-gradient(#fff, #fff) 0 0 / 5px 5px no-repeat,
      linear-gradient(#fff, #fff) 100% 0 / 5px 5px no-repeat,
      linear-gradient(#fff, #fff) 0 100% / 5px 5px no-repeat,
      linear-gradient(#fff, #fff) 100% 100% / 5px 5px no-repeat;
  }
  html.mm-open .div-block-198 > a:nth-child(2)::after { width: auto; height: auto; background: none; font-size: 18px; }
  .div-block-197 { padding: 92px 12px 32px; }
}

/* about: team photos three per row on tablets / small laptops (5 columns made names collide) */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  body.body-7 section.team .container-2 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* homepage: "Усі сервіси" button under the Services heading */
.svc-all-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 12px 18px;
  border-radius: 8px; background: #e6e6e6; color: #0a0a0a; text-decoration: none;
  font-family: Taktikasans, sans-serif; font-size: 14px; line-height: 1; transition: background .2s ease, gap .2s ease;
}
.svc-all-btn:hover { background: #d4d4d4; gap: 12px; }

/* homepage: client filter chips */
.cl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.cl-chip {
  font-family: Taktikasans, sans-serif; font-size: 14px; line-height: 1; padding: 11px 18px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.cl-chip:hover { background: rgba(255, 255, 255, .2); }
.cl-chip.is-active { background: #fff; color: #0a0a0a; }
.clients .div-block-48[hidden] { display: none !important; }
@media screen and (max-width: 767px) { .svc-all-btn { margin-top: 16px; } .cl-filter { gap: 6px; } .cl-chip { padding: 10px 14px; } }

/* long contact labels wrap inside their grid column instead of running into the name */
.contact-row-3col .contact-row-label { width: auto; max-width: 100%; flex: none; }
.svc-all-btn { align-self: flex-start; width: fit-content; }
.svc-head { display: flex; flex-direction: column; align-items: flex-start; }

/* homepage clients: cards / list switch + list rows (dark) */
.cl-filter { align-items: center; }
.cl-toggle { display: flex; gap: 4px; margin-left: auto; padding: 4px; border-radius: 10px; background: rgba(255, 255, 255, .12); }
.cl-toggle button { display: flex; align-items: center; justify-content: center; width: 44px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #9a9a9a; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.cl-toggle button svg { width: 18px; height: 18px; }
.cl-toggle button.is-active { background: #fff; color: #0a0a0a; }
.cl-list { display: none; flex-direction: column; }
.clients[data-view="list"] .grid { display: none; }
.clients[data-view="list"] .cl-list { display: flex; }
.cl-row { display: grid; grid-template-columns: 1.1fr 1fr 1.6fr 90px; column-gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none; font-family: Taktikasans, sans-serif; }
.cl-row:first-child { border-top: 1px solid rgba(255, 255, 255, .12); }
.cl-row[hidden] { display: none; }
.cl-row-name { font-size: 18px; font-weight: 500; }
.cl-row-ind, .cl-row-desc, .cl-row-count { font-size: 15px; color: #8a8a8a; transition: color .2s ease; }
.cl-row-count { text-align: right; }
.cl-row:hover .cl-row-ind, .cl-row:hover .cl-row-desc, .cl-row:hover .cl-row-count { color: #fff; }
@media screen and (max-width: 991px) { .cl-row { grid-template-columns: 1fr 1fr 70px; } .cl-row-desc { display: none; } }
@media screen and (max-width: 767px) { .cl-row { grid-template-columns: 1fr auto; row-gap: 2px; } .cl-row-ind { grid-column: 1; grid-row: 2; font-size: 14px; } .cl-row-name { font-size: 16px; } .cl-row-count { grid-column: 2; grid-row: 1 / span 2; } }
/* button under each service row's text (mobile: after the cases strip) */
.svc-row-btn { margin-top: 16px; }
.card-services .div-block-60 > .svc-row-btn, .card-services .div-block-150 > .svc-row-btn { order: 9; }
.card-services [data-service-category] { }
.svc-all-btn { white-space: nowrap; justify-self: start; }
/* client logos: no rounded clipping on the logo image itself */
body.body-3 .div-block-818 img, body.body-3 .clients img { border-radius: 0 !important; }
/* PNG client logos keep their proportions (width/height from the shared stylesheet squeezed them) */
body.body-3 .clients img[src*=".png"] { width: auto; height: auto; max-height: 56px; max-width: 70%; object-fit: contain; }
/* client filter chips: two rows of five on wide screens */
.cl-chips { display: grid; grid-template-columns: repeat(5, max-content); gap: 8px; }
@media screen and (max-width: 767px) { .cl-chips { display: flex; flex-wrap: wrap; gap: 6px; } }
.cl-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cl-chip:focus:not(:focus-visible) { outline: none; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* phones: client chips in two compact rows, switch floats at the bottom */
@media screen and (max-width: 767px) {
  .cl-chips { gap: 6px; }
  .cl-chip { font-size: 12px; padding: 9px 12px; white-space: nowrap; }
  .cl-toggle.cl-float {
    position: fixed; left: 50%; bottom: 16px; margin: 0; z-index: 25;
    transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
    background: rgba(38, 38, 38, .82); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .4); transition: opacity .25s ease, transform .25s ease;
  }
  .cl-toggle.cl-float.cl-show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
}
@media screen and (max-width: 767px) { .cl-filter { margin-bottom: 12px; } }
/* client list rows: text always left-aligned (only the project count sits on the right) */
.cl-row, .cl-row-name, .cl-row-ind, .cl-row-desc { text-align: left; justify-self: start; }
.cl-row-count { text-align: right; justify-self: end; }
/* clients: only the first rows are shown, "show all" opens the rest */
.clients .div-block-48.cl-over, .cl-row.cl-over { display: none !important; }
.cl-more {
  display: block; margin: 16px auto 0; padding: 12px 20px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  font-family: Taktikasans, sans-serif; font-size: 14px; line-height: 1; transition: background .2s ease;
}
.cl-more:hover { background: rgba(255, 255, 255, .2); }
.cl-more[hidden] { display: none; }
@media screen and (max-width: 767px) { .cl-more { width: 100%; font-size: 13px; } }
/* homepage services: one big "all services" row after the last divider */
.svc-more-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); color: #0a0a0a; text-decoration: none;
  font-family: Taktikasans, sans-serif;
}
.svc-more-text { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -.01em; }
.svc-more-arr { font-size: clamp(24px, 2.4vw, 36px); line-height: 1; transition: transform .25s ease; }
.svc-more-row:hover .svc-more-arr { transform: translateX(8px); }
.svc-more-row:hover .svc-more-text { opacity: .6; }
@media screen and (max-width: 767px) { .svc-more-row { padding: 22px 0; } }
/* Inzhur's logo is a compact square badge: a bit larger than the wide wordmarks */
body.body-3 .clients img[src*="Inzhur"] { height: 84px; width: auto; max-width: none; }
/* "all services" row: divider above and below, smaller text and arrow */
.svc-more-row { border-top: 1px solid rgba(0, 0, 0, .12); padding: 22px 0; }
.svc-more-text { font-size: clamp(20px, 1.7vw, 26px); }
.svc-more-arr { font-size: clamp(18px, 1.4vw, 22px); }
@media screen and (max-width: 767px) { .svc-more-row { padding: 18px 0; } .svc-more-text { font-size: 20px; } .svc-more-arr { font-size: 18px; } }
/* "all services" row: same type as the service titles (Дизайн / Сайт / …) */
.svc-more-text { font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: normal; }
.svc-more-arr { font-size: 16px; }
.svc-more-row { padding: 20px 0; }
@media screen and (max-width: 767px) { .svc-more-text { font-size: 16px; } .svc-more-arr { font-size: 16px; } .svc-more-row { padding: 18px 0; } }
/* vacancy forms: sending state and error line */
.form-3.is-sending, .form-baza.is-sending { opacity: .7; pointer-events: none; }
.vac-error { margin-top: 12px; color: #ff6b6b; font-family: Taktikasans, sans-serif; font-size: 14px; line-height: 1.35; }

/* ---------- service landing pages (/services/*) ---------- */
.sp { padding: 120px 20px 80px; color: #fff; font-family: Taktikasans, sans-serif; }
.sp-crumbs { display: flex; gap: 8px; font-size: 14px; color: rgba(255,255,255,.5); margin-bottom: 28px; }
.sp-crumbs a { color: rgba(255,255,255,.7); text-decoration: none; }
.sp-crumbs a:hover { color: #fff; }
.sp-h1 { margin: 0; font-size: clamp(52px, 10vw, 156px); font-weight: 500; line-height: .95; letter-spacing: -.035em; }
.sp-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 48px; align-items: end; }
.sp-lead { margin: 0; max-width: 620px; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.3; color: rgba(255,255,255,.85); }
.sp-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.sp-btn { display: inline-flex; gap: 10px; align-items: center; padding: 16px 24px; border-radius: 999px; background: #fff; color: #0a0a0a; font-size: 16px; text-decoration: none; transition: opacity .2s; }
.sp-btn:hover { opacity: .85; }
.sp-btn-ghost { background: rgba(255,255,255,.1); color: #fff; }
.sp-sec { margin-top: 120px; }
.sp-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.sp-h2 { margin: 0 0 32px; font-size: clamp(32px, 4vw, 56px); font-weight: 500; line-height: 1; letter-spacing: -.025em; }
.sp-link { color: rgba(255,255,255,.7); text-decoration: none; font-size: 16px; white-space: nowrap; }
.sp-link:hover { color: #fff; }
.sp-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sp-card { display: flex; flex-direction: column; min-height: 300px; padding: 24px; border-radius: 8px; background: #161616; }
.sp-num { font-size: 14px; color: rgba(255,255,255,.4); letter-spacing: .02em; }
.sp-card h3 { margin: auto 0 0; font-size: 24px; font-weight: 500; line-height: 1.05; letter-spacing: -.015em; }
.sp-card p { margin: 14px 0 0; font-size: 15px; line-height: 1.35; color: rgba(255,255,255,.6); }
.sp-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.sp-step { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.sp-step h3 { margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.sp-step p { margin: 0; font-size: 16px; line-height: 1.35; color: rgba(255,255,255,.7); }
.sp-step .sd-tags { justify-content: flex-end; }
.sp-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-case { display: flex; flex-direction: column; gap: 6px; color: #fff; text-decoration: none; }
.sp-case-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #161616; margin-bottom: 8px; }
.sp-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.sp-case:hover .sp-case-img img { transform: scale(1.03); }
.sp-case b { font-size: 22px; font-weight: 500; letter-spacing: -.015em; }
.sp-case span:last-child { font-size: 15px; line-height: 1.35; color: rgba(255,255,255,.6); }
.sp-faq { border-top: 1px solid rgba(255,255,255,.14); max-width: 960px; }
.sp-faq details { border-bottom: 1px solid rgba(255,255,255,.14); }
.sp-faq summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; position: relative; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.2; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 28px; color: rgba(255,255,255,.6); }
.sp-faq details[open] summary::after { content: "−"; }
.sp-faq details p { margin: 0 0 24px; max-width: 720px; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.7); }
.sp-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-other { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 160px; padding: 24px; border-radius: 8px; background: #161616; color: #fff; text-decoration: none; transition: background .2s; }
.sp-other:hover { background: #222; }
.sp-other b { font-size: 24px; font-weight: 500; letter-spacing: -.015em; }
.sp-other span { font-size: 15px; line-height: 1.35; color: rgba(255,255,255,.6); max-width: 300px; }
.sp-other i { margin-top: auto; font-style: normal; font-size: 22px; }
@media (max-width: 1023px) {
  .sp-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-step { grid-template-columns: 48px minmax(0, 1fr); }
  .sp-step p, .sp-step .sd-tags { grid-column: 2; justify-content: flex-start; }
  .sp-cases, .sp-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sp { padding: 96px 16px 56px; }
  .sp-hero-row { grid-template-columns: 1fr; margin-top: 28px; }
  .sp-cta { justify-content: flex-start; }
  .sp-sec { margin-top: 72px; }
  .sp-grid4, .sp-cases, .sp-others { grid-template-columns: 1fr; }
  .sp-card { min-height: 0; gap: 40px; }
  .sp-card h3 { margin-top: 0; }
}

/* service cards that lead to a dedicated page: whole card is the link */
.tk-card { position: relative; }
.tk-card-link { color: inherit; text-decoration: none; }
.tk-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tk-card-link::before { content: "→"; position: absolute; bottom: 22px; right: 24px; font-size: 22px; color: #fff; opacity: 1; transition: transform .2s; }
.tk-card:has(.tk-card-link):hover { background: #1f1f1f; }
.tk-card:has(.tk-card-link):hover .tk-card-link::before { opacity: 1; transform: translateX(3px); }

/* service cards: tag area is always two rows tall so tags line up across cards */
body:has(.svc-hero) .tk-card .sd-tags { min-height: 62px; align-content: flex-start; }
.sp-step .sd-tags { gap: 6px; }
.sp-step .sd-tag { font-size: 13px; padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,.12); }
/* service pages: calmer hero */
.sp-h1 { font-size: clamp(40px, 6vw, 88px); line-height: 1; letter-spacing: -.03em; }
.sp-hero-row { grid-template-columns: minmax(0, 1fr) auto; margin-top: 32px; }
.sp-lead { max-width: 880px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.35; }
.sp-cta { flex-wrap: nowrap; }
.sp-btn { padding: 14px 22px; font-size: 15px; white-space: nowrap; }
@media (max-width: 767px) { .sp-hero-row { grid-template-columns: 1fr; } .sp-cta { flex-wrap: wrap; } }
.sp-h2 { font-size: clamp(26px, 3vw, 42px); margin-bottom: 28px; }
.sp-step .sd-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sp-tag-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
@media (max-width: 1023px) { .sp-step .sd-tags { align-items: flex-start; } .sp-tag-row { justify-content: flex-start; } }
.sp-step h3 { font-size: 28px; line-height: 1.1; letter-spacing: 0; }
@media (max-width: 767px) { .sp-step h3 { font-size: 22px; } }
.sp-step h3 { font-size: 22px; }
.sp-step p { font-size: 14px; line-height: 1.4; }
@media (max-width: 767px) { .sp-step h3 { font-size: 20px; } }
.sp-lead { max-width: 560px; }
/* FAQ: compact, collapsed by default */
.sp-faq-sec { margin-top: 80px; }
.sp-faq-sec .sp-h2 { font-size: clamp(20px, 2vw, 26px); margin-bottom: 16px; }
.sp-faq summary { font-size: clamp(16px, 1.3vw, 18px); padding: 18px 40px 18px 0; }
.sp-faq details p { font-size: 14px; }
/* service pages: hero fills ~80% of the screen */
.sp-hero { display: flex; flex-direction: column; min-height: calc(80vh - 120px); min-height: calc(80svh - 120px); }
.sp-hero .sp-h1 { margin-top: auto; }
.sp-hero .sp-hero-row { margin-top: 32px; }
@media (max-width: 767px) { .sp-hero { min-height: calc(80svh - 96px); } }
/* hero: text and buttons stacked in the left column, right side left free for media */
.sp-hero .sp-hero-row { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.sp-hero .sp-cta { justify-content: flex-start; }

/* cases grid (desktop/tablet): descriptions share one left edge on the right half of the card, text left-aligned */
@media screen and (min-width: 768px) {
  .cases-tabs .text-case { align-items: flex-start; height: auto; gap: 16px; }
  .cases-tabs .text-case .heading-15 { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: left; }
  .cases-tabs .text-case .text-block-6 { flex: 0 0 50%; max-width: 50%; width: 50%; justify-content: flex-start; text-align: left; white-space: normal; overflow: visible; text-overflow: clip; }
}
.sp-cases { column-gap: 32px; row-gap: 56px; }
@media (max-width: 767px) { .sp-cases { row-gap: 40px; } }

/* mobile talent-base / vacancy drawer: visible fields, black submit (the generic ".form-baza input" rule was also painting the submit button grey) */
@media screen and (max-width: 767px) {
  .vac-drawer:not(.team-drawer) .form-baza input[type="text"], .vac-drawer:not(.team-drawer) .form-baza input[type="email"], .vac-drawer:not(.team-drawer) .form-baza textarea,
  .vac-drawer:not(.team-drawer) input.text-field-cf2, .vac-drawer:not(.team-drawer) textarea { background: #efefef !important; border: 1px solid #dcdcdc !important; color: #0a0a0a !important; }
  .vac-drawer:not(.team-drawer) .form-baza input[type="submit"], .vac-drawer:not(.team-drawer) input[type="submit"] { background: #0a0a0a !important; color: #fff !important; border: 0 !important; }
  .vac-drawer:not(.team-drawer) .form-baza input[type="checkbox"] { background: transparent !important; }
}

/* brand-strategy hero: knight pieces cross-fading on the right */
.sp-hero { position: relative; }
.sp-hero > * { position: relative; z-index: 1; }
.sp-hero > .sp-hero-media { position: absolute; z-index: 0; right: 0; top: 0; bottom: 0; aspect-ratio: 1 / 1; max-width: 62%; pointer-events: none; }
.sp-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; animation: sp-knight 12s linear infinite; animation-delay: calc(var(--i) * 2.4s); }
.sp-hero-media img:first-child { opacity: 1; }
@keyframes sp-knight { 0% { opacity: 0; } 8% { opacity: 1; } 20% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sp-hero-media img { animation: none; opacity: 0; } .sp-hero-media img:first-child { opacity: 1; } }
@media (max-width: 767px) { .sp-hero > .sp-hero-media { position: relative; z-index: 0; max-width: 100%; width: 100%; height: auto; margin-top: 24px; } }
.sp-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
/* brand-strategy hero: text block and knight video share one row, vertically centred, video larger */
.sp-hero-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; margin-top: auto; }
.sp-hero-main .sp-hero-text .sp-h1 { margin-top: 0; }
.sp-hero > .sp-hero-main { position: relative; z-index: 1; }
.sp-hero-main > .sp-hero-media { position: relative; inset: auto; z-index: 0; right: auto; top: auto; bottom: auto; max-width: 780px; width: 100%; justify-self: end; aspect-ratio: 1 / 1; }
@media (max-width: 991px) { .sp-hero-main { grid-template-columns: 1fr; } .sp-hero-main > .sp-hero-media { justify-self: center; max-width: 560px; margin-top: 8px; } }
.sp-hero-main > .sp-hero-media { width: min(100%, 540px, 62vh); max-width: none; justify-self: center; }
@media (min-width: 992px) { .sp-hero-main > .sp-hero-media { margin-right: 6%; justify-self: end; } }
.sp-lead { font-size: 16px; line-height: 1.35; max-width: 31em; color: #e6e6e6; }

/* Viber card (case-card-stack) uses .case-card-caption instead of .text-case: same layout as the other cards */
@media screen and (min-width: 768px) {
  .cases-tabs .case-card-caption { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 8px 14px 0; margin: 0; position: static; height: auto; }
  .cases-tabs .case-card-caption .heading-15 { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: left; }
  .cases-tabs .case-card-caption .text-block-6 { flex: 0 0 50%; max-width: 50%; width: 50%; justify-content: flex-start; text-align: left; white-space: normal; overflow: visible; text-overflow: clip; }
}
.sp-case, .sp-case b, .sp-case > span { text-align: left; }
.sp-case { align-items: flex-start; }
.sp-case-img { align-self: stretch; }

/* city panel: when the photo slideshow is shown, no text over the photos */
.city-panel-hello.has-story .city-panel-hello-label,
.city-panel-hello.has-story .city-panel-hello-email { display: none; }
.city-panel-hello.has-story .city-panel-hello-story-scrim { background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%); }

/* clients: second row of sub-filters under "Ритейл" */
.cl-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cl-sub[hidden] { display: none; }
.cl-chip.cl-chip-sub { font-size: 13px; padding: 6px 12px; opacity: .85; }
.cl-chip.cl-chip-sub.is-active { opacity: 1; }
@media (max-width: 767px) { .cl-chip.cl-chip-sub { font-size: 12px; padding: 5px 10px; } }

/* clients filters: two rows of chips on desktop, switch stays beside them, sub-filters on their own line below */
@media screen and (min-width: 768px) {
  .cl-filter { align-items: flex-start; }
  .cl-chips { order: 1; }
  .cl-toggle { order: 2; align-self: flex-start; }
  .cl-sub { order: 3; flex: 0 0 100%; margin-top: 0; }
}
@media screen and (min-width: 1100px) { .cl-chips { max-width: 70%; } }
.cl-sub { margin-top: 12px !important; }
@media screen and (max-width: 767px) { .cl-sub { margin-top: 10px !important; } }

/* text pages (privacy policy) */
.sp-doc { max-width: 880px; margin: 0 auto; padding-bottom: 96px; }
.sp-doc-h1 { font-size: clamp(34px, 5vw, 64px); }
.sp-doc-date { margin: 16px 0 0; color: rgba(255,255,255,.5); font-size: 14px; }
.sp-doc-body { margin-top: 48px; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82); }
.sp-doc-body h2 { margin: 40px 0 12px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; letter-spacing: -.01em; color: #fff; }
.sp-doc-body p { margin: 0 0 14px; }
.sp-doc-body ul { margin: 0 0 14px; padding-left: 22px; }
.sp-doc-body li { margin: 0 0 8px; }
.sp-doc-body a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sp-doc-body b { color: #fff; font-weight: 500; }
@media (max-width: 767px) { .sp-doc { padding-bottom: 56px; } .sp-doc-body { font-size: 15px; margin-top: 32px; } }