/* Доповнення до дизайну (не з мокапу): 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;
}

/* Case/service FAQ: довші відповіді не обрізати max-height:260–340px з site.css */
.gm-faq[data-faq-open] .gm-faq-a {
  max-height: 1200px;
}

/* Service SEO longform (markdown body) */
.gm-seo-longform h2 {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #F5F5F5;
  margin: 36px 0 14px;
  line-height: 1.25;
}
.gm-seo-longform h3 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #F5F5F5;
  margin: 28px 0 10px;
  line-height: 1.3;
}
.gm-seo-longform p { margin: 0 0 14px; }
.gm-seo-longform ul,
.gm-seo-longform ol {
  margin: 0 0 16px;
  padding-left: 1.25em;
}
.gm-seo-longform li { margin: 0 0 8px; }
.gm-seo-longform a {
  color: #E91E96;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gm-seo-longform a:hover { color: #FF4DE8; }
.gm-seo-longform strong { color: #F5F5F5; font-weight: 600; }

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

/* Client proof moves as one calm editorial strip, not a dashboard grid. */
.gm-trusted-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.gm-trusted-track {
  display: flex;
  width: max-content;
  animation: gm-trusted-loop 72s linear infinite;
  will-change: transform;
}

.gm-trusted-marquee:hover .gm-trusted-track,
.gm-trusted-marquee:focus-within .gm-trusted-track { animation-play-state: paused; }

.gm-trusted-brand {
  position: relative;
  flex: 0 0 clamp(178px, 16vw, 234px);
  min-height: 116px;
  padding: 18px 16px 17px;
  display: flex;
  flex-direction: column;
  color: #F5F5F5;
  border-right: 1px solid rgba(255,255,255,.09);
  opacity: 1;
  text-decoration: none;
  transform: none;
  filter: none;
  transition: background .22s ease, border-color .22s ease;
}

.gm-trusted-brand:hover {
  background: rgba(233,30,150,.08);
  border-color: rgba(233,30,150,.42);
  transform: none;
  filter: none;
}

.gm-trusted-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: .95;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.gm-trusted-tagline,
.gm-trusted-period {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 8.5px;
  line-height: 1.35;
  letter-spacing: .13em;
  overflow-wrap: anywhere;
}

.gm-trusted-tagline { margin-top: 9px; color: #A8A8A8; }
.gm-trusted-period {
  margin-top: auto;
  padding-top: 11px;
  color: #E91E96;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
}

@keyframes gm-trusted-loop { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .gm-trusted-marquee {
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .gm-trusted-track { animation: none; }
  .gm-trusted-copy { display: none !important; }
}

@media (max-width: 640px) {
  .gm-trusted-brand { flex-basis: 178px; min-height: 110px; padding: 16px 13px; }
  .gm-trusted-name { font-size: 18px; }
  .gm-trusted-period { font-size: 10px; }
}

/* Contact's concise two-part invitation needs room to read as two phrases on desktop. */
@media (min-width: 1025px) {
  [data-screen-label="Contact hero"] .gm-contact-hero-title {
    font-size: clamp(56px, 5.1vw, 80px) !important;
  }
}

@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="Secondary proof"] > 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;
  }

  /* .gm-side-note ховається централізовано в @media (max-width: 1279px) — див.
     блок «Бічна рукописна нотатка» вище. Селектори по [style*="left:1378px"]
     прибрано: інлайнової координати більше немає. */

  .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-pullquote {
    padding: 34px 26px !important;
  }

  .gm-cmp-scroll {
    width: 100%;
    max-width: calc(100vw - 48px);
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
  }

  .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);
  }

}

/* CTA buttons: compact type and no decorative arrow suffixes. Functional
   carousel/pagination controls keep their arrows; marketing CTAs do not. */
.gm-primary,
.gm-secondary,
.gm-cta,
.gm-spot-btn,
.gm-404-cta-button,
.gm-outline-d,
.gm-check-cta {
  font-size: 13px !important;
}

.gm-chan-label { font-size: 14px !important; }
.gm-404-action-link { font-size: 13px !important; }

.gm-svc-ico {
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), rgba(255,255,255,.02) 58%, transparent 72%);
  box-shadow: 0 0 24px rgba(255,255,255,.06), inset 0 0 18px rgba(255,255,255,.03);
}
.gm-svc-ico svg { filter: drop-shadow(0 0 5px rgba(255,255,255,.25)); }

@media (max-width: 720px) {
  .gm-msg-reasons { grid-template-columns: 1fr !important; }
}

@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="Secondary proof"] > 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-secondary-proof,
  .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-secondary-proof {
    gap: 48px !important;
  }

  .gm-case-proof-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 24px 0 !important;
  }

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

  .gm-case-steps-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    padding-bottom: 10px !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Grid items otherwise inherit the 5-card track's min-content width (756px)
     and make the entire case section wider than the phone viewport. Keep the
     carousel inside its rail; only the rail may scroll horizontally. */
  section[data-screen-label="Our solution"] > div,
  section[data-screen-label="Secondary proof"] > div,
  section[data-screen-label="Before vs after"] > div,
  section[data-screen-label="Client feedback"] > div {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

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

  /* Не форсити 5 колонок — кількість кроків різна; хвіст лінії = баг */
  .gm-case-steps {
    grid-template-columns: repeat(var(--gm-case-steps, 3), minmax(132px, 1fr)) !important;
    min-width: calc(var(--gm-case-steps, 3) * 148px) !important;
  }
  .gm-case-steps-wrap[data-steps="2"] { --gm-case-steps: 2; }
  .gm-case-steps-wrap[data-steps="3"] { --gm-case-steps: 3; }
  .gm-case-steps-wrap[data-steps="4"] { --gm-case-steps: 4; }
  .gm-case-steps-wrap[data-steps="5"] { --gm-case-steps: 5; }
  .gm-case-steps-wrap[data-steps="6"] { --gm-case-steps: 6; }

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

  section[data-screen-label="Our solution"] h2,
  section[data-screen-label="Secondary proof"] 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: #E91E96; 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 #E91E96; 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: #E91E96; 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: 6px;
  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: #E91E96; }
.gm-lang-item[aria-current="true"] { color: #E91E96; }
.gm-lang-item[aria-current="true"] .name { color: rgba(233,30,150,.7); }
.gm-lang-item .check { margin-left: auto; color: #E91E96; 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: #E91E96; color: #E91E96; }
.gm-lang-seg .seg[aria-current="true"] { border-color: #E91E96; color: #E91E96; background: rgba(233,30,150,.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;
  }

  footer .gm-social,
  footer .gm-social[aria-hidden="true"] {
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
  }
}

/* ---- Why Us: responsive для нових сіток (6-крок процес, галузі, метрики) ---- */
.gm-spotlight-card {
  --gm-spot-x: 50%;
  --gm-spot-y: 50%;
  --gm-spot-rx: 0deg;
  --gm-spot-ry: 0deg;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background .28s ease, opacity .28s ease;
}

.gm-spotlight-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(220px circle at var(--gm-spot-x) var(--gm-spot-y), rgba(233,30,150,.16), transparent 72%);
  transition: opacity .24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .gm-spotlight-card[data-revealed].is-spotlight-hovered {
    z-index: 2;
    border-color: rgba(233,30,150,.62) !important;
    background-color: rgba(233,30,150,.08) !important;
    transform: perspective(900px) translateY(-5px) rotateX(var(--gm-spot-rx)) rotateY(var(--gm-spot-ry));
  }
  .gm-spotlight-card.is-spotlight-hovered::before { opacity: 1; }
  .gm-why-ind.is-spotlight-active .gm-spotlight-card:not(.is-spotlight-hovered) { opacity: .68; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-spotlight-card, .gm-spotlight-card::before { transition: none !important; }
}

@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;
  font-display: swap;
  /* Oswald має cap-height 162 проти 140 у Bebas при 200px (виміряно в Chromium
     через canvas actualBoundingBoxAscent). Без корекції кирилиця виглядає на
     ~16% більшою за латиницю, і в змішаних заголовках ("SEO ДЛЯ ПОСЛУГ",
     "AI З МЕЖАМИ") латинське слово здається меншим. 140/162 = 0.864. */
  size-adjust: 86.4%;
}
@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;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/static/fonts/montserrat-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 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;
  font-display: swap;
}

/* Caveat (кирилична підміна Permanent Marker вище) метрично тонший і нижчий
   за той самий кегль — UA-написи читались як шепіт поряд з EN на маркері.
   html[lang="uk"] — єдина кирилична локаль сайту (de лишається на латиниці
   й справжньому Permanent Marker, її не займаємо). Один селектор по
   інлайновому font-family ловить усі написи одразу — без дублювання px у
   кожному шаблоні. zoom, не transform:scale: він не конфліктує з inline
   transform:rotate(...), який стоїть в кожного напису окремо (scale довелось
   би !important-ити разом із чужим rotate і губити нахил). Кегль піднято на
   18% — підібрано по скриншотах contact hero EN/UA (elshot.mjs, CI=1).
   zoom підтримують Chrome/Safari/Edge завжди, Firefox — з версії 126. */
html[lang="uk"] [style*="Permanent Marker"] {
  zoom: 1.18;
}

/* ---- Бічна рукописна нотатка секції «What we do» на головній ---- */

/* Горизонтальна позиція живе тут, а не в інлайні шаблону. Раніше стояв
   жорсткий left:1378px при контейнері 1320px — напис починався за 62px до
   правої межі viewport 1440, і жоден з трьох перекладів не вміщався
   (EN 203px, UA 211px, DE 255px — найдовший саме німецький, не український).
   Тепер прив'язка до ПРАВОЇ межі: відступ росте разом із гутером контейнера,
   тож на 1920 напис стоїть у полі праворуч від контенту, а на 1280–1440
   притискається до краю з гарантованим зазором 24px. Верхня межа 96px — щоб
   на дуже широких екранах він не відліпився від композиції.
   100%, а не 100vw: 100vw включає вертикальний скролбар і з'їдав би зазор.
   Не повертати фіксовані координати — на рукописному шарі це вже третій
   такий дефект (пор. прибраний «STRATEGY FIRST.», 08.08.2026). */
.gm-side-note {
  right: clamp(24px, calc((100% - 1320px) / 2 - 24px), 96px);
}

/* Нижче 1280px гутера вже нема: напис поїхав би на текст сервісних рядків
   (заміряно — на 1200px UA перекриває його на 44px, DE на 4px; на 1280px
   найтісніший зазор 36px у UA). Тому ховаємо — як і раніше, просто поріг
   тепер по реальній колізії, а не по 900px, за яким напис лишався в
   розмітці й просто висів за краєм екрана. */
@media (max-width: 1279px) {
  .gm-side-note {
    display: none !important;
  }
}

/* ВИНЯТОК: zoom масштабує не лише кегль, а ВСІ довжини всередині елемента —
   зокрема offset'и позиціонування. З попереднім left:1378px при zoom 1.18 він
   ставав 1626px, і напис виїжджав за viewport 1440, зникаючи для українських
   відвідувачів (scroll-reveal при цьому ніколи не спрацьовував, бо елемент
   поза екраном — лишався opacity:0). Виняток потрібен і після переїзду на
   right: clamp(...) — zoom так само спотворив би і відступ, і базу 1320px, з
   якої він рахується. Тому тут zoom скасовано, а кегль піднято напряму.
   Те саме правило треба застосувати до будь-якого рукописного напису,
   позиціонованого абсолютно. */
html[lang="uk"] .gm-side-note {
  zoom: 1;
  font-size: 22px !important;
}

/* На планшетній ширині About уже стає в одну колонку. Даємо нотатці
   окремий повітряний зазор після ілюстрації, щоб її нахил не торкався
   нижнього краю зображення навіть геометрично. */
@media (min-width: 721px) and (max-width: 1024px) {
  [data-screen-label="About"] .gm-about-note {
    margin-top: 24px !important;
  }
}

/* ---- 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"] .gm-about-note {
    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) {
  /* .gm-side-note — див. централізоване правило @media (max-width: 1279px). */

  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;
}

/* Cookie-банер на вузьких екранах: три кнопки по minmax(140px) не влазять
   у 390px (3×140 + gaps = 440px), тому "ACCEPT ALL" зрізало правим краєм.
   Дві колонки + accept на всю ширину — головна дія лишається найпомітнішою. */
@media (max-width: 560px) {
  .gm-cookie-actions {
    grid-template-columns: 1fr 1fr !important;
    width: 100%;
  }
  .gm-cookie-actions [data-gm-cookie-action="accept"] {
    grid-column: 1 / -1;
  }
}

@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;
  }
}

/* Case / services card metrics — never wrap "1 222" mid-number.
   F-02 fix (2026-08-08): each usage site now sizes its own column/font so a
   long value ("+373 %", "40,594") should always fit without hitting this
   limit. Kept only as a last-resort safety net — text-overflow:ellipsis
   (not the old `clip`) so if some future value still doesn't fit, it visibly
   truncates with "…" instead of silently losing a trailing digit or the "%"
   sign (which used to render "+373%" as the misleading "+3739"). */
.gm-metric-value {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Копіювання email (футер + email-картка /contact) + тост ---- */
.gm-email-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: rgba(245,245,245,.55);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.gm-email-copy svg { width: 15px; height: 15px; display: block; }
.gm-email-copy:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); }
.gm-email-copy:active { transform: scale(0.92); }
.gm-email-copy:focus-visible { outline: 2px solid rgba(233,30,150, 0.8); outline-offset: 2px; }
.gm-email-copy.is-copied { color: #34D399; border-color: rgba(52, 211, 153, 0.55); background: rgba(52, 211, 153, 0.12); }

/* Світлий варіант — email-картка на світлому тлі /contact */
.gm-email-copy-light { border-color: rgba(180, 12, 134, 0.35); background: rgba(180, 12, 134, 0.07); color: #A8156A; }
.gm-email-copy-light:hover { background: rgba(180, 12, 134, 0.14); border-color: rgba(180, 12, 134, 0.6); }
.gm-email-copy-light.is-copied { color: #0F8A5F; border-color: rgba(15, 138, 95, 0.5); background: rgba(15, 138, 95, 0.1); }

.gm-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  background: #0a0207;
  border: 1px solid rgba(233,30,150, 0.5);
  border-radius: 6px;
  color: #F5F5F5;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.gm-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.gm-toast svg { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .gm-toast { transition: opacity .12s ease; }
}

.gm-team-showcase {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(250px, .72fr);
  gap: 34px;
  align-items: center;
  width: 100%;
}

.gm-team-photos {
  display: flex;
  gap: 10px;
  min-width: 0;
  overflow: visible;
}

.gm-team-photo-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gm-team-photo-col-2 { padding-top: 58px; }
.gm-team-photo-col-3 { padding-top: 26px; }

.gm-team-photo,
.gm-team-row {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gm-team-photo {
  position: relative;
  display: block;
  flex: none;
  width: 132px;
  height: 150px;
  overflow: hidden;
  border-radius: 6px;
  background: #111;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;
}

.gm-team-photo-col-2 .gm-team-photo {
  width: 150px;
  height: 170px;
}

.gm-team-photo-col-3 .gm-team-photo {
  width: 140px;
  height: 160px;
}

.gm-team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.72) contrast(1.04);
  transition: filter .3s ease, transform .35s ease;
}

.gm-team-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.gm-team-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  width: 100%;
  color: #F5F5F5;
  background: transparent;
  transition: opacity .22s ease, transform .22s ease;
}

.gm-team-mark {
  display: block;
  width: 16px;
  height: 11px;
  margin-top: 4px;
  border-radius: 5px;
  background: rgba(245,245,245,.22);
  transition: width .25s ease, background .25s ease;
}

.gm-team-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gm-team-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: 0;
  color: rgba(245,245,245,.86);
  transition: color .22s ease;
}

.gm-team-role {
  margin-top: 7px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  color: rgba(245,245,245,.42);
}

.gm-team-person:focus-visible {
  outline: 2px solid rgba(233,30,150,.85);
  outline-offset: 4px;
}

.gm-team-showcase[data-active-member] .gm-team-person { opacity: .42; }
.gm-team-showcase[data-active-member="strategy"] [data-gm-team-member="strategy"],
.gm-team-showcase[data-active-member="paid-media"] [data-gm-team-member="paid-media"],
.gm-team-showcase[data-active-member="seo-content"] [data-gm-team-member="seo-content"],
.gm-team-showcase[data-active-member="analytics"] [data-gm-team-member="analytics"],
.gm-team-showcase[data-active-member="creative"] [data-gm-team-member="creative"],
.gm-team-showcase[data-active-member="dev-automation"] [data-gm-team-member="dev-automation"] {
  opacity: 1;
}

.gm-team-showcase[data-active-member="strategy"] [data-gm-team-member="strategy"].gm-team-photo,
.gm-team-showcase[data-active-member="paid-media"] [data-gm-team-member="paid-media"].gm-team-photo,
.gm-team-showcase[data-active-member="seo-content"] [data-gm-team-member="seo-content"].gm-team-photo,
.gm-team-showcase[data-active-member="analytics"] [data-gm-team-member="analytics"].gm-team-photo,
.gm-team-showcase[data-active-member="creative"] [data-gm-team-member="creative"].gm-team-photo,
.gm-team-showcase[data-active-member="dev-automation"] [data-gm-team-member="dev-automation"].gm-team-photo {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(233,30,150,.5), 0 18px 34px rgba(0,0,0,.32);
}

.gm-team-showcase[data-active-member="strategy"] [data-gm-team-member="strategy"] img,
.gm-team-showcase[data-active-member="paid-media"] [data-gm-team-member="paid-media"] img,
.gm-team-showcase[data-active-member="seo-content"] [data-gm-team-member="seo-content"] img,
.gm-team-showcase[data-active-member="analytics"] [data-gm-team-member="analytics"] img,
.gm-team-showcase[data-active-member="creative"] [data-gm-team-member="creative"] img,
.gm-team-showcase[data-active-member="dev-automation"] [data-gm-team-member="dev-automation"] img,
.gm-team-photo:hover img,
.gm-team-photo:focus-visible img {
  filter: grayscale(.12) brightness(.98) contrast(1.02);
  transform: scale(1.035);
}

.gm-team-showcase[data-active-member="strategy"] [data-gm-team-member="strategy"] .gm-team-mark,
.gm-team-showcase[data-active-member="paid-media"] [data-gm-team-member="paid-media"] .gm-team-mark,
.gm-team-showcase[data-active-member="seo-content"] [data-gm-team-member="seo-content"] .gm-team-mark,
.gm-team-showcase[data-active-member="analytics"] [data-gm-team-member="analytics"] .gm-team-mark,
.gm-team-showcase[data-active-member="creative"] [data-gm-team-member="creative"] .gm-team-mark,
.gm-team-showcase[data-active-member="dev-automation"] [data-gm-team-member="dev-automation"] .gm-team-mark,
.gm-team-row:hover .gm-team-mark,
.gm-team-row:focus-visible .gm-team-mark {
  width: 22px;
  background: #E91E96;
}

.gm-team-showcase[data-active-member="strategy"] [data-gm-team-member="strategy"] .gm-team-name,
.gm-team-showcase[data-active-member="paid-media"] [data-gm-team-member="paid-media"] .gm-team-name,
.gm-team-showcase[data-active-member="seo-content"] [data-gm-team-member="seo-content"] .gm-team-name,
.gm-team-showcase[data-active-member="analytics"] [data-gm-team-member="analytics"] .gm-team-name,
.gm-team-showcase[data-active-member="creative"] [data-gm-team-member="creative"] .gm-team-name,
.gm-team-showcase[data-active-member="dev-automation"] [data-gm-team-member="dev-automation"] .gm-team-name,
.gm-team-row:hover .gm-team-name,
.gm-team-row:focus-visible .gm-team-name {
  color: #F5F5F5;
}

@media (max-width: 1180px) {
  .gm-team-showcase {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .gm-team-photos {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
  }
}

@media (max-width: 720px) {
  .gm-team-showcase {
    gap: 24px;
  }

  .gm-team-photos {
    gap: 8px;
    margin-right: -48px;
    padding-right: 48px;
  }

  .gm-team-photo-col {
    gap: 8px;
  }

  .gm-team-photo-col-2 { padding-top: 46px; }
  .gm-team-photo-col-3 { padding-top: 21px; }

  .gm-team-photo,
  .gm-team-photo-col-2 .gm-team-photo,
  .gm-team-photo-col-3 .gm-team-photo {
    width: 112px;
    height: 130px;
  }

  .gm-team-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .gm-team-name {
    font-size: 17px;
  }

  .gm-team-role {
    font-size: 12px;
  }
}

/* Blog and case cards enter once, then hand transform control back to :hover.
   `both` kept the animation's final transform above the interaction state. */
.gm-card,
.gm-case {
  animation-fill-mode: backwards;
}

/* ============================================================
   Homepage light-theme pilot — header + bg drops + hero only
   ============================================================
   2026-08-21. `html[data-gm-theme="light"]` is set ONLY by the toggle script
   in templates/pages/home.html.j2 — no other template reads or writes it, so
   every rule below is inert on every page except the homepage. Everything
   here is an ADDITIVE override (!important against existing inline hex), not
   a rewrite: base.html.j2, header.html.j2 and macros.html.j2 are untouched,
   so this pilot carries zero risk to any other route.
   Paper values match the canon already live on contact/thank-you/blog
   (#F5F3EF / #14110E) and the paper-violet documented in
   docs/design/DS-SPLATTER-SPEC.md (#7B1FD1). Light splatter assets are a new
   "ink-blot" shape family (static/icons/blots-a.svg / blots-b.svg) — a
   rounded stain instead of the drip-with-bead anatomy, on purpose: the drip's
   trailing bead reads as a drop of blood, which is wrong on paper. */
:root {
  --gm-fg-rgb: 245 245 245;
  --gm-bg: #090909;
  --gm-accent: #E91E96;
  --gm-violet: #A736FF;
  --gm-note-shadow: 0 2px 10px rgba(0,0,0,.7);
}
html[data-gm-theme="light"] {
  --gm-fg-rgb: 20 17 14;
  --gm-bg: #F5F3EF;
  --gm-accent: #A8156A;
  --gm-violet: #7B1FD1;
  --gm-note-shadow: 0 2px 14px rgba(255,255,255,.6);
}

/* Almost everything on this site is inline-styled (style="color:#F5F5F5"),
   which always outranks an external stylesheet rule regardless of selector
   specificity. Every property below competes with an inline value, so
   !important is load-bearing here, not decorative — without it this whole
   block is a silent no-op. */
/* PAGE STRUCTURE IN LIGHT MODE
   `body` deliberately stays dark. The drops layer in base.html.j2 is
   position:fixed to the viewport, so it floats over whatever is scrolled
   into view; putting the paper colour on body leaked it under every section
   and produced white-on-white text, washed-out gradients (the Cases/CTA
   radials blend semi-transparent magenta against whatever sits behind them,
   and were tuned for a dark ground) and light blots over the dark footer.
   Instead each themed section paints its own full-bleed ::before.
   The ::before is needed rather than a plain `background` because these
   sections are max-width-capped and centred — a background on the element
   only fills the inner column and leaves dark bars on wide monitors.
   left:50% + 100vw + translateX(-50%) breaks out to the full viewport.
   z-index MUST be negative. At z-index:0 the pseudo-element is a positioned
   descendant, and positioned descendants paint ABOVE in-flow block content
   in the same stacking context — so the paper rectangle covered every child
   that has no position of its own. That is why the About copy and the What
   We Do heading rendered blank while the image, the handwritten note and the
   service rows (all position:relative) stayed visible. -1 puts it below
   in-flow content but still inside the section's own stacking context
   (the section sets position:relative + z-index:1), so it never reaches the
   body behind it.

   The page reads: light hero → light editorial middle → dark magenta CTA
   slab → dark footer. The closing dark block is deliberate, not an unthemed
   remainder: it is the same contrast move the dark design already makes, and
   it gives the paper page a bottom edge instead of fading out. */
html[data-gm-theme="light"] [data-screen-label="Hero"],
html[data-gm-theme="light"] [data-screen-label="Trusted by brands"],
html[data-gm-theme="light"] [data-screen-label="What we do"],
html[data-gm-theme="light"] [data-screen-label="Featured cases"],
html[data-gm-theme="light"] [data-screen-label="About"],
html[data-gm-theme="light"] [data-screen-label="Process"] { position: relative; }

html[data-gm-theme="light"] [data-screen-label="Hero"]::before,
html[data-gm-theme="light"] [data-screen-label="Trusted by brands"]::before,
html[data-gm-theme="light"] [data-screen-label="What we do"]::before,
html[data-gm-theme="light"] [data-screen-label="Featured cases"]::before,
html[data-gm-theme="light"] [data-screen-label="About"]::before,
html[data-gm-theme="light"] [data-screen-label="Process"]::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 100%;
  transform: translateX(-50%); background: var(--gm-bg); z-index: -1;
  pointer-events: none;
}

/* ---- themed middle sections ----
   Driven by four semantic classes added to home.html.j2 (gm-t-ink /
   gm-t-body / gm-t-muted / gm-t-accent / gm-t-line) rather than by matching
   the inline style strings. Attribute matching looked tempting on a codebase
   that is 100% inline-styled, but gm-behaviors.js writes to element.style on
   every [data-reveal] node (the stagger sets transition-delay), and any
   CSSOM write makes the browser re-serialise the whole attribute in
   normalised form — "rgba(245,245,245,.5)" becomes "rgba(245, 245, 245,
   0.5)". Half the selectors silently stopped matching, which is exactly the
   class of bug that shipped white-on-white to production.
   The classes are applied only in the sections that go light; the Final CTA
   (white text on magenta) and the case/process cards (light text on their
   own dark surfaces) deliberately keep their dark-design colours. */
html[data-gm-theme="light"] .gm-t-ink,
html[data-gm-theme="light"] .gm-stitle,
html[data-gm-theme="light"] .gm-trusted-name { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-t-body { color: rgb(var(--gm-fg-rgb) / .74) !important; }
html[data-gm-theme="light"] .gm-t-muted { color: rgb(var(--gm-fg-rgb) / .58) !important; }
html[data-gm-theme="light"] .gm-t-accent { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-trusted-tagline,
html[data-gm-theme="light"] .gm-trusted-period { color: rgb(var(--gm-fg-rgb) / .5) !important; }

/* keylines: the dark design draws them in white alpha, invisible on paper */
html[data-gm-theme="light"] .gm-t-line,
html[data-gm-theme="light"] [data-screen-label="Featured cases"] { border-color: rgb(var(--gm-fg-rgb) / .12) !important; }
html[data-gm-theme="light"] .gm-srow:hover { background: rgb(var(--gm-fg-rgb) / .04) !important; }
html[data-gm-theme="light"] .gm-srow:hover .gm-stitle { color: var(--gm-accent) !important; }

/* outline CTAs (What we do / Cases / About) */
html[data-gm-theme="light"] main .gm-cta { color: rgb(var(--gm-fg-rgb)) !important; border-color: var(--gm-accent) !important; }
html[data-gm-theme="light"] main .gm-cta:hover { background: var(--gm-accent) !important; color: #FFF !important; }
html[data-gm-theme="light"] .gm-carousel-btn { border-color: rgb(var(--gm-fg-rgb) / .22) !important; color: rgb(var(--gm-fg-rgb)) !important; }

/* About: handwritten note, value rings and their icons */
html[data-gm-theme="light"] .gm-about-note { color: rgb(var(--gm-fg-rgb) / .78) !important; }
html[data-gm-theme="light"] .gm-about-note span { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-vring { border-color: rgb(var(--gm-fg-rgb) / .22) !important; }
html[data-gm-theme="light"] .gm-vring svg { stroke: rgb(var(--gm-fg-rgb) / .6); }
html[data-gm-theme="light"] .gm-value:hover .gm-vring { border-color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-side-note { color: rgb(var(--gm-fg-rgb) / .2) !important; }

/* violet decor deepens on paper (canon: DS-SPLATTER-SPEC.md §palette) */
html[data-gm-theme="light"] [data-screen-label="Process"] path[stroke="#A736FF"] { stroke: var(--gm-violet); }

/* ---- alpha that only works over a dark ground ----
   Two places de-emphasise or soften an element with partial opacity. Over
   #090909 the ground bleeding through is black, so it reads as "dimmed".
   Over paper the same alpha bleeds white through the element and reads as a
   milky haze — visible on the hero artwork and on the two non-active case
   cards (measured: the side cards jumped +25 and +94 mean brightness against
   +2 for the active one). Light mode keeps the intent but expresses it by
   darkening instead of by letting the background through. */
html[data-gm-theme="light"] [data-screen-label="Hero"] [data-gm-art] img { opacity: 1 !important; }
html[data-gm-theme="light"] .gm-case-slide:not(.is-active) { opacity: 1; filter: brightness(.93) saturate(.92); }

/* ============================================================
   Theme rocker (header, homepage only)
   ============================================================
   A physical two-position rocker, not a sliding pill: the selected half is
   pressed into the housing and tilted away, the idle half stands proud. The
   tilt is a real rotateX under a shared perspective, which is what sells it
   as a switch rather than a pair of buttons. */
.gm-rocker {
  position: relative; display: inline-flex; align-items: stretch;
  width: 54px; height: 26px; margin: 0 2px 0 0; padding: 2px; gap: 2px;
  border: 0; border-radius: 6px; cursor: pointer;
  background: #17171a; perspective: 90px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(245,245,245,.07);
  transition: background .3s ease, box-shadow .3s ease;
}
html[data-gm-theme="light"] .gm-rocker {
  background: #ded9d0;
  box-shadow: inset 0 1px 3px rgba(20,17,14,.28), 0 1px 0 rgba(255,255,255,.75);
}
.gm-rocker .gm-rk-half {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transform-origin: center bottom;
  color: rgba(245,245,245,.34); background: #26262b;
  box-shadow: 0 1px 0 rgba(245,245,245,.09), inset 0 1px 0 rgba(245,245,245,.06);
  transform: rotateX(14deg);
  transition: transform .28s cubic-bezier(.34,1.3,.64,1), background .28s ease, color .28s ease, box-shadow .28s ease;
}
.gm-rocker .gm-rk-half svg { width: 12px; height: 12px; display: block; }
/* pressed half: tilted back into the housing, brand fill, no lift shadow */
.gm-rocker .gm-rk-half.is-on {
  color: #fff; background: var(--gm-accent);
  transform: rotateX(-16deg) translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
}
html[data-gm-theme="light"] .gm-rocker .gm-rk-half {
  color: rgba(20,17,14,.38); background: #f4f1ea;
  box-shadow: 0 1px 0 rgba(255,255,255,.9), inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-gm-theme="light"] .gm-rocker .gm-rk-half.is-on {
  color: #fff; background: var(--gm-accent);
  box-shadow: inset 0 2px 4px rgba(20,17,14,.35);
}
.gm-rocker:focus-visible { outline: 2px solid var(--gm-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gm-rocker .gm-rk-half { transition: none; } }
@media (max-width: 860px) { .gm-rocker { width: 48px; height: 24px; } }

/* header (shared partial, untouched — pure attribute-scoped override).
   Needs its own opaque background: it's fixed, so once the page scrolls past
   the (now light) hero it would otherwise show dark-ink text over whatever
   dark section is currently underneath it. */
html[data-gm-theme="light"] .gm-header { background: var(--gm-bg) !important; border-bottom-color: rgba(0,0,0,.08) !important; }
html[data-gm-theme="light"] .gm-header,
html[data-gm-theme="light"] .gm-header .gm-nav a,
html[data-gm-theme="light"] .gm-logo,
html[data-gm-theme="light"] .gm-logo span { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-logo .gm-dot { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-logo .gm-sub { color: rgb(var(--gm-fg-rgb) / .55) !important; }
html[data-gm-theme="light"] .gm-header .gm-cta { border-color: var(--gm-accent) !important; color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-header .gm-burger span { background: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-lang-dd > summary { color: var(--gm-accent) !important; }

/* hero */
html[data-gm-theme="light"] .gm-hero-eyebrow { color: rgb(var(--gm-fg-rgb) / .85) !important; }
html[data-gm-theme="light"] .gm-hero-star { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-hero-line-1 { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-hero-line-2 { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-hero-sub { color: rgb(var(--gm-fg-rgb) / .72) !important; }
html[data-gm-theme="light"] .gm-hero-scroll-ring { border-color: rgb(var(--gm-fg-rgb) / .28) !important; }
html[data-gm-theme="light"] .gm-hero-scroll-arrow { color: rgb(var(--gm-fg-rgb) / .7) !important; }
html[data-gm-theme="light"] .gm-hero-scroll-label { color: rgb(var(--gm-fg-rgb) / .5) !important; }
html[data-gm-theme="light"] .gm-hero-note { color: rgb(var(--gm-fg-rgb) / .76) !important; text-shadow: var(--gm-note-shadow) !important; }
html[data-gm-theme="light"] [data-screen-label="Hero"] .gm-secondary { border-color: rgb(var(--gm-fg-rgb) / .32) !important; color: rgb(var(--gm-fg-rgb)) !important; }