@font-face {
  font-family: "Google Sans Flex";
  src: url("assets/google-sans-flex.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}
:root { --text: #0f0f10; --card: #f7f7f7; --ease: cubic-bezier(.22, 1, .36, 1); }
* { box-sizing: border-box; }
html { background: #fff; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  margin: 0;
  overflow-x: clip;
  min-width: 320px;
  color: var(--text);
  background: #fff;
  font: 500 20px/1.2 "Google Sans Flex", Arial, sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
  -webkit-font-smoothing: antialiased;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #767676; outline-offset: 6px; }
.top-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 88px;
  background: rgb(255 255 255 / .88);
  backdrop-filter: blur(16px);
  transition: transform 450ms var(--ease), opacity 350ms ease;
}
.top-nav nav { display: flex; justify-content: center; gap: 48px; padding-top: 38px; }
.top-nav.is-top { background: transparent; backdrop-filter: none; }
.nav-link { font-size: 18px; line-height: 1.1; letter-spacing: 0; transition: opacity 200ms; }
.nav-link[href]:hover { opacity: .5; }
.nav-link[aria-disabled="true"] { cursor: default; }
.top-nav.is-hidden { transform: translateY(-100%); opacity: 0; }
.top-nav:focus-within { transform: none; opacity: 1; }
.hero { position: relative; height: 612px; padding-top: 192px; text-align: center; overflow-x: clip; overflow-y: visible; }
.greeting {
  position: relative;
  z-index: 2;
  isolation: isolate;
  width: max-content;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  left: 23px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
.greeting-base { position: relative; z-index: 1; color: #d9d9d9; }
.greeting-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: transparent;
  background: linear-gradient(110deg, #df9864 0%, #d977aa 22%, #9685d5 45%, #64acd4 68%, #dc91ae 85%, #df9864 100%);
  background-size: 280% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradient-drift 12s ease-in-out infinite alternate;
}
.intro-text {
  position: relative;
  z-index: 3;
  left: 23px;
  width: min(674px, calc(100% - 48px));
  margin: 15.6px auto 0;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: pretty;
}
.companies-wrap { position: absolute; z-index: 5; top: 409px; left: 0; width: 100%; }
.companies { display: flex; align-items: center; justify-content: center; width: max-content; margin: -10px auto 0; padding: 10px 18px 70px; }
.companies:is(:hover, :focus-within, .is-expanded) .company { transform: translateY(48px); }
.company {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 0;
  margin: 0 0 0 -13.5px;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: margin 560ms var(--ease), transform 560ms var(--ease);
}
.company:first-child { margin-left: 0; }
.companies:is(:hover, :focus-within, .is-expanded) .company + .company { margin-left: 12px; }
.company-disc {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 450ms var(--ease), box-shadow 450ms var(--ease);
}
.company-disc img { display: block; flex-shrink: 0; object-fit: cover; }
.company-2 .company-disc { border: 3px solid #fff; background: #cf0f69; }
.company-3 .company-disc { border: 3px solid #fff; background: #00a88e; }
.company-4 .company-disc { border: 3px solid #fff; background: #ff280b; }
.company:hover, .company:focus-visible, .company.is-active { z-index: 5; }
.company:is(:hover, :focus-visible, .is-active) .company-disc { transform: translateY(-5px) scale(1.12); box-shadow: 0 7px 14px rgb(0 0 0 / .08); }
.company-tip {
  position: absolute;
  bottom: calc(100% + 17px);
  left: 50%;
  width: max-content;
  max-width: 230px;
  padding: 10px 13px;
  border-radius: 7px;
  background: #303030;
  color: #fff;
  text-align: center;
  font-size: 15px;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 5px) scale(.94);
  transition: opacity 180ms ease, transform 350ms var(--ease), visibility 180ms;
}
.company-tip small { display: block; font-size: 12px; color: #c6c6c6; margin-top: 3px; }
.company:is(:hover, :focus-visible, .is-active):not(.tip-dismissed) .company-tip:not(:empty) { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.portfolio { width: min(650px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 160px; }
main { overflow-x: clip; overflow-y: visible; }
.media-card.is-warped { background: transparent; overflow: visible; border-radius: 0; }
.media-card.is-warped > img, .media-card.is-warped > video { opacity: 0; }
.stretch-canvas { position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; }
.media-slot { display: block; position: relative; width: 100%; aspect-ratio: 650 / 336; margin-bottom: 16px; }
.media-card { position: absolute; inset: 0; overflow: hidden; border-radius: 60px; background: var(--card); transform-origin: center center; backface-visibility: hidden; }
.media-card img, .media-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-caption-clip { position: absolute; inset: 0; border-radius: 60px; overflow: hidden; pointer-events: none; }
.media-slot.is-composited .case-caption-clip { opacity: 0; }
.case-caption { position: absolute; inset: auto 0 0; height: 96px; padding: 4px 30px 22px 60px; color: #fff; isolation: isolate; }
.case-caption-shade { position: absolute; width: 110%; height: 82%; left: -22.7%; bottom: -23.57%; border-radius: 50%; background: radial-gradient(ellipse closest-side, rgb(0 0 0 / .48), rgb(0 0 0 / .38) 35%, rgb(0 0 0 / .14) 70%, transparent); }
.case-caption img { position: absolute; top: 9px; left: 30px; width: 24px; height: 24px; border-radius: 30%; }
.case-caption h2 { margin: 0; font-size: 28px; font-weight: 400; line-height: 1.2; }
.case-caption p { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.2; }
@media (max-width: 760px) {
  .case-caption-clip { border-radius: 42px; }
  .case-caption { height: 86px; padding: 4px 20px 16px 48px; }
  .case-caption img { left: 20px; top: 6px; width: 20px; height: 20px; }
  .case-caption h2 { font-size: 22px; }
  .case-caption p { font-size: 14px; }
}
.intro-pending [data-reveal], .intro-pending .top-nav { opacity: 0; }
.intro-pending .greeting { opacity: 0; }
@keyframes gradient-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (max-width: 760px) {
  .top-nav { height: 70px; }
  .top-nav nav { padding-top: 27px; gap: 36px; }
  .nav-link { font-size: 16px; }
  .hero { height: auto; min-height: 548px; padding: 148px 0 70px; }
  .greeting { left: 0; font-size: 28px; }
  .intro-text { left: 0; font-size: 28px; width: min(540px, calc(100% - 44px)); margin-top: 20px; }
  .companies-wrap { position: relative; top: auto; margin-top: 34px; }
  .companies:is(:hover, :focus-within, .is-expanded) .company { transform: translateY(60px); }
  .media-card { border-radius: 42px; }
  .portfolio { padding-bottom: 100px; }
}
@media (max-width: 380px) {
  .hero { padding-top: 128px; padding-bottom: 50px; }
  .intro-text { font-size: 25px; }
  .greeting { font-size: 26px; }
  .companies:is(:hover, :focus-within, .is-expanded) .company + .company { margin-left: 8px; }
  .company-tip { max-width: 150px; font-size: 13px; }
  .company:first-child .company-tip { left: 0; transform: translate(0, 0); }
  .company:last-child .company-tip { left: auto; right: 0; transform: translate(0, 0); }
}
@font-face { font-family: Caveat; src: url('assets/caveat-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
.top-nav { height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 44px; isolation: isolate; background: transparent; backdrop-filter: none; }
.top-nav::before { content: ''; position: absolute; z-index: -1; inset: 0 0 -28px; background: linear-gradient(to bottom, rgb(255 255 255 / .98) 0%, rgb(255 255 255 / .94) 58%, rgb(255 255 255 / 0) 100%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); mask-image: linear-gradient(#000 65%, transparent); pointer-events: none; }
.top-nav nav { grid-column: 2; padding-top: 0; gap: 60px; align-items: center; }
.nav-brand { position: absolute; left: 30px; top: 20px; width: 49px; height: 49px; opacity: 0; visibility: hidden; filter: blur(5px); pointer-events: none; transition: opacity 700ms ease, filter 700ms ease, visibility 700ms; }
.nav-brand img { display: block; width: 100%; height: 100%; }
.top-nav.has-portrait .nav-brand { opacity: 1; visibility: visible; filter: blur(0); pointer-events: auto; }
.nav-contact { justify-self: end; padding: 12px 24px; border-radius: 999px; border: 1px solid rgb(24 18 10 / .1); background: #f5f5f5; color: #18120a; font-size: 14px; font-weight: 400; line-height: 18px; transition: background 300ms ease, box-shadow 300ms ease; }
.nav-contact[href]:hover { background: #ebebeb; box-shadow: 0 3px 12px rgb(24 18 10 / .06); }
.nav-link { padding: 12px 0; }
.nav-link { font-size: 18px; font-weight: 400; line-height: 1.2; color: #18120a; }
.floating-contact { position: fixed; z-index: 30; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.contact-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 70px; min-height: 46px; max-width: calc(100% - 40px); border-radius: 50px; background: #18120a; color: #fff; font-size: 18px; font-weight: 400; line-height: 1.2; white-space: nowrap; pointer-events: auto; transition: background 350ms ease, box-shadow 350ms ease; }
.contact-button[href]:hover { background: #352e25; box-shadow: 0 6px 20px rgb(24 18 10 / .14); }
.contact-button[href]:active { background: #090704; }
@font-face { font-family: 'Brygada 1918'; src: url('assets/brygada-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
.hero { height: 400px; padding-top: 200px; }
.character { position: absolute; top: 80px; left: calc(50% - 60px); width: 120px; height: 120px; }
.character img { position: absolute; inset: 0; width: 120px; height: 120px; }
.greeting { left: 0; font: 700 28px/1.2 'Brygada 1918', Georgia, serif; }
.greeting-base { color: #d2582a; }
.intro-text { left: 0; width: min(650px, calc(100% - 44px)); margin-top: 24.4px; font-size: 28px; font-weight: 400; color: #18120a; }
.company-logos { width: min(650px, calc(100% - 44px)); height: 32px; margin: 0 auto 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.company-logos > img { display: block; object-fit: contain; min-width: 0; }
.logo-dt { position: relative; flex: 0 0 49px; height: 26px; }
.logo-dt img:first-child { position: absolute; inset: 0; width: 50px; height: 26px; }
.logo-dt img:last-child { position: absolute; left: 12.63%; top: 25%; width: 75.76%; height: 50%; }
.logo-wb { position: relative; flex: 0 0 95px; height: 24px; }
.logo-wb > span { position: absolute; left: 0; top: 50%; width: 38.94%; aspect-ratio: 40.408477783203125 / 25.927907943725586; transform: translateY(-50%); background: #cbcbcb; border-radius: 9px; overflow: hidden; }
.logo-wb > span img { position: absolute; left: 10%; top: calc(50% - 1.08px); width: 79.19%; height: auto; aspect-ratio: 37.99551010131836 / 21.26497459411621; transform: translateY(-50%); }
.logo-wb > img { position: absolute; right: 0; top: 12.5%; width: 55.8%; height: 68.33%; }
.portfolio { display: grid; gap: 20px; }
.portfolio .media-slot { margin-bottom: 0; }
.media-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.media-row .media-slot { aspect-ratio: 315 / 336; }
.media-card[data-media="3"] { background: #f7f7f7; }
.media-card[data-media="3"].is-warped { background: transparent; }
.companies-wrap { top: 415px; }
.companies { padding: 0; margin: 0 auto; gap: 20px; max-width: calc(100% - 44px); flex-wrap: wrap; color: rgb(24 18 10 / .4); font-size: 16px; font-weight: 400; line-height: 1.2; }
.companies > span { white-space: nowrap; }
.inline-link { color: rgb(24 18 10 / .4); text-decoration: none; }
.inline-link[href] { cursor: pointer; transition: opacity 200ms ease; }
.inline-link[href]:hover { opacity: 1; }
.inline-link { transition: color 350ms ease, text-decoration-color 350ms ease, text-underline-offset 350ms var(--ease); }
.case-link { border-radius: 60px; transition: filter 500ms ease; }
.contact-button { transition: background 350ms ease, box-shadow 350ms ease, transform 450ms var(--ease); }
@media (hover: hover) {
  .case-link:hover { filter: brightness(1.06); }
  .contact-button:hover { background: #352e25; transform: translateY(-3px); box-shadow: 0 8px 24px rgb(24 18 10 / .18); }
  .inline-link:hover { color: #d2582a; text-underline-offset: .22em; }
}
.case-link:focus-visible { filter: brightness(1.06); }
.contact-button:focus-visible { background: #352e25; }
.inline-link:focus-visible { color: #d2582a; }
.contact-button:active { transform: translateY(0) scale(.97); }
.case-link:active { filter: brightness(.94); }
.companies:is(:hover, :focus-within, .is-expanded) .company { transform: none; }
.company, .company-disc { width: 43px; height: 43px; }
.company { flex-basis: 43px; }
.companies:is(:hover, :focus-within, .is-expanded) .company + .company { margin-left: 18px; }
.company-1 { --brand: #000; }
.company-2 { --brand: #cf0f69; }
.company-3 { --brand: #00a88e; }
.company-4 { --brand: #ff280b; }
.company-5 { --brand: #f936ab; }
.company-disc { border-width: 2px !important; }
.company-1 img, .company-5 img { width: 43px; height: 43px; }
.company-2 img { width: 30px; height: 15px; }
.company-3 img { width: 30px; height: 30px; }
.company-4 img { width: 39px; height: 39px; }
.company:is(:hover, :focus-visible, .is-active) .company-disc { transform: none; box-shadow: none; }
.company-tip { bottom: calc(100% + 5px); padding: 10px; border-radius: 48px; background: var(--brand); font-size: 16px; font-weight: 400; line-height: 1; }
.company-tip::after { content: ''; position: absolute; left: calc(50% - 5px); bottom: -4px; width: 10px; height: 10px; border-radius: 2px; background: var(--brand); transform: rotate(45deg); }
@media (max-width: 760px) {
  .top-nav { height: 68px; padding: 0 20px; }
  .top-nav nav { gap: 60px; }
  .top-nav .nav-link { font-size: 18px; }
  .floating-contact { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .nav-brand { left: 12px; top: 12px; width: 44px; height: 44px; }
  .nav-contact { padding: 10px 16px; }
  .hero { height: auto; min-height: 0; padding: 188px 0 80px; }
  .character { top: 68px; }
  .greeting { font-size: 28px; }
  .intro-text { font-size: 24px; margin-top: 32px; }
  .companies-wrap { top: auto; margin-top: 29px; }
  .hero { padding-bottom: 40px; }
  .company-logos { height: auto; flex-wrap: wrap; justify-content: center; gap: 22px 26px; margin-bottom: 48px; }
  .media-row, .portfolio { gap: 12px; }
  .companies { padding-bottom: 0; }
  .company:first-child .company-tip { left: 0; transform: none; }
  .company:last-child .company-tip { left: auto; right: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .media-card { transform: none !important; }
}
.contact-beam { pointer-events: auto; max-width: calc(100% - 40px); transition: transform 450ms var(--ease); }
.contact-beam .contact-button { max-width: 100%; transform: none; }
.contact-beam[data-beam="contact"][data-active],
.contact-beam[data-beam="contact"][data-fading] { animation-duration: 8s, .6s; }
.contact-beam[data-beam="contact"]::before,
.contact-beam[data-beam="contact"]::after { animation-duration: 24s; }
@media (hover: hover) { .contact-beam:hover { transform: translateY(-3px); } }
.intro-pending .contact-beam, .intro-pending .contact-beam::before, .intro-pending .contact-beam::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .contact-beam { --beam-opacity-contact: 1; } }