/* Client-story directory: responsive panels composed from shared card, image, button, and page-rail primitives. */
.client-stories-landing-page .about-landing-hero {
  margin-bottom: 0;
}

.client-stories-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.client-stories-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Use the shared single-image hero cycle and start at its first frame. */
  transform: translate3d(var(--hero-ken-burns-from-x), var(--hero-ken-burns-from-y), 0)
    scale(var(--hero-ken-burns-from-scale));
  transform-origin: center;
  animation:
    ethosHeroImageReveal var(--hero-image-reveal-duration) var(--hero-image-reveal-ease) both,
    ethosHeroImageDrift var(--hero-image-drift-pass-duration) var(--hero-image-drift-ease) infinite alternate;
  will-change: opacity, transform;
}

/* The gallery's left wall is copy space; keep desktop text off the panels. */
.client-stories-landing-page .about-landing-hero__content {
  width: var(--hero-banner-content-width);
}

@media (max-width: 1100px) and (min-width: 821px) {
  .client-stories-hero__media img { object-position: 68% center; }
  .client-stories-landing-page .about-landing-hero__content {
    width: min(var(--hero-banner-tablet-content-width), var(--hero-banner-content-width));
  }
}

/* On narrow screens retain the bicycle and visitor above the shared copy veil. */
@media (max-width: 820px) {
  .client-stories-hero__media img {
    object-position: 84% center;
    animation:
      ethosHeroImageReveal var(--hero-image-reveal-duration) var(--hero-image-reveal-ease) both,
      ethosHeroImageDriftMobile var(--hero-image-drift-pass-duration) var(--hero-image-drift-ease) infinite alternate;
  }
  .client-stories-landing-page .about-landing-hero__content {
    width: var(--hero-banner-mobile-content-width);
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-stories-hero__media img {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }
}

.client-stories-collection {
  padding-block: var(--space-8) var(--space-9);
}

.client-stories-collection__heading {
  margin: 0 0 var(--space-7);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: var(--type-heading-lg);
  font-weight: var(--card-title-weight);
  line-height: var(--leading-heading);
}

.client-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.client-story-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--card-surface-border);
}

.client-story-panel__media {
  aspect-ratio: var(--card-media-aspect-ratio);
  flex-shrink: 0;
}

.client-story-panel__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-story-panel__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--card-content-padding);
}

.client-story-panel__client {
  margin: 0 0 var(--space-3);
  color: var(--color-brand);
  font-size: var(--type-small);
  font-weight: var(--type-editorial-emphasis-weight);
  line-height: var(--leading-body);
}

.client-story-panel h3 {
  margin: 0 0 var(--space-4);
  color: var(--card-title-color);
  font-family: var(--card-title-font);
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  line-height: var(--card-title-line-height);
}

.client-story-panel__summary {
  margin: 0 0 var(--space-6);
  color: var(--color-text);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.client-story-panel__body > .button {
  margin-top: auto;
  min-height: var(--target-min);
}

/* Match related-story cards: one semantic CTA covers the image, copy and padding.
   Keep the CTA untransformed so the panel remains its hit area's containing block. */
.client-story-panel__body > .button:hover,
.client-story-panel__body > .button:focus-visible,
.client-story-panel__body > .button:active {
  transform: none;
}

.client-story-panel__body > .button::after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 1;
}

/* An editorial notice fills the two remaining desktop slots without implying a link or hover action. */
.client-stories-coming {
  grid-column: span 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  border-radius: var(--radius-card);
  background: var(--color-surface-cream);
  color: var(--color-brand);
  text-align: center;
}

.client-stories-coming p {
  margin: 0;
  max-width: var(--text-max);
  /* Slate separates supporting copy from the evergreen heading. */
  color: var(--slate);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.client-stories-coming h3 {
  margin: 0;
  color: inherit;
  font-family: var(--font-body);
  /* Keep this supporting notice quieter than the directory section heading. */
  font-size: calc(var(--type-heading-lg) * 0.75);
  font-weight: var(--card-title-weight);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

/* Compact adaptation of the homepage's doubled logo-track loop. These local
   art-direction sizes keep four rows subordinate to the notice copy. */
.story-logo-wall {
  position: relative;
  width: 100%;
  min-width: 0;
}

.story-logo-wall__window {
  display: grid;
  gap: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-md);
  padding-block: var(--space-2);
  background: var(--color-surface-cream);
}

.story-logo-row {
  overflow-x: auto;
  min-width: 0;
}

.story-logo-wall.is-ready .story-logo-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.story-logo-track,
.story-logo-set {
  display: flex;
  width: max-content;
  align-items: center;
}

.story-logo-set {
  gap: var(--space-2);
  padding-right: var(--space-2);
}

.story-logo-chip {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  flex: 0 0 112px;
  width: 112px;
  height: 52px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}

.story-logo-chip img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  transform: scale(var(--story-logo-scale, 1));
}

/* Optical sizing compensates for different mark proportions and source padding;
   keep these adjustments on the mark, never on the uniform white chip. */
.story-logo-chip img[src*="/htc.svg"] { --story-logo-scale: 0.64; }
.story-logo-chip img[src*="/columbia-business-school"] { --story-logo-scale: 0.72; }
.story-logo-chip img[src*="/adidas.svg"] { --story-logo-scale: 0.82; }
.story-logo-chip img[src*="/hewlett-packard.svg"] { --story-logo-scale: 0.82; }
.story-logo-chip img[src*="/pandora.svg"] { --story-logo-scale: 0.82; }
.story-logo-chip img[src*="/microsoft.svg"] { --story-logo-scale: 0.9; }
.story-logo-chip img[src*="/lululemon.svg"] { --story-logo-scale: 0.92; }
.story-logo-chip img[src*="/weetabix.webp"] { --story-logo-scale: 1.45; }
.story-logo-chip img[src*="/blue-cross-ontario"] { --story-logo-scale: 1.3; }
.story-logo-chip img[src*="/canada-media-fund"] { --story-logo-scale: 1.28; }
.story-logo-chip img[src*="/mastercard-foundation"] { --story-logo-scale: 1.1; }
.story-logo-chip img[src*="/iqmetrix.png"] { --story-logo-scale: 1.1; }

.story-logo-wall.is-ready .story-logo-track {
  animation: story-logos-right 48s linear infinite paused;
  will-change: transform;
}

.story-logo-row:nth-child(2) .story-logo-track { animation-duration: 56s; animation-delay: -13s; }
.story-logo-row:nth-child(3) .story-logo-track { animation-duration: 52s; animation-delay: -26s; }
.story-logo-row:nth-child(4) .story-logo-track { animation-duration: 60s; animation-delay: -9s; }
.story-logo-wall.is-running .story-logo-track { animation-play-state: running; }
.story-logo-wall:focus-within .story-logo-track { animation-play-state: paused; }

/* No visible playback chrome at rest; preserve a discoverable keyboard and
   screen-reader pause action while pointer hover leaves the rows moving. */
.story-logo-toggle {
  position: absolute;
  z-index: 1;
  right: var(--space-2);
  bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-brand);
  background: var(--color-surface-cream);
  font: inherit;
  font-size: var(--type-small);
  cursor: pointer;
}

.story-logo-toggle:not(:focus-visible) {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.story-logo-toggle[hidden] { display: none; }
.story-logo-toggle:focus-visible,
.story-logo-row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@keyframes story-logos-right {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .story-logo-wall.is-ready .story-logo-track { animation: none; transform: none; will-change: auto; }
  .story-logo-wall.is-ready .story-logo-row { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .story-logo-repeat { display: none; }
}

/* Preserve generous panel widths instead of squeezing three columns on tablets. */
@media (max-width: 1100px) {
  .client-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-stories-coming { grid-column: span 1; }
}

@media (max-width: 640px) {
  .client-stories-grid { grid-template-columns: minmax(0, 1fr); }
  .client-stories-collection { padding-block: var(--space-7) var(--space-8); }
  .client-stories-collection__heading { margin-bottom: var(--space-6); }
}