/* Engagements hub — hero matches logo library index pattern; list is engagement-list. */

/* Hub content width — hero stays editorial; list aligns with footer shell */

.section--engagements-hero .section-inner {
  max-width: var(--container-lg);
}

.section--engagements-list {
  padding-top: 0;
}

.section--engagements-list > .section-inner,
.section--footer > .section-inner {
  width: 100%;
  max-width: var(--container-lg);
  padding-inline: 0;
}

@media (min-width: 1600px) {
  .section--engagements-list > .section-inner,
  .section--footer > .section-inner {
    max-width: var(--container-xl);
  }
}

.section--engagements-hero {
  min-height: 80vh;
  min-height: 80svh;
  justify-content: center;
}

.section--engagements-hero .hero-layout {
  margin-inline: auto;
  text-align: center;
}

.section--engagements-hero .section-title,
.section--engagements-hero .section-lead {
  margin-inline: auto;
}

.section--engagements-hero .section-title {
  max-width: 16ch;
  font-size: clamp(2.75rem, 5vw, 5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
}

.section--engagements-hero .section-lead {
  max-width: 46ch;
  margin-top: clamp(var(--space-7-0), 3vw, var(--space-11-0));
  font-size: clamp(var(--text-lg), 1.7vw, 1.6rem);
  line-height: var(--leading-base);
}

@media (max-width: 1024px) {
  .section--engagements-hero {
    min-height: 50vh;
    min-height: 50svh;
  }

  .section--engagements-hero .hero-layout {
    margin-inline: 0;
    text-align: left;
  }

  .section--engagements-hero .section-title,
  .section--engagements-hero .section-lead {
    margin-inline: 0;
  }

  .section--engagements-hero .section-title {
    max-width: 18ch;
    font-size: clamp(var(--text-3xl), 3.5vw, var(--text-4xl));
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-hero);
  }

  .section--engagements-hero .section-lead {
    max-width: 48ch;
    margin-top: var(--space-5);
    font-size: clamp(var(--text-base), 1.1vw, var(--text-lg));
    line-height: var(--leading-base);
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .section--engagements-hero .section-title {
    max-width: 14ch;
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-hero);
  }

  .section--engagements-hero .section-lead {
    max-width: 32ch;
    margin-top: clamp(var(--space-6), 2.75vw, var(--space-7));
    font-size: clamp(var(--text-xl), 2vw, 1.6rem);
    line-height: var(--leading-base);
  }
}

@media (max-width: 760px) {
  .section--engagements-hero .section-title {
    font-size: clamp(var(--text-3xl), 5vw, 4.75rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-heading);
  }
}

/* Hero — studio hub scale (typography and rhythm; theme stays page-specific) */

.section--engagements-list .engagement-layout {
  display: block;
}

.section--engagements-list .engagement-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
  align-items: stretch;
  margin-top: 0;
}

.section--engagements-list .engagement-item,
.section-shell[data-theme="surface"] .section--engagements-list .engagement-item {
  --engagement-item-padding: 0;

  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;

  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  background-color: transparent;

  transition: none;
}

.section--engagements-list .engagement-item + .engagement-item {
  margin-top: 0;
}

.section--engagements-list .engagement-item.engagement-item--hub,
.section-shell[data-theme="surface"] .section--engagements-list .engagement-item.engagement-item--hub,
.section--engagements-list .engagement-item.engagement-item--hub:hover,
.section-shell[data-theme="surface"] .section--engagements-list .engagement-item.engagement-item--hub:hover {
  background: transparent;
  background-color: transparent;
  border: none;
  box-shadow: none;
  transform: none;
  transition: none;
}

.section--engagements-list .engagement-item--hub {
  color: inherit;
  text-decoration: none;
  cursor: default;
}

.section--engagements-list .engagement-item--hub:focus,
.section--engagements-list .engagement-item--hub:focus-visible {
  outline: none;
}

.section--engagements-list .engagement-item--hub .engagement-examples__tile,
.section--engagements-list .engagement-item--hub .engagement-item__cta {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .section--engagements-list .engagement-item--hub:hover .engagement-item__cta.btn--pill.btn--sm:not(:hover) {
    opacity: var(--opacity-interactive-subtle);
  }

  .section--engagements-list .engagement-item--hub .engagement-item__cta.btn--pill.btn--sm:hover {
    opacity: 1;
  }

  .section--engagements-list .engagement-item--hub:hover .engagement-item__cta:not(:hover) .btn-icon-motion {
    animation: none;
    transition: transform var(--transition-base);
  }

  .section-shell[data-theme="surface"]
    .section--engagements-list
    .engagement-item--hub:hover
    .engagement-item__cta:not(:hover).btn--pill.btn--sm
    .btn-icon {
    background: rgba(23, 22, 27, 0.06);
  }

  .section--engagements-list .engagement-item--hub .engagement-item__cta:hover .btn-icon-motion {
    animation: pill-icon-shift 640ms linear infinite;
    transition: none;
  }

  .section--engagements-list .engagement-item--hub .engagement-item__cta:hover .btn-icon,
  .section-shell[data-theme="surface"]
    .section--engagements-list
    .engagement-item--hub
    .engagement-item__cta:hover
    .btn-icon {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .section--engagements-list .engagement-item--hub:hover .engagement-item__cta .btn-icon-motion,
  .section--engagements-list .engagement-item--hub .engagement-item__cta:hover .btn-icon-motion {
    animation: none !important;
  }
}

.section--engagements-list .engagement-item .engagement-copy {
  order: 2;
  flex: 1 1 auto;
  width: 100%;
  margin-top: var(--space-3);
  margin-bottom: 0;
}

.section--engagements-list .engagement-item .engagement-copy .engagement-description {
  order: unset;
  flex: unset;
  width: 100%;
  max-width: none;
  margin: 0;
}

.section--engagements-list .engagement-item .engagement-examples {
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: var(--space-5);
  padding-top: 0;
  border-top: none;
}

.section--engagements-list .engagement-item .engagement-examples__label {
  margin: 0 0 var(--space-5);

  font-size: var(--text-sm);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-regular);

  opacity: 0.62;
}

.section--engagements-list .engagement-item .engagement-item__cta {
  order: 4;
  align-self: flex-start;
  flex: 0 0 auto;
    margin-top: var(--space-6);
}

.section--engagements-list .engagement-item .engagement-examples__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.section--engagements-list .engagement-item .engagement-examples__tile {
  position: relative;

  display: grid;
  overflow: visible;

  min-width: 0;

  color: inherit;
  text-decoration: none;

  outline: none;
  border-radius: 0;
  background: transparent;
}

.section--engagements-list .engagement-item .engagement-examples__tile::before {
  content: "";
  grid-area: 1 / 1;

  width: 100%;
  aspect-ratio: 3 / 4;

  pointer-events: none;
}

.section--engagements-list .engagement-item .engagement-examples__media {
  position: relative;
  grid-area: 1 / 1;
  align-self: start;
  inset: auto;

  overflow: hidden;

  width: 100%;
  aspect-ratio: 3 / 4;

  border-radius: var(--radius-sm);

  background: transparent;
  outline: none;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  transform: translate3d(0, 0, 0);

  transition:
    aspect-ratio 0.41s ease-in-out,
    transform 0.41s ease-in-out;
}

.section--engagements-list .engagement-item .engagement-examples__tile:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: var(--motion-shift-subtle);
}

.section--engagements-list .engagement-item .engagement-examples__tile:focus-visible .engagement-examples__media {
  aspect-ratio: 3 / 3.5;
  transform: translate3d(0, calc(var(--space-3) * -1), 0);
}

@media (hover: hover) and (pointer: fine) {
  .section--engagements-list .engagement-item .engagement-examples__tile:hover .engagement-examples__media {
    aspect-ratio: 3 / 3.5;
    transform: translate3d(0, calc(var(--space-3) * -1), 0);
  }
}

.section--engagements-list .engagement-item .engagement-examples__image,
.section--engagements-list .engagement-item .engagement-examples__video {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  display: block;

  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;

  object-fit: cover;
  object-position: top center;

  opacity: 1;
  transform: none;

  transition: none;
}

.section--engagements-list .engagement-item .engagement-examples__tile:focus-visible .engagement-examples__image,
.section--engagements-list .engagement-item .engagement-examples__tile:focus-visible .engagement-examples__video {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .section--engagements-list .engagement-item .engagement-examples__tile:hover .engagement-examples__image,
  .section--engagements-list .engagement-item .engagement-examples__tile:hover .engagement-examples__video {
    opacity: 1;
    transform: none;
  }
}

.section--engagements-list .engagement-item .engagement-examples__arrow {
  position: absolute;
  z-index: 2;
  top: var(--space-2);
  right: var(--space-2);

  display: grid;
  place-content: start end;

  width: 1em;
  min-width: 1em;
  height: 1em;

  font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
  line-height: var(--leading-heading);
  color: var(--text-inverse-strong);

  opacity: 0;
  pointer-events: none;

  transform: translateY(var(--space-2));

  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
}

.section--engagements-list .engagement-item .engagement-examples__tile:focus-visible .engagement-examples__arrow {
  opacity: 1;
  top: var(--space-2);
  right: var(--space-2);
  transform: translate(0, 0);
}

@media (hover: hover) and (pointer: fine) {
  .section--engagements-list .engagement-item .engagement-examples__tile:hover .engagement-examples__arrow {
    opacity: 1;
    top: var(--space-2);
    right: var(--space-2);
    transform: translate(0, 0);
  }
}

.section--engagements-list .engagement-item .engagement-examples__overlay {
  position: relative;
  grid-area: 1 / 1;
  align-self: stretch;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: end;

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  background: transparent;
  pointer-events: none;
}

.section--engagements-list .engagement-item .engagement-examples__title {
  grid-row: 2;

  margin: 0;

  font-size: clamp(var(--text-xs), 1.35vw, var(--text-sm));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-regular);
  text-wrap: wrap;

  opacity: 0;
  transform: translateY(var(--space-3));

  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
}

.section--engagements-list .engagement-item .engagement-examples__tile:focus-visible .engagement-examples__title {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .section--engagements-list .engagement-item .engagement-examples__tile:hover .engagement-examples__title {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .section--engagements-list .engagement-item .engagement-examples__overlay {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section--engagements-list .engagement-item .engagement-examples__media {
    transition: none;
  }

  .section--engagements-list .engagement-item .engagement-examples__tile:focus-visible .engagement-examples__media {
    aspect-ratio: 3 / 4;
    transform: translate3d(0, 0, 0);
  }

  .section--engagements-list .engagement-item .engagement-examples__arrow {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .section--engagements-list .engagement-item .engagement-examples__title {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .section--engagements-list .engagement-item .engagement-examples__tile:hover .engagement-examples__media {
    aspect-ratio: 3 / 4;
    transform: translate3d(0, 0, 0);
  }
}

.section--engagements-list .engagement-item .engagement-head {
  display: contents;
}

.section--engagements-list .engagement-item .engagement-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  height: 100%;
  min-height: 0;
}

.section--engagements-list .engagement-item .engagement-eyebrow {
  --engagement-icon-optical-base: 1.25rem;

  order: 0;
  grid-area: unset;
  align-items: center;
  min-height: calc(var(--engagement-icon-optical-base) * 1.25);
}

.section--engagements-list .engagement-item .engagement-title {
  order: 1;
  grid-area: unset;
  width: 100%;

  /* Hub override: shared clamp uses 2vw + 0.9 scale, so min-token bumps barely move desktop size. */
  font-size: clamp(var(--text-xl), 2.1vw, 2.625rem);
}

@media (min-width: 981px) {
  .section--engagements-list .engagement-item .engagement-title {
    max-width: 15ch;
    text-wrap: wrap;
  }
}

@media (max-width: 980px) {
  .section--engagements-list .engagement-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }

  .section--engagements-list .engagement-item,
  .section-shell[data-theme="surface"] .section--engagements-list .engagement-item {
    background: transparent;
    background-color: transparent;
  }

  .section--engagements-list .engagement-item.engagement-item--hub,
  .section-shell[data-theme="surface"] .section--engagements-list .engagement-item.engagement-item--hub {
    background: transparent;
    background-color: transparent;
  }

  .section--engagements-list .engagement-item .engagement-content {
    flex: unset;
    height: auto;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .section--engagements-list .section-inner,
  .section--engagements-list .engagement-layout,
  .section--engagements-list .engagement-list,
  .section--engagements-list .engagement-item {
    overflow: visible;
  }

  .section--engagements-list .engagement-item.engagement-item--hub {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
  }

  .section--engagements-list .engagement-item .engagement-content {
    --engagement-tablet-column-gap: clamp(var(--space-5), 4vw, var(--space-7));
    --engagement-icon-optical-base: 1.25rem;
    --engagement-tablet-examples-offset: calc(
      calc(var(--engagement-icon-optical-base) * 1.25) + var(--space-7)
    );

    position: relative;
    display: block;
    flex: unset;
    min-height: calc(var(--engagement-tablet-examples-offset) + clamp(9rem, 28vw, 11.5rem));
    overflow: visible;
    padding-right: calc(50% + var(--engagement-tablet-column-gap) / 2);
  }

  .section--engagements-list .engagement-item .engagement-eyebrow {
    order: unset;
    width: 100%;
    margin-bottom: var(--space-7);
  }

  .section--engagements-list .engagement-item .engagement-title {
    order: unset;
    width: 100%;
    max-width: none;
    font-size: clamp(var(--text-2xl), 2.35vw, 3rem);
  }

  .section--engagements-list .engagement-item .engagement-copy {
    order: unset;
    margin-top: var(--space-3);
  }

  .section--engagements-list .engagement-item .engagement-copy .engagement-description {
    margin-bottom: 0;
  }

  .section--engagements-list .engagement-item .engagement-content .engagement-item__cta.btn--pill.btn--sm {
    order: unset;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--space-5);
  }

  .section--engagements-list .engagement-item .engagement-examples {
    position: absolute;
    top: var(--engagement-tablet-examples-offset);
    right: 0;
    order: unset;
    width: calc(50% - var(--engagement-tablet-column-gap) / 2);
    min-width: 0;
    margin-top: 0;
    overflow: visible;
  }

  .section--engagements-list .engagement-item .engagement-examples__gallery {
    display: flex;
    gap: var(--space-3);
    width: calc(100% + var(--section-padding-x));
    min-width: 0;
    margin-right: calc(var(--section-padding-x) * -1);
    padding-right: var(--section-padding-x);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-end: var(--section-padding-x);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .section--engagements-list .engagement-item .engagement-examples__gallery::-webkit-scrollbar {
    display: none;
  }

  .section--engagements-list .engagement-item .engagement-examples__tile {
    flex: 0 0 clamp(6.75rem, 47%, 9.5rem);
    scroll-snap-align: start;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .section--engagements-list .engagement-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }

  .section--engagements-list .engagement-item .engagement-content .engagement-item__cta.btn--pill.btn--sm {
    justify-self: start;
    align-self: start;
    order: 4;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--space-6);
  }

  .section--engagements-list .engagement-item .engagement-title {
    font-size: clamp(var(--text-2md), 8.5vw, var(--text-2xl));
    line-height: var(--leading-heading);
  }

  .section--engagements-list .engagement-item:first-child {
    grid-column: auto;
  }
}