/* Engagements overview: isolated editorial project index. */
.engagements-overview {
  min-width: 320px;
  background: var(--color-surface);
}

.engagements-overview .desktop-nav.has-external-active .nav-signal { opacity: 0; }
.engagements-overview .desktop-nav a[aria-current="page"] { color: var(--color-ink); }
.engagements-overview .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

.engagement-label {
  color: var(--color-signal-strong);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .075em;
  line-height: 1.45;
  text-transform: uppercase;
}

.engagements-hero {
  position: relative;
  min-height: clamp(25rem, 49svh, 31rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(4.75rem, 7vw, 6.75rem) 0 clamp(4rem, 6vw, 5.5rem);
  color: #f4f6f3;
  background:
    radial-gradient(circle at 86% 26%, rgba(var(--color-signal-rgb), .16), transparent 28rem),
    linear-gradient(145deg, var(--color-ink-soft), var(--color-ink) 72%);
}

.engagements-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(47vw, 42rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(137, 213, 202, .68));
}

.engagements-hero__grid {
  position: absolute;
  inset: 0;
  opacity: .11;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: clamp(4.5rem, 7vw, 7rem) clamp(4.5rem, 7vw, 7rem);
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .38) 68%, transparent);
}

.engagements-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(22rem, .72fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
}

.engagements-hero .micro-label { grid-column: 1 / -1; color: #89d5ca; }
.engagements-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.75rem, 6.1vw, 5.45rem);
  font-weight: 600;
  letter-spacing: -.058em;
  line-height: .98;
}

.engagements-hero__inner > p:last-child {
  max-width: 38rem;
  padding-bottom: .25rem;
  color: rgba(244, 246, 243, .78);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.7;
}

.featured-engagement { padding: clamp(5.5rem, 8vw, 8rem) 0; }
.featured-engagement__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .62fr);
  gap: clamp(3.5rem, 8vw, 8.5rem);
  align-items: start;
}

.featured-engagement__content { min-width: 0; }
.featured-engagement__content header { padding-bottom: clamp(2rem, 4vw, 3.25rem); border-bottom: 1px solid var(--color-line); }
.featured-engagement__content h2 {
  max-width: 12ch;
  margin-top: 1rem;
  font-size: clamp(3rem, 5.3vw, 5rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .98;
}

.featured-engagement__meta {
  display: grid;
  grid-template-columns: .72fr 1.08fr 1.35fr;
  margin: 0;
  border-bottom: 1px solid var(--color-line);
}

.featured-engagement__meta div { min-width: 0; padding: 1.35rem 1.15rem 1.35rem 0; }
.featured-engagement__meta div + div { padding-left: 1.15rem; border-left: 1px solid var(--color-line); }
.featured-engagement__meta dt {
  color: var(--color-signal-strong);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}
.featured-engagement__meta dd { margin: .55rem 0 0; font: 600 .9375rem/1.5 var(--font-display); letter-spacing: -.018em; }

.featured-engagement__narrative {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.25rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.featured-engagement__narrative > div { display: grid; align-content: start; gap: .75rem; }
.featured-engagement__narrative > div > p:last-child { color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.7; }

.featured-engagement__deliverable {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-line-strong);
  border-bottom: 1px solid var(--color-line);
}
.featured-engagement__deliverable span { color: var(--color-signal-strong); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; }
.featured-engagement__deliverable strong { font: 600 clamp(1.05rem, 1.55vw, 1.3rem)/1.4 var(--font-display); letter-spacing: -.025em; }

.engagement-cta,
.engagement-record__link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--color-ink);
  font: 700 .875rem/1 var(--font-display);
  letter-spacing: -.018em;
  text-decoration: none;
}
.engagement-cta { margin-top: 1.6rem; }
.engagement-cta span,
.engagement-record__link span { color: var(--color-signal-strong); transition: transform var(--duration-fast) var(--ease-out); }
.engagement-cta:hover span,
.engagement-cta:focus-visible span,
.engagement-record__link:hover span,
.engagement-record__link:focus-visible span { transform: translateX(2px); }

.featured-proof { position: sticky; top: 6.25rem; margin: 0; }
.featured-proof__frame {
  position: relative;
  width: min(100%, 24rem);
  margin-left: auto;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  background: var(--color-ink);
  border: 1px solid rgba(var(--color-ink-rgb), .18);
  box-shadow: 0 1.7rem 4rem rgba(var(--color-ink-rgb), .12);
}
.featured-proof__frame::before {
  content: "";
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  width: 4.5rem;
  height: 4.5rem;
  border-top: 1px solid var(--color-signal);
  border-right: 1px solid var(--color-signal);
}
.featured-proof img { width: 100%; height: auto; display: block; background: #fff; }
.featured-proof figcaption {
  width: min(100%, 24rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0 auto;
  padding-top: .85rem;
  color: var(--color-text-muted);
  font-size: .8125rem;
  line-height: 1.45;
}
.featured-proof figcaption span { color: var(--color-signal-strong); font-weight: 600; letter-spacing: .055em; }
.featured-proof figcaption p { text-align: right; }

.selected-engagements { padding: clamp(5.5rem, 8vw, 8rem) 0; background: var(--color-paper); }
.selected-engagements__header {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(22rem, .68fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5.25rem);
}
.selected-engagements__header h2 { max-width: 14ch; margin-top: .85rem; font-size: clamp(2.6rem, 4.3vw, 4.1rem); line-height: 1; }
.selected-engagements__header > p { max-width: 38rem; color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.7; }

.engagement-records { border-top: 1px solid var(--color-line-strong); }
.engagement-record {
  display: grid;
  grid-template-columns: minmax(8rem, .42fr) minmax(0, 1.1fr) minmax(18rem, .72fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0;
  border-bottom: 1px solid var(--color-line);
}
.engagement-record__index { display: flex; align-items: flex-start; gap: 1rem; }
.engagement-record__index span { color: var(--color-signal-strong); font: 600 .8125rem/1.45 var(--font-body); }
.engagement-record__index p { color: var(--color-text-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .045em; line-height: 1.55; }
.engagement-record__content h3 { font-size: clamp(2rem, 3.4vw, 3.3rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.engagement-record__role { margin-top: .8rem; color: var(--color-signal-strong); font: 600 .875rem/1.45 var(--font-display); letter-spacing: -.012em; }
.engagement-record__content > p:last-child { max-width: 48rem; margin-top: 1.35rem; color: var(--color-text-muted); font-size: 1rem; line-height: 1.7; }
.engagement-record__detail { align-self: start; }
.engagement-record__detail ul { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.engagement-record__detail li { padding: .42rem .58rem; color: var(--color-text-muted); border: 1px solid var(--color-line); font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.engagement-record__link { margin-top: 1.35rem; }
.engagement-record__status {
  margin-top: 1.55rem;
  padding-top: 1rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-line);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1.45;
}
.engagement-record--static { background: linear-gradient(90deg, transparent, rgba(var(--color-ink-rgb), .018)); }

.engagements-synthesis { padding: clamp(4.75rem, 7vw, 7rem) 0; color: #f4f6f3; background: var(--color-ink); }
.engagements-synthesis__layout { display: grid; grid-template-columns: minmax(10rem, .42fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 9rem); }
.engagements-synthesis .micro-label { color: #89d5ca; }
.engagements-synthesis h2 { max-width: 15ch; font-size: clamp(2.6rem, 4.4vw, 4.25rem); font-weight: 500; line-height: 1.02; }
.engagements-synthesis__layout > div > p { max-width: 48rem; margin-top: 1.75rem; color: rgba(244, 246, 243, .78); font-size: 1.0625rem; line-height: 1.72; }

.engagements-contact { padding: clamp(5rem, 8vw, 7.5rem) 0; background: var(--color-surface); }
.engagements-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(22rem, .7fr);
  gap: clamp(2.5rem, 8vw, 8rem);
  align-items: end;
}
.engagements-contact h2 { max-width: 11ch; margin-top: 1rem; font-size: clamp(2.8rem, 4.8vw, 4.6rem); font-weight: 500; line-height: 1; }
.engagements-contact__layout > div:last-child > p { max-width: 40rem; color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.7; }
.engagements-contact .button { margin-top: 2rem; }

@media (max-width: 1024px) {
  .engagements-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(19rem, .75fr); gap: 3rem; }
  .featured-engagement__layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, .55fr); gap: 3.5rem; }
  .featured-engagement__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-engagement__meta div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--color-line); border-left: 0; padding-left: 0; }
  .engagement-record { grid-template-columns: 8rem minmax(0, 1fr); }
  .engagement-record__detail { grid-column: 2; }
}

@media (max-width: 900px) {
  .engagements-hero { min-height: auto; }
  .engagements-hero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .engagements-hero .micro-label { grid-column: auto; }
  .engagements-hero h1 { max-width: 11ch; }
  .engagements-hero__inner > p:last-child { max-width: 42rem; }
  .featured-engagement__layout { grid-template-columns: minmax(0, 1fr) minmax(15rem, .5fr); gap: 2.5rem; }
  .featured-engagement__narrative { grid-template-columns: 1fr; }
  .featured-proof { position: static; }
  .selected-engagements__header { grid-template-columns: 1fr; gap: 1.5rem; }
  .engagements-contact__layout { grid-template-columns: 1fr; gap: 2.25rem; align-items: start; }
}

@media (max-width: 720px) {
  .engagements-hero { padding: 4.5rem 0 3.75rem; }
  .engagements-hero h1 { font-size: clamp(2.85rem, 11vw, 3.55rem); line-height: 1.01; }
  .featured-engagement__layout { grid-template-columns: 1fr; }
  .featured-proof { width: min(100%, 22rem); }
  .featured-proof__frame,
  .featured-proof figcaption { margin-left: 0; }
  .engagement-record { grid-template-columns: 1fr; gap: 1.6rem; }
  .engagement-record__detail { grid-column: auto; }
  .engagements-synthesis__layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 640px) {
  .engagements-hero { padding: 4rem 0 3.5rem; }
  .engagements-hero__grid { opacity: .08; background-size: 4rem 4rem; }
  .engagements-hero h1 { max-width: 9.6ch; font-size: clamp(2.65rem, 12vw, 3.25rem); letter-spacing: -.05em; line-height: 1.03; }
  .engagements-hero__inner > p:last-child { font-size: 1rem; line-height: 1.65; }
  .featured-engagement { padding-block: 4.75rem; }
  .featured-engagement__content h2 { font-size: clamp(2.75rem, 12.5vw, 3.45rem); line-height: 1; }
  .featured-engagement__meta { grid-template-columns: 1fr; }
  .featured-engagement__meta div + div,
  .featured-engagement__meta div:nth-child(3) { grid-column: auto; padding-left: 0; border-top: 1px solid var(--color-line); border-left: 0; }
  .featured-engagement__narrative > div > p:last-child { font-size: 1rem; line-height: 1.65; }
  .featured-engagement__deliverable { grid-template-columns: 1fr; gap: .55rem; }
  .featured-proof figcaption { display: grid; gap: .3rem; }
  .featured-proof figcaption p { text-align: left; }
  .selected-engagements { padding-block: 4.75rem; }
  .selected-engagements__header { margin-bottom: 3rem; }
  .selected-engagements__header h2 { font-size: clamp(2.45rem, 11vw, 3rem); }
  .selected-engagements__header > p { font-size: 1rem; line-height: 1.65; }
  .engagement-record { padding-block: 2.6rem; }
  .engagement-record__index { justify-content: space-between; }
  .engagement-record__index p { text-align: right; }
  .engagement-record__content h3 { font-size: clamp(2.25rem, 10vw, 2.8rem); }
  .engagement-record__content > p:last-child { font-size: 1rem; line-height: 1.65; }
  .engagement-record__detail li { min-height: 2rem; display: inline-flex; align-items: center; }
  .engagement-record__link { min-height: 2.75rem; margin-top: 1.2rem; }
  .engagements-synthesis { padding-block: 4.75rem; }
  .engagements-synthesis h2 { font-size: clamp(2.45rem, 11vw, 3rem); }
  .engagements-synthesis__layout > div > p { font-size: 1rem; line-height: 1.65; }
  .engagements-contact { padding-block: 4.75rem; }
  .engagements-contact h2 { max-width: 100%; font-size: clamp(2.45rem, 10.5vw, 3rem); line-height: 1.04; }
  .engagements-contact__layout > div:last-child > p { font-size: 1rem; line-height: 1.65; }
  .engagements-contact .button { width: 100%; min-height: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .engagements-overview *,
  .engagements-overview *::before,
  .engagements-overview *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .featured-proof__frame,
  .engagement-record,
  .featured-engagement__deliverable { border-color: CanvasText; }
}