:root {
  --paper: #fff;
  --ink: #0a0a0a;
  --muted: #6f6f6f;
  --wash: #f1f1f1;
  --line: #0a0a0a;
  --m: 12px;
  --field: clamp(24px, 2.35vw, 40px);
  --radius: 14px;
  --dur-micro: 140ms;
  --dur-ui: 220ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { color: var(--paper); background: var(--ink); }

a { color: inherit; }

img,
video {
  display: block;
  max-width: 100%;
}

button,
a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: var(--field);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero__copy {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: calc(var(--m) * 3);
}

.hero__title {
  align-self: center;
  justify-self: center;
  max-width: 1560px;
  margin: 0;
  font-size: clamp(68px, 7.4vw, 124px);
  font-weight: 520;
  letter-spacing: -.058em;
  line-height: .88;
  text-align: center;
}

.hero-line { display: block; }
.inline-proof { white-space: nowrap; }
.hero-copy-part { display: inline; }

.media-word {
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: .66em;
  margin: 0 .035em;
  overflow: visible;
  vertical-align: -.035em;
  text-decoration: none;
}

.media-word::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.media-word--uniform {
  width: 1.34em;
  transform: rotate(-5deg);
}

.media-word--tyoma {
  width: 1.42em;
  transform: rotate(5deg);
}

.media-word--gleb {
  width: 1.35em;
  transform: rotate(-5deg);
}

.media-word video,
.media-word img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: calc(var(--radius) * .7);
  transition: transform var(--dur-ui) var(--ease), filter var(--dur-ui) var(--ease);
}

.media-word--uniform video { object-position: 50% 48%; }
.media-word--tyoma img {
  object-fit: contain;
  object-position: 50% 50%;
  background: #fff;
}
.media-word--gleb img {
  object-position: 50% 47%;
  filter: contrast(1.05);
}

.media-word:hover video,
.media-word:hover img,
.media-word:focus-visible video,
.media-word:focus-visible img {
  transform: translateY(-3px);
  filter: saturate(1.12) contrast(1.04);
}

.hero__bottom {
  display: grid;
  grid-template-columns: minmax(280px, 640px) minmax(430px, 650px);
  justify-content: space-between;
  align-items: end;
  gap: calc(var(--m) * 4);
}

.hero__intro p {
  max-width: 62ch;
  margin: 0;
  font-size: 18px;
  line-height: 1.24;
}

.hero__intro small {
  display: block;
  margin-top: var(--m);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
}

.hero__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-height: 56px;
}

.button {
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  transition: color var(--dur-micro) linear, background-color var(--dur-micro) linear, transform var(--dur-ui) var(--ease);
}

.button--dark { z-index: 1; color: var(--paper); background: var(--ink); }
.button--light { color: var(--ink); background: var(--paper); }

.button:hover,
.button:focus-visible {
  color: var(--paper);
  background: var(--ink);
  transform: translateY(-2px);
}

.hero__work { display: none; }

body[data-hero="work"] .hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(var(--m) * 2);
}

body[data-hero="work"] .hero__copy {
  grid-column: 1 / 7;
  z-index: 1;
}

body[data-hero="work"] .hero__title {
  justify-self: start;
  max-width: 100%;
  font-size: clamp(46px, 4.65vw, 84px);
  text-align: left;
}

body[data-hero="work"] .media-word {
  height: .62em;
}

body[data-hero="work"] .hero-line--offer {
  font-size: .82em;
  letter-spacing: -.045em;
  white-space: nowrap;
}

body[data-hero="work"] .hero__bottom {
  grid-template-columns: 1fr;
  gap: calc(var(--m) * 1.5);
}

body[data-hero="work"] .hero__intro p { max-width: 52ch; }

body[data-hero="work"] .hero__work {
  display: block;
  grid-column: 7 / 13;
  grid-row: 1;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: #1d120d;
}

.hero__work video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;
}

.works {
  padding: calc(var(--m) * 6) var(--field) calc(var(--m) * 5);
  overflow: hidden;
  scroll-margin-top: var(--m);
}

.works__intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--m) * 2);
  margin-bottom: calc(var(--m) * 2);
}

.works__intro h2,
.works__intro p { margin: 0; }

.works__intro h2 {
  font-size: clamp(26px, 2.1vw, 38px);
  font-weight: 560;
  letter-spacing: -.035em;
  line-height: 1;
}

.works__intro p {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--m) * 3) calc(var(--m) * 1.3);
}

.case-card {
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.case-card__visual {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--wash);
  isolation: isolate;
}

.case-card__visual img,
.case-card__visual video {
  position: absolute;
  transition: transform var(--dur-ui) var(--ease), filter var(--dur-ui) var(--ease);
}

.cover-fill {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-title {
  position: absolute;
  z-index: 3;
  display: block;
}

.cover-title {
  left: var(--m);
  bottom: var(--m);
  font-size: clamp(34px, 3.15vw, 58px);
  font-weight: 620;
  letter-spacing: -.07em;
  line-height: .82;
}

.case-card__meta {
  min-height: 78px;
  padding: var(--m) 2px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--m);
}

.case-card__meta > span { min-width: 0; }

.case-card__meta b,
.case-card__meta small {
  display: block;
  line-height: 1.15;
}

.case-card__meta b {
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -.025em;
}

.case-card__meta small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.case-card__meta i {
  flex: none;
  font-size: 18px;
  font-style: normal;
  transition: transform var(--dur-micro) var(--ease);
}

.case-card:hover .case-card__meta i,
.case-card:focus-visible .case-card__meta i { transform: translate(3px, -3px); }

.case-card:hover .cover-fill,
.case-card:focus-visible .cover-fill { filter: saturate(1.08) contrast(1.03); }

.case-card--uniform .cover-fill {
  object-position: 50% 44%;
  filter: saturate(.94) contrast(1.03);
}

.case-card--uniform .cover-kicker,
.case-card--uniform .cover-title,
.case-card--gleb .cover-kicker,
.case-card--gleb .cover-title,
.case-card--zakhar .cover-kicker,
.case-card--zakhar .cover-title {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .38);
}

.case-card--uniform .cover-title {
  top: auto;
  bottom: var(--m);
  left: var(--m);
  transform: none;
  font-size: clamp(34px, 3.15vw, 58px);
  text-align: left;
}

.case-card--tds .case-card__visual { background: #cfe9f9; }
.case-card--tds .cover-fill {
  object-fit: contain;
  object-position: center;
  padding: 4% 2%;
  background: #fff;
}
.case-card--tds .cover-kicker,
.case-card--tds .cover-title { color: #10374b; }

.case-card--gleb .cover-fill {
  object-position: 50% 47%;
  filter: contrast(1.08);
}

.case-card--sber .cover-fill { object-position: 50% 50%; }
.case-card--sber .cover-title { color: #e40084; }

.case-card--zakhar .cover-fill {
  object-position: 48% 50%;
  filter: saturate(.86) contrast(1.04);
}

.closing {
  min-height: min(100vh, 640px);
  min-height: min(100svh, 640px);
  padding: clamp(48px, 6svh, 64px) var(--field) var(--field);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: calc(var(--m) * 2);
  border-top: 1px solid var(--ink);
}

.closing__title {
  grid-column: 1 / 13;
  margin: 0;
  font-size: clamp(56px, 5vw, 92px);
  font-weight: 520;
  letter-spacing: -.06em;
  line-height: .87;
}

.closing__title span { display: block; }

.closing__text {
  grid-column: 7 / 13;
  align-self: center;
  margin: 0;
}

.closing__value,
.closing__copy {
  max-width: 54ch;
  margin: 0;
  line-height: 1.22;
}

.closing__value { font-size: 20px; }

.closing__copy {
  margin-top: calc(var(--m) * 1.5);
  font-size: 16px;
}

.closing__services {
  max-width: 62ch;
  margin: calc(var(--m) * 1.5) 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.closing__cta {
  grid-column: 1 / 13;
  min-height: 82px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 23px;
  text-decoration: none;
  transition: color var(--dur-micro) linear, background-color var(--dur-micro) linear, transform var(--dur-ui) var(--ease);
}

.closing__cta:hover,
.closing__cta:focus-visible {
  color: var(--ink);
  background: var(--paper);
  transform: translateY(-2px);
}

.sticky-contact {
  position: fixed;
  z-index: 50;
  left: auto;
  right: var(--field);
  width: min(340px, calc(100vw - var(--field) * 2));
  bottom: max(var(--m), env(safe-area-inset-bottom));
  min-height: 56px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(calc(100% + 32px));
  transition: transform 190ms var(--ease);
}

.sticky-contact span:last-child { margin-left: calc(var(--m) * 2); }

.sticky-contact.is-visible { transform: translateY(0); }

@media (max-width: 1100px) and (min-width: 761px) {
  .hero__title { font-size: clamp(68px, 9.2vw, 92px); }
  .hero__bottom { grid-template-columns: minmax(260px, 1fr) minmax(390px, 1.15fr); gap: calc(var(--m) * 2); }
  body[data-hero="work"] .hero__title { font-size: clamp(42px, 5vw, 56px); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover-title { font-size: clamp(40px, 5.2vw, 58px); }
  .closing__text { grid-column: 6 / 13; }
}

@media (max-width: 760px) {
  :root {
    --field: 14px;
    --m: 10px;
    --radius: 12px;
  }

  .hero {
    height: auto;
    min-height: 0;
    padding: max(12px, env(safe-area-inset-top)) var(--field) var(--field);
  }

  .hero__copy {
    height: auto;
    display: block;
  }

  .hero__title {
    max-width: none;
    margin: 0;
    font-size: clamp(56px, 16.8vw, 68px);
    line-height: .88;
    letter-spacing: -.058em;
    text-align: center;
  }

  body[data-hero="inline"] .hero-line--offer {
    font-size: 1em;
    letter-spacing: inherit;
  }

  body[data-hero="work"] .hero-line--offer {
    font-size: 1em;
    letter-spacing: inherit;
    white-space: normal;
  }

  .inline-proof { white-space: normal; }

  .hero-line--launch .hero-copy-part { display: block; }

  .media-word {
    width: 1.62em;
    height: .82em;
  }

  .media-word::after { inset: -12px; }
  .media-word--uniform { width: 1.48em; }
  .media-word--tyoma { width: 1.75em; }
  .media-word--gleb { width: 1.54em; }

  .hero__bottom {
    display: block;
  }

  .hero__intro {
    margin-top: calc(var(--m) * 2.4);
  }

  .hero__intro p {
    max-width: 35ch;
    font-size: 15px;
    line-height: 1.2;
  }

  .hero__actions {
    margin-top: calc(var(--m) * 2.4);
    min-height: 50px;
  }

  .button {
    min-height: 50px;
    padding: 8px 9px;
    font-size: 13px;
  }

  body[data-hero="work"] .hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto clamp(160px, 42vw, 220px);
    gap: calc(var(--m) * 1.5);
  }

  body[data-hero="work"] .hero__copy {
    grid-column: 1;
    grid-row: 1;
    height: auto;
  }

  body[data-hero="work"] .hero__title {
    margin: 0;
    font-size: clamp(56px, 16.8vw, 68px);
    line-height: .88;
    text-align: left;
  }

  body[data-hero="work"] .media-word { height: .82em; }

  body[data-hero="work"] .hero__intro p {
    max-width: none;
    font-size: 14px;
  }

  body[data-hero="work"] .hero__work {
    grid-column: 1;
    grid-row: 2;
    height: 100%;
  }

  body[data-hero="work"] .hero__work video { object-position: 48% 48%; }

  .works {
    padding: calc(var(--m) * 4) 10px calc(var(--m) * 4);
  }

  .works__intro {
    display: block;
    margin: 0 4px calc(var(--m) * 1.5);
  }

  .works__intro h2 { font-size: 25px; }

  .works__intro p {
    margin-top: 4px;
    font-size: 13px;
  }

  .project-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--m) * 2.2);
  }

  .case-card--lead,
  .case-card--feature,
  .case-card--zakhar { grid-column: 1 / -1; }

  .case-card__visual { aspect-ratio: 16 / 9; }

  .cover-title {
    left: 8px;
    bottom: 8px;
    font-size: clamp(28px, 8vw, 36px);
  }

  .case-card--uniform .cover-title {
    top: auto;
    bottom: 8px;
    left: 8px;
    transform: none;
    font-size: clamp(28px, 8vw, 36px);
    text-align: left;
  }

  .case-card__meta {
    min-height: 68px;
    padding: 8px 1px 0;
    gap: 6px;
  }

  .case-card__meta b { font-size: 16px; }

  .case-card__meta small {
    margin-top: 3px;
    color: #555;
    font-size: 13px;
    line-height: 1.12;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .case-card__meta i { font-size: 16px; }
  .case-card--tds .cover-fill { padding: 2%; }
  .closing {
    min-height: 0;
    padding: 20px var(--field) var(--field);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: calc(var(--m) * 2.4);
  }

  .closing__title {
    grid-column: 1;
    font-size: clamp(42px, 12vw, 54px);
    line-height: .87;
  }

  .closing__text {
    grid-column: 1;
    align-self: start;
    margin: 0;
  }

  .closing__value,
  .closing__copy {
    max-width: 34ch;
  }

  .closing__value {
    font-size: 17px;
  }

  .closing__copy {
    margin-top: calc(var(--m) * 1.4);
    font-size: 16px;
  }

  .closing__services {
    max-width: 34ch;
    margin-top: calc(var(--m) * 1.8);
    font-size: 12px;
  }

  .closing__cta {
    grid-column: 1;
    min-height: 66px;
    padding: 14px 16px;
    font-size: 18px;
  }

  .sticky-contact {
    left: auto;
    right: 8px;
    width: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    min-height: 48px;
    padding: 9px 14px;
    font-size: 14px;
  }

  .sticky-contact span:last-child { display: none; }
}

@media (min-width: 600px) and (max-width: 760px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card--lead,
  .case-card--feature,
  .case-card--zakhar { grid-column: auto; }
}

@media (max-width: 360px) {
  .button { font-size: 12px; }
  .case-card__meta small { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}