:root{
  --navy:#06111e;--ink:#f2f7f7;--soft:#98aab4;--line:rgba(194,218,223,.12);
  /* TDC colour system: green (delivery/completion), cyan (movement/connection),
     purple-blue (intelligence/depth), navy (foundation/governance — see --navy
     above). RGB triplets let every rule derive its own alpha via
     rgba(var(--x-rgb),N) instead of repeating literal colour values. The
     "-text"/"-ink" variants are lightened/darkened for AA text contrast on
     dark/light surfaces respectively — the base hues alone don't clear 4.5:1
     for small text in both themes. */
  --tdc-green:#7eddbd;--tdc-green-rgb:126,221,189;
  --tdc-cyan:#1dc3e0;--tdc-cyan-rgb:29,195,224;
  --tdc-purple:#5c6eb8;--tdc-purple-rgb:92,110,184;
  --tdc-purple-text:#7c88c9;--tdc-purple-text-rgb:124,136,201;
  --tdc-green-ink:#0f9c82;--tdc-cyan-ink:#0a6f80;--tdc-purple-ink:#45529c;
  --navy-tint:#0d2338;--navy-tint-rgb:13,35,56;
  /* Dark-surface depth ladder: each level a small tonal lift over the last,
     so page/hero/shell/panel/floating-card read as distinct planes instead
     of one navy repeated everywhere. --navy (above) remains the page floor. */
  --dark-hero:#0a1a27;--dark-hero-rgb:10,26,39;
  --dark-shell:#0e2233;--dark-shell-rgb:14,34,51;
  --dark-panel:#13293a;--dark-panel-rgb:19,41,58;
  --dark-panel-raised:#1a3348;--dark-panel-raised-rgb:26,51,72;
  --glow-green:rgba(126,221,189,.18);--glow-cyan:rgba(29,195,224,.17);--glow-purple:rgba(92,110,184,.22);
  /* Back-compat aliases: existing rules keyed to these names inherit the new
     palette automatically with no further edits. */
  --mint:var(--tdc-green);--teal:#19b6aa;--cyan:var(--tdc-cyan);--blue:var(--tdc-purple);--heat:var(--tdc-green);
  --sans:"Poppins",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;--mono:"Poppins",system-ui,sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}html,body{height:100%;background:var(--navy)}body{margin:0;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block}
.skip-link{position:fixed;z-index:1000;top:8px;left:8px;padding:10px 14px;background:#fff;color:#06111e;transform:translateY(-150%)}.skip-link:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html.is-released{height:auto}
html.is-released body{height:auto;overflow:visible}
html.is-released .story-scroll{overflow:hidden}
/* Hero atmosphere: two large, low-intensity corner glows plus the base
   floor colour, all in one background so no extra DOM node is needed. The
   --atmo-* custom properties are written once per frame from
   applyAtmosphere() in JS (same eased value that drives the stage tween),
   so this drifts and reverses exactly in step with scroll. */
.app-shell{position:relative;height:100svh;min-height:620px;overflow:hidden;background:
  radial-gradient(620px circle at 10% 100%,rgba(var(--tdc-green-rgb),calc(var(--atmo-green,.2) * .22)),transparent 60%),
  radial-gradient(680px circle at 92% 0%,rgba(var(--tdc-purple-rgb),calc(var(--atmo-purple,.2) * .24)),transparent 58%),
  linear-gradient(var(--navy),var(--navy))}
.grain{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
.site-header{position:absolute;z-index:100;top:0;left:0;width:100%;height:76px;padding:0 clamp(22px,4.5vw,74px);display:flex;align-items:center;gap:24px;background:linear-gradient(180deg,rgba(7,17,31,.9),rgba(7,17,31,.35));border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:12px;font:600 .91rem/1 var(--sans);white-space:nowrap}.brand img{width:32px;height:32px}
.desktop-nav{display:flex;gap:clamp(20px,3vw,48px);margin:auto;font:500 .69rem/1 var(--sans);color:#a7b5c7}.desktop-nav a{position:relative;padding:30px 0}.desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:20px;height:1px;background:var(--tdc-cyan);transition:right .25s}.desktop-nav a:hover{color:#fff}.desktop-nav a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:16px;padding:10px 16px;border:1px solid rgba(255,255,255,.23);border-radius:99px;font:600 .69rem/1 var(--sans)}.nav-cta span{color:var(--mint)}
.theme-toggle{display:grid;place-content:center;width:38px;height:38px;flex:none;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--ink);font-size:.92rem;line-height:1;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}.theme-toggle:hover{background:rgba(255,255,255,.07);transform:rotate(-12deg)}
.menu-toggle,.mobile-menu{display:none}
.experience{position:absolute;z-index:5;inset:76px 0 92px;overflow:hidden}
/* Heading particle Easter egg: one fixed, viewport-sized, inert canvas
   sitting between .visual-stage (3) and .story-scroll (8) in .experience's
   own stacking context. Fixed positioning means particle coordinates match
   pointer clientX/clientY and heading getBoundingClientRect() directly, no
   offset math — .experience's overflow:hidden doesn't clip fixed descendants.
   Confinement to the heading is done in the particle physics, not by
   clipping the canvas. Hidden by default; JS raises opacity only while
   active. */
.heading-particle-canvas{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0}
.story-scroll{position:relative;z-index:8;width:min(44vw,680px);height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;background:linear-gradient(90deg,rgba(6,17,30,.99) 0%,rgba(6,17,30,.9) 62%,rgba(6,17,30,.42) 85%,transparent);outline:none}.story-scroll::-webkit-scrollbar{display:none}
.story{height:100%;min-height:100%;padding:0 clamp(35px,5vw,74px);display:flex;align-items:center;scroll-snap-align:start;scroll-snap-stop:always;opacity:.23}.story.is-active{opacity:1}.story__inner{width:min(100%,640px);padding-block:35px}
/* Opacity/transform above are baseline/no-JS fallbacks only — with the engine
   running, renderStoryCrossfade() drives both every frame as an explicit
   inline style (no CSS transition here) so departure/overlap/resolution track
   the gesture-gated tween exactly, the same way the Continue morph does. */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 clamp(18px,2.5vh,27px);font:500 .54rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8095a1}.eyebrow span{color:var(--mint)}.eyebrow i{width:34px;height:1px;background:linear-gradient(90deg,rgba(var(--tdc-green-rgb),.6),rgba(var(--tdc-cyan-rgb),.35))}
h1,h2{margin:0;font:600 clamp(3.7rem,4.8vw,5.7rem)/.9 var(--sans);letter-spacing:-.067em}h1 em,h2 em{font-style:normal;color:#9db1bb;font-weight:500}
.intro{max-width:500px;margin:clamp(20px,3vh,30px) 0 0;color:var(--soft);font-size:clamp(.85rem,1vw,.96rem);line-height:1.62}
.site-section__inner>.intro{max-width:none}
.actions{display:flex;gap:10px;margin-top:clamp(23px,3.3vh,34px)}.actions a,.inline-link{padding:13px 17px;font:500 .56rem/1 var(--mono);text-transform:uppercase;letter-spacing:.035em}.actions .primary{background:#edf6f5;color:#06111e}.actions .primary span{margin-left:22px;color:#0b9d92}.actions .secondary{border:1px solid rgba(231,242,243,.22)}.inline-link{display:inline-flex;gap:32px;margin-top:28px;padding:0 0 8px;border-bottom:1px solid transparent;border-image:linear-gradient(90deg,var(--tdc-green),var(--tdc-cyan)) 1;color:#dce8e9}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:25px 0 0;padding:0;list-style:none}.tags li{padding:7px 10px;border:1px solid var(--line);color:#8ca0aa;font:400 .5rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.credentials{display:flex;gap:45px;margin-top:27px}.credentials div{display:grid;gap:4px}.credentials strong{font:600 1.75rem/1 var(--sans);letter-spacing:-.05em}.credentials span{color:#8295a0;font-size:.62rem}

/* ============================================================
   ONE DASHBOARD — a dense bento of tiles packed edge-to-edge.
   The complete board is the target composition; scrolling
   reveals it group by group (a blank canvas that fills in).
   ============================================================ */
/* Same atmosphere, restated here so it reads through the dashboard's own
   region too (a green lower corner, cyan travelling between stages, a
   purple-blue upper corner) — layered on top of, not replacing, the
   existing base gradient. .visual-stage is "hero" in the depth ladder: one
   tonal step up from the page floor. */
.visual-stage{position:absolute;z-index:3;inset:0;overflow:hidden;background:
  radial-gradient(620px circle at 8% 96%,rgba(var(--tdc-green-rgb),calc(var(--atmo-green,.2) * .3)),transparent 62%),
  radial-gradient(680px circle at var(--atmo-cyan-x,58%) var(--atmo-cyan-y,42%),rgba(var(--tdc-cyan-rgb),calc(var(--atmo-cyan,.25) * .26)),transparent 64%),
  radial-gradient(720px circle at 94% 2%,rgba(var(--tdc-purple-rgb),calc(var(--atmo-purple,.2) * .32)),transparent 60%),
  radial-gradient(circle at 74% 42%,rgba(27,182,170,.1),transparent 36%),
  linear-gradient(120deg,rgba(var(--dark-hero-rgb),1) 18%,rgba(var(--dark-shell-rgb),.94) 68%,rgba(var(--dark-hero-rgb),1))}
/* Faint illuminated grid, tinted cyan/purple, masked to a soft circle that
   tracks the same travelling light as the corner glows above. */
.visual-stage::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;opacity:.55;transition:opacity .6s ease;
  background-image:linear-gradient(rgba(var(--tdc-cyan-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--tdc-purple-rgb),.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(900px circle at var(--atmo-cyan-x,58%) var(--atmo-cyan-y,42%),#000,transparent 75%);
  mask-image:radial-gradient(900px circle at var(--atmo-cyan-x,58%) var(--atmo-cyan-y,42%),#000,transparent 75%)}
.visual-stage::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(90deg,rgba(6,17,30,.92) 0%,rgba(6,17,30,.28) 24%,transparent 40%)}
/* The hero dims as the destination section takes over, per the Continue
   handoff: energy reads as flowing forward rather than lingering behind. */
html.is-released .visual-stage::before{opacity:.2}
.is-tab-hidden .visual-stage::before{transition:none}

.system-visual{position:absolute;z-index:2;inset:48px 2.2vw 30px min(41vw,620px);--ease:cubic-bezier(.22,.72,.18,1);perspective:1800px;perspective-origin:center}

/* Dashboard is the "shell" level of the depth ladder — one lift above the
   hero background it sits on. The three low-alpha shadows pick up whatever
   the current --atmo-* blend is, so the whole platform surface reads as
   reflecting the ambient light around it rather than sitting flat. */
.dashboard{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;border:1px solid rgba(150,200,205,.16);border-radius:7px;background:linear-gradient(160deg,rgba(var(--dark-shell-rgb),.82),rgba(var(--dark-hero-rgb),.74));box-shadow:0 46px 110px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.03),0 0 60px rgba(var(--tdc-green-rgb),calc(var(--atmo-green,.2) * .12)),0 0 90px rgba(var(--tdc-cyan-rgb),calc(var(--atmo-cyan,.2) * .1)),0 0 120px rgba(var(--tdc-purple-rgb),calc(var(--atmo-purple,.2) * .12));backdrop-filter:blur(9px);overflow:hidden;transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .32s ease-out,box-shadow .6s var(--ease),border-color .6s}
/* Pointer-follow glow: retired. It sat above the tiles (z-index 9) and read as
   a disc dragged over the content rather than ambient light. */
.dash-glow{display:none}
.dash-sweep{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 42%,rgba(var(--tdc-green-rgb),.18) 50%,transparent 58%)}

.dash-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 18px;border-bottom:1px solid var(--line);background:rgba(var(--dark-panel-rgb),.42)}
.db-title{color:#dde7ea;font:600 .72rem/1 var(--sans);letter-spacing:.005em;white-space:nowrap}
.dash-status{display:flex;align-items:center;gap:9px;min-width:0;font:500 .66rem/1 var(--sans);letter-spacing:.005em;color:#aab9c1}
.dash-status i{flex:none;width:7px;height:7px;border-radius:50%;background:#d99a2c;box-shadow:0 0 8px rgba(217,154,44,.7);transition:background .4s,box-shadow .4s}
.dash-status .ds-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6f8591;font-family:var(--body)}
.deliver-seal{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 9px;border-radius:99px;font:600 .6rem/1 var(--sans);color:#05121a;background:var(--mint);opacity:0;transform:scale(.82);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.deliver-seal b{font-weight:700}
.system-visual[data-step="6"] .deliver-seal{opacity:1;transform:scale(1)}
@media(min-width:1101px){.dash-status .ds-detail::before{content:"· "}}
@media(max-width:1100px){.dash-status .ds-detail{display:none}}

/* --- the bento grid --- */
.dash-body{position:relative;display:block;padding:11px;background-image:linear-gradient(rgba(120,165,175,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,165,175,.05) 1px,transparent 1px);background-size:32px 32px}

.canvas-hint{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:18px;pointer-events:none;opacity:1;transition:opacity .5s}
/* The invitation to scroll is the one thing the first step has to land, so it
   gets a real target: a filled, haloed disc with a travelling arrow. */
.canvas-hint .ch-ring{
  position:relative;
  width:72px;height:72px;
  display:grid;place-content:center;
  border:1.5px solid rgba(var(--tdc-green-rgb),.75);
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--tdc-green-rgb),.16),rgba(var(--tdc-green-rgb),.04) 70%);
  box-shadow:0 0 34px rgba(var(--tdc-green-rgb),.22),inset 0 0 22px rgba(var(--tdc-green-rgb),.09);
  color:var(--mint);
  font-size:1.5rem;
  animation:hintbob 1.9s ease-in-out infinite;
}
/* expanding halo, so it reads as "keep going" from the corner of the eye */
.canvas-hint .ch-ring::after{
  content:"";
  position:absolute;
  inset:-1.5px;
  border:1.5px solid rgba(var(--tdc-green-rgb),.55);
  border-radius:50%;
  animation:hintpulse 2.4s ease-out infinite;
}
.canvas-hint .ch-t{color:var(--mint);font:600 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.2em}
.canvas-hint .ch-s{color:#b9cdd2;font:500 .6rem/1 var(--sans);text-transform:uppercase;letter-spacing:.13em}
@keyframes hintbob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}
@keyframes hintpulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.75);opacity:0}100%{transform:scale(1.75);opacity:0}}

.team-card{
  position:absolute;
  z-index:4;
  left:1%;
  top:1%;
  width:32%;
  height:18%;
  min-width:0;
  min-height:0;
  padding:clamp(18px,2vw,30px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:clamp(14px,1.8vh,22px);
  border:1px solid rgba(var(--tdc-green-rgb),.22);
  border-radius:7px;
  background:
    radial-gradient(420px circle at 50% 42%,rgba(var(--tdc-cyan-rgb),.1),transparent 68%),
    linear-gradient(145deg,rgba(12,39,50,.96),rgba(7,24,37,.94));
  box-shadow:0 30px 70px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.035);
  opacity:0;
  pointer-events:none;
  transform:translateY(16px) scale(.975);
  transition:
    left .78s var(--ease),top .78s var(--ease),width .78s var(--ease),height .78s var(--ease),
    opacity .48s ease,transform .78s var(--ease),border-color .5s,box-shadow .55s,filter .3s ease;
}
.system-visual[data-step="1"] .team-card{
 left:3%;
  top:3%;
  width:94%;
  height:94%;
  z-index:20;
  opacity:1;
  pointer-events:auto;
  transform:none;
  border-color:rgba(var(--tdc-green-rgb),.4);
}
.team-card__head{display:flex;justify-content:space-between;align-items:center;gap:18px;color:#78919c;font:500 .46rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.team-card__head b{display:flex;align-items:center;gap:7px;color:var(--mint);font:500 .48rem/1 var(--mono)}
.team-card__head i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(var(--tdc-green-rgb),.8)}
.team-card__system{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,1.25fr) minmax(0,1fr);gap:clamp(13px,1.7vw,24px);align-items:stretch;min-height:0}
.team-side{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:center;padding:13px;border:1px solid rgba(var(--tdc-cyan-rgb),.16);background:rgba(var(--tdc-cyan-rgb),.035)}
.team-side>span{grid-column:1/-1;margin-bottom:4px;color:#70aeb8;font:500 .44rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.team-side strong{display:grid;place-content:center;min-height:44px;padding:8px 5px;border:1px solid rgba(var(--tdc-cyan-rgb),.17);color:#b9c9ce;font:500 .52rem/1.1 var(--sans);text-align:center}
.team-side.-tdc{border-color:rgba(var(--tdc-green-rgb),.2);background:rgba(var(--tdc-green-rgb),.04)}
.team-side.-tdc>span{color:var(--mint)}
.team-side.-tdc strong{border-color:rgba(var(--tdc-green-rgb),.19);color:#d2e8e3}
.team-cadence{display:grid;grid-template-rows:auto 1fr auto 1fr auto;align-items:center;justify-items:center;padding-block:6px;color:#91a5ae;font:500 .48rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-align:center}
.team-cadence i{position:relative;width:1px;height:100%;min-height:12px;background:linear-gradient(var(--mint),rgba(var(--tdc-cyan-rgb),.25))}
.team-cadence i::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;border-right:1px solid var(--mint);border-bottom:1px solid var(--mint);transform:translate(-50%,0) rotate(45deg)}
.team-card__proof{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:13px;border-top:1px solid rgba(var(--tdc-green-rgb),.16)}
.team-card__proof span{color:#78909b;font-size:.5rem;line-height:1.4}
.team-card__proof b{display:block;margin-bottom:4px;color:#d3e4e3;font:600 .54rem/1 var(--sans)}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-card{
  z-index:4;
  opacity:1;
  pointer-events:auto;
  transform:none;
  grid-template-rows:auto 1fr auto;
  gap:7px;
  padding:11px 12px;
  background:linear-gradient(145deg,rgba(12,39,50,.94),rgba(7,24,37,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-card__head{
  padding:0;
  border:0;
}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-card__head b{font-size:.4rem}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-card__proof{display:none}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-card .card-heading{
  font-size:clamp(.85rem,1.1vw,1.05rem);
  line-height:1.05;
}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-card__system{
  grid-template-columns:auto minmax(40px,1fr) auto;
  gap:8px;
  align-items:center;
}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-side{
  display:block;
  padding:0;
  border:0;
  background:none;
}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-side>span{
  display:block;
  margin:0;
  white-space:nowrap;
}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-side strong{display:none}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-cadence{
  display:flex;
  justify-content:center;
  gap:5px;
  padding:0;
  font-size:.32rem;
}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-cadence span:first-child,
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-cadence span:last-child,
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .team-cadence i{display:none}

.tile{
  position:absolute;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:6px;
  background:linear-gradient(160deg,rgba(13,33,48,.6),rgba(8,21,33,.46));
  overflow:hidden;
  opacity:0;
  transform:translateY(12px) scale(.985);
  transition:
    left .78s var(--ease),top .78s var(--ease),width .78s var(--ease),height .78s var(--ease),
    opacity .48s ease,transform .78s var(--ease),box-shadow .5s,border-color .5s,filter .3s ease;
}
.t-sources{left:1%;top:20%;width:32%;height:58%}
.t-flow{left:1%;top:80%;width:32%;height:19%}
.t-foundation{left:34%;top:1%;width:32%;height:58%;cursor:pointer}
.t-kpis{left:34%;top:61%;width:32%;height:38%;flex-direction:row;align-items:stretch;padding:0}
.t-chart{left:67%;top:1%;width:32%;height:48%;cursor:pointer}
.t-outcomes{left:67%;top:51%;width:32%;height:48%}

.tile-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#7f97a1;font:400 .46rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.tile-head b{font-weight:400;color:var(--mint)}
.tile-foot{display:flex;justify-content:space-between;margin-top:auto;padding-top:10px;color:#6e8793;font:400 .43rem/1 var(--mono);text-transform:uppercase}
.tile-foot b{font-weight:400;color:#9cafb8;transition:color .3s}

/* Card heading/subheading: one shared voice for every capability card (01-05),
   so they read as one continuous statement rather than five separate ideas.
   Both stay hidden by default (docked tiles, and the all-docked resolved
   view) and only switch on for a card's own active step. The mobile compact
   grid (max-width:900px below) forces headings back on for every card at
   once, since that layout has no scroll-driven active step. */
.card-heading{display:none;margin:9px 0 2px;color:#edf5f5;font:600 clamp(1.05rem,1.5vw,1.5rem)/1.1 var(--sans);letter-spacing:-.04em;transition:opacity .5s,font-size .3s var(--ease)}
.card-subhead{display:none;max-width:600px;margin:8px 0 12px;color:#8ca2ac;font:500 clamp(.62rem,.75vw,.78rem)/1.55 var(--sans)}

/* --- sources: connected input nodes on a data bus --- */
.src-list{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-around;margin-top:8px}
.src-list::before{content:"";position:absolute;left:11px;top:5%;bottom:5%;width:2px;border-radius:2px;background:linear-gradient(180deg,transparent,rgba(var(--tdc-green-rgb),.5) 14%,rgba(var(--tdc-green-rgb),.5) 86%,transparent);box-shadow:0 0 10px rgba(var(--tdc-green-rgb),.35)}
.node{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:9px 8px 9px 4px;border-radius:6px;cursor:pointer;transition:background .2s}
.node:hover,.node:focus-visible{background:rgba(var(--tdc-green-rgb),.06);outline:none}
.node-dot{position:relative;width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid rgba(var(--tdc-green-rgb),.6);background:radial-gradient(circle at 40% 35%,#143648,#08192a);box-shadow:0 0 12px rgba(var(--tdc-green-rgb),.28);transition:box-shadow .3s,border-color .3s,transform .3s}
.node-dot::after{content:"";position:absolute;inset:4.5px;border-radius:50%;background:var(--mint);box-shadow:0 0 7px rgba(var(--tdc-green-rgb),.85)}
.node:hover .node-dot,.node:focus-visible .node-dot{border-color:var(--mint);box-shadow:0 0 18px rgba(var(--tdc-green-rgb),.6);transform:scale(1.14)}
.node-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.node-label{color:#6d8895;font:400 .42rem/1 var(--mono);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-name{font:600 .88rem/1 var(--sans);letter-spacing:-.01em;transition:color .25s}
.node:hover .node-name,.node:focus-visible .node-name{color:#fff}
.node-spark{display:flex;gap:3px;height:18px;align-items:flex-end}
.node-spark em{width:5px;border-radius:1px;background:#1d8f96}.node-spark em:nth-child(2){background:var(--cyan)}.node-spark em:nth-child(3){background:var(--blue)}.node-spark em:nth-child(4){background:#2f7fc4}
.node-spark em:nth-child(1){height:45%}.node-spark em:nth-child(2){height:100%}.node-spark em:nth-child(3){height:62%}.node-spark em:nth-child(4){height:80%}

/* --- throughput tile --- */
.flow-top{display:flex;align-items:baseline;gap:8px;margin-top:9px}
.flow-top b{font:600 1.5rem/1 var(--sans);letter-spacing:-.03em;color:#eaf3f4}
.flow-top span{color:#6f8792;font:400 .46rem/1 var(--mono);text-transform:uppercase}
.flow-bars{display:flex;align-items:flex-end;gap:3px;height:44%;min-height:30px;margin-top:auto}
.flow-bars i{flex:1;border-radius:1px;background:linear-gradient(180deg,rgba(var(--tdc-green-rgb),.6),rgba(var(--tdc-green-rgb),.16));opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease);transform:scaleY(.4);transform-origin:bottom}

/* --- foundation: governed-data coverage heatmap --- */
.fnd-map{flex:1;display:grid;grid-template-columns:auto 1fr;align-content:center;gap:5px 11px;margin:10px 0;min-height:60px}
.fm-label{align-self:center;color:#728b96;font:400 .43rem/1 var(--mono);text-transform:uppercase;text-align:right;white-space:nowrap}
.fm-cells{display:grid;grid-template-columns:repeat(18,1fr);gap:3px}
.fm-cells i{border-radius:1.5px;background:color-mix(in srgb, var(--heat) calc(var(--i,.15) * 100%), transparent);opacity:0;transform:scale(.5);transition:opacity .4s var(--ease),transform .4s var(--ease),box-shadow .25s;aspect-ratio:1/1}
.fm-cells i:hover{box-shadow:0 0 0 1px rgba(var(--tdc-green-rgb),.7),0 0 9px rgba(var(--tdc-green-rgb),.45)}
.t-foundation.is-probing .fm-cells i{animation:probe .55s ease both}
.t-foundation.is-probing .fm-cells i:nth-child(3n){animation-delay:.05s}
.t-foundation.is-probing .fm-cells i:nth-child(5n){animation-delay:.1s}
@keyframes probe{50%{box-shadow:0 0 0 1px rgba(var(--tdc-green-rgb),.75);transform:scale(.78)}}

/* --- KPI strip --- */
.kpi{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:13px 6px 13px 15px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi b{font:600 clamp(1.05rem,1.5vw,1.4rem)/1 var(--sans);letter-spacing:-.03em;color:#eaf3f4}
.kpi span{color:#6f8792;font:400 .44rem/1 var(--mono);text-transform:uppercase}

/* --- analysis chart tile --- */
.query-chart{position:relative;flex:1;min-height:70px;display:flex;gap:7px;align-items:flex-end;border-bottom:1px solid var(--line)}
.query-chart>i{width:11%;background:rgba(25,182,170,.16);height:35%;transition:height .5s var(--ease),background .3s}
.query-chart>i:nth-child(2){height:51%}.query-chart>i:nth-child(3){height:42%}.query-chart>i:nth-child(4){height:65%}.query-chart>i:nth-child(5){height:78%}.query-chart>i:nth-child(6){height:92%}
.query-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.query-chart path{fill:none;stroke:#64d2b1;stroke-width:2;stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.1s var(--ease)}
.t-chart:hover .tile-foot b,.t-chart:focus-visible .tile-foot b{color:var(--mint)}
.t-chart:hover .query-chart>i,.t-chart:focus-visible .query-chart>i{background:rgba(var(--tdc-green-rgb),.3)}
.t-chart:hover,.t-chart:focus-visible{outline:none}

/* --- outcomes tile ---
   Per-row description, status pill, stat caption and health bar exist in the
   DOM but stay hidden at thumbnail scale; they only switch on for the
   data-step="5" full-screen moment further down, so the docked/small
   rendering of this tile is untouched. (The heading/subheading follow the
   shared .card-heading/.card-subhead rules instead.) */
.action-health{display:none}
.workflow-signal p,.wf-pill{display:none}
.workflow-stat{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:48px}
.workflow-stat i,.workflow-stat small{display:none}
.workflow-stat strong{color:var(--mint);font:600 1rem/1 var(--sans)}

/* Narrative modules: the expanded and docked cards share one visual metaphor. */

/* Embed: two specialist groups converge around one shared board. */
.embed-map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,1.05fr) minmax(0,1fr);gap:clamp(18px,3vw,52px);align-items:center;min-height:0}
.people-cluster{position:relative;padding:clamp(14px,2vw,24px);border:1px solid rgba(var(--tdc-cyan-rgb),.18);border-radius:7px;background:linear-gradient(145deg,rgba(var(--tdc-cyan-rgb),.055),rgba(var(--tdc-cyan-rgb),.015))}
.people-cluster.-tdc{border-color:rgba(var(--tdc-green-rgb),.22);background:linear-gradient(145deg,rgba(var(--tdc-green-rgb),.065),rgba(var(--tdc-green-rgb),.018))}
.cluster-label{display:block;margin-bottom:clamp(12px,2vh,20px);color:#75a2af;font:500 .45rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.-tdc .cluster-label{color:var(--mint)}
.people-row{display:flex;justify-content:center;gap:clamp(10px,1.5vw,22px)}
.person{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;min-width:0;color:#9cb0b8;font:500 .5rem/1 var(--sans)}
.person i{position:relative;width:clamp(38px,3.5vw,58px);height:clamp(38px,3.5vw,58px);border:1px solid rgba(var(--tdc-cyan-rgb),.36);border-radius:50%;background:radial-gradient(circle at 50% 36%,rgba(var(--tdc-cyan-rgb),.16),rgba(5,24,36,.88) 64%);box-shadow:0 0 24px rgba(var(--tdc-cyan-rgb),.08);--glow:rgba(var(--tdc-cyan-rgb),.55)}
.person i::before{content:"";position:absolute;left:50%;top:23%;width:24%;height:24%;border:1px solid currentColor;border-radius:50%;color:#5bbbc4;transform:translateX(-50%)}
.person i::after{content:"";position:absolute;left:50%;bottom:20%;width:48%;height:25%;border:1px solid currentColor;border-bottom:0;border-radius:50% 50% 0 0;color:#5bbbc4;transform:translateX(-50%)}
.-tdc .person i{border-color:rgba(var(--tdc-green-rgb),.42);background:radial-gradient(circle at 50% 36%,rgba(var(--tdc-green-rgb),.18),rgba(5,24,36,.88) 64%);--glow:rgba(var(--tdc-green-rgb),.55)}
.-tdc .person i::before,.-tdc .person i::after{color:var(--mint)}
.person b{overflow:hidden;min-width:0;max-width:100%;white-space:nowrap;text-overflow:ellipsis;font-weight:500}
.shared-work{position:relative;display:grid;place-items:center;align-self:stretch;min-height:190px}
.shared-work::before,.shared-work::after{content:"";position:absolute;top:50%;width:42%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan));opacity:.55}
.shared-work::before{right:72%}.shared-work::after{left:72%;transform:scaleX(-1)}
.work-orbit{position:absolute;width:min(18vw,210px);aspect-ratio:1;border:1px solid rgba(var(--tdc-green-rgb),.19);border-radius:50%;animation:orbitturn 18s linear infinite}
.work-orbit.-two{width:min(14vw,165px);border-style:dashed;animation-direction:reverse;animation-duration:12s}
.work-orbit::before,.work-orbit::after{content:"";position:absolute;left:calc(50% - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px rgba(var(--tdc-green-rgb),.75)}
.work-orbit::after{top:-3.5px}
.work-orbit::before{bottom:-3.5px}
.work-orbit.-two::before,.work-orbit.-two::after{display:none}
.work-core{position:relative;z-index:2;width:min(16vw,184px);padding:clamp(16px,2vw,25px);border:1px solid rgba(var(--tdc-green-rgb),.34);border-radius:8px;background:linear-gradient(150deg,rgba(12,45,55,.98),rgba(6,25,38,.98));box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 36px rgba(var(--tdc-green-rgb),.08)}
.work-core>span{display:block;color:#73a0aa;font:500 .4rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.work-core>strong{display:block;margin-top:9px;color:#eef7f6;font:600 clamp(.8rem,1.15vw,1.15rem)/1.12 var(--sans);letter-spacing:-.035em}
.work-cycles{display:flex;gap:4px;margin-top:15px}.work-cycles i{height:3px;flex:1;border-radius:3px;background:var(--mint);opacity:.75}.work-cycles i:nth-child(2){background:var(--cyan)}.work-cycles i:nth-child(3){background:var(--blue)}
.shared-work>small{position:absolute;bottom:2%;color:#718a94;font:500 .4rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}.shared-work>small b{margin:0 5px;color:var(--mint)}
@keyframes orbitturn{to{transform:rotate(360deg)}}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .embed-map{grid-template-columns:auto 1fr auto;gap:4px;min-height:0}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .people-cluster{padding:0;border:0;background:none}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .cluster-label,
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .person b,
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .shared-work>small{display:none}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .people-row{gap:0}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .person{margin-left:-5px}.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .person:first-child{margin-left:0}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .person i{width:18px;height:18px;background:#0b2a38}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .shared-work{min-height:25px}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .shared-work::before{right:62%}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .shared-work::after{left:62%}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-orbit{width:35px}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-orbit.-two{width:26px}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-core{width:auto;min-width:65px;padding:6px 8px;text-align:center}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-core>span,
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-cycles{display:none}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-core>strong{margin:0;font-size:.43rem;line-height:1.05}

/* Connect: four systems move through one engineered pipeline. */
.t-sources .src-list{display:none}
.pipeline-view{position:relative;flex:1;display:grid;grid-template-columns:minmax(170px,.9fr) minmax(50px,.35fr) minmax(330px,1.65fr) minmax(50px,.35fr) minmax(170px,.9fr);align-items:center;gap:clamp(8px,1.4vw,22px);min-height:0;margin-top:12px}
.pipe-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pipe-sources>span{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:11px;border:1px solid rgba(var(--tdc-cyan-rgb),.18);border-radius:6px;background:rgba(var(--tdc-cyan-rgb),.035)}
.pipe-sources b{font:600 .62rem/1 var(--sans)}.pipe-sources small{color:#67818d;font:500 .38rem/1 var(--mono);text-transform:uppercase}
.source-icon{position:relative;grid-row:1/3;width:28px;height:28px;border:1px solid rgba(var(--tdc-cyan-rgb),.4);border-radius:50%}
.source-icon::before,.source-icon::after{content:"";position:absolute;inset:7px;border:1px solid var(--cyan);border-radius:2px}.source-icon::after{inset:11px 7px 7px;border-width:1px 0 0}
.source-icon.-people::before{inset:6px 9px 13px;border-radius:50%}.source-icon.-people::after{inset:14px 6px 5px;border-radius:50% 50% 2px 2px;border-width:1px}
.source-icon.-gear::before{inset:7px;border-radius:50%}.source-icon.-gear::after{inset:11px;border-radius:50%;background:var(--cyan)}
.source-icon.-doc::before{inset:6px 8px;border-radius:1px}.source-icon.-doc::after{inset:11px 11px 9px;border-width:1px 0}
.pipe-line{position:relative;height:2px;background:linear-gradient(90deg,rgba(var(--tdc-cyan-rgb),.12),var(--cyan),rgba(var(--tdc-green-rgb),.8));box-shadow:0 0 10px rgba(var(--tdc-cyan-rgb),.22)}
.pipe-line::before{content:"";position:absolute;right:0;width:7px;height:7px;border-top:1px solid var(--mint);border-right:1px solid var(--mint);transform:translateY(-3px) rotate(45deg)}
.pipe-line i{position:absolute;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:packet 2.2s linear infinite}
.pipe-line i:nth-child(2){animation-delay:-.55s}.pipe-line i:nth-child(3){animation-delay:-1.1s}.pipe-line i:nth-child(4){animation-delay:-1.65s}
@keyframes packet{from{left:0;opacity:0}15%,85%{opacity:1}to{left:100%;opacity:0}}
.pipe-process{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center}
.pipe-process>span{display:grid;justify-items:center;gap:6px;padding:clamp(14px,2vh,22px) 8px;border:1px solid rgba(var(--tdc-green-rgb),.2);border-radius:7px;background:linear-gradient(155deg,rgba(var(--tdc-green-rgb),.075),rgba(8,28,40,.55));text-align:center}
.pipe-process>span>i{display:grid;place-content:center;width:25px;height:25px;border:1px solid rgba(var(--tdc-green-rgb),.42);border-radius:50%;color:var(--mint);font:500 .4rem/1 var(--mono);font-style:normal}
.pipe-process b{font:600 .67rem/1 var(--sans)}.pipe-process small{color:#708791;font-size:.43rem}
.pipe-process>em{width:clamp(12px,1.5vw,25px);height:1px;background:linear-gradient(90deg,var(--mint),rgba(var(--tdc-green-rgb),.25))}
.pipe-output{display:grid;justify-items:center;gap:7px;text-align:center}
.stream-mark{display:flex;gap:3px}.stream-mark i{width:6px;height:28px;border-radius:4px;background:linear-gradient(var(--mint),rgba(var(--tdc-green-rgb),.18));animation:stream 1.5s ease-in-out infinite}.stream-mark i:nth-child(2){height:38px;animation-delay:-.4s}.stream-mark i:nth-child(3){height:22px;animation-delay:-.8s}
@keyframes stream{50%{transform:translateY(-5px);filter:brightness(1.35)}}
.pipe-output>small{color:#6d8691;font:500 .39rem/1 var(--mono);text-transform:uppercase}.pipe-output>strong{font:600 .85rem/1 var(--sans)}
.pipe-output>div{display:flex;gap:4px}.pipe-output>div span{padding:5px 6px;border:1px solid rgba(var(--tdc-green-rgb),.18);color:#82a098;font:500 .35rem/1 var(--mono);text-transform:uppercase}

/* Expanded pipeline: every source owns a visible route into the shared bus. */
.system-visual[data-step="2"] .pipeline-view{grid-template-columns:minmax(180px,.9fr) minmax(105px,.48fr) minmax(360px,1.65fr) minmax(60px,.32fr) minmax(180px,.85fr);gap:clamp(14px,1.7vw,28px);margin-top:20px}
.system-visual[data-step="2"] .pipe-sources{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);gap:12px;height:74%;align-self:center}
.system-visual[data-step="2"] .pipe-sources>span{padding:14px 16px}
.system-visual[data-step="2"] .pipe-sources b{font-size:.76rem}.system-visual[data-step="2"] .pipe-sources small{font-size:.46rem}
.system-visual[data-step="2"] .source-icon{width:34px;height:34px}
.system-visual[data-step="2"] .pipe-line:not(.-out){align-self:center;width:100%;height:74%;background:none;box-shadow:none}
.system-visual[data-step="2"] .pipe-line:not(.-out)::before{content:"";position:absolute;left:auto;right:18%;top:6%;bottom:6%;width:1px;height:auto;border:0;background:linear-gradient(transparent,var(--cyan) 12%,var(--mint) 88%,transparent);transform:none}
.system-visual[data-step="2"] .pipe-line:not(.-out)::after{content:"";position:absolute;left:82%;right:0;top:50%;height:1px;background:linear-gradient(90deg,var(--mint),rgba(var(--tdc-green-rgb),.3))}
.system-visual[data-step="2"] .pipe-line:not(.-out)>i{left:0;right:18%;width:auto;height:1px;border-radius:0;background:linear-gradient(90deg,rgba(var(--tdc-cyan-rgb),.16),var(--cyan),var(--mint));box-shadow:none;animation:none}
.system-visual[data-step="2"] .pipe-line:not(.-out)>i:nth-child(1){top:8%}.system-visual[data-step="2"] .pipe-line:not(.-out)>i:nth-child(2){top:36%}.system-visual[data-step="2"] .pipe-line:not(.-out)>i:nth-child(3){top:64%}.system-visual[data-step="2"] .pipe-line:not(.-out)>i:nth-child(4){top:92%}
.system-visual[data-step="2"] .pipe-line:not(.-out)>i::after{content:"";position:absolute;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--mint);box-shadow:0 0 13px var(--mint),0 0 25px rgba(var(--tdc-green-rgb),.48);animation:branchpacket 2.1s linear infinite;animation-delay:0s}
@keyframes branchpacket{from{left:0;opacity:0}18%,86%{opacity:1}to{left:100%;opacity:0}}
.system-visual[data-step="2"] .pipe-process>span{min-height:122px;padding:20px 10px}.system-visual[data-step="2"] .pipe-process b{font-size:.82rem}.system-visual[data-step="2"] .pipe-process small{font-size:.5rem}
.system-visual[data-step="2"] .pipe-output>strong{font-size:1.05rem}.system-visual[data-step="2"] .pipe-output>small{font-size:.46rem}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipeline-view{grid-template-columns:1fr;grid-template-rows:auto 10px auto 10px auto;gap:5px;margin-top:7px}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-sources{grid-template-columns:repeat(4,1fr);gap:4px}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-sources>span{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;place-items:center;min-width:0;padding:6px 2px}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-sources b{overflow:hidden;max-width:100%;font-size:.36rem;text-overflow:ellipsis;white-space:nowrap}.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-sources small{display:none}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .source-icon{grid-row:auto;width:19px;height:19px}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line{width:1px;height:10px;margin:auto;background:linear-gradient(var(--cyan),var(--mint))}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line::before,.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line i{display:none}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process{grid-template-columns:minmax(0,1fr) 6px minmax(0,1fr) 6px minmax(0,1fr);gap:3px}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process>span{min-width:0;padding:7px 1px}.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process>span>i,.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process small{display:none}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process>em{width:auto}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process b{overflow:hidden;max-width:100%;font-size:.4rem;text-overflow:ellipsis;white-space:nowrap}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-output{display:flex;justify-content:center;gap:7px}.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .stream-mark,.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-output>small,.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-output>div{display:none}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-output>strong{font-size:.58rem}

/*
 * Docked modules remain the exact same visual object.
 * Their internal canvases scale with the outer card instead of reflowing into
 * a second compact composition.
 */
.embed-map{
  position:absolute;
  left:50%;
  top:clamp(135px,22%,170px);
  width:960px;
  height:270px;
  min-height:270px;
  transform:translateX(-50%) scale(1);
  transform-origin:top center;
  transition:top .78s var(--ease),transform .78s var(--ease);
}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .embed-map{
  top:43px;
  width:960px;
  height:270px;
  min-height:270px;
  grid-template-columns:minmax(0,1fr) minmax(210px,1.05fr) minmax(0,1fr);
  gap:44px;
  transform:translateX(-50%) scale(.34);
}
/* Embed, expanded: the map is absolutely positioned so it can animate between
   the docked thumbnail and full size, but it was pinned to a fixed 960x270 —
   about half the tile. Anchor it top and bottom so it fills, and scale the
   contents with it. (The proof row keeps the grid's 1fr track, so it needs
   align-self to stay pinned to the bottom rather than stretching behind.) */
.system-visual[data-step="1"] .embed-map{
  container-type:inline-size;
  top:clamp(112px,20%,152px);
  bottom:clamp(74px,14%,104px);
  height:auto;
  min-height:0;
  width:min(94%,1340px);
  gap:clamp(26px,4vw,72px);
  transform:translateX(-50%);
}
.team-card__proof{align-self:end}
.system-visual[data-step="1"] .people-cluster{padding:clamp(22px,2.6vw,36px)}
.system-visual[data-step="1"] .cluster-label{margin-bottom:clamp(18px,2.6vh,28px);font-size:.56rem}
.system-visual[data-step="1"] .people-row{gap:clamp(14px,1.9vw,30px)}
.system-visual[data-step="1"] .person{gap:12px;font-size:.66rem}
.system-visual[data-step="1"] .person i{width:clamp(54px,4.8vw,82px);height:clamp(54px,4.8vw,82px)}
/* "Technology"/"Engineering" are wide enough that the fixed .66rem label was
   clipping to "Technolo…"/"Enginee…" as soon as the panel narrowed (same
   squeeze as the icon comment below). Let it wrap to a second line instead of
   truncating — a two-line label reads fine, a chopped word doesn't. Scoped to
   desktop only: the mobile compact card sizes this at 16-18px icons with its
   own tuned font-size, where truncation is the better tradeoff. */
@media(min-width:901px){
  .system-visual[data-step="1"] .person b{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:break-word;
    text-align:center;
    line-height:1.15;
  }
}
/* The icon size above is tuned against full viewport width, but the panel it
   sits in is only ~1/3 of .embed-map's own width, which can get squeezed
   independently of viewport width (e.g. by the left text column claiming more
   room) — around 900-1150px, and right at the 1700px text-column breakpoint,
   three avatars no longer actually fit and start overlapping. Cap the icon at
   whichever is smaller: the vw-tuned size above, or a size derived from the
   embed-map's own measured width — so it only ever shrinks below the original
   sizing when the panel is genuinely too narrow for it. */
@supports (width:1cqw){
  .system-visual[data-step="1"] .person i{
    width:min(clamp(54px,4.8vw,82px),clamp(28px,5.5cqw,999px));
    height:min(clamp(54px,4.8vw,82px),clamp(28px,5.5cqw,999px));
  }
  /* Shrink the label in step with the icon above so the two-line wrap (base
     rule) is only ever a fallback for the narrowest panels, not the norm. */
  .system-visual[data-step="1"] .person b{
    font-size:clamp(.42rem,0.85cqw,.66rem);
  }
}
.system-visual[data-step="1"] .shared-work{min-height:0}
.system-visual[data-step="1"] .work-orbit{width:min(24vw,300px)}
.system-visual[data-step="1"] .work-orbit.-two{width:min(18vw,225px)}
.system-visual[data-step="1"] .work-core{width:min(22vw,290px);padding:clamp(22px,2.6vw,36px)}
.system-visual[data-step="1"] .work-core>span{font-size:.5rem}
.system-visual[data-step="1"] .work-core>strong{margin-top:12px;font-size:clamp(1.05rem,1.6vw,1.6rem)}
.system-visual[data-step="1"] .work-cycles{margin-top:20px}
.system-visual[data-step="1"] .work-cycles i{height:4px}
.system-visual[data-step="1"] .person i{animation:personfloat 6s ease-in-out infinite,personglow 6s ease-in-out infinite}
.system-visual[data-step="1"] .person:nth-child(2) i{animation-delay:.9s,.9s}
.system-visual[data-step="1"] .person:nth-child(3) i{animation-delay:1.8s,1.8s}
@keyframes personfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes personglow{0%,100%{box-shadow:0 0 24px rgba(var(--tdc-cyan-rgb),.08)}50%{box-shadow:0 0 24px rgba(var(--tdc-cyan-rgb),.08),0 0 28px var(--glow)}}
/* clear of the proof row now that the map runs to the bottom of the tile */
.system-visual[data-step="1"] .shared-work>small{bottom:2%;font-size:.5rem;white-space:nowrap}
.system-visual[data-step="1"] .team-card__proof span{font-size:.62rem}
.system-visual[data-step="1"] .team-card__proof b{font-size:.72rem}

.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .people-cluster{
  padding:20px;
  border:1px solid rgba(var(--tdc-cyan-rgb),.18);
  border-radius:7px;
  background:linear-gradient(145deg,rgba(var(--tdc-cyan-rgb),.055),rgba(var(--tdc-cyan-rgb),.015));
}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .people-cluster.-tdc{
  border-color:rgba(var(--tdc-green-rgb),.22);
  background:linear-gradient(145deg,rgba(var(--tdc-green-rgb),.065),rgba(var(--tdc-green-rgb),.018));
}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .cluster-label,
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .person b,
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .shared-work>small{display:block}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .people-row{gap:18px}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .person{margin-left:0}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .person i{width:48px;height:48px}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .shared-work{min-height:210px}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .shared-work::before{right:72%}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .shared-work::after{left:72%}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-orbit{width:190px}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-orbit.-two{width:145px}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-core{width:170px;min-width:170px;padding:22px;text-align:left}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-core>span{display:block}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-cycles{display:flex}
.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-core>strong{margin-top:9px;font-size:1rem;line-height:1.12}

.pipeline-view{
  position:absolute;
  left:50%;
  top:72px;
  width:1000px;
  height:520px;
  min-height:520px;
  margin:0;
  grid-template-columns:190px 120px 390px 65px 170px;
  gap:16px;
  transform:translateX(-50%) scale(1);
  transform-origin:top center;
  transition:top .78s var(--ease),transform .78s var(--ease);
}
.system-visual[data-step="2"] .pipeline-view{
  top:72px;
  width:1000px;
  height:520px;
  min-height:520px;
  grid-template-columns:190px 120px 390px 65px 170px;
  gap:16px;
  margin:0;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipeline-view{
  top:35px;
  bottom:26px;
  width:620px;
  grid-template-columns:190px 40px 1fr;
  grid-template-rows:auto 1fr;
  gap:16px;
  margin:0;
  transform:translateX(-50%) scale(.24);
}
/* Output docks under the process row instead of trailing off to the right
   of it, so the composition reads top-to-bottom on a portrait tile and the
   stream stays legible at thumbnail scale instead of overflowing the tile. */
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-sources{
  grid-column:1;
  grid-row:1/3;
  grid-template-columns:1fr;
  grid-template-rows:repeat(4,1fr);
  gap:12px;
  align-self:stretch;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-sources>span{
  display:grid;
  grid-template-columns:32px 1fr;
  grid-template-rows:auto auto;
  place-items:initial;
  column-gap:9px;
  align-items:center;
  padding:14px 16px;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-sources b{
  overflow:visible;
  max-width:none;
  font-size:.76rem;
  text-overflow:clip;
  white-space:normal;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-sources small{display:block;font-size:.46rem}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .source-icon{grid-row:1/3;width:34px;height:34px}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line:not(.-out){
  grid-column:2;
  grid-row:1/3;
  align-self:stretch;
  width:100%;
  height:100%;
  margin:0;
  background:none;
  box-shadow:none;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line:not(.-out)::before{
  display:block;
  content:"";
  position:absolute;
  left:auto;
  right:18%;
  top:6%;
  bottom:6%;
  width:1px;
  height:auto;
  border:0;
  background:linear-gradient(transparent,var(--cyan) 12%,var(--mint) 88%,transparent);
  transform:none;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line:not(.-out)::after{
  content:"";
  position:absolute;
  left:82%;
  right:0;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,var(--mint),rgba(var(--tdc-green-rgb),.3));
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line:not(.-out)>i{
  display:block;
  left:0;
  right:18%;
  width:auto;
  height:1px;
  margin:0;
  border-radius:0;
  background:linear-gradient(90deg,rgba(var(--tdc-cyan-rgb),.16),var(--cyan),var(--mint));
  box-shadow:none;
  animation:none;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line:not(.-out)>i:nth-child(1){top:8%}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line:not(.-out)>i:nth-child(2){top:36%}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line:not(.-out)>i:nth-child(3){top:64%}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line:not(.-out)>i:nth-child(4){top:92%}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line:not(.-out)>i::after{
  content:"";
  position:absolute;
  top:-5px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 13px var(--mint),0 0 25px rgba(var(--tdc-green-rgb),.48);
  animation:branchpacket 2.1s linear infinite;
  animation-delay:0s;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process{
  grid-column:3;
  grid-row:1;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:0;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process>span{min-width:0;min-height:122px;padding:20px 10px}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process>span>i{display:grid}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process small{display:block;font-size:.5rem}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process>em{width:22px}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-process b{overflow:visible;max-width:none;font-size:.82rem;text-overflow:clip;white-space:normal}
@keyframes packety{from{top:0;opacity:0}15%,85%{opacity:1}to{top:100%;opacity:0}}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line.-out{
  display:block;
  grid-column:3;
  grid-row:2;
  width:2px;
  height:100%;
  margin:0 auto;
  background:linear-gradient(180deg,var(--cyan),rgba(var(--tdc-green-rgb),.8));
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line.-out::before{
  display:block;
  right:auto;
  left:50%;
  top:auto;
  bottom:0;
  transform:translate(-50%,3px) rotate(135deg);
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-line.-out i{
  display:block;
  left:50%;
  top:0;
  margin-left:-3px;
  animation-name:packety;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-output{
  grid-column:3;
  grid-row:2;
  align-self:end;
  display:grid;
  justify-items:center;
  gap:7px;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .stream-mark{display:flex}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-output>small{display:none}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-output>strong{font-size:1.05rem}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipe-output>div{display:flex}
.t-foundation.is-probing .ts-layer.-core{animation:trustpulse .7s ease}
@keyframes trustpulse{50%{border-color:var(--mint);box-shadow:0 0 28px rgba(var(--tdc-green-rgb),.25)}}

/* ── Trust: one governed platform, read as a stack ─────────────────────────
   Replaces the earlier core-and-four-satellites diagram, which showed a
   relationship but never said what the thing was. Layers read bottom-up
   (cloud → governed core → who uses it) with governance spanning all three,
   which is the actual claim: one platform, governed end to end. */
.trust-stack{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,.42fr);
  gap:clamp(12px,1.5vw,26px);
  margin:10px 0 0;
}
.ts-layers{display:grid;grid-template-rows:.85fr 1.5fr .85fr;gap:clamp(8px,1.1vh,14px);min-height:0}
.ts-layer{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  min-height:0;
  padding:clamp(12px,1.7vh,20px) clamp(14px,1.5vw,24px);
  border:1px solid rgba(var(--tdc-green-rgb),.16);
  border-radius:8px;
  background:linear-gradient(150deg,rgba(var(--tdc-green-rgb),.05),rgba(8,28,40,.5));
}
.ts-layer.-core{
  border-color:rgba(var(--tdc-green-rgb),.42);
  background:
    radial-gradient(520px circle at 30% 50%,rgba(var(--tdc-green-rgb),.14),transparent 70%),
    linear-gradient(150deg,rgba(14,52,60,.96),rgba(7,27,40,.96));
  box-shadow:0 16px 44px rgba(0,0,0,.28),inset 0 0 0 1px rgba(var(--tdc-green-rgb),.06);
}
.ts-tag{color:#7fa0a8;font:500 .44rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.ts-layer.-core .ts-tag{color:var(--mint)}
.ts-items{display:flex;flex-wrap:wrap;gap:7px}
.ts-items span{
  padding:8px 13px;
  border:1px solid rgba(var(--tdc-green-rgb),.2);
  border-radius:5px;
  background:rgba(var(--tdc-green-rgb),.05);
  color:#cfe2e2;
  font:600 .6rem/1 var(--sans);
}
.ts-core-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,2vw,32px);align-items:center}
.ts-domains{display:flex;flex-wrap:wrap;gap:6px}
.ts-domains span{
  padding:7px 11px;
  border-radius:4px;
  background:rgba(var(--tdc-green-rgb),.1);
  color:#e3f1ef;
  font:600 .56rem/1 var(--sans);
}
.ts-domains span:last-child{background:transparent;color:#84a4a6;font-weight:500}
.ts-core-metric{text-align:right;white-space:nowrap}
.ts-core-metric strong{display:block;color:#f0f8f7;font:600 clamp(1.5rem,2.6vw,2.5rem)/1 var(--sans);letter-spacing:-.045em}
.ts-core-metric small{display:block;margin-top:6px;color:#8fabaf;font:500 .48rem/1 var(--mono);text-transform:uppercase}
/* the connective tissue: each layer feeds the one above it */
.ts-layer:not(:last-child)::after{
  content:"";
  position:absolute;
  left:50%;bottom:calc(-1 * clamp(8px,1.1vh,14px) - 1px);
  width:1px;height:clamp(8px,1.1vh,14px);
  background:linear-gradient(180deg,rgba(var(--tdc-green-rgb),.5),rgba(var(--tdc-green-rgb),.12));
}
.ts-governance{
  display:flex;flex-direction:column;gap:clamp(8px,1.1vh,14px);
  min-height:0;
  padding:clamp(12px,1.7vh,20px) clamp(12px,1.2vw,18px);
  border:1px solid rgba(var(--tdc-cyan-rgb),.22);
  border-radius:8px;
  background:linear-gradient(170deg,rgba(var(--tdc-cyan-rgb),.08),rgba(8,28,40,.45));
}
.ts-gov-tag{color:var(--cyan);font:500 .44rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.ts-gov-list{display:grid;grid-template-rows:repeat(4,1fr);gap:clamp(6px,.9vh,11px);flex:1;min-height:0}
.ts-gov-list>div{
  display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;
  column-gap:10px;align-content:center;
  padding:clamp(8px,1.1vh,13px) clamp(9px,.8vw,13px);
  border-radius:6px;
  background:rgba(255,255,255,.028);
}
.ts-gov-list i{
  grid-row:1/3;align-self:center;
  display:grid;place-content:center;
  width:26px;height:26px;
  border:1px solid rgba(var(--tdc-green-rgb),.4);border-radius:50%;
  color:var(--mint);font-style:normal;font-size:.72rem;
}
.ts-gov-list b{color:#e6f2f1;font:600 .64rem/1 var(--sans)}
.ts-gov-list small{margin-top:4px;color:#8ba3ab;font:500 .5rem/1 var(--sans)}

[data-theme="light"] .ts-layer{border-color:rgba(30,112,135,.14);background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(226,240,243,.6))}
[data-theme="light"] .ts-layer.-core{
  border-color:rgba(18,165,140,.34);
  background:radial-gradient(520px circle at 30% 50%,rgba(18,165,140,.12),transparent 70%),linear-gradient(150deg,#fff,rgba(228,244,241,.96));
  box-shadow:0 14px 34px rgba(35,70,85,.12);
}
[data-theme="light"] .ts-tag{color:#5f7d88}
[data-theme="light"] .ts-items span{border-color:rgba(18,165,140,.24);background:rgba(18,165,140,.07);color:#17262f}
[data-theme="light"] .ts-domains span{background:rgba(18,165,140,.12);color:#12333a}
[data-theme="light"] .ts-domains span:last-child{background:transparent;color:#5f7d88}
[data-theme="light"] .ts-core-metric strong{color:#12262d}
[data-theme="light"] .ts-core-metric small{color:#5f7d88}
[data-theme="light"] .ts-governance{border-color:rgba(30,112,135,.18);background:linear-gradient(170deg,rgba(var(--tdc-cyan-rgb),.07),rgba(255,255,255,.75))}
[data-theme="light"] .ts-gov-list>div{background:rgba(18,165,140,.05)}
[data-theme="light"] .ts-gov-list b{color:#17262f}
[data-theme="light"] .ts-gov-list small{color:#5f7d88}

/* docked (non-active) states: keep it legible at thumbnail scale */
.system-visual:not([data-step="3"]) .ts-domains span:nth-child(n+4),
.system-visual:not([data-step="3"]) .ts-items span:nth-child(n+4){display:none}
.system-visual:not([data-step="3"]) .ts-core-metric small{display:none}
.system-visual:not([data-step="3"]) .ts-gov-list small{display:none}

/* Docked tile is a fraction of the step-3 stage size, so the two-column
   stack (with its 190px-min governance rail) and viewport-scaled type
   collide instead of shrinking to fit — that's the overlap bug. Rebuild it
   as one compact column for every step where the tile is small (i.e. not
   opening/settled at step 2-3), so nothing has to fight for width. */
.system-visual:not([data-step="2"]):not([data-step="3"]) .trust-stack{
  grid-template-columns:1fr;
  gap:7px;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-layers{
  grid-template-rows:auto auto auto;
  gap:7px;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-layer{
  padding:8px 10px;
  gap:6px;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-layer:not(:last-child)::after{
  bottom:-8px;
  height:7px;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-items span,
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-domains span{
  padding:4px 8px;
  font-size:.5rem;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-core-body{
  grid-template-columns:1fr;
  gap:5px;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-core-metric{
  text-align:left;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-core-metric strong{
  font-size:1.35rem;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-governance{
  padding:8px 10px;
  gap:6px;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-gov-list{
  grid-template-rows:none;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-gov-list>div{
  grid-template-columns:1fr;
  grid-template-rows:auto auto;
  justify-items:center;
  text-align:center;
  padding:6px 3px;
  gap:4px;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-gov-list i{
  grid-row:1;
  width:20px;
  height:20px;
  font-size:.58rem;
}
.system-visual:not([data-step="2"]):not([data-step="3"]) .ts-gov-list b{
  font-size:.48rem;
  line-height:1.15;
}

/* Connect: the composition was pinned to a fixed 1000x520 box, so on a wide
   dashboard it floated small in the middle and the block text was unreadable.
   Size it to the tile instead and lift the type with it. */
.system-visual[data-step="2"] .pipeline-view{
  top:180px;
  bottom:40px;
  width:min(97%,1500px);
  height:auto;
  min-height:0;
  /* keep the sum of the column minimums under the container width, or the last
     column ("Trusted stream") overflows and gets clipped by the tile. The
     bus columns can run narrower than before since the old .pipe-line bars
     they used to host are hidden at this step (replaced by .pipe-connectors). */
  grid-template-columns:minmax(160px,1fr) minmax(24px,.22fr) minmax(300px,1.7fr) minmax(20px,.18fr) minmax(150px,.9fr);
  gap:clamp(10px,1.5vw,30px);
}
/* .t-sources is a container (container-type:size, set above and in the
   mobile block below). Below ~650px it's too narrow for four source cards,
   three stage cards and the output block to share one row at a legible
   size — shrinking the grid tracks further just overflows card content into
   its neighbours. Below ~300px tall (the docked mobile dashboard), the row
   simply doesn't fit vertically. Either way, scale the whole composition
   down as a unit (same trick already used for the docked steps 3-6) instead
   of squeezing individual columns or rows. */
@supports (width:1cqw){
  /* Connect (normal width/height case): the source-card column has a fixed
     natural height (4 stacked cards); when the tile itself is short (a
     shallower viewport) there isn't always 270px+ left after the heading,
     subhead and tile-foot clearance. Shrink the whole diagram as a unit so
     it always fits instead of the cards overflowing past the tile-foot. */
  .system-visual[data-step="2"] .pipeline-view{
    transform:translateX(-50%) scale(min(1,max(.55,calc((100cqh - 220px)/270px))));
  }
  /* two separate queries rather than one "or" condition — broader support */
  @container (max-width:650px){
    .system-visual[data-step="2"] .pipeline-view{
      width:730px;
      height:450px;
      gap:14px;
      transform:translateX(-50%) scale(min(1,calc((100cqw - 24px)/730px),max(.1,calc((100cqh - 220px)/450px))));
    }
  }
  @container (max-height:300px){
    .system-visual[data-step="2"] .pipeline-view{
      width:730px;
      height:450px;
      gap:14px;
      transform:translateX(-50%) scale(min(1,calc((100cqw - 24px)/730px),max(.1,calc((100cqh - 220px)/450px))));
    }
  }
}
.system-visual[data-step="2"] .pipe-output>strong{white-space:normal;text-wrap:balance}
.system-visual[data-step="2"] .pipe-sources{gap:10px;height:auto}
.system-visual[data-step="2"] .pipe-sources>span{grid-template-columns:38px 1fr;column-gap:14px;padding:12px 16px}
.system-visual[data-step="2"] .pipe-sources b{font-size:.95rem}
.system-visual[data-step="2"] .pipe-sources small{font-size:.56rem}
.system-visual[data-step="2"] .pipe-process>span{min-height:170px;padding:26px 14px;gap:10px}
.system-visual[data-step="2"] .pipe-process>span>i{width:36px;height:36px;font-size:.52rem}
.system-visual[data-step="2"] .pipe-process b{font-size:1.05rem}
.system-visual[data-step="2"] .pipe-process small{font-size:.63rem}
.system-visual[data-step="2"] .pipe-output{gap:11px}
.system-visual[data-step="2"] .pipe-output>strong{font-size:1.35rem}
.system-visual[data-step="2"] .pipe-output>small{font-size:.56rem}
.system-visual[data-step="2"] .pipe-output>div span{padding:7px 9px;font-size:.46rem}
.system-visual[data-step="2"] .stream-mark i{width:8px;height:36px}
.system-visual[data-step="2"] .stream-mark i:nth-child(2){height:48px}
.system-visual[data-step="2"] .stream-mark i:nth-child(3){height:28px}

/* Connect — dynamic node-and-connector treatment for the enlarged pipeline.
   Source cards stack into a single column, stages get a pulsing ring badge,
   and the flat connector bars are replaced by a JS-routed SVG overlay
   (.pipe-connectors, drawn in index.redesign-3d.js) kept in sync on resize
   so the wiring always matches the actual rendered layout. */
.system-visual[data-step="2"] .pipe-sources{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}
.system-visual[data-step="2"] .pipe-sources>span,
.system-visual[data-step="2"] .pipe-process>span{
  border-radius:16px;
  border-color:rgba(var(--tdc-green-rgb),.2);
  background:linear-gradient(160deg,rgba(var(--tdc-green-rgb),.08),rgba(8,28,40,.4));
}
.system-visual[data-step="2"] .source-icon{animation:srcdrift 5.5s ease-in-out infinite}
.system-visual[data-step="2"] .pipe-sources>span:nth-child(2) .source-icon{animation-delay:.5s}
.system-visual[data-step="2"] .pipe-sources>span:nth-child(3) .source-icon{animation-delay:1s}
.system-visual[data-step="2"] .pipe-sources>span:nth-child(4) .source-icon{animation-delay:1.5s}
.system-visual[data-step="2"] .pipe-process>span{animation:stageglow 4.5s ease-in-out infinite}
.system-visual[data-step="2"] .pipe-process>span:nth-of-type(2){animation-delay:1.5s}
.system-visual[data-step="2"] .pipe-process>span:nth-of-type(3){animation-delay:3s}
.system-visual[data-step="2"] .pipe-process>span>i{animation:ringpulse 4.5s ease-in-out infinite}
.system-visual[data-step="2"] .pipe-process>span:nth-of-type(2)>i{animation-delay:1.5s}
.system-visual[data-step="2"] .pipe-process>span:nth-of-type(3)>i{animation-delay:3s}
.system-visual[data-step="2"] .pipe-line{opacity:0}
@keyframes srcdrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes stageglow{0%,100%{box-shadow:inset 0 0 0 1px rgba(var(--tdc-green-rgb),.14),0 0 0 0 rgba(var(--tdc-green-rgb),0)}45%{box-shadow:inset 0 0 0 1px rgba(var(--tdc-green-rgb),.5),0 0 26px -6px rgba(var(--tdc-green-rgb),.32)}}
@keyframes ringpulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(var(--tdc-green-rgb),.4)}45%{box-shadow:inset 0 0 0 1px rgba(var(--tdc-green-rgb),.9),0 0 14px rgba(var(--tdc-green-rgb),.4)}}

.pipe-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s}
.system-visual[data-step="2"] .pipe-connectors.is-ready{opacity:1}
.pc-base{fill:none;stroke:var(--mint);stroke-width:1;opacity:.16}
.pc-flow{fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(var(--tdc-green-rgb),.7));animation:pcflow 2.6s linear infinite}
.pc-node{fill:var(--mint);filter:drop-shadow(0 0 5px rgba(var(--tdc-green-rgb),.8));transform-box:fill-box;transform-origin:center;animation:pcnode 2.6s ease-in-out infinite}
@keyframes pcflow{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes pcnode{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.3)}}

/* Understand: one question checked through multiple analytical views. */
.insight-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}
.insight-panel{position:relative;display:flex;flex-direction:column;min-height:0;padding:10px 11px;border:1px solid rgba(var(--tdc-cyan-rgb),.14);border-radius:5px;background:rgba(var(--tdc-cyan-rgb),.025);overflow:hidden}
.insight-panel>span{display:flex;justify-content:space-between;gap:8px;color:#859aa3;font:500 .4rem/1 var(--mono);text-transform:uppercase}.insight-panel>span b{color:#d8e5e6;font-weight:500}
.insight-panel>span em{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border:1px solid rgba(var(--tdc-green-rgb),.3);border-radius:999px;background:rgba(var(--tdc-green-rgb),.08);color:var(--mint);font-style:normal;white-space:nowrap}
.insight-panel .tick-up{font-size:.9em;font-style:normal}
.insight-panel svg{flex:1;width:100%;min-height:28px;margin-top:6px;overflow:visible}.insight-panel svg path{vector-effect:non-scaling-stroke}.insight-panel .line{fill:none;stroke:var(--mint);stroke-width:1.7}.insight-panel .area{fill:rgba(var(--tdc-green-rgb),.1)}.insight-panel .band{fill:rgba(var(--tdc-cyan-rgb),.1)}
.insight-panel .chart-dot{fill:var(--mint);filter:drop-shadow(0 0 4px rgba(var(--tdc-green-rgb),.85))}
.chart-axis-y,.chart-axis-x,.mini-bars-axis{display:none}
.mini-bars{flex:1;display:flex;align-items:flex-end;gap:5px;padding-top:9px}.mini-bars i{position:relative;flex:1;background:linear-gradient(180deg,rgba(var(--tdc-cyan-rgb),.55),rgba(var(--tdc-cyan-rgb),.08));height:42%}.mini-bars i:nth-child(2){height:68%}.mini-bars i:nth-child(3){height:54%}.mini-bars i:nth-child(4){height:88%}.mini-bars i:nth-child(5){height:72%}.mini-bars i:nth-child(6){height:96%;background:linear-gradient(var(--mint),rgba(var(--tdc-green-rgb),.1))}
.mini-bars i b{display:none}
.driver-list{flex:1;display:grid;align-content:center;gap:12px;margin-top:10px}.driver-row{display:flex;align-items:center}.driver-list i{position:relative;flex:1;height:8px;border-radius:8px;background:rgba(var(--tdc-green-rgb),.08);font-style:normal}.driver-list i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:linear-gradient(90deg,var(--teal),var(--mint))}.driver-list b{position:absolute;z-index:2;left:4px;top:-11px;color:#a9babf;font:500 .4rem/1 var(--mono)}
.driver-list em{display:none;font-style:normal}
.driver-icon{display:none}
.t-chart .tile-foot b{display:none}

/* Act: each insight travels through an owner into an operational change. */
.action-workflows{flex:1;display:flex;flex-direction:column;gap:8px;margin-top:10px;min-height:0}
.workflow-lane{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(38px,.35fr) minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(var(--tdc-green-rgb),.15);border-radius:6px;background:linear-gradient(90deg,rgba(var(--tdc-cyan-rgb),.035),rgba(var(--tdc-green-rgb),.04));transition:border-color .25s,background .25s}
.workflow-lane:hover,.workflow-lane:focus-visible{border-color:rgba(var(--tdc-green-rgb),.42);background:linear-gradient(90deg,rgba(var(--tdc-cyan-rgb),.075),rgba(var(--tdc-green-rgb),.08));outline:none}
.workflow-signal,.workflow-owner{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:9px}
.workflow-signal>i,.workflow-owner>i{grid-row:1/3;display:grid;place-content:center;width:27px;height:27px;border:1px solid rgba(var(--tdc-cyan-rgb),.34);border-radius:50%;color:var(--cyan);font:500 .55rem/1 var(--mono);font-style:normal}.workflow-owner>i{border-color:rgba(var(--tdc-green-rgb),.4);color:var(--mint)}
.workflow-signal small,.workflow-owner small{color:#69838f;font:500 .36rem/1 var(--mono);text-transform:uppercase}.workflow-signal b,.workflow-owner b{font:600 .58rem/1.15 var(--sans)}
.workflow-route{position:relative;height:1px;background:linear-gradient(90deg,var(--cyan),var(--mint));font-style:normal}.workflow-route::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--mint);border-right:1px solid var(--mint);transform:rotate(45deg)}.workflow-route i{position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:packet 2s linear infinite}
.system-visual[data-step="4"] .insight-grid{gap:13px}.system-visual[data-step="4"] .insight-panel{padding:clamp(13px,1.3vw,20px)}
.system-visual[data-step="4"] .insight-panel>span{font-size:.58rem}.system-visual[data-step="4"] .insight-panel>span b{font-size:.72rem}
.system-visual[data-step="4"] .insight-panel>span em{padding:3px 10px;font-size:.9em}
.system-visual[data-step="4"] .driver-list{gap:19px}.system-visual[data-step="4"] .driver-list b{top:-15px;font-size:.62rem}

/* Step 4 (Understand, fully opened): the axis labels, per-value callouts and
   driver icons that image1 shows only read cleanly at this focused size —
   everywhere else (docked thumbnail, mobile grid) they stay hidden so the
   tiny panels don't overflow. */
.system-visual[data-step="4"] .insight-panel.-trend svg,
.system-visual[data-step="4"] .insight-panel.-forecast svg,
.system-visual[data-step="4"] .insight-panel.-trend .chart-axis-x,
.system-visual[data-step="4"] .insight-panel.-forecast .chart-axis-x{margin-left:clamp(26px,2.6vw,34px);width:calc(100% - clamp(26px,2.6vw,34px))}
.system-visual[data-step="4"] .chart-axis-y{
  display:flex;flex-direction:column;justify-content:space-between;
  position:absolute;left:clamp(13px,1.3vw,20px);top:clamp(34px,4vh,46px);bottom:clamp(30px,3.4vh,38px);
  color:#5e7580;font:500 .48rem/1 var(--mono);
}
.system-visual[data-step="4"] .chart-axis-x{
  display:flex;justify-content:space-between;margin-top:6px;
  color:#7f97a1;font:500 .5rem/1 var(--mono);text-transform:uppercase;
}
.system-visual[data-step="4"] .mini-bars{gap:9px;padding-top:26px}
.system-visual[data-step="4"] .mini-bars i b{
  display:block;position:absolute;left:50%;bottom:100%;margin-bottom:7px;
  transform:translateX(-50%);white-space:nowrap;color:var(--mint);
  font:600 .58rem/1 var(--mono);
}
.system-visual[data-step="4"] .mini-bars-axis{
  display:flex;justify-content:space-between;margin-top:8px;
  color:#7f97a1;font:500 .5rem/1 var(--mono);text-transform:uppercase;
}
.system-visual[data-step="4"] .mini-bars-axis span:last-child{color:var(--mint);font-weight:600}
.system-visual[data-step="4"] .driver-row{gap:12px}
.system-visual[data-step="4"] .driver-icon{
  display:flex;align-items:center;justify-content:center;flex:none;width:clamp(24px,2.4vw,30px);height:clamp(24px,2.4vw,30px);
  border:1px solid rgba(var(--tdc-green-rgb),.34);border-radius:50%;color:var(--mint);
  background:rgba(var(--tdc-green-rgb),.05);
}
.system-visual[data-step="4"] .driver-icon svg{width:clamp(13px,1.3vw,16.5px);height:clamp(13px,1.3vw,16.5px)}
.system-visual[data-step="4"] .driver-list em{
  display:block;position:absolute;z-index:2;right:4px;top:-15px;color:var(--mint);font:600 .62rem/1 var(--mono);
}
.system-visual[data-step="5"] .action-workflows{gap:8px;margin-top:clamp(14px,2vh,20px)}
.system-visual[data-step="5"] .workflow-lane{padding:clamp(10px,1.2vw,13px)}.system-visual[data-step="5"] .workflow-signal b,.system-visual[data-step="5"] .workflow-owner b{font-size:clamp(.66rem,.85vw,.88rem)}
.system-visual[data-step="5"] .workflow-stat strong{font-size:clamp(1.3rem,2.1vw,2rem)}
.system-visual[data-step="1"] .team-card .team-card__head,
.system-visual[data-step="2"] .t-sources .tile-head,
.system-visual[data-step="3"] .t-foundation .tile-head,
.system-visual[data-step="4"] .t-chart .tile-head,
.system-visual[data-step="5"] .t-outcomes .tile-head{font-size:.56rem}
.system-visual[data-step="2"] .t-sources .tile-foot,
.system-visual[data-step="3"] .t-foundation .tile-foot,
.system-visual[data-step="4"] .t-chart .tile-foot{font-size:.5rem}

/* ============================================================
   BUILD-UP — reveal the board group by group on scroll.
   ============================================================ */
.system-visual:not([data-step="0"]) .canvas-hint{opacity:0}

/*
   Steps 1-5: every revealed tile except the one currently opening into
   focus stays blurred, so the docked stack behind it reads as background
   rather than competing for attention. Step 6 (go live) resolves the
   whole board as one sharp picture, so it's excluded from the blur.
*/
.system-visual:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) .team-card,
.system-visual:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) .tile{
  filter:blur(6px);
}
.system-visual[data-step="1"] .team-card,
.system-visual[data-step="2"] .t-sources,
.system-visual[data-step="3"] .t-foundation,
.system-visual[data-step="4"] .t-chart,
.system-visual[data-step="5"] .t-outcomes{
  filter:none;
}

/*
   Each capability opens on one shared focus stage. On the following
   step it travels into its permanent dashboard slot while the next
   capability opens in the same focus area.
*/
.system-visual[data-step="1"] .t-sources,
.system-visual[data-step="2"] .t-foundation,
.system-visual[data-step="3"] .t-chart,
.system-visual[data-step="4"] .t-outcomes{
 left:3%;
  top:3%;
  width:94%;
  height:94%;
  z-index:20;
}

.system-visual[data-step="2"] .t-sources,
.system-visual[data-step="3"] .t-foundation,
.system-visual[data-step="4"] .t-chart,
.system-visual[data-step="5"] .t-outcomes{
  left:3%;
  top:3%;
  width:94%;
  height:94%;
  z-index:20;
  opacity:1;
  transform:none;
  border-color:rgba(var(--tdc-green-rgb),.42);
  background:
    radial-gradient(620px circle at 72% 30%,rgba(25,182,170,.09),transparent 62%),
    linear-gradient(160deg,rgba(9,31,44,.99),rgba(6,19,31,.985));
  backdrop-filter:blur(16px);
  box-shadow:0 28px 75px rgba(0,0,0,.34),0 0 45px rgba(var(--tdc-cyan-rgb),.08),inset 0 1px 0 rgba(255,255,255,.04);
}

/* Every capability's heading/subheading enlarges the same way, on the same
   step math, so the five cards read as one continuous statement while
   scrolling rather than five differently-styled ideas. */
.system-visual[data-step="1"] .team-card .card-heading,
.system-visual[data-step="2"] .t-sources .card-heading,
.system-visual[data-step="3"] .t-foundation .card-heading,
.system-visual[data-step="4"] .t-chart .card-heading,
.system-visual[data-step="5"] .t-outcomes .card-heading{
  display:block;
  font-size:clamp(1.6rem,2.6vw,2.6rem);
}
.system-visual[data-step="1"] .team-card .card-subhead,
.system-visual[data-step="2"] .t-sources .card-subhead,
.system-visual[data-step="3"] .t-foundation .card-subhead,
.system-visual[data-step="4"] .t-chart .card-subhead,
.system-visual[data-step="5"] .t-outcomes .card-subhead{
  display:block;
  font-size:clamp(.68rem,.95vw,.86rem);
}

/* Connect docks into the left rail. */
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .t-sources,
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .t-flow{
  z-index:2;
  opacity:1;
  transform:none;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .flow-bars i{opacity:1;transform:scaleY(1)}
.system-visual[data-step="2"] .t-sources{padding:clamp(22px,2.2vw,34px)}
.system-visual[data-step="2"] .t-sources .src-list{width:min(760px,82%);margin:clamp(20px,4vh,44px) auto 0}
.system-visual[data-step="2"] .t-sources .node{padding:clamp(10px,1.5vh,16px) 12px}
.system-visual[data-step="2"] .t-sources .node-name{font-size:clamp(.95rem,1.35vw,1.35rem)}

/* Trust opens, then docks with its supporting KPI strip. */
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .dash-status i{background:var(--mint);box-shadow:0 0 9px rgba(var(--tdc-green-rgb),.8)}
.system-visual:is([data-step="4"],[data-step="5"],[data-step="6"]) .t-foundation,
.system-visual:is([data-step="4"],[data-step="5"],[data-step="6"]) .t-kpis{
  z-index:2;
  opacity:1;
  transform:none;
}
.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .fm-cells i{opacity:1;transform:scale(1)}
.system-visual[data-step="3"] .t-foundation{padding:clamp(22px,2.2vw,34px)}
.system-visual[data-step="3"] .t-foundation .fnd-map{width:min(920px,92%);margin-inline:auto}

/* Understand opens, then docks beside the foundation. */
.system-visual:is([data-step="5"],[data-step="6"]) .t-chart{
  z-index:2;
  opacity:1;
  transform:none;
}
.system-visual:is([data-step="4"],[data-step="5"],[data-step="6"]) .query-chart path{stroke-dashoffset:0}
.system-visual[data-step="4"] .t-chart{padding:clamp(22px,2.2vw,34px)}
.system-visual[data-step="4"] .t-chart .query-chart{width:min(980px,94%);margin-inline:auto}

/* Act opens as a decision surface, then becomes the final right rail. */
.system-visual[data-step="5"] .t-outcomes{padding:clamp(22px,2.2vw,34px)}
.system-visual[data-step="5"] .t-outcomes .action-workflows{margin-top:clamp(14px,2vh,20px)}
.system-visual[data-step="5"] .t-outcomes .workflow-signal,
.system-visual[data-step="5"] .t-outcomes .workflow-owner{grid-template-columns:clamp(44px,4vw,58px) 1fr;grid-template-rows:auto auto auto;row-gap:2px}
.system-visual[data-step="5"] .t-outcomes .workflow-signal>i,
.system-visual[data-step="5"] .t-outcomes .workflow-owner>i{
  grid-row:1/4;
  width:clamp(28px,2.4vw,34px);
  height:clamp(28px,2.4vw,34px);
  font-size:clamp(.8rem,1vw,1rem);
  box-shadow:0 0 0 6px rgba(var(--tdc-cyan-rgb),.05);
}
.system-visual[data-step="5"] .t-outcomes .workflow-owner>i{box-shadow:0 0 0 6px rgba(var(--tdc-green-rgb),.05)}
.system-visual[data-step="5"] .t-outcomes .workflow-signal p{
  display:block;
  grid-column:2;
  margin:2px 0 0;
  color:#8098a3;
  font:400 clamp(.58rem,.72vw,.68rem)/1.3 var(--sans);
}
.system-visual[data-step="5"] .t-outcomes .wf-pill{
  display:inline-flex;
  grid-column:2;
  align-items:center;
  gap:5px;
  width:fit-content;
  margin-top:2px;
  padding:2px 8px;
  border:1px solid rgba(var(--tdc-green-rgb),.35);
  border-radius:999px;
  background:rgba(var(--tdc-green-rgb),.08);
  color:var(--mint);
  font:500 clamp(.54rem,.7vw,.62rem)/1.4 var(--sans);
}
.system-visual[data-step="5"] .t-outcomes .workflow-stat{
  align-items:center;
  gap:5px;
  min-width:clamp(52px,5vw,70px);
}
.system-visual[data-step="5"] .t-outcomes .workflow-stat i{
  display:grid;
  place-content:center;
  color:var(--mint);
  font-size:clamp(.9rem,1.2vw,1.15rem);
  font-style:normal;
}
.system-visual[data-step="5"] .t-outcomes .workflow-stat small{
  display:block;
  color:#7d929d;
  font:500 clamp(.42rem,.58vw,.5rem)/1 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.system-visual[data-step="5"] .t-outcomes .action-health{
  display:flex;
  margin-top:clamp(10px,1.8vh,16px);
  padding-top:clamp(10px,1.4vh,14px);
  border-top:1px solid rgba(var(--tdc-green-rgb),.14);
}
@supports (width:1cqw){
  /* Act: the 3 workflow lanes have a fixed natural (min-content) height; on a
     shallow viewport there isn't always enough room left after the heading,
     subhead and the health strip. Shrink the lane stack as a unit, anchored
     to its own top, instead of letting it overflow into the health strip. */
  .system-visual[data-step="5"] .t-outcomes .action-workflows{
    transform-origin:top center;
    transform:scale(min(1,calc((100cqh - 254px)/291px)));
  }
}
.system-visual[data-step="5"] .t-outcomes .ah-item{
  display:flex;
  flex:1;
  align-items:center;
  gap:10px;
  padding:0 clamp(10px,1.4vw,20px);
  border-left:1px solid rgba(var(--tdc-green-rgb),.14);
}
.system-visual[data-step="5"] .t-outcomes .ah-item:first-child{border-left:0;padding-left:0}
.system-visual[data-step="5"] .t-outcomes .ah-item>i{
  display:grid;
  place-content:center;
  width:clamp(30px,3vw,40px);
  height:clamp(30px,3vw,40px);
  border:1px solid rgba(var(--tdc-green-rgb),.32);
  border-radius:8px;
  color:var(--mint);
  font-style:normal;
  font-size:1rem;
}
.system-visual[data-step="5"] .t-outcomes .ah-item b{display:block;font:600 clamp(.9rem,1.25vw,1.2rem)/1.15 var(--sans)}
.system-visual[data-step="5"] .t-outcomes .ah-item small{display:block;margin-top:2px;color:#7d929d;font:500 clamp(.42rem,.55vw,.5rem)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.system-visual[data-step="5"] .t-outcomes .ah-item.-lead small{margin:0 0 3px}
.system-visual[data-step="5"] .t-outcomes .ah-item.-lead b{display:flex;align-items:center;gap:7px}
.system-visual[data-step="5"] .t-outcomes .ah-item.-lead b::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px rgba(var(--tdc-green-rgb),.8)}
.system-visual[data-step="6"] .t-outcomes{
  z-index:2;
  opacity:1;
  transform:none;
}
/* 6 Continue: the whole board comes online, tile by tile, then seals as delivered */
.system-visual[data-step="6"] .dashboard{border-color:rgba(var(--tdc-green-rgb),.42);box-shadow:0 46px 110px rgba(0,0,0,.5),0 0 0 1px rgba(var(--tdc-green-rgb),.34),0 0 80px rgba(var(--tdc-green-rgb),.16)}
.system-visual[data-step="6"] .tile{animation:golive .85s var(--ease) both}
.system-visual[data-step="6"] .t-sources{animation-delay:0s}
.system-visual[data-step="6"] .t-flow{animation-delay:.1s}
.system-visual[data-step="6"] .t-foundation{animation-delay:.2s}
.system-visual[data-step="6"] .t-kpis{animation-delay:.3s}
.system-visual[data-step="6"] .t-chart{animation-delay:.4s}
.system-visual[data-step="6"] .t-outcomes{animation-delay:.5s}
.system-visual[data-step="6"] .dash-status i{animation:livedot 2s ease-in-out infinite}
.system-visual[data-step="6"] .dash-sweep{animation:sweep 1.6s var(--ease) .35s both}
@keyframes golive{0%{border-color:var(--line);box-shadow:0 0 0 0 rgba(var(--tdc-green-rgb),0)}38%{border-color:rgba(var(--tdc-green-rgb),.7);box-shadow:0 0 0 1px rgba(var(--tdc-green-rgb),.5),0 0 28px rgba(var(--tdc-green-rgb),.34)}100%{border-color:rgba(var(--tdc-green-rgb),.24);box-shadow:0 0 0 0 rgba(var(--tdc-green-rgb),0)}}
@keyframes livedot{0%,100%{box-shadow:0 0 9px rgba(var(--tdc-green-rgb),.75)}50%{box-shadow:0 0 18px rgba(var(--tdc-green-rgb),1)}}
@keyframes sweep{0%{opacity:0;transform:translateX(-46%)}24%{opacity:1}100%{opacity:0;transform:translateX(46%)}}

/* ============================================================
   LIGHT THEME — same layout, inverted surfaces.
   ============================================================ */
/*
 * Final-board composition.
 * These are the same narrative modules, adapted to the proportions of their
 * permanent slots rather than reduced to thumbnail-sized replicas.
 */
/* On mid-size desktop screens the 44vw text column left too little room
   for the working-system dashboard, cramming its cards. Give that space
   back by narrowing the column toward ~25% of the viewport instead, with
   the headline scaled down to match. */
@media(min-width:901px) and (max-width:1700px){
  .story-scroll{width:min(25vw,340px)}
  .system-visual{left:min(27vw,360px)}
  h1,h2{font-size:clamp(2rem,3.2vw,3.2rem)}
  .intro{font-size:clamp(.76rem,.85vw,.86rem)}
  .actions{flex-direction:column}
  .story{padding:0 clamp(14px,3vw,14px)}
}
@media(min-width:901px){
  .team-card,.t-sources,.t-outcomes{container-type:size}

  .team-card{height:24%}
  .t-sources{
    top:26%;height:52%;
    --pipeline-top:35px;
    --pipeline-gap-x:20px;
    --pipeline-gap-bottom:34px;
    --pipeline-fit-scale:.26;
  }

  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .embed-map{
    top:55%;
    width:800px;
    height:180px;
    min-height:180px;
    grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);
    gap:26px;
    transform:translate(-50%,-50%) scale(.42);
    transform-origin:center;
  }
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .people-cluster{padding:12px}
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .cluster-label{margin-bottom:10px}
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .people-row{gap:13px}
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .person{gap:5px}
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .person i{width:36px;height:36px}
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .shared-work{min-height:150px}
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-orbit{width:132px}
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-orbit.-two{width:98px}
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-core{width:138px;min-width:138px;padding:13px}
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-core>strong{margin-top:6px;font-size:.82rem}
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-cycles{margin-top:9px}
  /* The docked pipeline (steps 3-6) fits itself to .t-sources via
     --pipeline-fit-scale, computed in index.redesign-3d.js from the panel's
     own measured clientWidth/clientHeight (ResizeObserver-driven — see
     fitPipeline there). That single JS-owned scale replaces what used to be
     a cqw/cqh @supports formula plus a fixed fallback scale here; .t-sources
     still supplies the --pipeline-top/-gap-x/-gap-bottom geometry the JS
     reads, so the CSS and JS stay driven by the same numbers. */
  .system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipeline-view{
    top:var(--pipeline-top,35px);
    transform:translateX(-50%) scale(var(--pipeline-fit-scale,.26));
    transform-origin:top center;
  }

  @supports (width:1cqw){
    .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .embed-map{
      transform:translate(-50%,-50%) scale(min(calc((100cqw - 28px)/800px),calc((100cqh - 48px)/180px)));
    }
  }

  .kpi{position:relative;overflow:hidden;isolation:isolate}
  .kpi::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:15px;
    right:12px;
    bottom:17%;
    height:24%;
    opacity:.42;
    background:
      linear-gradient(180deg,rgba(var(--tdc-green-rgb),.14),transparent),
      linear-gradient(90deg,transparent 0 8%,rgba(var(--tdc-green-rgb),.34) 8% 18%,transparent 18% 24%,rgba(var(--tdc-cyan-rgb),.26) 24% 39%,transparent 39% 45%,rgba(var(--tdc-green-rgb),.42) 45% 61%,transparent 61% 68%,rgba(var(--tdc-purple-rgb),.28) 68% 80%,transparent 80%);
    clip-path:polygon(0 80%,8% 68%,18% 72%,27% 46%,39% 53%,50% 27%,61% 35%,72% 12%,82% 25%,100% 0,100% 100%,0 100%);
    filter:drop-shadow(0 0 9px rgba(var(--tdc-green-rgb),.12));
  }
  .kpi:nth-child(2)::before{transform:scaleY(.72);transform-origin:bottom}
  .kpi:nth-child(3)::before{transform:scaleY(.9) scaleX(-1)}
  .kpi:nth-child(4)::before{transform:scaleY(.55);transform-origin:bottom}
  .kpi b,.kpi span{position:relative;z-index:1}
}

/* Continue-opening: the section the Continue dock item morphs into. Sits
   directly beneath the hero in normal flow. Its inner card starts out with
   the same rounded/bordered/glowing accent treatment as the dock button it
   grew from (see --settle below), and only sheds that origin styling once
   the visitor has scrolled on past it into the standard page design. */
.continue-opening{position:relative;background:var(--navy);padding:clamp(48px,9vh,100px) clamp(16px,5vw,56px) clamp(64px,11vh,120px)}
.continue-opening__inner{
  --settle:0;
  opacity:0;
  max-width:900px;margin:0 auto;
  padding:clamp(32px,5vw,64px) clamp(24px,4vw,56px);
  border-radius:calc(28px * (1 - var(--settle)));
  border:1px solid rgba(var(--tdc-green-rgb),calc(.5 - .5 * var(--settle)));
  background:rgba(var(--tdc-green-rgb),calc(.07 - .07 * var(--settle)));
  box-shadow:0 0 0 1px rgba(var(--tdc-green-rgb),calc(.16 - .16 * var(--settle))),0 30px 60px -28px rgba(var(--tdc-green-rgb),calc(.45 - .45 * var(--settle)));
  transition:border-radius .4s ease,border-color .4s ease,background-color .4s ease,box-shadow .4s ease;
}
/* The card's own opacity is set inline every frame during the morph (0 until
   the floating Continue surface has arrived and geometry matches, then
   crossfading to 1 as that surface fades out — see renderContinueMorph in
   the engine) so only one surface is ever visible at once. Its children stay
   independently hidden until .is-lit is added at the moment of landing/
   release, so the frame appears first and content "powers up" a beat after —
   never fully illuminated before the moving card actually lands. */
.continue-opening__inner .co-eyebrow,
.continue-opening__inner .co-heading,
.continue-opening__inner .co-intro,
.continue-opening__inner .actions,
.continue-opening__inner .co-foot{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease;
  pointer-events:none;
}
.continue-opening__inner.is-lit .co-eyebrow{opacity:1;transform:none;transition-delay:.02s}
.continue-opening__inner.is-lit .co-heading{opacity:1;transform:none;transition-delay:.1s}
.continue-opening__inner.is-lit .co-intro{opacity:1;transform:none;transition-delay:.18s}
.continue-opening__inner.is-lit .actions{opacity:1;transform:none;transition-delay:.26s;pointer-events:auto}
.continue-opening__inner.is-lit .co-foot{opacity:1;transform:none;transition-delay:.34s;pointer-events:auto}
.continue-opening .co-eyebrow{margin-bottom:clamp(20px,3vh,30px)}
.co-heading{margin:0 0 clamp(18px,2.6vh,26px);font-size:clamp(2.3rem,4.4vw,3.7rem);max-width:18ch}
.continue-opening .co-intro{max-width:560px}
.co-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(30px,4.5vh,46px)}
.co-scroll-hint{display:inline-flex;align-items:center;gap:10px;color:#657a87;font:500 .56rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.co-scroll-hint i{display:block;width:16px;height:16px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);animation:co-hint-bob 1.8s ease-in-out infinite}
@keyframes co-hint-bob{0%,100%{transform:rotate(45deg) translateY(-2px)}50%{transform:rotate(45deg) translateY(3px)}}
.continue-opening .replay-hero{padding:12px 4px}

/* Continue-float: the fixed overlay that visually detaches from the dock's
   Continue button and morphs into the opening card above, sharing its
   border/radius/glow/background so the two read as one element changing
   form. Position, size, rotation, opacity, blur and letter-spacing are all
   set directly from scroll progress every frame — deliberately with no CSS
   transition on any of those properties, so the surface tracks the gesture
   exactly (including reversing) instead of lagging behind it. It carries no
   semantics of its own — the dock button and the real section beneath it
   remain the only focusable/announced elements. */
.continue-float{position:fixed;z-index:90;top:0;left:0;pointer-events:none;perspective:1200px;will-change:transform,width,height}
.continue-float[hidden]{display:none}
/* Backstop independent of the JS-driven hidden/opacity/inline-style
   sequencing: once native scrolling owns the page, the floating source is
   forced invisible, non-interactive and stripped of its own border/fill/
   shadow purely via CSS, so it can never linger as a visible empty card
   above the real opening section regardless of any timing race. */
.is-released .continue-float{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.is-released .cf-surface{border-color:transparent;background:transparent;box-shadow:none}
/* While the floating surface is up, the dock button it launched from must
   vanish on the very same frame — otherwise the two cards are visibly
   superimposed for the length of any fade. A state class (toggled in JS the
   instant .continue-float is revealed/hidden) replaces the old inline-opacity
   fade, which let the source card linger through a 0-0.18 handoff window.
   transition:none overrides .narrative-dock button's own opacity .2s so the
   flip is instant rather than another, shorter, fade. */
.narrative-dock.is-continue-floating [data-continue-source]{opacity:0;pointer-events:none;transition:none}
/* The dock lives inside .app-shell and scrolls away with it once native
   scrolling is released, but hide it explicitly too so it can never linger
   or repaint at the top of the extended page during the handoff, and so
   reverse scrolling (which removes .is-released) is what brings it back. */
.is-released .narrative-dock{opacity:0;visibility:hidden;pointer-events:none}
.cf-surface{position:relative;width:100%;height:100%;border-radius:16px;border:1px solid rgba(var(--tdc-green-rgb),.5);background:rgba(var(--tdc-green-rgb),.07);box-shadow:0 10px 26px -14px rgba(var(--tdc-green-rgb),.45);overflow:hidden;transform-style:preserve-3d}
.cf-layer{position:absolute;inset:0}
.cf-from{display:flex;align-items:center;gap:9px;padding:10px 16px}
.cf-from .cf-icon{display:grid;place-content:center;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(var(--tdc-green-rgb),.45);color:var(--mint);background:rgba(var(--tdc-green-rgb),.08)}
.cf-from .cf-icon svg{width:14px;height:14px}
.cf-label{min-width:0}
.cf-letters{display:block;margin-bottom:2px;font:600 .8rem/1.15 var(--sans);color:#fff}
.cf-letters i{display:inline-block;font-style:normal;transform-style:preserve-3d}
.cf-label p{margin:0;color:#91a3ad;font-size:.55rem;line-height:1.35}
.cf-to{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,72px)}
.cf-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:500 .54rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8095a1}
.cf-eyebrow span{color:var(--mint)}.cf-eyebrow i{width:34px;height:1px;background:rgba(var(--tdc-green-rgb),.5)}
.cf-heading{margin:0 0 14px;font:600 clamp(1.8rem,3.6vw,3.2rem)/1.14 var(--sans);color:#edf6f5}
.cf-word{display:inline-block;transform-style:preserve-3d}
.cf-copy{margin:0;max-width:46ch;color:#8ca0aa;font-size:.9rem;line-height:1.6}
@media(max-width:900px){.co-foot{flex-direction:column;align-items:flex-start;gap:14px}}

.replay-hero{display:inline-flex;align-items:center;gap:8px;padding:12px 4px;border:0;background:none;color:#8095a1;font:500 .58rem/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:color .2s}
.replay-hero:hover,.replay-hero:focus-visible{color:var(--mint)}

/* ============================================================
   THE EXTENDED PAGE — everything below the Continue morph.
   Shares the hero's .eyebrow/.intro/.actions/.tags primitives so
   the whole page reads as one continuous design language, not a
   hand-off into a different visual system.
   ============================================================ */
.services-section,.capability-pending-section,.how-we-work-section,.tech-section,.constants-section,.closing-section{
  position:relative;
  padding:clamp(56px,9vh,110px) clamp(22px,6vw,74px);
}
/* Alternating chapter-surface rhythm — five genuinely distinct treatments
   (atmosphere / solid / purple / directional / deep-solid), not the same
   glow dialled up and down. Adjacent chapters never share a base tone or a
   boundary technique, so each one reads as a deliberate break rather than
   a continuation of the last.
   1 services   — green/cyan atmosphere (first energetic chapter)
   2 capability — clean solid navy, no gradient/glow at all
   3 how-we-work— restrained purple-led atmosphere
   4 tech       — directional cyan→green wash, thin two-colour hairline
   5 constants  — deep solid, unbordered/no-glow reset
   6 closing    — softer warm green atmosphere, glow contained to the CTA */
.services-section{
  background:
    radial-gradient(620px circle at 14% 88%,rgba(var(--pcr-green-rgb),.15),transparent 50%),
    radial-gradient(680px circle at 90% 6%,rgba(var(--pcr-cyan-rgb),.11),transparent 52%),
    var(--pcr-surface-atmospheric);
}
.capability-pending-section{
  background:var(--pcr-surface-solid);
  border-top:1px solid rgba(150,177,187,.14);
  box-shadow:inset 0 44px 74px -60px rgba(0,0,0,.55);
}
.how-we-work-section{
  background:
    radial-gradient(720px circle at 76% 38%,rgba(var(--pcr-purple-rgb),.17),transparent 50%),
    radial-gradient(560px circle at 8% 96%,rgba(var(--pcr-purple-rgb),.08),transparent 55%),
    var(--pcr-surface-purple);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(var(--pcr-purple-rgb),.55) 50%,transparent) 1;
}
.tech-section{
  background:
    linear-gradient(135deg,rgba(var(--pcr-cyan-rgb),.11),transparent 45%),
    linear-gradient(315deg,rgba(var(--pcr-green-rgb),.09),transparent 48%),
    var(--pcr-surface-directional);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(var(--pcr-green-rgb),.55),rgba(var(--pcr-cyan-rgb),.55)) 1;
}
.constants-section{
  background:var(--pcr-surface-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 60px 96px -70px rgba(0,0,0,.65);
}
.constants-section .pcr-problem-tile{background:var(--pcr-surface-raised)}
.closing-section{
  background:
    radial-gradient(680px circle at 20% 14%,rgba(var(--pcr-green-rgb),.13),transparent 52%),
    radial-gradient(600px circle at 84% 94%,rgba(var(--pcr-green-rgb),.06),transparent 58%),
    var(--pcr-surface-warm);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(var(--pcr-green-rgb),.5) 50%,transparent) 1;
}
/* Boundary signal: a short coloured sweep that travels once across a
   chapter's top edge the moment it becomes the active chapter (JS adds
   .pcr-boundary-lit via the existing chapter IntersectionObserver). Only
   the atmospheric chapters get this — solid chapters stay calm and stable,
   with no moving light of any kind. */
.services-section::after,.how-we-work-section::after,.tech-section::after,.closing-section::after{
  content:"";position:absolute;top:-1px;left:0;width:16%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--pcr-cyan-rgb),.9),transparent);
  opacity:0;pointer-events:none;
}
[data-chapter].pcr-boundary-lit::after{animation:pcrBoundarySweep 1.4s cubic-bezier(.22,.72,.18,1) forwards}
@keyframes pcrBoundarySweep{0%{left:-2%;opacity:0}14%{opacity:1}100%{left:88%;opacity:0}}
@media(prefers-reduced-motion:reduce){
  .services-section::after,.how-we-work-section::after,.tech-section::after,.closing-section::after{display:none}
}
.site-section__inner{max-width:1180px;margin:0 auto}
.capability-pending-section h2,.how-we-work-section h2,.tech-section h2,.constants-section h2,.closing-section>.site-section__inner h2{font-size:clamp(2.1rem,3.6vw,3.2rem);max-width:20ch}

.service-card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;padding:22px 20px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.02);
  --pcr-tilt-x:0deg;--pcr-tilt-y:0deg;--pcr-lift:0px;--pcr-glow-op:0;--pcr-glow-x:50%;--pcr-glow-y:50%;
  transform:translateY(var(--pcr-lift)) perspective(900px) rotateX(var(--pcr-tilt-x)) rotateY(var(--pcr-tilt-y));
  transition:border-color .25s,background .25s,transform .4s cubic-bezier(.22,.72,.18,1),box-shadow .3s ease;
}
.service-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(200px circle at var(--pcr-glow-x) var(--pcr-glow-y),rgba(var(--pcr-cyan-rgb),.14),transparent 65%);opacity:var(--pcr-glow-op);transition:opacity .4s ease}
.service-card b{color:#edf5f5;font:600 1rem/1.2 var(--sans)}
.service-card p{margin:0;color:#8ca0aa;font-size:.78rem;line-height:1.55;flex:1}
.service-card .tags{margin:0}
.service-card a{color:var(--mint);font:500 .58rem/1 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.service-card:hover,.service-card:focus-within{border-color:rgba(var(--pcr-green-rgb),.4);background:rgba(var(--pcr-green-rgb),.05);--pcr-lift:-3px;box-shadow:0 16px 34px -20px rgba(0,0,0,.5)}

.tech-note{margin:16px 0 0;color:#657a87;font-size:.68rem;line-height:1.5}

.site-footer{position:relative;background:#040c15;border-top:1px solid var(--line);padding:clamp(46px,7vh,72px) clamp(22px,6vw,74px) clamp(28px,4vh,40px)}
.site-footer__inner{max-width:1180px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:clamp(32px,5vh,48px);border-bottom:1px solid var(--line)}
.footer-brand .brand{margin-bottom:14px}
.footer-brand p{max-width:32ch;margin:0 0 16px;color:#657a87;font-size:.74rem;line-height:1.55}
.footer-iso{display:inline-flex;color:#657a87;font:500 .58rem/1 var(--mono);text-transform:uppercase;letter-spacing:.03em}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col span{color:#4c6169;font:500 .5rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px}
.footer-col a,.footer-col p{margin:0;color:#8ca0aa;font-size:.76rem;line-height:1.3;transition:color .2s}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--mint)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:clamp(20px,3vh,28px)}
.footer-bottom span{color:#5c7482;font-size:.68rem}
.footer-bottom nav{display:flex;gap:18px}
.footer-bottom nav a{color:#657a87;font:500 .62rem/1 var(--mono);text-transform:uppercase;letter-spacing:.03em;transition:color .2s}
.footer-bottom nav a:hover,.footer-bottom nav a:focus-visible{color:var(--mint)}
.footer-bottom .theme-toggle{width:34px;height:34px;font-size:.8rem}
@media(max-width:1100px){.footer-top{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}}

:root[data-theme="light"]{--ink:#17262f;--soft:#55697a;--line:rgba(28,62,84,.14);--heat:#12a58c;background:#e8eef2}
[data-theme="light"] body,[data-theme="light"] .app-shell{background:#e8eef2}
[data-theme="light"] .continue-opening{background:#e8eef2}
[data-theme="light"] .continue-opening__inner{border-color:rgba(16,160,132,calc(.4 - .4 * var(--settle)));background:rgba(16,160,132,calc(.06 - .06 * var(--settle)))}
[data-theme="light"] .co-scroll-hint{color:#5c7381}
[data-theme="light"] .cf-surface{border-color:rgba(16,160,132,.4);background:rgba(16,160,132,.06)}
[data-theme="light"] .cf-letters{color:#0e1c26}
[data-theme="light"] .cf-label p{color:#5c7482}
[data-theme="light"] .cf-heading{color:#12232c}
[data-theme="light"] .cf-copy{color:#5c7482}
[data-theme="light"] .services-section{background:radial-gradient(620px circle at 14% 85%,rgba(var(--pcr-green-rgb),.14),transparent 55%),radial-gradient(680px circle at 90% 6%,rgba(var(--pcr-cyan-rgb),.1),transparent 55%),var(--pcr-surface-atmospheric)}
[data-theme="light"] .capability-pending-section{
  background:var(--pcr-surface-solid);
  border-top:1px solid rgba(28,62,84,.12);
  box-shadow:inset 0 40px 64px -55px rgba(28,62,84,.08);
}
[data-theme="light"] .how-we-work-section{
  background:radial-gradient(720px circle at 76% 34%,rgba(var(--pcr-purple-rgb),.12),transparent 52%),var(--pcr-surface-purple);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(var(--pcr-purple-rgb),.4) 50%,transparent) 1;
}
[data-theme="light"] .tech-section{
  background:linear-gradient(135deg,rgba(var(--pcr-cyan-rgb),.09),transparent 48%),linear-gradient(315deg,rgba(var(--pcr-green-rgb),.08),transparent 50%),var(--pcr-surface-directional);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(var(--pcr-green-rgb),.45),rgba(var(--pcr-cyan-rgb),.45)) 1;
}
[data-theme="light"] .constants-section{
  background:var(--pcr-surface-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 50px 76px -60px rgba(28,62,84,.1);
}
[data-theme="light"] .constants-section .pcr-problem-tile{background:var(--pcr-surface-raised)}
[data-theme="light"] .closing-section{
  background:radial-gradient(680px circle at 18% 16%,rgba(var(--pcr-green-rgb),.11),transparent 55%),var(--pcr-surface-warm);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(var(--pcr-green-rgb),.4) 50%,transparent) 1;
}
[data-theme="light"] .service-card{background:rgba(255,255,255,.55);border-color:rgba(28,62,84,.14)}
[data-theme="light"] .service-card::before{background:radial-gradient(200px circle at var(--pcr-glow-x) var(--pcr-glow-y),rgba(var(--pcr-cyan-rgb),.16),transparent 65%)}
[data-theme="light"] .service-card:hover,[data-theme="light"] .service-card:focus-within{background:rgba(var(--pcr-green-rgb),.1);box-shadow:0 16px 34px -20px rgba(28,62,84,.22)}
[data-theme="light"] .service-card b{color:#16232b}
[data-theme="light"] .service-card p,[data-theme="light"] .tech-note,[data-theme="light"] .footer-col a,[data-theme="light"] .footer-col p,[data-theme="light"] .footer-brand p{color:#5c7482}
[data-theme="light"] .site-footer{background:#dde8ec}
[data-theme="light"] .replay-hero{color:#5c7381}
[data-theme="light"] .replay-hero:hover,[data-theme="light"] .replay-hero:focus-visible{color:#0f9c82}
[data-theme="light"] .grain{opacity:.02}
[data-theme="light"] .site-header{background:linear-gradient(180deg,rgba(232,238,242,.92),rgba(232,238,242,.35));border-bottom-color:rgba(28,62,84,.1)}
[data-theme="light"] .desktop-nav{color:#4c6070}[data-theme="light"] .desktop-nav a:hover{color:#0e1c26}
[data-theme="light"] .nav-cta{border-color:rgba(28,62,84,.24)}
[data-theme="light"] .theme-toggle{border-color:rgba(28,62,84,.22);color:#17262f}[data-theme="light"] .theme-toggle:hover{background:rgba(28,62,84,.05)}
[data-theme="light"] .story-scroll{background:linear-gradient(90deg,rgba(232,238,242,.99) 0%,rgba(232,238,242,.9) 62%,rgba(232,238,242,.42) 85%,transparent)}
[data-theme="light"] .eyebrow{color:#5c7381}[data-theme="light"] .eyebrow span{color:#0f9c82}[data-theme="light"] .eyebrow i{background:rgba(16,160,132,.5)}
[data-theme="light"] h1 em,[data-theme="light"] h2 em{color:#7c95a1}
[data-theme="light"] .tags li{border-color:rgba(28,62,84,.18);color:#5c7381}
[data-theme="light"] .credentials span{color:#5c7381}
[data-theme="light"] .actions .primary{background:#12303a;color:#eef6f5}[data-theme="light"] .actions .primary span{color:#5fd0b3}
[data-theme="light"] .actions .secondary{border-color:rgba(28,62,84,.24)}
[data-theme="light"] .inline-link{color:#16303c;border-bottom-color:rgba(16,160,132,.5)}
[data-theme="light"] .visual-stage{background:radial-gradient(circle at 74% 42%,rgba(18,165,140,.12),transparent 42%),linear-gradient(120deg,#eef3f6 18%,#e2ebef 68%,#eef3f6)}
[data-theme="light"] .visual-stage::after{background:linear-gradient(90deg,rgba(232,238,242,.94) 0%,rgba(232,238,242,.3) 24%,transparent 40%)}
[data-theme="light"] .dashboard{background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(238,244,247,.72));border-color:rgba(28,62,84,.16);box-shadow:0 40px 90px rgba(30,60,90,.16),inset 0 1px 0 rgba(255,255,255,.6)}
[data-theme="light"] .dash-bar{background:rgba(255,255,255,.55);border-bottom-color:rgba(28,62,84,.12)}
[data-theme="light"] .db-title{color:#21323e}
[data-theme="light"] .dash-status{color:#4c6070}[data-theme="light"] .dash-status .ds-detail{color:#6c8492}
[data-theme="light"] .dash-body{background-image:linear-gradient(rgba(40,95,115,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(40,95,115,.06) 1px,transparent 1px)}
[data-theme="light"] .tile{background:linear-gradient(160deg,rgba(255,255,255,.74),rgba(244,249,251,.6));border-color:rgba(28,62,84,.12)}
[data-theme="light"] .tile-head,[data-theme="light"] .fm-label,[data-theme="light"] .node-label,[data-theme="light"] .kpi span,[data-theme="light"] .tile-foot{color:#647d8b}
[data-theme="light"] .tile-head b,[data-theme="light"] .tile-foot b{color:#12a58c}
[data-theme="light"] .node-name,[data-theme="light"] .kpi b,[data-theme="light"] .flow-top b,[data-theme="light"] .card-heading,[data-theme="light"] .insight-panel>span b{color:#17262f}
[data-theme="light"] .card-subhead,[data-theme="light"] .workflow-signal p{color:#5f7686}
[data-theme="light"] .workflow-stat small,[data-theme="light"] .ah-item small{color:#6c8492}
[data-theme="light"] .wf-pill,[data-theme="light"] .insight-panel>span em{border-color:rgba(18,165,140,.4);background:rgba(18,165,140,.08);color:#0f9c82}
[data-theme="light"] .driver-icon{border-color:rgba(18,165,140,.4);background:rgba(18,165,140,.05);color:#0f9c82}
[data-theme="light"] .chart-axis-y,[data-theme="light"] .chart-axis-x,[data-theme="light"] .mini-bars-axis{color:#6c8492}
[data-theme="light"] .mini-bars-axis span:last-child,[data-theme="light"] .mini-bars i b{color:#0f9c82}
[data-theme="light"] .workflow-stat i,[data-theme="light"] .ah-item>i{border-color:rgba(18,165,140,.4);color:#0f9c82}
[data-theme="light"] .ah-item{border-left-color:rgba(28,62,84,.14)}
[data-theme="light"] .ah-item.-lead b::after{background:#0f9c82;box-shadow:0 0 8px rgba(15,156,130,.5)}
[data-theme="light"] .query-chart{border-bottom-color:rgba(28,62,84,.14)}[data-theme="light"] .query-chart>i{background:rgba(18,165,140,.16)}[data-theme="light"] .query-chart path{stroke:#0f9c82}
[data-theme="light"] .canvas-hint .ch-t{color:#0f8f7a}[data-theme="light"] .canvas-hint .ch-s{color:#42606d}
[data-theme="light"] .canvas-hint .ch-ring{border-color:rgba(18,165,140,.75);background:radial-gradient(circle,rgba(18,165,140,.14),rgba(18,165,140,.03) 70%);box-shadow:0 0 30px rgba(18,165,140,.18),inset 0 0 20px rgba(18,165,140,.07)}
[data-theme="light"] .canvas-hint .ch-ring::after{border-color:rgba(18,165,140,.5)}
/* The pointer glow sits above the tiles (z-index 9). On dark, screen blending
   lifts it subtly; on light, multiply turned it into a grey-green disc dragged
   over the content — so it is off in light mode. */
[data-theme="light"] .dash-glow{display:none}
[data-theme="light"] .node:hover,[data-theme="light"] .node:focus-visible{background:rgba(18,165,140,.1)}
[data-theme="light"] .node:hover .node-name,[data-theme="light"] .node:focus-visible .node-name{color:#0e1c26}
[data-theme="light"] .node:hover .node-dot,[data-theme="light"] .node:focus-visible .node-dot{box-shadow:0 0 15px rgba(18,165,140,.5)}
[data-theme="light"] .fm-cells i:hover{box-shadow:0 0 0 1px rgba(18,165,140,.85),0 0 9px rgba(18,165,140,.4)}
[data-theme="light"] .t-chart:hover .query-chart>i,[data-theme="light"] .t-chart:focus-visible .query-chart>i{background:rgba(18,165,140,.34)}
[data-theme="light"] .team-card{
  color:#17262f;
  border-color:rgba(18,165,140,.22);
  background:
    radial-gradient(420px circle at 50% 42%,rgba(var(--tdc-cyan-rgb),.08),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(232,242,245,.9));
  box-shadow:0 24px 58px rgba(35,70,85,.13),inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="light"] .person,
[data-theme="light"] .work-core>strong{color:#17262f}
[data-theme="light"] .people-cluster{
  border-color:rgba(30,112,135,.15);
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(224,239,243,.58));
}
[data-theme="light"] .people-cluster.-tdc{
  border-color:rgba(18,165,140,.2);
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(218,242,236,.62));
}
[data-theme="light"] .person i,
[data-theme="light"] .-tdc .person i{
  background:radial-gradient(circle at 50% 36%,rgba(18,165,140,.14),rgba(244,250,251,.96) 66%);
  box-shadow:0 0 18px rgba(18,165,140,.08);
}
/* The client side was cyan while the rest of the dashboard is mint, which read
   as a stray blue tint on light. Same hue family both sides; the two groups stay
   distinguishable by label and tint strength. */
[data-theme="light"] .people-cluster.-client{
  border-color:rgba(18,165,140,.14);
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(232,245,243,.6));
}
[data-theme="light"] .-client .person i{border-color:rgba(18,165,140,.28)}
[data-theme="light"] .-client .person i::before,
[data-theme="light"] .-client .person i::after{color:#12a58c}
[data-theme="light"] .-client .cluster-label{color:#5f8a86}
[data-theme="light"] .work-core{
  border-color:rgba(18,165,140,.3);
  background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(226,242,242,.96));
  box-shadow:0 14px 34px rgba(35,70,85,.13),0 0 28px rgba(18,165,140,.07);
}
[data-theme="light"] .pipe-sources>span,
[data-theme="light"] .pipe-process>span{
  border-color:rgba(30,112,135,.16);
  background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(224,239,243,.68));
}
[data-theme="light"] .pipe-sources b,
[data-theme="light"] .pipe-process b,
[data-theme="light"] .pipe-output>strong{color:#17262f}
[data-theme="light"] .analysis-cell,
[data-theme="light"] .workflow-lane{
  border-color:rgba(30,112,135,.14);
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(231,242,245,.62));
}
[data-theme="light"] .workflow-lane b,
[data-theme="light"] .analysis-cell b{color:#17262f}
[data-theme="light"] .kpi::before{opacity:.25}
[data-theme="light"] .mobile-menu{background:rgba(236,242,245,.98)}
[data-theme="light"] .narrative-dock{background:rgba(236,242,245,.94);border-top-color:rgba(28,62,84,.12)}
[data-theme="light"] .narrative-dock .dock-num-text{color:#8398a6}[data-theme="light"] .narrative-dock button.is-active .dock-num-text{color:#12a58c}[data-theme="light"] .narrative-dock b{color:#3c505d}[data-theme="light"] .narrative-dock p{color:#647d8b}
[data-theme="light"] .narrative-dock button{border-color:rgba(28,62,84,.1);background:rgba(255,255,255,.5)}[data-theme="light"] .narrative-dock button:hover,[data-theme="light"] .narrative-dock button:focus-visible{border-color:rgba(28,62,84,.22);background:rgba(255,255,255,.8)}
[data-theme="light"] .narrative-dock .dock-icon{border-color:rgba(18,165,140,.3);background:rgba(18,165,140,.05)}
[data-theme="light"] .narrative-dock i{color:#8398a6}
[data-theme="light"] .narrative-dock button.is-active{border-color:rgba(18,165,140,.45);background:rgba(18,165,140,.09)}
[data-theme="light"] .narrative-dock button.is-active b{color:#0e1c26}[data-theme="light"] .narrative-dock button.is-active p{color:#3c505d}
[data-theme="light"] .narrative-dock button.is-active i{color:#0f9c82}

.narrative-dock{position:absolute;z-index:60;left:0;right:0;bottom:0;height:92px;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;padding:10px 14px;border-top:1px solid var(--line);background:rgba(4,12,21,.94);backdrop-filter:blur(18px)}.narrative-dock button{position:relative;min-width:0;display:flex;align-items:center;gap:9px;padding:10px clamp(10px,1.1vw,16px);border:1px solid rgba(255,255,255,.08);border-radius:16px;outline:0;background:rgba(255,255,255,.02);color:#6d8290;text-align:left;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s,opacity .2s}.narrative-dock button:hover,.narrative-dock button:focus-visible{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.045)}.narrative-dock button.is-active{border-color:rgba(var(--tdc-green-rgb),.5);background:rgba(var(--tdc-green-rgb),.07);box-shadow:0 0 0 1px rgba(var(--tdc-green-rgb),.16),0 10px 26px -14px rgba(var(--tdc-green-rgb),.45)}.narrative-dock span{display:none}.narrative-dock .dock-num-text{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;font:600 .8rem/1 var(--mono);color:#6d8290;transition:color .25s,filter .2s}.narrative-dock button.is-active .dock-num-text{color:var(--mint)}.narrative-dock .dock-icon{display:grid;place-content:center;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(var(--tdc-green-rgb),.22);color:#6d8290;background:rgba(255,255,255,.02);transition:color .25s,border-color .25s,background .25s,filter .2s}.narrative-dock .dock-icon svg{width:14px;height:14px}.narrative-dock button.is-active .dock-icon{color:var(--mint);border-color:rgba(var(--tdc-green-rgb),.45);background:rgba(var(--tdc-green-rgb),.08)}.narrative-dock div{min-width:0;flex:1}.narrative-dock b{display:block;margin-bottom:2px;color:#a8b7bf;font:600 .8rem/1.15 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.narrative-dock p{margin:0;color:#657a87;font-size:.55rem;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.narrative-dock i{flex:none;width:14px;font-style:normal;color:#4c6169;text-align:center}.narrative-dock i::before{content:'›';font:600 1.15rem/1 var(--sans)}.narrative-dock button.is-active b{color:#fff}.narrative-dock button.is-active p{color:#91a3ad}.narrative-dock button.is-active i{color:var(--mint)}
/* Gesture-gated stage loading: the destination button dims, then gains a thin
   conic progress ring and rising brightness as its tween plays out, so the
   dock itself visibly "resolves" over the transition rather than snapping to
   active. Purely additive over .is-active, which still governs the settled
   look once --load reaches 1. */
.narrative-dock button.is-target{--load:0;opacity:calc(.58 + var(--load) * .42)}
.narrative-dock button.is-target::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from -90deg,var(--mint) calc(var(--load) * 360deg),transparent 0deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.narrative-dock button.is-target .dock-num-text,.narrative-dock button.is-target .dock-icon{filter:brightness(calc(1 + var(--load) * .4))}
@media(max-height:760px) and (min-width:901px){.experience{bottom:78px}.narrative-dock{height:78px}.story__inner{transform:scale(.9);transform-origin:left center}.narrative-dock button{padding-block:12px}}
@media(max-width:900px){.app-shell{min-height:0}.site-header{height:68px;padding:0 20px}.brand{font-size:.82rem}.desktop-nav,.nav-cta{display:none}.theme-toggle{width:44px;height:44px}.menu-toggle{display:grid;margin-left:auto;width:44px;height:44px;padding:11px;place-content:center;gap:6px;border:0;background:transparent;color:#fff}.menu-toggle i{display:block;width:22px;height:1px;background:currentColor;transition:.25s}.menu-toggle[aria-expanded=true] i:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}.mobile-menu{display:block;position:absolute;z-index:-1;inset:68px 0 auto;padding:28px 20px;background:rgba(7,17,31,.98);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-10px);transition:.25s}.mobile-menu.is-open{opacity:1;visibility:visible;transform:none}.mobile-menu nav{display:grid}.mobile-menu a{padding:15px 0;border-bottom:1px solid var(--line);font:500 1rem/1 var(--sans)}.experience{inset:68px 0 84px}.story-scroll{width:100%;background:linear-gradient(0deg,rgba(6,17,30,1) 0%,rgba(6,17,30,1) 45%,transparent 60%)}.story{padding:0 35px 0 20px;align-items:flex-end}.story__inner{padding-bottom:40px}.system-visual{inset:14px 3vw 60% 3vw}.dash-body{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(5,1fr);gap:7px;padding:8px}.team-card{grid-column:1/7;grid-row:1/6;height:24%;padding:13px;gap:9px;overflow:hidden}.team-card,.t-sources{container-type:size}.card-heading{display:block}.team-card .card-subhead,.team-card__proof{display:none}.team-card .card-heading{font-size:1.25rem}.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .embed-map{top:50%;width:min(94%,800px);height:min(90%,180px);min-height:0;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;transform:translate(-50%,-50%) scale(.16);transform-origin:center}.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .people-cluster{padding:8px}.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .shared-work{min-height:30px}.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-orbit{width:40px}.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-orbit.-two{width:30px}.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-core{min-width:60px;padding:6px 8px}.system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .work-core>strong{margin:0;font-size:.42rem;line-height:1.05}.system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipeline-view{top:35px;transform:translateX(-50%) scale(.08);transform-origin:top center}.t-sources{grid-column:1/3;grid-row:2/5}.t-flow{grid-column:1/3;grid-row:5/6}.t-foundation{grid-column:3/7;grid-row:2/4}.t-kpis{grid-column:3/7;grid-row:4/5}.t-chart{grid-column:3/7;grid-row:5/6}.t-outcomes{display:none}.dash-status .ds-detail{display:none}.narrative-dock{height:84px;overflow-x:auto;grid-template-columns:repeat(7,minmax(150px,1fr));scrollbar-width:none}.narrative-dock::-webkit-scrollbar{display:none}.narrative-dock button{padding:13px 12px}.narrative-dock p{font-size:.52rem}h1,h2{font-size:clamp(2.4rem,9.5vw,3.6rem)}}
/* The dash-body grid-column/grid-row assignments above never actually
   place anything: every .tile (and .team-card) stays position:absolute
   with left/top/width/height percentages inherited from the desktop
   3-column bento, and that's what really positions them — grid placement
   on an out-of-flow box only matters when its own inset properties are
   auto, which they never are here. The practical effect is a shrunk copy
   of the desktop layout, and at the one spot where two docked tiles share
   a column (.team-card above .t-sources) their boxes actually overlap:
   .team-card's mobile height (24%) runs past .t-sources's top (20%).
   Rather than patch that one seam, give the compact board an arrangement
   sized for what it actually has to show: a single full-width column, with
   .t-flow and .t-kpis (decorative strips with no room to be legible here)
   dropped so the four capability panels can each get enough height to
   stay readable. */
@media(max-width:900px){
  /* .system-visual's own height (inset:...60%..., set above) is left as
     the safe default here — it's tuned against the shortest phones, where
     .story-scroll's text sits close enough behind the board that giving
     the board more height runs it down into that text (that text is
     bottom-anchored within the full hero height, independent of the
     board's own height). Taller viewports get more room from the
     min-height tier further down instead. */
  .t-flow,.t-kpis{display:none}
  .team-card,.t-sources,.t-foundation,.t-chart{left:2%;width:96%}
  .team-card{top:1%;height:12%}
  .t-sources{top:14.5%;height:46%}
  .t-foundation{top:62%;height:18%}
  .t-chart{top:81.5%;height:18%}
  /* The embedded-delivery diagram (a handful of small avatar icons) has no
     room to sit under its own heading at this height without colliding
     with it — the heading alone still carries "one team around the work"
     at this size, so drop the diagram rather than shrink it further. */
  .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .embed-map{display:none}
  /* Same problem, worse: the trust-stack's 3 layers and the insight-grid's
     4 mini-charts are built for a docked tile several times this tall (see
     the desktop .t-foundation/.t-chart height:58%/48% of a much taller
     dash-body) — even the compact single-column trust-stack variant above
     still needs ~3 stacked rows plus a governance strip, and the subhead
     under each heading is another 2-3 lines on top of that. Forced into
     ~18% of this stack, they collide with themselves. Keep the heading —
     the actual "one-line" system story — and drop the diagram and subhead,
     same trade as the team-card diagram above, everywhere except each
     tile's own full-screen opening step where there's real room for both. */
  .system-visual:not([data-step="3"]) .t-foundation .trust-stack,
  .system-visual:not([data-step="4"]) .t-chart .insight-grid{display:none}
}
/* Below ~600px there isn't enough absolute height left for .t-foundation
   and .t-chart to even show their heading without it being clipped (they'd
   need ~35% of the stack each; the pipeline alone already needs the bulk
   of it). Rather than clip a heading, drop them from the docked step-6
   summary the same way .t-flow/.t-kpis are already dropped above — each
   still gets its own full-screen turn at steps 3 and 4 with real room. */
@media(max-width:600px),(max-width:900px) and (max-height:699px){
  .team-card{height:16%}
  .t-sources{top:19%;height:70%}
  .system-visual:not([data-step="3"]) .t-foundation,
  .system-visual:not([data-step="4"]) .t-chart{display:none}
}
@media(max-width:900px){
  .narrative-dock{left:50%;right:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:auto;max-width:calc(100% - 24px);height:auto;display:flex;align-items:center;gap:4px;padding:6px;border:1px solid var(--line);border-radius:999px;background:rgba(8,18,30,.92);box-shadow:0 14px 34px -12px rgba(0,0,0,.55);overflow-x:auto;scrollbar-width:none}
  .narrative-dock::-webkit-scrollbar{display:none}
  .narrative-dock button{flex:none;width:46px;height:46px;padding:0;justify-content:center;gap:0;border-radius:50%}
  .narrative-dock button>div,.narrative-dock button>i{display:none}
  .narrative-dock .dock-icon,.narrative-dock .dock-num-text{width:22px;height:22px;font-size:.68rem;border:0;background:transparent}
  .narrative-dock .dock-icon svg{width:100%;height:100%}
  .narrative-dock button.is-active .dock-icon{border:1px solid rgba(var(--tdc-green-rgb),.45);background:rgba(var(--tdc-green-rgb),.08);width:26px;height:26px}
  .narrative-dock button.is-active{width:auto;padding:0 16px 0 12px;gap:8px;border-radius:999px}
  .narrative-dock button.is-active>div{display:block}
  .narrative-dock button.is-active p{display:none}
  .narrative-dock button.is-active b{font:600 .72rem/1 var(--sans);white-space:nowrap;margin:0}
}
@media(max-width:900px){
  /* Embed's map currently renders invisible on phones: the desktop rule
     positions it with position:absolute and fixed top/bottom offsets
     (112-152px / 74-104px) sized for a tall desktop tile. Against the
     ~194px mobile team-card those offsets alone exceed the available
     height, collapsing the map to ~0px. Give it its own compact, in-flow
     layout sized for the actual space instead — text and heading below
     stay exactly as they were. */
  /* The desktop rule that turns card-subhead on for the focused step
     (.system-visual[data-step="1"] .team-card .card-subhead) has higher
     specificity than the mobile hide rule above and wins regardless of
     source order, silently eating ~60px meant for the map. Match its
     specificity here, later in the cascade, to actually hide it on mobile. */
  .system-visual[data-step="1"] .team-card .card-subhead{display:none}
  .system-visual[data-step="1"] .embed-map{
    position:static;
    transform:none;
    width:100%;
    height:100%;
    grid-template-columns:1fr auto 1fr;
    gap:4px;
    align-items:center;
  }
  .system-visual[data-step="1"] .people-cluster{padding:3px}
  .system-visual[data-step="1"] .cluster-label{font-size:.3rem;margin-bottom:2px}
  .system-visual[data-step="1"] .people-row{gap:3px}
  .system-visual[data-step="1"] .person{gap:2px}
  .system-visual[data-step="1"] .person i{width:16px;height:16px}
  .system-visual[data-step="1"] .person b{font-size:.32rem}
  .system-visual[data-step="1"] .shared-work{min-height:0}
  .system-visual[data-step="1"] .work-orbit{width:32px}
  .system-visual[data-step="1"] .work-orbit.-two{width:24px}
  .system-visual[data-step="1"] .work-core{width:52px;padding:4px}
  .system-visual[data-step="1"] .work-core>span{font-size:.26rem}
  .system-visual[data-step="1"] .work-core>strong{margin-top:2px;font-size:.36rem;line-height:1.05}
  .system-visual[data-step="1"] .work-cycles{margin-top:3px}

  /* Connect/Trust/Understand/Act have the exact same specificity gap as
     Embed above (the desktop "focused" rule forces card-subhead on and
     beats the unqualified mobile hide rule) — match it here too so their
     diagrams get the room the subhead was silently eating. */
  .system-visual[data-step="2"] .t-sources .card-subhead,
  .system-visual[data-step="3"] .t-foundation .card-subhead,
  .system-visual[data-step="4"] .t-chart .card-subhead,
  .system-visual[data-step="5"] .t-outcomes .card-subhead{
    display:none;
  }

  /* Desktop progressively docks earlier tiles (small, blurred) alongside
     the one currently opening, building toward the fully-assembled board
     at step 6. The compact mobile grid has no room for that accumulation —
     only the step's own tile should show; the rest wait for step 6. */
  .system-visual[data-step="2"] .t-foundation,
  .system-visual[data-step="2"] .t-kpis,
  .system-visual[data-step="2"] .t-chart,
  .system-visual[data-step="2"] .t-outcomes,
  .system-visual[data-step="3"] .t-sources,
  .system-visual[data-step="3"] .t-flow,
  .system-visual[data-step="3"] .t-chart,
  .system-visual[data-step="3"] .t-outcomes,
  .system-visual[data-step="4"] .t-sources,
  .system-visual[data-step="4"] .t-flow,
  .system-visual[data-step="4"] .t-foundation,
  .system-visual[data-step="4"] .t-kpis,
  .system-visual[data-step="4"] .t-outcomes,
  .system-visual[data-step="5"] .t-sources,
  .system-visual[data-step="5"] .t-flow,
  .system-visual[data-step="5"] .t-foundation,
  .system-visual[data-step="5"] .t-kpis,
  .system-visual[data-step="5"] .t-chart{
    display:none;
  }
  /* Act (05) was set to display:none in the base compact-grid rule above,
     contradicting the desktop rule that opens it at this step — restore it. */
  .system-visual[data-step="5"] .t-outcomes{display:flex}

  /* Connect's pipeline diagram has the same problem as Embed's map: fixed
     desktop offsets (top:56px, a 730px/450px source layout) don't fit the
     ~190px mobile tile. Recompute it in flow at phone scale. */
  .system-visual[data-step="2"] .pipeline-view{
    position:static;
    transform:none;
    width:100%;
    height:auto;
    display:flex;
    flex-direction:column;
    flex:none;
    min-height:auto;
    gap:4px;
    margin-top:4px;
  }
  .system-visual[data-step="2"] .pipe-sources{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:3px;
  }
  .system-visual[data-step="2"] .pipe-sources>span{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
    padding:3px 2px;
  }
  .system-visual[data-step="2"] .pipe-sources b{font-size:.32rem}
  .system-visual[data-step="2"] .pipe-sources small{display:none}
  .system-visual[data-step="2"] .source-icon{width:12px;height:12px}
  .system-visual[data-step="2"] .pipe-line,
  .system-visual[data-step="2"] .pipe-connectors{display:none}
  .system-visual[data-step="2"] .pipe-process{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
  .system-visual[data-step="2"] .pipe-process>span{min-height:0;padding:3px 2px;gap:1px}
  .system-visual[data-step="2"] .pipe-process>span>i{width:14px;height:14px;font-size:.3rem}
  .system-visual[data-step="2"] .pipe-process b{font-size:.32rem}
  .system-visual[data-step="2"] .pipe-process small{display:none}
  .system-visual[data-step="2"] .pipe-process>em{display:none}
  .system-visual[data-step="2"] .pipe-output{padding:3px 2px}
  .system-visual[data-step="2"] .pipe-output small{font-size:.28rem}
  .system-visual[data-step="2"] .pipe-output strong{font-size:.4rem}
  .system-visual[data-step="2"] .pipe-output>div{gap:3px}
  .system-visual[data-step="2"] .pipe-output>div span{font-size:.26rem;padding:1px 3px}
  .system-visual[data-step="2"] .stream-mark{width:16px}

  /* Trust's 3-layer stack sits beside a 190px-minimum governance rail on
     desktop — hide the rail (no room) and stack the layers, matching the
     same fix used for the full-screen variant of this tile. */
  .system-visual[data-step="3"] .trust-stack{display:block;flex:none;min-height:auto}
  .system-visual[data-step="3"] .ts-governance{display:none}
  .system-visual[data-step="3"] .ts-layers{
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .system-visual[data-step="3"] .ts-layer{padding:3px 5px;gap:2px}
  .system-visual[data-step="3"] .ts-layer::after{display:none}
  .system-visual[data-step="3"] .ts-tag{font-size:.28rem}
  .system-visual[data-step="3"] .ts-items{gap:3px}
  .system-visual[data-step="3"] .ts-items span{padding:2px 4px;font-size:.32rem}
  .system-visual[data-step="3"] .ts-core-body{grid-template-columns:1fr;gap:2px}
  .system-visual[data-step="3"] .ts-domains{gap:2px}
  .system-visual[data-step="3"] .ts-domains span{padding:2px 4px;font-size:.3rem}
  .system-visual[data-step="3"] .ts-domains span:nth-child(n+4){display:none}
  .system-visual[data-step="3"] .ts-core-metric{text-align:left}
  .system-visual[data-step="3"] .ts-core-metric strong{font-size:.85rem}
  .system-visual[data-step="3"] .ts-core-metric small{display:none}

  /* Understand's 2x2 insight grid is flex:1/min-height:0, so it's allowed
     to shrink smaller than its charts need — shrink the charts themselves
     to fit instead of letting them overflow their panels. */
  .system-visual[data-step="4"] .insight-grid{gap:3px;flex:none;min-height:auto}
  .system-visual[data-step="4"] .insight-panel{padding:3px 4px;gap:0}
  .system-visual[data-step="4"] .insight-panel>span{font-size:.32rem}
  .system-visual[data-step="4"] .insight-panel em{font-size:.3rem}
  .system-visual[data-step="4"] .chart-axis-y,
  .system-visual[data-step="4"] .chart-axis-x,
  .system-visual[data-step="4"] .mini-bars-axis,
  .system-visual[data-step="4"] .driver-icon{display:none}
  .system-visual[data-step="4"] .mini-bars{gap:2px}
  .system-visual[data-step="4"] .mini-bars b{font-size:.26rem}
  .system-visual[data-step="4"] .driver-row{gap:2px}
  .system-visual[data-step="4"] .driver-list i b,
  .system-visual[data-step="4"] .driver-list i em{font-size:.28rem}

  /* Act's workflow lanes run signal/arrow/owner/stat across 4 columns on
     desktop — stack each lane's pieces instead at phone width. */
  .system-visual[data-step="5"] .action-workflows{gap:2px;margin-top:3px;flex:none;min-height:auto}
  .system-visual[data-step="5"] .workflow-lane{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:1px;
    padding:3px 5px;
  }
  .system-visual[data-step="5"] .workflow-route,
  .system-visual[data-step="5"] .workflow-signal>i,
  .system-visual[data-step="5"] .workflow-owner>i{display:none}
  .system-visual[data-step="5"] .workflow-signal,
  .system-visual[data-step="5"] .workflow-owner{grid-template-columns:1fr;column-gap:0}
  .system-visual[data-step="5"] .workflow-signal small,
  .system-visual[data-step="5"] .workflow-owner small{font-size:.26rem}
  .system-visual[data-step="5"] .workflow-signal b,
  .system-visual[data-step="5"] .workflow-owner b{font-size:.34rem}
  .system-visual[data-step="5"] .workflow-stat{
    flex-direction:row;
    align-items:center;
    gap:3px;
    min-width:0;
  }
  .system-visual[data-step="5"] .workflow-stat strong{font-size:.4rem}
  .system-visual[data-step="1"] .shared-work>small{display:none}
}
@media(max-width:900px) and (max-height:500px){
  .app-shell{min-height:0}
  .site-header{height:56px}
  .experience{inset:56px 0 60px}
  .narrative-dock{bottom:10px}.narrative-dock button{width:40px;height:40px}
  .system-visual{inset:8px 3vw 58% 3vw}
  .story-scroll{background:linear-gradient(0deg,rgba(6,17,30,1) 0%,rgba(6,17,30,1) 38%,transparent 55%)}
  .story{padding:0 30px 0 20px}.story__inner{padding-block:14px}
  .eyebrow{margin-bottom:10px}
  h1,h2{margin:0;font-size:clamp(1.6rem,6.5vw,2.3rem)}
  .intro{margin-top:8px;max-width:46ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .actions{margin-top:12px}
  .tags,.credentials{display:none}
  .inline-link{margin-top:10px}
}
@media(max-width:560px){.story__inner{padding-bottom:26px}.eyebrow{margin-bottom:17px}.eyebrow i{width:21px}h1,h2{font-size:10vw}.intro{font-size:.8rem;line-height:1.55;margin-top:18px}.actions{margin-top:20px}.actions a{padding:11px 12px;font-size:.49rem}.actions .primary span{margin-left:9px}.inline-link{margin-top:21px}.credentials{gap:26px}.credentials strong{font-size:1.45rem}.tags{margin-top:18px}.story-scroll{background:linear-gradient(0deg,rgba(6,17,30,1) 0%,rgba(6,17,30,1) 45%,transparent 60%)}}
/* .system-visual's height (the ≤900px tier above) now owns every width
   down to the smallest phone — this used to additionally set inset:10px
   3vw 62% 3vw here, predating the single-column stack, which fought the
   taller board that stack needs. On viewports tall enough to spare it,
   claim a bit more height still (the pipeline's minimum scale needs real
   room — see the max(.1, ...) floor a few rules up); on short phones,
   leave it at the ≤900px tier's height so the board doesn't grow down
   into the story text sitting below it (that text is bottom-anchored
   within the full hero height, independent of how tall the board is). */
@media(max-width:900px) and (min-height:700px){
  .system-visual{inset:14px 3vw 44% 3vw}
}
@media(max-width:900px){
  @supports (width:1cqw){
    .system-visual:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .embed-map{
      transform:translate(-50%,-50%) scale(min(calc((100cqw - 12px)/800px),calc((100cqh - 12px)/180px)));
      transform-origin:center;
    }
    /* No max(.1, ...) floor here unlike the ≥901px version above: on the
       shortest phones .t-sources's own docked height is small enough that
       a fixed floor guarantees the pipeline overflows past .tile-foot
       (verified at 375x667) rather than just rendering small. Containment
       wins over a legibility floor that's already well past illegible at
       these sizes anyway. */
    .system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipeline-view{
      top:35px;
      transform:translateX(-50%) scale(min(1,calc((100cqw - 12px)/620px),max(0,calc((100cqh - 61px)/520px))));
      transform-origin:top center;
    }
    /* Below this, scale(0) has already floored out visually — .t-sources's
       docked box is too short to show the diagram at any legible size.
       Same trade as dropping .t-foundation/.t-chart's diagrams above: keep
       the heading and footer, drop the diagram, on the tile's own measured
       height rather than a viewport guess. */
    @container (max-height:130px){
      .system-visual:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .pipeline-view{display:none}
    }
  }
}
:root[data-theme="light"] .system-visual .team-card{
  color:#17262f;
  border-color:rgba(18,165,140,.22);
  background:
    radial-gradient(420px circle at 50% 42%,rgba(var(--tdc-cyan-rgb),.08),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(230,241,244,.93));
  box-shadow:0 22px 50px rgba(35,70,85,.12),inset 0 1px 0 rgba(255,255,255,.86);
}
:root[data-theme="light"] .system-visual[data-step="2"] .t-sources,
:root[data-theme="light"] .system-visual[data-step="3"] .t-foundation,
:root[data-theme="light"] .system-visual[data-step="4"] .t-chart,
:root[data-theme="light"] .system-visual[data-step="5"] .t-outcomes{
  color:#17262f;
  border-color:rgba(18,165,140,.24);
  background:
    radial-gradient(680px circle at 72% 30%,rgba(18,165,140,.075),transparent 62%),
    linear-gradient(155deg,rgba(255,255,255,.985),rgba(232,242,245,.965));
  box-shadow:
    0 28px 70px rgba(35,70,85,.14),
    0 0 40px rgba(18,165,140,.055),
    inset 0 1px 0 rgba(255,255,255,.92);
}
:root[data-theme="light"] .system-visual[data-step="2"] .pipe-sources>span,
:root[data-theme="light"] .system-visual[data-step="2"] .pipe-process>span,
:root[data-theme="light"] .system-visual[data-step="4"] .analysis-cell,
:root[data-theme="light"] .system-visual[data-step="5"] .workflow-lane{
  border-color:rgba(30,112,135,.16);
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(225,239,243,.82));
  box-shadow:0 10px 26px rgba(35,70,85,.075);
}
/* ============================================================
   TDC COLOUR SYSTEM — semantic wiring.
   Green = delivery/completion, cyan = movement/connection,
   purple-blue = intelligence/depth, navy = foundation/governance.
   Scoped entirely through existing data-step/data-story-section/
   data-story-jump attributes and nth-child position, so no markup
   changes are needed for the hero, dock or dashboard. Text-colour
   rules are guarded to dark mode (:not([data-theme="light"])) and
   paired with explicit light-theme "-ink" values where a section
   had no existing light override to fall back on.
   ============================================================ */

/* ---- Dock: each stage carries its own accent through the loading
   ring, active glow, hover and a small "completed" marker. ---- */
/* A continuous rail behind the stage controls, plus a travelling light at
   --dock-progress-x (a measured px offset, written per-frame from JS —
   see getDockStops()/updateDockProgress() in index.redesign-3d.js), so the
   dock reads as one connected system rather than seven isolated buttons. */
/* isolation only — .narrative-dock is already position:absolute from the
   base rule above, which is a valid positioning context for the ::before/
   ::after rail on its own. Do not add position:relative here: it would
   override the base rule's position:absolute and pull the dock out of its
   bottom-pinned layout into normal document flow. */
.narrative-dock{isolation:isolate}
.narrative-dock::before{content:"";position:absolute;z-index:0;left:14px;right:14px;top:50%;height:2px;transform:translateY(-50%);pointer-events:none;opacity:.55;}
.narrative-dock::after{content:"";position:absolute;z-index:0;top:50%;width:46px;height:46px;left:var(--dock-progress-x,29px);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(var(--tdc-cyan-rgb),.4),transparent 70%);transition:left .4s var(--ease,cubic-bezier(.22,.72,.18,1))}
.is-tab-hidden .narrative-dock::after{transition:none}
.narrative-dock button{position:relative;z-index:1;--dock-accent:157,177,187;--dock-accent-text:157,177,187}
/* Neighbours of the active stage pick up a faint inward glow in their own
   accent — a small reflection rather than a colour change. */
.narrative-dock button.is-active+button{box-shadow:inset 6px 0 16px -10px rgba(var(--dock-accent),.28)}
.narrative-dock button:has(+button.is-active){box-shadow:inset -6px 0 16px -10px rgba(var(--dock-accent),.28)}
.narrative-dock button[data-story-jump="1"]{--dock-accent:var(--tdc-green-rgb);--dock-accent-text:var(--tdc-green-rgb)}
.narrative-dock button[data-story-jump="2"]{--dock-accent:var(--tdc-cyan-rgb);--dock-accent-text:var(--tdc-cyan-rgb)}
.narrative-dock button[data-story-jump="3"]{--dock-accent:var(--tdc-purple-rgb);--dock-accent-text:var(--tdc-purple-text-rgb)}
.narrative-dock button[data-story-jump="4"]{--dock-accent:var(--tdc-purple-rgb);--dock-accent-text:var(--tdc-purple-text-rgb)}
.narrative-dock button[data-story-jump="5"]{--dock-accent:var(--tdc-cyan-rgb);--dock-accent-text:var(--tdc-cyan-rgb)}
.narrative-dock button[data-story-jump="6"]{--dock-accent:var(--tdc-green-rgb);--dock-accent-text:var(--tdc-green-rgb)}
.narrative-dock button:hover,.narrative-dock button:focus-visible{border-color:rgba(var(--dock-accent),.32)}
.narrative-dock button.is-active{border-color:rgba(var(--dock-accent),.5);background:linear-gradient(120deg,rgba(var(--dock-accent),.09),rgba(var(--dock-prev-accent,157,177,187),.045));box-shadow:0 0 0 1px rgba(var(--dock-accent),.16),0 10px 26px -14px rgba(var(--dock-accent),.45)}
.narrative-dock button.is-active .dock-num-text{color:rgb(var(--dock-accent-text))}
.narrative-dock button.is-active .dock-icon{color:rgb(var(--dock-accent));border-color:rgba(var(--dock-accent),.45);background:rgba(var(--dock-accent),.08)}
.narrative-dock button.is-active i{color:rgb(var(--dock-accent))}
.narrative-dock button.is-target::after{background:conic-gradient(from -90deg,rgb(var(--dock-accent)) calc(var(--load) * 360deg),transparent 0deg)}
/* Continue: the completed system carries the whole palette rather than one
   dominant hue — a static three-colour ring on its icon instead of a single
   accent border. */
.narrative-dock button[data-story-jump="6"] .dock-icon{border:1px solid transparent;background:linear-gradient(#0b1b2c,#0b1b2c) padding-box,conic-gradient(from -40deg,var(--tdc-cyan),var(--tdc-purple),var(--tdc-green),var(--tdc-cyan)) border-box}
/* Completed stage: the trailing chevron becomes a small filled dot in that
   stage's own colour once passed — present without staying dominant. */
.narrative-dock button.is-done i{width:14px;color:transparent}
.narrative-dock button.is-done i::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:rgb(var(--dock-accent));box-shadow:0 0 6px rgba(var(--dock-accent),.7)}
@media(max-width:900px){.narrative-dock button.is-done i{display:none}}
/* Resolution light: one restrained pulse on the button (and the dashboard,
   via .is-stage-settled below) the instant a destination settles. */
@keyframes dock-settle-pulse{0%,100%{box-shadow:0 0 0 1px rgba(var(--dock-accent),.16),0 10px 26px -14px rgba(var(--dock-accent),.45)}45%{box-shadow:0 0 0 3px rgba(var(--dock-accent),.35),0 10px 32px -12px rgba(var(--dock-accent),.6)}}
.narrative-dock button.is-settled{animation:dock-settle-pulse .65s ease-out}
[data-theme="light"] .narrative-dock button[data-story-jump="3"].is-active .dock-num-text,
[data-theme="light"] .narrative-dock button[data-story-jump="4"].is-active .dock-num-text{color:var(--tdc-purple-ink)}

/* ---- Story panels: eyebrow, resolving word, divider, tags and a soft
   wash behind the active panel all carry that stage's accent. Departing
   copy keeps its own colour as it fades (each section owns its accent
   throughout the crossfade), so outgoing/incoming colour carry needs no
   extra JS — renderStoryCrossfade() already animates opacity only. ---- */
.story{position:relative;--stage-accent:157,177,187;--stage-accent-text:157,177,187}
.story[data-story-section="1"]{--stage-accent:var(--tdc-green-rgb);--stage-accent-text:var(--tdc-green-rgb)}
.story[data-story-section="2"]{--stage-accent:var(--tdc-cyan-rgb);--stage-accent-text:var(--tdc-cyan-rgb)}
.story[data-story-section="3"]{--stage-accent:var(--tdc-purple-rgb);--stage-accent-text:var(--tdc-purple-text-rgb)}
.story[data-story-section="4"]{--stage-accent:var(--tdc-purple-rgb);--stage-accent-text:var(--tdc-purple-text-rgb)}
.story[data-story-section="5"]{--stage-accent:var(--tdc-cyan-rgb);--stage-accent-text:var(--tdc-cyan-rgb)}
.story[data-story-section="6"]{--stage-accent:var(--tdc-green-rgb);--stage-accent-text:var(--tdc-green-rgb)}
.story .eyebrow span{color:rgb(var(--stage-accent-text))}
.story .eyebrow i{background:rgba(var(--stage-accent),.55)}
/* Emphasised heading word: one flat, contrast-safe stage colour. No
   background-image/background-clip here — headings are the calm anchor;
   colour energy lives in the atmosphere, dashboard, borders and particles. */
:root:not([data-theme="light"]) .story h1 em,:root:not([data-theme="light"]) .story h2 em{background:none;background-image:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;color:rgb(var(--stage-accent-text))}
.story .tags li{border-color:rgba(var(--stage-accent),.4)}
.story.is-active::before{content:"";position:absolute;inset:0;background:radial-gradient(560px circle at 6% 45%,rgba(var(--stage-accent),.08),transparent 62%);pointer-events:none}
/* Capability tags read as different semantic accents rather than one
   colour repeated per tag. */
:root:not([data-theme="light"]) .story .tags li:nth-child(3n+1){border-color:rgba(var(--tdc-cyan-rgb),.4)}
:root:not([data-theme="light"]) .story .tags li:nth-child(3n+2){border-color:rgba(var(--tdc-purple-rgb),.4)}
:root:not([data-theme="light"]) .story .tags li:nth-child(3n+3){border-color:rgba(var(--tdc-green-rgb),.4)}
[data-theme="light"] .story[data-story-section="1"] .eyebrow span,[data-theme="light"] .story[data-story-section="6"] .eyebrow span{color:var(--tdc-green-ink)}
[data-theme="light"] .story[data-story-section="2"] .eyebrow span,[data-theme="light"] .story[data-story-section="5"] .eyebrow span{color:var(--tdc-cyan-ink)}
[data-theme="light"] .story[data-story-section="3"] .eyebrow span,[data-theme="light"] .story[data-story-section="4"] .eyebrow span{color:var(--tdc-purple-ink)}
[data-theme="light"] .story .tags li{border-color:rgba(var(--stage-accent),.55)}

/* ---- Dashboard: targeted per-stage recolouring so charts and diagrams
   read from all three accents rather than one repeated across every step. ---- */
/* Starting point: restrained multicolour hints on the blank canvas — small
   ambient signals rather than a resolved system. */
.canvas-hint::after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:rgba(var(--tdc-green-rgb),.55);box-shadow:-130px -70px 0 -1px rgba(var(--tdc-cyan-rgb),.5),140px -55px 0 -1px rgba(var(--tdc-purple-rgb),.45),-90px 90px 0 -1px rgba(var(--tdc-purple-rgb),.4),120px 95px 0 -1px rgba(var(--tdc-cyan-rgb),.4),0 -120px 0 -1px rgba(var(--tdc-green-rgb),.4);animation:signalpulse 5s ease-in-out infinite}
@keyframes signalpulse{0%,100%{opacity:.5}50%{opacity:1}}
.system-visual:not([data-step="0"]) .canvas-hint::after{opacity:0;transition:opacity .3s}
/* Embed: the strategic/specialist role on the TDC side reads as intelligence
   (purple) rather than the same delivery-green as the rest of the group. */
.system-visual[data-step="1"] .people-cluster.-tdc .person:first-child i{border-color:rgba(var(--tdc-purple-rgb),.5);background:radial-gradient(circle at 50% 36%,rgba(var(--tdc-purple-rgb),.2),rgba(5,24,36,.88) 64%);--glow:rgba(var(--tdc-purple-rgb),.55)}
.system-visual[data-step="1"] .people-cluster.-tdc .person:first-child i::before,.system-visual[data-step="1"] .people-cluster.-tdc .person:first-child i::after{color:var(--tdc-purple)}
/* Connect: sources are identified across the three accents, and the "Model"
   stage — the intelligent-processing step, not just ingest/validate — reads
   as purple-blue rather than uniform green. */
.system-visual[data-step="2"] .pipe-sources>span:nth-child(1) .source-icon{border-color:rgba(var(--tdc-cyan-rgb),.4)}
.system-visual[data-step="2"] .pipe-sources>span:nth-child(1) .source-icon::before,.system-visual[data-step="2"] .pipe-sources>span:nth-child(1) .source-icon::after{border-color:var(--tdc-cyan)}
.system-visual[data-step="2"] .pipe-sources>span:nth-child(3) .source-icon{border-color:rgba(var(--tdc-purple-rgb),.4)}
.system-visual[data-step="2"] .pipe-sources>span:nth-child(3) .source-icon::before,.system-visual[data-step="2"] .pipe-sources>span:nth-child(3) .source-icon::after{border-color:var(--tdc-purple)}
.system-visual[data-step="2"] .pipe-process>span:nth-of-type(3){border-color:rgba(var(--tdc-purple-rgb),.3);background:linear-gradient(155deg,rgba(var(--tdc-purple-rgb),.09),rgba(8,28,40,.55))}
.system-visual[data-step="2"] .pipe-process>span:nth-of-type(3)>i{border-color:rgba(var(--tdc-purple-rgb),.5);color:var(--tdc-purple)}
.system-visual[data-step="2"] .pipe-process>span:nth-of-type(3)>em{background:linear-gradient(90deg,var(--tdc-purple),rgba(var(--tdc-purple-rgb),.25))}
/* Trust: governance reads as purple-blue depth around a green-validated
   core, with lineage/access kept on the cyan path and security its own
   distinct ring — four legible states instead of one green list. */
.ts-governance{border-color:rgba(var(--tdc-purple-rgb),.24);background:linear-gradient(170deg,rgba(var(--tdc-purple-rgb),.09),rgba(8,28,40,.45))}
:root:not([data-theme="light"]) .ts-gov-tag{color:var(--tdc-purple-text)}
.ts-gov-list>div:nth-child(2) i{border-color:rgba(var(--tdc-cyan-rgb),.45)}
:root:not([data-theme="light"]) .ts-gov-list>div:nth-child(2) i{color:var(--tdc-cyan)}
.ts-gov-list>div:nth-child(3) i{border-color:rgba(var(--tdc-purple-rgb),.5)}
:root:not([data-theme="light"]) .ts-gov-list>div:nth-child(3) i{color:var(--tdc-purple-text)}
.ts-gov-list>div:nth-child(4) i{border-color:rgba(var(--tdc-cyan-rgb),.45)}
:root:not([data-theme="light"]) .ts-gov-list>div:nth-child(4) i{color:var(--tdc-cyan)}
[data-theme="light"] .ts-governance{border-color:rgba(var(--tdc-purple-rgb),.22)}
[data-theme="light"] .ts-gov-tag{color:var(--tdc-purple-ink)}
[data-theme="light"] .ts-gov-list>div:nth-child(3) i{color:var(--tdc-purple-ink)}
/* Understand: trend (live) reads cyan, forecast (modelled) reads purple-blue,
   the contribution bars mix all three, and confidence stays green — so the
   panel combines the accents instead of drawing every series in green. */
.insight-panel.-trend{border-color:rgba(var(--tdc-cyan-rgb),.16);background:rgba(var(--tdc-cyan-rgb),.03)}
.insight-panel.-trend .line{stroke:var(--tdc-cyan)}
.insight-panel.-trend .area{fill:rgba(var(--tdc-cyan-rgb),.12)}
.insight-panel.-trend .chart-dot{fill:var(--tdc-cyan);filter:drop-shadow(0 0 4px rgba(var(--tdc-cyan-rgb),.85))}
.insight-panel.-trend>span em{border-color:rgba(var(--tdc-cyan-rgb),.3);background:rgba(var(--tdc-cyan-rgb),.08);color:var(--tdc-cyan)}
.insight-panel.-forecast{border-color:rgba(var(--tdc-purple-rgb),.18);background:rgba(var(--tdc-purple-rgb),.035)}
.insight-panel.-forecast .line{stroke:var(--tdc-purple)}
.insight-panel.-forecast .band{fill:rgba(var(--tdc-purple-rgb),.14)}
.insight-panel.-forecast .chart-dot{fill:var(--tdc-purple);filter:drop-shadow(0 0 4px rgba(var(--tdc-purple-rgb),.85))}
.insight-panel.-forecast>span em{border-color:rgba(var(--tdc-purple-rgb),.3);background:rgba(var(--tdc-purple-rgb),.08)}
:root:not([data-theme="light"]) .insight-panel.-forecast>span em{color:var(--tdc-purple-text)}
[data-theme="light"] .insight-panel.-forecast>span em{color:var(--tdc-purple-ink)}
.insight-panel.-mix .mini-bars i:nth-child(3n+1){background:linear-gradient(180deg,rgba(var(--tdc-purple-rgb),.55),rgba(var(--tdc-purple-rgb),.08))}
.insight-panel.-mix .mini-bars i:nth-child(3n+2){background:linear-gradient(180deg,rgba(var(--tdc-cyan-rgb),.5),rgba(var(--tdc-cyan-rgb),.08))}
.insight-panel.-mix .mini-bars i:nth-child(3n+3){background:linear-gradient(180deg,rgba(var(--tdc-green-rgb),.5),rgba(var(--tdc-green-rgb),.08))}
/* Act: signal (cyan) moves through a decision (purple) into a completed,
   measurable action (green) — the route itself shows that path. */
.workflow-route{background:linear-gradient(90deg,var(--tdc-cyan),var(--tdc-purple) 50%,var(--tdc-green))}
.workflow-route::after{border-top-color:var(--tdc-green);border-right-color:var(--tdc-green)}
.workflow-route i{background:var(--tdc-purple);box-shadow:0 0 8px var(--tdc-purple)}
/* Continue (dashboard "go-live"): the completed system's glow layers all
   three accents instead of resolving to green alone. */
.system-visual[data-step="6"] .dashboard{box-shadow:0 46px 110px rgba(0,0,0,.5),0 0 0 1px rgba(var(--tdc-green-rgb),.34),0 0 70px rgba(var(--tdc-green-rgb),.14),0 0 110px rgba(var(--tdc-cyan-rgb),.07),0 0 140px rgba(var(--tdc-purple-rgb),.055)}
/* A very slow current drifting through the completed composition — one
   large gradient, transform/opacity-adjacent (background-position only),
   paused whenever the tab is hidden or motion is reduced. */
.system-visual[data-step="6"] .dashboard::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background:linear-gradient(120deg,transparent 0%,rgba(var(--tdc-cyan-rgb),.05) 30%,rgba(var(--tdc-purple-rgb),.05) 55%,rgba(var(--tdc-green-rgb),.05) 80%,transparent 100%);background-size:260% 100%;animation:current-drift 26s linear infinite}
@keyframes current-drift{0%{background-position:0% 0}100%{background-position:100% 0}}
.is-tab-hidden .system-visual[data-step="6"] .dashboard::before{animation-play-state:paused}
/* Resolution light on the dashboard shell itself — see .is-stage-settled,
   toggled from JS for ~650ms whenever a stage transition completes. */
@keyframes dash-settle-glow{0%,100%{box-shadow:0 46px 110px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.03),0 0 0 rgba(var(--tdc-green-rgb),0),0 0 0 rgba(var(--tdc-cyan-rgb),0),0 0 0 rgba(var(--tdc-purple-rgb),0)}40%{box-shadow:0 46px 110px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.03),0 0 70px rgba(var(--tdc-green-rgb),.22),0 0 100px rgba(var(--tdc-cyan-rgb),.16),0 0 130px rgba(var(--tdc-purple-rgb),.18)}}
.is-stage-settled .dashboard{animation:dash-settle-glow .65s ease-out}

/* ---- Continue morph: cyan travels the border as the surface departs,
   purple gives it depth mid-flight, green stays as the completion edge
   throughout (set by --load, driven from JS in step with hp). ---- */
.cf-surface{border-color:rgba(var(--tdc-green-rgb),.5);background:rgba(var(--tdc-green-rgb),.07);box-shadow:0 10px 26px -14px rgba(var(--tdc-green-rgb),.45)}
.cf-surface::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from -90deg,var(--tdc-cyan) calc(var(--load,0) * 360deg),transparent 0deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.85}
.cf-from .cf-icon{color:var(--tdc-green);border-color:rgba(var(--tdc-green-rgb),.45);background:rgba(var(--tdc-green-rgb),.08)}
.cf-eyebrow span{color:var(--tdc-cyan)}.cf-eyebrow i{background:rgba(var(--tdc-cyan-rgb),.5)}
[data-theme="light"] .cf-eyebrow span{color:var(--tdc-cyan-ink)}
/* Landing: a brief, one-shot sweep from purple depth through cyan movement
   to the settled green edge — never fully lit before the card actually
   lands, and gone well under a second. */
@keyframes co-takeover-ring{0%{box-shadow:0 0 0 1px rgba(var(--tdc-purple-rgb),.4),0 30px 60px -28px rgba(var(--tdc-purple-rgb),.3)}55%{box-shadow:0 0 0 1px rgba(var(--tdc-cyan-rgb),.4),0 30px 60px -28px rgba(var(--tdc-cyan-rgb),.28)}100%{box-shadow:0 0 0 1px rgba(var(--tdc-green-rgb),calc(.16 - .16 * var(--settle))),0 30px 60px -28px rgba(var(--tdc-green-rgb),calc(.45 - .45 * var(--settle)))}}
.continue-opening__inner.is-lit{animation:co-takeover-ring .6s ease-out both}
.continue-opening__inner.is-lit .co-eyebrow span{color:var(--tdc-cyan)}
.continue-opening__inner.is-lit .actions .primary span{color:var(--tdc-green)}
[data-theme="light"] .continue-opening__inner.is-lit .co-eyebrow span{color:var(--tdc-cyan-ink)}

/* ---- Extended page: accents vary by content meaning instead of one
   colour repeated down the page. Cards keep a dark surface with only the
   top edge, icon, label or link carrying the accent — never a saturated
   fill. ---- */
.service-card{border-top:2px solid rgba(157,177,187,.3)}
.service-card:nth-child(1),.service-card:nth-child(3),.service-card:nth-child(6){border-top-color:rgba(var(--tdc-cyan-rgb),.45)}
:root:not([data-theme="light"]) .service-card:nth-child(1) a,:root:not([data-theme="light"]) .service-card:nth-child(3) a,:root:not([data-theme="light"]) .service-card:nth-child(6) a{color:var(--tdc-cyan)}
.service-card:nth-child(4),.service-card:nth-child(5){border-top-color:rgba(var(--tdc-purple-rgb),.45)}
:root:not([data-theme="light"]) .service-card:nth-child(4) a,:root:not([data-theme="light"]) .service-card:nth-child(5) a{color:var(--tdc-purple-text)}
.service-card:nth-child(7),.service-card:nth-child(8){border-top-color:rgba(var(--tdc-green-rgb),.45)}
.service-card:nth-child(2){border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--tdc-cyan),var(--tdc-purple)) 1}
:root:not([data-theme="light"]) .service-card:nth-child(2) a{color:var(--tdc-purple-text)}
[data-theme="light"] .service-card a{color:var(--tdc-green-ink)}
[data-theme="light"] .service-card:nth-child(1) a,[data-theme="light"] .service-card:nth-child(2) a,[data-theme="light"] .service-card:nth-child(3) a,[data-theme="light"] .service-card:nth-child(6) a{color:var(--tdc-cyan-ink)}
[data-theme="light"] .service-card:nth-child(4) a,[data-theme="light"] .service-card:nth-child(5) a{color:var(--tdc-purple-ink)}
:root:not([data-theme="light"]) .services-section .eyebrow span{color:var(--tdc-cyan)}
[data-theme="light"] .services-section .eyebrow span{color:var(--tdc-cyan-ink)}

:root:not([data-theme="light"]) .tech-section .eyebrow span{color:var(--tdc-cyan)}
[data-theme="light"] .tech-section .eyebrow span{color:var(--tdc-cyan-ink)}

:root:not([data-theme="light"]) .pcr-rhythm-row:nth-child(1) .pcr-rhythm-head i{color:var(--tdc-purple-text);border-color:rgba(var(--tdc-purple-rgb),.4)}
:root:not([data-theme="light"]) .pcr-rhythm-row:nth-child(2) .pcr-rhythm-head i{color:var(--tdc-cyan);border-color:rgba(var(--tdc-cyan-rgb),.4)}
:root:not([data-theme="light"]) .pcr-rhythm-row:nth-child(3) .pcr-rhythm-head i{color:var(--tdc-green);border-color:rgba(var(--tdc-green-rgb),.4)}
:root:not([data-theme="light"]) .pcr-rhythm-row:nth-child(4) .pcr-rhythm-head i{color:var(--tdc-purple-text);border-color:rgba(var(--tdc-purple-rgb),.4)}
[data-theme="light"] .pcr-rhythm-row:nth-child(1) .pcr-rhythm-head i{color:var(--tdc-purple-ink)}
[data-theme="light"] .pcr-rhythm-row:nth-child(2) .pcr-rhythm-head i{color:var(--tdc-cyan-ink)}
[data-theme="light"] .pcr-rhythm-row:nth-child(3) .pcr-rhythm-head i{color:var(--tdc-green-ink)}
[data-theme="light"] .pcr-rhythm-row:nth-child(4) .pcr-rhythm-head i{color:var(--tdc-purple-ink)}
:root:not([data-theme="light"]) .how-we-work-section .eyebrow span{color:var(--tdc-purple-text)}
[data-theme="light"] .how-we-work-section .eyebrow span{color:var(--tdc-purple-ink)}

:root:not([data-theme="light"]) .closing-section .eyebrow span{color:var(--tdc-green)}
[data-theme="light"] .closing-section .eyebrow span{color:var(--tdc-green-ink)}

/* Cards below the hero pick up a two-colour reflection on hover instead of
   reverting to a single flat accent, carrying the blended language into the
   extended page (existing hover transforms are untouched, this only adds
   the glow). */
:root:not([data-theme="light"]) .service-card:hover{box-shadow:0 18px 40px -22px rgba(var(--tdc-cyan-rgb),.35),0 24px 60px -30px rgba(var(--tdc-purple-rgb),.3)}
:root:not([data-theme="light"]) .pcr-problem-tile:hover{box-shadow:0 18px 40px -22px rgba(var(--tdc-purple-rgb),.32),0 24px 60px -30px rgba(var(--tdc-cyan-rgb),.28)}

@media(prefers-reduced-motion:reduce){.canvas-hint::after{animation:none}.continue-opening__inner.is-lit{animation:none}
.story{transition:none}.story-scroll{scroll-behavior:auto}.canvas-hint .ch-ring,.canvas-hint .ch-ring::after{animation:none}.t-foundation.is-probing .fm-cells i{animation:none}.system-visual[data-step="6"] .dash-status i,.system-visual[data-step="6"] .dash-sweep,.system-visual[data-step="6"] .tile{animation:none}.dashboard{transition:box-shadow .6s,border-color .6s}.system-visual[data-step="2"] .source-icon,.system-visual[data-step="2"] .pipe-process>span,.system-visual[data-step="2"] .pipe-process>span>i,.pc-flow,.pc-node{animation:none}.system-visual[data-step="1"] .person i{animation:none}.service-card,.insight-card{transition:opacity .15s;transform:none!important}.service-card:hover,.service-card:focus-within,.insight-card:hover,.insight-card:focus-visible{transform:none}.co-scroll-hint i{animation:none}.narrative-dock button[data-continue-source]{transition:opacity .15s ease}.cf-surface{transform:none!important;box-shadow:none!important}.cf-layer,.cf-letters i,.cf-word,.cf-copy{transition:opacity .15s ease!important;transform:none!important;filter:none!important}.continue-opening__inner{transition:none}.continue-opening__inner .co-eyebrow,.continue-opening__inner .co-heading,.continue-opening__inner .co-intro,.continue-opening__inner .actions,.continue-opening__inner .co-foot{transition:opacity .15s ease!important;transform:none!important}}
/* New atmosphere/lighting additions: movement removed, blended palette kept.
   The --atmo-* driven backgrounds above are static per current stage either
   way (JS already collapses tweenDuration to 0 under reduced motion), so
   only the separate looping/animated pieces need silencing here. */
@media(prefers-reduced-motion:reduce){
  .narrative-dock::after{transition:none}
  .system-visual[data-step="6"] .dashboard::before{animation:none}
  .is-stage-settled .dashboard,.narrative-dock button.is-settled{animation:none}
  .heading-particle-canvas{display:none}
}
/* Tab-hidden pausing for ambient motion (dock rail light, step-6 colour
   current, hero grid mask) is declared alongside each effect above; the
   main render loop and gesture state are unaffected either way — see
   handleVisibilityChange in index.redesign-3d.js. */

/* =========================================================================
   Post-Continue redesign — everything below the Continue handoff.
   Scoped entirely under .post-continue-redesign so nothing here can leak
   into the hero/Continue system above it (untouched) or bleed out to any
   other page. Built in phases — see /Users/douglastdc/.claude/plans for the
   phase plan. Phase 1: wrapper, shared tokens, reveal-on-scroll scaffold,
   idle connective line. Sections keep their existing rules (services-grid,
   service-card, etc. above) unchanged until their own phase restyles them.
   ========================================================================= */
.post-continue-redesign{
  position:relative;
  isolation:isolate;
  --pcr-green:#78d3b2;--pcr-green-rgb:120,211,178;
  --pcr-cyan:#1ec1e2;--pcr-cyan-rgb:30,193,226;
  --pcr-purple:var(--tdc-purple);--pcr-purple-rgb:var(--tdc-purple-rgb);
  --pcr-surface:rgba(255,255,255,.02);
  --pcr-border:var(--line);
  --pcr-text:var(--ink);
  --pcr-muted:#8ca0aa;
  --pcr-accent-a:var(--pcr-green);
  --pcr-accent-b:var(--pcr-cyan);
  --pcr-accent-c:var(--tdc-purple);
  /* Five-step alternating chapter-surface rhythm — each chapter picks one
     of these instead of every chapter getting its own atmospheric wash, so
     "solid" chapters read as a genuine, glow-free reset between them. */
  --pcr-surface-atmospheric:#071b28;
  --pcr-surface-warm:#0b1f1a;
  --pcr-surface-solid:#050d14;
  --pcr-surface-purple:#11122a;
  --pcr-surface-directional:#081018;
  --pcr-surface-deep:#030810;
  --pcr-surface-raised:#0a202d;
}
[data-theme="light"] .post-continue-redesign{
  --pcr-surface:rgba(255,255,255,.7);
  --pcr-border:rgba(28,62,84,.14);
  --pcr-text:#16232b;
  --pcr-muted:#5c7482;
  --pcr-accent-a:var(--tdc-green-ink);
  --pcr-accent-b:var(--tdc-cyan-ink);
  --pcr-accent-c:var(--tdc-purple-ink);
  --pcr-purple:var(--tdc-purple-ink);--pcr-purple-rgb:69,82,156;
  --pcr-surface-atmospheric:#e1f2ec;
  --pcr-surface-warm:#e6f4ea;
  --pcr-surface-solid:#fafcfb;
  --pcr-surface-purple:#e3e2f2;
  --pcr-surface-directional:#dcedf2;
  --pcr-surface-deep:#ccd9de;
  --pcr-surface-raised:#ffffff;
}

/* Connective line: one shared continuity device running behind every
   chapter (not a canvas, not one instance per section). Idle/static here;
   later phases drive its colour focus from data-active-chapter, written by
   the single shared IntersectionObserver in post-continue.js. It will only
   become visible once each chapter's own background is opened up to let it
   show through — until then it sits behind opaque section backgrounds by
   design, matching this phase's "structure and tokens only" scope. */
.post-continue-redesign .connective-line{
  position:absolute;
  top:0;
  bottom:0;
  left:clamp(14px,3vw,32px);
  width:2px;
  background:linear-gradient(180deg,
    rgba(var(--tdc-green-rgb),.35),
    rgba(var(--tdc-cyan-rgb),.35) 35%,
    rgba(var(--tdc-purple-rgb),.35) 70%,
    rgba(var(--tdc-green-rgb),.35));
  pointer-events:none;
  z-index:0;
}
[data-theme="light"] .post-continue-redesign .connective-line{opacity:.5}
@media(max-width:900px){.post-continue-redesign .connective-line{display:none}}

/* Shared atmospheric depth layer — one Canvas2D element (created by
   post-continue.js, degrades to nothing if unsupported), sticky within
   this wrapper so it only ever occupies the current viewport rather than
   the whole page height. Sits above the section gradients (z-index:1
   inside this wrapper's own isolated stacking context) but is blended and
   low-alpha enough to read as illumination, not shapes on top — the same
   treatment the hero already uses for .heading-particle-canvas. */
.post-continue-redesign .pcr-atmosphere{
  position:sticky;top:0;height:100vh;margin-bottom:calc(-100vh);
  display:block;width:100%;z-index:1;pointer-events:none;
  opacity:0;mix-blend-mode:screen;transition:opacity 1.1s ease;
}
.post-continue-redesign .pcr-atmosphere.is-active{opacity:.85}
[data-theme="light"] .post-continue-redesign .pcr-atmosphere{mix-blend-mode:normal}
[data-theme="light"] .post-continue-redesign .pcr-atmosphere.is-active{opacity:.3}
@media(prefers-reduced-motion:reduce){.post-continue-redesign .pcr-atmosphere{display:none}}

/* Reveal-on-scroll scaffold for [data-reveal] elements. Guarded behind the
   .reveal-ready class, added by post-continue.js only once its
   IntersectionObserver is live — so content stays visible by default if JS
   fails to load, instead of getting stuck at opacity:0. */
.post-continue-redesign.reveal-ready [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease;
}
.post-continue-redesign.reveal-ready [data-reveal].is-visible{
  opacity:1;
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  .post-continue-redesign.reveal-ready [data-reveal]{opacity:1;transform:none;transition:none}
}

/* =========================================================================
   Post-Continue redesign — Phase 2: shared editorial type scale + the
   services chapter's pinned scroll-scrub rail.

   The type scale and numbered-kicker rule are added here (rather than back
   in Phase 1) because the services chapter is the first thing that needs
   them, but every later chapter reuses the same two rules — that's why
   they're written as bare .post-continue-redesign descendants instead of
   .services-section-scoped.

   Pin mechanics: .pcr-rail-pin is a plain block sized in JS (post-continue.js)
   to 100vh + the track's own overflow distance. Its child .pcr-rail-sticky
   is position:sticky so it holds at the top of the viewport for exactly
   that extra distance, and post-continue.js reads window scroll position
   (never intercepts or prevents it) to translateX the track in lockstep.
   Because it's read-only against native scroll, reverse-scroll, release at
   the end, and "never trap the user" all fall out for free — there is no
   scroll-jack to escape. Below a fine-pointer+hover+motion-ok desktop
   (tablets included, regardless of viewport width, since they're
   hover:none/pointer:coarse) the second media block below turns the whole
   mechanism off and the rail becomes a plain native horizontal snap strip.
   ========================================================================= */
.post-continue-redesign h2{font-size:clamp(2.6rem,4.6vw,4.3rem);line-height:.95;letter-spacing:-.03em;max-width:22ch}
.post-continue-redesign .eyebrow[data-kicker]::before{content:attr(data-kicker) " ·";color:var(--pcr-muted);margin-right:-2px}
.post-continue-redesign .pcr-kicker-rule{flex:1 1 auto;height:1px;min-width:24px;margin-left:8px;background:linear-gradient(90deg,rgba(var(--tdc-cyan-rgb),.35),transparent 90%)}

.post-continue-redesign .pcr-rail-sticky{display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,3.5vh,36px);overflow-x:clip;overflow-y:visible}
.post-continue-redesign .pcr-rail-head{max-width:1180px;margin:0 auto;width:100%}
.post-continue-redesign .pcr-rail-controls{display:flex;gap:10px;margin-top:clamp(20px,3vh,28px)}
.post-continue-redesign .pcr-rail-btn{display:grid;place-content:center;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--pcr-border);background:var(--pcr-surface);color:var(--pcr-text);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.post-continue-redesign .pcr-rail-btn svg{width:18px;height:18px}
.post-continue-redesign .pcr-rail-btn.-prev svg{transform:scaleX(-1)}
.post-continue-redesign .pcr-rail-btn:hover:not(:disabled){border-color:rgba(var(--tdc-cyan-rgb),.55);background:rgba(var(--tdc-cyan-rgb),.1);transform:translateY(-2px)}
.post-continue-redesign .pcr-rail-btn:disabled{opacity:.32;cursor:default;transform:none}

.post-continue-redesign .pcr-rail{position:relative;margin-top:clamp(6px,1.2vh,14px);padding-left:clamp(22px,6vw,74px)}
.post-continue-redesign .pcr-rail-track{display:flex;gap:20px;will-change:transform}
.post-continue-redesign .pcr-rail-track .service-card{flex:0 0 clamp(258px,26vw,336px)}
.post-continue-redesign .pcr-rail-line{position:relative;margin:clamp(20px,3vh,30px) clamp(22px,6vw,74px) 0;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(var(--tdc-green-rgb),.35),rgba(var(--tdc-cyan-rgb),.35) 45%,rgba(var(--tdc-purple-rgb),.35) 85%);overflow:hidden}
.post-continue-redesign .pcr-rail-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--pcr-accent-a),var(--pcr-accent-b) 55%,var(--pcr-accent-c))}

@media(hover:hover) and (pointer:fine) and (min-width:760px) and (prefers-reduced-motion:no-preference){
  .post-continue-redesign .pcr-rail-pin{height:calc(100vh + var(--pcr-rail-run,0px))}
  .post-continue-redesign .pcr-rail-sticky{position:sticky;top:0;height:100vh}
}
@media (hover:none),(pointer:coarse),(max-width:759px),(prefers-reduced-motion:reduce){
  .post-continue-redesign .pcr-rail-pin{height:auto}
  .post-continue-redesign .pcr-rail-sticky{position:static;height:auto}
  .post-continue-redesign .pcr-rail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .post-continue-redesign .pcr-rail::-webkit-scrollbar{display:none}
  .post-continue-redesign .pcr-rail-track .service-card{scroll-snap-align:start}
  .post-continue-redesign .pcr-rail-fill{display:none}
  .post-continue-redesign .pcr-rail-controls{display:none}
}
@media(max-width:640px){
  .post-continue-redesign .pcr-rail{padding-left:20px}
  .post-continue-redesign .pcr-rail-line{margin-left:20px;margin-right:20px}
  .post-continue-redesign .pcr-rail-track .service-card{flex-basis:82vw}
}

[data-theme="light"] .post-continue-redesign .pcr-rail-btn{background:rgba(255,255,255,.6)}

/* =========================================================================
   Post-Continue redesign — Phase 3: capability field + the delivery-rhythm
   split composition.

   Capability field replaces the old flat pending-pill panel with three
   honestly-labelled tiers (delivered core / connected capability /
   capability being evaluated) so confidence level reads as structure, not
   just adjective — no item moves out of "evaluating" without a real content
   change, this is presentation only.

   Delivery rhythm replaces the old 4-up card grid + separate "ways to
   engage" grid with one split composition: a sticky editorial explanation
   on desktop and a single vertical timeline on the right that folds the
   former engage-section cards in as supporting detail under whichever
   stage they belong to (Shape/Build/Transfer) — Prove has none, which is
   fine, not every stage needs one.
   ========================================================================= */
.post-continue-redesign .pcr-capability-field{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,26px);margin-top:clamp(32px,4.5vh,48px)}
.post-continue-redesign .pcr-capability-tier{padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,28px);border-radius:8px;border:1px solid var(--pcr-border)}
.post-continue-redesign .pcr-capability-label{margin:0 0 12px;font:600 .62rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--pcr-muted)}
.post-continue-redesign .pcr-capability-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.post-continue-redesign .pcr-capability-tags li{padding:8px 14px;border-radius:99px;font:500 .68rem/1 var(--sans);color:var(--pcr-text)}

.post-continue-redesign .pcr-capability-tier.-core{background:rgba(var(--tdc-green-rgb),.06);border-color:rgba(var(--tdc-green-rgb),.32)}
.post-continue-redesign .pcr-capability-tier.-core .pcr-capability-tags li{background:rgba(var(--tdc-green-rgb),.16);border:1px solid rgba(var(--tdc-green-rgb),.4)}
.post-continue-redesign .pcr-capability-tier.-connected{background:rgba(var(--tdc-cyan-rgb),.045);border-color:rgba(var(--tdc-cyan-rgb),.24)}
.post-continue-redesign .pcr-capability-tier.-connected .pcr-capability-tags li{background:rgba(var(--tdc-cyan-rgb),.09);border:1px solid rgba(var(--tdc-cyan-rgb),.26)}
.post-continue-redesign .pcr-capability-tier.-evaluating{border-style:dashed}
.post-continue-redesign .pcr-capability-tier.-evaluating .pcr-capability-tags li{background:transparent;border:1px dashed var(--pcr-border);color:var(--pcr-muted)}

:root:not([data-theme="light"]) .post-continue-redesign .pcr-capability-tier.-core .pcr-capability-label{color:var(--tdc-green)}
:root:not([data-theme="light"]) .post-continue-redesign .pcr-capability-tier.-connected .pcr-capability-label{color:var(--tdc-cyan)}
[data-theme="light"] .post-continue-redesign .pcr-capability-tier.-core .pcr-capability-label{color:var(--tdc-green-ink)}
[data-theme="light"] .post-continue-redesign .pcr-capability-tier.-connected .pcr-capability-label{color:var(--tdc-cyan-ink)}

.post-continue-redesign .pcr-split{max-width:1180px;margin:0 auto;display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:1fr}
.post-continue-redesign .pcr-split-aside .intro{max-width:38ch}
@media(min-width:880px){
  .post-continue-redesign .pcr-split{grid-template-columns:.85fr 1.15fr;align-items:start}
  .post-continue-redesign .pcr-split-aside{position:sticky;top:clamp(24px,6vh,64px)}
}

.post-continue-redesign .pcr-rhythm-rows{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(30px,4.5vh,48px)}
.post-continue-redesign .pcr-rhythm-rows::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,rgba(var(--tdc-purple-rgb),.4),rgba(var(--tdc-cyan-rgb),.4) 35%,rgba(var(--tdc-green-rgb),.4) 70%,rgba(var(--tdc-purple-rgb),.4))}
.post-continue-redesign .pcr-rhythm-row{position:relative;padding-left:58px}
.post-continue-redesign .pcr-rhythm-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.post-continue-redesign .pcr-rhythm-head i{position:absolute;left:0;top:0;display:grid;place-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--pcr-border);background:var(--pcr-surface);font:600 .72rem/1 var(--mono);font-style:normal}
.post-continue-redesign .pcr-rhythm-head b{font:600 1.28rem/1.2 var(--sans);color:var(--pcr-text)}
.post-continue-redesign .pcr-rhythm-row>p{margin:0;color:var(--pcr-muted);font-size:.92rem;line-height:1.6;max-width:52ch}
.post-continue-redesign .pcr-rhythm-ways{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:52ch}
.post-continue-redesign .pcr-rhythm-ways li{
  position:relative;isolation:isolate;padding:10px 14px;border:1px solid var(--pcr-border);border-radius:6px;background:var(--pcr-surface);
  --pcr-tilt-x:0deg;--pcr-tilt-y:0deg;--pcr-glow-op:0;--pcr-glow-x:50%;--pcr-glow-y:50%;
  transform:perspective(900px) rotateX(var(--pcr-tilt-x)) rotateY(var(--pcr-tilt-y));
  transition:transform .4s cubic-bezier(.22,.72,.18,1),border-color .3s ease;
}
.post-continue-redesign .pcr-rhythm-ways li::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(160px circle at var(--pcr-glow-x) var(--pcr-glow-y),rgba(var(--pcr-green-rgb),.14),transparent 65%);opacity:var(--pcr-glow-op);transition:opacity .4s ease}
.post-continue-redesign .pcr-rhythm-ways b{display:block;font:600 .8rem/1.3 var(--sans);color:var(--pcr-text)}
.post-continue-redesign .pcr-rhythm-ways span{display:block;margin-top:2px;color:var(--pcr-muted);font-size:.74rem;line-height:1.5}

/* =========================================================================
   Post-Continue redesign — Phase 4: technology stack + the constants/
   problems split.

   Technology swaps the old 5-up card grid for a connected layered stack —
   full-width bands (one per category) separated by hairlines instead of
   boxed tiles, keeping the existing per-category accent rotation.

   Constants/problems merges the old "why" list and "use cases" grid into
   one asymmetric split: a plain (non-sticky — eight full principles would
   overflow a sticky column) numbered list on the left, and a bento-style
   tile matrix on the right with one featured tile. Reuses .pcr-split for
   the column ratio but a dedicated .pcr-split-lead instead of
   .pcr-split-aside, deliberately opting out of the sticky behaviour.
   ========================================================================= */
.post-continue-redesign .pcr-tech-stack{position:relative;isolation:isolate;display:flex;flex-direction:column;margin-top:clamp(32px,4.5vh,48px)}
.post-continue-redesign .pcr-tech-stack::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--pcr-cyan-rgb),.5) 6%,transparent 13%);
  background-size:220% 100%;opacity:.5;animation:pcrScanline 10s linear infinite;
}
@keyframes pcrScanline{0%{background-position:0% 0}100%{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.post-continue-redesign .pcr-tech-stack::before{animation:none;opacity:.28;background-position:0 0}}
.post-continue-redesign .pcr-tech-layer{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(14px,2.6vw,32px);padding:clamp(18px,2.4vh,24px) 0;border-top:1px solid var(--pcr-border)}
.post-continue-redesign .pcr-tech-layer:first-child{border-top:none;padding-top:0}
.post-continue-redesign .pcr-tech-layer__head{display:flex;align-items:center;gap:12px;flex:0 0 clamp(170px,20vw,250px)}
.post-continue-redesign .pcr-tech-layer__head i{font:600 .62rem/1 var(--mono);color:var(--pcr-muted);font-style:normal}
.post-continue-redesign .pcr-tech-layer__head span{font:600 1rem/1.2 var(--sans);color:var(--pcr-text)}
.post-continue-redesign .pcr-tech-layer__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;flex:1 1 260px}
.post-continue-redesign .pcr-tech-layer__tags li{padding:7px 13px;border-radius:99px;border:1px solid var(--pcr-border);background:var(--pcr-surface);font:500 .68rem/1 var(--sans);color:var(--pcr-text)}
.pcr-tech-layer__tags li.pcr-tech-logo img{height:22px;max-width:100px;width:auto;object-fit:contain;vertical-align:middle;filter:grayscale(1) brightness(1.7);opacity:.82}
.band--light .pcr-tech-layer__tags li.pcr-tech-logo img{filter:grayscale(1) brightness(.55);opacity:.85}
.pcr-tech-layer__tags li.pcr-tech-icon img{height:22px;width:22px;object-fit:contain;vertical-align:middle;filter:invert(1);opacity:.82}
.band--light .pcr-tech-layer__tags li.pcr-tech-icon img{filter:none;opacity:.85}
/* Rows that are entirely logos (Cloud foundations, AI and analytics,
   Application engineering): lay them out left-to-right explicitly rather
   than leaving them to wrap/flow with text, so they can run bigger than
   the mixed logo+text rows without risking a stray wrap. */
.pcr-tech-layer__tags.-logos{display:flex;flex-wrap:nowrap;align-items:center;gap:18px}
.pcr-tech-layer__tags.-logos li{padding:0;border:0;background:none}

.post-continue-redesign .pcr-tech-layer:nth-child(1){border-top-color:rgba(var(--tdc-cyan-rgb),.4)}
.post-continue-redesign .pcr-tech-layer:nth-child(2),.post-continue-redesign .pcr-tech-layer:nth-child(3){border-top-color:rgba(var(--tdc-purple-rgb),.4)}
.post-continue-redesign .pcr-tech-layer:nth-child(4){border-top-color:rgba(var(--tdc-green-rgb),.4)}
:root:not([data-theme="light"]) .pcr-tech-layer:nth-child(1) .pcr-tech-layer__head span{color:var(--tdc-cyan)}
:root:not([data-theme="light"]) .pcr-tech-layer:nth-child(2) .pcr-tech-layer__head span,:root:not([data-theme="light"]) .pcr-tech-layer:nth-child(3) .pcr-tech-layer__head span{color:var(--tdc-purple-text)}
:root:not([data-theme="light"]) .pcr-tech-layer:nth-child(4) .pcr-tech-layer__head span{color:var(--tdc-green)}
:root:not([data-theme="light"]) .pcr-tech-layer:nth-child(5) .pcr-tech-layer__head span{color:var(--tdc-cyan)}
[data-theme="light"] .pcr-tech-layer:nth-child(1) .pcr-tech-layer__head span,[data-theme="light"] .pcr-tech-layer:nth-child(5) .pcr-tech-layer__head span{color:var(--tdc-cyan-ink)}
[data-theme="light"] .pcr-tech-layer:nth-child(2) .pcr-tech-layer__head span,[data-theme="light"] .pcr-tech-layer:nth-child(3) .pcr-tech-layer__head span{color:var(--tdc-purple-ink)}
[data-theme="light"] .pcr-tech-layer:nth-child(4) .pcr-tech-layer__head span{color:var(--tdc-green-ink)}

.post-continue-redesign .pcr-split-lead .intro{max-width:38ch}
.post-continue-redesign .pcr-principles{list-style:none;margin:clamp(28px,4vh,40px) 0 0;padding:0;display:flex;flex-direction:column}
.post-continue-redesign .pcr-principles li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--pcr-border)}
.post-continue-redesign .pcr-principles li:first-child{border-top:none;padding-top:0}
.post-continue-redesign .pcr-principles li>i{flex:none;width:1.5em;font:600 .68rem/1.6 var(--mono);font-style:normal}
.post-continue-redesign .pcr-principles b{display:block;margin-bottom:4px;font:600 .88rem/1.3 var(--sans);color:var(--pcr-text)}
.post-continue-redesign .pcr-principles p{margin:0;color:var(--pcr-muted);font-size:.76rem;line-height:1.55}
.post-continue-redesign .pcr-principles small{display:block;margin-top:4px;color:var(--pcr-muted);opacity:.8;font-size:.66rem}

:root:not([data-theme="light"]) .pcr-principles li>i{color:var(--tdc-green)}
:root:not([data-theme="light"]) .pcr-principles li:nth-child(even)>i{color:var(--tdc-cyan)}
:root:not([data-theme="light"]) .pcr-principles li:last-child>i{color:var(--tdc-green)}
[data-theme="light"] .pcr-principles li>i{color:var(--tdc-green-ink)}
[data-theme="light"] .pcr-principles li:nth-child(even)>i{color:var(--tdc-cyan-ink)}
[data-theme="light"] .pcr-principles li:last-child>i{color:var(--tdc-green-ink)}

.post-continue-redesign .pcr-problem-matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.post-continue-redesign .pcr-problem-tile{
  position:relative;isolation:isolate;padding:18px;border-radius:6px;border-top:2px solid rgba(157,177,187,.3);background:var(--pcr-surface);
  --pcr-tilt-x:0deg;--pcr-tilt-y:0deg;--pcr-lift:0px;--pcr-glow-op:0;--pcr-glow-x:50%;--pcr-glow-y:50%;
  transform:translateY(var(--pcr-lift)) perspective(900px) rotateX(var(--pcr-tilt-x)) rotateY(var(--pcr-tilt-y));
  transition:box-shadow .3s ease,transform .4s cubic-bezier(.22,.72,.18,1),border-color .3s ease;
}
.post-continue-redesign .pcr-problem-tile::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(180px circle at var(--pcr-glow-x) var(--pcr-glow-y),rgba(var(--pcr-green-rgb),.14),transparent 65%);opacity:var(--pcr-glow-op);transition:opacity .4s ease}
.post-continue-redesign .pcr-problem-tile:hover,.post-continue-redesign .pcr-problem-tile:focus-within{--pcr-lift:-2px;border-color:rgba(var(--pcr-cyan-rgb),.4);box-shadow:0 14px 30px -20px rgba(0,0,0,.45)}
[data-theme="light"] .post-continue-redesign .pcr-problem-tile:hover,[data-theme="light"] .post-continue-redesign .pcr-problem-tile:focus-within{box-shadow:0 14px 30px -20px rgba(28,62,84,.2)}
.post-continue-redesign .pcr-problem-tile b{display:block;min-height:2.5em;margin-bottom:7px;font:600 .86rem/1.25 var(--sans);color:var(--pcr-text)}
.post-continue-redesign .pcr-problem-tile p{margin:0;color:var(--pcr-muted);font-size:.78rem;line-height:1.5}
.post-continue-redesign .pcr-problem-tile.-featured{grid-column:span 2;padding:24px}
.post-continue-redesign .pcr-problem-tile.-featured b{font-size:1.08rem}
.post-continue-redesign .pcr-problem-tile.-featured p{font-size:.88rem}
@media(min-width:640px){
  .post-continue-redesign .pcr-problem-matrix{grid-template-columns:repeat(3,1fr)}
  .post-continue-redesign .pcr-problem-tile.-featured{grid-column:span 2;padding:26px;display:flex;flex-direction:column;justify-content:center}
}

.post-continue-redesign .pcr-problem-tile:nth-child(1),.post-continue-redesign .pcr-problem-tile:nth-child(2),.post-continue-redesign .pcr-problem-tile:nth-child(3),.post-continue-redesign .pcr-problem-tile:nth-child(5),.post-continue-redesign .pcr-problem-tile:nth-child(10){border-top-color:rgba(var(--tdc-purple-rgb),.45)}
.post-continue-redesign .pcr-problem-tile:nth-child(4),.post-continue-redesign .pcr-problem-tile:nth-child(6),.post-continue-redesign .pcr-problem-tile:nth-child(9){border-top-color:rgba(var(--tdc-cyan-rgb),.45)}
.post-continue-redesign .pcr-problem-tile:nth-child(7),.post-continue-redesign .pcr-problem-tile:nth-child(8){border-top-color:rgba(var(--tdc-green-rgb),.45)}

/* =========================================================================
   Post-Continue redesign — Phase 5: the connected closing chapter.

   Insights, community/CSR and locations merge into one three-column band —
   a plain link list, a short text list and a compact location tag list,
   none of them boxed cards — followed directly by the original closing CTA
   (unchanged copy), whose soft three-colour glow moves from the old
   full-section background onto just the CTA block itself.
   ========================================================================= */
.post-continue-redesign .pcr-closing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);margin-top:clamp(32px,4.5vh,48px)}
.post-continue-redesign .pcr-closing-col h3{margin:0 0 16px;font:600 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--pcr-muted)}
.post-continue-redesign .pcr-closing-col>p{margin:0 0 16px;color:var(--pcr-muted);font-size:.8rem;line-height:1.6}
.post-continue-redesign .pcr-closing-col .inline-link{margin-top:16px;font-size:.56rem}

.post-continue-redesign .pcr-closing-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.post-continue-redesign .pcr-closing-links li{border-top:1px solid var(--pcr-border)}
.post-continue-redesign .pcr-closing-links li:first-child{border-top:none}
.post-continue-redesign .pcr-closing-links a{display:flex;flex-direction:column;gap:4px;padding:14px 0;color:var(--pcr-text);transition:opacity .2s}
.post-continue-redesign .pcr-closing-links a span{font:600 .8rem/1.35 var(--sans)}
.post-continue-redesign .pcr-closing-links a i{font:500 .6rem/1 var(--mono);color:var(--pcr-muted);font-style:normal}
.post-continue-redesign .pcr-closing-links a:hover{opacity:.7}

.post-continue-redesign .pcr-closing-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.post-continue-redesign .pcr-closing-notes li{padding:14px 0;border-top:1px solid var(--pcr-border)}
.post-continue-redesign .pcr-closing-notes li:first-child{border-top:none;padding-top:0}
.post-continue-redesign .pcr-closing-notes b{display:block;margin-bottom:4px;font:600 .8rem/1.3 var(--sans);color:var(--pcr-text)}
.post-continue-redesign .pcr-closing-notes p{margin:0;color:var(--pcr-muted);font-size:.74rem;line-height:1.55}

.post-continue-redesign .pcr-closing-locations{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.post-continue-redesign .pcr-closing-locations li{display:flex;align-items:baseline;gap:6px;padding:9px 14px;border-radius:99px;border:1px solid var(--pcr-border);background:var(--pcr-surface)}
.post-continue-redesign .pcr-closing-locations b{font:600 .74rem/1 var(--sans);color:var(--pcr-text)}
.post-continue-redesign .pcr-closing-locations span{font:500 .56rem/1 var(--mono);color:var(--pcr-muted);text-transform:uppercase;letter-spacing:.04em}

@media(max-width:900px){
  .post-continue-redesign .pcr-closing-grid{grid-template-columns:1fr;gap:clamp(28px,5vh,40px)}
}

.post-continue-redesign .pcr-closing-cta{
  position:relative;max-width:820px;margin:clamp(64px,9vh,110px) auto 0;padding:clamp(40px,6vh,64px) clamp(22px,5vw,48px);text-align:center;border-radius:12px;border:1px solid var(--pcr-border);
  /* Its own strongly-defined surface, not a continuation of the closing
     atmosphere behind it — an opaque backing under the two lights means
     the glow is contained to this box and never spills into the section. */
  background:
    radial-gradient(560px circle at 28% -8%,rgba(var(--pcr-green-rgb),.2),transparent 60%),
    radial-gradient(560px circle at 72% -8%,rgba(var(--pcr-cyan-rgb),.2),transparent 60%),
    var(--pcr-surface-raised);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.55);
}
[data-theme="light"] .post-continue-redesign .pcr-closing-cta{
  background:
    radial-gradient(560px circle at 28% -8%,rgba(var(--pcr-green-rgb),.16),transparent 60%),
    radial-gradient(560px circle at 72% -8%,rgba(var(--pcr-cyan-rgb),.14),transparent 60%),
    var(--pcr-surface-raised);
  box-shadow:0 24px 56px -32px rgba(28,62,84,.16);
}
.post-continue-redesign .pcr-closing-cta h2{font-size:clamp(2.4rem,4.4vw,3.8rem);max-width:16ch;margin-inline:auto}
.post-continue-redesign .pcr-closing-cta .intro{margin-inline:auto}
.post-continue-redesign .pcr-closing-cta .actions{justify-content:center}