/* ==========================================================================
   Home header.

   The opening sequence from the heartbeat build, lifted onto the homepage:
   three points of focus collapse to nothing, the record flies in from the
   corners and is drawn into that point, and the consultation it was all about
   opens out of it.

   Every token it needs is declared on the journey itself rather than on :root,
   so nothing here can reach the rest of the page - the site has its own --ink
   and --green and they keep their own values everywhere else.
   ========================================================================== */
.zoom-journey{
  --canvas:#0b6164;
  --teal:#2e7d78;
  --ink:#121716;
  --green:#28635f;
  --paper:#fafaf8;
  --line:#dce3df;
  --care-500:#17999b;
  --azure-600:#266ea4;
  --moss-600:#16674f;
  --stage-h:100lvh;
}
.zoom-journey,.zoom-journey *{box-sizing:border-box}

/* The site styles h1, h2, p, span, b and strong directly, and a direct rule
   beats an inherited one however specific the ancestor is - which is why the
   header's white title came through in the site's ink. Inside the journey those
   elements take their colour from whatever encloses them again. This sits
   BEFORE the header's own rules, so anything the header colours on purpose
   still wins; it only undoes the page's typography reaching in.

   One class plus :is() lands it at exactly the right rank: it ties with the
   site's own scoped heading rules and wins on load order, while the header's
   own two-class rules still outrank it. Doubling the class was too strong -
   it overrode the colours the header sets on purpose. */
.zoom-journey{color:#121716}
.zoom-journey :is(p,span,b,strong,em,i,small,li,dt,dd,time,mark,a,br,figcaption){
  color:inherit}
/* The page sets  h1,h2,h3,h4,h5,h6 { color:#171817 !important }  on every
   heading it has. A self-contained header dropped into that has no way to
   answer except in kind: same weight, more specific, so it wins and the
   headings go back to taking their colour from the composition they are in. */
.zoom-journey :is(h1,h2,h3,h4,h5,h6){color:inherit !important}


@keyframes float{0%,100%{transform:translate3d(0,-5px,0) rotate(-.35deg)}50%{transform:translate3d(0,7px,0) rotate(.35deg)}}


@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}



@keyframes sharpen{0%,100%{filter:blur(46px);transform:scale(1.14)}50%{filter:blur(2px);transform:scale(1)}}
.zoom-journey .floating-hero{height:100svh;min-height:680px;position:relative;display:grid;place-items:center;isolation:isolate;overflow:hidden}
.zoom-journey .floating-copy{width:min(620px,44vw);position:relative;z-index:20;text-align:center}
.zoom-journey .floating-kicker{margin:0 0 18px;color:#8b9693;font-size:20px;letter-spacing:-.03em}
.zoom-journey .floating-copy h1{margin:0;font-size:clamp(52px,5.2vw,82px);font-weight:600;line-height:.92;letter-spacing:-.065em}
.zoom-journey .floating-copy h1 em{color:var(--green);font-style:normal;font-weight:400}
.zoom-journey .floating-copy>p:not(.floating-kicker){max-width:500px;margin:25px auto 0;color:#707a77;font-size:16px;line-height:1.55}
.zoom-journey .floating-button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;margin-top:28px;padding:0 22px;border-radius:999px;color:#fff;background:var(--ink);box-shadow:0 13px 28px rgba(18,23,22,.16);font-size:14px;font-weight:600;transition:transform .2s,box-shadow .2s}
.zoom-journey .floating-button:hover{box-shadow:0 16px 34px rgba(18,23,22,.22);transform:translateY(-2px)}
.zoom-journey .floating-secondary{display:flex;justify-content:center;gap:8px;margin-top:16px;color:#7d8784;font-size:13px}
.zoom-journey .floating-button:focus-visible,.zoom-journey .floating-secondary:focus-visible,.zoom-journey .floating-nav a:focus-visible{outline:3px solid #55aaa2;outline-offset:4px}
.zoom-journey .card-field{position:absolute;z-index:2;inset:0;pointer-events:none}
.zoom-journey .float-card{--mouse-x:0px;--mouse-y:0px;position:absolute;transform:translate3d(var(--mouse-x),var(--mouse-y),0);transition:transform .9s cubic-bezier(.2,.7,.2,1);will-change:transform}
.zoom-journey .card-inner{width:100%;height:100%;overflow:hidden;border:1px solid rgba(37,62,57,.12);border-radius:20px;background:rgba(255,255,255,.9);box-shadow:0 22px 38px rgba(31,52,48,.14),0 4px 12px rgba(31,52,48,.07);backdrop-filter:blur(12px);animation:float 7s ease-in-out infinite;animation-delay:var(--delay,0s)}
.zoom-journey .ui-card{padding:17px;color:#25302d}
.zoom-journey .ui-card small,.zoom-journey .ui-card b,.zoom-journey .ui-card em{display:block}
.zoom-journey .ui-card small{color:#74817d;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.zoom-journey .ui-card b{font-size:13px}
.zoom-journey .ui-card em{color:#78837f;font-size:9px;font-style:normal}
.zoom-journey .card-profile{width:180px;height:92px;top:8%;left:31%;--delay:-4.1s}
.zoom-journey .card-report{width:190px;height:138px;top:-3%;right:30%;--delay:-2.2s}
.zoom-journey .card-biomarker{width:178px;height:146px;top:8%;right:6%;--delay:-5s}
.zoom-journey .card-source{width:180px;height:126px;top:37%;right:-1%;--delay:-.8s}
.zoom-journey .card-timeline{width:182px;height:164px;bottom:5%;left:7%;--delay:-4.8s}
.zoom-journey .card-files{width:184px;height:168px;right:29%;bottom:-5%;--delay:-3.8s}
.zoom-journey .card-claim{width:190px;height:132px;right:6%;bottom:7%;--delay:-2.7s}
.zoom-journey .card-review{width:180px;height:82px;top:65%;left:1%;--delay:-.3s}
.zoom-journey .profile-card,.zoom-journey .review-card{display:flex;align-items:center;gap:12px}
.zoom-journey .avatar,.zoom-journey .review-card>span{width:40px;height:40px;display:grid;flex:0 0 auto;place-items:center;border-radius:50%;color:#fff;background:var(--green);font-size:12px;font-weight:600}
.zoom-journey .profile-card b,.zoom-journey .review-card b{margin:5px 0}
.zoom-journey .report-card b{margin:17px 0 13px;font-size:16px;line-height:1.16}
.zoom-journey .report-card>span{display:grid;gap:5px}
.zoom-journey .report-card i{height:5px;border-radius:3px;background:#dbe6e2}
.zoom-journey .report-card i:nth-child(2){width:78%}
.zoom-journey .report-card i:nth-child(3){width:55%}
.zoom-journey .biomarker-card strong{display:block;margin:7px 0 2px;font-size:28px}
.zoom-journey .biomarker-card em{color:#2b7267}
.zoom-journey .biomarker-card svg{margin-top:8px}
.zoom-journey .biomarker-card path{fill:none;stroke:var(--green);stroke-width:2}
.zoom-journey .biomarker-card circle{fill:#b55e4f}
.zoom-journey .source-card>span{float:right;padding:5px 7px;border-radius:6px;color:#246a60;background:#dff0ec;font-size:8px;font-weight:600}
.zoom-journey .source-card b{margin:18px 0 6px}
.zoom-journey .timeline-card>small{margin-bottom:14px}
.zoom-journey .timeline-card>span{display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid #e7ebe9}
.zoom-journey .timeline-card i{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.zoom-journey .timeline-card b{font-size:10px}
.zoom-journey .timeline-card em{font-size:8px}
.zoom-journey .files-card>small{margin-bottom:10px}
.zoom-journey .files-card>span{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:center;padding:8px 0;border-top:1px solid #e7ebe9}
.zoom-journey .files-card i{padding:5px 3px;border-radius:5px;color:#fff;background:#a86154;text-align:center;font-size:7px;font-style:normal}
.zoom-journey .files-card b{font-size:10px}
.zoom-journey .claim-card p{margin:15px 0 12px;font-size:14px;line-height:1.4}
.zoom-journey .claim-card mark{color:inherit;background:#d3ebe6;border-bottom:2px solid var(--teal)}
.zoom-journey .claim-card b{color:var(--teal);font-size:9px}
.zoom-journey .review-card>span{width:36px;height:36px;background:#e2f2ee;color:#246a60}
.zoom-journey .review-card b{font-size:11px}
@media(max-width:1100px){
.zoom-journey .floating-copy{width:min(580px,56vw)}
.zoom-journey .card-profile,.zoom-journey .card-report,.zoom-journey .card-review,.zoom-journey .card-care{display:none}
.zoom-journey .card-biomarker{right:3%}
.zoom-journey .card-timeline{left:4%}
.zoom-journey .card-claim{right:3%}
}
@media(max-width:720px){
.zoom-journey .floating-hero{min-height:650px}
.zoom-journey .floating-copy{width:calc(100% - 44px);margin-top:0}
.zoom-journey .floating-kicker{font-size:16px}
.zoom-journey .floating-copy h1{font-size:clamp(42px,12vw,58px);line-height:.96}
.zoom-journey .floating-copy>p:not(.floating-kicker){max-width:330px;font-size:14px}
.zoom-journey .float-card .card-inner{border-radius:15px}
.zoom-journey .card-biomarker{width:112px;height:105px;top:12%;right:-32px}
.zoom-journey .card-source{display:none}
.zoom-journey .card-timeline{width:112px;height:112px;bottom:-34px;left:19%}
.zoom-journey .card-files{width:118px;height:116px;right:18%;bottom:-42px}
.zoom-journey .card-claim{width:115px;height:96px;right:-28px;bottom:11%}
.zoom-journey .ui-card{padding:11px}
.zoom-journey .biomarker-card strong{font-size:20px}
.zoom-journey .biomarker-card svg{margin-top:3px}
.zoom-journey .timeline-card>span,.zoom-journey .files-card>span{padding:5px 0}
.zoom-journey .timeline-card>small,.zoom-journey .files-card>small{margin-bottom:5px}
.zoom-journey .claim-card p{margin:8px 0;font-size:10px}
.zoom-journey .claim-card b{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
.zoom-journey .card-inner{animation:none}
.zoom-journey .float-card{transition:none}
.zoom-journey .floating-button{transition:none}
}
.zoom-journey .ui-card small,.zoom-journey .ui-card em{color:#596763}
.zoom-journey .floating-kicker{color:#5e6d69}
.zoom-journey .floating-copy>p:not(.floating-kicker),.zoom-journey .floating-secondary{color:#596763}
.zoom-journey .floating-copy h1{font-size:inherit;line-height:normal}
.zoom-journey .floating-copy h1 span{display:block;white-space:nowrap;font-size:clamp(66px,6.7vw,108px);font-weight:600;line-height:.92}
.zoom-journey .floating-copy h1 em{max-width:620px;display:block;margin:18px auto 0;font-size:clamp(28px,2.7vw,42px);line-height:1.02;letter-spacing:-.05em}
.zoom-journey .card-review{top:60%;left:6%}
@media(max-width:720px){
.zoom-journey .floating-copy h1 span{white-space:normal;font-size:clamp(50px,13vw,64px);line-height:.92}
.zoom-journey .floating-copy h1 em{max-width:390px;margin-top:14px;font-size:clamp(25px,7vw,34px);line-height:1.02}
.zoom-journey .card-review{left:1%}
}
.zoom-journey .floating-copy{width:min(1000px,72vw)}
.zoom-journey .floating-copy h1 span{font-size:clamp(72px,7.4vw,118px);text-align:center}
.zoom-journey .floating-perspective{margin:18px auto 0!important;color:#4e5d59!important;font-size:clamp(17px,1.45vw,22px)!important;line-height:1.4!important}
.zoom-journey .mini-record-card{display:grid;align-content:center}
.zoom-journey .mini-record-card b{margin:9px 0 6px;line-height:1.25}
.zoom-journey .card-diagnosis{width:166px;height:98px;top:24%;left:13%;--delay:-2.9s}
.zoom-journey .card-medication{width:170px;height:98px;top:24%;right:13%;--delay:-4.4s}
.zoom-journey .card-genetics{width:164px;height:96px;bottom:24%;left:15%;--delay:-1.1s}
.zoom-journey .card-note{width:164px;height:96px;right:15%;bottom:24%;--delay:-5.2s}
@media(max-width:1100px){
.zoom-journey .floating-copy{width:min(760px,68vw)}
.zoom-journey .card-diagnosis,.zoom-journey .card-medication,.zoom-journey .card-genetics,.zoom-journey .card-note{display:none}
}
@media(max-width:720px){
.zoom-journey .floating-copy{width:calc(100% - 38px)}
.zoom-journey .floating-copy h1 span{font-size:clamp(50px,13vw,64px)}
.zoom-journey .floating-perspective{max-width:340px;font-size:16px!important}
}
.zoom-journey .patient-story{min-height:100svh;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,520px);gap:clamp(50px,8vw,130px);align-items:end;padding:clamp(110px,10vw,160px) max(28px,calc((100vw - 1320px)/2));overflow:hidden;color:#fff;background:#17211f}
.zoom-journey .patient-story-image{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 48%;transform:scale(1.06);transition:transform 1.5s cubic-bezier(.2,.75,.25,1)}
.zoom-journey .patient-story.is-visible .patient-story-image{transform:scale(1)}
.zoom-journey .patient-story-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,16,.9) 0%,rgba(10,18,16,.64) 38%,rgba(10,18,16,.14) 67%,rgba(10,18,16,.5) 100%),linear-gradient(0deg,rgba(10,18,16,.72),transparent 52%)}
.zoom-journey .patient-story-copy,.zoom-journey .patient-timeline{position:relative;z-index:1;opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.25,1)}
.zoom-journey .patient-story.is-visible .patient-story-copy,.zoom-journey .patient-story.is-visible .patient-timeline{opacity:1;transform:none}
.zoom-journey .patient-timeline{transition-delay:.16s}
.zoom-journey .patient-story-copy{max-width:690px;padding-bottom:28px}
.zoom-journey .patient-story-copy>p:first-child{margin:0 0 22px;color:#9dd9d2;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.zoom-journey .patient-story-copy h2{max-width:680px;margin:0;font-size:clamp(52px,6vw,88px);font-weight:400;line-height:.95;letter-spacing:-.06em}
.zoom-journey .patient-story-copy>p:last-child{max-width:610px;margin:30px 0 0;color:#d6e1de;font-size:18px;line-height:1.65}
.zoom-journey .patient-timeline{align-self:center;max-height:calc(100svh - 100px);padding:26px;border:1px solid rgba(255,255,255,.28);border-radius:24px;color:#17211f;background:rgba(255,253,249,.9);box-shadow:0 28px 70px rgba(0,0,0,.22);backdrop-filter:blur(18px);overflow:auto}
.zoom-journey .patient-timeline .patient-timeline-head{display:flex;align-items:start;justify-content:space-between;gap:20px;padding-bottom:19px;border-bottom:1px solid #d9e0dd}
.zoom-journey .patient-timeline .patient-timeline-head small{color:#64716d;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.zoom-journey .patient-timeline h3{margin:7px 0 0;font-size:26px}
.zoom-journey .patient-timeline .patient-timeline-head>span{padding:7px 9px;border-radius:8px;color:#256b62;background:#dceeea;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.zoom-journey .patient-timeline ol{margin:0;padding:0;list-style:none}
.zoom-journey .patient-timeline li{position:relative;display:grid;grid-template-columns:76px 1fr;gap:16px;padding:22px 0 22px 24px;border-bottom:1px solid #dce2df}
.zoom-journey .patient-timeline li:last-child{border-bottom:0}
.zoom-journey .patient-timeline li::before{width:9px;height:9px;position:absolute;top:27px;left:0;border:3px solid #d5eae6;border-radius:50%;background:#2f7d78;content:""}
.zoom-journey .patient-timeline li:not(:last-child)::after{width:1px;position:absolute;top:38px;bottom:-28px;left:4px;background:#b8cfca;content:""}
.zoom-journey .patient-timeline time{color:#596763;font-size:11px}
.zoom-journey .patient-timeline b{font-size:14px}
.zoom-journey .patient-timeline li p{margin:7px 0 9px;color:#596763;font-size:12px;line-height:1.45}
.zoom-journey .patient-timeline a{color:#286c67;font-size:10px;font-weight:600}
.zoom-journey .patient-timeline a:focus-visible{outline:3px solid #55aaa2;outline-offset:3px}
@media(max-width:900px){
.zoom-journey .patient-story{grid-template-columns:1fr;align-items:end;padding:100px 22px 28px}
.zoom-journey .patient-story-image{object-position:42% center}
.zoom-journey .patient-story-shade{background:linear-gradient(0deg,rgba(10,18,16,.94) 0%,rgba(10,18,16,.62) 53%,rgba(10,18,16,.18) 100%)}
.zoom-journey .patient-story-copy{padding:0}
.zoom-journey .patient-story-copy h2{font-size:clamp(44px,11vw,68px)}
.zoom-journey .patient-story-copy>p:last-child{font-size:16px}
.zoom-journey .patient-timeline{width:100%;max-height:none;align-self:end;padding:20px;border-radius:20px}
.zoom-journey .patient-timeline ol{display:grid;grid-template-columns:1fr 1fr}
.zoom-journey .patient-timeline li:nth-child(odd){border-right:1px solid #dce2df}
.zoom-journey .patient-timeline li:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:620px){
.zoom-journey .patient-story{min-height:auto;padding-top:76svh}
.zoom-journey .patient-story-image{height:100%;object-position:43% top}
.zoom-journey .patient-story-copy h2{font-size:44px}
.zoom-journey .patient-timeline ol{grid-template-columns:1fr}
.zoom-journey .patient-timeline li{grid-template-columns:68px 1fr}
.zoom-journey .patient-timeline li:nth-child(odd){border-right:0}
.zoom-journey .patient-timeline li:nth-last-child(2){border-bottom:1px solid #dce2df}
}
.zoom-journey{height:300svh;position:relative;background:#fafaf8}
.zoom-journey .floating-hero{position:sticky;top:0}
.zoom-journey .patient-zoom{position:absolute;z-index:35;inset:0;opacity:0;clip-path:inset(61% 6% 27% calc(100% - 170px) round 20px);pointer-events:none;will-change:clip-path,transform}
.zoom-journey .patient-zoom img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.zoom-journey .patient-story{min-height:100%;position:absolute;z-index:40;inset:0;opacity:0;pointer-events:none}
.zoom-journey .patient-story-image{object-position:center 42%}
.zoom-journey .floating-copy,.zoom-journey .float-card{transition:opacity .22s linear}
@media(max-width:620px){
.zoom-journey{height:280svh}
.zoom-journey .patient-story{min-height:100%;padding-top:32svh}
.zoom-journey .patient-story-copy h2{font-size:40px}
.zoom-journey .patient-story-copy>p:last-child{display:none}
.zoom-journey .patient-timeline{max-height:52svh;overflow:auto}
}
@media(max-width:720px){
.zoom-journey .card-claim{display:none}
}
.zoom-journey /* Patient record scroll story */
.zoom-journey{height:520svh}
.zoom-journey .full-record{--evidence-1:0;--evidence-2:0;--evidence-3:0;--evidence-4:0;position:absolute;z-index:40;inset:0;display:grid;place-items:center;padding:clamp(24px,4vw,64px);opacity:0;color:#17211f;pointer-events:none;will-change:opacity,transform}
.zoom-journey .record-page{width:min(1080px,92vw);max-height:88svh;padding:clamp(26px,3.5vw,50px);overflow:auto;border:1px solid rgba(35,77,71,.18);border-radius:28px;background:#fffdfa;box-shadow:0 34px 100px rgba(13,29,26,.24)}
.zoom-journey .record-header,.zoom-journey .record-identity,.zoom-journey .record-body{display:flex}
.zoom-journey .record-header{align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid #dce3e0}
.zoom-journey .record-header>div{display:grid;gap:6px}
.zoom-journey .record-logo{color:#285f5a;font-size:25px;letter-spacing:-.04em}
.zoom-journey .record-header small,.zoom-journey .record-status,.zoom-journey .record-label,.zoom-journey .record-identity dt{color:#65736f;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.zoom-journey .record-status{padding:8px 11px;border-radius:999px;color:#286d66;background:#e6f1ee}
.zoom-journey .record-identity{align-items:center;gap:17px;padding:24px 0;border-bottom:1px solid #dce3e0}
.zoom-journey .record-avatar{display:grid;width:48px;height:48px;place-items:center;border-radius:50%;color:#fff;background:#326e68;font-weight:600}
.zoom-journey .record-identity h2{margin:0;font-size:28px;letter-spacing:-.04em}
.zoom-journey .record-identity p{margin:4px 0 0;color:#67736f;font-size:13px}
.zoom-journey .record-identity dl{display:flex;gap:30px;margin:0 0 0 auto}
.zoom-journey .record-identity dl div{display:grid;gap:5px}
.zoom-journey .record-identity dd{margin:0;font-size:12px;font-weight:600}
.zoom-journey .record-body{gap:clamp(28px,5vw,68px);padding-top:30px}
.zoom-journey .record-body>section{max-width:700px}
.zoom-journey .record-body h3{margin:6px 0 13px;font-size:20px}
.zoom-journey .record-body>section>p:not(.record-label){margin:0 0 17px;color:#3f4c48;font-family:Georgia,serif;font-size:clamp(17px,1.55vw,21px);line-height:1.65}
.zoom-journey .follow-up-label{margin-top:28px}
.zoom-journey .evidence{position:relative;z-index:0;white-space:normal}
.zoom-journey .evidence::after{height:3px;position:absolute;z-index:-1;right:0;bottom:-2px;left:0;border-radius:2px;background:#45a69d;content:"";transform:scaleX(var(--evidence-progress));transform-origin:left;opacity:.85}
.zoom-journey .evidence-one{--evidence-progress:var(--evidence-1)}
.zoom-journey .evidence-two{--evidence-progress:var(--evidence-2)}
.zoom-journey .evidence-three{--evidence-progress:var(--evidence-3)}
.zoom-journey .evidence-four{--evidence-progress:var(--evidence-4)}
.zoom-journey .record-sources{width:240px;flex:0 0 auto;padding:20px;border-radius:18px;background:#edf4f2}
.zoom-journey .record-sources h3{margin-top:0}
.zoom-journey .record-sources p{display:grid;gap:4px;margin:0;padding:14px 0;border-bottom:1px solid #d4e1de;font-size:12px}
.zoom-journey .record-sources p:last-child{border:0}
.zoom-journey .record-sources span{color:#6a7773;font-size:10px}
.zoom-journey .record-scroll-cue{margin:22px 0 0;color:#64736f;font-size:11px;text-align:center}
.zoom-journey .patient-story{z-index:45}
.zoom-journey .source-reference{color:#286c67;font-size:10px;font-weight:600}
.zoom-journey .mini-chart{width:100%;height:42px;display:block;margin:10px 0 7px;overflow:visible}
.zoom-journey .mini-chart path,.zoom-journey .mini-chart circle{vector-effect:non-scaling-stroke}
.zoom-journey .chart-grid{fill:none;stroke:#cfdad7;stroke-width:1}
.zoom-journey .chart-line{fill:none;stroke:#2f7d78;stroke-width:2}
.zoom-journey .chart-area{fill:#dcefeb;stroke:none}
.zoom-journey .mini-chart circle{fill:#fff;stroke:#2f7d78;stroke-width:2}
@media(max-width:760px){
.zoom-journey{height:480svh}
.zoom-journey .full-record{padding:14px}
.zoom-journey .record-page{width:100%;max-height:92svh;padding:22px;border-radius:22px}
.zoom-journey .record-header{align-items:start}
.zoom-journey .record-status{max-width:120px;text-align:center}
.zoom-journey .record-identity dl{display:none}
.zoom-journey .record-body{display:block;padding-top:24px}
.zoom-journey .record-sources{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:22px}
.zoom-journey .record-sources h3{grid-column:1/-1}
.zoom-journey .record-body>section>p:not(.record-label){font-size:16px;line-height:1.55}
.zoom-journey .record-scroll-cue{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
.zoom-journey .evidence::after{transform:scaleX(1)}
}
.zoom-journey /* Dense health-data field */
.scan-card{position:relative;background:#091011}
.zoom-journey .scan-card img{width:200%;height:200%;max-width:none;position:absolute;object-fit:cover}
.zoom-journey .scan-card span{position:absolute;right:6px;bottom:6px;left:6px;padding:5px 7px;border-radius:7px;color:#e8f3f1;background:rgba(5,13,14,.76);font-size:7px;letter-spacing:.04em;backdrop-filter:blur(5px)}
.zoom-journey .card-xray{width:112px;height:128px;top:2%;left:19%;--delay:-3.2s}
.zoom-journey .card-xray img{top:0;left:0}
.zoom-journey .card-ct{width:106px;height:106px;top:17%;right:1.5%;--delay:-.6s}
.zoom-journey .card-ct img{top:0;left:-100%}
.zoom-journey .card-mri{width:104px;height:112px;bottom:1%;left:20%;--delay:-5.4s}
.zoom-journey .card-mri img{top:-100%;left:0}
.zoom-journey .card-watch{width:164px;height:112px;top:43%;left:8%;--delay:-1.5s}
.zoom-journey .watch-card>div{display:flex;align-items:baseline;gap:4px;margin-top:7px}
.zoom-journey .watch-card strong{font-size:27px}
.zoom-journey .watch-card span{font-size:8px}
.zoom-journey .watch-card svg{margin:2px 0 3px}
.zoom-journey .watch-card path{fill:none;stroke:#d76157;stroke-width:2}
.zoom-journey .card-sleep{width:148px;height:112px;top:47%;right:8%;--delay:-4.7s}
.zoom-journey .sleep-card b{margin:7px 0 5px}
.zoom-journey .sleep-card>span{height:26px;display:flex;align-items:end;gap:4px}
.zoom-journey .sleep-card i{width:9px;height:var(--h);border-radius:3px 3px 1px 1px;background:#6d8ec7}
.zoom-journey .card-steps{width:116px;height:104px;right:20%;bottom:2%;--delay:-2.1s}
.zoom-journey .steps-card strong{display:block;margin:8px 0 1px;font-size:23px}
.zoom-journey .steps-card>span{float:right;margin-top:-27px;padding:5px;border-radius:50%;color:#23786b;background:#dff0ec;font-size:8px}
.zoom-journey .card-labs{width:150px;height:132px;bottom:2%;left:1%;--delay:-3.9s}
.zoom-journey .dense-labs p{display:flex;justify-content:space-between;margin:0;padding:7px 0;border-bottom:1px solid #e3e9e6;font-size:8px}
.zoom-journey .dense-labs p span{color:#66746f}
.zoom-journey .card-documents{width:142px;height:116px;top:1%;right:19%;--delay:-5.8s}
.zoom-journey .document-count strong{display:block;margin:8px 0 0;font-size:27px}
.zoom-journey .document-count b{font-size:10px}
.zoom-journey .document-count em{margin-top:7px}
.zoom-journey .record-data-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:28px}
.zoom-journey .record-data-strip>span{display:grid;gap:4px;padding:13px;border:1px solid #d8e4e1;border-radius:12px;background:#f4f8f6}
.zoom-journey .record-data-strip small{color:#687671;font-size:8px;letter-spacing:.07em;text-transform:uppercase}
.zoom-journey .record-data-strip b{font-size:15px}
.zoom-journey .record-data-strip em{color:#71807b;font-size:8px;font-style:normal}
@media(max-width:1250px){
.zoom-journey .card-xray,.zoom-journey .card-ct,.zoom-journey .card-mri,.zoom-journey .card-sleep,.zoom-journey .card-steps,.zoom-journey .card-labs,.zoom-journey .card-documents{opacity:.72}
.zoom-journey .card-watch{left:2%}
.zoom-journey .card-sleep{right:2%}
}
@media(max-width:1100px){
.zoom-journey .card-xray,.zoom-journey .card-mri,.zoom-journey .card-sleep,.zoom-journey .card-steps,.zoom-journey .card-labs,.zoom-journey .card-documents{display:none}
.zoom-journey .card-ct{display:block;right:0}
.zoom-journey .card-watch{display:block;left:0}
.zoom-journey .record-data-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.zoom-journey .card-ct{width:78px;height:78px;top:27%;right:-24px}
.zoom-journey .card-watch{width:106px;height:84px;top:29%;left:-35px}
.zoom-journey .watch-card{padding:9px}
.zoom-journey .watch-card strong{font-size:20px}
.zoom-journey .watch-card em{display:none}
.zoom-journey .record-data-strip{margin-top:18px}
.zoom-journey .record-data-strip>span{padding:10px}
.zoom-journey .record-data-strip em{display:none}
}
.zoom-journey /* Data-first opening: the headline appears only after the image expands. */
.zoom-journey{height:300svh}
.zoom-journey .floating-copy,.zoom-journey .full-record,.zoom-journey .patient-timeline{display:none}
.zoom-journey .patient-story{grid-template-columns:1fr;align-items:end}
.zoom-journey .patient-story-copy{max-width:900px;padding-bottom:clamp(30px,5vw,70px)}
.zoom-journey .patient-story-copy h2{max-width:none;font-size:clamp(68px,9vw,138px);line-height:.88}
.zoom-journey .patient-story-copy>p:last-child{max-width:none;margin-top:24px;color:#fff;font-size:clamp(20px,2vw,30px)}
.zoom-journey .patient-story-shade{background:linear-gradient(0deg,rgba(8,16,14,.82) 0%,rgba(8,16,14,.18) 60%,rgba(8,16,14,.06) 100%)}
.zoom-journey .chaos-card{width:var(--w);height:82px;top:var(--y);left:var(--x);z-index:4;transform:translate3d(var(--mouse-x),var(--mouse-y),0) rotate(var(--r)) scale(.84)}
.zoom-journey .chaos-card .card-inner{border-radius:14px}
.zoom-journey .chaos-card .ui-card{padding:12px}
.zoom-journey .chaos-card b{margin:7px 0 4px;font-size:11px}
.zoom-journey .chaos-metric{height:94px}
.zoom-journey .chaos-metric strong,.zoom-journey .chaos-spark strong{display:block;margin:7px 0 2px;font-size:22px}
.zoom-journey .chaos-spark{height:108px}
.zoom-journey .chaos-spark svg{margin-top:5px}
.zoom-journey .chaos-spark path{fill:none;stroke:#2e7d78;stroke-width:1.7}
.zoom-journey .chaos-card:nth-of-type(3n){z-index:1}
.zoom-journey .chaos-card:nth-of-type(4n) .card-inner{opacity:.86}
@media(max-width:1100px){
.zoom-journey .chaos-card{display:none}
}
@media(max-width:620px){
.zoom-journey{height:260svh}
.zoom-journey .patient-story{padding:0 22px 42px}
.zoom-journey .patient-story-copy h2{font-size:clamp(58px,17vw,78px)}
.zoom-journey .patient-story-copy>p:last-child{display:block;font-size:18px;line-height:1.35}
}
.zoom-journey /* The data cloud intentionally occupies the entire canvas. */
.chaos-center{z-index:6;transform:translate3d(var(--mouse-x),var(--mouse-y),0) rotate(var(--r)) scale(.76)}
.zoom-journey .medical-image{height:132px}
.zoom-journey .chaos-ultrasound img{top:-100%;left:-100%}
.zoom-journey .chaos-head-ct img{top:0;left:-100%}
.zoom-journey .chaos-knee img{top:-100%;left:0}
.zoom-journey .chaos-xray-center img{top:0;left:0}
.zoom-journey .chart-panel{height:126px}
.zoom-journey .bar-row{display:grid;grid-template-columns:28px 1fr 26px;gap:6px;align-items:center;padding-top:10px}
.zoom-journey .bar-row b,.zoom-journey .bar-row em{margin:0;font-size:8px}
.zoom-journey .bar-row i{height:6px;border-radius:5px;background:linear-gradient(90deg,#3d9189 var(--v),#e0e9e6 var(--v))}
.zoom-journey .ring-panel{height:132px;text-align:center}
.zoom-journey .data-ring{width:62px;height:62px;display:grid;margin:8px auto 5px;place-items:center;border-radius:50%;background:conic-gradient(#3d9189 0 94%,#dfe8e5 94%)}
.zoom-journey .data-ring::before{width:43px;height:43px;grid-area:1/1;border-radius:50%;background:#fff;content:""}
.zoom-journey .data-ring strong{z-index:1;grid-area:1/1;font-size:16px}
.zoom-journey .genome-panel{height:118px}
.zoom-journey .genome-panel p{display:flex;gap:3px;margin:10px 0}
.zoom-journey .genome-panel p i{width:16px;height:22px;display:grid;place-items:center;border-radius:4px;color:#fff;background:#397d76;font-size:8px;font-style:normal}
.zoom-journey .genome-panel p i:nth-child(2n){background:#b96858}
.zoom-journey .genome-panel b{margin-bottom:4px}
.zoom-journey .ecg-panel{height:120px}
.zoom-journey .ecg-panel svg{margin:7px 0 4px}
.zoom-journey .ecg-panel svg path{fill:none;stroke:#d35f55;stroke-width:2}
.zoom-journey .ecg-panel svg .ecg-grid{stroke:#ead7d4;stroke-width:.5}
.zoom-journey .multi-chart{height:138px}
.zoom-journey .multi-chart svg{margin-top:7px}
.zoom-journey .multi-chart svg path{fill:none;stroke-width:2}
.zoom-journey .series-a{stroke:#338079}
.zoom-journey .series-b{stroke:#bd6657}
.zoom-journey .series-c{stroke:#6e87b3}
.zoom-journey .multi-chart p{display:flex;gap:12px;margin:3px 0 0;font-size:7px}
.zoom-journey .multi-chart p span::before{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;background:#338079;content:""}
.zoom-journey .multi-chart p span:nth-child(2)::before{background:#bd6657}
.zoom-journey .multi-chart p span:nth-child(3)::before{background:#6e87b3}
.zoom-journey .heatmap-panel{height:116px}
.zoom-journey .data-heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:10px 0 7px}
.zoom-journey .data-heatmap i{height:13px;border-radius:3px;background:#dce9e6}
.zoom-journey .data-heatmap i:nth-child(3n){background:#8fc6be}
.zoom-journey .data-heatmap i:nth-child(5n){background:#3d9189}
.zoom-journey .data-heatmap i:nth-child(7n){background:#ecc1b9}
.zoom-journey .activity-panel{height:132px;text-align:center}
.zoom-journey .rings{width:68px;height:68px;position:relative;margin:7px auto}
.zoom-journey .rings i{position:absolute;inset:0;border:7px solid #e5ece9;border-top-color:#2f857c;border-radius:50%;transform:rotate(35deg)}
.zoom-journey .rings i:nth-child(2){inset:10px;border-width:6px;border-right-color:#cf6c5b;transform:rotate(75deg)}
.zoom-journey .rings i:nth-child(3){inset:20px;border-width:5px;border-bottom-color:#748fc0;transform:rotate(115deg)}
.zoom-journey .rings b{position:absolute;inset:0;display:grid;place-items:center;font-size:11px}
.zoom-journey .activity-panel em{font-size:7px}
@media(min-width:1101px){
.zoom-journey .card-field{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:4px;padding:6px 10px}
.zoom-journey .card-field>.float-card{position:relative;top:auto;right:auto;bottom:auto;left:auto;align-self:center;justify-self:center;transform:translate3d(var(--mouse-x),var(--mouse-y),0) rotate(var(--r,0deg)) scale(.78)}
.zoom-journey .card-field>.card-care{grid-column:10;grid-row:8;z-index:30;transform:translate3d(var(--mouse-x),var(--mouse-y),0)}
}
@media(min-width:1101px){
.zoom-journey .card-field{display:block;padding:0}
.zoom-journey .card-field>.float-card{position:absolute;right:auto;bottom:auto;transform:translate3d(var(--mouse-x),var(--mouse-y),0) rotate(var(--layout-rotate,var(--r,0deg))) scale(var(--layout-scale,.8))}
.zoom-journey .card-field>.card-care{z-index:30;transform:translate3d(var(--mouse-x),var(--mouse-y),0)}
}
.zoom-journey{height:100svh}
.zoom-journey .floating-hero{position:relative}
.zoom-journey .patient-story{display:none}
.zoom-journey .patient-zoom{display:block;z-index:90;inset:auto;overflow:hidden;clip-path:none;will-change:left,top,width,height,border-radius}
.zoom-journey .patient-zoom::after{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,15,13,.62) 0%,rgba(7,15,13,.34) 42%,rgba(7,15,13,.2) 100%),rgba(7,15,13,.12);content:"";opacity:var(--overlay-opacity,0)}
.zoom-journey .patient-zoom img{object-position:center 38%}
.zoom-journey .card-field{--field-fade:0}
.zoom-journey .card-field>.float-card:not(.card-care){opacity:calc(1 - var(--field-fade))}
.zoom-journey .zoom-copy{width:min(1100px,80vw);position:absolute;z-index:95;right:auto;bottom:clamp(44px,8svh,96px);left:clamp(28px,4vw,84px);color:#fff;text-align:left;opacity:0;pointer-events:none;text-shadow:0 2px 24px rgba(0,0,0,.35);will-change:opacity,transform}
.zoom-journey .zoom-copy::before{display:none}
.zoom-journey .zoom-copy h2{margin:0;font-size:clamp(64px,7vw,108px);font-weight:400;line-height:.88;letter-spacing:-.065em}
.zoom-journey .zoom-copy h2 span{display:block;max-width:none;margin:0;font:inherit;line-height:inherit;white-space:nowrap}
.zoom-journey .zoom-copy>span{display:block;max-width:760px;margin-top:24px;font-size:clamp(20px,2vw,30px);line-height:1.3}
.zoom-journey{height:100svh}
.zoom-journey .floating-hero{position:relative}
.zoom-journey .patient-story{display:none}
.zoom-journey .patient-zoom{display:block;z-index:90;inset:auto;overflow:hidden;clip-path:none;will-change:left,top,width,height,border-radius}
.zoom-journey .patient-zoom::after{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,15,13,.62) 0%,rgba(7,15,13,.34) 42%,rgba(7,15,13,.2) 100%),rgba(7,15,13,.12);content:"";opacity:var(--overlay-opacity,0)}
.zoom-journey .patient-zoom img{object-position:center 38%}
.zoom-journey .card-field{--field-fade:0}
.zoom-journey .card-field>.float-card:not(.card-care){opacity:calc(1 - var(--field-fade))}
@media(max-width:620px){
.zoom-journey .zoom-copy{width:calc(100vw - 44px);right:22px;bottom:42px;left:22px}
.zoom-journey .zoom-copy h2{font-size:clamp(36px,10.5vw,56px)}
.zoom-journey .zoom-copy>span{font-size:17px;line-height:1.4}
}
.zoom-journey .float-card:nth-child(5n) .ui-card{background:rgba(238,247,245,.94)}
.zoom-journey .float-card:nth-child(7n) .ui-card{background:rgba(250,242,237,.95)}
.zoom-journey .float-card:nth-child(11n) .card-inner{box-shadow:0 30px 56px rgba(31,52,48,.2),0 6px 16px rgba(31,52,48,.08)}
.zoom-journey{width:100%;height:820svh;background:var(--canvas)}
.zoom-journey .floating-hero{position:sticky;top:0;background:var(--canvas)}
.zoom-journey .focal{--pull:0;position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.zoom-journey /* Sized and offset entirely in vmin so the cluster keeps its shape at any
   aspect ratio - mixing vmin sizes with vw/vh offsets is what pulled it apart
   on wide screens. --pull draws the three together into the centre; it rides
   translate and scale so it composes with the transform in `sharpen`. */
.focal i{position:absolute;top:50%;left:50%;display:block;border-radius:46% 54% 52% 48% / 50% 46% 54% 50%;
         translate:calc(-50% + var(--dx) * (1 - var(--pull))) calc(-50% + var(--dy) * (1 - var(--pull)));
         scale:calc(1 - var(--pull) * .97);animation:sharpen 9s ease-in-out infinite;will-change:translate,scale}
.zoom-journey .focal i:nth-child(1){--dx:-16vmin;--dy:-7vmin;width:46vmin;height:46vmin;background:var(--care-500)}
.zoom-journey .focal i:nth-child(2){--dx:18vmin;--dy:-8vmin;width:34vmin;height:34vmin;background:var(--azure-600);animation-delay:-3s}
.zoom-journey .focal i:nth-child(3){--dx:3vmin;--dy:17vmin;width:40vmin;height:40vmin;background:var(--moss-600);animation-delay:-6s}
.zoom-journey /* Held back until the opening has made way for it; JS drives --intro. */
.card-field{opacity:var(--intro,1)}
.zoom-journey .heart-act{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 22px;text-align:center;pointer-events:none;will-change:opacity,transform}
.zoom-journey .heart-copy{max-width:min(900px,90vw)}
.zoom-journey .heart-kicker{margin:0 0 16px;color:rgba(255,255,255,.66);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.zoom-journey .heart-copy h1{margin:0;color:#fdfaf6 !important;font-size:clamp(34px,6.4vw,104px);font-weight:400;line-height:.95;letter-spacing:-.055em}
.zoom-journey .heart-cue{margin:clamp(26px,4svh,44px) 0 0;color:rgba(255,255,255,.5);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.zoom-journey .heart-cue span{display:block;margin-bottom:6px;animation:nudge 2.4s ease-in-out infinite}
@media(max-width:620px){
.zoom-journey{height:520svh}
.zoom-journey .heart-copy h1{font-size:clamp(30px,8.4vw,48px)}
}
@media(prefers-reduced-motion:reduce){
.zoom-journey .ambient,.zoom-journey .heart-cue span{animation:none}
}
.zoom-journey /* The singularity the field collapses into,.zoom-journey and that the image opens out of.
   JS drives opacity and scale; it sits above the cards and below the image. */
/* The singularity.

   One point. Everything that was gathering around it - the halo,.zoom-journey the orbiting
   sweep,.zoom-journey the anamorphic arms,.zoom-journey the shockwave rings - has gone: the collapse is
   already the drama,.zoom-journey and a point of light is more convincing when nothing is
   decorating it. It contracts as the field arrives and blooms once as the
   image takes over. */
.singularity{--charge:0;--release:0;width:min(40vmin,300px);aspect-ratio:1;position:absolute;z-index:80;top:50%;left:50%;display:grid;place-items:center;translate:-50% -50%;pointer-events:none}
.zoom-journey .sg-core{width:6%;aspect-ratio:1;border-radius:50%;background:#fff;
  box-shadow:0 0 14px 5px rgba(255,255,255,.7),0 0 46px 16px rgba(190,238,230,.38),0 0 120px 44px rgba(127,192,186,.18);
  opacity:calc(var(--charge) * (1 - var(--release)));
  scale:calc((1.5 - var(--charge) * .75) * (1 + var(--release) * 9));
  will-change:transform,opacity}
.zoom-journey .patient-zoom{overflow:hidden}
.zoom-journey /* The field is positioned by script at every width now,.zoom-journey so the absolute
   placement has to apply at every width too - it was inside a min-width:1101px
   block,.zoom-journey which is why a phone got desktop coordinates. */
.card-field{display:block;padding:0}
.zoom-journey .card-field>.float-card{position:absolute;right:auto;bottom:auto;
  transform:translate3d(var(--mouse-x),var(--mouse-y),0) rotate(var(--layout-rotate,var(--r,0deg))) scale(var(--layout-scale,.8))}
@media(max-width:1100px){
.zoom-journey /* Overrides the old breakpoint rules that hid most of the field. */
  .card-field>.float-card{display:block}
}
.zoom-journey /* Parked outside the viewport until the collapse reaches them. */
.card-field>.float-card.is-outer{opacity:0}
.zoom-journey /* A vignette on the header image,.zoom-journey layered over the existing wash: the corners
   fall away so the frame holds the eye at the centre,.zoom-journey and the lower-left has
   its own ground for the copy to sit on rather than competing with the room
   behind it. Rides the same --overlay-opacity,.zoom-journey so it arrives with the zoom. */
.patient-zoom::after{
  background:
    radial-gradient(128% 96% at 50% 44%, rgba(4,20,19,0) 40%, rgba(4,20,19,.3) 76%, rgba(4,20,19,.66) 100%),
    linear-gradient(0deg, rgba(4,20,19,.74) 0%, rgba(4,20,19,.2) 44%, rgba(4,20,19,0) 70%),
    linear-gradient(90deg, rgba(4,20,19,.52) 0%, rgba(4,20,19,.14) 46%, rgba(4,20,19,0) 100%)}
.zoom-journey /* ==========================================================================
   Chrome was doing far more work than Safari for the same frame.

   backdrop-filter is the reason. Safari's implementation is cheap; Chrome's
   samples and blurs the backdrop per element,.zoom-journey per frame,.zoom-journey and a scaling element
   can never reuse the result. Seventy-two of them during the entry phase is
   the clunk - and it was buying nothing,.zoom-journey because what sits behind these cards
   is a flat colour with two soft blobs on it. A slightly more opaque card is
   indistinguishable and free.

   will-change: transform on every card forced seventy-two permanent
   compositor layers as well. The animation promotes what it needs while it is
   running; declaring it up front just holds the memory the whole time. And
   will-change on left/top/width/height is meaningless - those are layout,.zoom-journey and
   no hint makes layout compositable.
   ========================================================================== */

.card-inner{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.94);
  box-shadow:0 18px 34px rgba(31,52,48,.16)}
.zoom-journey .scan-card span{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,16,17,.82)}
.zoom-journey .float-card{will-change:auto}
.zoom-journey .patient-zoom{will-change:opacity}
.zoom-journey .patient-story{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.zoom-journey /* A sticky header taller than the screen does not stick. The hero carried a
   680px floor (650px on a phone),.zoom-journey which is taller than the viewport on a short
   one - an iPhone SE is 568px - so on exactly those devices the whole opening
   sequence scrolled away instead of pinning. The floor still applies wherever
   there is room for it. */
.floating-hero{height:var(--stage-h);min-height:min(680px,var(--stage-h))}
@media(max-width:720px){
.zoom-journey .floating-hero{min-height:min(650px,var(--stage-h))}
}