/* ==========================================================================
   GOODLOOK agency — лендинг
   Макет Figma: «Прототип_лендинга», 1440 × 8368
   Все размеры десктопа заданы как N × var(--u), где N — px из макета.
   --u = 1px при ширине 1440 и больше, пропорционально меньше на 992–1439.
   ========================================================================== */

/* ---------- Шрифты макета ----------
   Neue Haas Grotesk Display Pro, Wulkan Display и Hello January — коммерческие,
   их файлы нужно положить в /fonts (см. fonts/README.md). Пока файлов нет,
   используются запасные: Inter Tight, Playfair Display, Great Vibes. */
@font-face { font-family: "NHG Display"; font-weight: 500; font-style: normal; font-display: swap;
  src: local("Neue Haas Grotesk Display Pro 55 Roman"), local("NeueHaasDisplay-Roman"),
       url("../fonts/NeueHaasDisplay-Roman.woff2") format("woff2"); }
@font-face { font-family: "NHG Display"; font-weight: 600; font-style: normal; font-display: swap;
  src: local("Neue Haas Grotesk Display Pro 65 Medium"), local("NeueHaasDisplay-Mediu"),
       url("../fonts/NeueHaasDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "NHG Display"; font-weight: 700; font-style: normal; font-display: swap;
  src: local("Neue Haas Grotesk Display Pro 75 Bold"), local("NeueHaasDisplay-Bold"),
       url("../fonts/NeueHaasDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "Wulkan Display"; font-weight: 600; font-style: italic; font-display: swap;
  src: local("Wulkan Display SemiBold Italic"), local("WulkanDisplay-SemiBoldItalic"),
       url("../fonts/WulkanDisplay-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Hello January"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Hello January"), local("Hello_January_script"),
       url("../fonts/HelloJanuary.woff2") format("woff2"); }

/* ---------- Токены (стили Figma) ---------- */
:root {
  --c-b1: #212121;      /* B1 */
  --c-w1: #F5F5F5;      /* W1 */
  --c-w: #FFFFFF;       /* W */
  --c-neutral: #818080; /* Neutral */
  --f-grotesk: "NHG Display", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Wulkan Display", "Playfair Display", Georgia, serif;
  --f-script: "Hello January", "Great Vibes", cursive;
  --f-text: "Montserrat", Arial, sans-serif;
  --u: min(1px, calc(100vw / 1440));
}

.gl-root { container-type: inline-size; overflow-x: clip; }
@supports (width: 1cqw) {
  .gl-root > * { --u: min(1px, calc(100cqw / 1440)); }
}

/* ---------- База ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-w1);
  color: var(--c-b1);
  font-family: var(--f-text);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: none; }
h1, h2, h3 { margin: 0; font-weight: inherit; color: inherit; }

.gl-container {
  width: 100%;
  max-width: calc(1440 * var(--u));
  margin-inline: auto;
  padding-inline: 16px;
}

/* Метка раздела: M32 — Montserrat 500 32/39 */
.gl-label {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.219;
  margin-bottom: 32px;
}
/* H2 — NHG Display 65, 86/86, −5.5% */
.gl-h2 {
  font-family: var(--f-grotesk);
  font-weight: 600;
  font-size: clamp(32px, 9.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
/* M24 — Montserrat 500 24/29.3 */
.gl-text {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.221;
}
.gl-line { display: block; flex: none; width: calc(70 * var(--u)); min-width: 40px; height: 2px; background: currentColor; transition: transform .4s ease-out; }

.gl-section { margin-top: 80px; }

/* ---------- Кнопки ----------
   Состояния — по UI-киту Figma: «обычный / ховер / нажатие».
   Градиент ховера (стиль «градиент»): #FFCF67 → #F79B59.
   Градиент плавно проявляется через ::before (в макете Dissolve/Smart animate, ease-out). */
:root {
  --grad: linear-gradient(90deg, #FFCF67 0%, #F79B59 100%);
  --sx: 6px; --sy: 5px;                 /* Тень: 6 / 5 / 0 */
}
.gl-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 30px;
  font-family: var(--f-grotesk);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  --dur: .3s;
  transition: background-color var(--dur) ease-out, color var(--dur) ease-out, box-shadow var(--dur) ease-out,
              border-color var(--dur) ease-out, opacity var(--dur) ease-out;
}
.gl-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad);
  opacity: 0;
  transition: opacity var(--dur) ease-out;
}
.gl-btn .gl-line { transition: background-color var(--dur) ease-out; }
.gl-btn--lg { height: 56px; font-size: 22px; line-height: 1.25; }

/* «БЕСПЛАТНЫЙ АУДИТ» и «ПОЛУЧИТЬ БЕСПЛАТНЫЙ АУДИТ»
   обычная: фон светлый, обводка B1, тень #000
   ховер:   градиент, обводка W, без тени, текст W
   нажатие: фон B1, обводка W, тень #FFF, текст W */
.gl-btn--light, .gl-btn--white {
  background: var(--c-w1);
  border-color: var(--c-b1);
  color: var(--c-b1);
  box-shadow: var(--sx) var(--sy) 0 #000;
}
.gl-btn--white { background: var(--c-w); }
.gl-btn--light:hover, .gl-btn--white:hover,
.gl-btn--light:focus-visible, .gl-btn--white:focus-visible {
  color: var(--c-w); border-color: var(--c-w); box-shadow: 0 0 0 transparent;
}
.gl-btn--light:hover::before, .gl-btn--white:hover::before,
.gl-btn--light:focus-visible::before, .gl-btn--white:focus-visible::before { opacity: 1; }
.gl-btn--light:active, .gl-btn--white:active {
  background: var(--c-b1); color: var(--c-w); border-color: var(--c-w); box-shadow: var(--sx) var(--sy) 0 #fff;
}
.gl-btn--light:active::before, .gl-btn--white:active::before { opacity: 0; }

/* «СМОТРЕТЬ КЕЙСЫ»: ховер — вся кнопка с прозрачностью 30% (0.5s) */
.gl-btn--ghost { background: transparent; border-color: var(--c-w); color: var(--c-w); --dur: .5s; }
.gl-btn--ghost:hover, .gl-btn--ghost:focus-visible { color: var(--c-w); opacity: .3; }

/* «ПОДРОБНЕЕ О НАС»: ховер — фон W, обводка #000, тень, текст и линия B1 (0.5s) */
.gl-btn--dark { background: var(--c-b1); color: var(--c-w); border-color: var(--c-b1); --dur: .5s; }
.gl-btn--dark:hover, .gl-btn--dark:focus-visible {
  background: var(--c-w); color: var(--c-b1); border-color: #000; box-shadow: var(--sx) var(--sy) 0 #000;
}

/* «НАЧАТЬ ПРОЕКТ»: ховер — градиент, текст W; нажатие — фон B1, текст W */
.gl-btn--menu { background: var(--c-w1); color: var(--c-b1); font-size: 20px; line-height: 1.25; height: 45px; width: 200px; }
.gl-btn--menu:hover, .gl-btn--menu:focus-visible { color: var(--c-w); }
.gl-btn--menu:hover::before, .gl-btn--menu:focus-visible::before { opacity: 1; }
.gl-btn--menu:active { background: var(--c-b1); color: var(--c-w); }
.gl-btn--menu:active::before { opacity: 0; }

/* «ОТПРАВИТЬ ЗАЯВКУ»: ховер — градиент; нажатие — Neutral #818080 */
.gl-btn--submit { width: 100%; height: 56px; background: var(--c-b1); color: var(--c-w); font-size: 24px; line-height: 1.25; }
.gl-btn--submit:hover, .gl-btn--submit:focus-visible { color: var(--c-w); }
.gl-btn--submit:hover::before, .gl-btn--submit:focus-visible::before { opacity: 1; }
.gl-btn--submit:active { background: var(--c-neutral); }
.gl-btn--submit:active::before { opacity: 0; }
.gl-btn--submit:disabled { opacity: .6; cursor: default; }
.gl-btn--submit:disabled::before { opacity: 0; }

/* ==========================================================================
   МЕНЮ
   ========================================================================== */
.gl-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
}
.gl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: calc(1440 * var(--u));
  margin-inline: auto;
  padding-inline: 16px;
}
.gl-logo img { width: 160px; height: auto; }
.gl-nav { align-items: center; gap: calc(30 * var(--u)); }
.gl-nav a {
  color: var(--c-w1);
  text-decoration: none;
  font-size: calc(20 * var(--u));
  line-height: 1.22;
  font-weight: 500;
  transition: opacity .3s ease-out;
}
.gl-nav a:hover { opacity: .6; }

.gl-burger {
  width: 44px; height: 44px;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0;
}
.gl-burger span { display: block; width: 28px; height: 2px; background: var(--c-w1); }

.gl-offcanvas { background: var(--c-b1); color: var(--c-w1); }
.gl-offcanvas .offcanvas-header img { width: 180px; height: auto; }
.gl-offcanvas .offcanvas-body { display: flex; flex-direction: column; gap: 40px; }
.gl-offcanvas__nav { display: flex; flex-direction: column; gap: 16px; }
.gl-offcanvas__nav a { color: var(--c-w1); text-decoration: none; font-size: 24px; line-height: 1.22; }
.gl-offcanvas .gl-btn--menu { align-self: flex-start; }

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН
   ========================================================================== */
.gl-hero {
  position: relative;
  padding: 130px 0 104px;
  color: var(--c-w1);
  --t: min(96px, calc((100vw - 32px) / 10.6));   /* кегль H1: 96px в макете */
}
.gl-hero__bg {
  position: absolute;
  inset: 0 0 10px 0;
  background: #3a3a3a url("../img/hero.jpg") center / cover no-repeat;
}
.gl-hero__content { position: relative; z-index: 1; }

.gl-hero__title {
  position: relative;
  display: block;
  font-size: var(--t);
  height: 2.7917em;               /* 268 / 96 */
  max-width: 9.896em;             /* 950 / 96 */
}
.gl-hero__title > span { position: absolute; left: 0; white-space: nowrap; }
.gl-hero__l1, .gl-hero__l3 {
  font-family: var(--f-grotesk);
  font-weight: 600;
  line-height: 1.001;
  letter-spacing: -0.055em;
}
.gl-hero__l1 { top: 0; }
.gl-hero__l3 { top: 1.7917em; }  /* 172 / 96 */
.gl-hero__script {
  top: .325em;                     /* 60 / 96 */
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3333em;             /* 128px */
  line-height: 1.1656;             /* 149.2 / 128 */
}
.gl-hero__lead {
  margin-top: 24px;
  max-width: 858px;
  font-size: 16px;
  line-height: 1.22;
  font-weight: 500;
}
.gl-hero__btns { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; max-width: 400px; }
.gl-hero__btns .gl-btn { width: 100%; }

/* ---------- Бегущие строки ---------- */
.gl-marquee { overflow: hidden; position: relative; }
.gl-marquee__track {
  display: flex;
  width: max-content;
  gap: calc(40 * var(--u));
  animation: gl-marquee var(--dur, 10s) linear infinite;
  will-change: transform;
}
@keyframes gl-marquee { to { transform: translate3d(calc(var(--dist, 0px) * -1), 0, 0); } }
.gl-marquee:hover .gl-marquee__track.is-pausable { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .gl-marquee__track { animation: none; } }

.gl-marquee--hero {
  --u: .6px;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(92 * var(--u));
  background: var(--c-b1);
  color: var(--c-w1);
  z-index: 2;
}
.gl-strip { display: flex; align-items: baseline; flex: none; gap: calc(28 * var(--u)); }
.gl-strip span { white-space: pre; font-size: calc(64 * var(--u)); }
.gl-strip .n { font-family: var(--f-grotesk); font-weight: 500; line-height: 1.248; letter-spacing: -0.11em; word-spacing: .12em; }
.gl-strip .w { font-family: var(--f-serif); font-style: italic; font-weight: 600; line-height: 1.4; }
/* Слова — через одинаковый отступ. В макете (Frame 505 / 506) отступы между блоками текста 0…44px
   и подобраны под ширины NHG Display: при другой ширине шрифта слова слипаются («МАРКЕТИНГВ ОДНОМ»).
   Отрицательный трекинг в конце слова .n компенсируется, чтобы зазор выглядел как у курсивных слов. */
.gl-strip .n { padding-right: .11em; }

/* ==========================================================================
   КТО МЫ
   ========================================================================== */
.gl-about__body { display: flex; flex-direction: column; gap: 28px; }
.gl-about__v1 { position: relative; width: 100%; aspect-ratio: 620 / 521; }
.gl-about__img1 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.gl-about__gif {
  position: absolute; z-index: 2;
  left: 10.645%; top: 15.163%;          /* 66 / 620, 79 / 521 */
  width: 57.742%; height: 53.551%;      /* 358 / 620, 279 / 521 */
  border-radius: calc(35 * var(--u));
  object-fit: cover;
  background: #bdbdbd;
  filter: brightness(.8);               /* в макете поверх GIF заливка #000 20% */
}
/* размытая тень «Group 60» (под фото) */
.gl-about__shadow {
  position: absolute; z-index: 0;
  left: 7.258%; top: 88.676%;           /* 45 / 620, 462 / 521 */
  width: 108.548%; height: 11.324%;     /* 673 / 620, 59 / 521 */
  opacity: .86;
  filter: blur(calc(5 * var(--u)));
}
.gl-about__shadow i {
  position: absolute;
  left: calc(var(--x) / 673 * 100%);
  top: calc(var(--y) / 59 * 100%);
  width: calc(var(--w) / 673 * 100%);
  height: calc(var(--h) / 59 * 100%);
  border-radius: 50%;
  background: var(--c);
  filter: blur(calc(var(--b, 5) * var(--u)));
}
.gl-about__v2 { position: relative; width: 100%; aspect-ratio: 510 / 270; margin-top: 12px; }
.gl-about__img2 { width: 100%; height: 100%; object-fit: cover; background: #d9d9d9; }
.gl-about__p2 { text-align: right; }
.gl-about__btn { align-self: stretch; height: 56px; font-size: 22px; line-height: 1.25; }

/* Скотч: рендеры слоёв из Figma (уже с поворотом), ставятся по габаритам */
.gl-tape { position: absolute; z-index: 3; pointer-events: none; height: auto; max-width: none; }
.gl-about__tape9 { width: 32.157%; left: -11.765%; top: 72.963%; }   /* 164×129 @ -60,197 */
.gl-about__tape8 { width: 32.157%; left: 78.039%; top: -15.926%; }   /* 164×129 @ 398,-43 */

/* ==========================================================================
   УСЛУГИ
   ========================================================================== */
.gl-services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  font-family: var(--f-grotesk);
  font-weight: 600;
  font-size: clamp(30px, 9vw, 64px);
  line-height: 1.001;
  letter-spacing: -0.055em;
}
/* Услуги: ховер — градиентная плашка под каждой строкой текста, текст W (0.4s);
   нажатие — плашка Neutral, прозрачность 30% */
.gl-services__list li { cursor: default; }
.gl-services__list a { color: inherit; text-decoration: none; cursor: pointer; }
.gl-services__list li span {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: var(--grad);
  box-shadow: inset 0 0 0 100vmax var(--c-w1);   /* «закрывает» градиент в обычном состоянии */
  transition: box-shadow .4s ease-out, color .4s ease-out, opacity .4s ease-out;
}
.gl-services__list li:hover span { color: var(--c-w); box-shadow: inset 0 0 0 100vmax rgba(245,245,245,0); }
.gl-services__list li:active span { color: var(--c-w); background: var(--c-neutral); box-shadow: none; opacity: .3; }

/* ==========================================================================
   КЕЙСЫ
   ========================================================================== */
.gl-cases__carousel { position: relative; }
.gl-case__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.gl-case__text { font-size: 16px; line-height: 1.22; font-weight: 500; }
.gl-case__visual { position: relative; aspect-ratio: 4 / 3; background: #d9d9d9; }
.gl-case__visual img { width: 100%; height: 100%; object-fit: cover; }
.gl-case__visual { overflow: hidden; }
.gl-case__visual--shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4) 8.147%, rgba(102,102,102,0) 31.4%); pointer-events: none; }
.gl-case-btn {
  position: absolute;
  bottom: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 36px;
  padding: 10px;
  border: 1px solid var(--c-w);
  border-radius: 30px;
  background: transparent;
  color: var(--c-w);
  transition: background-color .4s ease-out, color .4s ease-out, border-color .4s ease-out, box-shadow .4s ease-out;
  z-index: 3;
}
.gl-case-btn--next { right: 16px; }
.gl-case-btn--prev { left: 16px; }
.gl-case-btn--prev .gl-arrow { transform: scaleX(-1); }
/* ховер (Variant2): фон W, обводка B1, тень, стрелка B1 */
.gl-case-btn:hover, .gl-case-btn:focus-visible { background: var(--c-w); color: var(--c-b1); border-color: var(--c-b1); box-shadow: var(--sx) var(--sy) 0 #000; }
.gl-arrow { display: block; width: 56px; height: auto; fill: none; stroke: currentColor; stroke-width: 2; overflow: visible; }
.gl-case-more {
  position: absolute; right: 16px; bottom: 22px; z-index: 3;
  color: var(--c-w); font-family: var(--f-grotesk); font-weight: 500; font-size: 16px; line-height: 1.25;
  text-decoration: underline; white-space: nowrap;
}
.gl-case-more { transition: opacity .3s ease-out, color .3s ease-out; }
.gl-case-more:hover { color: var(--c-w1); opacity: .6; }

/* ==========================================================================
   ПОЧЕМУ МЫ
   ========================================================================== */
.gl-why__body { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.gl-why__t { width: 100%; }
.gl-why__v {
  --u: min(1px, calc((100vw - 80px) / 401));
  position: relative;
  flex: none;
}
.gl-why__photo { width: 100%; background: #d9d9d9; object-fit: cover; }
.gl-why__v1 { width: calc(401 * var(--u)); height: calc(335 * var(--u)); }
.gl-why__v1 .gl-why__photo { height: 100%; }
.gl-why__v3 { width: calc(330 * var(--u)); height: calc(323 * var(--u)); }
.gl-why__v3 .gl-why__photo { height: 100%; }
.gl-why__v2 { width: calc(396 * var(--u)); height: calc(486 * var(--u)); }
.gl-why__v2 .gl-why__photo { position: absolute; left: 0; top: calc(56 * var(--u)); width: calc(330 * var(--u)); height: calc(430 * var(--u)); }

.gl-num { position: absolute; overflow: visible; opacity: .6; z-index: 2; }
.gl-num text { font-family: var(--f-grotesk); font-weight: 600; fill: var(--c-b1); }
.gl-num--light text { fill: var(--c-w1); }
.gl-why__n7    { left: 0; top: calc(153 * var(--u)); width: calc(214 * var(--u)); height: calc(182 * var(--u)); }
.gl-why__n7 text { font-size: 254px; }
.gl-why__n1500 { left: 0; top: calc(218 * var(--u)); width: calc(330 * var(--u)); height: calc(101 * var(--u)); }
.gl-why__n1500 text { font-size: 141px; }
.gl-why__n85   { left: calc(3 * var(--u)); top: calc(52 * var(--u)); width: calc(327 * var(--u)); height: calc(128 * var(--u)); }
.gl-why__n85 text { font-size: 179px; }

.gl-why__cap {
  position: absolute; z-index: 2;
  font-size: calc(24 * var(--u));
  line-height: 1.221;
  font-weight: 500;
}
.gl-why__cap1 { left: calc(214 * var(--u)); top: calc(294 * var(--u)); width: calc(174 * var(--u)); color: var(--c-w1); white-space: pre; }
.gl-why__cap3 { left: 0; top: calc(182 * var(--u)); width: calc(330 * var(--u)); text-align: center; }
.gl-why__cap2 { left: calc(78 * var(--u)); top: calc(231 * var(--u)); width: calc(167 * var(--u)); text-align: center; }

.gl-why__v .gl-tape { height: auto; }
.gl-why__tape1 { left: calc(-35 * var(--u)); top: calc(87 * var(--u));  width: calc(65 * var(--u)); }
.gl-why__tape3 { left: calc(-71 * var(--u)); top: calc(242 * var(--u)); width: calc(164 * var(--u)); }
.gl-why__tape2 { left: calc(232 * var(--u)); top: 0; width: calc(164 * var(--u)); }

/* ==========================================================================
   ПРИЗЫВ
   ========================================================================== */
.gl-cta { position: relative; color: var(--c-w1); padding: 72px 0; --c: min(54px, calc((100vw - 32px) / 15.6)); }
.gl-cta__bg { position: absolute; inset: 0; background: #4a4a4a url("../img/cta.jpg") center / cover no-repeat; }
.gl-cta__content { position: relative; z-index: 1; }
.gl-cta__title { position: relative; display: block; font-size: var(--c); height: 3.111em; max-width: 14.333em; }
.gl-cta__title > span { position: absolute; left: 0; white-space: nowrap; }
.gl-cta__l1, .gl-cta__l3 { font-family: var(--f-grotesk); font-weight: 600; line-height: 1; letter-spacing: -0.055em; }
.gl-cta__l1 { top: 0; }
.gl-cta__l3 { top: 2.111em; }          /* 114 / 54 */
.gl-cta__script {
  top: .578em;                          /* одинаковые просветы сверху и снизу от курсивной строки */
  font-family: var(--f-serif); font-style: italic; font-weight: 600;
  font-size: 1.1852em;                  /* 64px */
  line-height: 1.1656;
}
.gl-cta__row { display: flex; flex-direction: column; gap: 28px; margin-top: 32px; }
.gl-cta__text { max-width: 550px; }
.gl-cta__btn { width: 100%; max-width: 660px; font-size: clamp(15px, 4.4vw, 22px); }

/* ==========================================================================
   ОТЗЫВЫ
   ========================================================================== */
.gl-reviews__head { text-align: center; }
.gl-reviews__title span { display: block; }
.gl-reviews__title span + span { margin-top: 5px; }
.gl-reviews__sub { max-width: 620px; margin: 24px auto 0; }
.gl-reviews__scroller {
  margin-top: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  padding: 4px 0 12px 16px;
  scroll-padding-inline: 16px;
}
.gl-reviews__scroller::-webkit-scrollbar { display: none; }
.gl-reviews__scroller.is-dragging { cursor: grabbing; user-select: none; }
.gl-reviews__track { display: flex; gap: 20px; width: max-content; align-items: stretch; }
.gl-reviews__track::after { content: ""; flex: none; width: 1px; }
.gl-review {
  flex: none;
  width: min(320px, calc(100vw - 48px));
  display: flex; flex-direction: column; gap: 20px;
  padding: 24px;
  background: var(--c-w1);
  border: 1px solid var(--c-b1);
  border-radius: 30px;
  box-shadow: 6px 5px 0 #000;
}
.gl-review p { font-size: 16px; line-height: 1.22; font-weight: 500; }
.gl-stars { display: flex; }
.gl-stars svg { width: 32px; height: 32px; fill: var(--c-b1); flex: none; }

/* ==========================================================================
   НАШИ КЛИЕНТЫ
   ========================================================================== */
.gl-marquee--clients { --u: .6px; height: calc(73 * var(--u)); }
.gl-marquee--clients .gl-marquee__track { align-items: center; height: 100%; }
.gl-marquee--clients img { flex: none; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); object-fit: contain; }

/* ==========================================================================
   ФОРМА
   ========================================================================== */
.gl-form__block { margin-top: 28px; display: flex; flex-direction: column; gap: 24px; padding-inline: 16px; }
.gl-form__visual { position: relative; width: 100%; aspect-ratio: 802 / 434; margin-left: -16px; }
.gl-form__visual img { position: absolute; left: 0; top: 0; width: 90.025%; height: 100%; object-fit: contain; z-index: 1; }
.gl-form__visual i { position: absolute; border-radius: 50%; background: var(--c-neutral); }
.gl-form__e1 { left: 3.242%; top: 87.097%; width: 96.758%; height: 11.521%; filter: blur(10px); }
.gl-form__e2 { left: 19.451%; top: 90.092%; width: 62.968%; height: 7.373%; filter: blur(15px); }
.gl-form__card {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 24px;
  background: var(--c-w);
  border: 1px solid var(--c-b1);
  border-radius: 30px;
  box-shadow: 6px 5px 0 #000;
}
.gl-form__fields { display: flex; flex-direction: column; gap: 20px; }
.gl-form__lead { font-size: 18px; line-height: 1.221; font-weight: 500; }
.gl-input {
  width: 100%;
  height: 58px;
  padding: 16px 24px;
  border: 1px solid var(--c-b1);
  border-radius: 300px;
  background: var(--c-w);
  color: var(--c-b1);
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.22;
  outline: none;
  /* градиент под белой «заливкой» из тени: на ховере заливка плавно исчезает (Dissolve 0.3s) */
  background-image: var(--grad);
  box-shadow: inset 0 0 0 100vmax var(--c-w);
  transition: border-color .3s ease-out, box-shadow .3s ease-out, color .3s ease-out;
}
.gl-input::placeholder { color: var(--c-neutral); opacity: 1; transition: color .3s ease-out; }
/* ховер: градиент, обводка W, текст W («Ваш телефон» — W 70%) */
.gl-input:hover:not(:focus) { border-color: var(--c-w); color: var(--c-w); box-shadow: inset 0 0 0 100vmax rgba(255,255,255,0); }
.gl-input:hover:not(:focus)::placeholder { color: var(--c-w); }
#leadPhone:hover:not(:focus)::placeholder { color: rgba(255,255,255,.7); }
/* активный (фокус): белый фон, обводка B1, текст B1 */
.gl-input:focus { border-color: var(--c-b1); color: var(--c-b1); }
.gl-input.is-invalid { border-color: #c0392b; }
.gl-form__note { font-size: 13px; line-height: 1.215; font-weight: 400; }
.gl-form__status:empty { display: none; }
.gl-form__status { font-size: 13px; line-height: 1.215; font-weight: 500; }

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */
.gl-footer { position: relative; margin-top: 80px; overflow: hidden; }
.gl-footer__contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.gl-footer__contacts li { flex: none; }
.gl-footer__contacts a {
  display: flex; align-items: center; justify-content: center;
  height: 52px; padding: 10px 24px;
  border: 1px solid var(--c-b1);
  border-radius: 300px;
  font-family: var(--f-grotesk); font-weight: 500;
  font-size: 18px; line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s ease-out, color .3s ease-out;
}
.gl-footer__contacts a:hover, .gl-footer__contacts a:focus-visible { background: var(--c-b1); color: var(--c-w1); }
.gl-footer__info { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; font-size: 13px; line-height: 1.215; font-weight: 400; }
.gl-footer__policy { text-decoration: underline; }
.gl-footer__h { font-size: 20px; line-height: 1.22; font-weight: 500; margin-bottom: 15px; }
.gl-footer__sched { display: flex; gap: 15px; }
.gl-footer__col a { text-decoration: none; }
.gl-footer__col a:hover { text-decoration: underline; }

.gl-footer__brand { position: relative; height: 24vw; margin-top: 16vw; pointer-events: none; }
.gl-footer__word {
  /* слово во всю ширину: «G» у левого края, «K» у правого (без пустого места перед G) */
  position: absolute; left: -0.03em; right: auto; top: -4vw;
  text-align: left;
  font-family: var(--f-grotesk); font-weight: 700;
  font-size: 20.85vw;
  line-height: 1.2676;
  letter-spacing: -0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gl-footer__agency {
  /* «agency» — надпись из макета (шрифт Hello January) в кривых: выглядит как в Figma без файла шрифта */
  position: absolute; left: 64.404vw; top: -0.667vw; width: 35.733vw; max-width: none; height: auto;
}

/* ---------- Кнопка наверх ---------- */
.gl-totop {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 30;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 1px solid var(--c-b1);
  border-radius: 300px;
  background: var(--c-w1);
  box-shadow: 6px 5px 0 #000;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease-out, visibility .3s, transform .3s ease-out, box-shadow .3s ease-out;
}
.gl-totop.is-visible { opacity: 1; visibility: visible; }
.gl-totop:hover { transform: translate(6px, 5px); box-shadow: 0 0 0 #000; }
.gl-totop svg { width: 38%; height: auto; fill: none; stroke: var(--c-b1); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* ==========================================================================
   ПЛАНШЕТ 768–991
   ========================================================================== */
@media (min-width: 768px) {
  .gl-container, .gl-header__inner { padding-inline: 40px; }
  .gl-hero__btns { flex-direction: row; max-width: none; }
  .gl-hero__btns .gl-btn { width: 50%; }
  .gl-about__v1, .gl-about__v2 { max-width: 620px; }
  .gl-reviews__scroller { padding-left: 40px; }
  .gl-form__block { padding-inline: 40px; }
  .gl-form__visual { margin-left: -40px; max-width: 802px; }
  .gl-footer__info { flex-direction: row; gap: 40px; }
}

/* ==========================================================================
   ДЕСКТОП ≥ 992 — точная геометрия макета (1440)
   ========================================================================== */
@media (min-width: 992px) {
  .gl-container { padding-inline: calc(80 * var(--u)); }
  .gl-section { margin-top: calc(140 * var(--u)); }
  .gl-label { font-size: calc(32 * var(--u)); margin-bottom: calc(70 * var(--u)); }
  .gl-h2 { font-size: calc(86 * var(--u)); }
  .gl-text { font-size: calc(24 * var(--u)); }
  .gl-btn { padding: calc(10 * var(--u)); border-radius: calc(30 * var(--u)); gap: calc(10 * var(--u)); }
  .gl-btn--lg { height: calc(60 * var(--u)); font-size: calc(32 * var(--u)); }
  :root { --sx: calc(6 * var(--u)); --sy: calc(5 * var(--u)); }
  .gl-review, .gl-form__card, .gl-totop { box-shadow: calc(6 * var(--u)) calc(5 * var(--u)) 0 #000; }
  .gl-totop:hover { transform: translate(calc(6 * var(--u)), calc(5 * var(--u))); box-shadow: 0 0 0 #000; }
  .gl-line { min-width: 0; }

  /* Меню */
  .gl-header__inner { height: calc(100 * var(--u)); padding-inline: calc(80 * var(--u)); }
  .gl-logo img { width: calc(262 * var(--u)); height: calc(44 * var(--u)); }
  .gl-btn--menu { width: calc(200 * var(--u)); height: calc(45 * var(--u)); font-size: calc(20 * var(--u)); }

  /* Первый экран */
  .gl-hero { height: calc(905 * var(--u)); padding: 0; --t: calc(96 * var(--u)); }
  .gl-hero__bg { inset: 0 0 auto 0; height: calc(900 * var(--u)); }
  .gl-hero__content { position: absolute; left: 0; right: 0; top: calc(283 * var(--u)); }
  .gl-hero__title { max-width: none; width: calc(950 * var(--u)); }
  .gl-hero__lead { margin-top: calc(30 * var(--u)); width: calc(858 * var(--u)); max-width: none; font-size: calc(20 * var(--u)); }
  .gl-hero__btns { margin-top: calc(30 * var(--u)); gap: calc(40 * var(--u)); }
  .gl-hero__btns .gl-btn { width: calc(400 * var(--u)); }
  .gl-marquee--hero { --u: inherit; top: calc(813 * var(--u)); bottom: auto; }

  /* Кто мы */
  .gl-about__body { display: block; position: relative; height: calc(870 * var(--u)); }
  .gl-about__body > * { position: absolute; margin: 0; }
  .gl-about__title { left: 0; top: 0; width: calc(1170 * var(--u)); }
  .gl-about__p1 { left: 0; top: calc(212 * var(--u)); width: calc(620 * var(--u)); }
  .gl-about__v1 { left: calc(660 * var(--u)); top: calc(126 * var(--u)); width: calc(620 * var(--u)); height: calc(521 * var(--u)); max-width: none; aspect-ratio: auto; }
  .gl-about__p2 { left: calc(553 * var(--u)); top: calc(692 * var(--u)); width: calc(727 * var(--u)); }
  .gl-about__v2 { left: 0; top: calc(600 * var(--u)); width: calc(510 * var(--u)); height: calc(270 * var(--u)); max-width: none; aspect-ratio: auto; }
  .gl-about__btn { left: calc(846 * var(--u)); top: calc(780 * var(--u)); width: calc(434 * var(--u)); height: calc(60 * var(--u)); font-size: calc(32 * var(--u)); }

  /* Услуги: блок в макете фиксированной высоты 902 */
  .gl-services__list { height: calc(902 * var(--u)); padding-inline: calc(70 * var(--u)); gap: calc(30 * var(--u)); font-size: calc(96 * var(--u)); }

  /* Кейсы */
  .gl-case__head { flex-direction: row; align-items: center; justify-content: space-between; gap: 0; margin-bottom: calc(40 * var(--u)); }
  .gl-case__title { width: calc(661 * var(--u)); }
  .gl-case__text { width: calc(var(--w) * var(--u)); font-size: calc(20 * var(--u)); text-align: right; }
  .gl-case__visual { aspect-ratio: auto; height: calc(500 * var(--u)); }
  .gl-case-btn { bottom: calc(30 * var(--u)); width: calc(120 * var(--u)); height: calc(40 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(30 * var(--u)); }
  .gl-case-btn--next { right: calc(31 * var(--u)); }
  .gl-case-btn--prev { left: calc(30 * var(--u)); }
  .gl-arrow { width: calc(70 * var(--u)); }
  .gl-case-more { right: calc(31 * var(--u)); bottom: calc(35 * var(--u)); font-size: calc(20 * var(--u)); }

  /* Почему мы */
  .gl-why__body { display: block; position: relative; height: calc(573 * var(--u)); }
  .gl-why__body > * { position: absolute; }
  .gl-why__v { --u: inherit; }
  .gl-why__v1 { left: 0; top: 0; }
  .gl-why__mission { left: calc(471 * var(--u)); top: calc(29 * var(--u)); width: calc(410 * var(--u)); }
  .gl-why__v3 { left: calc(551 * var(--u)); top: calc(250 * var(--u)); }
  .gl-why__philosophy { left: calc(70 * var(--u)); top: calc(374 * var(--u)); width: calc(401 * var(--u)); }
  .gl-why__v2 { left: calc(951 * var(--u)); top: calc(-56 * var(--u)); }
  .gl-why__goal { left: calc(951 * var(--u)); top: calc(466 * var(--u)); width: calc(330 * var(--u)); }

  /* Призыв */
  .gl-cta { height: calc(500 * var(--u)); padding: calc(122 * var(--u)) 0 0; --c: calc(54 * var(--u)); }
  .gl-cta__title { width: calc(774 * var(--u)); max-width: none; }
  .gl-cta__row { flex-direction: row; align-items: flex-end; gap: calc(70 * var(--u)); margin-top: calc(40 * var(--u)); }
  .gl-cta__text { width: calc(550 * var(--u)); max-width: none; flex: none; }
  .gl-cta__btn { width: calc(660 * var(--u)); max-width: none; font-size: calc(32 * var(--u)); }

  /* Отзывы */
  .gl-reviews__title span + span { margin-top: calc(5 * var(--u)); }
  .gl-reviews__sub { width: calc(620 * var(--u)); max-width: none; margin-top: calc(40 * var(--u)); }
  .gl-reviews__scroller {
    margin-top: calc(40 * var(--u));
    padding: calc(4 * var(--u)) 0 calc(12 * var(--u));
    padding-left: calc((100% - 1280 * var(--u)) / 2 - var(--u));
  }
  .gl-reviews__track { gap: calc(40 * var(--u)); }
  .gl-reviews__track::after { width: calc((100vw - 1280 * var(--u)) / 2 - 40 * var(--u)); }
  .gl-review { width: calc(var(--w) * var(--u)); height: calc(364 * var(--u)); padding: calc(30 * var(--u)); gap: calc(30 * var(--u)); border-radius: calc(30 * var(--u)); }
  .gl-review p { font-size: calc(20 * var(--u)); }
  .gl-stars svg { width: calc(47 * var(--u)); height: calc(47 * var(--u)); }

  /* Клиенты */
  .gl-marquee--clients { --u: inherit; }

  /* Форма */
  .gl-form__title { margin-top: 0; }
  .gl-form__block { display: block; position: relative; max-width: calc(1440 * var(--u)); height: calc(457 * var(--u)); margin: calc(40 * var(--u)) auto 0; padding: 0; }
  .gl-form__visual { position: absolute; left: 0; top: calc(19 * var(--u)); width: calc(802 * var(--u)); height: calc(434 * var(--u)); max-width: none; aspect-ratio: auto; margin: 0; }
  .gl-form__e1 { filter: blur(calc(10 * var(--u))); }
  .gl-form__e2 { filter: blur(calc(15 * var(--u))); }
  .gl-form__card { position: absolute; left: calc(802 * var(--u)); top: 0; width: calc(558 * var(--u)); height: calc(457 * var(--u)); padding: calc(30 * var(--u)); gap: calc(10 * var(--u)); border-radius: calc(30 * var(--u)); }
  .gl-form__fields { gap: calc(30 * var(--u)); }
  .gl-form__lead { font-size: calc(24 * var(--u)); }
  .gl-input { height: calc(70 * var(--u)); padding: calc(20 * var(--u)) calc(30 * var(--u)); font-size: calc(20 * var(--u)); }
  .gl-btn--submit { height: calc(64 * var(--u)); font-size: calc(32 * var(--u)); border-radius: calc(30 * var(--u)); }
  .gl-form__note, .gl-form__status { font-size: calc(13 * var(--u)); }

  /* Подвал */
  .gl-footer { margin-top: calc(140 * var(--u)); height: calc(438 * var(--u)); }
  .gl-footer__contacts { flex-wrap: nowrap; justify-content: space-between; gap: calc(50 * var(--u)); }
  .gl-footer__contacts li { width: calc(var(--w) * var(--u)); }
  .gl-footer__contacts a { height: calc(68 * var(--u)); padding: calc(10 * var(--u)); font-size: calc(20 * var(--u)); }
  .gl-footer__info { flex-direction: row; gap: calc(40 * var(--u)); margin-top: calc(40 * var(--u)); font-size: calc(13 * var(--u)); }
  .gl-footer__policy { width: calc(219 * var(--u)); flex: none; }
  .gl-footer__col { width: calc(257 * var(--u)); flex: none; }
  .gl-footer__col--addr { width: calc(220 * var(--u)); }
  .gl-footer__h { font-size: calc(20 * var(--u)); margin-bottom: calc(15 * var(--u)); }
  .gl-footer__sched { gap: calc(15 * var(--u)); }
  .gl-footer__brand { position: absolute; left: 50%; top: 0; width: calc(1440 * var(--u)); height: 100%; margin: 0; transform: translateX(-50%); }
  .gl-footer__word { top: calc(143 * var(--u)); font-size: calc(300.3 * var(--u)); }
  .gl-footer__agency { left: calc(927.41 * var(--u)); top: calc(191 * var(--u)); width: calc(514.55 * var(--u)); }

  /* Кнопка наверх: x = 1271, y = 634 в окне 1440×900 */
  .gl-totop { right: calc(80 * var(--u)); bottom: clamp(24px, 19.67vh, 177px); width: calc(89 * var(--u)); height: calc(89 * var(--u)); }
  .gl-totop svg { width: calc(38 * var(--u)); }
}

/* ==========================================================================
   СТРАНИЦА «ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ» (privacy.html)
   Макет: 1440 × 7242, фон W1
   ========================================================================== */
/* Меню в тёмном варианте: логотип и пункты B1, кнопка — фон B1, текст W */
.gl-header--dark .gl-logo img { filter: brightness(.135); }          /* #F5F5F5 → #212121 */
.gl-header--dark .gl-nav a { color: var(--c-b1); }
.gl-header--dark .gl-btn--menu { background: var(--c-b1); color: var(--c-w); border-color: var(--c-b1); }
.gl-header--dark .gl-btn--menu:hover, .gl-header--dark .gl-btn--menu:focus-visible { color: var(--c-w); border-color: transparent; }
.gl-burger--dark span { background: var(--c-b1); }

.gl-privacy__head { position: relative; padding-top: 110px; }
.gl-privacy__title {
  font-family: var(--f-grotesk);
  font-weight: 600;
  font-size: min(200px, calc((100vw - 32px) / 5.4));
  line-height: 1.0006;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.gl-privacy__sub { margin-top: 8px; font-size: 20px; line-height: 1.219; font-weight: 500; }
.gl-privacy__visual { width: 160px; height: auto; aspect-ratio: 236 / 192; object-fit: cover; margin-top: 24px; background: #d9d9d9; }

.gl-privacy__body { display: flex; flex-direction: column; gap: 40px; margin-top: 48px; }
.gl-privacy__sec { display: flex; flex-direction: column; gap: 16px; }
.gl-privacy__h {                      /* H4: NHG Display 65, 40/40, −5.5% */
  margin: 0;
  font-family: var(--f-grotesk);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.0006;
  letter-spacing: -0.055em;
}
.gl-privacy__text p { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 500; }   /* M20: 20/24 */

.gl-totop--white { background: var(--c-w); }

@media (min-width: 992px) {
  .gl-privacy__head { height: calc(623 * var(--u)); padding-top: 0; }
  .gl-privacy__title { position: absolute; left: calc(80 * var(--u)); top: calc(222 * var(--u)); width: calc(1027 * var(--u)); font-size: calc(200 * var(--u)); }
  .gl-privacy__sub { position: absolute; left: calc(80 * var(--u)); top: calc(412 * var(--u)); width: calc(812 * var(--u)); margin: 0; font-size: calc(32 * var(--u)); }
  .gl-privacy__visual { position: absolute; left: calc(1124 * var(--u)); top: calc(251 * var(--u)); width: calc(236 * var(--u)); height: calc(192 * var(--u)); margin: 0; }
  .gl-privacy__body { gap: calc(30 * var(--u)); margin-top: 0; }
  .gl-privacy__sec { gap: calc(30 * var(--u)); }
  .gl-privacy__h { font-size: calc(40 * var(--u)); }
  .gl-privacy__text p { font-size: calc(20 * var(--u)); }
  .gl-footer--privacy { margin-top: calc(180 * var(--u)); }
  /* кнопка наверх: x = 1271, y = 550 в окне 1440×900 */
  .gl-totop--white { bottom: clamp(24px, 29vh, 261px); }
}

/* ==========================================================================
   WORDPRESS
   ========================================================================== */
.gl-root { position: relative; }                       /* шапка не уезжает под админ-бар */
.gl-footer__contacts li { width: auto; }
.gl-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gl-elementor { padding-top: 72px; }
.gl-404__btn { align-self: flex-start; }

/* Контент страниц-документов (редактор WordPress) — как на макете «Политика» */
.gl-doc { display: block; }
.gl-doc > :first-child { margin-top: 0 !important; }
.gl-doc h2, .gl-doc h3 {
  margin: 40px 0 16px;
  font-family: var(--f-grotesk);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.0006;
  letter-spacing: -0.055em;
}
.gl-doc h3 { font-size: 20px; }
.gl-doc p, .gl-doc li { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 500; }
.gl-doc ul, .gl-doc ol { margin: 0; padding-left: 1.2em; }
.gl-doc a { color: inherit; text-decoration: underline; }
.gl-doc img { max-width: 100%; height: auto; }
.gl-doc figure { margin: 30px 0; }
.gl-doc__pages { margin-top: 40px; }
.gl-privacy__h a { color: inherit; text-decoration: none; }
.gl-privacy__h a:hover { text-decoration: underline; }

@media (min-width: 992px) {
  .gl-footer__contacts li { min-width: calc(var(--w) * var(--u)); }
  .gl-elementor { padding-top: calc(100 * var(--u)); }
  .gl-doc h2, .gl-doc h3 { margin: calc(30 * var(--u)) 0; font-size: calc(40 * var(--u)); }
  .gl-doc h3 { font-size: calc(28 * var(--u)); }
  .gl-doc p, .gl-doc li { font-size: calc(20 * var(--u)); }
  .gl-doc figure { margin: calc(30 * var(--u)) 0; }
}

/* ==========================================================================
   СТРАНИЦА УСЛУГИ (шаблон «Услуга»)
   Макет Figma: «СММ», 1440 × 8203, фон W1. Шапка — светлая, поверх фото.
   ========================================================================== */
.gl-svh2 { margin-bottom: 24px; }

/* ---------- Первый экран ---------- */
.gl-svhero {
  position: relative;
  padding: 130px 0 calc(92 * .6px + 40px);
  color: var(--c-w);
  text-align: center;
}
.gl-svhero__bg { position: absolute; inset: 0; background: #2a2a2a center / cover no-repeat; }
.gl-svhero__content { position: relative; z-index: 1; }
.gl-svhero__title {                     /* H1: NHG Display 65, 96/96, −5.5% */
  margin: 0;
  font-family: var(--f-grotesk);
  font-weight: 600;
  font-size: clamp(40px, 11vw, 64px);
  line-height: 1.001;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.gl-svhero__lead { margin: 20px auto 0; max-width: 920px; font-size: 16px; line-height: 1.219; font-weight: 500; }

/* Стрелка «Bounce» (Animate It): прыжок вверх-вниз */
.gl-svhero__down {
  position: relative; z-index: 1;
  display: block; width: 24px; height: 50px; margin: 24px auto 0;
  animation: gl-bounce 1s ease-in-out infinite;
}
.gl-svhero__down svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--c-w); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
@keyframes gl-bounce {
  0%, 20%, 53%, 100% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  40%, 43% { transform: translate3d(0, -30%, 0); animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
  70% { transform: translate3d(0, -15%, 0); animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
  80% { transform: translate3d(0, 0, 0); }
  90% { transform: translate3d(0, -4%, 0); }
}
@media (prefers-reduced-motion: reduce) { .gl-svhero__down { animation: none; } }

/* Бегущая строка: СОЦСЕТИ КОНТЕНТ-ПЛАН …, 64px, фон B1 */
.gl-marquee--svc {
  --u: .6px;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: calc(92 * var(--u));
  background: var(--c-b1);
  color: var(--c-w);
  text-align: left;
}
.gl-svstrip { display: flex; align-items: baseline; flex: none; }
.gl-svstrip span { white-space: pre; font-size: calc(64 * var(--u)); }
.gl-svstrip .n { font-family: var(--f-grotesk); font-weight: 500; line-height: 1.25; letter-spacing: -0.11em; }
.gl-svstrip .w { font-family: var(--f-serif); font-style: italic; font-weight: 600; line-height: 1.4; }
.gl-svstrip .n + .w { margin-left: calc(20 * var(--u)); }

/* ---------- Зачем вам это? ---------- */
.gl-why-svc__list {
  display: flex; flex-direction: column; gap: 16px;
  margin: 0; padding: 0;
  list-style: decimal;
  font-size: 16px; line-height: 1.219; font-weight: 500;
}
.gl-why-svc__list li { margin-left: 24px; }

/* ---------- Кейсы с вкладками ---------- */
.gl-svtabs { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 24px; }
.gl-svtab {
  padding: 0; border: 0; background: none;
  font-family: var(--f-text); font-weight: 500; font-size: 20px; line-height: 1.219;
  color: var(--c-b1);
  cursor: pointer;
}
/* Ховер по UI-киту: текст градиентом */
.gl-svtab:hover, .gl-svtab:focus-visible {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gl-svtab:focus-visible { outline: 1px dashed var(--c-b1); outline-offset: 4px; }

.gl-svcase { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.gl-svcase[hidden] { display: none; }
.gl-svcase__visual { width: 100%; height: auto; aspect-ratio: 1280 / 450; object-fit: cover; }
/* Картинка с видео поверх (экран ноутбука в кейсе «Дизайна»): позиция видео — в % от картинки. */
.gl-svcase__media { position: relative; width: 100%; }
.gl-svcase__media .gl-svcase__visual { display: block; }
.gl-svcase__video {
  position: absolute; display: block; object-fit: cover; background: #e9e9e9;
  border-radius: 2.326% 2.326% 0 .698% / 3.584% 3.584% 0 1.075%;   /* 10 10 0 3 при 430 × 279 */
}
.gl-svcase__visual[style] { aspect-ratio: 1280 / var(--h); }
.gl-svrow__body li.gl-li2 { margin-left: 48px; }   /* второй уровень отступа, как в макете */
.gl-svcase__text { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.gl-svrow { display: flex; flex-direction: column; gap: 12px; }
.gl-svrow__label { font-size: 24px; line-height: 1.219; font-weight: 500; }
.gl-svrow__body { font-size: 16px; line-height: 1.219; font-weight: 500; }
.gl-svrow__body p { margin: 0; }
.gl-svrow__body p + p { margin-top: 0; }   /* интервалы в макете — пустыми абзацами */
.gl-svrow__body strong, .gl-pill__cap strong { font-weight: 700; }
.gl-svrow__body ul, .gl-svrow__body ol { margin: 0; padding: 0; }
.gl-svrow__body ul { list-style: disc; }
.gl-svrow__body li { margin: 0 0 10px 24px; }
.gl-svrow__body li:last-child { margin-bottom: 0; }

/* Заголовок с линиями: «82 заявки по 555 ₽ …  ———» / «——— с помощью …» */
.gl-svhead { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: -16px; }
.gl-svhead p {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--f-grotesk); font-weight: 600; font-size: 26px; line-height: 1.001; letter-spacing: -0.055em;
}
.gl-svhead span { flex: 0 1 auto; }
.gl-svhead__l2 span { text-align: right; }
.gl-svhead i { display: none; flex: 1 1 0; height: 2px; background: currentColor; }   /* линии — только на десктопе */
.gl-svhead__l2 { justify-content: flex-end; }
/* Цифры крупно и подпись со стрелкой */
.gl-svstats { width: 100%; margin-top: -16px; }
.gl-svstats__list {
  display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none;
  font-family: var(--f-grotesk); font-weight: 600; font-size: 28px; line-height: 1.001; letter-spacing: -0.055em;
}
.gl-svstats__cap { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 16px; line-height: 1.219; font-weight: 500; }
.gl-svstats__cap .gl-arrow { flex: none; width: 56px; }

/* Результат цифрами: плашки 40px с обводкой, подписи 20px */
.gl-pills { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0; list-style: none; }
.gl-pills li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gl-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px;
  border: 1px solid #000; border-radius: 30px;
  font-family: var(--f-grotesk); font-weight: 600; font-size: 30px; line-height: 1.001; letter-spacing: -0.055em;
  color: #000; white-space: nowrap;
}
.gl-pill__cap { font-size: 16px; line-height: 1.219; font-weight: 500; }

/* ---------- Портфолио ---------- */
.gl-portfolio__grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 0; padding: 0; list-style: none; }
.gl-work__img { width: 100%; height: auto; aspect-ratio: 400 / 450; object-fit: cover; background: #d9d9d9; }
.gl-work__info { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.gl-work__name { font-size: 24px; line-height: 1.219; font-weight: 500; }
.gl-work__type { font-size: 18px; line-height: 1.219; font-weight: 500; text-align: right; }

/* ---------- Этапы работы ---------- */
.gl-stages__title { text-align: center; }
.gl-stages__scroller { margin-top: 0; }
.gl-stages__track { margin: 0; padding: 0; list-style: none; }
.gl-stage {
  flex: none;
  display: flex; flex-direction: column; gap: 20px;
  width: min(300px, calc(100vw - 48px));
  padding: 24px;
  background: var(--c-w);
  border: 1px solid var(--c-b1);
  border-radius: 30px;
  box-shadow: 6px 5px 0 #000;
}
.gl-stage__title {                      /* H4: NHG Display 65, 40/40, −5.5% */
  margin: 0;
  font-family: var(--f-grotesk); font-weight: 600; font-size: 26px; line-height: 1.001; letter-spacing: -0.055em;
}
.gl-stage__text { font-size: 16px; line-height: 1.219; font-weight: 500; }

@media (min-width: 576px) {
  .gl-portfolio__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .gl-pills { grid-template-columns: auto auto; justify-content: start; column-gap: 40px; }
}
@media (min-width: 768px) {
  .gl-why-svc__list { flex-direction: row; gap: 32px; }
  .gl-why-svc__list li { flex: 1 1 0; }
  .gl-svrow { flex-direction: row; gap: 40px; }
  .gl-svrow__label { flex: 0 0 30%; }
  .gl-svrow__body { flex: 1 1 auto; }
}

/* ---------- Десктоп ≥ 992: геометрия макета ---------- */
@media (min-width: 992px) {
  .gl-svh2 { margin-bottom: calc(70 * var(--u)); }

  .gl-svhero { height: calc(900 * var(--u)); padding: 0; }
  .gl-svhero__content { position: absolute; left: 0; right: 0; top: calc(var(--ht, 285) * var(--u)); padding: 0; }
  .gl-svhero__title { width: fit-content; min-width: calc(700 * var(--u)); max-width: calc(1280 * var(--u)); margin-inline: auto; font-size: calc(96 * var(--u)); }
  .gl-svhero__lead { width: calc(920 * var(--u)); max-width: none; margin-top: calc(var(--hg, 42) * var(--u)); font-size: calc(20 * var(--u)); }
  /* стрелка «Bounce»: под описанием, отступ по макету услуги (СММ 25, Реклама 30) */
  .gl-svhero__down { width: calc(24 * var(--u)); height: calc(50 * var(--u)); margin: calc((var(--ha, 25) - 1.5) * var(--u)) auto 0; }
  .gl-marquee--svc { --u: inherit; top: calc((900 - var(--mh, 92)) * var(--u)); bottom: auto; height: calc(var(--mh, 92) * var(--u)); }

  .gl-why-svc .gl-svh2 { margin-bottom: calc(40 * var(--u)); }
  .gl-why-svc__list { align-items: center; gap: calc(var(--gap, 55) * var(--u)); font-size: calc(20 * var(--u)); }
  .gl-why-svc__list li { flex: 1 1 0; margin-left: calc(30 * var(--u)); }
  .gl-why-svc__list li[style] { flex: none; width: calc((var(--w) - 30) * var(--u)); }

  .gl-svtabs { flex-wrap: nowrap; gap: calc(30 * var(--u)); margin-bottom: calc(40 * var(--u)); }
  .gl-svtab { font-size: calc(32 * var(--u)); white-space: nowrap; }
  .gl-svcase { gap: calc(70 * var(--u)); }
  .gl-svcase__visual { aspect-ratio: auto; height: calc(450 * var(--u)); }
  .gl-svcase__visual[style] { aspect-ratio: auto; height: calc(var(--h) * var(--u)); }
  .gl-svcase__text { gap: calc(40 * var(--u)); }
  .gl-svcase__text--last { width: calc(1266 * var(--u)); }
  .gl-svrow { gap: calc(110 * var(--u)); }
  .gl-svrow__label { flex: none; width: calc(400 * var(--u)); font-size: calc(32 * var(--u)); }
  .gl-svrow__body { flex: none; width: calc(770 * var(--u)); font-size: calc(20 * var(--u)); }
  .gl-svrow__body li { margin: 0 0 calc(10 * var(--u)) calc(30 * var(--u)); }
  .gl-svrow__body li:last-child { margin-bottom: 0; }
  .gl-svrow__body li.gl-li2 { margin-left: calc(60 * var(--u)); }
  /* Высоты текстовых блоков из макета (больше текста — блок растёт) */
  .gl-svrow[style] { min-height: calc(var(--min) * var(--u)); }
  .gl-svcase__text--last .gl-svrow__body { width: calc(756 * var(--u)); }
  .gl-why-svc[style] { margin-bottom: calc((var(--after) - 140) * var(--u)); }
  .gl-svcases[style] { padding-bottom: calc((var(--after) - 140) * var(--u)); }

  /* Заголовок с линиями и цифры крупно (кейсы «Рекламы»): H3 54, отступ от картинки 20, до текста 50 */
  .gl-svhead, .gl-svstats { margin-top: calc(-50 * var(--u)); }
  .gl-svhead + .gl-svcase__text, .gl-svstats + .gl-svcase__text { margin-top: calc(-20 * var(--u)); }
  .gl-svhead { gap: calc(9 * var(--u)); }
  .gl-svhead p, .gl-svstats__list { font-size: calc(54 * var(--u)); }
  .gl-svhead p { gap: calc(10 * var(--u)); }
  .gl-svhead span { white-space: pre; flex: none; }
  .gl-svhead i { display: block; height: calc(2 * var(--u)); min-width: 1px; }
  .gl-svstats__list { flex-direction: row; justify-content: space-between; gap: 0; white-space: nowrap; }
  .gl-svstats__cap { justify-content: flex-end; gap: calc(20 * var(--u)); margin-top: calc(15 * var(--u)); font-size: calc(20 * var(--u)); }
  .gl-svstats__cap .gl-arrow { width: calc(91 * var(--u)); }

  /* Плашки «рез-тат» 732 × 262, слева 511 (строка «результат» начинается с 7) */
  .gl-pills { grid-template-columns: calc(311 * var(--u)) calc(421 * var(--u)); gap: calc(24 * var(--u)) 0; width: calc(732 * var(--u)); margin-left: calc(-6 * var(--u)); }
  .gl-pills li { gap: calc(10 * var(--u)); }
  .gl-pill { padding: calc(10 * var(--u)); border-radius: calc(30 * var(--u)); font-size: calc(40 * var(--u)); }
  .gl-pill[style] { width: calc(var(--w) * var(--u)); }
  .gl-pill__cap { margin-left: calc(2 * var(--u)); font-size: calc(20 * var(--u)); }
  .gl-pills li:nth-child(even) .gl-pill__cap { margin-left: calc(5 * var(--u)); }
  .gl-pill__cap[style] { width: calc(var(--w) * var(--u)); }

  /* Портфолио: коллаж, карточки 400 × 499 на своих местах */
  .gl-svcases + .gl-portfolio { margin-top: calc(73 * var(--u)); }
  .gl-portfolio__grid { display: block; position: relative; height: calc(var(--h) * var(--u)); }
  .gl-work { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(400 * var(--u)); }
  .gl-work__img { aspect-ratio: auto; height: calc(450 * var(--u)); }
  .gl-work__info { gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
  .gl-work__name { font-size: calc(32 * var(--u)); white-space: nowrap; }
  .gl-work__type { font-size: calc(24 * var(--u)); white-space: nowrap; }

  /* Этапы: карточки 398 × 369 (первая 403), отступ 40, тень 6/5 */
  .gl-stages__scroller { padding-top: calc(4 * var(--u)); padding-bottom: calc(7 * var(--u)); }
  .gl-stage { width: calc(398 * var(--u)); height: calc(369 * var(--u)); padding: calc(30 * var(--u)); gap: calc(30 * var(--u)); border-radius: calc(30 * var(--u)); box-shadow: calc(6 * var(--u)) calc(5 * var(--u)) 0 #000; }
  .gl-stage:first-child { width: calc(403 * var(--u)); }
  .gl-stage__title { width: calc(345 * var(--u)); font-size: calc(40 * var(--u)); }
  .gl-stage:first-child .gl-stage__title { width: calc(var(--t1, 456) * var(--u)); }
  .gl-stage__text { font-size: calc(24 * var(--u)); }
}

/* ==========================================================================
   СТРАНИЦА «КЕЙСЫ» (шаблон «Кейсы»)
   Макет Figma: «Кейсы», 1440 × 9384, фон W1, шапка тёмная.
   ========================================================================== */
.gl-cpage__head { padding-top: 110px; }
.gl-cpage__intro { display: flex; flex-direction: column; gap: 16px; }
.gl-cpage__title {                      /* NHG Display 65, 200/200, −5.5% */
  margin: 0;
  font-family: var(--f-grotesk); font-weight: 600;
  font-size: min(200px, calc((100vw - 32px) / 3.5));
  line-height: 1.001; letter-spacing: -0.055em;
  text-transform: uppercase; white-space: nowrap;
}
.gl-cpage__lead { max-width: 510px; font-size: 18px; line-height: 1.219; font-weight: 500; }
.gl-cpage__nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 32px; }
.gl-cpage__nav a {                      /* «кнопка_1»: NHG Display 55, 32px, прописные */
  font-family: var(--f-grotesk); font-weight: 500; font-size: 20px; line-height: 1.25;
  text-transform: uppercase; text-decoration: none; color: var(--c-b1);
}
.gl-cpage__nav a:hover, .gl-cpage__nav a:focus-visible {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gl-cpage__clients { margin-top: 40px; }

.gl-csec { scroll-margin-top: 20px; }
.gl-csec__label { margin: 0 0 24px; font-family: var(--f-text); font-weight: 500; font-size: 24px; line-height: 1.219; }
.gl-csec__list { display: flex; flex-direction: column; gap: 40px; max-width: calc(1440 * var(--u)); margin-inline: auto; }
.gl-crow { display: flex; flex-direction: column; gap: 16px; padding-inline: 16px; }
.gl-crow__visual img { display: block; width: 100%; height: auto; aspect-ratio: 850 / 450; object-fit: cover; background: #d9d9d9; }
.gl-crow__text { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.gl-crow__top { display: flex; flex-direction: column; gap: 16px; }
.gl-crow__title {                       /* H3: NHG Display 65, 54/54, −5.5% */
  margin: 0;
  font-family: var(--f-grotesk); font-weight: 600; font-size: 32px; line-height: 1.001; letter-spacing: -0.055em;
  text-transform: uppercase;
}
.gl-crow__desc { font-size: 16px; line-height: 1.219; font-weight: 500; }
.gl-crow__more {                        /* «кнопка_2»: NHG Display 55, 20px, подчёркнута */
  align-self: flex-start;
  font-family: var(--f-grotesk); font-weight: 500; font-size: 18px; line-height: 1.25;
  color: var(--c-b1); text-decoration: underline;
}

@media (min-width: 768px) {
  .gl-crow, .gl-cpage__head .gl-container { padding-inline: 40px; }
}

@media (min-width: 992px) {
  .gl-cpage__head { padding-top: calc(221 * var(--u)); }
  .gl-cpage__head .gl-container { padding-inline: calc(80 * var(--u)); }
  .gl-cpage__intro { flex-direction: row; align-items: center; gap: calc(99 * var(--u)); }
  .gl-cpage__title { font-size: calc(200 * var(--u)); }
  .gl-cpage__lead { flex: none; width: calc(510 * var(--u)); max-width: none; font-size: calc(24 * var(--u)); }
  .gl-cpage__nav { gap: calc(10 * var(--u)) calc(30 * var(--u)); margin-top: calc(70 * var(--u)); }
  .gl-cpage__nav a { font-size: calc(32 * var(--u)); white-space: nowrap; }
  .gl-cpage__clients { margin-top: calc(70 * var(--u)); }

  .gl-csec__label { margin-bottom: calc(70 * var(--u)); font-size: calc(32 * var(--u)); }
  .gl-csec__list { gap: calc(40 * var(--u)); }

  /* Ряд 1360 × 450: картинка 850 у края макета, текст 440, отступ 70.
     Чётные ряды — зеркально, со сдвигом 80 слева. */
  .gl-crow { flex-direction: row; align-items: flex-start; gap: calc(70 * var(--u)); padding: 0; width: calc(1360 * var(--u)); }
  .gl-crow--rev { flex-direction: row-reverse; margin-left: calc(80 * var(--u)); }
  .gl-crow__visual { flex: none; width: calc(850 * var(--u)); height: calc(450 * var(--u)); }
  .gl-crow__visual img { height: 100%; aspect-ratio: auto; }
  .gl-crow__text { flex: none; width: calc(440 * var(--u)); height: calc(450 * var(--u)); gap: 0; text-align: right; }
  .gl-crow--rev .gl-crow__text { text-align: left; }
  .gl-crow__top { gap: calc(40 * var(--u)); }
  .gl-crow__title { font-size: calc(54 * var(--u)); }
  .gl-crow__desc { font-size: calc(20 * var(--u)); }
  .gl-crow__more { align-self: flex-end; font-size: calc(20 * var(--u)); }
  .gl-crow--rev .gl-crow__more { align-self: flex-start; }
}

/* ==========================================================================
   ОКНО «УСПЕШНО ПРИНЯТО» (фрейм «сообщение об отпарвке заявки», 861 × 625)
   ========================================================================== */
.gl-modal {
  position: fixed; inset: 0; z-index: 1060;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
  opacity: 0; transition: opacity .3s ease-out;
}
.gl-modal[hidden] { display: none; }
.gl-modal.is-open { opacity: 1; }
.gl-done-backdrop { position: fixed; inset: 0; z-index: 1055; background: #000; opacity: 0; transition: opacity .3s ease-out; }
.gl-done-backdrop.is-open { opacity: .5; }
.gl-noscroll, .gl-noscroll body { overflow: hidden; }
.gl-modal__dialog { width: 100%; margin: auto; transform: translateY(-20px); transition: transform .3s ease-out; }
.gl-modal.is-open .gl-modal__dialog { transform: none; }
.gl-done__dialog { max-width: min(861px, calc(100vw - 32px)); }
.gl-done__card:focus { outline: none; }
.gl-done__card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 20px;
  background: var(--c-w);
  border: 1px solid #000;
  border-radius: 30px;
  box-shadow: 6px 5px 0 #000;
  color: #000;
  text-align: center;
}
.gl-done__media { position: relative; width: min(573px, 100%); margin-bottom: -10px; } /* тень ТВ выходит за рамку группы на 10px */
.gl-done__img { display: block; width: 100%; height: auto; }
.gl-done__gif {                          /* GIF в экране ТВ: 103, 74, 246 × 192 в 573 × 388 */
  position: absolute; left: 17.976%; top: 19.072%; width: 42.932%; height: 49.485%;
  border-radius: 14.228% / 18.229%;      /* 35px */
  object-fit: cover; background: #bdbdbd;
}
.gl-done__body { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.gl-done__title {                       /* H3: NHG Display 65, 54/54, −5.5% */
  font-family: var(--f-grotesk); font-weight: 600; font-size: 32px; line-height: 1.001; letter-spacing: -0.055em;
}
.gl-done__text { font-size: 16px; line-height: 1.219; font-weight: 500; }
.gl-done__back {                        /* «кнопка_2»: NHG Display 55, 20px, подчёркнута */
  padding: 0; border: 0; background: none; color: inherit;
  font-family: var(--f-grotesk); font-weight: 500; font-size: 18px; line-height: 1.25;
  text-decoration: underline; cursor: pointer;
}

@media (min-width: 992px) {
  .gl-done__dialog { max-width: calc(861 * var(--u)); }
  .gl-done__card { gap: calc(30 * var(--u)); padding: calc(30 * var(--u)); border-radius: calc(30 * var(--u)); box-shadow: calc(6 * var(--u)) calc(5 * var(--u)) 0 #000; }
  .gl-done__media { width: calc(573 * var(--u)); margin-bottom: calc(-10 * var(--u)); }
  .gl-done__body { gap: calc(20 * var(--u)); }
  .gl-done__title { font-size: calc(54 * var(--u)); }
  .gl-done__text { font-size: calc(20 * var(--u)); }
  .gl-done__back { font-size: calc(20 * var(--u)); }
}

/* ==========================================================================
   КВИЗ-ФОРМА (фреймы «форма_обратной_связи_01» 778 × 624, «_02» 700 × 624,
   короткая «форма_обратной_связи» 700 × 579)
   ========================================================================== */
.gl-quiz__dialog { max-width: min(778px, calc(100vw - 32px)); }
.gl-quiz.is-step-2 .gl-quiz__dialog { max-width: min(700px, calc(100vw - 32px)); }
.gl-quiz__card {
  padding: 20px;
  background: var(--c-w);
  border: 1px solid #000;
  border-radius: 30px;
  box-shadow: 6px 5px 0 #000;
  color: var(--c-b1);
}
.gl-quiz__card:focus { outline: none; }
.gl-quiz__step { display: flex; flex-direction: column; gap: 24px; }
.gl-quiz__step[hidden] { display: none; }
.gl-quiz--brief .gl-quiz__step { gap: 30px; }                  /* короткая форма: 40 */
.gl-quiz__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.gl-quiz__title {                       /* H4: NHG Display 65, 40/40, −5.5% */
  width: 100%;
  font-family: var(--f-grotesk); font-weight: 600; font-size: 24px; line-height: 1.001; letter-spacing: -0.055em;
  text-transform: uppercase;
}
.gl-quiz--brief .gl-quiz__title--quiz, .gl-quiz:not(.gl-quiz--brief) .gl-quiz__title--brief,
.gl-quiz--brief .gl-quiz__num--2 { display: none; }
.gl-quiz__line { display: block; width: 100%; height: 1px; background: #000; }
.gl-quiz__num {                         /* плашка 106 × 35, Neutral, M20 белым */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 86px; height: 30px; padding: 0 10px; border-radius: 30px;
  background: var(--c-neutral); color: var(--c-w);
  font-size: 16px; line-height: 1.219; font-weight: 500;
}
.gl-quiz__opts { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.gl-quiz__opt { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; line-height: 1.219; font-weight: 500; }
.gl-quiz__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gl-quiz__dot {                         /* круг 24 × 24, обводка B1 */
  position: relative; flex: 0 0 auto; width: 20px; height: 20px;
  border: 1px solid var(--c-b1); border-radius: 50%; background: var(--c-w);
  transition: box-shadow .3s ease-out;
}
.gl-quiz__dot::after {
  content: ""; position: absolute; inset: 20%; border-radius: 50%; background: var(--c-b1);
  transform: scale(0); transition: transform .2s ease-out;
}
.gl-quiz__opt input:checked + .gl-quiz__dot::after { transform: scale(1); }
.gl-quiz__opt:hover .gl-quiz__dot { box-shadow: 0 0 0 3px rgba(247, 155, 89, .45); }
.gl-quiz__opt input:focus-visible + .gl-quiz__dot { outline: 2px solid #F79B59; outline-offset: 2px; }
.gl-quiz__fields { display: flex; flex-direction: column; gap: 16px; }
.gl-quiz__foot { display: flex; flex-direction: column; gap: 16px; }
.gl-quiz__btn { width: 100%; }
.gl-quiz__note { font-size: 11px; line-height: 1.215; font-weight: 400; text-align: center; }
.gl-quiz__status { font-size: 13px; line-height: 1.215; font-weight: 500; color: #c0392b; }
.gl-quiz__status:empty { display: none; }

@media (min-width: 992px) {
  .gl-quiz__dialog { max-width: calc(778 * var(--u)); }
  .gl-quiz.is-step-2 .gl-quiz__dialog { max-width: calc(700 * var(--u)); }
  .gl-quiz__card { padding: calc(30 * var(--u)); border-radius: calc(30 * var(--u)); box-shadow: calc(6 * var(--u)) calc(5 * var(--u)) 0 #000; }
  .gl-quiz__step, .gl-quiz__head { gap: calc(30 * var(--u)); }
  .gl-quiz--brief .gl-quiz__step { gap: calc(40 * var(--u)); }
  .gl-quiz__title { font-size: calc(40 * var(--u)); }
  .gl-quiz:not(.gl-quiz--brief) .gl-quiz__step--2 .gl-quiz__head { width: calc(609 * var(--u)); }
  .gl-quiz__num { min-width: calc(106 * var(--u)); height: calc(35 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(30 * var(--u)); font-size: calc(20 * var(--u)); }
  .gl-quiz__opts { gap: calc(10 * var(--u)); }
  .gl-quiz__opt { gap: calc(10 * var(--u)); font-size: calc(20 * var(--u)); }
  .gl-quiz__dot { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .gl-quiz__fields, .gl-quiz__foot { gap: calc(20 * var(--u)); }
  .gl-quiz__step--1 .gl-quiz__btn { height: auto; padding: calc(10 * var(--u)); }   /* «ДАЛЕЕ»: высота по тексту + 10/10 */
  .gl-quiz__note, .gl-quiz__status { font-size: calc(13 * var(--u)); }
}

/* ---------- Галерея работ (услуга «Полиграфия»: кейсы — коллаж картинок с подписями) ---------- */
.gl-gallery__list { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 0; padding: 0 16px; list-style: none; }
.gl-gwork__img { display: block; width: 100%; height: auto; object-fit: cover; background: #d9d9d9; }
.gl-gwork__info { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.gl-gwork__name { font-size: 22px; line-height: 1.219; font-weight: 500; }
.gl-gwork__type { font-size: 16px; line-height: 1.219; font-weight: 500; text-align: right; }
@media (min-width: 768px) {
  .gl-gallery__list { grid-template-columns: 1fr 1fr; padding-inline: 40px; }
}
@media (min-width: 992px) {
  .gl-gallery__list { gap: calc(40 * var(--u)) calc(40 * var(--u)); max-width: calc(1440 * var(--u)); margin-inline: auto; padding-inline: calc(80 * var(--u)); }
  .gl-gwork__info { gap: calc(20 * var(--u)); margin-top: calc(20 * var(--u)); }
  .gl-gwork__name { font-size: calc(32 * var(--u)); white-space: nowrap; }
  .gl-gwork__type { font-size: calc(24 * var(--u)); white-space: nowrap; }
  /* Коллаж из макета: места и размеры в px макета 1440 */
  .gl-gallery__list.is-placed { display: block; position: relative; height: calc(var(--h) * var(--u)); padding: 0; }
  .is-placed .gl-gwork { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); display: flex; flex-direction: column; align-items: flex-start; }
  .is-placed .gl-gwork--end { align-items: flex-end; }
  .is-placed .gl-gwork__img { height: calc(var(--ih) * var(--u)); }
  .is-placed .gl-gwork__info { width: calc(var(--cw) * var(--u)); }
}

/* ---------- Кейс свободной раскладки (услуга «Дизайн»): две колонки, подпись над текстом ---------- */
.gl-svsplit { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.gl-svsplit__col { display: flex; flex-direction: column; gap: 32px; }
.gl-svsplit .gl-svcase__visual[style] { aspect-ratio: auto; height: auto; }
.gl-svstack { display: flex; flex-direction: column; gap: 16px; }
.gl-svstack .gl-svrow__label { width: auto; }
.gl-svplain { width: 100%; }
/* Портфолио с подписью без «сферы» (ЛОГОФОЛИО): подпись 24px, переносится */
.gl-work--cap .gl-work__name { font-size: 18px; white-space: normal; }
@media (min-width: 992px) {
  .gl-svsplit { flex-direction: row; align-items: flex-start; gap: calc(75 * var(--u)); }
  .gl-svsplit__col { flex: none; width: calc(603 * var(--u)); gap: calc(70 * var(--u)); }
  .gl-svsplit__col + .gl-svsplit__col { width: calc(602 * var(--u)); }
  .gl-svsplit .gl-svcase__visual[style] { height: calc(var(--h) * var(--u)); }
  .gl-svstack { gap: calc(42 * var(--u)); }
  .gl-svstack .gl-svrow__body, .gl-svsplit .gl-svplain { width: auto; }
  .gl-work[style*="--ih"] .gl-work__img { height: calc(var(--ih) * var(--u)); }
  .gl-work--cap .gl-work__info { justify-content: flex-start; }
  .gl-work--cap .gl-work__name { font-size: calc(24 * var(--u)); white-space: normal; }
}

/* ==========================================================================
   СТРАНИЦА «КОМАНДА» (шаблон «Команда»). Макет: 1440 × 7579.
   ========================================================================== */
/* ---------- Первый экран: фото команды со скотчем, заголовок, бегущая строка ---------- */
.gl-thero { position: relative; background: var(--c-b1); color: var(--c-w); padding: 96px 16px calc(92 * .6px + 40px); }
.gl-thero__photo img { display: block; width: 100%; height: auto; }
.gl-thero__title {
  margin: -8% 0 0; position: relative;
  font-family: var(--f-grotesk); font-weight: 600; font-size: clamp(22px, 7vw, 64px); line-height: 1.001; letter-spacing: -0.055em;
}
.gl-thero__title span { display: block; white-space: nowrap; }
.gl-thero__l2 { padding-left: 8%; }

/* ---------- Коллаж «Привет! Мы — Goodlook» ---------- */
.gl-tcollage { padding: 40px 16px 0; }
.gl-tcollage__box { position: relative; }
.gl-tcollage__ph, .gl-tcollage__tapes { display: none; }
.gl-tcollage__text { font-size: 18px; line-height: 1.219; font-weight: 500; text-align: center; max-width: 620px; margin: 0 auto; }

/* ---------- Манифест ---------- */
.gl-manifest__title {
  margin: 0; text-align: center;
  font-family: var(--f-grotesk); font-weight: 600; font-size: clamp(48px, 15vw, 200px); line-height: 1.001; letter-spacing: -0.055em;
}
.gl-manifest__values { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin: 16px 16px 24px; }
.gl-manifest__line { display: none; }
.gl-manifest__value { margin: 0; font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 32px; line-height: 1.2; }
.gl-manifest__row { display: flex; flex-direction: column; gap: 20px; }
.gl-manifest__text { font-size: 18px; line-height: 1.219; font-weight: 500; }
.gl-manifest__photo { display: block; width: 100%; height: auto; }

/* ---------- Как это работает ---------- */
.gl-how { padding: 40px 0; background: #6b4a2a center / cover no-repeat; color: var(--c-w); }
.gl-how__title { margin-bottom: 24px; }
.gl-how__list { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; font-weight: 500; }
.gl-how__list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.gl-how__step { font-size: 22px; line-height: 1.219; }
.gl-how__name { font-size: 18px; line-height: 1.219; align-self: center; }
.gl-how__text { grid-column: 1 / -1; font-size: 16px; line-height: 1.219; }

/* ---------- GOODLOOK в цифрах ---------- */
.gl-numbers__inner { display: flex; flex-direction: column; gap: 24px; }
.gl-numbers__list { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.gl-numbers__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--c-b1); }
.gl-numbers__row dt { font-size: 16px; line-height: 1.219; font-weight: 500; }
.gl-numbers__row dd { margin: 0; font-family: var(--f-grotesk); font-weight: 600; font-size: 48px; line-height: 1.001; letter-spacing: -0.055em; white-space: nowrap; }

/* ---------- Сотрудники ---------- */
.gl-members__title { text-align: center; margin-bottom: 32px; }
.gl-members__grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 0; padding: 0; list-style: none; }
.gl-member__photo { display: block; width: 100%; height: auto; aspect-ratio: 400 / 450; object-fit: cover; }
.gl-member__photo--empty { background: var(--c-neutral); }
.gl-member__info {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 20px 0 0; padding: 8px 0;
  border-top: 1px solid #000; border-bottom: 1px solid #000;
  font-weight: 500; line-height: 1.219;
}
.gl-member__name { font-size: 24px; white-space: nowrap; }
.gl-member__role {
  font-size: 18px; text-align: right;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Ссылка на вакансии ---------- */
.gl-team__vacancy { margin-top: 80px; text-align: center; }
.gl-team__vacancy a {
  font-family: var(--f-grotesk); font-weight: 500; font-size: 20px; line-height: 1.25;
  text-transform: uppercase; text-decoration: underline; color: var(--c-b1);
}
.gl-team__vacancy a:hover, .gl-team__vacancy a:focus-visible {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (min-width: 576px) {
  .gl-members__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (min-width: 768px) {
  .gl-how__list li { grid-template-columns: 120px 180px 1fr; }
  .gl-how__text { grid-column: auto; }
}

/* ---------- Десктоп ≥ 992: геометрия макета ---------- */
@media (min-width: 992px) {
  .gl-thero { height: calc(905 * var(--u)); padding: 0; background: linear-gradient(var(--c-b1), var(--c-b1)) 0 0 / 100% calc(900 * var(--u)) no-repeat; background-color: transparent; }
  /* Фото строго по центру экрана (в макете оно сдвинуто на 12px влево — по просьбе выровнено) */
  .gl-thero__photo { position: absolute; left: 50%; transform: translateX(-50%); top: calc(123 * var(--u)); width: calc(1108 * var(--u)); }
  .gl-thero__photo img { display: block; width: 100%; max-width: none; height: calc(675 * var(--u)); }
  .gl-thero__title { position: absolute; left: calc(50% - 720 * var(--u)); top: calc(556 * var(--u)); margin: 0; width: calc(1440 * var(--u)); font-size: calc(96 * var(--u)); }
  .gl-thero__l1 { margin-left: calc(80 * var(--u)); }
  .gl-thero__l2 { position: absolute; left: calc(306 * var(--u)); top: calc(91 * var(--u)); padding: 0; }

  /* Коллаж: 1344 × 704, левее контейнера на 32 */
  .gl-tcollage { padding: calc(42 * var(--u)) 0 0; }
  .gl-tcollage__box { width: calc(1344 * var(--u)); height: calc(704 * var(--u)); margin-left: calc((100% - 1440 * var(--u)) / 2 + 48 * var(--u)); }
  .gl-tcollage__ph { display: block; position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); background: var(--c-neutral); }
  .gl-tcollage__tapes { display: block; position: absolute; left: 0; top: 0; width: calc(1344 * var(--u)); height: auto; pointer-events: none; }
  .gl-tcollage__text { position: absolute; left: calc(362 * var(--u)); top: calc(265 * var(--u)); width: calc(620 * var(--u)); max-width: none; margin: 0; font-size: calc(24 * var(--u)); }

  .gl-manifest__title { font-size: calc(200 * var(--u)); }
  .gl-manifest__values { display: block; position: relative; width: calc(1440 * var(--u)); height: calc(168 * var(--u)); margin: calc(40 * var(--u)) auto; }
  .gl-manifest__line { display: block; position: absolute; height: auto; }
  .gl-manifest__line--1 { left: calc(29 * var(--u)); top: calc(-1 * var(--u)); width: calc(251 * var(--u)); }
  .gl-manifest__line--2 { left: calc(277 * var(--u)); top: calc(105 * var(--u)); width: calc(421 * var(--u)); }
  .gl-manifest__line--3 { left: calc(751 * var(--u)); top: calc(17 * var(--u)); width: calc(404 * var(--u)); }
  .gl-manifest__line--4 { left: calc(1195 * var(--u)); top: calc(115 * var(--u)); width: calc(210 * var(--u)); }
  .gl-manifest__value { position: absolute; transform: translateX(-50%); white-space: nowrap; font-size: calc(64 * var(--u)); line-height: 1.172; }
  .gl-manifest__value:nth-of-type(1) { left: calc(248 * var(--u)); top: calc(32 * var(--u)); }
  .gl-manifest__value:nth-of-type(2) { left: calc(737 * var(--u)); top: calc(74 * var(--u)); }
  .gl-manifest__value:nth-of-type(3) { left: calc(1202 * var(--u)); top: calc(32 * var(--u)); }
  .gl-manifest__row { flex-direction: row; align-items: center; gap: calc(40 * var(--u)); padding-inline: calc(81 * var(--u)); }
  .gl-manifest__text { flex: none; width: calc(620 * var(--u)); font-size: calc(24 * var(--u)); }
  .gl-manifest__photo { flex: none; width: calc(618 * var(--u)); height: calc(145 * var(--u)); object-fit: cover; }

  .gl-manifest + .gl-how { margin-top: calc(168 * var(--u)); }
  .gl-how { height: calc(636 * var(--u)); padding: calc(44 * var(--u)) 0 0; }
  .gl-how .gl-container { padding-left: calc(79 * var(--u)); }
  .gl-how__title { margin-bottom: calc(60 * var(--u)); white-space: nowrap; }
  .gl-how__list { gap: calc(40 * var(--u)); }
  .gl-how__list li { grid-template-columns: calc(221 * var(--u)) calc(290 * var(--u)) calc(770 * var(--u)); gap: 0; align-items: start; }
  .gl-how__step { font-size: calc(32 * var(--u)); white-space: nowrap; }
  .gl-how__name { align-self: start; margin-top: calc(5 * var(--u)); font-size: calc(24 * var(--u)); white-space: nowrap; }
  .gl-how__text { margin-top: calc(5 * var(--u)); font-size: calc(20 * var(--u)); }
  .gl-how__list li:first-child .gl-how__text { width: calc(700 * var(--u)); }

  .gl-numbers__inner { flex-direction: row; align-items: flex-start; gap: calc(39 * var(--u)); padding-left: calc(79 * var(--u)); }
  .gl-numbers__title { flex: none; width: calc(472 * var(--u)); }
  .gl-numbers__list { flex: none; width: calc(771 * var(--u)); gap: calc(30 * var(--u)); }
  .gl-numbers__row { padding-bottom: 0; }
  .gl-numbers__row dt { font-size: calc(24 * var(--u)); margin-bottom: calc(9 * var(--u)); }
  .gl-numbers__row dd { font-size: calc(96 * var(--u)); line-height: 0.95; }

  .gl-members__title { margin-bottom: calc(70 * var(--u)); }
  .gl-members__grid { display: block; position: relative; width: calc(1281 * var(--u)); height: calc(var(--h) * var(--u)); }
  .gl-member { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(400 * var(--u)); }
  .gl-member__photo { aspect-ratio: auto; height: calc(450 * var(--u)); }
  .gl-member__info { margin-top: calc(30 * var(--u)); padding: calc(10 * var(--u)) 0; gap: calc(10 * var(--u)); }
  .gl-member__name { font-size: calc(32 * var(--u)); }
  .gl-member__role { font-size: calc(24 * var(--u)); }

  .gl-team__vacancy { margin-top: calc(140 * var(--u)); }
  .gl-team__vacancy a { font-size: calc(32 * var(--u)); white-space: nowrap; }
}

/* ==========================================================================
   СТРАНИЦА «ВАКАНСИИ» (шаблон «Вакансии»). Макет: 1440 × 1786, шапка тёмная.
   ========================================================================== */
.gl-vac__head { position: relative; padding-top: 110px; display: flex; flex-direction: column; gap: 20px; }
.gl-vac__title {
  margin: 0; font-family: var(--f-grotesk); font-weight: 600; text-transform: uppercase;
  font-size: min(200px, calc((100vw - 32px) / 5.2)); line-height: 1.001; letter-spacing: -0.055em;
}
.gl-vac__visual { width: 160px; height: auto; aspect-ratio: 236 / 200; object-fit: cover; }
.gl-vac__open { display: flex; flex-direction: column; gap: 24px; margin-top: 48px; }
.gl-vac__label { font-size: 24px; line-height: 1.219; font-weight: 500; }
.gl-vac__list { display: flex; flex-direction: column; gap: 28px; margin: 0; padding: 0; list-style: none; font-weight: 500; line-height: 1.219; }
.gl-vac__name { font-size: 24px; }
.gl-vac__link, .gl-vac__text a {
  font-size: inherit; text-decoration: none;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gl-vac__link { font-size: 18px; }
a.gl-vac__link:hover, .gl-vac__text a:hover { text-decoration: underline; text-decoration-color: #F79B59; }
.gl-vac__about { display: flex; flex-direction: column; gap: 24px; margin-top: 56px; }
.gl-vac__photo { display: block; width: 100%; height: auto; aspect-ratio: 510 / 450; object-fit: cover; }
.gl-vac__big { font-family: var(--f-grotesk); font-weight: 600; font-size: 24px; line-height: 1.001; letter-spacing: -0.055em; text-transform: uppercase; }
.gl-vac__text { margin-top: 24px; font-size: 18px; line-height: 1.219; font-weight: 500; }

@media (min-width: 992px) {
  .gl-vac__head { display: block; height: calc(443 * var(--u)); padding-top: 0; }
  .gl-vac__title { position: absolute; left: calc(80 * var(--u)); top: calc(240 * var(--u)); font-size: calc(200 * var(--u)); white-space: nowrap; }
  .gl-vac__visual { position: absolute; left: calc(1124 * var(--u)); top: calc(243 * var(--u)); width: calc(236 * var(--u)); height: calc(200 * var(--u)); }
  .gl-vac__open { display: block; position: relative; margin-top: calc(69 * var(--u)); min-height: calc(176 * var(--u)); }
  .gl-vac__label { position: absolute; left: calc(80 * var(--u)); top: 0; font-size: calc(32 * var(--u)); white-space: nowrap; }
  .gl-vac__list { margin-left: calc(620 * var(--u)); width: calc(387 * var(--u)); gap: calc(40 * var(--u)); }
  .gl-vac__name { font-size: calc(32 * var(--u)); }
  .gl-vac__link { font-size: calc(24 * var(--u)); }
  .gl-vac__about { flex-direction: row; align-items: flex-start; gap: calc(43 * var(--u)); margin-top: calc(70 * var(--u)); }
  .gl-vac__photo { flex: none; width: calc(510 * var(--u)); height: calc(450 * var(--u)); aspect-ratio: auto; }
  .gl-vac__about-text { flex: none; width: calc(730 * var(--u)); }
  .gl-vac__big { font-size: calc(40 * var(--u)); }
  .gl-vac__text { margin-top: calc(40 * var(--u)); font-size: calc(24 * var(--u)); }
}

/* Кейсы: плавная смена. Картинки — мягкий кроссфейд; текст не накладывается:
   старый заголовок и описание уходят вверх и гаснут, новые появляются чуть позже снизу. */
.gl-cases__carousel.carousel-fade .carousel-item { transition: opacity .8s cubic-bezier(.4, 0, .2, 1); }
.gl-cases__carousel.carousel-fade .active.carousel-item-start,
.gl-cases__carousel.carousel-fade .active.carousel-item-end { transition: opacity 0s .8s; }
.gl-cases__carousel .active.carousel-item-start .gl-case__head,
.gl-cases__carousel .active.carousel-item-end .gl-case__head {
  opacity: 0; transform: translateY(-12px);
  transition: opacity .3s ease-in, transform .3s ease-in;
}
.gl-cases__carousel .carousel-item-next.carousel-item-start .gl-case__head,
.gl-cases__carousel .carousel-item-prev.carousel-item-end .gl-case__head { animation: gl-case-in .55s .25s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes gl-case-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gl-cases__carousel .gl-case__head { animation: none !important; transition: none !important; transform: none !important; }
}

/* Кейсы v2: все слайды в одной ячейке сетки — блок не меняет высоту при смене кейса
   (у «ОРТОМЕДЦЕНТР» заголовок в одну строку), картинка всегда на одном месте. */
.gl-cases__carousel .carousel-inner { display: grid; }
.gl-cases__carousel .carousel-item {
  display: block; grid-area: 1 / 1; float: none; margin-right: 0;
  transform: none !important; backface-visibility: visible;
}
.gl-cases__carousel .carousel-item:not(.active):not(.carousel-item-next):not(.carousel-item-prev) { visibility: hidden; }
.gl-cases__carousel .gl-case { display: flex; flex-direction: column; height: 100%; }
.gl-cases__carousel .gl-case__head { flex: 1 0 auto; }
.gl-cases__carousel .gl-case__visual { flex: none; }
/* Текст: старый уходит за .35s, новый появляется после него — без наложения. */
.gl-cases__carousel .active.carousel-item-start .gl-case__head,
.gl-cases__carousel .active.carousel-item-end .gl-case__head { transition: opacity .35s ease-in, transform .35s ease-in; }
.gl-cases__carousel .carousel-item-next.carousel-item-start .gl-case__head,
.gl-cases__carousel .carousel-item-prev.carousel-item-end .gl-case__head { animation: gl-case-in .45s .33s cubic-bezier(.22, 1, .36, 1) both; }

/* ==========================================================================
   Слайдер «проведите, чтобы отправить» (защита форм от спама)
   ========================================================================== */
.gl-human {
  --k: 48px; --o: 4px; --x: 0px;
  position: relative; width: 100%; height: 58px; flex: none;
  border: 1px solid var(--c-b1); border-radius: 300px; background: var(--c-w);
  overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.gl-human__fill {
  position: absolute; top: 0; bottom: 0; left: 0; border-radius: 300px;
  width: calc(var(--x) + var(--k) + 2 * var(--o)); background: var(--grad);
  transition: width .35s cubic-bezier(.22, 1, .36, 1);
}
.gl-human__text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 20px 0 calc(var(--k) + 2 * var(--o));
  font-family: var(--f-text); font-weight: 500; font-size: 16px; color: var(--c-neutral);
  white-space: nowrap; pointer-events: none; transition: color .3s ease-out, opacity .2s;
}
.gl-human.is-drag .gl-human__text { opacity: .35; }
.gl-human__knob {
  position: absolute; top: var(--o); left: var(--o); width: var(--k); height: var(--k);
  display: grid; place-items: center; border-radius: 50%; background: var(--c-b1);
  transform: translateX(var(--x)); cursor: grab; touch-action: none; outline: none;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease-out, box-shadow .3s ease-out;
}
.gl-human.is-drag .gl-human__fill, .gl-human.is-drag .gl-human__knob { transition: none; }
.gl-human.is-drag .gl-human__knob { cursor: grabbing; }
.gl-human__knob:focus-visible { box-shadow: 0 0 0 3px rgba(247, 155, 89, .6); }
.gl-human__knob .gl-arrow { width: 26px; height: auto; fill: none; stroke: #fff; stroke-width: 1.4; }
.gl-human.is-busy .gl-human__text, .gl-human.is-done .gl-human__text { color: var(--c-b1); }
.gl-human.is-done .gl-human__knob { background: var(--c-w); cursor: default; }
.gl-human.is-done .gl-human__knob .gl-arrow { stroke: var(--c-b1); }
.gl-human.is-busy .gl-human__knob { animation: gl-human-pulse .8s ease-in-out infinite alternate; }
@keyframes gl-human-pulse { to { background-color: #555; } }
.gl-human.is-nudge { animation: gl-human-nudge .45s; }
@keyframes gl-human-nudge { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
/* пока слайдер не проведён — кнопка отправки приглушена (но нажимается и подсказывает, что сделать) */
.is-human-locked .gl-btn--submit[type="submit"] { opacity: .45; }
.is-human-locked .gl-btn--submit[type="submit"]::before { opacity: 0; }
@media (min-width: 992px) {
  .gl-human { --k: calc(52 * var(--u)); --o: calc(4 * var(--u)); height: calc(60 * var(--u)); }
  /* форма внизу страницы: карточка выше на слайдер, поля чуть плотнее */
  .gl-form__block:has(.gl-human), .gl-form__block:has(.gl-human) .gl-form__card { height: calc(530 * var(--u)); }
  .gl-form__card:has(.gl-human) .gl-form__fields { gap: calc(20 * var(--u)); }
  .gl-human__text { font-size: calc(18 * var(--u)); }
  .gl-human__knob .gl-arrow { width: calc(32 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .gl-human__fill, .gl-human__knob { transition: none; }
  .gl-human.is-nudge, .gl-human.is-busy .gl-human__knob { animation: none; }
}