/* ===========================================================================
   PAGE SECTIONS
   Every value a token. Sizes follow the Figma type ramp across the three
   breakpoints via the clamp() scale in theme.json, so nothing is restated.
   =========================================================================== */

.di-main { padding-bottom: var(--s-section); }

.di-band { padding-block: var(--s-section); }
.di-band + .di-band { padding-top: 0; }

.di-measure { max-width: var(--measure); }

.di-index {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.012em;
  color: var(--ground-accent, var(--c-text-accent));
  margin-right: var(--s-md);
}

.di-crumb {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
  margin: 0 0 var(--s-xl);
}
.di-crumb a { color: inherit; }

/* The label above a heading is a span, never a heading element — marking it
   up as one would wreck the outline. */
.di-section-head { margin-bottom: var(--s-2xl); }
.di-section-head h2 { margin: var(--s-lg) 0 0; max-width: 900px; }
.di-section-head__intro,
.di-page-head__intro {
  margin: var(--s-lg) 0 0;
  max-width: var(--measure);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--c-text-secondary);
}

.di-page-head { padding-block: var(--s-4xl) var(--s-2xl); }
.di-page-head h1 { margin: var(--s-xl) 0 0; }
.di-page-head .di-rule { margin-top: var(--s-xl); }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.di-hero { padding-block: var(--s-3xl) var(--s-2xl); }

.di-hero__labels { display: flex; align-items: center; gap: var(--s-md); }
.di-hero__labels .di-label { color: var(--c-text-secondary); }
.di-hero__spacer { flex: 1; height: 1px; background: var(--c-border-hairline); }

.di-hero .di-rule { margin-top: var(--s-2xl); }

.di-hero__headline {
  margin: var(--s-2xl) 0 0;
  font-size: var(--wp--preset--font-size--display-xl, 6rem);
  line-height: 1;
  letter-spacing: -0.0035em;
  max-width: 14ch;
}

.di-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 772px) minmax(0, 380px);
  gap: var(--s-4xl);
  margin-top: var(--s-2xl);
}

.di-hero__lede p {
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0 0 var(--s-xl);
}

.di-hero__plate { margin: 0; }
.di-hero__plate .di-plate__img,
.di-hero__plate .di-plate__empty { width: 100%; }

@media (max-width: 1023px) {
  .di-hero__row { grid-template-columns: 1fr; gap: var(--s-2xl); }
}
@media (max-width: 767px) {
  .di-hero__labels .di-label:last-child { display: none; }
  .di-hero__headline { max-width: none; }
}

/* ---------------------------------------------------------------------------
   Plates
   --------------------------------------------------------------------------- */

.di-plate { display: block; margin: 0; position: relative; }
.di-plate__img { display: block; width: 100%; height: auto; }

.di-plate__empty {
  display: block;
  width: 100%;
  background: var(--c-bg-raised);
  border: var(--bw-hairline) solid var(--c-border-hairline);
}
.di-plate--16-9 .di-plate__empty { aspect-ratio: 16 / 9; }
.di-plate--4-3  .di-plate__empty { aspect-ratio: 4 / 3; }
.di-plate--1-1  .di-plate__empty { aspect-ratio: 1 / 1; }
.di-plate--3-4  .di-plate__empty { aspect-ratio: 3 / 4; }

.di-plate__caption {
  display: flex;
  gap: var(--s-md);
  margin-top: var(--s-md);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  color: var(--c-text-tertiary);
}
.di-plate__fig { color: var(--c-text-accent); }

.di-plates { display: grid; gap: var(--s-2xl); margin-block: var(--s-2xl); }
@media (min-width: 768px) {
  .di-plates { grid-template-columns: repeat(2, 1fr); }
  .di-plates > :only-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Work cards
   Hover: title to accent, 2px accent stroke on the plate, rule appears.
   No zoom, no lift, no shadow — the restraint is the point.
   --------------------------------------------------------------------------- */

.di-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2xl) var(--s-lg);
}
@media (max-width: 1023px) { .di-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .di-grid { grid-template-columns: 1fr; gap: var(--s-2xl); } }

.di-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.di-card__index {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.014em;
  color: var(--c-text-tertiary);
  margin-bottom: var(--s-sm);
}

.di-card .di-plate__img,
.di-card .di-plate__empty {
  border: var(--bw-medium) solid transparent;
  transition: border-color 160ms ease-out;
}

.di-card__body { display: block; padding-top: var(--s-md); position: relative; }

.di-card__body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bw-medium);
  background: var(--c-border-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease-out;
}

.di-card__title {
  display: block;
  font-size: 1.625rem;
  line-height: 1.31;
  transition: color 160ms ease-out;
}

.di-card__meta {
  display: block;
  margin-top: var(--s-xs);
  font-size: 0.9375rem;
  color: var(--c-text-secondary);
}

.di-card__link:hover .di-card__title,
.di-card__link:focus-visible .di-card__title { color: var(--c-text-accent); }

.di-card__link:hover .di-plate__img,
.di-card__link:hover .di-plate__empty,
.di-card__link:focus-visible .di-plate__img,
.di-card__link:focus-visible .di-plate__empty { border-color: var(--c-border-accent); }

.di-card__link:hover .di-card__body::before,
.di-card__link:focus-visible .di-card__body::before { transform: scaleX(1); }

/* The List layout crushes the title column below 768, so it is never used
   there — the stacked Grid card is the mobile card. */
@media (min-width: 768px) {
  .di-card--list .di-card__link {
    display: grid;
    grid-template-columns: 48px 1fr 180px;
    gap: var(--s-xl);
    align-items: center;
    padding-block: var(--s-lg);
    border-top: var(--bw-hairline) solid var(--c-border-hairline);
  }
  .di-card--list .di-card__body::before { display: none; }
}

.di-band__foot { margin-top: var(--s-2xl); }

/* ---------------------------------------------------------------------------
   Sector filter — horizontally scrolling below 768, with a partial item
   showing at the right edge as the affordance. No visible scrollbar.
   --------------------------------------------------------------------------- */

.di-filter {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  margin-bottom: var(--s-2xl);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}

.di-filter__label,
.di-filter__count { color: var(--c-text-tertiary); flex: none; }
.di-filter__count { margin-left: auto; }

.di-filter__items { display: flex; gap: var(--s-lg); min-width: 0; }
.di-filter__items a {
  color: var(--c-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--s-sm);
  border-bottom: var(--bw-medium) solid transparent;
}
.di-filter__items a:hover { color: var(--c-text-primary); }
.di-filter__items a[aria-current="page"] {
  color: var(--c-text-accent);
  border-bottom-color: var(--c-border-accent);
}

@media (max-width: 767px) {
  .di-filter { gap: var(--s-md); }
  .di-filter__count { display: none; }
  .di-filter__items {
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: var(--s-2xl);
  }
  .di-filter__items::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------------------
   Two-column rows — label left, copy right. Collapse to one column with the
   label stacked above, below 1024.
   --------------------------------------------------------------------------- */

.di-row {
  display: grid;
  grid-template-columns: 300px minmax(0, 852px);
  gap: var(--s-4xl);
}
.di-row__label { color: var(--c-text-tertiary); margin: 0; }
.di-row__copy > :first-child { margin-top: 0; }
.di-row__sub { font-size: 1.25rem; margin-top: var(--s-2xl); }

.di-row__copy p { max-width: var(--measure); }

@media (max-width: 1023px) {
  .di-row { grid-template-columns: 1fr; gap: var(--s-lg); }
  .di-row__copy p { max-width: none; }
}

.di-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); }
@media (max-width: 767px) { .di-cols-3 { grid-template-columns: 1fr; gap: var(--s-2xl); } }

.di-col__head {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--s-md);
}

.di-plain { list-style: none; padding: 0; margin: 0; }
.di-plain li {
  padding-block: var(--s-sm);
  border-top: var(--bw-hairline) solid var(--c-border-hairline);
}

.di-list { list-style: none; padding: 0; margin: var(--s-lg) 0 0; }
.di-list li {
  position: relative;
  padding-left: var(--s-xl);
  padding-block: var(--s-sm);
  max-width: var(--measure);
}
.di-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 10px;
  height: 1px;
  background: var(--c-text-accent);
}

/* ---------------------------------------------------------------------------
   Case study
   --------------------------------------------------------------------------- */

.di-case__head { padding-block: var(--s-4xl) var(--s-2xl); }
.di-case__intro {
  display: grid;
  grid-template-columns: minmax(0, 732px) minmax(0, 420px);
  gap: var(--s-4xl);
  margin-top: var(--s-2xl);
}
.di-case__summary { font-size: 1.25rem; line-height: 1.5; margin: 0; }
.di-case__plate { margin-block: var(--s-2xl); }

@media (max-width: 1023px) {
  .di-case__intro { grid-template-columns: 1fr; gap: var(--s-2xl); }
}

.di-narrative { display: grid; gap: var(--s-section); }
.di-section {
  display: grid;
  grid-template-columns: 300px minmax(0, 852px);
  gap: var(--s-4xl);
}
.di-section__label { color: var(--c-text-tertiary); margin: 0; }
.di-section__copy > :first-child { margin-top: 0; }
.di-section__copy p { max-width: var(--measure); }

@media (max-width: 1023px) {
  .di-section { grid-template-columns: 1fr; gap: var(--s-lg); }
  .di-section__copy p { max-width: none; }
}

.di-quote {
  margin: var(--s-2xl) 0;
  padding-left: var(--s-xl);
  border-left: var(--bw-medium) solid var(--c-border-accent);
}
.di-quote p { font-size: 2.25rem; line-height: 1.17; margin: 0; }
.di-quote cite {
  display: block;
  margin-top: var(--s-lg);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  font-style: normal;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  color: var(--c-text-tertiary);
}

.di-next { margin-top: var(--s-section); }
.di-next__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-lg);
  padding-top: var(--s-xl);
  text-decoration: none;
  color: inherit;
}
.di-next__title { font-size: 2.25rem; line-height: 1.17; }
.di-next__link:hover .di-next__title { color: var(--c-text-accent); }

/* ---------------------------------------------------------------------------
   Stats — evidence, not decoration.
   --------------------------------------------------------------------------- */

.di-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-lg);
  margin-block: var(--s-2xl);
}
.di-stat { border-top: var(--bw-hairline) solid var(--c-border-hairline); padding-top: var(--s-md); }
.di-stat__value {
  font-size: 3rem;
  line-height: 1.125;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.di-stat__label {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
  margin: var(--s-xs) 0 0;
}
@media (max-width: 1023px) { .di-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .di-stats { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Offer blocks, steps, lab strip, CTA
   --------------------------------------------------------------------------- */

.di-offer-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.di-offer h3 { margin: var(--s-lg) 0 var(--s-md); font-size: 1.625rem; }
.di-offer h3 a { text-decoration: none; color: inherit; }
.di-offer h3 a:hover { color: var(--c-text-accent); }
.di-offer p { color: var(--c-text-secondary); margin: 0; }
@media (max-width: 767px) { .di-offer-row { grid-template-columns: 1fr; gap: var(--s-2xl); } }

.di-offer-block { padding-block: var(--s-2xl); }

.di-steps {
  list-style: none;
  padding: 0;
  margin: var(--s-2xl) 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-lg);
}
.di-steps h3 { font-size: 1.25rem; margin: var(--s-md) 0 var(--s-sm); }
.di-steps p { font-size: 0.9375rem; color: var(--c-text-secondary); margin: 0; }
@media (max-width: 1023px) { .di-steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-xl); } }
@media (max-width: 767px)  { .di-steps { grid-template-columns: 1fr; } }

.di-lab { display: flex; align-items: center; gap: var(--s-md); }
.di-lab__spacer { flex: 1; height: 1px; background: var(--c-border-hairline); }
.di-lab__venues {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  margin: 0;
}
@media (max-width: 767px) { .di-lab__spacer, .di-lab__venues { display: none; } }

.di-cta { padding-block: var(--s-section); }
.di-cta h2 { margin: var(--s-lg) 0 var(--s-lg); max-width: 900px; }
.di-cta__body { max-width: 640px; color: var(--c-text-secondary); margin-bottom: var(--s-2xl); }

.di-about__copy h2 { margin: var(--s-lg) 0 var(--s-xl); max-width: 760px; }
.di-about__copy p { max-width: 700px; color: var(--c-text-secondary); }
.di-about__copy .di-btn { margin-top: var(--s-xl); }

/* ---------------------------------------------------------------------------
   Form — visible labels, real error elements, an honest success state.
   --------------------------------------------------------------------------- */

.di-contact-row {
  display: grid;
  grid-template-columns: minmax(0, 732px) minmax(0, 420px);
  gap: var(--s-4xl);
}
@media (max-width: 1023px) {
  .di-contact-row { grid-template-columns: 1fr; gap: var(--s-2xl); }
}

.di-field { margin-bottom: var(--s-xl); }
.di-field label {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
  margin-bottom: var(--s-xs);
}
.di-field__opt { color: var(--c-text-tertiary); }

.di-field input,
.di-field textarea {
  width: 100%;
  padding: var(--s-sm) var(--s-md);
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--c-text-primary);
  background: var(--c-bg-raised);
  border: var(--bw-hairline) solid var(--c-border-field);
  border-radius: var(--radius-sm);
}
.di-field input:focus,
.di-field textarea:focus {
  outline: var(--bw-accent) solid var(--c-border-accent);
  outline-offset: 2px;
  border-color: var(--c-border-accent);
}

.di-field input:user-invalid,
.di-field textarea:user-invalid { border-color: var(--c-border-accent); border-width: var(--bw-medium); }

/* The honeypot is hidden from people without being display:none, which some
   bots check for. Never hidden from the DOM. */
.di-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.di-form__note {
  margin-top: var(--s-xl);
  font-size: 0.9375rem;
  color: var(--c-text-secondary);
}

.di-form__status {
  padding: var(--s-md);
  margin-bottom: var(--s-xl);
  border-left: var(--bw-medium) solid var(--c-border-accent);
  background: var(--c-bg-accent-subtle);
}
.di-form__status--error { font-weight: 500; }

.di-note { margin-top: var(--s-2xl); }
.di-note__body,
.di-note p { font-size: 0.9375rem; color: var(--c-text-secondary); }

/* ---------------------------------------------------------------------------
   Journal
   --------------------------------------------------------------------------- */

.di-journal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
@media (max-width: 767px) { .di-journal-row { grid-template-columns: 1fr; gap: var(--s-2xl); } }

.di-jcard__meta { color: var(--c-text-tertiary); margin: 0 0 var(--s-md); }
.di-jcard__title { margin: 0 0 var(--s-md); }
.di-jcard__title a { text-decoration: none; color: inherit; }
.di-jcard__title a:hover { color: var(--c-text-accent); }
.di-jcard__excerpt { font-size: 0.9375rem; color: var(--c-text-secondary); margin: 0; }

.di-jrow {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-2xl);
  padding-block: var(--s-2xl);
  border-top: var(--bw-hairline) solid var(--c-border-hairline);
}
.di-jrow__date { color: var(--c-text-tertiary); margin: 0; }
.di-jrow__title { margin: 0 0 var(--s-md); }
.di-jrow__title a { text-decoration: none; color: inherit; }
.di-jrow__title a:hover { color: var(--c-text-accent); }
.di-jrow__excerpt { max-width: var(--measure); color: var(--c-text-secondary); margin: 0; }
@media (max-width: 767px) { .di-jrow { grid-template-columns: 1fr; gap: var(--s-sm); } }

.di-article__title { max-width: 1100px; }
.di-article__meta { gap: var(--s-xl); margin-block: var(--s-xl); color: var(--c-text-tertiary); }
.di-article__plate { margin-block: var(--s-2xl); }
.di-article__body > * { max-width: var(--measure); }
.di-article__body > .di-quote { max-width: none; }

.di-author { margin-top: var(--s-section); }
.di-author__bio { max-width: 620px; margin: var(--s-md) 0 var(--s-xl); }

/* ---------------------------------------------------------------------------
   Legal, 404, pagination, empties
   --------------------------------------------------------------------------- */

.di-legal { padding-block: var(--s-xl); }
.di-legal h2 { font-size: 1.625rem; margin: var(--s-sm) 0 var(--s-md); }
.di-onthispage { position: sticky; top: 120px; align-self: start; }
.di-onthispage a { color: var(--c-text-secondary); text-decoration: none; }
.di-onthispage a:hover { color: var(--c-text-accent); }
@media (max-width: 1023px) { .di-onthispage { position: static; } }

.di-404 { padding-block: var(--s-6xl) var(--s-section); }
.di-404 h1 { margin: var(--s-xl) 0; }
.di-404__body { max-width: 720px; font-size: 1.25rem; color: var(--c-text-secondary); }
.di-404__actions { display: flex; gap: var(--s-lg); align-items: center; margin-top: var(--s-2xl); }
@media (max-width: 767px) { .di-404__actions { flex-direction: column; align-items: stretch; } }

.di-pagination {
  display: flex;
  gap: var(--s-lg);
  margin-top: var(--s-2xl);
  padding-top: var(--s-lg);
  border-top: var(--bw-hairline) solid var(--c-border-hairline);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}

.di-empty {
  padding: var(--s-2xl);
  border: var(--bw-hairline) dashed var(--c-border-hairline);
  color: var(--c-text-secondary);
  max-width: var(--measure);
}