/* Engagement detail pages */

main.engagement-detail .section-shell:not(.section--footer):not(.section--cta):not(.section--engagement-pov):not(.section--engagement-hero):not(.section--engagement-hero--editorial):not(.section--engagement-recognition):not(.section--engagement-proof):not(.section--engagement-testimonial) > .section-inner {
  max-width: var(--container-md-lg);
}

.section--engagement-hero {
  min-height: auto;
  justify-content: flex-start;
  padding-top: clamp(var(--space-11), 14vw, var(--space-14-0));
  padding-bottom: clamp(var(--space-8), 7vw, var(--space-10));
}

.engagement-detail-hero {
  width: 100%;
}

.engagement-detail-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 6vw, var(--space-10));
  align-items: center;
}

.engagement-detail-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.engagement-detail-marker--hero .engagement-detail-marker__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 396px;
  height: 396px;
  max-width: 100%;
  padding: clamp(var(--space-9), 10vw, var(--space-11-0));
  border-radius: 50%;
  background: var(--surface-dark-subtle);
  color: var(--text-inverse);
  opacity: 0.9;
}

.engagement-detail-marker--hero .engagement-detail-marker__icon svg {
  --engagement-hero-icon-scale: 1.21;
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  transform: scale(var(--engagement-hero-icon-scale));
  transform-origin: center;
  animation: engagement-hero-icon-spin 32s linear infinite;
}

.engagement-detail-marker--hero .engagement-detail-marker__icon svg path {
  stroke-width: 0.8;
}

@keyframes engagement-hero-icon-spin {
  from {
    transform: scale(1.21) rotate(0deg);
  }

  to {
    transform: scale(1.21) rotate(360deg);
  }
}

.section--engagement-hero .section-kicker {
  margin-top: 0;
}

.section--engagement-hero .section-title {
  max-width: 18ch;
  font-size: clamp(2.75rem, 5vw, 5rem);
}

.engagement-detail-section-title {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(var(--text-3xl), 2.5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);
  text-wrap: balance;
}

.engagement-detail-subsection-title {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(var(--text-2md), 2.5vw, var(--text-2xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);
  text-wrap: balance;
}

.engagement-detail-hero__lead {
  max-width: 44ch;
  margin-top: clamp(var(--space-6), 3vw, var(--space-7));
  font-size: clamp(var(--text-lg), 1.4vw, var(--text-xl));
  line-height: var(--leading-base);
  opacity: 0.78;
  text-wrap: pretty;
}

.engagement-detail-hero__body {
  max-width: 52ch;
  margin-top: var(--space-5);
  font-size: clamp(var(--text-base), 1.2vw, var(--text-lg));
  line-height: var(--leading-relaxed);
  opacity: var(--opacity-interactive-subtle);
  text-wrap: pretty;
}

.engagement-detail-hero__cta {
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
}

.section--engagement-context {
  padding-top: clamp(var(--space-7), 6vw, var(--space-9));
  padding-bottom: clamp(var(--space-7), 6vw, var(--space-9));
}

.engagement-detail-context {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 6vw, var(--space-10));
  align-items: stretch;
}

.engagement-detail-context__column {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
}

.card--surface-signal {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-4), 4vw, var(--space-6));
  height: 100%;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  border-radius: var(--radius-lg);
  background: var(--bg-signal);
  color: var(--text-inverse);
}

.engagement-detail-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.engagement-detail-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  padding: clamp(var(--space-5), 3vw, var(--space-6)) 0;
  border-top: 1px solid var(--divider-light);
}

.engagement-detail-row:last-child {
  padding-bottom: 0;
}

.engagement-detail-row__index {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
  opacity: 0.42;
}

.engagement-detail-row__text {
  margin: 0;
  font-size: clamp(var(--text-lg), 1.15vw, var(--text-xl));
  line-height: var(--leading-base);
  text-wrap: pretty;
}

.engagement-detail-pov__copy {
  max-width: 52ch;
}

.engagement-detail-pov__copy .section-lead {
  margin-top: 0;
  max-width: none;
}

.engagement-detail-pov__copy p:not(.section-lead):not(.engagement-detail-pov__statement) {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  opacity: 0.78;
  text-wrap: pretty;
}

.card--surface-signal .engagement-detail-pov__copy .section-lead {
  opacity: 0.92;
}

.card--surface-signal .engagement-detail-pov__copy p:not(.section-lead) {
  opacity: 0.82;
}

.engagement-detail-pov__copy p + p {
  margin-top: var(--space-5);
}

.section--engagement-scope {
  padding-top: clamp(var(--space-7), 6vw, var(--space-9));
  padding-bottom: clamp(var(--space-7), 6vw, var(--space-9));
}

.engagement-detail-scope__title {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(var(--text-3xl), 2.5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);
  text-wrap: balance;
}

.engagement-detail-scope__lead {
  max-width: 54ch;
  margin-top: var(--space-4);
  font-size: clamp(var(--text-base), 1.15vw, var(--text-lg));
  line-height: var(--leading-base);
  opacity: var(--opacity-interactive-subtle);
  text-wrap: pretty;
}

.engagement-detail-scope__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-4), 2.5vw, var(--space-6));
  margin: clamp(var(--space-7), 5vw, var(--space-9)) 0 0;
  padding: 0;
  list-style: none;
}

.engagement-detail-scope__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider-light);
}

.engagement-detail-scope__index {
  font-size: var(--text-xs);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
  opacity: 0.42;
}

.engagement-detail-scope__label {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-medium);
  text-wrap: balance;
}

.engagement-detail .engagement-detail-scope__grid {
  --scope-column-gap: clamp(var(--space-10), 8vw, var(--space-12));
  --scope-item-gap: clamp(var(--space-7), 3.5vw, var(--space-8));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--scope-column-gap);
}

.engagement-detail .engagement-detail-scope__item {
  border-top: none;
  padding-block: var(--scope-item-gap);
}

.engagement-detail .engagement-detail-scope__item:not(:nth-last-child(-n+2)) {
  border-bottom: 1px solid var(--divider-light);
}

.engagement-detail .engagement-detail-scope__desc {
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  opacity: var(--opacity-interactive-subtle);
  text-wrap: pretty;
}

.section--engagement-outcome {
  padding-top: clamp(var(--space-8), 7vw, var(--space-10));
  padding-bottom: clamp(var(--space-8), 7vw, var(--space-10));
}

.engagement-detail-outcome {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 6vw, var(--space-10));
  align-items: stretch;
}

.engagement-detail-outcome__column {
  display: flex;
  flex-direction: column;
}

.engagement-detail-outcome__title {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(var(--text-3xl), 2.5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);
  text-wrap: balance;
}

.engagement-detail-outcome__copy {
  margin-top: 0;
}

.engagement-detail-outcome__copy .section-lead {
  margin-top: 0;
  max-width: none;
}

.engagement-detail-outcome__copy p:not(.section-lead) {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  opacity: 0.78;
  text-wrap: pretty;
}

.card--surface-signal .engagement-detail-outcome__copy .section-lead {
  opacity: 0.92;
}

.card--surface-signal .engagement-detail-outcome__copy p:not(.section-lead) {
  opacity: 0.82;
}

.engagement-detail-outcome__copy p + p {
  margin-top: var(--space-5);
}

.section--engagement-proof {
  --engagement-proof-column-gap: clamp(var(--space-3), 0.75vw, var(--space-4));

  padding-top: clamp(var(--space-8), 7vw, var(--space-10));
  padding-bottom: clamp(var(--space-8), 7vw, var(--space-10));
}

main.engagement-detail .section-shell.section--engagement-proof > .section-inner {
  max-width: var(--container-sm);
}

.engagement-detail .engagement-detail-proof__title {
  margin: 0 auto clamp(var(--space-7), 5vw, var(--space-9));

  font-size: clamp(var(--text-2md), 2.2vw, var(--text-2xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);
  text-align: center;
  text-wrap: nowrap;
}

@media (max-width: 760px) {
  .engagement-detail .engagement-detail-proof__title {
    text-wrap: balance;
  }
}

.engagement-detail .section--engagement-proof .engagement-detail-proof__gallery.work-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--engagement-proof-column-gap);
  width: 100%;
  margin: 0;
  padding: 0;
}

.engagement-detail .section--engagement-proof .work-index .work-card {
  position: relative;
  display: grid;
  overflow: visible;
  aspect-ratio: auto;
  background: transparent;
  outline: none;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 0.41s ease-in-out;
}

.engagement-detail .section--engagement-proof .work-index .work-card::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 10 / 16;
  pointer-events: none;
}

.engagement-detail .section--engagement-proof .work-index .work-card-media {
  position: relative;
  grid-area: 1 / 1;
  align-self: start;
  inset: auto;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 10 / 16;
  border-radius: var(--radius-card-compact);
  background: transparent;
  outline: none;
  transform: translateY(0);
  transition:
    aspect-ratio 0.41s ease-in-out,
    transform 0.41s ease-in-out;
}

.engagement-detail .section--engagement-proof .work-index .work-card:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: var(--motion-shift-subtle);
}

.engagement-detail .section--engagement-proof .work-index .work-card:focus-visible .work-card-media {
  aspect-ratio: 10 / 14;
  transform: translateY(calc(var(--space-3) * -1));
}

@media (hover: hover) and (pointer: fine) {
  .engagement-detail .section--engagement-proof .work-index .work-card:hover .work-card-media {
    aspect-ratio: 10 / 14;
    transform: translateY(calc(var(--space-3) * -1));
  }
}

.engagement-detail .section--engagement-proof .work-index .work-card-media .work-card-image,
.engagement-detail .section--engagement-proof .work-index .work-card-media .work-card-video {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 16;
  object-fit: cover;
  object-position: top center;
  opacity: 1;
  transform: none;
  transition: none;
}

.engagement-detail .section--engagement-proof .work-index .work-card-media .work-card-arrow {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  right: var(--space-3);
  font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
  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;
}

.engagement-detail .section--engagement-proof .work-index .work-card:focus-visible .work-card-media .work-card-arrow {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .engagement-detail .section--engagement-proof .work-index .work-card:hover .work-card-media .work-card-arrow {
    opacity: 1;
    transform: translateY(0);
  }
}

.engagement-detail .section--engagement-proof .work-index .work-card-overlay {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  row-gap: 0;
  align-items: end;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  opacity: 1;
  transform: none;
  pointer-events: none;
  transition: none;
}

.engagement-detail .section--engagement-proof .work-index .work-card-meta {
  grid-column: 1;
  grid-row: 2;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-regular);
  opacity: 0;
  transform: translateY(var(--space-3));
  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
}

.engagement-detail .section--engagement-proof .work-index .work-card:focus-visible .work-card-meta {
  opacity: var(--opacity-interactive-subtle);
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .engagement-detail .section--engagement-proof .work-index .work-card:hover .work-card-meta {
    opacity: var(--opacity-interactive-subtle);
    transform: translateY(0);
  }
}

.engagement-detail .section--engagement-proof .work-index .work-card-title {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
  font-size: var(--text-lg);
  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;
}

.engagement-detail .section--engagement-proof .work-index .work-card:focus-visible .work-card-title {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .engagement-detail .section--engagement-proof .work-index .work-card:hover .work-card-title {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .engagement-detail .section--engagement-proof .engagement-detail-proof__gallery.work-index {
    display: flex;
    gap: var(--engagement-proof-column-gap);
    width: calc(100% + var(--section-padding-x));
    margin-right: calc(var(--section-padding-x) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-right: var(--section-padding-x);
    scroll-padding-right: var(--section-padding-x);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .engagement-detail .section--engagement-proof .engagement-detail-proof__gallery.work-index::-webkit-scrollbar {
    display: none;
  }

  .engagement-detail .section--engagement-proof .work-index .work-card {
    flex: 0 0 40vw;
    scroll-snap-align: start;
  }

  .engagement-detail .section--engagement-proof .work-index .work-card-overlay {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .engagement-detail .section--engagement-proof .work-index .work-card-media {
    transition: none;
  }

  .engagement-detail .section--engagement-proof .work-index .work-card:focus-visible .work-card-media {
    aspect-ratio: 10 / 16;
    transform: translateY(0);
  }

  .engagement-detail .section--engagement-proof .work-index .work-card-media .work-card-arrow,
  .engagement-detail .section--engagement-proof .work-index .work-card-meta,
  .engagement-detail .section--engagement-proof .work-index .work-card-title {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .engagement-detail .section--engagement-proof .work-index .work-card:hover .work-card-media {
    aspect-ratio: 10 / 16;
    transform: translateY(0);
  }
}

.section--cta .closing-content {
  max-width: 100%;
}

.section--cta .closing-title {
  font-size: clamp(var(--text-3xl), 2.5vw, var(--text-4xl));
}

@media (max-width: 820px) {
  .engagement-detail-hero__layout {
    grid-template-columns: 1fr;
    gap: clamp(var(--space-8), 7vw, var(--space-10));
  }

  .engagement-detail-marker--hero .engagement-detail-marker__icon {
    width: min(277px, 79.2vw);
    height: min(277px, 79.2vw);
  }

  .engagement-detail-context,
  .engagement-detail-outcome {
    grid-template-columns: 1fr;
    gap: clamp(var(--space-8), 7vw, var(--space-10));
  }

  .engagement-detail-section-title,
  .engagement-detail-subsection-title,
  .engagement-detail-pov__copy,
  .engagement-detail-outcome__copy p {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .section--engagement-hero {
    padding-top: var(--space-11);
    padding-bottom: var(--space-8);
  }

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

  .engagement-detail-hero__lead,
  .engagement-detail-hero__body {
    max-width: none;
  }

  .engagement-detail-row {
    gap: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .engagement-detail-marker--hero .engagement-detail-marker__icon svg {
    animation: none;
  }
}

/* Engagement detail page-specific overrides. All rules scoped to .engagement-detail. */

/* ---------------------------------------------------------------
   Hero — two-column layout within standard section width
   --------------------------------------------------------------- */

.engagement-detail .section--engagement-hero {
  isolation: isolate;
  overflow: visible;
  padding-top: clamp(var(--space-11), 14vw, var(--space-13-0));
  padding-bottom: clamp(var(--space-9), 9vw, var(--space-11-0));
}

.engagement-detail .engagement-detail-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--space-7), 5vw, var(--space-10));
  align-items: center;
  width: 100%;
}

.engagement-detail .engagement-detail-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
}

/* Eyebrow = icon + label on one line (one marker, not two) */
.engagement-detail .engagement-detail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);

  margin: 0 0 var(--space-6);

  font-size: var(--text-xs);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

.engagement-detail .engagement-detail-eyebrow .engagement-eyebrow-label {
  opacity: var(--opacity-interactive-subtle);
}

.engagement-detail .engagement-detail-hero__title {
  max-width: 16ch;
  margin: 0;
}

.engagement-detail .engagement-detail-hero__lead {
  max-width: 42ch;
  margin-top: clamp(var(--space-6), 3vw, var(--space-7));

  font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-lead);

  opacity: 0.86;
  text-wrap: pretty;
}

.engagement-detail .engagement-detail-hero__body {
  max-width: 50ch;
  margin-top: var(--space-5);

  font-size: clamp(var(--text-base), 1.2vw, var(--text-lg));
  line-height: var(--leading-relaxed);

  opacity: 0.66;
  text-wrap: pretty;
}

.engagement-detail .engagement-detail-hero__cta {
  margin-top: clamp(var(--space-7), 4vw, var(--space-8));
}

.engagement-detail .engagement-detail-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.engagement-detail .engagement-hero-schematic {
  width: 100%;
  opacity: 0.74;
}

.engagement-detail .engagement-hero-schematic__svg {
  display: block;
  overflow: visible;
  width: 100%;
  height: auto;
}

.engagement-detail .engagement-hero-schematic__grid {
  opacity: 0.42;
}

.engagement-detail .engagement-hero-schematic__marks {
  opacity: 0.34;
}

.engagement-detail .engagement-hero-schematic__guides path:nth-child(1) {
  opacity: 0.28;
}

.engagement-detail .engagement-hero-schematic__guides path:nth-child(2) {
  opacity: 0.44;
}

.engagement-detail .engagement-hero-schematic__guides path:nth-child(3) {
  opacity: 0.34;
}

.engagement-detail .engagement-hero-schematic__frame {
  opacity: 0.52;
}

.engagement-detail .engagement-hero-schematic__callouts {
  opacity: 0.36;
}

.engagement-detail .engagement-hero-schematic__label {
  font-family: var(--font-primary);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.38;
}

/* ---------------------------------------------------------------
   Recognition — title left, numbered rows right (gives the page shape)
   --------------------------------------------------------------- */

.engagement-detail .section--engagement-recognition {
  padding-top: clamp(var(--space-8), 7vw, var(--space-10));
  padding-bottom: clamp(var(--space-8), 7vw, var(--space-10));
}

main.engagement-detail .section-shell.section--engagement-recognition > .section-inner {
  max-width: var(--container-md-lg);
}

.engagement-detail .engagement-detail-recognition {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: start;
}

.engagement-detail .engagement-detail-recognition__head,
.engagement-detail .engagement-detail-recognition .engagement-detail-rows {
  min-width: 0;
}

.engagement-detail .engagement-detail-recognition .engagement-detail-section-title {
  max-width: none;
}

.engagement-detail .engagement-detail-recognition .engagement-detail-row {
  align-items: center;
  gap: var(--space-4);
  padding: clamp(var(--space-4), 2.5vw, var(--space-5)) 0;
}

.engagement-detail .engagement-detail-recognition .engagement-detail-row:first-child {
  border-top: none;
  padding-top: 0;
}

@media (min-width: 861px) {
  .engagement-detail .engagement-detail-recognition .engagement-detail-row__text {
    text-wrap: nowrap;
  }
}

.engagement-detail .section--engagement-recognition[data-theme="dark"] .engagement-detail-row {
  border-top-color: var(--divider-dark);
}

/* rows + row index/text are inherited from engagement-page.css */

/* ---------------------------------------------------------------
   Point of view — light expanding editorial panel, statement left / copy right
   --------------------------------------------------------------- */

.engagement-detail .section--engagement-pov {
  padding-top: clamp(var(--space-10), 10vw, var(--space-13));
  padding-bottom: clamp(var(--space-10), 10vw, var(--space-13));
  overflow: visible;
}

.engagement-detail .engagement-detail-pov {
  position: relative;
  width: min(100%, var(--container-xl));
  max-width: 100%;
  margin-inline: auto;
  padding: clamp(var(--space-8), 6vw, var(--space-10));
  background: transparent;
}

.engagement-detail .engagement-detail-pov__inner {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-7), 6vw, var(--space-10));
  align-items: start;

  width: 100%;
  max-width: var(--container-md-lg);
  margin-inline: auto;

  /* Local surface panel — legible while global bg is still dark */
  color: var(--text-primary);
}

.engagement-detail .engagement-detail-pov__title {
  max-width: 14ch;
  margin: 0;

  font-size: clamp(var(--text-2xl), 3.4vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);

  text-wrap: balance;
}

.engagement-detail .engagement-detail-pov__copy {
  max-width: 48ch;
}

.engagement-detail .engagement-detail-pov__statement {
  margin: 0;

  font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-lead);
  color: var(--text-secondary);

  text-wrap: pretty;
}

.engagement-detail .engagement-detail-pov__copy p:not(.engagement-detail-pov__statement) {
  margin-top: var(--space-5);

  font-size: var(--text-base);
  line-height: var(--leading-relaxed);

  opacity: 0.74;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------
   Outcome — large mineral conviction section; statement as heading
   --------------------------------------------------------------- */

.engagement-detail .section--engagement-outcome {
  min-height: 75svh;
  justify-content: center;

  padding-top: clamp(var(--space-11), 11vw, var(--space-12));
  padding-bottom: clamp(var(--space-11), 11vw, var(--space-12));
}

.engagement-detail .engagement-detail-outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.engagement-detail .engagement-detail-outcome__kicker {
  margin: 0 0 var(--space-5);

  font-size: var(--text-xs);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  text-align: center;

  opacity: 0.6;
}

.engagement-detail .engagement-detail-outcome__title {
  max-width: 22ch;
  margin: 0;

  font-size: clamp(var(--text-3xl), 4.2vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);

  text-wrap: balance;
}

.engagement-detail .engagement-detail-outcome__body {
  max-width: 42ch;
  margin-top: clamp(var(--space-6), 3vw, var(--space-7));

  font-size: clamp(var(--text-lg), 1.35vw, var(--text-xl));
  line-height: var(--leading-relaxed);
  text-align: center;

  opacity: var(--opacity-interactive-subtle);
  text-wrap: pretty;
}

/* Proof, testimonial, closing, and footer reuse existing component/page styles. */

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

@media (max-width: 980px) and (min-width: 761px) {

  .engagement-detail .section--engagement-hero {
    padding-top: var(--section-hero-padding-top-tablet);
    padding-bottom: var(--space-14-0);
  }

  .engagement-detail .engagement-detail-hero__title {
    max-width: 14ch;
    font-size: clamp(3.25rem, 6vw, 5.25rem);
    line-height: 0.92;
  }

  .engagement-detail .engagement-detail-hero__lead {
    max-width: 34ch;
    margin-top: var(--space-5);
    font-size: var(--text-xl);
    line-height: var(--leading-base);
  }

  .engagement-detail .engagement-detail-hero__cta {
    margin-top: var(--space-7);
  }

  .engagement-detail .engagement-hero-schematic {
    width: min(43.2vw, 420px);
    max-width: 100%;
    opacity: 0.7;
  }

}

@media (max-width: 860px) {

  .engagement-detail .engagement-detail-recognition {
    grid-template-columns: 1fr;
    gap: clamp(var(--space-6), 6vw, var(--space-8));
  }

}

@media (min-width: 761px) and (max-width: 860px) {
  .engagement-detail .engagement-detail-recognition__head {
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 760px) {

  .engagement-detail .section--engagement-hero {
    overflow: hidden;
    padding-top: var(--space-11);
    padding-bottom: calc((var(--space-8) + var(--space-4)) * 0.4);
  }

  .engagement-detail .section--engagement-hero:has(.engagement-hero-schematic) .engagement-detail-hero__title {
    margin-top: 231px;
    max-width: 12ch;
  }

  .engagement-detail .engagement-detail-hero__layout {
    display: block;
    position: relative;
  }

  .engagement-detail .engagement-detail-hero__visual {
    position: absolute;
    z-index: 2;
    top: var(--section-padding-x);
    right: calc(-1 * var(--space-3));
    left: auto;
    width: min(100%, 408px);
    max-width: 100%;
    transform: translateY(-5%);
    justify-content: flex-end;
    align-items: flex-start;
  }

  .engagement-detail .engagement-hero-schematic {
    width: 100%;
    opacity: 0.68;
  }

  .engagement-detail .engagement-detail-hero,
  .engagement-detail .engagement-detail-hero__lead,
  .engagement-detail .engagement-detail-hero__body,
  .engagement-detail .engagement-detail-outcome__title,
  .engagement-detail .engagement-detail-outcome__body {
    max-width: none;
  }

  .engagement-detail .engagement-detail-scope__grid {
    grid-template-columns: 1fr;
  }

  .engagement-detail .engagement-detail-pov__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .engagement-detail .engagement-detail-pov__title {
    max-width: none;
    font-size: clamp(var(--text-2md), 3.4vw, var(--text-4xl));
  }

  .engagement-detail .engagement-detail-section-title,
  .engagement-detail .engagement-detail-scope__title {
    font-size: clamp(var(--text-2xl), 2.5vw, var(--text-3xl));
  }

  .engagement-detail .engagement-detail-recognition__head {
    margin-bottom: 0;
  }

  .engagement-detail .engagement-detail-recognition {
    gap: var(--space-6);
  }

  .engagement-detail .engagement-detail-recognition .engagement-detail-row {
    padding-block: var(--space-4);
  }

  .engagement-detail .section--engagement-hero--editorial {
    min-height: auto;
    justify-content: flex-start;
    padding-top: var(--space-11);
    padding-bottom: calc(var(--space-8) + var(--space-4));
  }

  .engagement-detail .section--engagement-hero--editorial .engagement-detail-eyebrow {
    margin-bottom: var(--space-6);
  }

  .engagement-detail .section--engagement-hero--editorial .section-lead {
    margin-top: var(--space-5);
  }

  .engagement-detail .section--engagement-hero--editorial .section-title {
    font-size: clamp(var(--text-3xl), 5vw, 4.75rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-heading);
  }

  .engagement-detail .section--engagement-recognition,
  .engagement-detail .section--engagement-scope,
  .engagement-detail .section--engagement-proof {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }

  .engagement-detail .section--engagement-pov {
    padding-top: var(--space-7);
    padding-bottom: var(--space-8);
  }

  .engagement-detail .engagement-detail-pov {
    padding: var(--space-6);
  }

  .engagement-detail .engagement-detail-scope__grid {
    margin-top: var(--space-6);
  }

  .engagement-detail .engagement-detail-scope__item {
    padding-block: var(--space-5);
  }

  .engagement-detail .section--engagement-outcome {
    min-height: auto;
    padding-top: var(--space-8);
    padding-bottom: var(--space-7);
  }

  .engagement-detail .engagement-detail-outcome {
    align-items: flex-start;
    text-align: left;
  }

  .engagement-detail .engagement-detail-outcome__kicker,
  .engagement-detail .engagement-detail-outcome__body {
    text-align: left;
  }

  .engagement-detail .engagement-detail-outcome__title {
    font-size: clamp(var(--text-3xl), 4.2vw, var(--text-4xl));
  }

  .engagement-detail .engagement-detail-proof__title {
    margin: 0 0 var(--space-6);
    font-size: clamp(var(--text-xl), 2.2vw, var(--text-2md));
    text-align: left;
  }

  .engagement-detail .section--cta .closing-title {
    font-size: clamp(var(--text-2xl), 2.5vw, var(--text-3xl));
  }

  .engagement-detail .engagement-detail-scope__item:not(:nth-last-child(-n+2)) {
    border-bottom: none;
  }

  .engagement-detail .engagement-detail-scope__item:not(:last-child) {
    border-bottom: 1px solid var(--divider-light);
  }

}

/* ---------------------------------------------------------------
   PoV panel — content fixed; white shell expands behind it
   --------------------------------------------------------------- */

main.engagement-detail .section-shell.section--engagement-pov > .section-inner {
  max-width: var(--container-xl);
}

.engagement-detail .engagement-detail-pov::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: 0;

  width: var(--container-md-lg);
  max-width: 100%;

  background: var(--bg-surface);
  border-radius: var(--radius-sm);

  transform: translateX(-50%);
  transition: width 1215ms cubic-bezier(0.22, 1, 0.36, 1);
}

.engagement-detail .section--engagement-pov.is-expanded .engagement-detail-pov::before {
  width: var(--container-xl);
}

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

  .engagement-detail .engagement-detail-pov::before {
    width: var(--container-xl);
    transition: none;
  }

  .engagement-detail .engagement-detail-testimonial::before {
    width: var(--container-md-lg);
    transition: none;
  }

}

/* ---------------------------------------------------------------
   Testimonial — quote shell with expanding surface treatment
   --------------------------------------------------------------- */

.engagement-detail .section--engagement-testimonial {
  padding-top: clamp(var(--space-6), 4vw, var(--space-8));
  padding-bottom: clamp(var(--space-8), 8vw, var(--space-10));
  overflow: visible;
}

.engagement-detail .engagement-detail-testimonial {
  position: relative;
  width: min(100%, var(--container-md-lg));
  max-width: 100%;
  margin-inline: auto;
  padding: clamp(var(--space-8), 6vw, var(--space-10));
  background: transparent;
}

.engagement-detail .engagement-detail-testimonial__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-6), 4vw, var(--space-7));

  width: 100%;
  max-width: var(--container-md-plus);
  margin-inline: auto;
  padding-top: clamp(var(--space-6), 4vw, var(--space-7));
  text-align: center;
}

.engagement-detail .engagement-detail-testimonial::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: 0;

  width: var(--container-md-plus);
  max-width: 100%;

  background: var(--bg-surface);
  border-radius: var(--radius-md);

  transform: translateX(-50%);
  transition: width 1215ms cubic-bezier(0.22, 1, 0.36, 1);
}

.engagement-detail .section--engagement-testimonial.is-expanded .engagement-detail-testimonial::before {
  width: var(--container-md-lg);
}

.engagement-detail .engagement-detail-testimonial__quote {
  margin: 0;
}

.engagement-detail .engagement-detail-testimonial__quote p {
  margin: 0;

  font-family: var(--font-serif);
  font-size: clamp(var(--text-xl), 2vw, var(--text-2md));
  line-height: var(--leading-serif-body);
  letter-spacing: var(--tracking-serif-body);
  font-weight: var(--weight-light);
  font-optical-sizing: auto;

  color: var(--text-primary);
  text-wrap: pretty;
}

.engagement-detail .engagement-detail-testimonial__attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.engagement-detail .engagement-detail-testimonial__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
}

.engagement-detail .engagement-detail-testimonial__role {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  opacity: 0.52;
  letter-spacing: var(--tracking-body);
}

/* ---------------------------------------------------------------
   Editorial centered hero — matches engagements hub index
   --------------------------------------------------------------- */

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

.engagement-detail .section--engagement-hero--editorial > .section-inner {
  max-width: var(--container-lg);
}

.engagement-detail .section--engagement-hero--editorial .hero-layout {
  margin-inline: auto;
  text-align: center;
}

.engagement-detail .section--engagement-hero--editorial .engagement-detail-eyebrow {
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.engagement-detail .section--engagement-hero--editorial .section-title,
.engagement-detail .section--engagement-hero--editorial .section-lead,
.engagement-detail .section--engagement-hero--editorial .engagement-detail-hero__support {
  margin-inline: auto;
}

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

.engagement-detail .section--engagement-hero--editorial .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);
}

.engagement-detail .section--engagement-hero--editorial .engagement-detail-hero__support {
  max-width: 50ch;
  margin-top: var(--space-5);
  font-size: clamp(var(--text-base), 1.2vw, var(--text-lg));
  line-height: var(--leading-relaxed);
  opacity: 0.66;
  text-wrap: pretty;
}

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

  .engagement-detail .section--engagement-hero--editorial .hero-layout {
    margin-inline: 0;
    text-align: left;
  }

  .engagement-detail .section--engagement-hero--editorial .engagement-detail-eyebrow {
    justify-content: flex-start;
    margin-inline: 0;
  }

  .engagement-detail .section--engagement-hero--editorial .section-title,
  .engagement-detail .section--engagement-hero--editorial .section-lead,
  .engagement-detail .section--engagement-hero--editorial .engagement-detail-hero__support {
    margin-inline: 0;
  }

  .engagement-detail .section--engagement-hero--editorial .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);
  }

  .engagement-detail .section--engagement-hero--editorial .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);
  }

  .engagement-detail .section--engagement-hero--editorial .engagement-detail-hero__support {
    max-width: 50ch;
  }
}

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

  .engagement-detail .section--engagement-hero--editorial .section-lead {
    max-width: 42ch;
    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);
  }

  .engagement-detail .engagement-detail-section-title,
  .engagement-detail .engagement-detail-scope__title {
    font-size: clamp(var(--text-2xl), 2.5vw, var(--text-3xl));
  }

  .engagement-detail .engagement-detail-pov__title {
    font-size: clamp(var(--text-2xl), 3.4vw, var(--text-4xl));
  }

  .engagement-detail .engagement-detail-pov__inner {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    gap: clamp(var(--space-6), 4vw, var(--space-7));
    max-width: 100%;
  }

  .engagement-detail .engagement-detail-outcome {
    align-items: flex-start;
    text-align: left;
  }

  .engagement-detail .engagement-detail-outcome__kicker,
  .engagement-detail .engagement-detail-outcome__body {
    text-align: left;
  }

  .engagement-detail .engagement-detail-outcome__title {
    font-size: clamp(var(--text-3xl), 4.2vw, var(--text-4xl));
  }

  .engagement-detail .section--cta .closing-title {
    font-size: clamp(var(--text-2xl), 2.5vw, var(--text-3xl));
  }

  .engagement-detail .section--engagement-recognition {
    padding-top: clamp(var(--space-7), 5vw, var(--space-8));
    padding-bottom: clamp(var(--space-7), 5vw, var(--space-8));
  }

  .engagement-detail .engagement-detail-recognition {
    gap: clamp(var(--space-6), 4vw, var(--space-7));
  }

  .engagement-detail .engagement-detail-recognition .engagement-detail-rows {
    padding-inline-end: var(--space-4);
  }

  .engagement-detail .engagement-detail-recognition .engagement-detail-row__text {
    text-wrap: pretty;
  }

  .engagement-detail .section--engagement-pov {
    padding-top: clamp(var(--space-8), 8vw, var(--space-10));
    padding-bottom: clamp(var(--space-8), 8vw, var(--space-10));
  }

  .engagement-detail .engagement-detail-pov {
    padding: clamp(var(--space-7), 5vw, var(--space-8));
  }

  .engagement-detail .section--engagement-scope {
    padding-top: clamp(var(--space-7), 5vw, var(--space-8));
    padding-bottom: clamp(var(--space-7), 5vw, var(--space-8));
  }

  .engagement-detail .section--engagement-outcome {
    min-height: auto;
    padding-top: clamp(var(--space-9), 8vw, var(--space-10));
    padding-bottom: clamp(var(--space-8), 7vw, var(--space-9));
  }

  .engagement-detail .section--engagement-proof {
    --engagement-proof-column-gap: var(--space-4);

    padding-top: clamp(var(--space-7), 5vw, var(--space-8));
    padding-bottom: clamp(var(--space-7), 5vw, var(--space-8));
  }

  .engagement-detail .engagement-detail-proof__title {
    margin: 0 0 clamp(var(--space-7), 4vw, var(--space-8));
    font-size: clamp(var(--text-2md), 2.2vw, var(--text-2xl));
    text-align: left;
    text-wrap: balance;
  }

  .engagement-detail .section--engagement-proof .engagement-detail-proof__gallery.work-index {
    padding-bottom: var(--space-3);
  }

  .engagement-detail .section--cta {
    padding-top: clamp(var(--space-8), 7vw, var(--space-9));
    padding-bottom: clamp(var(--space-6), 5vw, var(--space-8));
  }
}

@media (min-width: 821px) and (max-width: 1024px) {
  main.engagement-detail .section-shell.section--engagement-proof > .section-inner {
    max-width: var(--container-sm);
  }
}