:root {
  --page-pad: clamp(16px, 2.1vw, 36px);
  --column-gap: clamp(12px, 1.35vw, 24px);
  --section-gap: clamp(80px, 12vw, 180px);
  --black: #111111;
  --paper: #f2f0e9;
  --line: rgba(17, 17, 17, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--black);
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
figure, p, h1, h2 { margin: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  column-gap: var(--column-gap);
  width: 100%;
  padding-inline: var(--page-pad);
}

.title {
  font-size: clamp(64px, 11.6vw, 210px);
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.subtitle {
  font-size: clamp(24px, 3.2vw, 54px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.text {
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 400;
  line-height: 1.35;
}

.text-bold {
  font-size: clamp(13px, .95vw, 16px);
  font-weight: 600;
  line-height: 1.2;
}

.site-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  padding-top: 20px;
  align-items: start;
}
.header-role { grid-column: 2; }
.header-location { grid-column: 3; }
.header-contact { grid-column: 4; justify-self: end; }

.hero {
  min-height: 100svh;
  grid-template-rows: 1fr auto auto;
  align-content: end;
  padding-top: 140px;
  padding-bottom: var(--page-pad);
}
.hero-title { grid-column: 1 / -1; align-self: center; }
.hero-description { grid-column: 1 / 4; margin-top: 54px; }
.hero-note { grid-column: 4; align-self: end; margin-top: 54px; }

.case {
  padding-top: var(--section-gap);
  border-top: 1px solid var(--line);
}

.case-info {
  row-gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.case-tag--1 { grid-column: 1 / 2; }
.case-tag--2 { grid-column: 2 / 3; }
.case-tag--3 { grid-column: 3 / 4; }
.case-tag--4 { grid-column: 4 / 5; }
.case-title { grid-column: 1 / -1; }
.case-tag {
  border-top: 1px solid currentColor;
  padding-top: 10px;
}
.case-summary {
  grid-column: 1 / 4;
  margin-top: clamp(24px, 3vw, 48px);
}
.case-details {
  grid-column: 4;
  align-self: start;
  margin-top: clamp(24px, 3vw, 48px);
}
.case-summary--half { grid-column: 1 / 3; }
.case-details--half { grid-column: 3 / 5; }

.carousel {
  display: flex;
  gap: var(--column-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: clamp(44px, 6vw, 90px) var(--page-pad) clamp(80px, 10vw, 160px);
  cursor: grab;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.slide {
  position: relative;
  flex: 0 0 auto;
  min-height: min(68vw, 760px);
  overflow: hidden;
  scroll-snap-align: start;
  background: #d7d3ca;
}
.slide span {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 7px 9px;
  background: var(--paper);
}
.slide--wide { width: min(78vw, 1180px); aspect-ratio: 16 / 10; }
.slide--portrait { width: min(43vw, 650px); aspect-ratio: 4 / 5; }
.slide--square { width: min(56vw, 820px); aspect-ratio: 1; }

.slide--crm-1 { background: #e8382f; }
.slide--crm-1::before { content: "WE ARE\A CRM"; white-space: pre; position: absolute; inset: 5%; color: #111; font-size: clamp(78px, 13vw, 210px); font-weight: 600; line-height: .74; letter-spacing: -.08em; }
.slide--crm-2 { background: repeating-linear-gradient(100deg, #111 0 18px, #e8382f 18px 20px); }
.slide--crm-2::before { content: "CRM"; position: absolute; inset: auto 5% 7%; color: #e8382f; font-size: clamp(72px, 12vw, 170px); font-weight: 600; transform: rotate(-90deg); transform-origin: left bottom; }
.slide--crm-3 { background: #111; }
.slide--crm-3::before { content: "НЕФОРМАЛЬНАЯ КОНФЕРЕНЦИЯ ПРО ЦЕЛЕВОЙ МАРКЕТИНГ"; position: absolute; inset: 7%; color: #e8382f; font-size: clamp(50px, 7vw, 126px); font-weight: 600; line-height: .84; letter-spacing: -.06em; }
.slide--crm-4 { background: radial-gradient(circle at 30% 30%, transparent 0 14%, #111 14.5% 15%, transparent 15.5% 24%, #111 24.5% 25%, transparent 25.5%), #e8382f; }

.slide--game-1 { background: linear-gradient(#12182d, #293657); }
.slide--game-1::before { content: ""; position: absolute; left: 5%; right: 5%; bottom: 0; height: 72%; background: repeating-linear-gradient(90deg, #313a56 0 9%, #151b2e 9% 12%), repeating-linear-gradient(#48536e 0 11%, #1b2238 11% 14%); }
.slide--game-1::after { content: "ДЕВЯТИЭТАЖКА"; position: absolute; left: 4%; top: 4%; color: #dedcca; font-size: clamp(54px, 8vw, 140px); font-weight: 600; letter-spacing: -.07em; }
.slide--game-2 { background: linear-gradient(150deg, #1c243f, #69758b); }
.slide--game-2::before { content: "МОЙ РАЙОН"; position: absolute; left: 7%; top: 8%; color: #e4e1cf; font-size: clamp(48px, 7vw, 110px); font-weight: 600; line-height: .82; }
.slide--game-3 { background: repeating-linear-gradient(90deg, #39435f 0 14%, #172038 14% 17%), #151b30; }
.slide--game-4 { background: #d9b36c; }
.slide--game-4::before { content: "5×5\A 4 COLORS\A 9 FLOORS"; white-space: pre; position: absolute; inset: 8%; font-size: clamp(52px, 8vw, 120px); font-weight: 600; line-height: .84; letter-spacing: -.06em; }

.slide--data-1 { background: #e8e4dc; }
.slide--data-1::before { content: "DATA\A STORIES"; white-space: pre; position: absolute; inset: 7%; font-size: clamp(80px, 14vw, 220px); font-weight: 600; line-height: .72; letter-spacing: -.08em; }
.slide--data-2 { background: repeating-linear-gradient(90deg, transparent 0 12%, #111 12.2% 12.5%), repeating-linear-gradient(0deg, transparent 0 12%, #111 12.2% 12.5%), #d8d2c5; }
.slide--data-2::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 12%; height: 52%; background: linear-gradient(135deg, transparent 0 30%, #df552f 30% 34%, transparent 34% 52%, #111 52% 56%, transparent 56%); }
.slide--data-3 { background: #315cff; }
.slide--data-3::before { content: "ТЕКСТ + ДАННЫЕ + ИЛЛЮСТРАЦИЯ"; position: absolute; inset: 7%; color: #f2f0e9; font-size: clamp(56px, 8vw, 140px); font-weight: 600; line-height: .82; letter-spacing: -.065em; }

.footer {
  min-height: 80svh;
  padding-top: var(--section-gap);
  padding-bottom: var(--page-pad);
  background: var(--black);
  color: var(--paper);
  align-content: end;
  row-gap: 48px;
}
.footer-lead { grid-column: 1 / 4; }
.footer-links { grid-column: 4; display: flex; flex-direction: column; gap: 10px; align-self: end; }
.footer-copy { grid-column: 1 / -1; border-top: 1px solid rgba(242, 240, 233, .35); padding-top: 12px; }

@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title { font-size: clamp(54px, 19vw, 110px); }
  .subtitle { font-size: clamp(25px, 7vw, 40px); }
  .header-role { grid-column: 2; justify-self: end; text-align: right; }
  .header-location, .header-contact { display: none; }
  .hero-title { grid-column: 1 / -1; }
  .hero-description { grid-column: 1 / -1; }
  .hero-note { grid-column: 1 / -1; }
  .case-title { grid-column: 1 / -1; }
  .case-tag--1, .case-tag--3 { grid-column: 1 / 2; }
  .case-tag--2, .case-tag--4 { grid-column: 2 / 3; }
  .case-summary, .case-summary--half { grid-column: 1 / -1; }
  .case-details, .case-details--half { grid-column: 1 / -1; margin-top: 0; }
  .slide { min-height: 72svh; }
  .slide--wide { width: 88vw; }
  .slide--portrait { width: 72vw; }
  .slide--square { width: 82vw; }
  .footer-lead, .footer-links, .footer-copy { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}