/* ============================================================
   ACCUSTER — OUR CLIENTS
   ============================================================ */

.clients-page {
  background: var(--white);
  color: var(--text);
}


/* ============================================================
   CONTAINER
   ============================================================ */

.clients-page .container {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

.clients-page img {
  max-width: 100%;
}


/* ============================================================
   COMMON SECTION HEADING
   ============================================================ */

.section-heading {
  max-width: 800px;
}

.clients-page .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  grid-template-rows: auto auto auto;
  align-items: end;
  gap: 14px clamp(32px, 6vw, 84px);
  max-width: none;
  margin-bottom: 58px;
}

.clients-page .section-heading .section-kicker { grid-column: 1; grid-row: 1; justify-self: start; }
.clients-page .section-heading .section-title { grid-column: 1; grid-row: 2; width: 100%; margin: 0; }
.clients-page .section-heading .section-heading-line { grid-column: 1; grid-row: 3; width: 100%; margin: 0; }
.clients-page .section-heading p { grid-column: 2; grid-row: 1 / 4; align-self: end; padding-bottom: 2px; }

.section-kicker,
.clients-kicker,
.clients-cta-kicker {
  display: inline-flex;

  align-items: center;
  gap: 12px;

  color: var(--red);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .18em;

  text-transform: uppercase;
}

.section-kicker::before,
.clients-kicker::before,
.clients-cta-kicker::before {
  content: "";

  width: 28px;
  height: 2px;

  flex-shrink: 0;

  background: var(--red);
}


/* ============================================================
   SECTION TITLE
   ============================================================ */

.section-title {
  margin: 14px 0 18px;

  color: var(--black);

  font-size: clamp(44px, 5vw, 68px);

  line-height: .94;

  font-weight: 800;

  letter-spacing: -.055em;
}

.section-title em {
  color: var(--red);

  font-style: italic;
}


/* ============================================================
   SECTION LINE
   ============================================================ */

.section-heading-line {
  width: min(760px, 100%);

  height: 1px;

  margin-bottom: 18px;

  background: transparent;

  position: relative;
}

.section-heading-line::before {
  content: "";

  position: absolute;

  left: 0;
  top: -1px;

  width: 28px;
  height: 3px;

  background: var(--red);
}


/* ============================================================
   SECTION DESCRIPTION
   ============================================================ */

.section-heading p {
  max-width: 680px;

  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.8;
}


/* ============================================================
   HERO
   ============================================================ */

.clients-hero {
  position: relative;

  min-height: 285px;

  padding: 42px 0;

  background: var(--white);

  overflow: hidden;
}

.clients-hero-grid {
  position: absolute;

  inset: 0;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  pointer-events: none;
}

.clients-hero-grid span {
  border-left:
    1px solid rgba(21, 21, 21, .055);
}

.clients-hero-grid span:last-child {
  border-right:
    1px solid rgba(21, 21, 21, .055);
}

.clients-hero-inner {
  position: relative;

  z-index: 2;
}

.clients-hero-copy {
  width: min(100%, 900px);
}


/* ============================================================
   HERO KICKER
   ============================================================ */

.clients-kicker {
  opacity: 0;
  transform: translateY(12px);
}


/* ============================================================
   HERO TITLE
   ============================================================ */

.clients-title-reveal {
  position: relative;

  width: 100%;

  height: 88px;

  overflow: hidden;
}

.clients-title {
  position: absolute;

  left: 0;
  bottom: 8px;

  margin: 0;

  color: var(--black);

  font-size:
    clamp(64px, 6.2vw, 82px);

  line-height: .86;

  font-weight: 800;

  letter-spacing: -.065em;

  white-space: nowrap;

  opacity: 1 !important;

  visibility: visible !important;

  will-change: transform;
}


/* ============================================================
   HERO LINE
   ============================================================ */

.clients-title-line {
  position: relative;

  width: min(850px, 100%);

  height: 1px;

  background: var(--gray-300);

  transform-origin: left center;

  transform: scaleX(0);
}

.clients-title-line::after {
  content: "";

  position: absolute;

  left: 0;
  top: -1px;

  width: 28px;
  height: 3px;

  background: var(--red);
}


/* ============================================================
   HERO DESCRIPTION
   ============================================================ */

.clients-hero-description {
  width: min(850px, 100%);

  margin: 16px 0 0;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.7;

  opacity: 0;

  transform: translateY(12px);
}


/* ============================================================
   PROUD CLIENTS
   ============================================================ */

.clients-showcase {
  padding: 105px 0 115px;

  background: var(--gray-50);

  border-top:
    1px solid var(--gray-200);
}

.clients-showcase-heading {
  margin-bottom: 58px;
}


/* ============================================================
   CLIENT LOGO GRID
   ============================================================ */

.clients-logo-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid var(--gray-300);

  border-left:
    1px solid var(--gray-300);
}

.client-logo-item {
  position: relative;

  min-height: 190px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 18px;

  padding: 30px;

  background: var(--white);

  border-right:
    1px solid var(--gray-300);

  border-bottom:
    1px solid var(--gray-300);

  overflow: hidden;

  opacity: 0;

  transform: translateY(30px);

  transition:
    background-color .3s ease;
}

.client-logo-item::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 2px;

  background: var(--red);

  transform:
    scaleX(0);

  transform-origin: left;

  transition:
    transform .35s ease;
}

.client-logo-item:hover {
  background: var(--gray-50);
}

.client-logo-item:hover::after {
  transform: scaleX(1);
}

.client-logo-item img {
  width: auto;

  max-width: 180px;

  max-height: 100px;

  object-fit: contain;

  filter: grayscale(100%);

  opacity: .7;

  transition:
    transform .4s ease,
    opacity .3s ease,
    filter .3s ease;
}

.client-logo-item span {
  color: var(--black);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .13em;

  text-transform: uppercase;

  text-align: center;

  opacity: .55;

  transition:
    color .3s ease,
    opacity .3s ease;
}

.client-logo-item:hover img {
  transform: scale(1.04);

  filter: grayscale(0);

  opacity: 1;
}

.client-logo-item:hover span {
  color: var(--red);

  opacity: 1;
}


/* ============================================================
   CLIENT STORIES
   ============================================================ */

.client-stories {
  padding: 92px 0 40px;

  background: var(--white);
}

.client-stories-heading {
  margin-bottom: 75px;
}


/* ============================================================
   CLIENT STORY
   ============================================================ */

.client-story {
  position: relative;
  padding: clamp(48px, 7vw, 88px) 0;
}


/* ============================================================
   STORY HEADER
   ============================================================ */

.client-story-top {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 35px;

  opacity: 0;

  transform: translateY(25px);
}

.client-story-index {
  display: inline-grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  background: var(--white);
  color: var(--red);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .12em;
}

.client-story-category {
  display: flex;

  align-items: center;

  color: var(--black);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .17em;

  text-transform: uppercase;
}

.client-story-category::before {
  content: "";

  width: 24px;

  height: 1px;

  margin-right: 18px;

  background: var(--red);
}


/* ============================================================
   STORY MAIN
   ============================================================ */

/* ============================================================
   STORY MAIN
   ============================================================ */

.client-story-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}


/* ============================================================
   STORY IMAGE
   ============================================================ */

.client-story-media {
  width: 100%;
  min-width: 0;
  min-height: 240px;
  aspect-ratio: 1.35 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gray-100), var(--white));
  border: 1px solid var(--gray-200);
  border-radius: 2px;
  display: grid;
  place-items: center;

  opacity: 0;
  transform: translateY(35px);
}

.client-story-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(24px, 3vw, 44px);
  object-fit: contain;

  filter: grayscale(100%);

  transition:
    transform .5s ease,
    filter .5s ease;
}

.client-story:hover .client-story-media img {
  transform: scale(1.025);
  filter: grayscale(0);
}


/* ============================================================
   STORY CONTENT
   ============================================================ */

.client-story-content {
  min-width: 0;
  max-width: 760px;
  padding-top: 0;

  opacity: 0;
  transform: translateY(35px);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* ============================================================
   STORY HEADING
   ============================================================ */

.client-story-content h3 {
  max-width: 560px;

  margin: 0 0 26px;

  color: var(--black);

  /* reduced from 58px */
  font-size: clamp(38px, 3.3vw, 50px);

  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.055em;
}

.client-story-content h3 em {
  color: var(--red);
  font-style: italic;
}


/* ============================================================
   STORY TEXT
   ============================================================ */

.client-story-copy {
  max-width: 680px;
}

.client-story-content p {
  margin: 0 0 17px;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.9;
}

.client-story-content p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   CTA
   ============================================================ */

.clients-cta {
  position: relative;

  margin-top: 0;

  padding: 95px 0;

  background: var(--red);

  overflow: hidden;
}

.clients-cta-grid {
  position: absolute;

  inset: 0;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  pointer-events: none;
}

.clients-cta-grid span {
  border-left:
    1px solid rgba(255,255,255,.13);
}

.clients-cta-grid span:last-child {
  border-right:
    1px solid rgba(255,255,255,.13);
}

.clients-cta-inner {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 50px;
}

.clients-cta-copy {
  max-width: 760px;

  opacity: 0;

  transform: translateY(30px);
}

.clients-cta-kicker {
  color: var(--white);
}

.clients-cta-kicker::before {
  background: var(--white);
}

.clients-cta h2 {
  margin: 14px 0 16px;

  color: var(--white);

  font-size:
    clamp(44px, 5vw, 70px);

  line-height: .92;

  font-weight: 800;

  letter-spacing: -.055em;
}

.clients-cta h2 em {
  color: var(--black);

  font-style: italic;
}

.clients-cta p {
  max-width: 600px;

  margin: 0;

  color: rgba(255,255,255,.8);

  font-size: 14px;

  line-height: 1.7;
}


/* ============================================================
   CTA BUTTON
   ============================================================ */

.clients-cta-button {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  min-width: 175px;

  padding: 16px 18px;

  color: var(--black);

  background: var(--white);

  text-decoration: none;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;

  overflow: hidden;

  opacity: 0;

  transform: translateY(30px);
}

.clients-cta-button::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 3px;

  background: var(--black);

  transform: scaleX(0);

  transform-origin: left;

  transition:
    transform .35s ease;
}

.clients-cta-button:hover::after {
  transform: scaleX(1);
}

.clients-cta-button i {
  width: 18px;
  height: 18px;

  transition:
    transform .3s ease;
}

.clients-cta-button:hover i {
  transform:
    translate(4px, -4px);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

  .clients-page .section-heading {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 14px;
    margin-bottom: 40px;
  }

  .clients-page .section-heading .section-kicker,
  .clients-page .section-heading .section-title,
  .clients-page .section-heading .section-heading-line,
  .clients-page .section-heading p {
    grid-column: 1;
    grid-row: auto;
  }

  .clients-page .section-heading p { padding-bottom: 0; }

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

  .client-story-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .client-story-content h3 {
    font-size: 42px;
  }

  .clients-cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 680px) {

  .clients-page .container {
    width:
      min(100% - 32px, 1240px);
  }


  /* HERO */

  .clients-hero {
    min-height: 270px;

    padding: 38px 0 35px;
  }

  .clients-title-reveal {
    height: 76px;
  }

  .clients-title {
    bottom: 7px;

    font-size:
      clamp(52px, 15vw, 70px);
  }

  .clients-hero-description {
    width: 100%;

    margin-top: 15px;

    font-size: 12px;
  }


  /* SHOWCASE */

  .clients-showcase {
    padding: 75px 0 80px;
  }

  .clients-showcase-heading {
    margin-bottom: 40px;
  }

  .section-title {
    font-size: 43px;
  }

  .clients-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .client-logo-item { min-height: 132px; padding: 18px 12px; gap: 12px; }
  .client-logo-item img { max-width: 135px; max-height: 70px; }
  .client-logo-item span { font-size: 9px; }


  /* STORIES */

  .client-stories {
    padding: 75px 0 0;
  }

  .client-stories-heading {
    margin-bottom: 55px;
  }

  .client-story {
    padding: 55px 0 70px;
  }

  .client-story-top {
    margin-bottom: 25px;
  }

  .client-story-main {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .client-story:nth-of-type(even) .client-story-media,
  .client-story:nth-of-type(even) .client-story-content {
    grid-column: 1;
    grid-row: auto;
  }

  .client-story-media {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.25 / 1;
  }

  .client-story-media img { padding: 30px; }

  .client-story-content {
    padding-top: 0;
  }

  .client-story-content h3 {
    margin-bottom: 25px;

    font-size: 38px;

    line-height: .97;
  }

  .client-story-content p {
    font-size: 13px;

    line-height: 1.8;
  }


  /* CTA */

  .clients-cta {
    padding: 75px 0;
  }

  .clients-cta h2 {
    font-size: 44px;
  }

  .clients-cta-button {
    width: 100%;
  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

  .clients-title {
    font-size: 49px;
  }

  .section-title {
    font-size: 38px;
  }

  .client-story-content h3 {
    font-size: 35px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .clients-kicker,
  .clients-title,
  .clients-title-line,
  .clients-hero-description,
  .client-logo-item,
  .client-story-top,
  .client-story-media,
  .client-story-content,
  .clients-cta-copy,
  .clients-cta-button {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

    animation: none !important;
  }

}

.client-story-media-label {
  grid-area: 1 / 1;
  color: var(--black);
  font-size: clamp(18px, 2.5vw, 30px);
  font-weight: 800;
  text-align: center;
}
.client-story-media-label[hidden] { display: none; }

.client-story:nth-of-type(even) .client-story-media {
  grid-column: 2;
  grid-row: 1;
}

.client-story:nth-of-type(even) .client-story-content {
  grid-column: 1;
  grid-row: 1;
}