/* ============================================================
   DevCo · Section 06 — The Pathway
   Light ground. Two-column head, five-stage vertical timeline
   with a hairline rail that draws downward on scroll.
   ============================================================ */
.pathway{position:relative;}
.pathway__topline{position:absolute;top:0;left:var(--gutter);right:var(--gutter);
  height:var(--hair);background:var(--ink-hair);}

/* faint serif watermark word, low in the section */
.pathway__ghost{position:absolute;right:-2%;bottom:-5%;
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(150px,20vw,360px);line-height:.85;color:var(--ink);
  opacity:.035;letter-spacing:-.04em;pointer-events:none;user-select:none;
  white-space:nowrap;z-index:0;}

/* — Heading row — */
.pathway__head{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.4fr);
  gap:clamp(40px,5vw,64px);margin-bottom:clamp(72px,11vh,120px);}
.pathway__head-aside{display:flex;flex-direction:column;
  justify-content:space-between;gap:40px;}
.pathway__head-vert{writing-mode:vertical-rl;transform:rotate(180deg);
  align-self:flex-start;}
.pathway__headline{margin:0 0 32px;max-width:18ch;line-height:1;}
.pathway__headline em{font-style:italic;}
.pathway__sub{max-width:560px;}

/* — Timeline — */
.pathway__timeline{position:relative;z-index:2;
  padding-left:clamp(52px,7vw,96px);}

/* the hairline rail + the drawn fill */
.pathway__rail{position:absolute;top:6px;bottom:0;
  left:clamp(18px,2.6vw,34px);width:var(--hair);
  background:var(--ink-hair);overflow:hidden;}
.pathway__rail-fill{position:absolute;inset:0;
  background:var(--accent);transform:scaleY(0);transform-origin:top;}

/* scroll-linked draw — fills as the timeline passes through view.
   Progressive enhancement: browsers without scroll-driven
   animations fall back to the .is-in class rule below. */
@supports (animation-timeline:view()){
  .pathway__rail-fill{
    animation:pathwayDraw linear both;
    animation-timeline:view();
    animation-range:cover 2% cover 82%;
  }
}
@keyframes pathwayDraw{from{transform:scaleY(0);}to{transform:scaleY(1);}}

/* fallback / no scroll-timeline support — draw once when the timeline
   enters view (keys off the motion engine's .is-in on the first step,
   so it needs no bespoke JS). */
@supports not (animation-timeline:view()){
  .pathway__timeline:has(.pathway__step.is-in) .pathway__rail-fill{
    transform:scaleY(1);
    transition:transform 1.8s var(--ease);
  }
  /* no-JS / no :has() — rail simply shows filled */
  .pathway__rail-fill{transform:scaleY(1);}
  .pathway__timeline:has(.pathway__step) .pathway__rail-fill{transform:scaleY(0);}
}

/* — A stage — */
.pathway__step{position:relative;padding:0 0 clamp(64px,8vh,104px);}
.pathway__step--last{padding-bottom:0;}

/* node marker sitting on the rail */
.pathway__node{position:absolute;top:8px;
  left:calc(-1 * clamp(34px,4.4vw,62px));
  width:13px;height:13px;display:grid;place-items:center;
  border:var(--hair) solid var(--ink-hair);border-radius:50%;
  background:var(--bone);transform:translateX(-50%);}
.pathway__node-dot{width:5px;height:5px;border-radius:50%;
  background:var(--ink-hair);transition:background .5s var(--ease),
  transform .5s var(--ease);}
.pathway__step.is-in .pathway__node{border-color:var(--accent);}
.pathway__step.is-in .pathway__node-dot{background:var(--accent);
  transform:scale(1.2);}

/* faint serif watermark number */
.pathway__watermark{position:absolute;top:-.22em;
  left:clamp(8px,1.5vw,20px);
  font-family:var(--font-display);
  font-size:clamp(78px,8.5vw,150px);line-height:.85;
  letter-spacing:-.04em;color:var(--ink);opacity:.06;
  pointer-events:none;user-select:none;z-index:0;}

.pathway__step-body{position:relative;z-index:1;
  padding-left:clamp(36px,5vw,84px);}
.pathway__step-head{display:flex;flex-direction:column;gap:10px;
  margin-bottom:22px;}
.pathway__step-idx{display:block;}
.pathway__step-heading{margin:0;color:var(--ink);}
.pathway__step-heading em{font-style:italic;}
.pathway__step-text{max-width:540px;margin:0 0 22px;}
.pathway__step-meta{display:block;}

/* — Closing line — */
.pathway__close{position:relative;z-index:2;
  display:flex;align-items:baseline;gap:24px;
  margin-top:clamp(56px,8vh,96px);padding-top:32px;
  border-top:var(--hair) solid var(--ink-hair);}
.pathway__close-rule{flex:none;width:48px;height:var(--hair);
  background:var(--accent);transform:translateY(-6px);}
.pathway__close-text{font-family:var(--font-display);
  font-size:var(--fs-statement);line-height:1.22;
  letter-spacing:-.01em;color:var(--ink);max-width:24ch;}
.pathway__close-text em{font-style:italic;color:var(--accent);}

/* — Responsive — */
@media (max-width:960px){
  .pathway__head{grid-template-columns:1fr;
    gap:36px;margin-bottom:clamp(56px,8vh,80px);}
  .pathway__head-aside{flex-direction:row;align-items:center;
    justify-content:flex-start;gap:24px;}
  .pathway__head-vert{writing-mode:horizontal-tb;transform:none;}
  .pathway__timeline{padding-left:clamp(40px,9vw,64px);}
  .pathway__rail{left:clamp(14px,3.4vw,22px);}
  .pathway__node{left:calc(-1 * clamp(26px,6vw,42px));}
  .pathway__step-body{padding-left:0;}
  .pathway__watermark{font-size:clamp(64px,16vw,104px);
    left:auto;right:0;}
}
@media (max-width:640px){
  .pathway__ghost{display:none;}
  .pathway__close{flex-direction:column;gap:14px;}
  .pathway__close-rule{transform:none;}
}

/* — Reduced motion — rail appears settled, no draw — */
@media (prefers-reduced-motion:reduce){
  .pathway__rail-fill{animation:none !important;
    transition:none !important;transform:scaleY(1) !important;}
  .pathway__node-dot,.pathway__step.is-in .pathway__node-dot{
    transition:none;}
}

/* ============================================================
   ELEMENTOR COMPAT — Section 06 (decision 0003 rebuild)
   ------------------------------------------------------------
   Bridges the native-Elementor build of this section to the
   theme CSS above. Elementor wraps every widget in its own
   .elementor-element div and adds e-con/e-flex to containers.
   Decoration that lived as markup in pathway.php — the top
   hairline, the faint serif ghost word, the vertical rail and
   its scroll-drawn fill — is re-created here as pure CSS keyed
   to the section classes. The five step numbers count up via
   the dc-count class (translated to data-count by the section
   shim assets/js/sections/pathway.js — Elementor free has no
   Custom Attributes control). Scoped to .devco-site.
   ============================================================ */

/* — Elementor container resets — */
.devco-site #pathway .elementor-element.e-con,
.devco-site #pathway .elementor-element.e-con-full,
.devco-site #pathway .elementor-element > .e-con-inner{
  --container-max-width:none;
  --container-default-padding-block-start:0;
  --container-default-padding-block-end:0;
  --container-default-padding-inline-start:0;
  --container-default-padding-inline-end:0;
  --gap:0px;
  width:100%;
}
.devco-site #pathway .elementor-widget{margin:0;}
.devco-site #pathway .elementor-widget:not(:last-child){margin-bottom:0;}

/* — Section needs to host its absolutely-positioned decoration — */
.devco-site #pathway.pathway{position:relative;}
/* top hairline — ported from .pathway__topline (was a <span>) */
.devco-site #pathway.pathway::before{
  content:"";position:absolute;top:0;
  left:var(--gutter);right:var(--gutter);
  height:var(--hair);background:var(--ink-hair);
  pointer-events:none;z-index:1;
}
/* faint serif ghost word "Pathway" — ported from .pathway__ghost */
.devco-site #pathway.pathway::after{
  content:"Pathway";position:absolute;right:-2%;bottom:-5%;
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(150px,20vw,360px);line-height:.85;
  color:var(--ink);opacity:.035;letter-spacing:-.04em;
  pointer-events:none;user-select:none;white-space:nowrap;z-index:0;
}
.devco-site #pathway .dc-shell{position:relative;z-index:2;}

/* — Heading row — restore the two-column grid — */
.devco-site #pathway .pathway__head.e-con{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.4fr);
  gap:clamp(40px,5vw,64px);
  margin-bottom:clamp(72px,11vh,120px);
}
.devco-site #pathway .pathway__head-aside.e-con{
  display:flex;flex-direction:column;
  justify-content:space-between;gap:40px;
}
.devco-site #pathway .pathway__head-main.e-con{
  display:flex;flex-direction:column;
}
.devco-site #pathway .pathway__head-vert{
  writing-mode:vertical-rl;transform:rotate(180deg);
  align-self:flex-start;
}
.devco-site #pathway .pathway__head-vert span,
.devco-site #pathway .pathway__head-vert p{display:inline;margin:0;}

/* — Eyebrow — flex row; collapse text-editor wrappers — */
.devco-site #pathway .dc-eyebrow.e-con{
  display:flex;flex-direction:row;align-items:center;gap:14px;
}
.devco-site #pathway .dc-eyebrow__rule{flex:none;}
.devco-site #pathway .dc-eyebrow__idx p,
.devco-site #pathway .dc-eyebrow__idx span,
.devco-site #pathway .dc-eyebrow__label p,
.devco-site #pathway .dc-eyebrow__label span,
.devco-site #pathway .dc-eyebrow__rule p,
.devco-site #pathway .dc-eyebrow__rule span{display:inline;margin:0;}

/* — Headline + sub — push type onto inner elements — */
.devco-site #pathway .pathway__headline .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;
  color:inherit;margin:0;
}
.devco-site #pathway .pathway__headline em{font-style:italic;}
.devco-site #pathway .pathway__sub p{
  font-size:var(--fs-lead);line-height:1.55;margin:0;color:inherit;
}

/* — Timeline — vertical rail + drawn fill re-created here, since
   the .pathway__rail / .pathway__rail-fill markup is decoration
   and not rebuilt as widgets. The rail is the ::before of the
   timeline container; its fill is the ::after, scroll-drawn. — */
.devco-site #pathway .pathway__timeline.e-con{
  display:flex;flex-direction:column;position:relative;
  padding-left:clamp(52px,7vw,96px);
}
.devco-site #pathway .pathway__timeline.e-con::before{
  content:"";position:absolute;top:6px;bottom:0;
  left:clamp(18px,2.6vw,34px);width:var(--hair);
  background:var(--ink-hair);z-index:0;
}
.devco-site #pathway .pathway__timeline.e-con::after{
  content:"";position:absolute;top:6px;bottom:0;
  left:clamp(18px,2.6vw,34px);width:var(--hair);
  background:var(--accent);transform:scaleY(0);
  transform-origin:top;z-index:1;
}
@supports (animation-timeline:view()){
  .devco-site #pathway .pathway__timeline.e-con::after{
    animation:pathwayDraw linear both;
    animation-timeline:view();
    animation-range:cover 2% cover 82%;
  }
}
@supports not (animation-timeline:view()){
  .devco-site #pathway .pathway__timeline.e-con:has(.pathway__step.is-in)::after{
    transform:scaleY(1);
    transition:transform 1.8s var(--ease);
  }
}

/* — A stage — */
.devco-site #pathway .pathway__step.e-con{
  position:relative;display:block;
  padding:0 0 clamp(64px,8vh,104px);
}
.devco-site #pathway .pathway__step--last.e-con{padding-bottom:0;}

/* node marker sitting on the rail */
.devco-site #pathway .pathway__node{
  position:absolute;top:8px;
  left:calc(-1 * clamp(34px,4.4vw,62px));
  width:13px;height:13px;display:grid;place-items:center;
  border:var(--hair) solid var(--ink-hair);border-radius:50%;
  background:var(--bone);transform:translateX(-50%);z-index:2;
}
.devco-site #pathway .pathway__node .elementor-widget-container{
  display:grid;place-items:center;width:100%;height:100%;
}
.devco-site #pathway .pathway__node-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--ink-hair);
  transition:background .5s var(--ease),transform .5s var(--ease);
}
.devco-site #pathway .pathway__step.is-in .pathway__node{border-color:var(--accent);}
.devco-site #pathway .pathway__step.is-in .pathway__node-dot{
  background:var(--accent);transform:scale(1.2);
}

/* faint serif watermark number — the count-up target */
.devco-site #pathway .pathway__watermark{
  position:absolute;top:-.22em;
  left:clamp(8px,1.5vw,20px);
  font-family:var(--font-display);
  font-size:clamp(78px,8.5vw,150px);line-height:.85;
  letter-spacing:-.04em;color:var(--ink);opacity:.06;
  pointer-events:none;user-select:none;z-index:0;
}
.devco-site #pathway .pathway__watermark .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;
  color:inherit;margin:0;
}

/* step body */
.devco-site #pathway .pathway__step-body.e-con{
  display:flex;flex-direction:column;
  position:relative;z-index:1;
  padding-left:clamp(36px,5vw,84px);
}
.devco-site #pathway .pathway__step-head.e-con{
  display:flex;flex-direction:column;gap:10px;margin-bottom:22px;
}
.devco-site #pathway .pathway__step-idx{display:block;}
.devco-site #pathway .pathway__step-idx span,
.devco-site #pathway .pathway__step-idx p{display:inline;margin:0;}
.devco-site #pathway .pathway__step-heading .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;
  color:var(--ink);margin:0;
}
.devco-site #pathway .pathway__step-heading em{font-style:italic;}
.devco-site #pathway .pathway__step-text{max-width:540px;margin:0 0 22px;}
.devco-site #pathway .pathway__step-text p{
  font-size:var(--fs-body);line-height:var(--lh-body);
  margin:0;color:inherit;
}
.devco-site #pathway .pathway__step-meta{display:block;}
.devco-site #pathway .pathway__step-meta span,
.devco-site #pathway .pathway__step-meta p{display:inline;margin:0;}

/* — Closing line — */
.devco-site #pathway .pathway__close.e-con{
  display:flex;flex-direction:row;align-items:baseline;gap:24px;
  margin-top:clamp(56px,8vh,96px);padding-top:32px;
  border-top:var(--hair) solid var(--ink-hair);
}
.devco-site #pathway .pathway__close-rule{
  flex:none;width:48px;height:var(--hair);
  background:var(--accent);transform:translateY(-6px);
}
.devco-site #pathway .pathway__close-rule span,
.devco-site #pathway .pathway__close-rule p{display:none;}
.devco-site #pathway .pathway__close-text p{
  font-family:var(--font-display);
  font-size:var(--fs-statement);line-height:1.22;
  letter-spacing:-.01em;color:var(--ink);max-width:24ch;margin:0;
}
.devco-site #pathway .pathway__close-text em{
  font-style:italic;color:var(--accent);
}

/* ============================================================
   ROUND 4 — Compact two-column rework + sticky process instrument
   ------------------------------------------------------------
   Client ask: §06 takes too much vertical space, the scroll
   pacing could be better, and the empty right-hand area should
   be put to work. This block:
     · tightens the per-step vertical rhythm so the section is
       meaningfully shorter (overrides the spacious Round 3
       padding/margins above — later rule, same specificity);
     · turns .dc-shell into a two-column grid below the head:
       timeline LEFT, a sticky "process instrument" RIGHT;
     · styles that instrument (JS-injected by pathway.js).
   These rules are scoped to .pathway--has-instrument so the
   layout only changes once pathway.js has built the panel —
   no-JS users keep the original single-column timeline intact.
   ============================================================ */

/* — Tighten the head: less breathing room below it — */
.devco-site #pathway.pathway--has-instrument .pathway__head.e-con{
  margin-bottom:clamp(40px,5.5vh,64px);
}

/* — .dc-shell becomes a grid. The DOM order is head, timeline,
     close, instrument (the instrument is appended last by JS),
     so rows are assigned explicitly: head = row 1 full width,
     timeline = row 2 col 1, instrument = row 2 col 2 (shares the
     tall timeline row so position:sticky has somewhere to
     travel), close = row 3 full width. — */
.devco-site #pathway.pathway--has-instrument .dc-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px,30vw,400px);
  grid-template-rows:auto auto auto;
  column-gap:clamp(40px,5.5vw,96px);
  row-gap:0;
  align-items:start;
}
.devco-site #pathway.pathway--has-instrument .pathway__head.e-con{
  grid-column:1 / -1;grid-row:1;
}
.devco-site #pathway.pathway--has-instrument .pathway__timeline.e-con{
  grid-column:1;grid-row:2;
}
.devco-site #pathway.pathway--has-instrument .pathway__close.e-con{
  grid-column:1 / -1;grid-row:3;
}

/* — Tighten the timeline steps — the real footprint saving.
     Per-step bottom padding drops from ~64-104px to ~40-56px. — */
.devco-site #pathway.pathway--has-instrument .pathway__step.e-con{
  padding:0 0 clamp(40px,5.2vh,56px);
}
.devco-site #pathway.pathway--has-instrument .pathway__step--last.e-con{
  padding-bottom:0;
}
/* tighter inner rhythm within a step */
.devco-site #pathway.pathway--has-instrument .pathway__step-head.e-con{
  gap:8px;margin-bottom:14px;
}
.devco-site #pathway.pathway--has-instrument .pathway__step-text{
  margin:0 0 14px;
}
/* watermark a touch smaller so tight steps don't collide */
.devco-site #pathway.pathway--has-instrument .pathway__watermark{
  font-size:clamp(64px,6.6vw,116px);
}
/* close: pull it in tighter to the timeline */
.devco-site #pathway.pathway--has-instrument .pathway__close.e-con{
  margin-top:clamp(36px,5vh,60px);padding-top:26px;
}

/* ============================================================
   The sticky process instrument (JS-injected <aside>)
   ============================================================ */
.devco-site #pathway .pathway__instrument{
  grid-column:2;grid-row:2;
  position:sticky;
  top:clamp(96px,16vh,150px);
  align-self:start;
  z-index:2;
}
.devco-site #pathway .pathway__instrument-inner{
  display:flex;flex-direction:column;
  border-top:var(--hair) solid var(--ink-hair);
  border-left:var(--hair) solid var(--ink-hair);
  padding:clamp(20px,2vw,30px) 0 clamp(20px,2vw,30px) clamp(20px,2vw,30px);
}

/* — small label — */
.devco-site #pathway .pathway__inst-label{
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:var(--fs-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:clamp(20px,3vh,34px);
}

/* — large active-stage display — */
.devco-site #pathway .pathway__inst-stage{
  display:flex;align-items:baseline;gap:14px;
  margin-bottom:clamp(22px,3.4vh,38px);
}
.devco-site #pathway .pathway__inst-num{
  font-family:var(--font-display);
  font-size:clamp(56px,5.4vw,92px);line-height:.82;
  letter-spacing:-.04em;color:var(--accent);
  font-style:italic;flex:none;
}
.devco-site #pathway .pathway__inst-namewrap{
  position:relative;overflow:hidden;display:block;
}
.devco-site #pathway .pathway__inst-name{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.5rem,1.05rem + 1.1vw,2.3rem);
  line-height:1.04;letter-spacing:-.01em;color:var(--ink);
}
/* swap transition — name + number ease in on stage change */
.devco-site #pathway .pathway__inst-stage.is-swapping .pathway__inst-name{
  animation:pathwayInstSwap .5s var(--ease) both;
}
.devco-site #pathway .pathway__inst-stage.is-swapping .pathway__inst-num{
  animation:pathwayInstNum .5s var(--ease) both;
}
@keyframes pathwayInstSwap{
  from{transform:translateY(108%);}
  to{transform:translateY(0);}
}
@keyframes pathwayInstNum{
  from{opacity:0;transform:translateY(14%);}
  to{opacity:1;transform:translateY(0);}
}

/* — compact 01-05 mini-map — */
.devco-site #pathway .pathway__inst-map{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  margin-bottom:clamp(22px,3.2vh,34px);
}
.devco-site #pathway .pathway__inst-tick{
  display:flex;align-items:center;gap:12px;
  padding:8px 0;position:relative;
  border-top:var(--hair) solid var(--ink-hair);
}
.devco-site #pathway .pathway__inst-tick:first-child{border-top:0;}
.devco-site #pathway .pathway__inst-tick-dot{
  flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--ink-hair);
  transition:background .45s var(--ease),transform .45s var(--ease);
}
.devco-site #pathway .pathway__inst-tick-num{
  flex:none;
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:var(--fs-mono);letter-spacing:.1em;
  color:var(--ink-faint);
  transition:color .45s var(--ease);
}
.devco-site #pathway .pathway__inst-tick-name{
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:var(--fs-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);
  transition:color .45s var(--ease),opacity .45s var(--ease);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* done stages — settled, quiet */
.devco-site #pathway .pathway__inst-tick.is-done .pathway__inst-tick-dot{
  background:var(--ink-faint);
}
.devco-site #pathway .pathway__inst-tick.is-done .pathway__inst-tick-num,
.devco-site #pathway .pathway__inst-tick.is-done .pathway__inst-tick-name{
  color:var(--ink-soft);
}
/* active stage — accent, slightly emphasised */
.devco-site #pathway .pathway__inst-tick.is-active .pathway__inst-tick-dot{
  background:var(--accent);transform:scale(1.5);
}
.devco-site #pathway .pathway__inst-tick.is-active .pathway__inst-tick-num{
  color:var(--accent);
}
.devco-site #pathway .pathway__inst-tick.is-active .pathway__inst-tick-name{
  color:var(--ink);
}

/* — progress meter — */
.devco-site #pathway .pathway__inst-meter{
  display:flex;align-items:center;gap:14px;
}
.devco-site #pathway .pathway__inst-track{
  flex:1 1 auto;height:var(--hair);
  background:var(--ink-hair);position:relative;overflow:hidden;
}
.devco-site #pathway .pathway__inst-fill{
  position:absolute;inset:0;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  will-change:transform;
}
.devco-site #pathway .pathway__inst-count{
  flex:none;
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:var(--fs-mono);letter-spacing:.12em;
  color:var(--ink-faint);
}
.devco-site #pathway .pathway__inst-count em{
  font-style:normal;color:var(--accent);
}

/* — Responsive — mirror pathway.css's breakpoints — */
@media (max-width:960px){
  .devco-site #pathway .pathway__head.e-con{
    grid-template-columns:1fr;gap:36px;
    margin-bottom:clamp(56px,8vh,80px);
  }
  .devco-site #pathway .pathway__head-aside.e-con{
    flex-direction:row;align-items:center;
    justify-content:flex-start;gap:24px;
  }
  .devco-site #pathway .pathway__head-vert{
    writing-mode:horizontal-tb;transform:none;
  }
  .devco-site #pathway .pathway__timeline.e-con{padding-left:clamp(40px,9vw,64px);}
  .devco-site #pathway .pathway__timeline.e-con::before,
  .devco-site #pathway .pathway__timeline.e-con::after{left:clamp(14px,3.4vw,22px);}
  .devco-site #pathway .pathway__node{left:calc(-1 * clamp(26px,6vw,42px));}
  .devco-site #pathway .pathway__step-body.e-con{padding-left:0;}
  .devco-site #pathway .pathway__watermark{
    font-size:clamp(64px,16vw,104px);left:auto;right:0;
  }

  /* — below 960px the two-column layout collapses — the
       instrument becomes a compact sticky strip ABOVE the
       timeline, still a live "you are here" but horizontal.
       The shell stays a single-column grid so explicit
       grid-row can reorder the JS-appended instrument (DOM
       order: head, timeline, close, instrument) to sit
       between the head and the timeline. — */
  .devco-site #pathway.pathway--has-instrument .dc-shell{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    column-gap:0;
  }
  .devco-site #pathway.pathway--has-instrument .pathway__head.e-con{
    grid-column:1;grid-row:1;
    margin-bottom:clamp(20px,3vh,32px);
  }
  .devco-site #pathway.pathway--has-instrument .pathway__instrument{
    grid-column:1;grid-row:2;
  }
  .devco-site #pathway.pathway--has-instrument .pathway__timeline.e-con{
    grid-column:1;grid-row:3;
  }
  .devco-site #pathway.pathway--has-instrument .pathway__close.e-con{
    grid-column:1;grid-row:4;
  }
  .devco-site #pathway .pathway__instrument{
    /* clear the fixed nav; the nav also auto-hides on
       scroll-down, so this is a comfortable resting offset */
    position:sticky;top:64px;
    margin-bottom:clamp(24px,3.5vh,36px);
    /* sit above the timeline content while it scrolls past */
  }
  .devco-site #pathway .pathway__instrument-inner{
    flex-direction:row;align-items:center;
    flex-wrap:wrap;gap:14px 22px;
    border-left:0;border-bottom:var(--hair) solid var(--ink-hair);
    padding:14px 0;
    background:var(--bone);
  }
  .devco-site #pathway .pathway__inst-label{display:none;}
  .devco-site #pathway .pathway__inst-stage{
    margin-bottom:0;gap:10px;flex:1 1 auto;min-width:0;
  }
  .devco-site #pathway .pathway__inst-num{
    font-size:clamp(40px,9vw,56px);
  }
  .devco-site #pathway .pathway__inst-name{
    font-size:clamp(1.3rem,3.6vw,1.7rem);
  }
  /* the full mini-map is too tall horizontally — drop it,
     keep the compact meter as the progress read-out */
  .devco-site #pathway .pathway__inst-map{display:none;}
  .devco-site #pathway .pathway__inst-meter{
    flex:1 1 100%;
  }
}
@media (max-width:640px){
  .devco-site #pathway.pathway::after{display:none;}
  .devco-site #pathway .pathway__close.e-con{flex-direction:column;gap:14px;}
  .devco-site #pathway .pathway__close-rule{transform:none;}
  .devco-site #pathway .pathway__instrument-inner{
    flex-direction:column;align-items:flex-start;gap:12px;
    padding:14px 0;
  }
  .devco-site #pathway .pathway__inst-stage{
    flex:0 0 auto;width:100%;
  }
}

/* — Reduced motion — rail settled, instrument static — */
@media (prefers-reduced-motion:reduce){
  .devco-site #pathway .pathway__timeline.e-con::after{
    animation:none !important;transition:none !important;
    transform:scaleY(1) !important;
  }
  .devco-site #pathway .pathway__inst-stage.is-swapping .pathway__inst-name,
  .devco-site #pathway .pathway__inst-stage.is-swapping .pathway__inst-num{
    animation:none !important;
  }
  .devco-site #pathway .pathway__inst-tick-dot,
  .devco-site #pathway .pathway__inst-tick-num,
  .devco-site #pathway .pathway__inst-tick-name{
    transition:none !important;
  }
}