/* A quiet opening and two opposing rows of original-color client marks. */
.hero-stage .apex-choice--statement {
  position: relative;
  z-index: 1;
  width: calc(100% - clamp(32px, 12.8vw, 240px));
  max-width: 1640px;
  margin: 0 auto;
  padding: clamp(64px, 7.5vw, 112px) 28px;
  border: 0;
  border-radius: clamp(20px, 2.5vw, 36px);
  background: #f5f4f0;
  color: #111111;
}
.apex-choice__statement { max-width: 720px; margin: 0 auto; text-align: center; }
.apex-choice--statement h2 {
  margin: 0;
  font: 400 clamp(2.5rem, 3.7vw, 3.5rem)/1.12 Arial, sans-serif;
  letter-spacing: -.035em;
}
.apex-choice--statement h2 em { font-family: Georgia, serif; font-weight: 400; }
.apex-choice--statement .apex-choice__promise {
  margin: 18px 0 0;
  font: 400 clamp(1.375rem, 2vw, 1.875rem)/1.3 Arial, sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.apex-choice__description {
  max-width: 46ch;
  margin: 28px auto 32px;
  color: #3f494b;
  font: 400 1.0625rem/1.75 Arial, sans-serif;
  text-wrap: pretty;
}
/* The film remains pinned for one viewport beneath the next section.
   Its following negative margin lets the opaque services rise over it. */
.hero-stage { padding-bottom: 100svh; }
.hero-stage::after { display: none; }
.hero-stage .hero-backdrop .hero__media {
  position: sticky;
  top: 0;
  height: 100svh;
  opacity: 1;
  transform: none;
  will-change: auto;
}
.hero-stage .hero-backdrop .hero__video { min-width: calc(100svh * 16 / 9); }
.services.services--over-film {
  position: relative;
  z-index: 2;
  margin-top: -100svh;
  margin-inline: var(--film-frame);
  padding-top: clamp(72px, 7vw, 112px) !important;
  border-radius: var(--film-radius);
  background: #f5f4f0;
}

/* Original-color marks sit directly over the playing film, without tiles. */
.hero-stage .clients.clients--on-film {
  position: relative;
  z-index: 1;
  display: flex !important;
  justify-content: center;
  align-items: center;
  min-height: 72svh;
  width: 100%;
  margin: 0;
  padding: clamp(80px, 12svh, 144px) clamp(20px, 5vw, 96px) !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.clients__surface {
  position: relative;
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.clients--scroll-reveal .clients__surface { will-change: opacity, transform; }
.clients .clients__label {
  width: 100%;
  max-width: 100%;
  margin: 0 0 22px !important;
  padding: 0;
  font-size: .875rem !important;
  color: #fff;
  background: transparent;
  border-radius: 0;
  text-align: right;
  white-space: normal;
}
.clients__ribbons { display: grid; gap: 14px; }
.clients__ribbon { width: 100%; overflow: hidden; }
.clients__track {
  display: flex;
  width: max-content;
  animation: client-ribbon-drift var(--ribbon-duration, 42s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.clients__ribbon:first-child .clients__track { animation-direction: reverse; }
.clients.is-running .clients__track { animation-play-state: running; }
.clients__group {
  display: flex;
  flex: none;
  gap: 14px;
  margin: 0;
  padding: 0 14px 0 0;
  list-style: none;
}
.clients .client-mark {
  flex: 0 0 156px;
  width: 156px;
  height: 88px;
  min-height: 88px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.clients .client-mark--bilia { --brand-width: 94px; --brand-height: 32px; }
.clients .client-mark--follestad { --brand-width: 108px; --brand-height: 22px; }
.clients .client-mark--vestland { --brand-width: 116px; --brand-height: 38px; }
.clients .client-mark--gullruten { --brand-width: 48px; --brand-height: 60px; }
.clients .client-mark--deguy { --brand-width: 108px; --brand-height: 32px; }
.clients .client-mark--bergen { --brand-width: 62px; --brand-height: 64px; }
.clients .client-mark--caprice { font-size: 1.25rem !important; letter-spacing: .01em; }
.clients .client-mark img { max-width: 100%; }
.clients .clients__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: none;
  min-height: 0;
}
/* The original list remains the single accessible source for every brand. */
.clients.has-ribbons .clients__grid {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.clients__ribbons[hidden] { display: none; }
@keyframes client-ribbon-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .hero-stage .clients.clients--on-film { min-height: 62svh; padding: 64px 16px !important; }
  .clients__ribbons { gap: 10px; }
  .clients__group { gap: 10px; padding-right: 10px; }
  .clients .client-mark { flex-basis: 140px; width: 140px; height: 80px; min-height: 80px; }
  .clients .clients__label { margin-bottom: 18px !important; font-size: .8125rem !important; }
  .hero-stage .apex-choice--statement { width: calc(100% - 32px); padding: 60px 24px; border-radius: 20px; }
  .apex-choice__description { font-size: 1rem; margin-block: 24px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; }
  .clients__surface { opacity: 1 !important; transform: none !important; }
}