/* =========================================================
   Berdicool — общие стили всех страниц
   Шрифт, меню, подвал, лента «Посмотрите также», анимации.
   ========================================================= */

@font-face { font-family: 'Gilroy'; src: url('/assets/fonts/Gilroy-Thin.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/assets/fonts/Gilroy-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/assets/fonts/Gilroy-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/assets/fonts/Gilroy-Semibold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/assets/fonts/Gilroy-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
  --red: #ff4a4a;
  --gray: #9b9b9b;
  --line: #2a2a2a;
  --pad: 24px;               /* поля слева и справа */
  --ease: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body {
  margin: 0;
  font-family: 'Gilroy', Arial, sans-serif;
  font-weight: 400;
  color: #000;
  background: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; font-size: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Основное содержимое лежит поверх подвала: подвал «выезжает» из-под страницы */
.page { position: relative; z-index: 1; }

/* ---------- Текстовые стили сайта ---------- */
.h-xl { font-size: 40px; line-height: 46px; letter-spacing: -1.6px; font-weight: 500; }
.h-m  { font-size: 24px; line-height: 29px; letter-spacing: -0.72px; font-weight: 500; }
.t-s  { font-size: 14px; line-height: 18px; letter-spacing: -0.14px; }
.t-m  { font-size: 16px; line-height: 21px; letter-spacing: -0.16px; }
.gray { color: var(--gray); }

@media (max-width: 959px) {
  .h-xl { font-size: 28px; line-height: 32px; letter-spacing: -1.12px; }
  .h-m  { font-size: 20px; line-height: 24px; letter-spacing: -0.6px; }
}

/* Ссылка со стрелкой ↗ */
.arrow-link { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; line-height: 20.8px; letter-spacing: -0.16px; transition: color .2s ease; }
.arrow-link svg { width: 14px; height: 14px; flex: none; transition: transform .3s ease; }
@media (hover: hover) {
  .arrow-link:hover { color: var(--red); }
  .arrow-link:hover svg { transform: translate(2px, -2px); }
}

/* Красный квадратик-маркер: крутится */
.marker { width: 12px; height: 12px; background: var(--red); animation: marker-spin 4s linear infinite; }
@keyframes marker-spin { to { transform: rotate(360deg); } }

/* ---------- Появление при прокрутке ---------- */
.fx { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 2s ease, transform 2s ease; }
.fx.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fx { opacity: 1; transform: none; transition: none; }
  .marker { animation: none; }
}

/* =========================================================
   МЕНЮ: плашка сверху, раскрывается вниз
   ========================================================= */
.menu {
  --menu-open: 480px;
  position: fixed; z-index: 1000;
  top: 10px; left: 50%;
  width: 600px; height: 70px;
  margin-left: -300px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: #fff;
  overflow: hidden;
  transition: height 800ms var(--ease), background-color 300ms ease, box-shadow 300ms ease, color 300ms ease;
}
.menu.is-open { height: var(--menu-open); }

.menu__logo { position: absolute; left: 24px; top: 18px; width: 121px; height: 33px; transition: opacity 200ms var(--ease), filter 300ms ease; }
.menu__logo img { width: 100%; height: 100%; }
.menu__burger { position: absolute; right: 0; top: 1px; width: 68px; height: 68px; border-radius: 30px; }
.menu__burger span {
  position: absolute; left: 50%; width: 20px; height: 0;
  border: 1px solid currentColor; border-radius: 6px;
  transform: translate(-50%, -50%);
  transition: all 200ms var(--ease);
}
.menu__burger span:nth-child(1) { top: 44%; }
.menu__burger span:nth-child(2) { top: 50%; }
.menu__burger span:nth-child(3) { top: 56%; }
.menu.is-open .menu__burger span:nth-child(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.menu.is-open .menu__burger span:nth-child(2) { opacity: 0; }
.menu.is-open .menu__burger span:nth-child(3) { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }

/* то, что видно только в открытом меню */
.menu__open { opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); }
.menu.show-content .menu__open { opacity: 1; pointer-events: auto; }
.menu.hide-logo .menu__logo { opacity: 0; pointer-events: none; }

.menu__idea { position: absolute; left: 24.5px; top: 25px; font-size: 20px; line-height: 20px; letter-spacing: -0.5px; white-space: nowrap; }
.menu__write {
  position: absolute; left: 335.5px; top: 7px; width: 185px; height: 55px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 20px;
  font-size: 16px; font-weight: 500;
  transition: color .2s ease, border-color .2s ease;
}
.menu__nav { position: absolute; left: 24px; top: 150px; }
.menu__nav a {
  display: block; height: 70px;
  font-size: 60px; line-height: 60px; letter-spacing: -1.5px;
  transition: color .2s ease;
}
@media (hover: hover) {
  .menu__nav a:hover, .menu__write:hover { color: var(--red); }
}

/* Светлое меню: над светлым фоном и фотографиями (переключает site.js) */
.menu.is-light { background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); color: #000; }
.menu.is-light .menu__logo img { filter: invert(1); }

.menu-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none;
  transition: opacity 800ms var(--ease);
}
.menu-overlay.is-active { opacity: 1; pointer-events: auto; cursor: pointer; }
body.no-scroll { overflow: hidden; }

/* Телефон: плашка и пункты масштабируются от ширины экрана (как на Тильде, макет 320) */
@media (max-width: 479px) {
  .menu {
    --u: calc(100vw / 320);
    --menu-open: 430px;
    top: calc(10 * var(--u)); left: calc(20 * var(--u)); margin: 0;
    width: calc(280 * var(--u)); height: calc(60 * var(--u));
    border-radius: 12px;
  }
  .menu.is-open { height: calc(430 * var(--u)); }
  .menu__logo { left: calc(10 * var(--u)); top: calc(17 * var(--u)); width: calc(94 * var(--u)); height: calc(25.7 * var(--u)); }
  .menu__burger { top: 0; right: 0; width: calc(40 * var(--u)); height: calc(60 * var(--u)); }
  .menu__nav { left: calc(10.5 * var(--u)); top: calc(80 * var(--u)); }
  .menu__nav a { height: calc(50 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(50 * var(--u)); }
  .menu__burger span { width: calc(20 * var(--u)); }
  .menu__idea { left: calc(10 * var(--u)); top: calc(310 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1; }
  .menu__write { left: calc(10 * var(--u)); top: calc(340 * var(--u)); width: calc(260 * var(--u)); height: calc(56 * var(--u)); border-radius: 10px; font-size: calc(16 * var(--u)); }
}

/* =========================================================
   ПОДВАЛ. На страницах кейсов он прилипает к низу и открывается
   из-под страницы (как на живом сайте), на остальных — обычный.
   ========================================================= */
.footer {
  position: relative; z-index: 0;
  background: #000; color: #fff;
  padding: 64px var(--pad) 40px;
}
body.case .footer { position: sticky; bottom: 0; }
body.case .footer, body.dark .footer { border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: 600fr 396fr 396fr; min-height: 286px; }
.footer__logo { display: block; width: 161px; height: 44px; }
.footer__logo img { width: 100%; height: 100%; }
.footer__about { margin-top: 72px; max-width: 330px; }
.footer__label { color: var(--gray); }
.footer__nav { margin-top: 14px; display: grid; gap: 14px; }
.footer__nav a { font-size: 24px; line-height: 29px; letter-spacing: -0.72px; font-weight: 500; transition: color .2s ease; justify-self: start; }
.footer__office { margin-top: 14px; }
.footer__bottom { display: grid; grid-template-columns: 600fr 396fr 396fr; color: var(--gray); }
.footer__bottom a { transition: color .2s ease; }
.footer__up { justify-self: end; color: #fff; }
@media (hover: hover) {
  .footer__nav a:hover, .footer__bottom a:hover { color: var(--red); }
}

@media (max-width: 959px) {
  .footer { padding: 56px var(--pad) 32px; }
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 48px; min-height: 0; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__about { margin-top: 24px; max-width: none; }
  .footer__nav { margin-top: 12px; gap: 12px; }
  .footer__nav a { font-size: 20px; line-height: 24px; letter-spacing: -0.6px; }
  .footer__office { margin-top: 12px; }
  .footer__bottom { margin-top: 69px; grid-template-columns: 1fr auto; row-gap: 10px; }
  .footer__policy { grid-column: 1 / -1; grid-row: 2; }
  .footer__up { grid-row: 1; grid-column: 2; }
}
@media (max-width: 959px) and (min-width: 480px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
/* Низкий экран: подвал не помещается — обычный, без «выезда» */
@media (max-height: 620px) { body.case .footer { position: relative; } }