:root {
      --black: #0f0f0f;
      --white: #ffffff;
      --gray: #f5f5f2;
      --line: #d8d8d2;
      --muted: #777772;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--black);
      background: var(--white);
      font-family: Arial, "Helvetica Neue", sans-serif;
      letter-spacing: .02em;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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


    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 36px;
      mix-blend-mode: difference;
      color: #fff;
    }

    .site-logo {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .site-nav {
      display: flex;
      gap: 22px;
      font-size: 12px;
      letter-spacing: .08em;
    }

    .hero {
  min-height: 100vh;
  display: grid;
  align-items: end;
  padding: 120px 36px 44px;
  background: #000;
  color: var(--white);
}

    .hero__inner {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 40px;
      align-items: end;
      width: 100%;
    }

    .hero__eyebrow {
      font-size: 12px;
      letter-spacing: .16em;
      margin-bottom: 18px;
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(52px, 9vw, 132px);
      line-height: .92;
      letter-spacing: -.06em;
      font-weight: 600;
    }

    .hero__lead {
      max-width: 520px;
      margin: 0 0 8px;
      font-size: clamp(18px, 2vw, 28px);
      line-height: 1.45;
      font-weight: 400;
    }
.menu-toggle {
  display: none;
  position: relative;
  width: 28px;
  height: 20px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 30;
}

.menu-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: .3s;
}

.menu-toggle span:first-child {
  top: 0;
}

.menu-toggle span:last-child {
  bottom: 0;
}

@media (max-width: 640px) {

  .site-nav {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    font-size: 22px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: .3s;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

}

    .section {
      padding: 120px 36px;
    }

    .section--gray {
      background: var(--gray);
    }

    .section__head {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 60px;
      margin-bottom: 64px;
    }

    .section__label {
      font-size: 12px;
      letter-spacing: .16em;
      color: var(--muted);
      text-transform: uppercase;
    }

    .section__title {
      margin: 0;
      font-size: clamp(32px, 5vw, 72px);
      line-height: 1.02;
      letter-spacing: -.05em;
      font-weight: 500;
    }

    .section__text {
      max-width: 820px;
      font-size: 18px;
      line-height: 1.9;
      margin: 0;
      margin-top: 20px;
    }

    .work-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .work-card {
      min-height: 240px;
      padding: 28px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: var(--white);
    }

    .work-card__num {
      font-size: 12px;
      color: var(--muted);
    }

    .work-card h3 {
      margin: 0;
      font-size: 22px;
      line-height: 1.25;
      font-weight: 500;
    }

    .brand-category {
      margin-top: 80px;
    }

    .brand-category:first-child {
      margin-top: 0;
    }

    .brand-category__title {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 26px;
      font-size: 14px;
      color: var(--muted);
    }

    .brand-category__title::after {
      content: "";
      height: 1px;
      background: var(--line);
      flex: 1;
    }

    .brand-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 42px 34px;
    }

    .brand-card {
      display: grid;
      gap: 16px;
    }

    .brand-card__image {
      aspect-ratio: 4 / 3;
      background: #e8e8e4;
      overflow: hidden;
    }

    .brand-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter .3s ease, transform .3s ease;
    }

    .brand-card:hover img {
      filter: grayscale(0%);
      transform: scale(1.04);
    }

    .brand-card__name {
      font-size: 14px;
    }

    .clients {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .client-item {
      padding: 20px 22px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      font-size: 15px;
    }

    .company-table {
      width: 100%;
      border-collapse: collapse;
      border-top: 1px solid var(--line);
    }

    .company-table th,
    .company-table td {
      padding: 22px 0;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
      text-align: left;
    }

    .company-table th {
      width: 220px;
      font-size: 13px;
      color: var(--muted);
      font-weight: 400;
    }

    .company-table td {
      font-size: 16px;
      line-height: 1.7;
    }

    .contact {
      min-height: 70vh;
      display: grid;
      align-items: center;
      background: var(--black);
      color: var(--white);
    }

    .contact__inner {
      padding: 110px 36px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: end;
    }

    .contact h2 {
      margin: 0;
      font-size: clamp(52px, 9vw, 120px);
      line-height: .9;
      letter-spacing: -.06em;
      font-weight: 500;
    }

    .contact p {
      margin: 0 0 28px;
      font-size: 18px;
      line-height: 1.8;
      color: #d7d7d2;
    }

    .contact__link {
      display: inline-block;
      padding-bottom: 6px;
      border-bottom: 1px solid currentColor;
      font-size: 18px;
    }

    .footer {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 24px 36px;
      background: var(--black);
      color: #bfbfb8;
      font-size: 12px;
      border-top: 1px solid rgba(255,255,255,.16);
    }
    
.hero-scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-scroll span {
  display: block;
  width: 26px;
  height: 26px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  animation: scrollArrow 1.8s infinite;
  opacity: .8;
}

@keyframes scrollArrow {
  0% {
    transform: rotate(45deg) translate(-6px, -6px);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: rotate(45deg) translate(6px, 6px);
    opacity: 0;
  }
}

    @media (max-width: 900px) {
      .site-header {
        padding: 20px;
      }

      .site-nav {
        gap: 14px;
        font-size: 11px;
      }

      .hero,
      .section {
        padding-left: 20px;
        padding-right: 20px;
      }

      .hero__inner,
      .section__head,
      .contact__inner {
        grid-template-columns: 1fr;
      }

      .work-grid,
      .brand-grid,
      .clients {
        grid-template-columns: repeat(2, 1fr);
      }
    }

  @media (max-width: 640px) {

  .menu-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    background: #000;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;

    font-size: 22px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: .3s ease;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .hero {
    min-height: 86vh;
  }

  .section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .work-grid,
  .brand-grid,
  .clients {
    grid-template-columns: 1fr;
  }

  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
    padding: 10px 0;
  }

  .company-table th {
    padding-top: 20px;
    border-bottom: 0;
  }

  .company-table td {
    padding-bottom: 20px;
  }

  .contact__inner {
    padding: 90px 20px;
  }

  .footer {
    padding: 24px 20px;
    flex-direction: column;
  }

  p.section__text {
    font-size: 14px;
  }
.menu-toggle.is-open span:first-child {

  top: 9px;

  transform: rotate(45deg);

}

.menu-toggle.is-open span:last-child {

  bottom: 9px;

  transform: rotate(-45deg);

}
.site-header.menu-open {
  mix-blend-mode: normal;
}

.site-header.menu-open .menu-toggle span {
  background: #fff;
}
}
.js-fade {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s ease, transform .9s ease;
}

.js-fade.is-show {
  opacity: 1;
  transform: translateY(0);
}

.hero.js-fade {
  transform: translateY(0);
}
.loader {
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .8s ease, visibility .8s ease;
}

.loader.is-hide {
  opacity: 0;
  visibility: hidden;
}

.loader__logo {
  font-size: 28px;
  letter-spacing: .14em;
  animation: loaderFade 1.4s ease infinite alternate;
}

@keyframes loaderFade {
  from {
    opacity: .35;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.loader__logo {
  font-size: clamp(28px, 4vw, 54px);
  letter-spacing: .18em;
  font-weight: 600;

  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  animation: loaderFade 1.8s ease infinite alternate;
}