/* ==========================================================================
   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;
}

/* The CTA sits after the list in source (so it stacks last on mobile); on
   desktop the grid places it back under the copy column. */
.ed .sharp-grid > .button-link {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  color: var(--ed-white);
}

/* 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;
}

/* Decision marks: sit top-right of each cell beside the number, out of flow so
   the heading row stays aligned across columns; multiply sinks their white
   ground into the paper. */
.ed .process-item {
  position: relative;
}

/* extra headroom so the art clears the heading row (art-less process sections
   on the program pages keep the tighter 58px rhythm) */
.ed .process-item:has(.process-art) .process-number {
  margin-bottom: clamp(104px, 10.5vw, 140px);
}

.ed .process-art {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  margin-inline: auto; /* centred in the column */
  height: clamp(100px, 10.5vw, 148px);
  width: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Mobile: number up top, then text left with the mark large on the right
   (art-less process sections on the program pages keep the plain stack). */
@media (max-width: 560px) {
  .ed .process-item:has(.process-art) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 45%);
    column-gap: clamp(14px, 4vw, 24px);
  }

  .ed .process-item:has(.process-art) .process-number {
    grid-column: 1 / -1;
    margin-bottom: 24px;
  }

  .ed .process-art {
    position: static;
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
    justify-self: center;
    width: min(100%, 250px);
    height: auto;
    margin: 0;
  }

  /* h3 hugs the row boundary from above, p from below, so the text reads as
     one block vertically centred against the art */
  .ed .process-item:has(.process-art) h3 {
    grid-column: 1;
    align-self: end;
  }

  .ed .process-item:has(.process-art) p {
    grid-column: 1;
    align-self: start;
  }
}

.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);
}

/* Q360 mobile carousel — below 560px the four test cards become a full-bleed,
   centre-snapping swipe carousel: one card centred, its neighbours peeking at
   the viewport edges. Native scroll does the work, no JS. Desktop keeps the
   ruled grid. */
@media (max-width: 560px) {
  .ed .ruled-columns--q360 {
    display: flex;
    gap: 18px;
    margin-inline: calc(50% - 50vw); /* full bleed out of the container */
    padding: 10px 11vw 28px;         /* 11vw ≈ (100vw − card) / 2 centres the ends */
    border-top: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ed .ruled-columns--q360::-webkit-scrollbar { display: none; }

  /* Split card: glass mark centred on paper up top, serif "is it..." lead-in,
     then the question keywords in a solid forest band across the bottom. */
  .ed .ruled-columns--q360 .ruled-item {
    flex: 0 0 78vw;
    scroll-snap-align: center;
    height: clamp(430px, 120vw, 500px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    border: 1px solid var(--ed-rule);
    border-radius: 28px;
    background: var(--ed-paper);
    box-shadow: 0 22px 44px -30px rgba(19, 19, 22, 0.45);
    overflow: hidden;
  }

  /* outranks the generic single-column border strip AND the base column rule */
  .ed .ruled-columns--q360 .ruled-item + .ruled-item {
    border-left: 1px solid var(--ed-rule);
    padding-left: 0;
  }

  .ed .ruled-columns--q360 .q360-mark {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px 24px 0;
  }

  .ed .ruled-columns--q360 .q360-mark img {
    height: clamp(88px, 26vw, 112px);
  }

  /* the question's two halves become bands of the card */
  .ed .ruled-columns--q360 .ruled-item p {
    display: contents;
  }

  .ed .ruled-columns--q360 .q360-q__lead {
    display: block;
    padding: 0 24px clamp(24px, 7vw, 34px);
    text-align: center;
    font-family: var(--ed-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(24px, 7.4vw, 30px);
    line-height: 1;
    text-transform: lowercase;
    color: color-mix(in srgb, var(--forest) 45%, var(--ed-graphite));
  }

  .ed .ruled-columns--q360 .q360-q__lead::after {
    content: "\2026";
  }

  .ed .ruled-columns--q360 .q360-q__rest {
    display: block;
    padding: clamp(28px, 8vw, 40px) 22px clamp(32px, 9vw, 44px);
    background: var(--forest);
    text-align: center;
    font-size: clamp(30px, 9.2vw, 38px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ed-white);
  }
}

.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;
}

/* ---- "Useful when" editorial layout: full illustration with the USEFUL WHEN
   chip + white heading panel riding its right edge, then scenario blocks
   staggered below on alternating indents (per mock). The chip hangs off the
   panel's top-left corner onto the artwork via right:100%. ---- */
.ed .useful-when__hero {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 18fr) minmax(0, 40fr);
  margin-bottom: clamp(52px, 7vw, 100px);
}

.ed .useful-when__art {
  grid-column: 1 / 3;
  grid-row: 1;
  margin: 0;
}

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

.ed .useful-when__panel {
  position: relative;
  grid-column: 2 / 4;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  max-width: 620px;
  background: var(--ed-white);
  padding: clamp(26px, 3.4vw, 54px) clamp(26px, 3.4vw, 56px);
}

.ed .useful-when__label {
  position: absolute;
  right: 100%;
  top: 0;
  margin: 0 8px 0 0; /* small breathing gap between chip and heading panel */
  padding: clamp(18px, 2vw, 26px) clamp(22px, 2.4vw, 34px);
  background: var(--ed-white);
  font-family: var(--ed-font);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-graphite);
  white-space: nowrap;
}

.ed .useful-when__panel h2 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 15ch;
}

.ed.useful-when .scenario-item {
  display: block;
  max-width: 620px;
  margin-left: 45%;
  padding: 0;
}

/* Each staggered block carries its own data-reveal, so it rises in on its own
   scroll trigger rather than the whole list firing at once. A touch more
   travel than the generic reveal gives the sequence its oomph. */
html.js .ed.useful-when .scenario-item[data-reveal] {
  transform: translate3d(0, 30px, 0);
  transition: opacity 700ms var(--ease), transform 920ms var(--ease);
}

html.js .ed.useful-when .scenario-item[data-reveal].is-visible {
  transform: none;
}

/* Short forest keyline above each heading — ties the staggered blocks into the
   site's ruled editorial lists and marks each as a deliberate entry. */
.ed.useful-when .scenario-item::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-bottom: 20px;
  background: var(--forest);
}

.ed.useful-when .scenario-item + .scenario-item {
  border-top: 0;
  margin-top: clamp(44px, 6vw, 78px);
}

.ed.useful-when .scenario-item:nth-child(even) {
  margin-left: 30%;
}

.ed.useful-when .scenario-item h3 {
  font-size: clamp(20px, 1.8vw, 25px);
  margin-bottom: 14px;
}

.ed.useful-when .scenario-item p {
  max-width: 46ch;
  color: var(--ed-ink);
  font-size: clamp(17px, 1.5vw, 20px);
}

@media (max-width: 900px) {
  .ed .useful-when__hero { display: block; }

  .ed .useful-when__panel {
    width: min(92%, 560px);
    margin: clamp(-64px, -9vw, -28px) auto 0;
    padding: clamp(24px, 4.5vw, 40px);
  }

  .ed .useful-when__label {
    position: static;
    display: inline-block;
    padding: 0 0 14px;
    background: none;
  }

  .ed.useful-when .scenario-item,
  .ed.useful-when .scenario-item:nth-child(even) {
    margin-left: 0;
    max-width: none;
  }

  .ed.useful-when .scenario-item + .scenario-item {
    margin-top: clamp(32px, 7vw, 48px);
  }
}

/* ---- Tall-portrait variant (trialling on Brand Systems & Scale): the artwork
   becomes a full-height column on the left, running edge to edge of the
   section; panel + scenario list stack in the right column. The hero wrapper
   dissolves (display:contents) so figure and panel join the container grid and
   the art can span both rows. Remove the modifier class to revert. ---- */
.ed.useful-when--tall { background: #fff3f2; } /* blush wash; the multiply art sinks into it */

.ed.useful-when--tall .scenario-item::before { display: none; } /* mock: no keylines */

/* Hairline rule between each point (the gap splits evenly across it) */
.ed.useful-when--tall .scenario-item + .scenario-item {
  border-top: 1px solid var(--ed-rule);
  padding-top: clamp(30px, 3.5vw, 46px);
  margin-top: clamp(30px, 3.5vw, 46px);
}

/* Multiply drops the artwork's paper-white ground into the section cream so
   the illustration sits IN the page rather than on a pasted white rectangle
   (same treatment as the Q360 glass marks). */
.ed.useful-when--tall .useful-when__art img { mix-blend-mode: multiply; }

@media (min-width: 901px) {
  .ed.useful-when--tall { padding-block: 0; } /* art bleeds to section edges */

  .ed.useful-when--tall .container {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  }

  .ed.useful-when--tall .useful-when__hero { display: contents; }

  .ed.useful-when--tall .useful-when__art {
    grid-column: 1;
    grid-row: 1 / 3;
    position: relative;
    margin: 0;
  }

  /* The art pins to the viewport while the panel + scenarios scroll past it,
     then releases as the section ends — a parallax feel without JS. The window
     is one viewport tall; max-height stops it overflowing short sections. */
  .ed.useful-when--tall .useful-when__art img {
    position: sticky;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .ed.useful-when--tall .useful-when__panel {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    margin-top: clamp(48px, 8vw, 140px);
    margin-left: clamp(-140px, -10%, -48px); /* rides onto the artwork */
  }

  .ed.useful-when--tall .scenario-list {
    grid-column: 2;
    grid-row: 2;
    padding: clamp(40px, 5vw, 84px) 0 clamp(64px, 8vw, 130px) clamp(28px, 4vw, 64px);
  }

  .ed.useful-when--tall .scenario-item,
  .ed.useful-when--tall .scenario-item:nth-child(even) {
    margin-left: 0;
    max-width: 560px;
  }
}

@media (max-width: 900px) {
  /* tall art would tower on mobile — cap it and crop like a banner */
  .ed.useful-when--tall .useful-when__art img {
    height: min(72vh, 560px);
    object-fit: cover;
    object-position: center;
  }
}

.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;
}

/* ---- Proof, case edition: the case study's hero backdrop fills the left of
   the section edge to edge, and its work-index card (.work-card, unchanged
   from /work) straddles the backdrop's right edge. ---- */
.ed.proof-case { position: relative; }

.proof-case__bg {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(42%, 860px);
  overflow: hidden;
}

.proof-case__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ed.proof-case .container { position: relative; } /* paints above the backdrop */

.ed .proof-feature--case .proof-feature-image {
  overflow: visible;
  aspect-ratio: auto;
  background: none;
}

.ed .proof-feature--case .work-card {
  display: block;
  width: min(100%, 440px);
  margin-left: auto;
  transform: translateX(clamp(-28px, -1.2vw, -10px)); /* sit mostly on the backdrop, right edge just past it */
}

@media (max-width: 980px) {
  .proof-case__bg { display: none; }

  .ed .proof-feature--case .work-card {
    margin-inline: auto;
    transform: none;
  }
}

/* ---- 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 — near-black so the media's own black grounds blend in */
.ed.case-hybrid-work {
  padding-block: clamp(96px, 11vw, 164px);
  background: rgb(1, 1, 1);
}

.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 .sharp-grid > .button-link {
    grid-column: 1;
    grid-row: auto;
    margin-top: 10px;
  }

  .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;
  }

  /* match the base adjacency rule's specificity or the column indent survives
     on stacked groups (same trap as the ruled/process items above) */
  .ed .deliverable-group + .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;
}