/* ==========================================================================
   MINIMAL EDITORIAL LAYER — 2026 services restructure
   Ported from qualls-strategic-prototype-minimal and adapted to this site's
   tokens. Loaded AFTER styles.css, only on pages that use it.

   Every block styled by this layer carries the `ed` scope class, so nothing
   here leaks into existing components. Class names follow the prototype
   except where they'd collide with styles.css:
     .lede         → .ed-lede
     .text-link    → .ed-text-link
     .service-hero → .ed-hero
     .service-cta  → .ed-cta
   Scroll reveals use the site's existing [data-reveal] mechanism (app.js).
   ========================================================================== */

:root {
  --ed-paper: var(--paper);
  --ed-white: var(--actual-white, #fff);
  --ed-ink: #131316;
  --ed-graphite: #5f5f5a;
  --ed-rule: #d8d7d0;
  --ed-rule-dark: #3c3c3e;
  --ed-wash: #ecebe5;
  --ed-muted-light: #d1d1cc;
  --ed-label-light: #bdbdb7;
  --ed-accent: var(--hot);
  --ed-container: 1320px;
  --ed-gutter: clamp(20px, 4vw, 64px);
  --ed-space: clamp(88px, 10vw, 152px);
  --ed-transition: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --ed-font: "Stack Sans Headline", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ed-serif: "Playfair Display", Georgia, serif;
}

/* ---- Scope base ---------------------------------------------------------- */
.ed,
.ed *,
.ed *::before,
.ed *::after {
  box-sizing: border-box;
}

.ed {
  font-family: var(--ed-font);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ed-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* styles.css sets heading font/weight/leading globally with !important, so the
   editorial scope has to answer in kind. */
.ed :is(h1, h2, h3, h4) {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--ed-font) !important;
  font-weight: 520 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
}

/* h1 uses the site's DISPLAY face (Protest Strike); h2/h3/h4 stay on the
   editorial grotesk. Same specificity as the :is() rule above, declared later,
   so these win. */
.ed h1 {
  font-size: clamp(44px, 5vw, 68px);
  max-width: 13ch;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.025em !important;
}
.ed h2 { font-size: clamp(32px, 3.35vw, 45px); max-width: 17ch; }
.ed h3 { font-size: clamp(23px, 2.15vw, 31px); }

.ed :is(p, ul, ol, dl, dd, blockquote) {
  margin-top: 0;
}

.ed :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

.ed img {
  display: block;
  width: 100%;
  height: auto;
}

.ed a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.ed a:hover {
  color: var(--ed-accent);
}

/* ---- Layout primitives --------------------------------------------------- */
.ed .container {
  width: min(calc(100% - (2 * var(--ed-gutter))), var(--ed-container));
  margin-inline: auto;
}

.ed.section,
.ed .section {
  padding-block: var(--ed-space);
}

.ed.section--paper { background: var(--ed-paper); }
.ed.section--white { background: var(--ed-white); }

.ed.section--dark {
  color: var(--ed-white);
  background: var(--ed-ink);
}

.ed.section--dark :is(h1, h2, h3, h4) {
  color: var(--ed-white);
}

/* ---- Type helpers -------------------------------------------------------- */
.ed .eyebrow,
.ed .section-label {
  margin-bottom: 18px;
  color: var(--ed-graphite);
  font-family: var(--ed-font);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ed.section--dark .eyebrow,
.ed.section--dark .section-label {
  color: var(--ed-label-light);
}

/* Eyebrow-as-link (program pages: "Program" back to /capabilities/) */
.ed .eyebrow a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ed-transition);
}
.ed .eyebrow a:hover,
.ed .eyebrow a:focus-visible {
  color: var(--ed-ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.ed .ed-lede {
  max-width: 735px;
  color: var(--ed-graphite);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.022em;
}

.ed .body-large {
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.38;
  letter-spacing: -0.02em;
}

.ed .muted {
  color: var(--ed-graphite);
}

.ed .editorial-word {
  font-family: var(--ed-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}

/* ---- Links + buttons ------------------------------------------------------ */
.ed .ed-text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  margin-inline: -14px 0;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  transition: color var(--ed-transition), background var(--ed-transition);
}

.ed .ed-text-link::after {
  content: "\2192";
  display: inline-block;
  transition: transform var(--ed-transition);
}

.ed .ed-text-link:hover,
.ed .ed-text-link:focus-visible {
  color: inherit;
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.ed .ed-text-link:hover::after,
.ed .ed-text-link:focus-visible::after {
  transform: translateX(5px);
}

.ed .button-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  margin-inline: -16px 0;
  border-bottom: 1px solid currentColor;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  transition: color var(--ed-transition), background var(--ed-transition);
}

.ed .button-link::after {
  content: "\2192";
  transition: transform var(--ed-transition);
}

.ed .button-link:hover,
.ed .button-link:focus-visible {
  color: inherit;
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.ed .button-link:hover::after,
.ed .button-link:focus-visible::after {
  transform: translateX(5px);
}

/* ---- Section intro grid --------------------------------------------------- */
.ed .section-intro,
.ed .ed-hero-grid,
.ed .summary-grid {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(0, 8fr) minmax(180px, 2fr);
  column-gap: clamp(24px, 4vw, 64px);
}

.ed .section-intro {
  margin-bottom: clamp(52px, 7vw, 96px);
}

.ed .section-intro .section-label {
  padding-top: 8px;
  margin-bottom: 18px;
}

.ed .section-intro-content {
  grid-column: 2 / 4;
}

.ed .section-intro-content h2 + p {
  margin-top: 28px;
}

/* ---- Page hero (capabilities + service pages) ----------------------------- */
.ed.ed-hero {
  padding-top: clamp(120px, 14vw, 180px);
  padding-bottom: clamp(82px, 10vw, 144px);
  background: var(--ed-paper);
}

.ed .ed-hero-grid .eyebrow {
  padding-top: 10px;
  margin-bottom: 0;
}

.ed .ed-hero-content {
  grid-column: 2 / 4;
}

.ed.ed-hero h1 {
  max-width: 14ch;
  font-size: clamp(44px, 4.7vw, 64px);
}

.ed .ed-hero-line {
  max-width: 820px;
  margin-top: 30px;
  margin-bottom: 0;
  color: var(--ed-graphite);
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.ed .ed-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 42px;
}

.ed .breadcrumb {
  margin: 0;
  padding: 28px 0 0;
  list-style: none;
}

.ed .breadcrumb li {
  display: inline;
  color: var(--ed-graphite);
  font-size: 13px;
}

.ed .breadcrumb li + li::before {
  margin-inline: 9px;
  content: "/";
}

.ed .breadcrumb a {
  color: inherit;
}

/* ---- Situation index ------------------------------------------------------ */
.ed .situation-list,
.ed .related-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ed-rule);
  list-style: none;
}

.ed .situation-row {
  display: grid;
  min-height: 104px;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  padding: 30px 36px;
  border-bottom: 1px solid var(--ed-rule);
  text-decoration: none;
  transition: background var(--ed-transition), color var(--ed-transition), transform var(--ed-transition);
}

.ed .situation-row:hover,
.ed .situation-row:focus-visible {
  color: var(--ed-ink);
  background: var(--ed-wash);
  transform: translateX(6px);
}

.ed .situation-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--ed-graphite);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ed .situation-title {
  font-size: clamp(21px, 2.05vw, 29px);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.ed .situation-arrow {
  justify-self: end;
  font-size: 20px;
  transition: transform var(--ed-transition);
}

.ed .situation-row:hover .situation-arrow,
.ed .situation-row:focus-visible .situation-arrow {
  transform: translateX(5px);
}

/* ---- Service accordions ---------------------------------------------------- */
.ed .service-index {
  border-top: 1px solid var(--ed-rule);
}

.ed .service-accordion-item {
  border-bottom: 1px solid var(--ed-rule);
}

/* Trigger and panel share the same 2-column grid + padding so the promise line
   sits exactly above the detail column (per Joe's mockup). The toggle is
   absolutely positioned so it doesn't skew the columns. */
.ed .service-accordion-trigger {
  position: relative;
  display: grid;
  min-height: 110px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 3.2vw, 48px) clamp(24px, 3vw, 58px);
  padding-right: calc(clamp(24px, 3vw, 58px) + 48px);
  cursor: pointer;
  list-style: none;
  transition: color var(--ed-transition), background var(--ed-transition);
}

.ed .service-accordion-trigger::-webkit-details-marker {
  display: none;
}

.ed .service-accordion-trigger:hover,
.ed .service-accordion-trigger:focus-visible {
  color: var(--ed-ink);
  background: var(--ed-wash);
}

.ed .service-accordion-trigger:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--ed-accent);
}

.ed .service-accordion-name {
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.ed .service-accordion-promise {
  color: var(--ed-graphite);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.ed .service-accordion-toggle {
  position: absolute;
  top: 50%;
  right: clamp(24px, 3vw, 58px);
  width: 24px;
  height: 24px;
  margin-top: -12px;
}

.ed .service-accordion-toggle::before,
.ed .service-accordion-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1px;
  transform: translate(-50%, -50%);
  background: currentColor;
  content: "";
  transition: transform var(--ed-transition), opacity var(--ed-transition);
}

.ed .service-accordion-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.ed .service-accordion-item[open] > .service-accordion-trigger {
  color: var(--ed-white);
  background: var(--ed-ink);
  /* full-width hairline separating the header row from the panel body */
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 20%);
}

.ed .service-accordion-item[open] .service-accordion-promise {
  color: var(--ed-muted-light);
}

.ed .service-accordion-item[open] .service-accordion-toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.ed .service-accordion-item[open] > .service-accordion-trigger:hover,
.ed .service-accordion-item[open] > .service-accordion-trigger:focus-visible {
  color: var(--ed-white);
  background: #1b1b1d;
}

.ed .service-accordion-panel {
  color: var(--ed-white);
  background: var(--ed-ink);
}

.ed .service-accordion-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 40px;
  padding: clamp(44px, 5vw, 76px) clamp(24px, 3vw, 58px) clamp(44px, 4.5vw, 68px);
}

.ed .service-accordion-lead {
  max-width: 620px;
}

.ed .service-accordion-lead p {
  color: var(--ed-muted-light);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  margin-bottom: 0;
}

.ed .service-accordion-lead .service-accordion-lead-copy {
  color: var(--ed-white);
  margin-bottom: clamp(26px, 3vw, 42px);
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.02em;
}

.ed .service-panel-link {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 62px;
  grid-column: 2;
  align-items: center;
  justify-self: end;
  align-self: end;
  margin-top: clamp(24px, 3vw, 48px);
  gap: 26px;
  padding: 16px 30px;
  border: 1px solid rgb(255 255 255 / 45%);
  color: var(--ed-white);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--ed-transition), background var(--ed-transition), border-color var(--ed-transition), transform var(--ed-transition);
}

.ed .service-panel-link::after {
  flex: 0 0 auto;
  content: "\2192";
  transition: transform var(--ed-transition);
}

.ed .service-panel-link:hover,
.ed .service-panel-link:focus-visible {
  color: var(--ed-ink);
  background: var(--ed-paper);
  border-color: var(--ed-paper);
}

.ed .service-panel-link:hover::after,
.ed .service-panel-link:focus-visible::after {
  transform: translateX(5px);
}

.ed .service-accordion-details {
  margin: 0;
}

.ed .service-accordion-details > div {
  display: grid;
  grid-template-columns: minmax(135px, 2fr) minmax(0, 5fr);
  gap: 32px;
  padding: clamp(26px, 2.8vw, 40px) 0;
  border-bottom: 1px solid rgb(255 255 255 / 20%);
}

.ed .service-accordion-details > div:first-child {
  padding-top: 6px;
}

.ed .service-accordion-details > div:last-child {
  border-bottom: 0;
}

.ed .service-accordion-details dt {
  color: #a7a7a2;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ed .service-accordion-details dd {
  margin: 0;
  color: #dfdfda;
  font-size: 15px;
  line-height: 1.55;
}

/* A quiet wash callout that closes the list — prompt + serif note on the left,
   CTA vertically centred on the right. Replaces the old 3-column grid whose
   empty first column left it looking orphaned. */
.ed .unsure-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px clamp(32px, 4vw, 72px);
  margin-top: clamp(22px, 2.6vw, 40px);
  padding: clamp(30px, 3.2vw, 48px) clamp(28px, 3.2vw, 52px);
  background: var(--ed-white);
  transition: background var(--ed-transition);
}

.ed .unsure-note:hover,
.ed .unsure-note:focus-within {
  background: var(--ed-wash);
}

.ed .unsure-note p {
  flex: 1 1 460px;
  max-width: 66ch;
  margin-bottom: 0;
  color: var(--ed-graphite);
}

.ed .unsure-note p strong {
  display: block;
  margin-bottom: 9px;
  color: var(--ed-ink);
  font-family: var(--ed-font);
  font-size: clamp(20px, 1.65vw, 26px);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.ed .unsure-note .ed-text-link {
  flex: 0 0 auto;
  align-self: center;
}

/* ---- Sharp Brief — two-panel: forest graphic left, dark content right ------- */
.ed.sharp-section {
  display: grid;
  grid-template-columns: minmax(240px, 31%) minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
}

.ed .sharp-section__graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 5vw, 76px) clamp(22px, 2.6vw, 48px);
  background: var(--forest);
  overflow: hidden;
}

.ed .sharp-section__graphic img {
  width: 100%;
  max-width: 480px;
  height: auto;
}

.ed .sharp-grid {
  display: grid;
  grid-template-columns: minmax(140px, 2fr) minmax(0, 5.2fr) minmax(258px, 3.4fr);
  gap: clamp(26px, 3vw, 56px);
  align-items: start;
  padding: clamp(64px, 8vw, 128px) clamp(32px, 4vw, 80px);
}

.ed .sharp-grid > .section-label {
  margin: 0;
  padding-top: 10px;
}

.ed .sharp-copy h2 {
  max-width: 12ch;
  margin-bottom: clamp(24px, 3vw, 42px);
}

.ed .sharp-copy p {
  max-width: 650px;
  margin-bottom: 1em;
  color: var(--ed-muted-light);
}

.ed .sharp-copy .body-large {
  margin-bottom: clamp(24px, 3vw, 38px);
  color: var(--ed-white);
}

.ed .sharp-copy .button-link {
  margin-top: clamp(18px, 2.4vw, 34px);
  color: var(--ed-white);
}

.ed .sharp-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ed-rule-dark);
  list-style: none;
}

.ed .sharp-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--ed-rule-dark);
  color: var(--ed-muted-light);
  font-size: 14px;
}

/* Sharp Brief stacks the graphic above the content on narrow screens */
@media (max-width: 900px) {
  .ed.sharp-section {
    grid-template-columns: 1fr;
  }

  .ed .sharp-section__graphic {
    padding: clamp(40px, 8vw, 64px);
    min-height: 240px;
  }

  .ed .sharp-section__graphic img {
    max-width: 360px;
  }

  .ed .sharp-grid > .section-label {
    padding-top: 0;
  }
}

/* ---- Q360 + process columns ------------------------------------------------ */
.ed .ruled-columns,
.ed .process-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ed-rule);
}

.ed .ruled-item,
.ed .process-item {
  min-height: 250px;
  padding: 27px clamp(20px, 2.4vw, 38px) 28px 0;
  border-bottom: 1px solid var(--ed-rule);
}

.ed .ruled-item + .ruled-item,
.ed .process-item + .process-item {
  padding-left: clamp(20px, 2.4vw, 38px);
  border-left: 1px solid var(--ed-rule);
}

.ed .process-number {
  display: block;
  margin-bottom: 58px;
  color: var(--ed-graphite);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.ed .ruled-item h3,
.ed .process-item h3 {
  margin-bottom: 12px;
  font-size: 26px;
}

.ed .ruled-item p,
.ed .process-item p {
  color: var(--ed-graphite);
  font-size: 15px;
  line-height: 1.5;
}

.ed .ruled-item {
  min-height: 190px;
  padding-top: 34px;
}

/* Q360 glass word-marks (think / feel / touch / see). Each SVG is composed on
   one uniform canvas, so they render at a single size and centre together.
   mix-blend-mode: multiply drops the light glass highlights into the paper so
   only the dark strokes and iridescent refractions read. */
.ed .ruled-columns--q360 .ruled-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(30px, 3vw, 48px) clamp(14px, 1.8vw, 28px);
}

.ed .q360-mark {
  margin: 0 0 22px;
  line-height: 0;
}

.ed .q360-mark img {
  display: block;
  height: clamp(60px, 6vw, 92px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  mix-blend-mode: multiply;
}

.ed .service-process .process-item {
  min-height: 310px;
}

/* ---- Service page: summary, scenarios, outcomes, deliverables --------------- */
.ed .summary-content {
  grid-column: 2 / 4;
  max-width: 880px;
}

.ed .summary-content p {
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.35;
  letter-spacing: -0.025em;
  margin-bottom: 0.8em;
}

.ed .summary-content p + p {
  color: var(--ed-graphite);
}

.ed .scenario-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed .scenario-item {
  display: grid;
  grid-template-columns: minmax(240px, 4fr) minmax(0, 6fr);
  gap: clamp(20px, 3vw, 48px);
  padding: 28px 0;
}

.ed .scenario-item + .scenario-item {
  border-top: 1px solid var(--ed-rule);
}

.ed .scenario-item h3 {
  margin-bottom: 0;
  font-size: 22px;
  line-height: 1.15;
}

.ed .scenario-item p {
  max-width: 690px;
  margin-bottom: 0;
  color: var(--ed-graphite);
  font-size: 16px;
}

.ed .outcomes-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ed-rule);
  list-style: none;
}

.ed .outcomes-list li {
  min-height: 150px;
  padding: 30px clamp(14px, 1.8vw, 28px) 28px 0;
  border-bottom: 1px solid var(--ed-rule);
  font-size: 17px;
  line-height: 1.4;
}

.ed .outcomes-list li + li {
  padding-left: clamp(14px, 1.8vw, 28px);
  border-left: 1px solid var(--ed-rule);
}

.ed .deliverable-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ed .deliverable-group {
  padding: 28px clamp(18px, 2.2vw, 34px) 0 0;
}

.ed .deliverable-group + .deliverable-group {
  padding-left: clamp(18px, 2.2vw, 34px);
}

.ed .deliverable-group h3 {
  margin-bottom: 28px;
  font-size: 24px;
}

.ed .deliverable-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed .deliverable-group li {
  padding: 10px 0;
  color: var(--ed-graphite);
  font-size: 14px;
  line-height: 1.45;
}

.ed .deliverable-group li + li {
  border-top: 1px solid var(--ed-rule);
}

/* ---- Proof feature ----------------------------------------------------------- */
.ed .proof-feature {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(320px, 5fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: center;
}

.ed .proof-feature-image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ed-wash);
}

.ed .proof-feature-image img {
  height: 100%;
  object-fit: cover;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ed .proof-feature-image a:hover img,
.ed .proof-feature-image a:focus-visible img {
  transform: scale(1.018);
}

.ed .proof-feature-copy h2 {
  max-width: 16ch;
}

.ed .proof-feature-copy p {
  color: var(--ed-graphite);
  margin-bottom: 1em;
}

.ed .proof-feature-copy h2 + p {
  margin-top: 28px;
}

/* ---- FAQ + related --------------------------------------------------------- */
.ed .faq-list {
  border-top: 1px solid var(--ed-rule);
}

.ed .faq-item {
  border-bottom: 1px solid var(--ed-rule);
}

.ed .faq-item summary {
  position: relative;
  display: flex;
  min-height: 96px;
  align-items: center;
  padding: 26px 66px 26px 30px;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  transition: background var(--ed-transition);
}

.ed .faq-item summary:hover,
.ed .faq-item summary:focus-visible {
  background: var(--ed-wash);
}

.ed .faq-item summary::-webkit-details-marker {
  display: none;
}

.ed .faq-item summary::after {
  position: absolute;
  right: 30px;
  font-size: 24px;
  font-weight: 300;
  content: "+";
  transition: transform var(--ed-transition);
}

.ed .faq-item[open] summary::after {
  transform: rotate(45deg);
}

.ed .faq-answer {
  max-width: 780px;
  padding: 0 30px 36px;
  color: var(--ed-graphite);
  font-size: 16px;
}

.ed .related-list a {
  display: grid;
  min-height: 100px;
  grid-template-columns: 1fr 42px;
  align-items: center;
  padding: 28px 32px;
  border-bottom: 1px solid var(--ed-rule);
  font-size: clamp(19px, 1.8vw, 25px);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background var(--ed-transition), color var(--ed-transition), transform var(--ed-transition);
}

.ed .related-list a::after {
  justify-self: end;
  content: "\2192";
  transition: transform var(--ed-transition);
}

.ed .related-list a:hover,
.ed .related-list a:focus-visible {
  color: var(--ed-ink);
  background: var(--ed-wash);
  transform: translateX(6px);
}

.ed .related-list a:hover::after,
.ed .related-list a:focus-visible::after {
  transform: translateX(5px);
}

/* Related programs — situation cards (the newer treatment: the other programs
   framed in the client's own words, aligned under the section heading). The
   outer grid mirrors .section-intro's rail so the card row hangs off the same
   column as the "Explore the other ways we help." headline. */
.ed .related-cards {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(0, 8fr) minmax(180px, 2fr);
  column-gap: clamp(24px, 4vw, 64px);
}

.ed .related-cards__grid {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 22px);
}

.ed .related-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(38px, 5vw, 60px);
  min-height: clamp(186px, 14vw, 224px);
  padding: clamp(24px, 1.9vw, 32px);
  background: var(--ed-white);
  color: var(--ed-ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(19, 19, 22, 0.05);
  transition: transform var(--ed-transition), box-shadow var(--ed-transition);
}

.ed .related-card__title {
  font-family: var(--ed-font);
  font-weight: 520;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.ed .related-card__arrow {
  font-size: 22px;
  line-height: 1;
  color: var(--ed-ink);
  transition: transform var(--ed-transition);
}

.ed .related-card:hover,
.ed .related-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 24px 46px -26px rgba(19, 19, 22, 0.2);
}

.ed .related-card:hover .related-card__arrow,
.ed .related-card:focus-visible .related-card__arrow {
  transform: translateX(5px);
}

@media (max-width: 1080px) {
  .ed .related-cards { grid-template-columns: 1fr; column-gap: 0; }
  .ed .related-cards__grid { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .ed .related-cards__grid { grid-template-columns: 1fr; }
  .ed .related-card { min-height: 0; gap: clamp(28px, 8vw, 44px); }
}

/* ---- Editorial CTA ---------------------------------------------------------- */
.ed.ed-cta {
  padding-block: clamp(92px, 12vw, 170px);
}

.ed .ed-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
  gap: 60px;
  align-items: end;
}

.ed .ed-cta-grid h2 {
  max-width: 16ch;
}

.ed .ed-cta-copy p {
  color: var(--ed-muted-light);
  margin-bottom: 1em;
}

/* ---- Homepage programs section (replaces the cap-teaser) -------------------- */
/* Keeps the .services hook that app.js uses for the header-tone probe.
   The body[data-slide-transition="native"] rules in styles.css out-rank a bare
   class, so the override matches their specificity. */
.services--ed,
body[data-slide-transition="native"] .services--ed {
  display: block;
  min-height: 0;
  padding: var(--ed-space) 0;
}

/* ==========================================================================
   CASE STUDY HYBRID BLOCKS (Current Future mockup)
   The hero, More-work grid, project nav, page CTA and footer stay as the
   site's existing components; these are the editorial blocks in between.
   ========================================================================== */

/* Facts strip — 4-column dl under the case hero */
.ed.case-hybrid-facts {
  background: var(--ed-paper);
}

.ed .case-hybrid-facts-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 1.4fr 3.6fr;
  gap: clamp(24px, 3.5vw, 58px);
  margin: 0;
  padding: clamp(32px, 4vw, 52px) 0;
}

.ed .case-hybrid-facts-grid div {
  min-width: 0;
}

.ed .case-hybrid-facts-grid dt {
  margin-bottom: 8px;
  color: var(--ed-graphite);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ed .case-hybrid-facts-grid dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.ed .case-hybrid-facts-grid a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  margin: -8px -10px;
  padding: 8px 10px;
  text-decoration: underline;
}

/* Dark "The work" band */
.ed.case-hybrid-work {
  padding-block: clamp(96px, 11vw, 164px);
}

.ed .case-hybrid-work-intro {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(0, 8fr) minmax(100px, 2fr);
  gap: clamp(26px, 4vw, 64px);
}

.ed .case-hybrid-work-intro > div {
  grid-column: 2;
}

.ed .case-hybrid-work-intro h2 {
  max-width: 14ch;
  color: var(--ed-white);
}

.ed .case-hybrid-work-intro p:last-child {
  max-width: 720px;
  margin-top: 28px;
  margin-bottom: 0;
  color: #c5c5c0;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.5;
}

.ed .case-hybrid-work-media {
  max-width: 1180px;
  margin: clamp(62px, 7vw, 100px) auto 0;
  overflow: hidden;
  background: #050507;
}

/* Full-bleed figures */
.ed.case-hybrid-brand-strip {
  margin: 0;
  background: var(--ed-white);
}

.ed.case-hybrid-brand-strip img {
  width: 100%;
}

.ed.case-hybrid-brand-strip figcaption,
.ed .case-hybrid-buttons figcaption,
.ed.case-hybrid-application figcaption {
  padding-top: 15px;
  padding-bottom: 28px;
  color: var(--ed-graphite);
  font-size: 12px;
  line-height: 1.5;
}

/* Editorial copy blocks */
.ed .case-hybrid-editorial-grid,
.ed .case-hybrid-heading-grid {
  display: grid;
  grid-template-columns: minmax(170px, 2.4fr) minmax(0, 7.6fr) minmax(80px, 2fr);
  column-gap: clamp(26px, 5vw, 80px);
}

.ed .case-hybrid-editorial-grid .section-label,
.ed .case-hybrid-heading-grid .section-label {
  padding-top: 8px;
}

.ed .case-hybrid-editorial-grid > div,
.ed .case-hybrid-heading-grid h2 {
  grid-column: 2 / 4;
}

.ed .case-hybrid-editorial-grid h2 {
  max-width: 18ch;
}

.ed .case-hybrid-editorial-grid h2 + p {
  max-width: 790px;
  margin-top: clamp(30px, 4vw, 48px);
  margin-bottom: 0;
  color: var(--ed-graphite);
  font-size: clamp(19px, 1.65vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.ed .case-hybrid-buttons {
  width: min(calc(100% - (2 * var(--ed-gutter))), 1080px);
  margin: clamp(72px, 9vw, 130px) auto 0;
}

.ed .case-hybrid-buttons img {
  background: var(--ed-white);
}

/* Brief / move / result */
.ed .case-hybrid-heading-grid h2 {
  max-width: 17ch;
}

.ed .case-hybrid-story-list {
  max-width: 930px;
  margin: clamp(58px, 7vw, 96px) 0 0 auto;
}

.ed .case-hybrid-story-list article {
  display: grid;
  grid-template-columns: minmax(150px, 2.4fr) minmax(0, 7.6fr);
  gap: clamp(28px, 5vw, 78px);
  padding: 31px 0;
}

.ed .case-hybrid-story-list article + article {
  border-top: 1px solid var(--ed-rule);
}

.ed .case-hybrid-story-list h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}

.ed .case-hybrid-story-list p {
  margin: 0;
  color: var(--ed-graphite);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.48;
  letter-spacing: -0.015em;
}

/* Applications */
.ed.case-hybrid-application {
  margin: 0;
  background: var(--ed-white);
}

.ed.case-hybrid-application--object {
  padding: clamp(84px, 10vw, 150px) 0 clamp(36px, 5vw, 70px);
}

.ed .case-hybrid-application-inner {
  width: min(calc(100% - (2 * var(--ed-gutter))), 1080px);
  margin-inline: auto;
}

.ed.case-hybrid-logo-field {
  margin: 0;
  overflow: hidden;
  background: #1352ed;
}

.ed.case-hybrid-logo-field img {
  width: 100%;
}

/* Outcomes */
.ed .case-hybrid-outcome-list {
  max-width: 930px;
  margin: clamp(58px, 7vw, 96px) 0 0 auto;
  padding: 0;
  list-style: none;
}

.ed .case-hybrid-outcome-list li {
  padding: 26px 0;
  font-size: clamp(22px, 2.1vw, 31px);
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.ed .case-hybrid-outcome-list li + li {
  border-top: 1px solid var(--ed-rule);
}

/* Testimonial */
.ed.case-hybrid-testimonial {
  background: var(--ed-paper);
}

.ed .case-hybrid-testimonial-card {
  display: grid;
  min-height: 550px;
  grid-template-columns: minmax(0, 7.5fr) minmax(230px, 3fr);
  gap: clamp(50px, 7vw, 108px);
  align-items: end;
  overflow: hidden;
  padding: clamp(56px, 7vw, 92px) clamp(46px, 7vw, 100px) 0;
  background: var(--ed-white);
}

.ed .case-hybrid-quote {
  padding-bottom: clamp(56px, 7vw, 90px);
}

.ed .case-hybrid-pullquote {
  max-width: 15ch;
  font-size: clamp(34px, 3.5vw, 49px);
  line-height: 1.08;
}

.ed .case-hybrid-quote blockquote {
  max-width: 700px;
  margin: clamp(30px, 4vw, 48px) 0 0;
}

.ed .case-hybrid-quote blockquote p {
  color: var(--ed-graphite);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
}

.ed .case-hybrid-attribution {
  margin-top: 28px;
  margin-bottom: 0;
  color: var(--ed-graphite);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ed .case-hybrid-portrait {
  width: min(100%, 320px);
  margin: 0;
  justify-self: end;
}

/* Program band */
.ed.case-hybrid-program {
  padding-block: clamp(48px, 6vw, 78px);
}

.ed .case-hybrid-program-link {
  display: grid;
  grid-template-columns: minmax(180px, 2.4fr) minmax(0, 6fr) minmax(190px, 2.5fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
  padding: 26px 28px;
  color: var(--ed-white);
  text-decoration: none;
  transition: background var(--ed-transition), transform var(--ed-transition);
}

.ed .case-hybrid-program-link .section-label {
  margin: 0;
  color: var(--ed-label-light);
}

.ed .case-hybrid-program-link h2 {
  max-width: 18ch;
  color: var(--ed-white);
  font-size: clamp(27px, 2.55vw, 37px);
}

.ed .case-hybrid-program-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 14px;
  font-weight: 650;
}

.ed .case-hybrid-program-cta span {
  transition: transform var(--ed-transition);
}

.ed .case-hybrid-program-link:hover,
.ed .case-hybrid-program-link:focus-visible {
  color: var(--ed-white);
  background: #242426;
  transform: translateX(5px);
}

.ed .case-hybrid-program-link:hover .case-hybrid-program-cta span,
.ed .case-hybrid-program-link:focus-visible .case-hybrid-program-cta span {
  transform: translateX(5px);
}

/* "More work." — centred serif heading over the site's existing card grid */
.case-more--ed .case-more__head {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(46px, 6vw, 78px);
}

.case-more--ed .case-more__head h2 {
  font-family: var(--ed-serif) !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  font-size: clamp(34px, 3.4vw, 46px);
}

.case-more--ed .case-more__arrow {
  display: none;
}

/* ---- Capabilities glow hero -------------------------------------------------- */
/* Forest full-bleed with a sliced image strip down the left, a floating sliced
   wordmark, a paper copy card and a separate paper actions band. */
.ed.glow-hero {
  /* shared geometry: the actions band derives its left padding from the card's
     column setup so its links align exactly under the headline column */
  --gh-strip: clamp(180px, 22.75vw, 460px);
  /* how far the wordmark's base sits above the section bottom (the strip itself
     now runs full-height to the panel bottom, same as the green) */
  --gh-shape-bottom: clamp(60px, 10%, 128px);
  --gh-card-left: 8vw;
  --gh-card-w: min(80vw, 1620px);
  --gh-pad: clamp(28px, 4.8vw, 96px);
  --gh-col1: clamp(170px, 20vw, 300px);
  --gh-gap: clamp(28px, 3vw, 60px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(100svh, 980px);
  padding: clamp(120px, 16svh, 190px) 0 clamp(56px, 8svh, 96px);
  overflow: hidden;
  background: var(--forest);
}

.glow-hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--gh-strip);
}

.glow-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ed .glow-hero__mark {
  position: absolute;
  z-index: 3;
  bottom: var(--gh-shape-bottom);
  /* the wordmark sits ON the card, its left edge (the L-tops) on the card's left
     edge; the letters run right onto the paper, the Q pokes left/below */
  left: var(--gh-card-left);
  height: 50%;
  width: auto;
  pointer-events: none;
}

.glow-hero__card {
  position: relative;
  z-index: 2;
  display: grid;
  width: var(--gh-card-w);
  grid-template-columns: var(--gh-col1) minmax(0, 1fr);
  column-gap: var(--gh-gap);
  margin-left: var(--gh-card-left);
  padding: clamp(36px, 4.5vw, 82px) var(--gh-pad) clamp(56px, 9vh, 140px);
  background: var(--ed-paper);
}

.glow-hero__card .eyebrow {
  margin: 8px 0 0;
  max-width: 24ch;
}

.glow-hero__copy h1 {
  max-width: 13ch;
  font-size: clamp(40px, 3.9vw, 74px);
}

.glow-hero__copy p {
  max-width: 700px;
  margin: clamp(28px, 4vh, 46px) 0 0;
  color: var(--ed-graphite);
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.glow-hero__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  width: calc(var(--gh-card-left) + var(--gh-card-w) - var(--gh-strip));
  margin-top: clamp(14px, 2vh, 26px);
  margin-left: var(--gh-strip);
  padding: clamp(16px, 2.2vh, 28px) var(--gh-pad);
  /* first link sits exactly under the card's headline column */
  padding-left: calc(var(--gh-card-left) + var(--gh-pad) + var(--gh-col1) + var(--gh-gap) - var(--gh-strip));
  background: var(--ed-paper);
}

.glow-hero__actions .ed-text-link {
  font-size: 16px;
}

@media (max-width: 980px) {
  .glow-hero__card {
    grid-template-columns: 1fr;
    row-gap: 22px;
    width: auto;
    margin-right: 5vw;
  }

  .glow-hero__card .eyebrow {
    margin-top: 0;
  }

  /* The sliced wordmark is designed to sit in the 2-column card's empty left
     column. Once the card collapses to a single column the copy fills that
     space, so the wordmark would overprint the text — retire it here (it was
     only being hidden at 820px, leaving this band broken). */
  .ed .glow-hero__mark {
    display: none;
  }
}

@media (max-width: 820px) {
  .ed.glow-hero {
    min-height: 0;
    padding-top: 108px;
    padding-bottom: 40px;
  }

  .glow-hero__media {
    position: relative;
    width: 100%;
    height: 190px;
  }

  .ed .glow-hero__mark {
    display: none;
  }

  .glow-hero__card,
  .glow-hero__actions {
    width: auto;
    margin-inline: 5vw;
  }

  .glow-hero__card {
    margin-top: -60px;
    padding: 30px 24px 44px;
  }

  .glow-hero__actions {
    padding: 14px 24px;
  }
}

/* ---- Related case study carousel (program pages) ----------------------------- */
.ed.ed-carousel-band {
  /* the carousel straddles the seam between the paper hero above and the white
     summary section below */
  padding-bottom: clamp(28px, 3.5vw, 52px);
  background: linear-gradient(var(--ed-paper) 0 55%, var(--ed-white) 55% 100%);
}

.ed .ed-carousel__track {
  display: flex;
  overflow-x: auto;
  border-radius: clamp(18px, 2vw, 30px);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ed .ed-carousel__track::-webkit-scrollbar {
  display: none;
}

.ed .ed-carousel__slide {
  position: relative;
  display: block;
  overflow: hidden;
  flex: 0 0 100%;
  aspect-ratio: 2.9 / 1;
  min-height: 300px;
  scroll-snap-align: start;
  background: var(--ed-wash);
}

.ed .ed-carousel__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ed .ed-carousel__chip {
  position: absolute;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #0d0d0f;
  color: var(--ed-white);
  font-size: 14px;
  font-weight: 650;
  transition: background var(--ed-transition), transform var(--ed-transition);
}

.ed .ed-carousel__chip span {
  transition: transform var(--ed-transition);
}

.ed .ed-carousel__slide:hover .ed-carousel__chip,
.ed .ed-carousel__slide:focus-visible .ed-carousel__chip {
  background: #2b2b2e;
}

.ed .ed-carousel__slide:hover .ed-carousel__chip span,
.ed .ed-carousel__slide:focus-visible .ed-carousel__chip span {
  transform: translateX(4px);
}

.ed .ed-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.ed .ed-carousel__dots button {
  width: 46px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--ed-rule);
  cursor: pointer;
  transition: background var(--ed-transition);
}

.ed .ed-carousel__dots button:hover,
.ed .ed-carousel__dots button:focus-visible {
  background: #a5a5a0;
}

.ed .ed-carousel__dots button.is-active {
  background: #8a8a85;
}

@media (max-width: 700px) {
  .ed .ed-carousel__slide {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* ---- Situation cards — the five starting points as a 3+2 card grid ---------- */
/* On wide screens the grid indents to start under the section heading (same
   column rhythm as .section-intro), so the section reads as one aligned block. */
@media (min-width: 821px) {
  .ed .ed-situations-layout {
    display: grid;
    grid-template-columns: minmax(150px, 2fr) minmax(0, 8fr) minmax(180px, 2fr);
    column-gap: clamp(24px, 4vw, 64px);
  }

  .ed .ed-situations-layout > .section-intro {
    grid-column: 1 / -1;
  }

  .ed .ed-situations-layout > .situation-list {
    grid-column: 2 / -1;
    min-width: 0;
  }
}

.ed .situation-list--cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
  border-top: 0;
}

.ed .situation-list--cards .situation-row {
  display: grid;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1.35 / 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(18px, 1fr) auto;
  align-items: start;
  padding: clamp(20px, 2.2vw, 32px);
  border: 1px solid var(--ed-rule);
  border-bottom: 1px solid var(--ed-rule);
  background: transparent;
  color: var(--ed-ink);
  transition: background-color var(--ed-transition), color var(--ed-transition), border-color var(--ed-transition);
}

.ed .situation-list--cards .situation-row--note {
  border-color: transparent;
  background: var(--ed-wash);
}

.ed .situation-list--cards .situation-row > :first-child {
  display: block;
  grid-row: 1;
}

.ed .situation-list--cards .situation-title {
  display: block;
  max-width: 7.35em;
  font-size: clamp(24px, 2.35vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.ed .situation-list--cards .situation-kicker {
  margin-bottom: 14px;
}

.ed .situation-list--cards .situation-arrow {
  display: block;
  width: 100%;
  grid-row: 3;
  justify-self: stretch;
  align-self: end;
  font-size: clamp(24px, 2.35vw, 34px);
  line-height: 1;
}

.ed .situation-list--cards .situation-row:hover,
.ed .situation-list--cards .situation-row:focus-visible {
  color: var(--ed-white);
  background: var(--forest);
  border-color: var(--forest);
  transform: none;
}

.ed .situation-list--cards .situation-row:hover .situation-kicker,
.ed .situation-list--cards .situation-row:focus-visible .situation-kicker {
  color: inherit;
}

.ed .situation-list--cards .situation-row:hover .situation-arrow,
.ed .situation-list--cards .situation-row:focus-visible .situation-arrow {
  transform: none;
}

.ed .situation-list--cards .situation-row:focus-visible {
  outline: 2px solid var(--ed-ink);
  outline-offset: 4px;
}

/* ---- Deliverable items that open a discipline detail dialog ----------------- */
/* Same circled-ellipsis affordance as the current site's discipline lists.
   The <dialog class="disc-dialog"> blocks and [data-disc-open] wiring come
   from styles.css + app.js unchanged. */
.ed .ed-disc-link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ed-transition);
}

/* Joe's designed "see details" mark, sat at the END of the row (mask-tinted so
   it follows the link colour). Keeping it right-aligned lets every item's text
   stay flush-left with the non-clickable ones, and lines the icons up too. */
.ed .ed-disc-link::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  opacity: 0.5;
  -webkit-mask: url("icons/read-more-modal.svg") center / contain no-repeat;
          mask: url("icons/read-more-modal.svg") center / contain no-repeat;
  transition: opacity var(--ed-transition), background-color var(--ed-transition);
}

.ed .ed-disc-link:hover,
.ed .ed-disc-link:focus-visible {
  color: var(--ed-accent);
}

.ed .ed-disc-link:hover::after,
.ed .ed-disc-link:focus-visible::after {
  opacity: 1;
}

/* ==========================================================================
   BODY SERIF — reading copy picks up the site's Playfair Display so these
   pages sit alongside the other content pages, whose body copy is serif too
   (see .reel-lede__copy, .split-band p, .founder__quote in styles.css).
   Headings, eyebrows, labels, links, promises and short list fragments stay in
   the Stack Sans grotesk; only prose you actually *read* becomes serif — a
   grotesk-display / serif-body pairing. Placed after the component rules so it
   wins the tracking reset Playfair needs (it doesn't want the grotesk's tight
   negative letter-spacing).
   ========================================================================== */
.ed :is(
  .ed-lede,
  .ed-hero-line,
  .body-large,
  .glow-hero__copy p,
  .summary-content p,
  .section-intro-content p,
  .service-accordion-lead p,
  .scenario-item p,
  .proof-feature-copy p,
  .sharp-copy p,
  .faq-answer,
  .faq-answer p,
  .ed-cta-copy p,
  .unsure-note p,
  .case-hybrid-editorial-grid h2 + p,
  .case-hybrid-work-intro p:last-child,
  .case-hybrid-story-list p,
  .case-hybrid-quote blockquote p
) {
  font-family: var(--ed-serif);
  letter-spacing: -0.014em;
}

/* Serif runs a touch smaller and tighter than the grotesk equivalents */
.ed .ed-lede { font-size: clamp(18px, 1.55vw, 24px); }
.ed .glow-hero__copy p { font-size: clamp(17px, 1.4vw, 23px); }
.ed .summary-content p { font-size: clamp(19px, 1.8vw, 26px); }
.ed .service-accordion-lead .service-accordion-lead-copy { font-size: clamp(19px, 1.6vw, 25px); }
.ed .case-hybrid-editorial-grid h2 + p { font-size: clamp(17px, 1.4vw, 21px); }
.ed .ed-hero-line { font-size: clamp(22px, 2.2vw, 32px); }

/* Playfair reads with a touch more air than the grotesk at lede sizes */
.ed .ed-lede,
.ed .summary-content p {
  line-height: 1.4;
}

.ed .case-hybrid-story-list p,
.ed .scenario-item p,
.ed .faq-answer,
.ed .faq-answer p,
.ed .sharp-copy p,
.ed .service-accordion-lead p,
.ed .ed-cta-copy p,
.ed .unsure-note p {
  line-height: 1.55;
}

/* ==========================================================================
   MOTION — subtle entrances for the editorial pages
   Scroll reveals ride the site's [data-reveal] observer in app.js: the parent
   still gets .is-visible; these rules hand the movement to its children so
   grids and lists cascade instead of arriving as one block.
   ========================================================================== */

/* Page-load entrance: capabilities glow hero */
@media (prefers-reduced-motion: no-preference) {
  html.js .glow-hero__media img {
    animation: ed-fade 1000ms var(--ease) both;
  }

  html.js .glow-hero__card {
    animation: ed-rise 720ms var(--ease) both;
  }

  html.js .glow-hero__actions {
    animation: ed-rise 720ms var(--ease) 140ms both;
  }

  html.js .ed .glow-hero__mark {
    animation: ed-mark 950ms var(--ease) 280ms both;
  }

  /* Page-load entrance: program page heroes */
  html.js .ed.ed-hero .ed-hero-grid > .eyebrow {
    animation: ed-rise 640ms var(--ease) both;
  }

  html.js .ed.ed-hero .ed-hero-content > h1 {
    animation: ed-rise 640ms var(--ease) 70ms both;
  }

  html.js .ed.ed-hero .ed-hero-line {
    animation: ed-rise 640ms var(--ease) 150ms both;
  }

  html.js .ed.ed-hero .ed-hero-actions {
    animation: ed-rise 640ms var(--ease) 230ms both;
  }
}

@keyframes ed-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ed-mark {
  from { opacity: 0; transform: translate3d(0, 36px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ed-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Staggered scroll reveals — these containers hand the fade to their children.
   Timing mirrors the site's existing reveal cascade (styles.css). */
html.js :is(
  .ed .section-intro,
  .ed .situation-list--cards,
  .ed .service-index,
  .ed .ruled-columns,
  .ed .process-columns,
  .ed .scenario-list,
  .ed .outcomes-list,
  .ed .deliverable-grid,
  .ed .faq-list,
  .ed .related-list,
  .ed .related-cards__grid,
  .ed .sharp-grid,
  .ed .proof-feature,
  .ed .case-hybrid-facts-grid,
  .ed .case-hybrid-story-list,
  .ed .case-hybrid-outcome-list,
  .ed .case-hybrid-editorial-grid,
  .ed .case-hybrid-heading-grid
)[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

html.js :is(
  .ed .section-intro,
  .ed .situation-list--cards,
  .ed .service-index,
  .ed .ruled-columns,
  .ed .process-columns,
  .ed .scenario-list,
  .ed .outcomes-list,
  .ed .deliverable-grid,
  .ed .faq-list,
  .ed .related-list,
  .ed .related-cards__grid,
  .ed .sharp-grid,
  .ed .proof-feature,
  .ed .case-hybrid-facts-grid,
  .ed .case-hybrid-story-list,
  .ed .case-hybrid-outcome-list,
  .ed .case-hybrid-editorial-grid,
  .ed .case-hybrid-heading-grid
)[data-reveal] > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 600ms var(--ease), transform 780ms var(--ease);
}

html.js :is(
  .ed .section-intro,
  .ed .situation-list--cards,
  .ed .service-index,
  .ed .ruled-columns,
  .ed .process-columns,
  .ed .scenario-list,
  .ed .outcomes-list,
  .ed .deliverable-grid,
  .ed .faq-list,
  .ed .related-list,
  .ed .related-cards__grid,
  .ed .sharp-grid,
  .ed .proof-feature,
  .ed .case-hybrid-facts-grid,
  .ed .case-hybrid-story-list,
  .ed .case-hybrid-outcome-list,
  .ed .case-hybrid-editorial-grid,
  .ed .case-hybrid-heading-grid
)[data-reveal].is-visible > * {
  opacity: 1;
  transform: none;
}

html.js .ed [data-reveal] > :nth-child(2) { transition-delay: 70ms; }
html.js .ed [data-reveal] > :nth-child(3) { transition-delay: 130ms; }
html.js .ed [data-reveal] > :nth-child(4) { transition-delay: 190ms; }
html.js .ed [data-reveal] > :nth-child(5) { transition-delay: 240ms; }
html.js .ed [data-reveal] > :nth-child(6) { transition-delay: 290ms; }
html.js .ed [data-reveal] > :nth-child(7) { transition-delay: 330ms; }
html.js .ed [data-reveal] > :nth-child(n + 8) { transition-delay: 365ms; }

/* Imagery settles with a light scale on top of the reveal */
html.js :is(
  .ed .case-hybrid-work-media,
  .ed.case-hybrid-brand-strip,
  .ed .case-hybrid-buttons,
  .ed.case-hybrid-application,
  .ed.case-hybrid-logo-field,
  .ed .proof-feature,
  .ed .ed-carousel
)[data-reveal] img {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 700ms var(--ease), transform 1100ms var(--ease);
}

html.js :is(
  .ed .case-hybrid-work-media,
  .ed.case-hybrid-brand-strip,
  .ed .case-hybrid-buttons,
  .ed.case-hybrid-application,
  .ed.case-hybrid-logo-field,
  .ed .proof-feature,
  .ed .ed-carousel
)[data-reveal].is-visible img {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html.js .ed [data-reveal] > *,
  html.js .ed [data-reveal] img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .ed .case-hybrid-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .ed .case-hybrid-testimonial-card {
    grid-template-columns: minmax(0, 6.5fr) minmax(210px, 3fr);
  }

  .ed .case-hybrid-program-link {
    grid-template-columns: minmax(170px, 2.4fr) minmax(0, 6fr);
  }

  .ed .case-hybrid-program-cta {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .ed .deliverable-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 34px;
  }

  .ed .deliverable-group:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .ed .outcomes-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ed .outcomes-list li {
    min-height: 0;
  }

  .ed .outcomes-list li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .ed .ruled-columns,
  .ed .process-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ed .ruled-item,
  .ed .process-item {
    min-height: 0;
  }

  .ed .ruled-item:nth-child(odd),
  .ed .process-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .ed .process-number {
    margin-bottom: 30px;
  }

  .ed .proof-feature {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 820px) {
  .ed .section-intro,
  .ed .ed-hero-grid,
  .ed .summary-grid,
  .ed .case-hybrid-work-intro,
  .ed .case-hybrid-editorial-grid,
  .ed .case-hybrid-heading-grid {
    grid-template-columns: 1fr;
  }

  .ed .section-intro-content,
  .ed .ed-hero-content,
  .ed .summary-content,
  .ed .case-hybrid-work-intro > div,
  .ed .case-hybrid-editorial-grid > div,
  .ed .case-hybrid-heading-grid h2 {
    grid-column: 1;
  }

  .ed .section-intro .section-label,
  .ed .case-hybrid-work-intro .section-label,
  .ed .case-hybrid-editorial-grid .section-label,
  .ed .case-hybrid-heading-grid .section-label {
    margin-bottom: 28px;
    padding-top: 0;
  }

  .ed .ed-hero-grid .eyebrow {
    margin-bottom: 24px;
    padding-top: 0;
  }

  .ed .situation-row {
    min-height: 92px;
    padding: 24px 20px;
  }

  .ed .situation-list--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ed .situation-list--cards .situation-row {
    min-height: 0;
    padding: clamp(20px, 2.2vw, 32px);
  }

  .ed .service-accordion-trigger {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
    padding: 26px 20px;
    padding-right: 62px;
  }

  .ed .service-accordion-name {
    white-space: normal;
  }

  .ed .service-accordion-promise {
    grid-column: 1;
    max-width: none;
  }

  .ed .service-accordion-toggle {
    right: 20px;
  }

  .ed .service-accordion-panel-inner {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding: 30px 20px 42px;
  }

  .ed .service-panel-link {
    width: 100%;
    grid-column: 1;
    justify-self: stretch;
  }

  .ed .unsure-note {
    padding: 28px 22px;
  }

  .ed .unsure-note p {
    flex-basis: 100%;
  }

  .ed .sharp-grid {
    grid-template-columns: 1fr;
  }

  .ed .scenario-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ed .case-hybrid-work-media {
    margin-top: 58px;
  }

  .ed .case-hybrid-story-list,
  .ed .case-hybrid-outcome-list {
    max-width: none;
    margin-left: 0;
  }

  .ed .case-hybrid-testimonial-card {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-right: clamp(32px, 8vw, 70px);
    padding-left: clamp(32px, 8vw, 70px);
  }

  .ed .case-hybrid-quote {
    padding-bottom: 0;
  }

  .ed .case-hybrid-portrait {
    width: min(58vw, 300px);
    justify-self: start;
  }

  .ed .ed-cta-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }

  .ed .related-list a {
    padding: 24px 20px;
  }

  .ed .faq-item summary {
    min-height: 0;
    padding: 22px 56px 22px 20px;
  }

  .ed .faq-item summary::after {
    right: 20px;
  }

  .ed .faq-answer {
    padding: 0 20px 30px;
  }
}

@media (max-width: 560px) {
  .ed .case-hybrid-facts-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: 22px;
  }

  .ed .case-hybrid-facts-grid div {
    padding: 20px 0;
  }

  .ed .case-hybrid-facts-grid div + div {
    border-top: 1px solid var(--ed-rule);
  }

  .ed.case-hybrid-work {
    padding-block: 76px;
  }

  .ed .case-hybrid-work-intro p:last-child {
    font-size: 17px;
  }

  .ed.case-hybrid-brand-strip figcaption,
  .ed .case-hybrid-buttons figcaption,
  .ed.case-hybrid-application figcaption {
    padding-bottom: 20px;
  }

  .ed .case-hybrid-buttons,
  .ed .case-hybrid-application-inner {
    width: calc(100% - 40px);
  }

  .ed .case-hybrid-story-list article {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 27px 0;
  }

  .ed.case-hybrid-application--object {
    padding-top: 76px;
  }

  .ed .case-hybrid-outcome-list li {
    padding: 23px 0;
  }

  .ed .case-hybrid-testimonial-card {
    gap: 30px;
    padding: 38px 24px 0;
  }

  .ed .case-hybrid-pullquote {
    font-size: 33px;
  }

  .ed .case-hybrid-portrait {
    width: min(70vw, 250px);
    justify-self: center;
  }

  .ed .case-hybrid-program-link,
  .ed .case-hybrid-program-link .case-hybrid-program-cta {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .ed .case-hybrid-program-link {
    gap: 24px;
    padding: 26px 22px;
  }

  .ed .case-hybrid-program-link h2 {
    font-size: 28px;
  }

  .ed .ruled-columns,
  .ed .process-columns,
  .ed .outcomes-list,
  .ed .deliverable-grid {
    grid-template-columns: 1fr;
  }

  .ed .situation-list--cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ed .situation-list--cards .situation-row {
    padding: 28px;
  }

  .ed .situation-list--cards .situation-title {
    font-size: clamp(27px, 8vw, 32px);
  }

  .ed .situation-list--cards .situation-arrow {
    font-size: 30px;
  }

  /* Single column: strip the vertical rules and uneven left indents so every
     cell spans full width and aligns — no stray side borders left on alternating
     cells. These use the same adjacency selectors that draw the rules, so the
     removal matches their specificity and wins on source order (a bare
     .ruled-item at (0,2,0) loses to .ruled-item + .ruled-item at (0,3,0)). */
  .ed .ruled-item + .ruled-item,
  .ed .process-item + .process-item,
  .ed .outcomes-list li + li {
    border-left: 0;
  }
  .ed .process-item + .process-item,
  .ed .outcomes-list li + li {
    padding-left: 0;
  }

  /* Keep the centred Q360 marks on symmetric padding so all four line up
     vertically (the 2-col :nth-child(odd) reset above zeroes only one side). */
  .ed .ruled-columns--q360 .ruled-item {
    padding-inline: clamp(14px, 1.8vw, 28px);
  }

  .ed .deliverable-group {
    padding-left: 0;
  }
}

/* ==========================================================================
   GROUP HOVER DIM — hovering one item fades its siblings, the way the nav
   (.navx-nav) and footer (.agency-footer__nav) link groups already behave.
   Opacity-based so it covers both the link-card groups and the text-link
   action bands; the item actually pointed at / focused stays full.
   ========================================================================== */

/* add opacity to each item's transition so the dim animates with existing hovers */
.ed .situation-list--cards .situation-row {
  transition: background var(--ed-transition), color var(--ed-transition), transform var(--ed-transition), opacity var(--ed-transition);
}
.ed .related-cards__grid .related-card {
  transition: transform var(--ed-transition), box-shadow var(--ed-transition), opacity var(--ed-transition);
}
.ed .glow-hero__actions .ed-text-link,
.ed .glow-hero__actions .button-link,
.ed .ed-hero-actions .ed-text-link,
.ed .ed-hero-actions .button-link {
  transition: color var(--ed-transition), background var(--ed-transition), opacity var(--ed-transition);
}

/* dim the whole group while any item is hovered / focused */
.ed .situation-list--cards:hover .situation-row,
.ed .situation-list--cards:focus-within .situation-row,
.ed .related-cards__grid:hover .related-card,
.ed .related-cards__grid:focus-within .related-card,
.ed .glow-hero__actions:hover .ed-text-link,
.ed .glow-hero__actions:hover .button-link,
.ed .glow-hero__actions:focus-within .ed-text-link,
.ed .glow-hero__actions:focus-within .button-link,
.ed .ed-hero-actions:hover .ed-text-link,
.ed .ed-hero-actions:hover .button-link,
.ed .ed-hero-actions:focus-within .ed-text-link,
.ed .ed-hero-actions:focus-within .button-link {
  opacity: 0.4;
}

/* restore the one actually being pointed at / focused */
.ed .situation-list--cards:hover .situation-row:hover,
.ed .situation-list--cards:focus-within .situation-row:focus-visible,
.ed .related-cards__grid:hover .related-card:hover,
.ed .related-cards__grid:focus-within .related-card:focus-visible,
.ed .glow-hero__actions:hover .ed-text-link:hover,
.ed .glow-hero__actions:hover .button-link:hover,
.ed .glow-hero__actions:focus-within .ed-text-link:focus-visible,
.ed .glow-hero__actions:focus-within .button-link:focus-visible,
.ed .ed-hero-actions:hover .ed-text-link:hover,
.ed .ed-hero-actions:hover .button-link:hover,
.ed .ed-hero-actions:focus-within .ed-text-link:focus-visible,
.ed .ed-hero-actions:focus-within .button-link:focus-visible {
  opacity: 1;
}

/* Deliverable lists — dim the rest of the column while one item is hovered. */
.ed .deliverable-group li { transition: opacity var(--ed-transition); }
.ed .deliverable-group ul:hover li,
.ed .deliverable-group ul:focus-within li { opacity: 0.4; }
.ed .deliverable-group ul:hover li:hover,
.ed .deliverable-group ul:focus-within li:focus-within { opacity: 1; }

/* Accordions + FAQ — dim the closed siblings while one is hovered; the OPEN one
   (the panel you're reading) never dims. */
.ed .service-index .service-accordion-item,
.ed .faq-list .faq-item {
  transition: opacity var(--ed-transition);
}
.ed .service-index:hover .service-accordion-item:not([open]),
.ed .service-index:focus-within .service-accordion-item:not([open]),
.ed .faq-list:hover .faq-item:not([open]),
.ed .faq-list:focus-within .faq-item:not([open]) {
  opacity: 0.4;
}
.ed .service-index:hover .service-accordion-item:not([open]):hover,
.ed .service-index:focus-within .service-accordion-item:not([open]):focus-within,
.ed .faq-list:hover .faq-item:not([open]):hover,
.ed .faq-list:focus-within .faq-item:not([open]):focus-within {
  opacity: 1;
}