/* ===========================================================================
   v2.css, the DexaFit design pass. Loads after site.css, bridge.css, light.css.
   Real media, real motion, no flat text boxes.
   =========================================================================== */

/* ---- rhythm: the v1 build had 90px+ of dead air between every section ---- */
.pad{padding:74px 0}
.pad-sm{padding:52px 0}
@media(max-width:820px){.pad{padding:52px 0}.pad-sm{padding:38px 0}}
.sec-head{max-width:720px;margin:0 auto 40px;text-align:center}
.sec-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;margin:10px 0 12px}
.sec-head p{color:var(--muted);font-size:16.5px;line-height:1.6}

/* ---- video frame ---------------------------------------------------------- */
.vframe{position:relative;border-radius:22px;overflow:hidden;background:#0b1218;
  box-shadow:0 26px 70px rgba(10,30,45,.16);aspect-ratio:4/5;max-height:620px}
.vframe video{width:100%;height:100%;object-fit:cover;display:block}
.vframe-cap{position:absolute;left:14px;bottom:14px;right:14px;color:#fff;font-size:13px;font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(6,20,28,.75));padding:38px 14px 12px;border-radius:0 0 8px 8px;pointer-events:none}
.vframe.sm{aspect-ratio:4/3;max-height:none}
.hero-v .hero-grid{align-items:center;gap:56px}
.hero-v .hero-copy{padding:8px 0}
@media(max-width:900px){.vframe{aspect-ratio:16/11}.hero-v .hero-grid{gap:30px}}

/* ---- trust bar ------------------------------------------------------------ */
.trustbar{background:var(--paper);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);padding:26px 0}
.tb-row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.tb-i{display:flex;flex-direction:column;gap:3px;padding-left:16px;border-left:2px solid var(--blue)}
.tb-i b{font-size:15.5px;color:var(--txt-dark);font-weight:700;line-height:1.25}
.tb-i span{font-size:13.5px;color:var(--muted);line-height:1.45}
@media(max-width:860px){.tb-row{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:480px){.tb-row{grid-template-columns:1fr}}

/* ---- what we measure ------------------------------------------------------ */
.mt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mt{background:var(--paper);border:1px solid var(--line-l);border-radius:18px;overflow:hidden;transition:.24s ease}
.mt:hover{transform:translateY(-4px);border-color:#bcdcef;box-shadow:0 18px 44px rgba(10,30,45,.10)}
.mt-img{aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.mt-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mt:hover .mt-img img{transform:scale(1.05)}
.mt-b{padding:20px 22px 22px}
.mt-b h3{font-size:18px;margin-bottom:7px;color:var(--txt-dark)}
.mt-b p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.mt-test{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue2);background:var(--sky);padding:5px 11px;border-radius:99px}
@media(max-width:940px){.mt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mt-grid{grid-template-columns:1fr}}

/* ---- package cards, the flat boxes replaced ------------------------------- */
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.pk{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-l);
  border-radius:20px;overflow:hidden;transition:.24s ease}
.pk:hover{transform:translateY(-5px);border-color:#bcdcef;box-shadow:0 22px 54px rgba(10,30,45,.13)}
.pk-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.pk-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pk:hover .pk-img img{transform:scale(1.06)}
.pk-tag{position:absolute;top:12px;left:12px;background:var(--blue);color:#04222E;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:99px}
.pk-b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.pk-b h3{font-size:18.5px;line-height:1.25;margin-bottom:4px;color:var(--txt-dark)}
.pk-price{font-size:24px;font-weight:800;color:var(--blue2);font-variant-numeric:tabular-nums;margin-bottom:10px}
.pk-b p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.pk-inc{list-style:none;margin:0 0 18px;padding:0}
.pk-inc li{font-size:13.5px;color:var(--txt-dark);padding-left:20px;position:relative;margin-bottom:7px;line-height:1.45}
.pk-inc li:before{content:"";position:absolute;left:0;top:6px;width:11px;height:6px;border-left:2px solid var(--blue);
  border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.pk-go{margin-top:auto;font-size:14.5px;font-weight:700;color:var(--blue2);display:inline-flex;align-items:center;gap:7px}
.pk-go i{font-style:normal;transition:.22s}
.pk:hover .pk-go i{transform:translateX(4px)}
.pk-note{margin-top:24px;text-align:center;font-size:14.5px;color:var(--muted)}
@media(max-width:1100px){.pk-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pk-grid{grid-template-columns:1fr}}

/* ---- member story reels --------------------------------------------------- */
.reels-sec{overflow:hidden}
.rl-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:6px 0 18px;-webkit-overflow-scrolling:touch}
.rl-scroll::-webkit-scrollbar{display:none}
.rl-track{display:flex;gap:18px;padding:0 max(24px,calc((100vw - var(--maxw))/2))}
.rl{flex:0 0 268px;position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;border:1px solid var(--line-l);
  background:#0b1218;cursor:pointer;padding:0;transition:.24s ease;scroll-snap-align:start}
.rl:hover{transform:translateY(-4px);box-shadow:0 22px 54px rgba(10,30,45,.18)}
.rl video{width:100%;height:100%;object-fit:cover;display:block}
.rl .playbtn{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .3s;z-index:3}
.rl .playbtn svg{width:56px;height:56px}
.rl .playbtn circle{fill:rgba(0,0,0,.42)}
.rl.playing .playbtn{opacity:0}
.rl-tag{position:absolute;top:12px;left:12px;z-index:3;background:rgba(255,255,255,.92);color:var(--blue2);
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px}
.rl-b{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:52px 16px 16px;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(4,16,23,.88))}
.rl-q{color:#fff;font-size:14px;line-height:1.45;font-weight:600;margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rl-who{color:#bfe4f7;font-size:12.5px;font-weight:700}
.rl-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:6px}
.rl-hint{font-size:13.5px;color:var(--muted)}
@media(max-width:560px){.rl{flex:0 0 216px}.rl-track{padding:0 20px}}

/* ---- review wall ---------------------------------------------------------- */
.gscore{text-align:center;font-size:15.5px;color:var(--muted);margin-bottom:6px}
.gscore .st{color:#f5b301;letter-spacing:2px}
.gscore b{color:var(--txt-dark);font-size:19px}
.gscore a{color:var(--blue2);font-weight:700;margin-left:8px;white-space:nowrap}
.rv-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;height:520px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);padding:0 24px;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.rv-col{display:flex;flex-direction:column;gap:18px;animation:rvup 46s linear infinite}
.rv-col.c1{animation-duration:58s}.rv-col.c2{animation-duration:52s}
@keyframes rvup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.revsec:hover .rv-col{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.rv-col{animation:none}.rv-wall{height:auto;mask-image:none;-webkit-mask-image:none}}
.rv{background:var(--paper);border:1px solid var(--line-l);border-radius:16px;padding:20px 22px}
.rv-st{color:#f5b301;font-size:13px;letter-spacing:2px;margin-bottom:9px}
.rv p{font-size:14.5px;line-height:1.62;color:var(--txt-dark);margin-bottom:12px}
.rv-w{font-size:13px;color:var(--muted)}
.rv-w b{color:var(--txt-dark)}
@media(max-width:900px){.rv-wall{grid-template-columns:1fr 1fr;height:440px}}
@media(max-width:600px){.rv-wall{grid-template-columns:1fr;height:400px}}

/* ---- image final CTA, replaces the washy gradient band -------------------- */
.imgcta{position:relative;padding:96px 0;overflow:hidden;background:#08131a}
.imgcta:before{content:"";position:absolute;inset:0;background-image:var(--cta-img);background-size:cover;
  background-position:center 32%;opacity:.55}
.imgcta:after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(6,20,28,.93) 8%,rgba(6,20,28,.72) 46%,rgba(6,20,28,.42) 100%),
  radial-gradient(700px 420px at 88% 12%,rgba(0,159,223,.28),transparent 62%)}
.imgcta-in{position:relative;z-index:2;max-width:660px;text-align:left}
.imgcta h2{color:#fff;font-size:clamp(30px,4vw,48px);line-height:1.06;margin:12px 0 14px}
.imgcta p{color:#cfe3ef;font-size:17px;line-height:1.6;margin-bottom:28px;max-width:48ch}
.imgcta .btns{display:flex;gap:14px;flex-wrap:wrap}
.imgcta .btn-ghost-d{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.34);color:#fff;backdrop-filter:blur(6px)}
.imgcta .btn-ghost-d:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}
@media(max-width:820px){.imgcta{padding:70px 0}.imgcta-in{text-align:left}}

/* ---- service cards get a stronger hover ---------------------------------- */
.svc{transition:.24s ease}
.svc:hover{transform:translateY(-5px);box-shadow:0 22px 54px rgba(10,30,45,.12)}
.sv-img img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.svc:hover .sv-img img{transform:scale(1.05)}

/* ---- steps: numbered, connected, not four floating boxes ----------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.step{position:relative;padding-top:8px}
.step:after{content:"";position:absolute;top:22px;left:52px;right:-14px;height:1px;background:var(--line-l)}
.steps .step:last-child:after{display:none}
.step-eyebrow{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:99px;background:var(--sky);
  color:var(--blue2);font-weight:800;font-size:14px;border:1px solid #c6e4f5;position:relative;z-index:2}
.step-h{font-size:19px;margin:16px 0 8px;color:var(--txt-dark)}
.step-sub{font-size:15px;color:var(--muted);line-height:1.6;max-width:32ch}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:22px}.step:after{display:none}}

/* ===========================================================================
   THE MENU. It was still the Prefusion black sheet on a white site.
   =========================================================================== */
.drawer{background:var(--paper);border-left:1px solid var(--line-l);box-shadow:-30px 0 80px rgba(10,30,45,.16);
  width:min(430px,92vw);padding:22px 26px 26px}
.drawer-scrim{background:rgba(10,30,45,.34);backdrop-filter:blur(4px)}
.drawer-top{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line-l)}
.drawer-top span{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.drawer-x{background:var(--mist);color:var(--txt-dark);border:1px solid var(--line-l)}
.drawer-x:hover{background:var(--sky);color:var(--blue2)}
.drawer-links{gap:0;margin-bottom:20px}
.drawer-links a{font-size:17px;font-weight:600;color:var(--txt-dark);padding:11px 10px;border-bottom:1px solid var(--line-l);
  border-radius:10px;margin:0 -10px}
.drawer-links a:after{content:"\2192";color:var(--blue);opacity:0;transform:translateX(-6px);transition:.2s}
.drawer-links a:hover{color:var(--blue2);background:var(--mist);padding-left:14px}
.drawer-links a:hover:after{opacity:1;transform:none}
.drawer-links .dr-h{color:var(--blue2);border:none;margin:20px 0 4px;font-size:11px}
.drawer-links .dr-h:first-child{margin-top:0}
.drawer-promo{margin-top:auto;background:var(--sky);border:1px solid #c6e4f5;border-radius:18px;padding:18px;
  display:flex;gap:14px;align-items:center}
.drawer-promo .dp-ic{width:50px;height:50px;border-radius:13px;background:var(--blue);color:#04222E;
  display:grid;place-items:center;font-weight:800;font-size:17px;flex-shrink:0;box-shadow:0 6px 18px rgba(0,159,223,.3)}
.drawer-promo .dp-t{min-width:0}
.drawer-promo .dp-t b{display:block;font-size:15px;color:var(--txt-dark);margin-bottom:9px;font-weight:700}
.drawer-promo .btn{padding:10px 18px;font-size:13.5px}
.drawer-foot{margin-top:16px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--line-l)}
.drawer-foot a{font-size:14px;font-weight:700;color:var(--txt-dark)}
.drawer-foot a:hover{color:var(--blue2)}

/* ---- footer: the links were grey-on-grey and unreadable ------------------ */
.foot{background:var(--mist);padding:56px 0 26px}
.foot .fl{color:#4a5a66;font-weight:500}
.foot .fl:hover{color:var(--blue2)}
.foot h5{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot .bd{color:#4a5a66;font-size:14.5px;line-height:1.6}
.foot-bottom{margin-top:34px;padding-top:20px;font-size:13.5px}

/* ---- the B4 band sat in a container with white gutters beside it --------- */
.b4{border-radius:0;border-left:none;border-right:none;padding:18px 24px;max-width:none}
.b4-wrap{background:var(--sky);border-top:1px solid #d5e9f5;border-bottom:1px solid #d5e9f5}
.b4-wrap .b4{max-width:var(--maxw);margin:0 auto;background:transparent;border:none}

/* ---- finalcta is replaced by .imgcta on every page; keep the old class
       harmless in case a page still uses it --------------------------------- */
.finalcta{padding:70px 24px}
.rv-col.c0{animation-duration:46s}

/* The clinic loops are Instagram cuts with burnt-in captions in the lower band.
   The frame is 4:5 and the source is 9:16, so cover already crops; biasing the
   window upward removes the caption without touching the subject. */


/* The loops are Instagram cuts with burnt-in captions in the lower band. The
   caption plate is sized to cover that band whatever the source clip does. */



/* ===========================================================================
   The clinic loops are 720x720 SQUARE (ffprobe, not a guess). Their burnt-in
   Instagram captions sit at 84 to 95 percent of frame height, and so does the
   subject in some clips, so cropping the bottom loses the person. The frame is
   square, the whole shot is visible, and the caption plate goes fully opaque
   from 70 percent down, which covers the burnt-in band and carries our own line.
   =========================================================================== */
.vframe{position:relative;aspect-ratio:1/1;max-height:none}
.vframe video{position:absolute;inset:0;transform:none;width:100%;height:100%;object-fit:cover}
.vframe.sm{aspect-ratio:1/1}
.vframe-cap{left:0;right:0;bottom:0;padding:130px 20px 18px;border-radius:0;font-size:13.5px;letter-spacing:.01em;
  background:linear-gradient(180deg,rgba(6,20,28,0) 0%,rgba(6,20,28,.40) 34%,#06141c 60%,#06141c 100%)}
@media(max-width:900px){.vframe-cap{padding:80px 16px 15px;font-size:12.5px}}

/* ===========================================================================
   MOBILE: site.css line 1277 sets .svchero-media{order:-1} because Prefusion's
   inner hero media is a 300px reel card. Ours is a full-bleed photo or video, so
   that rule pushed the headline and both CTAs below the fold on 50 of 54 pages.
   Caught on the 390px contact sheet. Text first, media capped.
   =========================================================================== */
@media(max-width:900px){
  .svchero-media{order:0;margin-top:26px}
  .svchero-media img{width:100%;max-height:320px;object-fit:cover;border-radius:18px}
  .hero-visual{margin-top:24px}
  .hero-visual .vframe,.hero-v .vframe{aspect-ratio:4/3;max-height:300px}
  .split-media .vframe.sm{aspect-ratio:4/3}
  .svchero{padding:104px 0 56px}
  .hero{padding:88px 0 56px}
  .hero h1,.svchero h1{font-size:clamp(31px,8.4vw,44px)}
  .hero .lead,.svchero .lead{font-size:15.5px}
  .hero-ctas,.hbtns{display:flex;flex-wrap:wrap;gap:10px}
  .hero-ctas .btn,.hbtns .btn{flex:1 1 auto;justify-content:center}
  .hero-trust,.htrust{gap:14px 20px;margin-top:26px;font-size:14px}
}

/* site.css line 313 gives .hero-visual `margin:0 auto`, which on a grid item
   switches it from stretch to shrink-to-fit. Our video is position:absolute, so
   the frame had no in-flow content and collapsed to 0x0 below 980px. Measured
   live in the browser at 800px: heroVisual width 0px. */
.hero-visual{width:100%}
.vframe{width:100%;display:block}
.svchero-media .vframe{width:100%}

/* ===========================================================================
   SERVICE CARD, rebuilt. The lifted `.svc` was broken in three ways, all
   measured on the live page rather than eyeballed:
     .sv-body  padding 0px   -> heading, copy and price sat 1px from the border
     .go       bottom gap 2px -> the link was touching the card edge
     .sv-img   border-radius 18px + its own 1px border, nested 1px inside a
               20px-radius card -> two fighting corner radii and a double edge
   Rebuilt to match the .pk package card so both grids read as one system.
   =========================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.svc{background:var(--paper);border:1px solid var(--line-l);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:.24s ease}
.svc:hover{transform:translateY(-5px);border-color:#bcdcef;box-shadow:0 22px 54px rgba(10,30,45,.13)}
.svc .sv-img{border:none;border-radius:0;aspect-ratio:16/10;overflow:hidden;background:var(--mist);flex:0 0 auto}
.svc .sv-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.svc:hover .sv-img img{transform:scale(1.06)}
.svc .sv-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.svc .sv-body h3{font-size:19px;line-height:1.28;margin:0 0 8px;color:var(--txt-dark)}
.svc .sv-body p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 14px;flex:0 1 auto;font-weight:400}
.svc .rp{font-size:22px;font-weight:800;color:var(--blue2);font-variant-numeric:tabular-nums;margin:0 0 16px}
.svc .go{margin-top:auto;font-size:14.5px;font-weight:700;color:var(--blue2);
  display:inline-flex;align-items:center;gap:7px;transition:.2s}
.svc:hover .go{gap:11px}
@media(max-width:1000px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr}.svc .sv-body{padding:20px}}

/* drawer promo: the CTA sat 7px off the card's bottom edge at 390px (measured) */
.drawer-promo{padding:20px}
.drawer-promo .dp-t{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.drawer-promo .dp-t b{margin-bottom:0}

/* ===========================================================================
   REEL STRIP, end to end. It was inset to the page container on the left and
   clipped mid-card on the right. Now it runs the full viewport width.
   =========================================================================== */
.reels-sec .rl-scroll{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;
  scroll-snap-type:x proximity}
.reels-sec .rl-track{padding:0 24px;gap:16px}
.reels-sec .rl-track:after{content:"";flex:0 0 8px}
@media(max-width:560px){.reels-sec .rl-track{padding:0 16px}}

/* ===========================================================================
   PREFUSION HEALTH, present on every page.
   The bracket under the pathway strip now carries the real logo, and a sticky
   rail in Prefusion's own green sits on the right edge of all 54 pages.
   =========================================================================== */
.b3-bracket-r span{display:inline-flex;align-items:center;padding:0 16px}
.b3-bracket-r span img{height:26px;width:auto;display:block}
@media(max-width:980px){.b3-bracket-r span img{height:22px}}

/* The collapsed rail rendered as a blank green slab: .pfx-rail-in came first in
   the DOM with width:236px, and min-width:auto stopped it shrinking inside the
   64px window, so the only visible child, the tab, was clipped away entirely.
   Tab is now first in the DOM AND first in flex order, the panel is a fixed
   flex basis with min-width:0 after it, and the greens are deep enough that
   white type on them actually reads. */
.pfx-rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;align-items:stretch;text-decoration:none;
  background:linear-gradient(155deg,#2C6B00 0%,#4F9A00 58%,#63B500 100%);
  border-radius:18px 0 0 18px;box-shadow:-10px 12px 34px rgba(20,50,10,.26);
  width:60px;overflow:hidden;transition:width .3s cubic-bezier(.2,.7,.2,1)}
.pfx-rail:hover,.pfx-rail:focus-visible{width:284px}
.pfx-rail:hover .pfx-rail-tab,.pfx-rail:focus-visible .pfx-rail-tab{flex-basis:14px;width:14px;padding:0}
.pfx-rail:hover .pfx-rail-tab em,.pfx-rail:focus-visible .pfx-rail-tab em{opacity:0;height:0;overflow:hidden;transition:opacity .14s}
.pfx-rail-tab{order:0;flex:0 0 60px;width:60px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:20px 0;overflow:hidden;
  transition:flex-basis .3s cubic-bezier(.2,.7,.2,1),width .3s cubic-bezier(.2,.7,.2,1)}
.pfx-rail-tab img{height:17px;width:auto;filter:brightness(0) invert(1);opacity:.95;flex:0 0 auto}
.pfx-rail-tab em{writing-mode:vertical-rl;font-style:normal;font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap}
.pfx-rail-in{order:1;flex:0 0 270px;width:270px;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:22px 24px;opacity:0;transition:opacity .2s ease .06s}
.pfx-rail:hover .pfx-rail-in,.pfx-rail:focus-visible .pfx-rail-in{opacity:1}
.pfx-rail-in img{height:21px;width:auto;filter:brightness(0) invert(1);margin-bottom:11px;align-self:flex-start}
.pfx-rail-in b{display:block;font-size:15px;line-height:1.32;color:#fff;font-weight:700;margin-bottom:9px}
.pfx-go{font-size:12.5px;font-weight:800;color:#D8F79A;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pfx-go i{font-style:normal;transition:.2s}
.pfx-rail:hover .pfx-go i{transform:translateX(3px)}
@media(max-width:1100px){.pfx-rail{display:none}}
@media (prefers-reduced-motion:reduce){.pfx-rail{transition:none}}

/* mobile keeps the mention, as a slim band above the footer bridge */
.pfx-band{display:none}
@media(max-width:1100px){
  .pfx-band{display:block;background:linear-gradient(140deg,#4F9A00,#8BD600);padding:16px 24px;text-align:center}
  .pfx-band a{display:inline-flex;align-items:center;gap:10px;color:#0c1a00;font-weight:800;font-size:14.5px}
  .pfx-band img{height:18px;filter:brightness(0) invert(1)}
}

/* ===========================================================================
   Image CTA, plain variant. Some pages should not carry a portrait behind the
   final band (gift cards). Same shape, brand ground, no photograph.
   =========================================================================== */
.imgcta-plain{background:var(--ink)}
.imgcta-plain:before{display:none}
.imgcta-plain:after{background:radial-gradient(680px 400px at 86% 10%,rgba(0,159,223,.30),transparent 62%),
  linear-gradient(105deg,rgba(6,20,28,.55) 0%,rgba(6,20,28,0) 70%)}

/* ---- hero right column can carry a block instead of a photo -------------- */
.hero-aside{width:100%;max-width:420px;margin-left:auto}
@media(max-width:900px){.hero-aside{margin:24px 0 0}}

/* ===========================================================================
   THE MENU, rebuilt. Prefusion's own stylesheet ends with
   `.nav .mega{display:none!important}` and paints #090e11 panels positioned
   against .nav, so the borrowed markup rendered as a black slab off the left
   edge. This is the same pattern (image tiles, columns, a feature panel) in
   DexaFit white with blue highlights, in its own namespace so nothing inherits.
   =========================================================================== */
.nav{position:sticky}
.nav-links{display:flex;align-items:center;gap:22px}
.dfx-link,.dfx-trig{font-size:14.5px;font-weight:600;color:var(--txt-dark);display:inline-flex;
  align-items:center;gap:5px;padding:6px 2px;white-space:nowrap;transition:.18s}
.dfx-link:hover,.dfx-trig:hover,.dfx-link.on,.dfx-trig.on{color:var(--blue2)}
.dfx-caret{width:13px;height:13px;opacity:.55;transition:transform .22s,opacity .22s;flex:0 0 auto}
.dfx-has{position:static;display:inline-flex}
.dfx-has:hover .dfx-caret,.dfx-has:focus-within .dfx-caret{transform:rotate(180deg);opacity:1}
.dfx-has:hover .dfx-trig,.dfx-has:focus-within .dfx-trig{color:var(--blue2)}

.dfx-mega{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:max-content;max-width:94vw;background:var(--paper);border:1px solid var(--line-l);border-radius:18px;
  box-shadow:0 26px 66px rgba(10,30,45,.15);padding:16px;z-index:80;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.7,.2,1)}
.dfx-has:hover .dfx-mega,.dfx-has:focus-within .dfx-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dfx-mega::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.dfx-mega-in{display:grid;grid-template-columns:auto 232px;gap:18px;align-items:stretch}
.dfx-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:14px;align-content:start}
.dfx-col h6{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;padding-left:7px}
.dfx-item{display:flex;gap:10px;align-items:center;padding:6px 7px;border-radius:11px;transition:.16s}
.dfx-item:hover{background:var(--sky)}
.dfx-item img{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:0 0 auto;background:var(--mist)}
.dfx-t{display:flex;flex-direction:column;min-width:0}
.dfx-t b{font-size:13.5px;font-weight:700;color:var(--txt-dark);line-height:1.2;margin-bottom:1px}
.dfx-t span{font-size:11.5px;color:var(--muted);line-height:1.3}
.dfx-item:hover .dfx-t b{color:var(--blue2)}

.dfx-feat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:13px;overflow:hidden;background:var(--ink);min-height:168px;
  transition:.2s}
.dfx-feat:hover{box-shadow:0 14px 34px rgba(10,30,45,.16)}
.dfx-feat-img{position:absolute;inset:0;display:block;overflow:hidden}
.dfx-feat-img:after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,18,26,.10) 0%,rgba(4,18,26,.38) 26%,rgba(4,18,26,.80) 55%,rgba(4,18,26,.95) 100%)}
.dfx-feat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.dfx-feat:hover .dfx-feat-img img{transform:scale(1.05)}
.dfx-feat-b{position:relative;z-index:1;display:flex;flex-direction:column;padding:12px 14px 13px}
.dfx-feat-e{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8AD6F7;margin-bottom:5px}
.dfx-feat-b b{font-size:14.5px;color:#fff;line-height:1.22;margin-bottom:5px}
.dfx-feat-p{font-size:11.5px;color:rgba(255,255,255,.82);line-height:1.45;margin-bottom:9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dfx-feat-go{font-size:12px;font-weight:800;color:#fff;display:inline-flex;align-items:center;gap:6px}
.dfx-feat-go i{font-style:normal;transition:.2s}
.dfx-feat:hover .dfx-feat-go i{transform:translateX(4px)}
@media(max-width:1299px){.dfx-mega{display:none}}
@media (prefers-reduced-motion:reduce){.dfx-mega{transition:none}}

/* ---- fixes measured on the live page, 1 Sep -------------------------------- */
/* the inner-hero trust row was styled for a dark hero: .svchero .htrust b was #fff
   on our white ground, so the bold half of every stat was invisible */
.svchero .htrust,.svchero .hero-trust{color:var(--muted)}
.svchero .htrust b,.svchero .hero-trust b{color:var(--txt-dark)}
.svchero .htrust .d,.svchero .hero-trust .d{color:var(--blue)}
/* the Prefusion mark on the pathway bracket was too small to read its second line */
.b3-bracket-r span img{height:34px}
@media(max-width:980px){.b3-bracket-r span img{height:28px}}
/* expanded, the panel carries the wordmark, so the tab drops to just the rule */
.pfx-rail:hover .pfx-rail-tab img,.pfx-rail:focus-visible .pfx-rail-tab img{opacity:0;transition:opacity .18s}
/* drawer promo CTA sat 5px off the card edge at 390px */
.drawer-promo{padding:20px 20px 24px}

/* at mega-menu widths every link is already on the bar, so the burger goes */
@media(min-width:1300px){.nav .menubtn{display:none}}

/* ===========================================================================
   MOBILE COMPACTION PASS (verified on iPhone 13, 390x844 @3x)
   The home page ran 14,426px on a phone against 8,490px on desktop, because
   every desktop grid collapsed to one full-width column: the six measure
   tiles alone were 2,494px and the four package cards 2,342px. Rows and a
   snap slider bring those back to a thumb's reach without hiding anything.
   =========================================================================== */
@media(max-width:760px){

  /* -- measure tiles become a row list: 96px thumb left, copy right ---------- */
  .mt-grid{grid-template-columns:1fr;gap:10px}
  .mt{display:grid;grid-template-columns:96px 1fr;align-items:stretch;border-radius:14px}
  .mt-img{aspect-ratio:auto;height:100%;min-height:96px}
  .mt-b{padding:12px 14px 13px;display:flex;flex-direction:column;justify-content:center}
  .mt-b h3{font-size:15.5px;margin-bottom:4px;line-height:1.25}
  .mt-b p{font-size:13px;line-height:1.5;margin-bottom:9px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .mt-b p:last-child{margin-bottom:0}
  .mt-test{align-self:flex-start}

  /* -- packages become a swipe deck, full bleed, one card per thumb --------- */
  .pk-grid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;
    padding:2px 16px 12px;scrollbar-width:none}
  .pk-grid::-webkit-scrollbar{display:none}
  .pk{flex:0 0 78vw;max-width:320px;scroll-snap-align:center}
  .pk-img{aspect-ratio:16/9}
  .pk-b{padding:16px 18px 18px}
  .pk-b p{font-size:13.5px;line-height:1.55;margin-bottom:12px}

  /* -- service cards keep their column, shorter frame ----------------------- */
  .svc .sv-img{aspect-ratio:16/9}
  .svc .sv-body{padding:16px 18px 18px}
  .svc .sv-body h3{font-size:17px}
  .svc .sv-body p{font-size:13.5px;line-height:1.55}

  /* -- section rhythm: 44px was still a lot of air between stacked blocks --- */
  .pad{padding-top:38px;padding-bottom:38px}
  .sec-head{margin-bottom:18px}
  .b3{padding-top:46px;padding-bottom:46px}
  .imgcta{padding-top:52px;padding-bottom:52px}

  /* -- tap targets: 44px minimum on everything a thumb has to hit ----------- */
  .nav .menubtn{width:44px;height:44px}
  .nav .brand{padding:10px 0}
  .pfx-band a{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px}
  .crumbs a,.crumb a{display:inline-flex;align-items:center;min-height:40px;padding:2px 0}

  /* -- nothing under 12px on a phone --------------------------------------- */
  .topbar{font-size:12px}
  .svchero .chip,.chip{font-size:12.5px}
  .rl-tag,.pk-tag,.b5 .b5-e{font-size:12px}
  .ccard .ck-tag,.ck-tag{font-size:12px}
  .b4 a.b4-go,.b5 a.b5-go,.gscore a{min-height:44px;align-items:center;display:inline-flex}
}

/* ---- mobile pass, round two (found by looking at real iPhone captures) ---- */
@media(max-width:760px){
  /* the gift-card benefits wall was forced 2-up by an !important further up the
     cascade; at 390px that wrapped "DEXA body composition, $179" onto 3 lines */
  .benefits-grid{grid-template-columns:1fr!important;gap:10px!important}
  .bcard{padding:16px 18px!important}
  .bcard h3{font-size:16.5px!important}
  .bcard p{font-size:13.5px!important}

}
/* one line of topbar instead of two on narrow phones */
@media(max-width:520px){.tb-lead{display:none}.topbar{font-size:12px;letter-spacing:.01em}}

/* The MindBody slot is empty until their script fills it. Unstyled that is
   1,500px of white on a phone whenever the widget is slow or blocked; the
   moment MindBody injects its iframe the element stops being :empty and this
   placeholder disappears on its own. */
.mindbody-widget:empty{min-height:420px;display:grid;place-items:center;
  border:1px dashed var(--line-l);border-radius:16px;background:var(--mist)}
.mindbody-widget:empty::before{content:"Loading the scheduler…";
  font-size:14px;font-weight:600;color:var(--muted)}

/* ===========================================================================
   MEGA MENU, HOVER INTENT
   Measured live at 1440: the trigger's bottom edge is y=93 and the panel's top
   is y=110, so there is a 17px dead band, and the ::before bridge only covered
   14px of it and only spanned the PANEL's width. The Services trigger sits at
   x 290-374 while its panel starts at x=332, so dragging straight down off
   "Services" left .dfx-has entirely and the panel shut before you reached it.
   Fixed two ways: a bridge that actually covers the gap, and a JS open state
   with a close delay so travel between trigger and panel never closes it.
   =========================================================================== */
.dfx-mega::before{top:-24px;height:24px;left:-56px;right:-56px}
.dfx-has.dfx-open .dfx-mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.dfx-has.dfx-open .dfx-trig{color:var(--blue2)}
.dfx-has.dfx-open .dfx-caret{transform:rotate(180deg);opacity:1}

/* ---- 30 Sep 2026: five package cards (Protocol Plus added), optional upsell block ---- */
@media(min-width:1281px){.pk-grid.pk-5{grid-template-columns:repeat(5,1fr);gap:16px}.pk-5 .pk-b{padding:18px 18px 22px}}
@media(min-width:1101px) and (max-width:1280px){.pk-grid.pk-5{grid-template-columns:repeat(3,1fr)}}
.upsell{max-width:820px;margin:0 auto;text-align:center;background:var(--paper);border:1px solid var(--line-l);
  border-radius:20px;padding:40px 36px 36px;box-shadow:0 18px 44px rgba(10,30,45,.06)}
.upsell .sec-head{margin:0 auto 14px;text-align:center}
.upsell .sec-head p{margin-left:auto;margin-right:auto}
.upsell-note{font-size:13.5px;color:var(--muted);margin:0 0 20px}
.upsell-btns{justify-content:center}
.b1-foot .hbtns{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:620px){.upsell{padding:28px 20px 24px;text-align:left}.upsell .sec-head{text-align:left}.upsell-btns{justify-content:flex-start}}

/* go-live 30 Sep 2026: keyword H1 is the big name, tagline sits under it smaller */
.hero .hsub,.svchero .hsub{font-family:inherit;font-size:clamp(20px,2.1vw,27px);line-height:1.25;font-weight:500;letter-spacing:-.01em;margin:10px 0 14px;opacity:.82}

/* 30 Sep 2026: portrait photo of Bryan in landscape tiles, keep his face in frame */
img[src*="c-bryan-tv"]{object-position:50% 14%!important}

/* ===========================================================================
   ROUND 2, 30 Sep 2026 (Manan's feedback after go-live)
   =========================================================================== */

/* ---- booking section: heading + widget, one quiet line under it ---------- */
#commerce .sec-head{margin-bottom:26px}
.bk-under{text-align:center;font-size:14px;color:var(--muted);margin:16px auto 0;max-width:560px}

/* ---- member stories: videos centred as one row, CTA centred underneath ----
   The strip was pulled out to 100vw with negative margins and never centred,
   so on pages with four reels the cards sat on the left and the button
   floated on the right. Now: a flex scroller whose track centres when it
   fits and scrolls from the left edge when it does not. */
.reels-sec .rl-scroll{margin-left:0;margin-right:0;width:auto;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;padding:6px 0 18px}
.reels-sec .rl-track{margin:0 auto;width:max-content;flex:0 0 auto;padding:0 24px;gap:16px}
.reels-sec .rl-track:after{display:none}
.reels-sec .rl{scroll-snap-align:center}
.reels-sec .rl-foot{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;margin-top:10px}
.reels-sec .rl-cta .hbtns,.reels-sec .rl-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
@media(max-width:560px){.reels-sec .rl-track{padding:0 16px;gap:12px}.reels-sec .rl{flex:0 0 min(62vw,236px)}}

/* ---- test prep: sticky tab bar, DEXA / RMR / VO2 max -------------------- */
.prep.pad{padding-top:0}
.prep-bar{position:sticky;top:110px;z-index:30;background:rgba(242,247,250,.94);-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-l);padding:12px 0}
.prep-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:680px;margin:0 auto;background:var(--paper);
  border:1px solid var(--line-l);border-radius:16px;padding:5px;box-shadow:0 10px 28px rgba(10,30,45,.06)}
.prep-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:9px 6px;border-radius:12px;
  text-decoration:none;color:var(--txt-dark);text-align:center;transition:background .2s,color .2s}
.prep-tab b{font-size:16px;font-weight:800;line-height:1.2}
.prep-tab small{font-size:12px;font-weight:600;color:var(--muted);line-height:1.3}
.prep-tab:hover{background:var(--sky)}
.prep-tab.on{background:var(--blue);color:#04222E}
.prep-tab.on small{color:rgba(4,34,46,.78)}
.no-js .prep-tab.on{background:transparent;color:var(--txt-dark)}
.prep-body{padding-top:44px}
.prep-panel{scroll-margin-top:190px}
.prep-panel+.prep-panel{margin-top:80px;padding-top:56px;border-top:1px solid var(--line-l)}
.prep.is-tabs .prep-panel+.prep-panel{margin-top:0;padding-top:0;border-top:0}
.prep-panel[hidden]{display:none!important}
.prep-head{text-align:center;max-width:720px;margin:0 auto 28px}
.prep-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin:10px 0 12px;color:var(--txt-dark)}
.prep-head p{font-size:16.5px;color:var(--muted);line-height:1.6}
.prep-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 20px}
.prep-stat{background:var(--paper);border:1px solid var(--line-l);border-radius:16px;padding:18px 14px;text-align:center}
.prep-stat b{display:block;font-size:24px;line-height:1.15;font-weight:800;color:var(--blue2);letter-spacing:-.01em}
.prep-stat span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.prep-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.prep-card{background:var(--paper);border:1px solid var(--line-l);border-radius:20px;padding:26px 24px 20px;
  box-shadow:0 14px 36px rgba(10,30,45,.05)}
.prep-ic{width:44px;height:44px;border-radius:12px;background:var(--sky);color:var(--blue2);display:grid;place-items:center;margin-bottom:14px}
.prep-ic svg{width:22px;height:22px}
.prep-card h3{font-size:19px;line-height:1.25;margin:0 0 12px;color:var(--txt-dark)}
.prep-list{list-style:none;padding:0;margin:0}
.prep-list li{position:relative;padding-left:28px;font-size:15px;line-height:1.55;color:#34424c;margin:0 0 10px}
.prep-list li:before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230177A8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}
@media(max-width:860px){.prep-stats{grid-template-columns:1fr 1fr}}
@media(max-width:620px){
  .prep-bar{padding:8px 0}
  .prep-tabs{gap:3px;padding:4px;border-radius:14px}
  .prep-tab{padding:8px 2px}
  .prep-tab b{font-size:15px}
  .prep-tab small{font-size:11px}
  .prep-body{padding-top:30px}
  .prep-stat{padding:14px 10px}
  .prep-stat b{font-size:20px}
  .prep-card{padding:22px 18px 14px}
}

/* ---- image crops, per photo, checked against each source image ----------
   object-fit:cover centres by default, which cut heads off the portrait
   photos in the landscape tiles (VO2 "Aerobic capacity", Bryan in
   "Visceral fat"). Each photo gets the focal point of its subject. */
img[src*="c-vo2-coach"]{object-position:60% 4%!important}
img[src*="c-vo2-bike"]{object-position:62% 24%!important}
img[src*="/vo2.jpg"]{object-position:55% 28%!important}
img[src*="c-bryan-explain"]{object-position:50% 9%!important}
img[src*="c-bryan-gym"]{object-position:50% 6%!important}
img[src*="consult.jpg"]{object-position:50% 11%!important}
img[src*="c-rmr-recline"]{object-position:55% 20%!important}
img[src*="c-waiting."]{object-position:42% 9%!important}
img[src*="c-waiting2"]{object-position:45% 11%!important}
img[src*="c-team-smile"]{object-position:50% 8%!important}
img[src*="c-superhuman"]{object-position:45% 45%!important}
img[src*="c-checkin"],img[src*="labs.jpg"]{object-position:55% 0%!important}
img[src*="c-review-tv"]{object-position:50% 30%!important}
img[src*="c-rmr-test"]{object-position:60% 25%!important}
img[src*="c-dexa-client"]{object-position:60% 55%!important}
img[src*="c-dexa-console"]{object-position:72% 45%!important}
img[src*="c-dexa-room2"]{object-position:45% 50%!important}
img[src*="c-dexa-woman"],img[src*="reset.jpg"]{object-position:50% 62%!important}
img[src*="bloodwork"]{object-position:65% 28%!important}
img[src*="dietitian"]{object-position:50% 28%!important}
img[src*="flex.jpg"]{object-position:55% 18%!important}
img[src*="dexa-room.jpg"]{object-position:65% 50%!important}
img[src*="dexa2.jpg"]{object-position:55% 45%!important}
img[src*="protocol.jpg"]{object-position:60% 50%!important}
/* the dark image CTA band is a wide strip, so portrait photos need their own focal point there too */
.imgcta[style*="c-vo2-coach"]:before{background-position:60% 6%}
.imgcta[style*="c-vo2-bike"]:before{background-position:60% 24%}
.imgcta[style*="c-bryan-explain"]:before,.imgcta[style*="consult.jpg"]:before{background-position:50% 14%}
.imgcta[style*="c-bryan-gym"]:before{background-position:50% 10%}
.imgcta[style*="c-rmr-recline"]:before{background-position:55% 22%}
.imgcta[style*="c-waiting"]:before{background-position:45% 12%}
.imgcta[style*="c-checkin"]:before,.imgcta[style*="labs.jpg"]:before,.imgcta[style*="c-review-tv"]:before{background-position:55% 25%}
.imgcta[style*="dietitian"]:before,.imgcta[style*="bloodwork"]:before{background-position:55% 28%}
.imgcta[style*="c-dexa-client"]:before{background-position:60% 55%}

/* package swipe deck: full bleed by cancelling the wrap padding, not by 100vw
   (100vw includes a desktop scrollbar and pushed the page 8px wide) */
@media(max-width:760px){.pk-grid{margin-left:-24px;margin-right:-24px;width:auto}}
@media(max-width:680px){.pk-grid{margin-left:-18px;margin-right:-18px}}
/* small phones: the longer nav CTAs ("Book your RMR test") pushed the menu button off the edge */
@media(max-width:420px){.nav-cta .btn{padding:10px 12px;font-size:13px}.nav-cta .btn .ar{display:none}}