/* Доповнення до дизайну (не з мокапу): skip-link, collapse-лого, a11y. */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

.reveal.rl[data-revealed] {
  transform: none !important;
}

.gm-hero-h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  main,
  section,
  footer {
    width: 100%;
    max-width: 100vw;
  }

  main {
    overflow-x: clip;
  }

  main section > div,
  footer > div,
  .gm-hero-grid,
  .gm-cta-grid {
    max-width: 100% !important;
  }

  .gm-hero-grid,
  .gm-cta-grid,
  .gm-filterbar-inner,
  section[data-screen-label="Hero"],
  section[data-screen-label="Trusted by brands"] > div,
  section[data-screen-label="What we do"] > div,
  section[data-screen-label="Featured cases"] > div,
  section[data-screen-label="About"] > div,
  section[data-screen-label="Process"] > div,
  section[data-screen-label="Testimonials"] > div,
  section[data-screen-label="Compare services"] > div,
  section[data-screen-label="Combinations"] > div,
  section[data-screen-label="Featured case"] > div,
  section[data-screen-label="FAQ"] > div,
  section[data-screen-label="Spotlight"] > div,
  section[data-screen-label="CTA"] > div,
  section[data-screen-label="Contact hero"] > div,
  section[data-screen-label="Contact form"] > div,
  section[data-screen-label="Channels"] > div,
  section[data-screen-label="Services hero"] > div,
  section[data-screen-label="Service hero"] > div,
  section[data-screen-label="Problem"] > div,
  section[data-screen-label="Why Grandma"] > div,
  section[data-screen-label="Process overview"] > div,
  section[data-screen-label="Case hero"] > div,
  section[data-screen-label="Case challenge"] > div,
  section[data-screen-label="Our solution"] > div,
  section[data-screen-label="Before vs after"] > div,
  section[data-screen-label="Client feedback"] > div {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  section[data-screen-label="Hero"] {
    overflow: hidden;
  }

  section[data-screen-label="Hero"] > div:first-child,
  .gm-hero-art,
  .gm-case-hero-art,
  .gm-cta-art {
    max-width: 100% !important;
    overflow: hidden;
  }

  section[data-screen-label="Hero"] > div:first-child {
    height: min(92vw, 360px) !important;
  }

  section[data-screen-label="Hero"] > div:last-child {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  section[data-screen-label="Hero"] h1,
  section[data-screen-label="Hero"] .gm-hero-title {
    font-size: clamp(58px, 18vw, 76px) !important;
    overflow-wrap: anywhere;
  }

  section[data-screen-label="Hero"] [style*="margin-top:96px"] {
    margin-top: 42px !important;
  }

  section[data-screen-label="Trusted by brands"] > div {
    height: auto !important;
    min-height: 96px;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 18px !important;
    overflow: hidden;
  }

  section[data-screen-label="Trusted by brands"] > div > div:last-child {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 28px !important;
    padding-bottom: 8px;
  }

  section[data-screen-label="What we do"] [style*="left:1378px"],
  section[data-screen-label="What we do"] [style*="left:138px"],
  .gm-side-note {
    display: none !important;
  }

  .gm-srow {
    height: auto !important;
    min-height: 86px;
    align-items: flex-start !important;
    padding: 18px 0 !important;
    gap: 12px !important;
  }

  .gm-srow .gm-stitle {
    width: min(42vw, 160px) !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .gm-srow > span:last-child {
    max-width: none !important;
    min-width: 0;
  }

  .gm-cmp-scroll {
    width: 100%;
    max-width: calc(100vw - 48px);
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .gm-cmp-scroll > div {
    min-width: 680px !important;
  }

  .gm-fpills,
  .gm-pills {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .gm-selrow,
  .gm-sel,
  .gm-sel select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .gm-case-meta {
    width: 100%;
  }

  .gm-case-meta > div {
    min-width: 0;
  }

  .gm-hero-art > div[aria-hidden="true"],
  .gm-case-hero-art > div[aria-hidden="true"],
  .gm-cta-art > div[aria-hidden="true"],
  .gm-cta-art > div:first-child {
    max-width: 100vw !important;
  }

  .gm-bw {
    max-width: 100% !important;
  }

  .gm-gallery {
    max-width: 100% !important;
  }

  .gm-gallery > * {
    min-width: 0;
  }

  .gm-figure,
  .gm-featcase,
  .gm-case-chart,
  .gm-case-result-chart {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .gm-featcase {
    padding: 28px 20px !important;
  }

  .gm-featcase > div {
    min-width: 0;
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  svg {
    max-width: 100%;
  }

  .gm-spot-art {
    flex-direction: column !important;
  }

  .gm-approval-stamp {
    width: 178px;
    height: 178px;
    transform: rotate(-7deg);
  }

}

@media (max-width: 720px) {
  section[data-screen-label="Case hero"] .gm-hero-grid,
  section[data-screen-label="Case challenge"] > div,
  section[data-screen-label="Our solution"] > div,
  section[data-screen-label="Before vs after"] > div,
  section[data-screen-label="Client feedback"] > div,
  .gm-case-cta-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .gm-case-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 20px !important;
  }

  .gm-case-hero-art {
    min-height: 0 !important;
  }

  .gm-case-01,
  .gm-case-result-chart,
  .gm-case-cta-grid {
    grid-template-columns: 1fr !important;
  }

  .gm-case-chart,
  .gm-case-result-chart,
  .gm-case-bars {
    padding: 22px 18px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .gm-case-chart svg,
  .gm-case-result-chart svg {
    max-width: 100% !important;
    height: auto !important;
  }

  .gm-case-steps-wrap {
    overflow-x: auto !important;
    padding-bottom: 10px !important;
    -webkit-overflow-scrolling: touch;
  }

  .gm-case-steps-wrap > div[aria-hidden="true"] {
    display: none !important;
  }

  .gm-case-steps {
    grid-template-columns: repeat(5, minmax(132px, 1fr)) !important;
    min-width: 720px !important;
  }

  .gm-case-cta-grid {
    padding: 36px 24px !important;
  }

  section[data-screen-label="Our solution"] h2,
  section[data-screen-label="Before vs after"] h2,
  .gm-case-cta-grid h2 {
    font-size: clamp(38px, 14vw, 56px) !important;
    overflow-wrap: anywhere;
  }

  section[data-screen-label="Our solution"] h2 span {
    display: block !important;
  }
}

/* skip-link (борг з аудиту — на кожній сторінці) */
.gm-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #E111F8; color: #060606; padding: 10px 18px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px;
  text-decoration: none; border-radius: 0 0 6px 0;
}
.gm-skip-link:focus { left: 0; }

/* фокус-контур для клавіатури (a11y) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #E111F8; outline-offset: 2px;
}

/* ---- Лого-collapse: .grandma → .g при скролі (build-spec 3.3) ----
 * Хвіст "randma" — inline-block span'и в overflow:hidden контейнері;
 * схлопування max-width:0 + opacity:0 зі стаггером 35ms справа наліво.
 * Ширину кожної літери JS пинить у --w (gm-behaviors initHeader). */
.gm-tail { display: inline-flex; overflow: hidden; vertical-align: baseline; }
.gm-tail > span {
  display: inline-block; max-width: var(--w, 1ch); opacity: 1;
  /* Зазор між ізольованими inline-block літерами задається запасом У САМІЙ
     --w (JS, gm-behaviors measureLockupWidths) — letter-spacing НЕ працює
     тут: браузер не додає trailing letter-spacing до intrinsic-ширини
     однолітерного inline-block боксу (перевірено емпірично). */
  transition: max-width .32s cubic-bezier(.2, .8, .2, 1), opacity .26s ease;
}
.gm-lockup.is-collapsed .gm-tail > span { max-width: 0 !important; opacity: 0; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(1) { transition-delay: 0ms; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(2) { transition-delay: 35ms; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(3) { transition-delay: 70ms; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(4) { transition-delay: 105ms; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(5) { transition-delay: 140ms; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(6) { transition-delay: 175ms; }
/* підпис "MARKETING AGENCY" стискається разом з хвостом */
.gm-lockup .gm-sub {
  max-width: 220px; opacity: 1; overflow: hidden; white-space: nowrap;
  transition: max-width .32s cubic-bezier(.2, .8, .2, 1), opacity .26s ease;
}
.gm-lockup.is-collapsed .gm-sub { max-width: 0; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .gm-tail > span, .gm-lockup .gm-sub { transition: none; }
}

/* ---- Lang-switcher (статичний, замість shadow-DOM веб-компонента) ---- */
/* desktop: dropdown через <details> */
.gm-lang-dd { display: inline-block; position: relative; }
@media (max-width: 1024px) { .gm-lang-dd { display: none; } }
.gm-lang-dd > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  height: 50px; padding: 0 6px 0 12px; color: #E111F8; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .06em;
}
.gm-lang-dd > summary::-webkit-details-marker { display: none; }
.gm-lang-dd > summary .caret { font-size: 10px; color: rgba(245,245,245,.6); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.gm-lang-dd[open] > summary .caret { transform: rotate(180deg); }
.gm-lang-panel {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px;
  background: #0E0E11; border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.5); padding: 6px; z-index: 120;
}
.gm-lang-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px;
  background: transparent; border: none; border-radius: 6px; color: #F5F5F5;
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 14px; text-align: left;
  cursor: pointer; transition: background .18s, color .18s;
}
.gm-lang-item .code { font-weight: 600; letter-spacing: .06em; min-width: 26px; }
.gm-lang-item .name { font-size: 12.5px; color: rgba(245,245,245,.5); }
.gm-lang-item:hover { background: rgba(255,255,255,.05); color: #E111F8; }
.gm-lang-item[aria-current="true"] { color: #E111F8; }
.gm-lang-item[aria-current="true"] .name { color: rgba(225,17,248,.7); }
.gm-lang-item .check { margin-left: auto; color: #E111F8; opacity: 0; font-size: 13px; }
.gm-lang-item[aria-current="true"] .check { opacity: 1; }

/* mobile: segmented */
.gm-lang-seg { display: none; }
@media (max-width: 1024px) {
  .gm-lang-seg {
    display: flex; flex-direction: column; gap: 10px; padding: 2px 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 18px; width: 100%;
  }
}
.gm-lang-seg .lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; color: rgba(245,245,245,.4); }
.gm-lang-seg .row { display: flex; gap: 8px; }
.gm-lang-seg .seg {
  min-width: 56px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); background: transparent; color: #F5F5F5;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .06em;
  cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.gm-lang-seg .seg:hover { border-color: #E111F8; color: #E111F8; }
.gm-lang-seg .seg[aria-current="true"] { border-color: #E111F8; color: #E111F8; background: rgba(225,17,248,.1); }

/* Мобільний фікс: гігантський футер-watermark "GRANDMA" на вузьких екранах
   налазив на соцхкнопки/колонки (декоративний aria-hidden) — ховаємо. */
@media (max-width: 900px) {
  .gm-footer-watermark {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* ---- Why Us: responsive для нових сіток (6-крок процес, галузі, метрики) ---- */
@media (max-width: 1080px) {
  .gm-why-steps { grid-template-columns: repeat(3, 1fr) !important; gap: 34px 22px !important; }
  .gm-why-steps-line { display: none !important; }
  .gm-why-ind { grid-template-columns: repeat(2, 1fr) !important; }
  .gm-why-metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 30px 0 !important; }
}
@media (max-width: 900px) {
  .gm-why-hero { grid-template-columns: 1fr !important; }
  .gm-why-hero-art { order: -1; min-height: 420px !important; }
  .gm-why-ind-grid { grid-template-columns: 1fr !important; }
  .gm-talk-grid { grid-template-columns: 1fr !important; text-align: center; }
  .gm-talk-btns { flex-direction: column !important; align-items: stretch !important; }
  .gm-talk-btns a { justify-content: flex-start !important; }
}
@media (max-width: 640px) {
  .gm-why-points { grid-template-columns: 1fr !important; }
  .gm-why-steps { grid-template-columns: repeat(2, 1fr) !important; }
  .gm-why-ind { grid-template-columns: 1fr !important; }
  .gm-why-metric { padding: 0 16px !important; }
}

/* ---- Фінальний блок каналів (Telegram/WhatsApp/Email) — services + why-us ---- */
@media (min-width: 1025px) {
  .gm-talk-btns > a,
  .gm-cta-btns > a { min-width: 0; white-space: nowrap; }
}

/* ---- Service hero CTA: довгі локалізовані labels не мають ламатись на 2 рядки ---- */
.gm-hero-btns {
  flex-wrap: wrap;
}
.gm-hero-btns > a {
  justify-content: center;
  white-space: nowrap;
  text-align: center;
}
@media (min-width: 960px) {
  .gm-hero-btns > a {
    min-width: 192px;
  }
  .gm-hero-btns > a.gm-secondary {
    min-width: 322px;
  }
}
@media (max-width: 520px) {
  .gm-hero-btns {
    align-items: stretch !important;
  }
  .gm-hero-btns > a {
    width: 100%;
    min-width: 0;
    padding-left: 18px !important;
    padding-right: 18px !important;
    white-space: normal;
  }
}

/* ---- Services hero: дві колонки без окремого зображення ---- */
@media (max-width: 1024px) {
  [data-screen-label="Services hero"] .gm-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .gm-hero-side {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px !important;
  }
}
@media (max-width: 700px) {
  .gm-services-note {
    display: none;
  }
  .gm-hero-side {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Cases hero: 4 стати завжди в один ряд на десктопі, 2×2 нижче 900px ---- */
.gm-cases-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: center; }
@media (max-width: 900px) {
  .gm-cases-stats { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
}
@media (max-width: 460px) {
  .gm-cases-stats { grid-template-columns: 1fr; }
}

/* ============================================================================
   Кириличний fallback для дисплейних шрифтів (гібридна UA-локалізація).
   Bebas Neue та Outfit — латиниця-лише (див. fonts.css). Замість правок сотень
   inline `font-family` підставляємо кириличні гліфи ПІД ТИМ САМИМ імʼям родини,
   обмежені кириличним unicode-range — браузер сам обирає цю грань для кирилиці.
   Латиниця (EN/DE) далі рендериться Bebas/Outfit; кирилиця (UA) — з fallback.
     Bebas Neue (condensed display) → Oswald (condensed, має кирилицю)
     Outfit    (geometric label)    → Montserrat (geometric, кирилиця вже є)
   Німецькі спецсимволи (ä ö ü ß) — у latin-ext Bebas/Outfit, їх не чіпаємо.
   ========================================================================== */
@font-face {
  font-family: 'Bebas Neue';
  src: url('/static/fonts/oswald-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/static/fonts/montserrat-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/static/fonts/montserrat-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/static/fonts/montserrat-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/static/fonts/montserrat-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 700 800;
  font-display: swap;
}
/* Contact: рукописний конектор нотатка→кнопка «Надіслати». На десктопі
   показуємо довгий конектор (тягнеться до кнопки), на вужчому екрані гріда
   стекається — там лишається мала стрілка біля нотатки. */
.gm-note-arrow-lg { display: none; }
@media (min-width: 1024px) {
  .gm-note-arrow-sm { display: none; }
  .gm-note-arrow-lg { display: block; }
}

/* Permanent Marker (рукописні нотатки) → Caveat: єдиний Google-хендрайт із
   кирилицею, близький за настроєм. Кирилична UA-нотатка більше не падає на
   системний serif. Латиниця (EN-нотатки на кшталт «Hold my coffee») — далі
   Permanent Marker. */
@font-face {
  font-family: 'Permanent Marker';
  src: url('/static/fonts/caveat-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400 700;
  font-display: swap;
}

/* ---- Mobile QA hardening (real iPhone pass, 2026-07-09) ---- */
@media (max-width: 720px) {
  .gm-header {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .gm-burger-cb:checked ~ .gm-nav {
    top: 72px !important;
    bottom: 0 !important;
    height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: #090909 !important;
    padding: 28px 32px max(40px, env(safe-area-inset-bottom)) !important;
    border-bottom: 0 !important;
  }

  .gm-burger-cb:checked ~ .gm-nav::after {
    content: none !important;
  }

  [data-screen-label="Hero"] .gm-hero-title,
  .gm-hero-h1,
  [data-screen-label$="hero"] h1,
  [data-screen-label="Services hero"] h1,
  [data-screen-label="Cases hero"] h1,
  [data-screen-label="Blog hero"] h1,
  [data-screen-label="Contact hero"] h1,
  [data-screen-label="About hero"] h1,
  [data-screen-label="Why us hero"] h1 {
    max-width: 100% !important;
    font-size: clamp(48px, 14.5vw, 64px) !important;
    line-height: .9 !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  html[lang="uk"] [data-screen-label="Hero"] .gm-hero-title,
  html[lang="uk"] .gm-hero-h1,
  html[lang="uk"] [data-screen-label$="hero"] h1,
  html[lang="uk"] [data-screen-label="Services hero"] h1,
  html[lang="uk"] [data-screen-label="Contact hero"] h1,
  html[lang="uk"] [data-screen-label="About hero"] h1,
  html[lang="uk"] [data-screen-label="Why us hero"] h1 {
    font-size: clamp(44px, 12.8vw, 58px) !important;
    line-height: .94 !important;
  }

  .gm-hero-h1 span,
  [data-screen-label="Hero"] h1 span,
  [data-screen-label$="hero"] h1 span,
  [data-screen-label="Services hero"] h1 span,
  [data-screen-label="Contact hero"] h1 span,
  [data-screen-label="About hero"] h1 span,
  [data-screen-label="Why us hero"] h1 span,
  section h2 span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .reveal.rl {
    transform: translateY(22px) !important;
  }

  [data-screen-label="What we do"] {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  [data-screen-label="About"] {
    padding-top: 78px !important;
    padding-bottom: 84px !important;
  }

  [data-screen-label="About"] > div {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    align-items: start !important;
  }

  [data-screen-label="About"] > div > div:first-child {
    order: 2;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
  }

  [data-screen-label="About"] > div > div:last-child {
    order: 1;
    min-width: 0;
  }

  [data-screen-label="About"] > div > div:first-child img {
    width: min(100%, 360px) !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  [data-screen-label="About"] > div > div:first-child > div:first-child {
    width: min(118vw, 460px) !important;
    height: min(118vw, 460px) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  [data-screen-label="About"] > div > div:first-child [style*="Less Ego"] {
    display: none !important;
  }

  [data-screen-label="About"] h2 {
    font-size: clamp(38px, 11.5vw, 50px) !important;
    line-height: .98 !important;
  }

  [data-screen-label="About"] p,
  [data-screen-label="About"] [style*="max-width:520px"] {
    max-width: 100% !important;
  }

  [data-screen-label="About"] [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 32px !important;
  }

  [data-screen-label="About"] .gm-value {
    min-width: 0;
  }

  [data-screen-label="FAQ"] {
    padding-top: 78px !important;
    padding-bottom: 78px !important;
  }

  [data-screen-label="FAQ"] > div,
  [data-screen-label="FAQ"] .gm-faq-grid,
  [data-screen-label="FAQ"] .gm-why-ind-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    align-items: start !important;
  }

  [data-screen-label="FAQ"] h2 {
    font-size: clamp(38px, 11.5vw, 50px) !important;
    line-height: .98 !important;
    max-width: 100% !important;
  }

  [data-screen-label="FAQ"] h2 span {
    display: block !important;
    overflow-wrap: anywhere;
  }

  [data-screen-label="FAQ"] p {
    max-width: 100% !important;
  }

  [data-screen-label="What we do"] h2,
  [data-screen-label="Where to start"] h2,
  [data-screen-label="Problem"] h2,
  [data-screen-label="Case challenge"] h2,
  [data-screen-label="Our solution"] h2,
  [data-screen-label="Before vs after"] h2 {
    font-size: clamp(42px, 13.5vw, 58px) !important;
    line-height: .94 !important;
  }

  .gm-srow {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px 14px !important;
    padding: 20px 0 !important;
  }

  .gm-srow > span:first-child {
    width: auto !important;
  }

  .gm-srow .gm-stitle {
    width: auto !important;
    min-width: 0 !important;
  }

  .gm-srow > span:last-child {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .gm-hero-grid,
  .gm-story-grid,
  .gm-team-grid,
  .gm-talk-grid,
  .gm-contact-grid,
  .gm-where-grid,
  .gm-cta-grid,
  [data-screen-label="Final CTA"] > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  [data-screen-label="Final CTA"] {
    padding: 80px 0 !important;
  }

  [data-screen-label="Final CTA"] > div[style*="grid-template-columns"] {
    align-items: start !important;
  }

  [data-screen-label="Final CTA"] > div[style*="grid-template-columns"] > div,
  [data-screen-label="CTA"] .gm-cta-grid > div,
  .gm-talk-grid > div,
  .gm-contact-grid > div {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  [data-screen-label="Final CTA"] p,
  [data-screen-label="CTA"] p,
  [data-screen-label="Contact hero"] p,
  [data-screen-label="About hero"] p {
    max-width: 100% !important;
  }

  .gm-cta-btns,
  .gm-talk-btns {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .gm-chan,
  .gm-msgcard,
  .gm-primary,
  .gm-outline {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .gm-chan span,
  .gm-msgcard span {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  .gm-hero-art,
  .gm-story-art,
  .gm-team-art {
    min-height: 0 !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .gm-hero-art img {
    max-height: min(92vw, 430px);
    object-fit: contain !important;
  }

  [data-screen-label="About hero"] .gm-hero-art,
  [data-screen-label="Contact hero"] .gm-hero-art {
    order: 2 !important;
  }

  .gm-method {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .gm-method > div {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  .gm-gallery {
    max-width: 100% !important;
  }

  .gm-trust,
  .gm-hero-btns,
  [data-screen-label="Services hero"] [style*="margin-top:38px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  section[data-screen-label="What we do"] [style*="left:1378px"],
  section[data-screen-label="What we do"] [style*="left:138px"],
  .gm-side-note {
    display: none !important;
  }

  section[data-screen-label="Trusted by brands"] > div {
    height: auto !important;
    min-height: 104px;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 18px !important;
    overflow: hidden;
  }

  section[data-screen-label="Trusted by brands"] > div > div:last-child {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 36px !important;
    padding-bottom: 8px;
  }
}

[data-gm-cookie-settings][hidden] {
  display: none !important;
}

@media (max-width: 420px) {
  html[lang="uk"] [data-screen-label="Hero"] .gm-hero-title,
  html[lang="uk"] .gm-hero-h1,
  html[lang="uk"] [data-screen-label$="hero"] h1,
  html[lang="uk"] [data-screen-label="Services hero"] h1,
  html[lang="uk"] [data-screen-label="Contact hero"] h1,
  html[lang="uk"] [data-screen-label="About hero"] h1,
  html[lang="uk"] [data-screen-label="Why us hero"] h1 {
    font-size: clamp(40px, 11.8vw, 52px) !important;
  }

  [data-screen-label="Hero"] .gm-hero-title {
    font-size: clamp(54px, 16vw, 68px) !important;
  }
}