/* ==========================================================================
   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.
   Portrait tablets (iPad Pro 12.9 = 1024px) take the stacked composition
   too, matching the deck tiers: side-by-side at those widths crushes the
   copy column to ~200px and balloons the green panel to match. */
@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
  .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;
}

/* :not(.section-label): the block's eyebrow is a p too — it keeps the
   grotesk label treatment (see BODY SERIF, which also excludes it). */
.ed .proof-feature-copy p:not(.section-label) {
  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); }
}

/* ---- Related programs, deck edition -----------------------------------------
   A scroll-snap carousel styled as a card deck: the centred "business need"
   card sits proud (light pink, illustration, forest type, half-disc advance
   button) while its neighbours tuck behind it — deeper pink, scaled down,
   content faded. Negative item margins create the overlap; JS
   (initNeedDecks in app.js) tracks the snapped card, focuses tucked cards on
   click and cycles via [data-deck-next]. Sampled from the illustration set:
   card pink #f8e2e2; tucked pink deepens toward the mockup's backing cards. */
.ed .need-deck-wrap {
  overflow: hidden;
  margin-inline: calc(-1 * clamp(20px, 4vw, 64px));
}

.ed .need-deck {
  --need-w: clamp(300px, min(56vw, 46vh + 120px), 500px);
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* The deck is a scroll container, so it CLIPS box-shadows — the block
     padding must be deep enough to contain the cards' 18px/44px drop shadow
     or it crops to a hard line. */
  padding-block: clamp(26px, 3vw, 40px) clamp(64px, 6vw, 88px);
  /* 50% - w/2, plus the first item's negative margin so card 1 centres true */
  padding-inline: calc(50% - var(--need-w) * 0.34);
  margin: 0;
  list-style: none;
}

.ed .need-deck::-webkit-scrollbar {
  display: none;
}

.ed .need-deck__item {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--need-w);
  margin-inline: calc(var(--need-w) * -0.16);
  scroll-snap-align: center;
  transform: scale(0.8);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), z-index 0s 170ms;
}

.ed .need-deck__item.is-center {
  z-index: 2;
  transform: scale(1);
  transition-delay: 0s;
}

.ed .need-card {
  position: relative;
  /* Size container: the wide title's cqw font tracks the CARD width — the
     card itself is vh-coupled (--need-w), so viewport units on type break in
     short windows (wide window → 27px font, short window → narrow card). */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* Artwork zone + a fixed pink band below it for the title (Joe, 2026-07-24:
     cards needn't be square — the title must clear the graphic). 0.83 is the
     art assets' aspect (1200x996): all five are re-seated onto a shared
     content baseline 48px above their bottom edge, so the title band starts
     just under the artwork on every card. The band is additive px, NOT a
     taller aspect-ratio: title + bottom padding are px-clamped, so a
     proportional band goes too shallow exactly when the card narrows (short
     viewports via the 46vh term, and mobile). */
  height: calc(var(--need-w) * 0.83 + clamp(112px, 12vw, 136px));
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.6vw, 34px) clamp(52px, 5vw, 64px);
  border: 1px solid rgb(249, 206, 206);
  border-radius: clamp(26px, 3.4vw, 44px);
  background: #f8e2e2;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 18px 44px rgba(19, 19, 22, 0.14);
  transition: background 340ms ease, filter 340ms ease;
}

/* Tucked cards sit softly out of focus; hovering one sharpens it as an
   invitation (clicking focuses it — see initNeedDecks). */
.ed .need-deck__item:not(.is-center) .need-card {
  background: #f0b9c0;
  box-shadow: 0 10px 26px rgba(19, 19, 22, 0.08);
  filter: blur(5px);
}

.ed .need-deck__item:not(.is-center):hover .need-card {
  filter: blur(1px);
}

/* Centred card lifts gently on hover (the li carries the scale transform, so
   the half-disc button rides along). */
.ed .need-deck__item.is-center:hover {
  transform: scale(1) translateY(-5px);
}

.ed .need-card__label {
  font-family: var(--ed-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0;
  color: var(--forest);
}

/* The illustration bleeds edge-to-edge horizontally and anchors to the TOP of
   the card; height:auto keeps the full asset visible, and the card's title
   band sits below it. Don't shrink the art itself — Joe wants it meeting the
   card edges (2026-07-24), and the assets carry their own label headroom up
   top plus a shared 48px content baseline at the bottom. */
.ed .need-card__art {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: auto;
}

.ed .need-card__label,
.ed .need-card__title {
  position: relative;
  z-index: 1;
}

.ed .need-card__title {
  max-width: 15ch;
  font-family: var(--ed-font);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.16;
  color: var(--forest);
}

/* Longer statements carry their own <br>; lift the ch cap so it governs, and
   scale the type down on narrow cards so the authored first line ("The team
   needs a system,") never re-wraps to a third line. */
.ed .need-card__title--wide {
  max-width: none;
  font-size: clamp(15px, 6.5cqw, 27px);
}

.ed .need-deck__item:not(.is-center) .need-card__label,
.ed .need-deck__item:not(.is-center) .need-card__art,
.ed .need-deck__item:not(.is-center) .need-card__title {
  opacity: 0.34;
  transition: opacity 340ms ease;
}

/* Half-disc advance control, docked on the centred card's bottom edge */
.ed .need-card__advance {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: clamp(72px, 7vw, 92px);
  height: clamp(36px, 3.5vw, 46px);
  border: 0;
  border-radius: 999px 999px 0 0;
  background: var(--forest);
  color: var(--paper);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, background 200ms ease, transform 200ms ease;
}

.ed .need-deck__item.is-center .need-card__advance {
  opacity: 1;
  pointer-events: auto;
}

.ed .need-card__advance:hover,
.ed .need-card__advance:focus-visible {
  background: color-mix(in srgb, var(--forest) 86%, #ffffff);
  transform: translateX(-50%) scale(1.08);
}

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

  /* Stack the CTAs: side by side they render inconsistently (short labels
     share a row, long ones wrap) and the desktop negative margins push the
     wrapped underline left of the text edge. Flush-left column instead. */
  .glow-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 24px 20px;
  }

  .glow-hero__actions .ed-text-link,
  .glow-hero__actions .button-link {
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* ---- 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:not(.section-label),
  .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;
}

/* ---- Landing pages in the .ed layout ------------------------------------- */
/* Situation accordions carry sentence-length names: keep them to one line
   on desktop by widening the name column and easing the size; wrap on mobile
   (the existing mobile rule already sets white-space: normal). */
.page-landing .ed .service-accordion-trigger {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.page-landing .ed .service-accordion-name {
  font-size: clamp(19px, 1.7vw, 26px);
}

@media (max-width: 980px) {
  .page-landing .ed .service-accordion-name { white-space: normal; }
}

/* Call-or-text block anchored to the right end of the glow-hero action bar. */
.ed .glow-hero__calltext {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-top: calc(-1 * clamp(16px, 2.2vh, 28px));
  margin-bottom: calc(-1 * clamp(16px, 2.2vh, 28px));
  margin-right: calc(-1 * var(--gh-pad));
  padding: clamp(16px, 2.2vh, 28px) clamp(24px, 2.6vw, 44px);
  background: #2a1310;
  color: #f4f1e8;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.ed .glow-hero__calltext:hover,
.ed .glow-hero__calltext:focus-visible {
  background: var(--ed-ink);
  color: #ffffff;
}

@media (max-width: 980px) {
  .ed .glow-hero__calltext {
    margin: 10px 0 0;
    padding: 12px 18px;
  }
}