/* ==========================================================================
   Editorial containers — breaking up the wall of identical .card blobs.

   Scoped entirely to `body.editorial-page` so nothing else on the site can
   be affected. Loaded only by pages that opt in.

   Principle: content should earn its container. A filled blob is reserved
   for actions and routes; explanation, asides, data and process each get a
   container type that matches what they are.
   ========================================================================== */

body.editorial-page {
  --edi-rule: rgba(0, 51, 160, 0.14);
  --edi-rule-soft: rgba(0, 51, 160, 0.08);
  --edi-measure: 34rem;
}


/* --------------------------------------------------------------------------
   1. Editorial cluster — the replacement for a grid of identical cards.
   Asymmetric two-column: a wide lead column and a narrower support column,
   so the eye is told what to read first instead of five equal shouts.
   -------------------------------------------------------------------------- */

.edi-cluster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: start;
}

.edi-cluster__main > * + * {
  margin-top: clamp(2rem, 3.4vw, 2.9rem);
}

.edi-cluster__aside > * + * {
  margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
}

@media (max-width: 900px) {
  .edi-cluster {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}


/* --------------------------------------------------------------------------
   2. Bare editorial note — no box at all.
   For explanatory prose. A hairline rule above and a controlled measure do
   all the work the box was doing, without the visual noise.
   -------------------------------------------------------------------------- */

.edi-note {
  max-width: var(--edi-measure);
  padding-top: 1.15rem;
  border-top: 2px solid var(--edi-rule);
  background: none;
}

.edi-note--lead {
  max-width: 40rem;
}

.edi-note h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.22rem, 2.1vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.22;
  color: var(--brand-secondary);
}

.edi-note--lead h3 {
  font-size: clamp(1.45rem, 2.7vw, 2.05rem);
}

.edi-note p {
  margin: 0;
  color: rgba(38, 38, 38, 0.82);
  font-size: 1.02rem;
  line-height: 1.68;
}

.edi-note--lead p {
  font-size: clamp(1.05rem, 1.5vw, 1.16rem);
  line-height: 1.66;
}

.edi-note p + p {
  margin-top: 0.85rem;
}


/* --------------------------------------------------------------------------
   3. Left-rule aside — for the human, reassuring content.
   Borrows the .statement-band idea at card scale. Warm accent rule signals
   "this is a softer aside" without drawing a box around it.
   -------------------------------------------------------------------------- */

.edi-aside {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.4rem;
  border-left: 3px solid var(--brand-accent);
  background: none;
}

.edi-aside h3 {
  margin: 0 0 0.6rem;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--brand-accent-deep);
}

.edi-aside p {
  margin: 0;
  color: rgba(38, 38, 38, 0.8);
  font-size: 0.99rem;
  line-height: 1.66;
}

.edi-aside--mint {
  border-left-color: var(--mint-deep);
}

.edi-aside--mint h3 {
  color: var(--brand-secondary);
}


/* --------------------------------------------------------------------------
   4. Inline stat figure — for the data point.
   Pulls the number out of the prose so a statistic reads as evidence and
   gives the eye a scannable anchor.
   -------------------------------------------------------------------------- */

.edi-figure {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  padding-top: 1.15rem;
  border-top: 2px solid var(--edi-rule);
}

.edi-figure__number {
  flex: none;
  font-size: clamp(2.5rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--brand-secondary);
  font-variant-numeric: tabular-nums;
}

.edi-figure__body p {
  margin: 0;
  color: rgba(38, 38, 38, 0.8);
  font-size: 0.97rem;
  line-height: 1.6;
}

.edi-figure__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-accent-deep);
}


/* --------------------------------------------------------------------------
   5. Definition rows — for paired term/meaning.
   Denser and more authoritative than bullets in a blob. Reads as reference
   material rather than another card.
   -------------------------------------------------------------------------- */

.edi-deflist {
  margin: 0;
  border-top: 2px solid var(--edi-rule);
}

.edi-deflist__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0.6rem 1.6rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--edi-rule-soft);
}

.edi-deflist__row dt {
  margin: 0;
  font-weight: 800;
  font-size: 0.99rem;
  line-height: 1.4;
  color: var(--brand-secondary);
}

.edi-deflist__row dd {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: rgba(38, 38, 38, 0.78);
}

@media (max-width: 640px) {
  .edi-deflist__row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}


/* --------------------------------------------------------------------------
   5b. Checklist — for "does this sound like you?" self-diagnosis lists.
   Tick markers instead of bullets in a box, so the reader recognises their
   own situation rather than reading another card.
   -------------------------------------------------------------------------- */

.edi-checklist {
  padding-top: 1.15rem;
  border-top: 2px solid var(--edi-rule);
}

.edi-checklist h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.16rem, 2vw, 1.42rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.24;
  color: var(--brand-secondary);
}

.edi-checklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edi-checklist li {
  position: relative;
  padding: 0.52rem 0 0.52rem 1.95rem;
  border-bottom: 1px solid var(--edi-rule-soft);
  color: rgba(38, 38, 38, 0.82);
  font-size: 0.98rem;
  line-height: 1.55;
}

.edi-checklist li:last-child {
  border-bottom: 0;
}

/* Tick mark drawn in CSS, no icon font or SVG request */
.edi-checklist li::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 1.02rem;
  width: 0.42rem;
  height: 0.74rem;
  border-right: 2.5px solid var(--mint-deep);
  border-bottom: 2.5px solid var(--mint-deep);
  rotate: 42deg;
  translate: 0 -50%;
}


/* --------------------------------------------------------------------------
   5c. Signals list — for escalation warnings.
   Terracotta markers rather than mint ticks, so "these are the signs it is
   getting worse" does not look like a list of features.
   -------------------------------------------------------------------------- */

.edi-signals {
  margin: 1.2rem 0;
  padding: 0;
  list-style: none;
}

.edi-signals li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.7rem;
  border-bottom: 1px solid rgba(196, 96, 61, 0.14);
  color: rgba(38, 38, 38, 0.84);
  font-size: 0.98rem;
  line-height: 1.55;
}

.edi-signals li:last-child {
  border-bottom: 0;
}

.edi-signals li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.06rem;
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 2px;
  background: var(--brand-accent);
  rotate: 45deg;
  translate: 0 -50%;
}


/* --------------------------------------------------------------------------
   5d. Quick answer — the AI-citable snippet block.
   These blocks are what LLMs and featured snippets lift, so they keep a
   deliberate container rather than dissolving into the page. Navy rule and
   tinted ground make them findable without another blob.
   -------------------------------------------------------------------------- */

.edi-answer {
  position: relative;
  padding: 1.25rem 1.4rem 1.35rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--brand-secondary);
  background: linear-gradient(
    118deg,
    rgba(0, 51, 160, 0.055),
    rgba(240, 247, 255, 0.5) 60%,
    rgba(255, 255, 255, 0.35)
  );
}

.edi-answer h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-secondary);
}

.edi-answer h3::before {
  content: "";
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--brand-secondary);
  flex: none;
}

.edi-answer p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(38, 38, 38, 0.86);
}

.edi-answer p + p { margin-top: 0.7rem; }

.edi-answer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edi-answer li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.35rem;
  font-size: 0.99rem;
  line-height: 1.55;
  color: rgba(38, 38, 38, 0.84);
}

.edi-answer li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--mint-deep);
  translate: 0 -50%;
}


/* --------------------------------------------------------------------------
   5e. Comparison pair — for "this vs that" sections.
   Two panels sharing a divider so they read as two sides of one decision
   rather than two unrelated cards sitting next to each other.
   -------------------------------------------------------------------------- */

.edi-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 2px solid var(--edi-rule);
}

.edi-compare__side {
  padding: 1.4rem clamp(1.1rem, 2.2vw, 1.7rem) 1.5rem;
  position: relative;
}

.edi-compare__side + .edi-compare__side {
  border-left: 1px solid var(--edi-rule-soft);
}

/* Coloured cap so each side is identifiable at a glance */
.edi-compare__side::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
}

.edi-compare__side:first-child::before { background: var(--mint-deep); }
.edi-compare__side:last-child::before  { background: var(--brand-secondary); }

.edi-compare__side h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.06rem, 1.8vw, 1.24rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.26;
  color: var(--brand-secondary);
}

.edi-compare__side:first-child h3 { color: #2c7a51; }

.edi-compare__side p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.62;
  color: rgba(38, 38, 38, 0.8);
}

.edi-compare__side p + p { margin-top: 0.75rem; }

@media (max-width: 760px) {
  .edi-compare { grid-template-columns: 1fr; }
  .edi-compare__side + .edi-compare__side {
    border-left: 0;
    border-top: 1px solid var(--edi-rule-soft);
  }
  .edi-compare__side:last-child::before { display: none; }
}


/* --------------------------------------------------------------------------
   6. Numbered rail — for the 1-5 process.
   One continuous line down the left with numbered markers, replacing five
   equal boxes in a ragged 3+2 grid. Makes the sequence legible and fixes
   the orphaned final step at the same time.
   -------------------------------------------------------------------------- */

.edi-rail {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: edi-rail;
}

.edi-rail__step {
  position: relative;
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: 0 1.35rem;
  padding-bottom: clamp(1.9rem, 3.4vw, 2.7rem);
}

.edi-rail__step:last-child {
  padding-bottom: 0;
}

/* The connecting line, drawn behind the markers */
.edi-rail__step::before {
  content: "";
  position: absolute;
  top: 3.1rem;
  bottom: 0;
  left: 1.55rem;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    var(--mint-deep) 0%,
    rgba(86, 178, 124, 0.28) 100%
  );
}

.edi-rail__step:last-child::before {
  display: none;
}

.edi-rail__marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--bg-white);
  border: 2px solid var(--mint-deep);
  font-size: 1.16rem;
  font-weight: 900;
  color: var(--brand-secondary);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px rgba(0, 51, 160, 0.09);
}

.edi-rail__body {
  padding-top: 0.42rem;
}

.edi-rail__body h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.1rem, 1.85vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--brand-secondary);
}

.edi-rail__body p {
  margin: 0;
  max-width: 42rem;
  color: rgba(38, 38, 38, 0.8);
  font-size: 1rem;
  line-height: 1.66;
}

@media (max-width: 640px) {
  .edi-rail__step {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0 1rem;
  }

  .edi-rail__step::before {
    top: 2.5rem;
    left: 1.25rem;
  }

  .edi-rail__marker {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
}


/* --------------------------------------------------------------------------
   6b. 3D interactive timeline — alternating cards around a centre spine.

   Structure follows 21st.dev "3D Interactive Timeline" (@dhileepkumargm):
   centre spine, icon nodes sitting on it, cards alternating left/right,
   category badges, perspective tilt on hover, and a spine that fills as
   you scroll.

   Rendered in the JPP mint/navy palette rather than the original's dark
   neon, so it reads as calm and premium rather than nightclub.
   -------------------------------------------------------------------------- */

.edi-tl {
  --tl-spine: 2px;
  --tl-node: 2.9rem;
  /* Distance from the top of a card to the vertical centre of its heading
     row. The node is pinned to this so every node lines up with its own
     card's badge/title block, whatever height the card ends up. */
  --tl-anchor: 2.55rem;
  --tl-gap: clamp(0.5rem, 1.1vw, 0.95rem);
  position: relative;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}

/* The spine itself: a faint track with a mint fill that grows on scroll */
.edi-tl::before,
.edi-tl::after {
  content: "";
  position: absolute;
  /* Start and end at the first/last node centres so the spine does not
     overshoot past number 5 into empty space. */
  top: var(--tl-anchor);
  bottom: var(--tl-tail, 0px);
  left: 50%;
  width: var(--tl-spine);
  transform: translateX(-50%);
  border-radius: 2px;
}

.edi-tl::before {
  background: rgba(0, 51, 160, 0.11);
}

/* Fill layer — scaled by scroll position where supported */
.edi-tl::after {
  background: linear-gradient(
    to bottom,
    var(--mint-deep) 0%,
    var(--brand-secondary) 100%
  );
  transform-origin: top center;
  scale: 1 0;
  translate: -50% 0;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes edi-tl-fill {
      from { scale: 1 0; }
      to   { scale: 1 1; }
    }

    .edi-tl::after {
      animation: edi-tl-fill linear both;
      animation-timeline: view();
      animation-range: entry 30% exit 22%;
    }
  }
}

/* Without scroll-timeline support, just show the spine filled */
@supports not (animation-timeline: view()) {
  .edi-tl::after { scale: 1 1; }
}

.edi-tl__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--tl-node) 1fr;
  /* Top-aligned, not centred: centring each row independently is what let
     the last card drift below its number when card heights differ. */
  align-items: start;
  margin-bottom: var(--tl-gap);
}

.edi-tl__item:last-child {
  margin-bottom: 0;
}

/* The node sitting on the spine, pinned to its own card's title row */
.edi-tl__node {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tl-node);
  height: var(--tl-node);
  margin-top: calc(var(--tl-anchor) - (var(--tl-node) / 2));
  border-radius: 50%;
  background: var(--bg-white);
  border: 2px solid var(--mint-deep);
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.92),
    0 8px 20px rgba(0, 51, 160, 0.13);
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--brand-secondary);
  font-variant-numeric: tabular-nums;
  transition: border-color .4s ease, color .4s ease, scale .4s cubic-bezier(.22,1,.36,1);
}

.edi-tl__item:hover .edi-tl__node,
.edi-tl__item:focus-within .edi-tl__node {
  scale: 1.09;
}

/* Cap the spine at the final node: this item paints over any spine below
   its own centre, so the line ends on 5 rather than trailing into space. */
.edi-tl__item:last-child::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--tl-anchor);
  bottom: -2px;
  width: calc(var(--tl-spine) + 2px);
  transform: translateX(-50%);
  background: var(--bg-white);
}

/* Soft terminal dot so the line resolves instead of just stopping */
.edi-tl__item:last-child .edi-tl__node {
  border-color: var(--brand-secondary);
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.92),
    0 0 0 8px rgba(0, 51, 160, 0.07),
    0 8px 20px rgba(0, 51, 160, 0.14);
}

/* Pulsing ring on the active/hovered node */
.edi-tl__node::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--mint-deep);
  opacity: 0;
  transition: opacity .45s ease, scale .45s ease;
}

.edi-tl__item:hover .edi-tl__node::after,
.edi-tl__item:focus-within .edi-tl__node::after {
  opacity: .55;
  scale: 1.32;
}

.edi-tl__item:hover .edi-tl__node,
.edi-tl__item:focus-within .edi-tl__node {
  border-color: var(--brand-secondary);
}

/* The card — alternating sides, with perspective for the 3D tilt */
.edi-tl__card {
  position: relative;
  perspective: 1000px;
}

.edi-tl__item:nth-child(odd) .edi-tl__card {
  grid-column: 1;
  padding-right: clamp(1.1rem, 2.4vw, 2.1rem);
}

.edi-tl__item:nth-child(even) .edi-tl__card {
  grid-column: 3;
  padding-left: clamp(1.1rem, 2.4vw, 2.1rem);
}

.edi-tl__inner {
  position: relative;
  overflow: hidden;
  padding: 1.15rem clamp(1.1rem, 1.9vw, 1.4rem) 1.2rem;
  border-radius: var(--radius-md);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.96),
    rgba(247, 251, 247, 0.92)
  );
  border: 1px solid rgba(0, 51, 160, 0.1);
  box-shadow: 0 10px 26px rgba(0, 51, 160, 0.07);
  transition:
    transform .5s cubic-bezier(.22, 1, .36, 1),
    box-shadow .5s cubic-bezier(.22, 1, .36, 1),
    border-color .4s ease;
  transform-style: preserve-3d;
}

/* Accent edge on the spine-facing side, revealing on hover */
.edi-tl__inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--mint-deep), var(--brand-secondary));
  opacity: 0;
  transition: opacity .4s ease;
}

.edi-tl__item:nth-child(odd) .edi-tl__inner::before { right: 0; }
.edi-tl__item:nth-child(even) .edi-tl__inner::before { left: 0; }

.edi-tl__item:hover .edi-tl__inner::before,
.edi-tl__item:focus-within .edi-tl__inner::before {
  opacity: 1;
}

/* The 3D tilt: cards lean away from the spine, and straighten on hover */
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .edi-tl__item:nth-child(odd) .edi-tl__inner {
    transform: rotateY(-7deg) translateZ(0);
  }

  .edi-tl__item:nth-child(even) .edi-tl__inner {
    transform: rotateY(7deg) translateZ(0);
  }

  .edi-tl__item:hover .edi-tl__inner,
  .edi-tl__item:focus-within .edi-tl__inner {
    transform: rotateY(0deg) translateZ(26px) scale(1.017);
    box-shadow: 0 26px 54px rgba(0, 51, 160, 0.16);
    border-color: rgba(86, 178, 124, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .edi-tl__inner { transform: none !important; transition: none; }
}

/* Connector from card to spine, pinned to the node's height (not the card
   midpoint) so it always points straight at its own number. Sits on the
   card wrapper because .edi-tl__inner now clips its overflow. */
.edi-tl__card::after {
  content: "";
  position: absolute;
  top: var(--tl-anchor);
  width: clamp(1.1rem, 2.4vw, 2.1rem);
  height: 2px;
  translate: 0 -50%;
  transition: opacity .4s ease;
  opacity: .85;
}

.edi-tl__item:nth-child(odd) .edi-tl__card::after {
  right: 0;
  background: linear-gradient(to right, rgba(86, 178, 124, 0.55), rgba(86, 178, 124, 0.14));
}

.edi-tl__item:nth-child(even) .edi-tl__card::after {
  left: 0;
  background: linear-gradient(to left, rgba(86, 178, 124, 0.55), rgba(86, 178, 124, 0.14));
}

.edi-tl__item:hover .edi-tl__card::after,
.edi-tl__item:focus-within .edi-tl__card::after {
  opacity: 1;
}

.edi-tl__badge {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.24rem 0.62rem;
  border-radius: var(--radius-pill);
  background: rgba(86, 178, 124, 0.16);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: #2c7a51;
}

.edi-tl__badge--walk {
  background: rgba(196, 96, 61, 0.13);
  color: var(--brand-accent-deep);
}

.edi-tl__inner h3,
.edi-tl__inner h4 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.04rem, 1.6vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.24;
  color: var(--brand-secondary);
}

.edi-tl__inner p {
  margin: 0;
  color: rgba(38, 38, 38, 0.8);
  font-size: 0.945rem;
  line-height: 1.58;
}

/* Reveal each item as it scrolls in, from its own side */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes edi-tl-in-left {
      from { opacity: 0; translate: -26px 14px; }
      to   { opacity: 1; translate: 0 0; }
    }
    @keyframes edi-tl-in-right {
      from { opacity: 0; translate: 26px 14px; }
      to   { opacity: 1; translate: 0 0; }
    }
    @keyframes edi-tl-node-in {
      from { opacity: 0; scale: 0.5; }
      to   { opacity: 1; scale: 1; }
    }

    body.editorial-page .edi-tl__item:nth-child(odd) .edi-tl__card {
      animation: edi-tl-in-left linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 42%;
    }

    body.editorial-page .edi-tl__item:nth-child(even) .edi-tl__card {
      animation: edi-tl-in-right linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 42%;
    }

    body.editorial-page .edi-tl__node {
      animation: edi-tl-node-in linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 34%;
    }
  }
}

/* Mobile: spine moves left, all cards stack on one side */
@media (max-width: 860px) {
  .edi-tl {
    --tl-node: 2.4rem;
    --tl-anchor: 2.1rem;
    --tl-gap: 0.6rem;
  }

  .edi-tl::before,
  .edi-tl::after,
  .edi-tl__item:last-child::before {
    left: 1.2rem;
  }

  .edi-tl__item {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0 0.85rem;
  }

  .edi-tl__node {
    grid-column: 1;
    grid-row: 1;
  }

  .edi-tl__item:nth-child(odd) .edi-tl__card,
  .edi-tl__item:nth-child(even) .edi-tl__card {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
  }

  .edi-tl__card::after { display: none; }
}


/* --------------------------------------------------------------------------
   6c. Milestone timeline — .edi-tl--milestone
   A career or history timeline rather than a numbered process. Nodes carry
   a short marker (a period, a year) instead of a step number, and the last
   entry stays open-ended because the story is still going.
   -------------------------------------------------------------------------- */

.edi-tl--milestone {
  --tl-node: 3.6rem;
  --tl-anchor: 2.7rem;
}

.edi-tl--milestone .edi-tl__node {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  line-height: 1.05;
  text-align: center;
  padding: 0 0.2rem;
  color: #2c7a51;
  border-color: var(--mint-deep);
}

/* "Now" reads as the live end of the story, so it gets the navy accent
   and a soft halo rather than the plain terminal ring. */
.edi-tl--milestone .edi-tl__node--now {
  color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 51, 160, 0.07), rgba(255, 255, 255, 0.96) 70%);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes edi-tl-now-pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(255,255,255,.92), 0 0 0 7px rgba(0,51,160,.10), 0 8px 20px rgba(0,51,160,.14); }
    50%      { box-shadow: 0 0 0 6px rgba(255,255,255,.92), 0 0 0 11px rgba(0,51,160,.05), 0 8px 20px rgba(0,51,160,.14); }
  }

  .edi-tl--milestone .edi-tl__node--now {
    animation: edi-tl-now-pulse 3.4s ease-in-out infinite;
  }
}

/* Milestone entries are shorter than process steps, so tighten the type */
.edi-tl--milestone .edi-tl__inner h3,
.edi-tl--milestone .edi-tl__inner h4 {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
}

.edi-tl--milestone .edi-tl__inner p {
  font-size: 0.93rem;
}

@media (max-width: 860px) {
  .edi-tl--milestone {
    --tl-node: 3rem;
    --tl-anchor: 2.3rem;
  }

  .edi-tl--milestone .edi-tl__node { font-size: 0.56rem; }
}


/* --------------------------------------------------------------------------
   7. Outline card — for the caution.
   Still a box, but inverted: no fill, accent border. Because most things
   around it are no longer boxes, the outline reads as "pay attention".
   -------------------------------------------------------------------------- */

.edi-outline {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1.5px solid rgba(196, 96, 61, 0.34);
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    rgba(196, 96, 61, 0.045),
    rgba(255, 255, 255, 0.6)
  );
}

.edi-outline h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.14rem, 2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--brand-accent-deep);
}

.edi-outline p {
  margin: 0;
  color: rgba(38, 38, 38, 0.82);
  font-size: 1rem;
  line-height: 1.68;
}

.edi-outline p + p {
  margin-top: 0.8rem;
}

.edi-outline__flag {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(196, 96, 61, 0.12);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-accent-deep);
}


/* --------------------------------------------------------------------------
   7b. Deep band — the tonal break.
   Every page currently runs mint/cream on white from header to footer, so the
   only tonal shift on the whole site is the footer. One full-bleed navy band
   part-way down a page breaks the vertical monotony, gives the eye somewhere
   to rest, and makes the section it holds feel like the important one.

   Position it differently on different pages: that is what stops pages
   reading as the same page with different words.

   Full-bleed inside a .container-based layout without needing a wrapper.
   -------------------------------------------------------------------------- */

.edi-band {
  position: relative;
  padding: clamp(3rem, 6vw, 4.75rem) 0;
  margin: clamp(2.6rem, 5vw, 4rem) 0;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(86, 178, 124, 0.22), transparent 58%),
    linear-gradient(135deg, var(--navy-800) 0%, var(--brand-secondary) 62%, var(--navy-600) 100%);
  color: rgba(255, 255, 255, 0.92);
  isolation: isolate;
  overflow: hidden;
}

/* "Bleed" means edge to edge of the page shell, not the viewport.
   The site sits inside .page-shell: a rounded, inset white card with
   `overflow: clip` (site.css:138), so there is no full-viewport width to
   bleed into. Using 100vw would overflow the shell and add a horizontal
   scrollbar on Windows, where 100vw includes the scrollbar width.

   <main> has no horizontal padding, so a direct child of <main> is already
   shell-width. This is exactly how the existing .home-trust-line band works
   (site.css:320) — no negative margins needed. The shell's overflow:clip
   trims the band neatly against the rounded corners. */
.edi-band--bleed {
  border-radius: 0;
}

/* Soft paw-ish light spill, keeps it from looking like a flat rectangle */
.edi-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -55%;
  width: min(48rem, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189, 233, 201, 0.16), transparent 62%);
}

.edi-band__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.edi-band .eyebrow,
.edi-band__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgba(189, 233, 201, 0.16);
  border: 1px solid rgba(189, 233, 201, 0.3);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bde9c9;
}

.edi-band .eyebrow::before { display: none; }

.edi-band h2 {
  margin: 0 0 1rem;
  max-width: 52rem;
  text-align: left;
  font-size: clamp(1.6rem, 3.3vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.14;
  color: #fff;
}

.edi-band p {
  margin: 0;
  max-width: 46rem;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.82);
}

.edi-band p + p { margin-top: 0.85rem; }

.edi-band strong { color: #bde9c9; font-weight: 800; }

.edi-band a:not(.button) {
  color: #bde9c9;
  text-decoration-color: rgba(189, 233, 201, 0.45);
  text-underline-offset: 3px;
}

/* Stat row variant, for bands that carry numbers rather than a statement */
.edi-band__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  padding-top: clamp(1.6rem, 2.6vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.edi-band__stat-number {
  display: block;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #bde9c9;
  font-variant-numeric: tabular-nums;
}

.edi-band__stat-label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.76);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes edi-band-in {
      from { opacity: 0; translate: 0 22px; }
      to   { opacity: 1; translate: 0 0; }
    }

    body.editorial-page .edi-band__inner > * {
      animation: edi-band-in linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }
  }
}


/* --------------------------------------------------------------------------
   8. Section headers for the editorial sections
   -------------------------------------------------------------------------- */

.edi-head {
  max-width: 46rem;
  margin-bottom: clamp(1.8rem, 3.2vw, 2.6rem);
}

.edi-head h2 {
  margin: 0 0 0.75rem;
  text-align: left;
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: var(--brand-secondary);
}

.edi-head p {
  margin: 0;
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  line-height: 1.62;
  color: rgba(38, 38, 38, 0.72);
}


/* --------------------------------------------------------------------------
   9. Scroll reveal — reuses the native scroll-driven technique already in
   site.css (animation-timeline: view()), which the homepage uses but the
   inner pages never got. No JavaScript. Browsers without support simply
   show the content, and reduced-motion users opt out entirely.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes edi-rise-in {
      from { opacity: 0; translate: 0 24px; }
      to   { opacity: 1; translate: 0 0; }
    }

    @keyframes edi-marker-in {
      from { opacity: 0; scale: 0.6; }
      to   { opacity: 1; scale: 1; }
    }

    body.editorial-page .edi-note,
    body.editorial-page .edi-aside,
    body.editorial-page .edi-figure,
    body.editorial-page .edi-outline,
    body.editorial-page .edi-deflist__row,
    body.editorial-page .edi-rail__step {
      animation: edi-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    /* Markers pop slightly after their row, so the rail feels like it draws
       itself as you scroll rather than everything arriving at once. */
    body.editorial-page .edi-rail__marker {
      animation: edi-marker-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 34%;
    }
  }
}