/* =====================================================================
   WWM v2 outlook — COPY-SAFE reskin layer for the Work With Me sub-pages.
   Enhances the EXISTING markup only (no copy is retyped). Opt-in: body.tm2.
   Delivers the Individuals-v2 experience generically: progressive reading-
   focus, emphasis accent-bars, numbered-step connector, card spotlight,
   magnetic CTAs, beat navigator, hero fade. Reduced-motion / JS-off safe.
   Loaded AFTER wwm-dark.css. Pairs with wwm-v2.js.
   ===================================================================== */
body.tm2{--tmease:cubic-bezier(.2,.6,.2,1);}

/* --- progressive reading-focus: body copy lifts from dim to full as reached --- */
body.tm2 .prose p{transition:opacity .8s var(--tmease),transform .8s var(--tmease);}
html.js body.tm2 .prose p.tm-dim{opacity:.22;transform:translateY(12px);}
body.tm2 .prose p.tm-lit{opacity:1;transform:none;}

/* --- emphasis lines (.em) get a drawing brass accent bar --- */
body.tm2 .prose .em{position:relative;padding-left:24px;}
body.tm2 .prose .em::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .9s var(--tmease);}
body.tm2 .prose .em.tm-lit::before{transform:scaleY(1);}

/* --- numbered-step connector on .kpoints (counter = decorative, not copy) ---
   Line centring: the circle's true left edge sits at 0 (li::before's left:-Npx cancels the ul's
   own padding-left:Npx exactly), so its centre-x = circleWidth/2. The connector's "left" must equal
   circleWidth/2 - lineWidth/2 to run through that same centre. Desktop (46px circle, 2px line):
   23-1=22px. Mobile (38px circle): 19-1=18px. Was left:23px unchanged at both sizes, which lined
   up close enough on desktop (1px off) but sat visibly off-centre on the smaller mobile circle (5px).
   Stacking: circle has z-index:2, but ul's own ::before/::after had z-index:auto with NO explicit
   value, and client review found the accent line rendering IN FRONT of non-hovered numerals. Root
   cause: `.kpoints:hover li{opacity:.45}` on the dimmed siblings creates a NEW stacking context
   (opacity<1 always does), which traps that li's z-index:2 circle inside it; since ul::after is last
   in tree order among the (now auto/0-level) siblings, it painted on top of that trapped circle. iOS
   Safari can apply :hover after a tap, so this could hit on iPhone too, not just desktop mouse-hover.
   Fix: explicit negative z-index on the line pins it in the earlier "negative z-index descendants"
   paint step, always behind, regardless of any opacity-triggered context on a sibling li. */
body.tm2 .kpoints{counter-reset:kp;position:relative;padding-left:64px;}
body.tm2 .kpoints::before{content:"";position:absolute;left:22px;top:10px;bottom:10px;width:2px;background:var(--hairline);z-index:-1;}
body.tm2 .kpoints::after{content:"";position:absolute;left:22px;top:10px;width:2px;background:var(--accent);height:0;transition:height 1.4s var(--tmease);z-index:-1;}
body.tm2 .kpoints.tm-draw::after{height:calc(100% - 20px);}
body.tm2 .kpoints li{position:relative;transition:opacity .35s var(--tmease);}
body.tm2 .kpoints li::before{content:counter(kp,decimal-leading-zero);  /* NO counter-increment here — pages.css already increments per li (double-increment showed 02,04,06) */position:absolute;left:-64px;top:0;
  width:46px;height:46px;border-radius:50%;background:var(--paper);border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:18px;
  color:var(--accent);transition:background .4s var(--tmease),border-color .4s var(--tmease),color .4s var(--tmease);z-index:2;}
body.tm2 .kpoints:hover li{opacity:.45;}
body.tm2 .kpoints li:hover{opacity:1;}
body.tm2 .kpoints li:hover::before{background:var(--accent);border-color:var(--accent);color:#0c0b0a;}
@media(max-width:560px){body.tm2 .kpoints{padding-left:52px;}body.tm2 .kpoints li::before{left:-52px;width:38px;height:38px;font-size:15px;}
  body.tm2 .kpoints::before,body.tm2 .kpoints::after{left:18px;}}

/* --- cursor spotlight on the numbered pathway cards --- */
body.tm2 .vbreak__item,body.tm2 .cards--num .card{position:relative;overflow:hidden;}
body.tm2 .vbreak__item > *,body.tm2 .cards--num .card > *{position:relative;z-index:1;}
body.tm2 .vbreak__item::after,body.tm2 .cards--num .card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(199,154,83,.09),transparent 62%);
  opacity:0;transition:opacity .35s var(--tmease);}
body.tm2 .vbreak__item:hover::after,body.tm2 .cards--num .card:hover::after{opacity:1;}

/* --- magnetic CTAs --- */
body.tm2 .btn{will-change:transform;}

/* --- hero copy dissolves as you descend (JS-driven opacity) --- */
body.tm2 .phero .frame{will-change:opacity;}

/* --- beat navigator (right-side scroll-spy, built by JS from section eyebrows) --- */
body.tm2 .beatnav{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:15px;}
/* hit area >=44px tall (transparent, around the thin visible dash) so the link is actually
   clickable — the dash itself (::before) stays the original 26px/2px at rest. */
body.tm2 .beatnav a{position:relative;display:flex;align-items:center;width:26px;height:44px;transition:width .3s var(--tmease);}
body.tm2 .beatnav a::before{content:"";display:block;width:100%;height:2px;background:var(--hairline);transition:background .3s var(--tmease);}
body.tm2 .beatnav a:hover,body.tm2 .beatnav a.active{width:44px;}
body.tm2 .beatnav a:hover::before,body.tm2 .beatnav a.active::before{background:var(--accent);}
body.tm2 .beatnav .bn-label{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;
  font-family:var(--sans);font-size:12px;letter-spacing:.03em;color:var(--ink);background:var(--paper-2);border:1px solid var(--hairline);
  padding:6px 11px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .25s var(--tmease);max-width:38vw;overflow:hidden;text-overflow:ellipsis;}
body.tm2 .beatnav a:hover .bn-label{opacity:1;}
@media(max-width:1100px){body.tm2 .beatnav{display:none;}}

@media(prefers-reduced-motion:reduce){
  html.js body.tm2 .prose p.tm-dim{opacity:1;transform:none;}
  body.tm2 .prose .em::before,body.tm2 .kpoints::after{transition:none;}
  body.tm2 .vbreak__item::after,body.tm2 .cards--num .card::after{display:none;}
}

/* terse bullet lists (e.g. Organisations symptoms) — Fil's reduced copy */
body.tm2 .bullets{list-style:none;padding:0;display:grid;gap:10px;margin:20px 0;max-width:60ch;}
body.tm2 .bullets li{position:relative;padding-left:22px;color:var(--ink-2);font-size:clamp(16px,1.3vw,18px);line-height:1.6;}
body.tm2 .bullets li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent);}