/* ==========================================================================
   Customers page only. Loaded after css/styles.css.
   Do not put shared component styles here.
   ========================================================================== */

/* --- Hero: headline then supporting line --- */

.nicholii-hero-sub {
  margin-top: var(--spacing--24);
  max-width: 40ch;
}

/* --- Four customer stories, two up --- */

.team_grid.nicholii-stories {
  grid-template-columns: 1fr 1fr;
}

/* Portrait placeholder fills the same box a real photo would */
.team_image-wrap .nicholii-ph {
  height: 100%;
  aspect-ratio: auto;
}

/* --- Trusted by: continuous linear marquee --- */

.logos-marquee.is-customers {
  width: 100%;
  overflow: hidden;
}

.logos-marquee.is-customers .logos-marquee_move {
  grid-column-gap: 0;
  grid-row-gap: 0;
  width: max-content;
  will-change: transform;
  animation: nicholii-customers-marquee 48s linear infinite;
}

.logos-marquee.is-customers .logos-marquee_single {
  padding-right: var(--spacing--80);
}

@keyframes nicholii-customers-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .logos-marquee.is-customers .logos-marquee_move {
    animation: none;
    transform: none !important;
  }
}

@media screen and (max-width: 767px) {
  .team_grid.nicholii-stories { grid-template-columns: 1fr; }
  .logos-marquee.is-customers .logos-marquee_single { padding-right: 60px; }
}

/* Never crop a face: customer portraits hold the top of the frame. */
.nicholii-stories .team_image-wrap .image_cover { object-position: 50% 22%; }

/* Laura Hartmann's photograph is 414x454 and no larger original exists. The
   card frame is 686x464, so object-fit: cover was scaling her up 1.66x, which
   is why her card looked softer than the others. She is shown at her true size
   instead, centred on the card surface, so the grid stays even and the picture
   is never upscaled. Replace this modifier if a bigger file ever arrives. */
.team_image-wrap.is-native {
  display: grid;
  place-items: center;
  background-color: var(--color-base-bone, #ebebda);
}
.team_image-wrap.is-native .image_cover {
  width: auto;
  height: 100%;
  max-width: 414px;
  object-fit: contain;
}
@media screen and (max-width: 479px) {
  .team_image-wrap.is-native .image_cover { width: 100%; max-width: 414px; height: auto; }
}