/* /hub-joint-pain: the treatments hub for spine and joint pain.
   Loaded after site.css. Everything the page needs beyond the shared
   tokens, header and footer is here. */
:root{
--ink:#0B1D3A;--ink-soft:#1C3461;--ink-muted:#4A6480;--navy-brand:#132C5B;--navy-mid:#163361;
--accent:#2D6EB1;--accent-hover:#1A4B7A;--ice:#7CA9D1;--wash:#EAF1F8;--white:#fff;
--border:rgba(11,29,58,.14);--border-strong:rgba(11,29,58,.28);
/* 'Times New Roman' sits AHEAD of Georgia deliberately. Until the display
   face arrives the browser sets it in whatever comes next, and Georgia is
   far wider: the h1 wrapped to more lines in Georgia, so the hero lost
   height the moment the webfont landed (CLS 0.15 to 0.21 at 400px). Times
   matches the line count, so the swap is invisible. */
--font-display:'Cormorant Garamond','Times New Roman',Georgia,serif;--font-body:'DM Sans',system-ui,sans-serif;
--shadow-hairline:0 1px 2px rgba(11,29,58,.06);--shadow-sm:0 2px 10px rgba(11,29,58,.07);--shadow-md:0 12px 34px rgba(11,29,58,.12);--shadow-lift:0 22px 56px rgba(11,29,58,.20);
--ease:cubic-bezier(.16,1,.3,1);--wrap:1200px;
--hc-nav-h:64px;            /* fallback; the script sets the real header height */
--hc-bar-h:52px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px)}
html,body{margin:0;padding:0}
body{background:var(--white);color:var(--ink);font-family:var(--font-body);font-weight:400;font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* parts waiting to slide in must not cause sideways scroll */
main{overflow-x:clip}
img,video,svg{display:block;max-width:100%}
/* Source markup carries width/height attributes; those map to presentational
   sizing hints and a non-auto height stops aspect-ratio from computing. */
img[width][height]{height:auto}
/* ...but that rule is (0,2,1) and beats a plain `.x img{height:100%}`, which
   silently killed object-fit on every cover-cropped photo. Cover containers
   must out-specify it. */
.cond__ph img[width][height],.hfig__frame img[width][height]{height:100%}
a{color:var(--accent);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--accent-hover)}
/* colors_and_type.css underlines every link and caps every paragraph; the
   page's own links say for themselves when they are underlined */
main a:not(.btn){border-bottom:0}
main p{max-width:none}
h1,h2,h3{font-family:var(--font-display);font-weight:300;margin:0;letter-spacing:-.01em;text-wrap:pretty}
em{font-style:italic}b,strong{font-weight:500}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sec--dark :focus-visible,.ctaband :focus-visible{outline-color:var(--ice)}
/* a part that receives focus after a jump is not itself a control */
main :is(h1,h2,h3,section,article)[tabindex="-1"]:focus{outline:none}

/* ---------- primitives ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.sec{padding:clamp(76px,9vw,132px) 0;position:relative}
.sec--tint{background:var(--wash)}
.sec--rule{padding-top:0}
.sec--rule>.wrap::before{content:"";display:block;height:1px;background:var(--border);margin-bottom:clamp(76px,9vw,132px)}
.sec--dark{background:var(--navy-brand);color:#fff;overflow:hidden}
.sec--dark h2{color:#fff}
.sec--dark .lede{color:rgba(255,255,255,.78)}
.sec-h2{font-size:clamp(2.2rem,5vw,4.3rem);line-height:1.03}
/* Never constrain a text block tighter than the container it sits in. */
.lede{font-size:1.1875rem;line-height:1.62;color:var(--ink-muted);margin:26px 0 0;font-weight:300}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--font-body);font-size:.9375rem;font-weight:500;padding:16px 30px;border-radius:8px;border:1px solid transparent;background:var(--accent);color:#fff!important;transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .4s var(--ease)}
.btn:hover{background:var(--accent-hover);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.btn--lg{padding:18px 34px;font-size:1rem}
.btn--ice{background:#fff;color:var(--ink)!important}
.btn--ice:hover{background:var(--wash);box-shadow:0 22px 56px rgba(0,0,0,.34)}

/* ---------- reveals, layered over visible defaults ----------
   Nothing is hidden until the script has put .js-anim on <html>. */
.js-anim [data-r]:not([data-r="draw"],[data-r="fork"]){opacity:0;transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js-anim [data-r=""]{transform:translateY(26px)}
.js-anim [data-r="left"]{transform:translateX(-36px)}
.js-anim [data-r="right"]{transform:translateX(36px)}
.js-anim [data-r="scale"]{transform:scale(.94)}
.js-anim [data-r="rise"]{transform:translateY(46px) scale(.97)}
.js-anim [data-r="row"]{transform:translateY(34px)}
.js-anim [data-r="step"]{transform:translateX(18px)}
.js-anim [data-r].is-in{opacity:1;transform:none}
.reveal-mask{display:block;padding-bottom:.16em;margin-bottom:-.16em}
.js-anim .reveal-mask{overflow:hidden}
.js-anim .reveal-mask>span{display:block;transform:translateY(112%);transition:transform 1.1s var(--ease)}
.js-anim .is-in .reveal-mask>span,.js-anim .is-in>.reveal-mask>span{transform:none}

/* ---------- keyframes ---------- */
@keyframes jpNodeHalo{0%{transform:scale(.6);opacity:.75}100%{transform:scale(2.3);opacity:0}}
@keyframes jpNeedle{0%,10%{transform:translate(-46px,-46px)}34%,72%{transform:translate(0,0)}96%,100%{transform:translate(-46px,-46px)}}
@keyframes jpCellOut{0%,32%{transform:translate(0,0) scale(.2);opacity:0}44%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:.85}}
@keyframes jpFlicker{0%,100%{opacity:.9}50%{opacity:.3}}
@keyframes jpHatchFade{0%,100%{opacity:.75}50%{opacity:.12}}
@keyframes jpOrbit{to{transform:rotate(360deg)}}
@keyframes jpVessel{0%{stroke-dashoffset:var(--len,120)}70%,100%{stroke-dashoffset:0}}
@keyframes jpGlyphSpin{to{transform:rotate(360deg)}}
@keyframes jpDrip{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(8px);opacity:0}}
@keyframes jpTick{0%,64%{stroke-dashoffset:30}82%,100%{stroke-dashoffset:0}}
@keyframes jpPlateIn{0%,8%{transform:translateX(-64px);opacity:0}22%,78%{transform:translateX(0);opacity:1}94%,100%{transform:translateX(64px);opacity:0}}
@keyframes jpPlateScan{0%,24%{opacity:0;transform:translateY(-26px)}34%{opacity:.95}58%{opacity:.95;transform:translateY(26px)}68%,100%{opacity:0;transform:translateY(26px)}}
@keyframes jpFilmScan{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(30px);opacity:0}}
@keyframes jpLanded{0%{background-size:0 1px}35%,70%{background-size:100% 1px}100%{background-size:100% 0}}
@keyframes jpAnswer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- shared injected nav (header.js) ----------
   Transparent over the white hero, then a solid white bar with a
   saturate-and-blur backdrop past 80px, and back again on the way up. */
.nav{position:fixed;inset:0 0 auto;z-index:60;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom:1px solid transparent;transition:background .45s var(--ease),backdrop-filter .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease),box-shadow .45s var(--ease)}
/* Fixed above, so the nav occupies no flow space on this page and the
   site.css reservation on [data-global-header] must not apply: it would
   open an empty band above the hero. Kept beside the rule that causes
   it, so a change to either is made with the other in view
   (tests/e2e/header-reserve.spec.ts). */
[data-global-header]{min-height:0}
.nav.is-stuck{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom-color:var(--border);padding-top:12px;padding-bottom:12px;box-shadow:var(--shadow-hairline)}
.nav__logo,.nav__logo img{height:26px;width:auto}
.nav__logo,.nav__logo svg *{color:var(--ink)}
.nav__menu,.nav__menu a{color:var(--ink)}
.nav.is-stuck .nav__logo,.nav.is-stuck .nav__menu,.nav.is-stuck .nav__menu a{color:var(--ink)}
.nav__menu a:hover{color:var(--accent)}

/* ================= HERO ================= */
.hero{position:relative;overflow:hidden;padding:clamp(112px,11vw,150px) 0 clamp(8px,1.5vw,20px);background:#fff}
.hero__inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:clamp(28px,3.6vw,56px);align-items:center}
.hero h1{font-size:clamp(2.3rem,4.3vw,3.9rem);line-height:1.05;letter-spacing:-.018em}
/* when the heading must wrap it breaks between its two phrases */
.hero h1 .h-lead{display:inline-block}
.hero__turn{font-family:var(--font-display);font-weight:300;font-size:clamp(1.4rem,2.1vw,1.85rem);line-height:1.25;color:var(--ink-soft);margin:22px 0 0}
.hero__turn-a,.hero__turn-b{display:inline-block}
.hero__turn em{color:var(--accent);background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;padding-bottom:2px}
.hero .hero__sub{max-width:none;font-size:1.1875rem;line-height:1.65;color:var(--ink-muted);font-weight:300;margin:22px 0 0}
.hero__ctas{margin:34px 0 0;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hfig{position:relative}
/* Safari sizes this from the row height, not the track, when the frame has
   no in-flow content: width:100% makes the inline size definite and
   align-self:start stops the stretch, so the ratio runs width to height
   in both engines. */
.hfig__frame{position:relative;width:100%;align-self:start;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md);background:var(--wash);aspect-ratio:5/6}
.hfig__frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease)}
/* Never a zero-area clip: it fades and settles instead. */
.js-anim .hfig__frame{opacity:0;transform:translateY(24px) scale(.98);transition:opacity 1s var(--ease) .3s,transform 1.25s var(--ease) .3s}
.js-anim .is-in .hfig__frame{opacity:1;transform:none}
/* first paint, in order: the heading rises, the frame is said in two
   beats, the third option is underlined, then the answer and the call */
.js-anim .hero .boot{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js-anim .hero.boot-1 .boot--1,.js-anim .hero.boot-2 .boot--2,.js-anim .hero.boot-3 .boot--3{opacity:1;transform:none}
.js-anim .hero__turn-b{opacity:0;transition:opacity .8s var(--ease) .55s}
.js-anim .hero.boot-1 .hero__turn-b{opacity:1}
.js-anim .hero__turn em{background-size:0 1px;transition:background-size .9s var(--ease) 1.3s}
.js-anim .hero.boot-1 .hero__turn em{background-size:100% 1px}
.js-anim .hero .reveal-mask>span{transition-delay:120ms}

/* ================= THE BAR THAT FOLLOWS THE READER ================= */
.hc-bar{
/* under the phone menu's sheet and the nav (60), over the page */
position:fixed;left:0;right:0;top:var(--hc-nav-h);z-index:49;height:var(--hc-bar-h);
background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
border-bottom:1px solid var(--border);
transform:translateY(-8px);opacity:0;visibility:hidden;
transition:opacity .26s,transform .36s var(--ease),visibility 0s .36s}
.hc-bar.is-on{transform:none;opacity:1;visibility:visible;transition:opacity .26s,transform .36s var(--ease)}
body.nav-open .hc-bar{opacity:0;visibility:hidden}
.hc-bar__track{max-width:var(--wrap);margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:stretch;gap:clamp(18px,2.4vw,32px);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:28px}
.hc-bar__track::-webkit-scrollbar{display:none}
.hc-bar__track a{position:relative;flex:none;display:flex;align-items:center;font-size:.875rem;font-weight:500;color:var(--ink-muted);white-space:nowrap}
.hc-bar__track a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease)}
.hc-bar__track a:hover,.hc-bar__track a[aria-current]{color:var(--ink)}
.hc-bar__track a:hover::after{transform:scaleX(.35)}
.hc-bar__track a[aria-current]::after{transform:scaleX(1)}
.hc-bar__track a:focus-visible{outline-offset:-4px}
.hc-bar__progress{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--ice);transform-origin:left;transform:scaleX(var(--hc-p,0))}

/* ================= CONDITIONS ================= */
.ind{display:grid;grid-template-columns:232px minmax(0,1fr);gap:clamp(36px,5vw,84px);margin-top:clamp(40px,5vw,68px);align-items:start}
.atlas{position:sticky;top:calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px)}
.atlas__fig{width:100%;height:auto;overflow:visible}
.atlas .bone{fill:none;stroke:var(--border-strong);stroke-width:1.4;stroke-linecap:round}
.atlas .tick{stroke:var(--border);stroke-width:1.2;stroke-linecap:round}
.atlas .hit{fill:transparent;pointer-events:all}
.atlas .halo{fill:rgba(45,110,177,.22);opacity:0;transform-box:fill-box;transform-origin:center}
.atlas .node{fill:#fff;stroke:var(--accent);stroke-width:1.6;transform-box:fill-box;transform-origin:center;transition:fill .4s var(--ease),transform .4s var(--ease)}
.atlas svg a{cursor:pointer;outline:none}
.atlas svg a:hover .node,.atlas svg a.on .node{fill:var(--accent);transform:scale(1.4)}
.js-anim .atlas.is-live svg a.on .halo{animation:jpNodeHalo 1.6s ease-out infinite}
/* the body is drawn, then its joints arrive from the head down */
.js-anim .atlas .bone>*{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.js-anim .atlas .bone>:nth-child(n+3){transition-delay:.25s}
.js-anim .atlas .bone>:nth-child(n+6){transition-delay:.5s}
.js-anim .atlas .bone>:nth-child(n+9){transition-delay:.8s}
.js-anim .atlas .tick{opacity:0;transition:opacity .6s var(--ease) .7s}
.js-anim .atlas svg a{opacity:0;transition:opacity .5s var(--ease) calc(.6s + var(--i,0)*.11s)}
.js-anim .atlas.is-in .bone>*{stroke-dashoffset:0}
.js-anim .atlas.is-in .tick,.js-anim .atlas.is-in svg a{opacity:1}
.atlas__list{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.atlas__list a{position:relative;display:flex;align-items:center;min-height:44px;padding-left:18px;font-size:.9375rem;font-weight:500;color:var(--ink-muted);transition:color .25s var(--ease),padding-left .3s var(--ease)}
.atlas__list a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;border:1.5px solid var(--accent);background:#fff;transition:background .3s var(--ease),transform .3s var(--ease)}
.atlas__list a:hover,.atlas__list a.on{color:var(--ink)}
.atlas__list a:hover{padding-left:22px}
.atlas__list a.on::before,.atlas__list a:hover::before{background:var(--accent);transform:scale(1.25)}

.cond{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(22px,2.8vw,40px);align-items:start;padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--border);scroll-margin-top:8px}
.cond:first-child{border-top:0;padding-top:0}
.cond:last-child{padding-bottom:0}
/* 4/3, not 16/10. Five of the six sources are portrait or square, so a
   wider box threw away up to 58% of the frame and the surviving band
   landed on faces and torsos instead of the joint. */
.cond__ph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--wash)}
.cond__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s var(--ease);filter:saturate(.88)}
/* Focal point per region: the crop is centred on the joint being examined.
   Measured against each source, not guessed. */
[data-region="spine"] .cond__ph img{object-position:50% 62%}
[data-region="knee"] .cond__ph img{object-position:50% 62%}
[data-region="shoulder"] .cond__ph img{object-position:50% 42%}
[data-region="hip"] .cond__ph img{object-position:50% 52%}
[data-region="hand"] .cond__ph img{object-position:50% 70%}
[data-region="foot"] .cond__ph img{object-position:50% 50%}
.cond__ph:hover img,.cond__ph:focus-visible img{transform:scale(1.06);filter:saturate(1)}
.cond h3{font-size:clamp(1.7rem,2.4vw,2.1rem);line-height:1.1}
/* the row a reader asked for by name: its title is underlined once */
.cond h3{background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0 1px;width:fit-content;padding-bottom:4px}
.js-anim .cond.is-landed h3{animation:jpLanded 1.8s var(--ease) both}
.cond__p{margin:6px 0 0;font-size:1rem;line-height:1.6;color:var(--ink-muted);font-weight:300}
.cond__p a{border-bottom:1px solid currentColor!important}
.cond__list{list-style:none;margin:16px 0 0;padding:0;columns:2;column-gap:32px}
.cond__list li{position:relative;break-inside:avoid;padding:5px 0 5px 18px;font-size:.9375rem;line-height:1.45;color:var(--ink-soft)}
.cond__list li::before{content:"";position:absolute;left:1px;top:13px;width:5px;height:5px;border-radius:50%;border:1px solid var(--accent)}
.cond__cta{display:inline-block;padding:10px 0;margin:10px 0 0;color:var(--accent);font-size:.9375rem;font-weight:500}
.cond__cta::after{content:none}
.cond__cta span{display:inline-block;margin-left:6px;transition:transform .3s var(--ease)}
.cond__cta:hover span{transform:translateX(5px)}
.cond__cta{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* "Read more": native, so in-page search and print can open it. On a wide
   screen the lists are simply shown and the handle is not there. */
.fold>summary{list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.cond .fold>summary{display:none}
.fold__less{display:none}
.fold[open]>summary .fold__more{display:none}
.fold[open]>summary .fold__less{display:inline}

/* ================= CANDIDACY ================= */
.verdict{--g:clamp(28px,5vw,80px);margin-top:clamp(36px,4.5vw,60px)}
.verdict__film{width:96px;height:96px;margin:0 auto;border-radius:50%;background:#fff;border:1px solid var(--border)}
.verdict__film .film{fill:var(--navy-brand)}
.verdict__film .filmbone{fill:none;stroke:var(--ice);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.verdict__film .filmscan{stroke:#fff;stroke-width:1.4;opacity:0}
.js-anim .verdict.is-in .filmscan{animation:jpFilmScan 1.5s cubic-bezier(.45,0,.35,1) .2s 2 both}
/* one reading, two answers: the stem leaves the film and forks to the
   badge over each list */
.verdict__fork{position:relative;height:38px;margin:18px calc(25% - var(--g)/4) 0;border:1.5px solid var(--border-strong);border-bottom:0;border-radius:16px 16px 0 0}
.verdict__fork::before{content:"";position:absolute;left:50%;top:-19px;width:1.5px;height:18px;margin-left:-.75px;background:var(--border-strong)}
.js-anim .verdict__fork{transform:scaleX(0);transform-origin:50% 0;transition:transform .7s var(--ease) .25s}
.js-anim .verdict.is-in .verdict__fork{transform:none}
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
.fit__badge{display:grid;place-items:center;width:48px;height:48px;margin:0 auto;border-radius:50%;background:var(--accent)}
.fit__col--no .fit__badge{background:#fff;border:1.5px solid var(--ink-muted)}
.fit__badge svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fit__col--no .fit__badge svg{stroke:var(--ink-muted)}
.js-anim .fit__badge{opacity:0;transform:scale(.6);transition:opacity .5s var(--ease) .6s,transform .7s var(--ease) .6s}
.js-anim .fit__badge path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease) .9s}
.js-anim .verdict.is-in .fit__badge{opacity:1;transform:none}
.js-anim .verdict.is-in .fit__badge path{stroke-dashoffset:0}
.fit__col h3{font-size:clamp(1.6rem,2.3vw,2rem);margin:18px 0 0;text-align:center}
.fit__col ul{list-style:none;margin:22px 0 0;padding:0}
.fit__col li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-top:1px solid rgba(11,29,58,.12);font-size:1rem;line-height:1.6;color:var(--ink-soft);font-weight:300}
.fit__col li::before{content:"";margin-top:5px;width:16px;height:16px;border-radius:50%;border:1px solid var(--accent);background:#fff no-repeat center/9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9 10 3' fill='none' stroke='%232D6EB1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.fit__col--no li::before{border-color:var(--ink-muted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%234A6480' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.js-anim .fit__col li{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(.55s + var(--i,0)*70ms)}
.js-anim .verdict.is-in .fit__col li{opacity:1;transform:none}

/* ================= MECHANISM ================= */
.mech{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,4.5vw,68px);margin-top:clamp(40px,5vw,68px);align-items:start}
.mech__stage{position:sticky;top:calc(var(--hc-nav-h) + var(--hc-bar-h) + 24px);border:1px solid var(--border);border-radius:14px;background:#fff;padding:clamp(14px,2.4vw,28px)}
.mech__stage svg{width:100%;height:auto}
.mech .bone{fill:rgba(11,29,58,.045);stroke:var(--border-strong);stroke-width:1.4}
.mech .space{fill:rgba(45,110,177,.07);stroke:var(--accent);stroke-width:1;stroke-dasharray:4 5}
.mech .cart{fill:none;stroke:var(--ink-muted);stroke-width:2.4;stroke-linecap:round;opacity:.5}
.mech .needle{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.mech .needle-h{stroke:var(--ink);stroke-width:6;stroke-linecap:round;opacity:.85}
/* at rest (no script, reduced motion, print) the needle is in and the
   cells have spread; the loops below only run while the stage is on screen */
.mech__cellfan circle{fill:var(--accent);opacity:.85;transform-box:fill-box;transform-origin:center;transform:translate(var(--dx),var(--dy))}
.js-anim .mech__stage.is-live .mech__needle{animation:jpNeedle 6.4s cubic-bezier(.5,0,.3,1) infinite}
.js-anim .mech__stage.is-live .mech__cellfan circle{animation:jpCellOut 6.4s cubic-bezier(.4,0,.3,1) infinite;animation-delay:var(--dl,0s)}
.mech__lay{opacity:0;transition:opacity .7s var(--ease)}
.mech__lay.on{opacity:1}
.mech .irr{fill:var(--ink-soft)}
.js-anim .is-live .mech__lay.on .irr{animation:jpFlicker 2.4s ease-in-out infinite;animation-delay:var(--dl,0s)}
.mech .hatch{stroke:var(--ink-muted);stroke-width:1.2}
.js-anim .is-live .mech__lay.on .hatch{animation:jpHatchFade 3s ease-in-out infinite;animation-delay:var(--dl,0s)}
.mech__orbit{transform-box:fill-box;transform-origin:center}
.js-anim .is-live .mech__lay.on .mech__orbit{animation:jpOrbit 14s linear infinite}
.mech .imm{fill:none;stroke:var(--accent);stroke-width:1.4}
.mech .vessel{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.js-anim .is-live .mech__lay.on .vessel{stroke-dasharray:var(--len,120);animation:jpVessel 3.4s var(--ease) infinite alternate;animation-delay:var(--dl,0s)}
.mech__cells{display:flex;flex-direction:column;gap:14px}
.mcell{position:relative;display:block;text-align:left;width:100%;font:inherit;color:inherit;background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 26px 22px 30px;cursor:pointer;overflow:hidden;transition:transform .4s var(--ease),box-shadow .45s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.mcell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease)}
.mcell.on{border-color:rgba(45,110,177,.4);box-shadow:var(--shadow-md)}
.mcell.on::before{transform:scaleY(1)}
.mcell:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.mcell__t{display:block;font-family:var(--font-display);font-weight:300;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;transition:color .35s var(--ease)}
.mcell.on .mcell__t{color:var(--accent)}
.mcell__p{display:block;margin:8px 0 0;font-size:1rem;line-height:1.6;color:var(--ink-muted);font-weight:300}

/* ================= PROTOCOL ================= */
.proto__rail{position:relative;padding-left:84px;margin-top:clamp(40px,5vw,68px)}
/* one connector per gap, circle to circle, and nothing after the last */
.pstep:not(:last-child)::before,.pstep:not(:last-child)::after{content:"";position:absolute;left:-59px;top:56px;bottom:2px;width:2px;background:var(--border)}
.pstep:not(:last-child)::after{background:var(--accent);transform:scaleY(var(--seg,1));transform-origin:top}
.js-anim .pstep:not(:last-child)::after{transform:scaleY(var(--seg,0))}
.pstep{position:relative;padding:0 0 40px}
.pstep:last-child{padding-bottom:0}
.pstep__dot{position:absolute;left:-84px;top:2px;width:52px;height:52px;z-index:1;border-radius:50%;background:#fff;border:1px solid var(--border-strong);display:grid;place-items:center;transition:border-color .45s var(--ease),box-shadow .5s var(--ease)}
.pstep__dot svg{width:24px;height:24px;overflow:visible}
.pstep__dot svg *{stroke:var(--ink-muted);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s var(--ease)}
.pstep__dot .fillnode{fill:var(--ink-muted);stroke:none}
.pstep.on .pstep__dot{border-color:var(--accent);box-shadow:0 0 0 5px rgba(45,110,177,.1)}
.pstep.on .pstep__dot svg *{stroke:var(--accent)}
.pstep.on .pstep__dot .fillnode{fill:var(--accent)}
.js-anim .is-live .pstep.on .spin{animation:jpGlyphSpin 6s linear infinite;transform-box:fill-box;transform-origin:center}
.js-anim .is-live .pstep.on .drip{animation:jpDrip 1.8s ease-in infinite}
.js-anim .is-live .pstep.on .tickdraw{stroke-dasharray:30;animation:jpTick 2.6s var(--ease) infinite}
.pstep summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;pointer-events:none}
.pstep h3{font-size:clamp(1.45rem,2vw,1.7rem);line-height:1.2}
.pstep p{margin:4px 0 0;color:var(--ink-muted);font-size:1rem;line-height:1.66;font-weight:300}

/* ================= PATIENTS ================= */
.sec--dark .wrap{position:relative;z-index:2}
.ptgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:44px}
.ptfig{margin:0}
.pttile{position:relative;display:block;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:9/13;background:#0b1d3a;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pttile video,.pttile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),opacity .6s var(--ease)}
.pttile:hover{transform:translateY(-7px);box-shadow:0 26px 60px rgba(0,0,0,.44)}
.pttile:hover video,.pttile:hover img{transform:scale(1.07)}
.pttile__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,22,44,.72),rgba(7,22,44,.06) 58%);transition:opacity .5s var(--ease)}
.pttile:hover .pttile__scrim{opacity:.6}
.pttile__play{position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:transform .45s var(--ease),background .4s var(--ease)}
.pttile__play svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.pttile:hover .pttile__play{transform:translate(-50%,-50%) scale(1.15);background:rgba(255,255,255,.3)}
.pttile__ring{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:1px solid var(--ice);opacity:0;transform:scale(.8);transition:transform .6s var(--ease),opacity .6s var(--ease)}
.pttile:hover .pttile__ring{opacity:.85;transform:scale(1.5)}
.ptcap{margin-top:12px;font-size:.9375rem;color:rgba(255,255,255,.8)}
.ptmore{margin:32px 0 0}
.ptmore a{display:inline-block;padding:10px 0;color:#fff;font-weight:500;font-size:.9375rem;text-decoration:underline;text-decoration-color:var(--ice);text-decoration-thickness:1px;text-underline-offset:5px}
.ptmore a span{display:inline-block;margin-left:6px;transition:transform .3s var(--ease)}
.ptmore a:hover{color:#fff}
.ptmore a:hover span{transform:translateX(5px)}
.ptmodal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px}
.ptmodal[hidden]{display:none}
.ptmodal__bd{position:absolute;inset:0;background:rgba(5,14,30,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ptmodal__box{position:relative;width:min(900px,100%,calc((100svh - 140px)*16/9));aspect-ratio:16/9;background:#000;border-radius:12px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
#pt-modal-frame{position:absolute;inset:0}
.ptmodal__box iframe{width:100%;height:100%;border:0;border-radius:12px}
.ptmodal__x{position:absolute;right:-6px;top:-48px;width:44px;height:44px;background:transparent;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:transform .3s var(--ease)}
.ptmodal__x:hover{transform:rotate(90deg)}
.ptmodal__x:focus-visible{outline-color:#fff}
.js-anim .ptmodal:not([hidden]) .ptmodal__box{animation:jpAnswer .45s var(--ease) both}

/* ================= QUESTIONS ================= */
.jq{margin-top:clamp(32px,4vw,52px)}
.jq__row{border-top:1px solid var(--border)}
.jq__row:last-child{border-bottom:1px solid var(--border)}
.jq__row summary{display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:14px;min-height:44px;padding:26px 0;list-style:none;cursor:pointer;font-family:var(--font-display);font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:300;line-height:1.25;color:var(--ink);transition:color .35s var(--ease),padding-left .4s var(--ease)}
.jq__row summary::-webkit-details-marker{display:none}
.jq__row summary:hover{color:var(--accent);padding-left:8px}
.jq__ic{position:relative;width:22px;height:22px;justify-self:end}
.jq__ic::before,.jq__ic::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform .45s var(--ease),opacity .35s var(--ease)}
.jq__ic::before{width:14px;height:1px;margin:0 0 0 -7px}
.jq__ic::after{width:1px;height:14px;margin:-7px 0 0 0}
.jq__row[open] .jq__ic::after{transform:scaleY(0);opacity:0}
.jq__row[open] .jq__ic::before{transform:rotate(180deg)}
.jq__a{padding:0 60px 30px 0;color:var(--ink-muted);font-size:1.0625rem;line-height:1.72;font-weight:300}
.js-anim .jq__row[open] .jq__a{animation:jpAnswer .5s var(--ease) both}

/* ================= CLOSING CALL ================= */
.ctaband{position:relative;background:var(--navy-brand);color:#fff;padding:clamp(84px,9vw,132px) 32px;overflow:hidden;text-align:center}
.ctaband__inner{position:relative;z-index:2;max-width:46rem;margin:0 auto}
.reader{width:250px;margin:0 auto 34px}
.reader svg{width:100%;height:auto;overflow:visible}
.reader .box{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.2}
.reader .plate{fill:rgba(124,169,209,.16);stroke:var(--ice);stroke-width:1.2}
.reader .platebone{fill:none;stroke:var(--ice);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.reader .beam{stroke:var(--ice);stroke-width:1.4;opacity:0}
.reader .ok{fill:none;stroke:var(--ice);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.js-anim .reader.is-live .plate-g{animation:jpPlateIn 7s cubic-bezier(.5,0,.3,1) infinite}
.js-anim .reader.is-live .beam{animation:jpPlateScan 7s cubic-bezier(.5,0,.3,1) infinite}
.js-anim .reader.is-live .ok{stroke-dasharray:30;animation:jpTick 7s var(--ease) infinite}
.ctaband h2{font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1.06;color:#fff}
.ctaband p{margin:22px 0 32px;color:rgba(255,255,255,.8);font-weight:300;line-height:1.75}

/* ---------- responsive ---------- */
@media (max-width:1080px){
.hero__inner{grid-template-columns:1fr;gap:44px}
.hfig{max-width:520px}
.ind{grid-template-columns:1fr;gap:36px}
.atlas{position:static;display:grid;grid-template-columns:118px minmax(0,1fr);gap:28px;align-items:center;max-width:520px}
.atlas__list{margin:0;padding:0;border:0}
.mech{grid-template-columns:1fr;gap:18px}
/* the drawing stays in view while the four changes are read under it */
.mech__stage{z-index:3;top:calc(var(--hc-nav-h) + var(--hc-bar-h) + 8px);padding:10px;box-shadow:var(--shadow-sm)}
.mech__stage svg{max-height:30vh;margin:0 auto}
.mcell:hover{transform:none}
/* five tiles in one row that slides, so none is left alone on a line */
.ptgrid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(190px,30%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-32px;padding:8px 32px 4px;scroll-padding-inline:32px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 40px),transparent)}
.ptgrid::-webkit-scrollbar{display:none}
.ptfig{scroll-snap-align:start}
.pttile:hover{transform:none;box-shadow:none}
.hc-bar__track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent)}
}
@media (max-width:760px){
:root{--hc-bar-h:48px}
.wrap,.hero__inner{padding:0 20px}
.hc-bar__track{padding:0 20px;gap:22px}
.cond{grid-template-columns:1fr;gap:18px}
.cond__list{columns:1;margin-top:4px}
.cond .fold>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;cursor:pointer;color:var(--accent);font-size:.9375rem;font-weight:500}
.cond .fold>summary::after{content:"";width:8px;height:8px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .35s var(--ease)}
.cond .fold[open]>summary::after{margin-top:4px;transform:rotate(-135deg)}
.cond__cta{margin-top:2px}
.verdict__fork{display:none}
.verdict__film{margin:0}
.fit{grid-template-columns:1fr;gap:40px;margin-top:28px}
.fit__col{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:center}
.fit__badge{margin:0}
.fit__col h3{margin:0;text-align:left}
.fit__col ul{grid-column:1/-1;margin-top:16px}
.proto__rail{padding-left:60px}
.pstep{padding-bottom:22px}
.pstep__dot{left:-60px;top:4px;width:48px;height:48px}
.pstep:not(:last-child)::before,.pstep:not(:last-child)::after{left:-37px;top:54px;bottom:-2px}
/* on a phone each step folds under its own title */
.pstep summary{pointer-events:auto;cursor:pointer}
.pstep summary::after{content:"";flex:none;width:9px;height:9px;margin:-5px 4px 0 0;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg);transition:transform .35s var(--ease)}
.pstep .fold[open] summary::after{margin-top:5px;transform:rotate(-135deg)}
.pstep p{padding-bottom:10px}
.ptgrid{grid-auto-columns:62%;margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
.jq__row summary{grid-template-columns:minmax(0,1fr) 24px;gap:10px;padding:20px 0}
.jq__row summary:hover{padding-left:0}
.jq__a{padding-right:0}
.ctaband{padding-inline:20px}
}

/* ---------- reduced motion: the script never adds .js-anim, so every
   part is in its end state; this stops what is left ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
.hc-bar{transition:none!important}
}

/* ---------- Touch: a tap is not a hover ---------- */
@media (hover:none){
.btn:hover,.mcell:hover,.pttile:hover,.pttile:hover video,.cond__ph:hover img{transform:none}
.pttile:hover .pttile__play{transform:translate(-50%,-50%)}
.jq__row summary:hover,.atlas__list a:hover{padding-left:0}
.atlas__list a:hover{padding-left:18px}
}

/* ---------- print: the finished page, dark on white ---------- */
@media print{
.hc-bar,.nav,.ptmodal,.pttile__play,.pttile__ring,.verdict__fork,.reader,.hero__ctas,.cond .fold>summary,.pstep summary::after,.jq__ic,.ptmore{display:none!important}
main *,main *::before,main *::after{animation:none!important;transition:none!important}
.js-anim [data-r],.js-anim .reveal-mask>span,.js-anim .hero .boot,.js-anim .hero__turn-b,.js-anim .hfig__frame,.js-anim .fit__badge,.js-anim .fit__col li,.js-anim .atlas svg a,.js-anim .atlas .tick{opacity:1!important;transform:none!important}
.js-anim .atlas .bone>*,.js-anim .fit__badge path{stroke-dashoffset:0!important}
.js-anim .hero__turn em{background-size:100% 1px!important}
.js-anim .pstep:not(:last-child)::after{transform:none!important}
.sec,.ctaband,.hero{padding:28px 0!important}
.sec--tint,.sec--dark,.ctaband{background:#fff!important;color:var(--ink)!important}
.sec--dark h2,.ctaband h2,.sec--dark .lede,.ctaband p,.ptcap{color:var(--ink)!important}
.atlas,.mech__stage{position:static!important}
.ptgrid{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-flow:row!important;overflow:visible!important;margin:16px 0 0!important;padding:0!important;-webkit-mask-image:none!important;mask-image:none!important}
.cond,.pstep,.fit__col li,.jq__row,.ptfig{break-inside:avoid}
}