/* ===========================================================================
   bridge.css, DexaFit NY to Prefusion Health
   Five variants, one file. Spec: dexafit-redesign-2026/BRIDGE-COMPONENTS.md
   B1 inline "your data, worked"      test pages
   B2 next-step rail                  commerce pages
   B3 pathway strip                   hub pages
   B4 footer band                     every page
   B5 in-article card                 blog posts
   All render without JS. Reduced-motion safe. No box-shadow on hairline parts.
   =========================================================================== */

/* ---------- B1 ------------------------------------------------------------ */
.b1{background:var(--mist);padding:82px 0;position:relative;overflow:hidden}
.b1-ghost{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.07;filter:grayscale(.3)}
.b1-in{position:relative;z-index:2;display:grid;grid-template-columns:.86fr 1.14fr;gap:52px;align-items:start}
.b1-h{font-size:clamp(28px,3.4vw,42px);line-height:1.1;margin:12px 0 14px;color:var(--txt-dark)}
.b1-lead{color:var(--muted);font-size:16.5px;max-width:34ch}
.b1-tiles{display:grid;gap:14px}
.b1-tile{background:var(--paper);border:1px solid var(--line-l);border-radius:16px;padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;transition:.22s ease}
.b1-tile:hover{border-color:#bcd7e6;transform:translateY(-2px)}
.b1-n{font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--blue2);padding-top:4px;font-variant-numeric:tabular-nums}
.b1-k{font-weight:700;font-size:17px;color:var(--txt-dark);margin-bottom:5px}
.b1-v{color:var(--muted);font-size:15px;line-height:1.55}
.b1-foot{margin-top:26px;padding-top:24px;border-top:1px solid var(--line-l);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.b1-foot p{color:var(--txt-dark);font-size:16px;font-weight:600;max-width:46ch}
@media(max-width:900px){.b1{padding:58px 0}.b1-in{grid-template-columns:1fr;gap:26px}.b1-foot{flex-direction:column;align-items:flex-start}}

/* ---------- B2 ------------------------------------------------------------ */
.b2{background:var(--paper);padding:70px 0;border-top:1px solid var(--line-l)}
.b2-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;position:relative}
.b2-step{padding:0 28px 0 0;position:relative}
.b2-step:before{content:"";position:absolute;left:0;top:13px;right:0;height:1px;background:var(--line-l)}
.b2-step:last-child:before{right:auto;width:14px}
.b2-node{position:relative;z-index:2;width:28px;height:28px;border-radius:99px;background:var(--paper);border:1.5px solid var(--line-l);display:grid;place-items:center;font-size:12.5px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.b2-step.is-last .b2-node{background:var(--blue);border-color:var(--blue);color:#04222E}
.b2-k{font-weight:700;font-size:18px;margin:16px 0 6px;color:var(--txt-dark)}
.b2-v{color:var(--muted);font-size:15px;line-height:1.55;max-width:26ch}
.b2-step .btn{margin-top:16px}
@media(max-width:820px){
  .b2-rail{grid-template-columns:1fr;gap:26px;padding-left:14px}
  .b2-step{padding:0 0 0 30px}
  .b2-step:before{left:13px;top:0;bottom:-26px;right:auto;width:1px;height:auto}
  .b2-step:last-child:before{bottom:auto;height:14px}
  .b2-node{position:absolute;left:0;top:0}
  .b2-k{margin-top:2px}
}

/* ---------- B3 ------------------------------------------------------------ */
.b3{background:var(--ink);color:#fff;padding:88px 0;position:relative;overflow:hidden}
.b3 .eyebrow{color:var(--blue)}
.b3-h{font-size:clamp(28px,3.6vw,44px);line-height:1.08;margin:12px 0 8px;color:#fff}
.b3-sub{color:var(--muted-d);max-width:52ch;font-size:16.5px}
.b3-flow{margin-top:44px;position:relative}
.b3-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.b3-stage{background:rgba(255,255,255,.045);border:1px solid var(--line-d);border-radius:16px;padding:22px 20px 24px;position:relative}
.b3-stage.is-dexafit{background:rgba(0,159,223,.12);border-color:rgba(0,159,223,.34)}
.b3-idx{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--muted-d);font-variant-numeric:tabular-nums}
.b3-stage.is-dexafit .b3-idx{color:var(--blue)}
.b3-k{font-weight:700;font-size:19px;margin:10px 0 8px;color:#fff}
.b3-v{color:var(--muted-d);font-size:14.5px;line-height:1.55}
.b3-arrow{position:absolute;right:-13px;top:44px;width:22px;height:22px;z-index:3;color:var(--muted-d)}
.b3-stage:last-child .b3-arrow{display:none}
.b3-bracket{margin-top:14px;display:grid;grid-template-columns:1fr 3fr;gap:16px;align-items:center}
.b3-bracket-l{height:2px;background:rgba(255,255,255,.08);border-radius:2px}
.b3-bracket-r{position:relative;height:2px;background:#8BD600;border-radius:2px}
.b3-bracket-r span{position:absolute;left:50%;transform:translate(-50%,-50%);top:0;background:var(--ink);padding:0 14px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8BD600;white-space:nowrap}
.b3-cta{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media(max-width:980px){.b3-stages{grid-template-columns:repeat(2,1fr)}.b3-arrow{display:none}.b3-bracket{grid-template-columns:1fr}.b3-bracket-l{display:none}}
@media(max-width:560px){.b3{padding:60px 0}.b3-stages{grid-template-columns:1fr}}

/* ---------- B4 ------------------------------------------------------------ */
.b4{background:var(--ink);color:#fff;border-radius:12px 12px 0 0;padding:20px 26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between}
.b4-l{display:flex;align-items:center;gap:14px;min-width:0}
.b4-l img{height:26px;width:auto;flex:0 0 auto}
.b4-t{font-size:14.5px;color:#cfe3ef;line-height:1.5}
.b4-t b{color:#fff;font-weight:700}
.b4 a.b4-go{font-weight:700;font-size:14.5px;color:var(--blue);white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:.2s}
.b4 a.b4-go:hover{color:#3cc0f5;gap:11px}
@media(max-width:700px){.b4{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}}

/* ---------- B5 ------------------------------------------------------------ */
.b5{border:1px solid var(--line-l);border-radius:16px;padding:24px 26px;margin:36px 0;background:var(--paper)}
.b5-e{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue2)}
.b5-h{font-weight:700;font-size:19px;margin:10px 0 8px;color:var(--txt-dark);line-height:1.3}
.b5-b{color:var(--muted);font-size:15.5px;line-height:1.6;margin-bottom:14px}
.b5-go{font-weight:700;font-size:15px;color:var(--blue2);display:inline-flex;align-items:center;gap:7px;transition:.2s}
.b5-go:hover{gap:11px}

/* ===========================================================================
   DexaFit additions: classes this build introduces on top of the lifted system
   =========================================================================== */
.pagewrap{position:relative}

/* mega menu trigger + columns */
.has-mega-link{position:relative}
.mega-trig{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.mega-trig .chev{width:14px;height:14px;transition:transform .22s ease;flex:0 0 auto}
.has-mega-link:hover .mega-trig .chev,.has-mega-link:focus-within .mega-trig .chev{transform:rotate(180deg)}
.mega{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%) translateY(-8px);
  background:var(--paper);border:1px solid var(--line-l);border-radius:20px;padding:26px 30px;
  box-shadow:0 24px 60px rgba(10,18,25,.14);opacity:0;visibility:hidden;transition:.22s ease;z-index:80;min-width:520px}
.has-mega-link:hover .mega,.has-mega-link:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:0!important;max-width:none}
.mega-col h6{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.mega-item{display:block;padding:10px 12px;border-radius:12px;transition:.18s ease;margin:0 -12px}
.mega-item:hover{background:var(--mist)}
.mega-item b{display:block;font-size:15px;font-weight:700;color:var(--txt-dark);margin-bottom:2px}
.mega-item span{display:block;font-size:13px;color:var(--muted);line-height:1.4}
@media(max-width:1299px){.mega{display:none}}

/* drawer group heading */
.dr-h{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-d);margin:22px 0 6px}
.drawer-links .dr-h:first-child{margin-top:0}

/* blog index cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:var(--paper);border:1px solid var(--line-l);border-radius:16px;overflow:hidden;transition:.22s ease;display:block}
.post:hover{transform:translateY(-3px);border-color:#bcd7e6}
.post-b{padding:24px 24px 26px}
.post-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue2);background:var(--sky);padding:5px 11px;border-radius:99px;margin-bottom:14px}
.post-b h3{font-size:19px;line-height:1.28;margin-bottom:10px;color:var(--txt-dark)}
.post-b p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.post-b .go{font-size:14px;font-weight:700;color:var(--blue2)}
@media(max-width:960px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.posts{grid-template-columns:1fr}}

/* long-form article */
.prose.article{max-width:74ch;margin:0 auto}
.prose.article h2{font-size:clamp(23px,2.5vw,30px);line-height:1.2;margin:40px 0 14px;color:var(--txt-dark)}
.prose.article h2:first-child{margin-top:0}
.prose.article p{font-size:17px;line-height:1.75;color:var(--txt-dark);margin-bottom:18px}
.prose.article ul{margin:0 0 22px 22px}
.prose.article li{font-size:17px;line-height:1.7;color:var(--txt-dark);margin-bottom:9px}
.prose.article .b5{max-width:none}

/* partner promo code block */
.promo-block{margin-top:24px;background:var(--sky);border:1px solid #c6e4f5;border-radius:16px;padding:20px 24px}
.promo-lbl{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue2);margin-bottom:8px}
.promo-code{display:inline-block;font-size:26px;font-weight:800;letter-spacing:.06em;color:var(--txt-dark);font-variant-numeric:tabular-nums}
.promo-block p{margin-top:8px;font-size:14.5px;color:var(--muted)}

/* a commerce block with only the booking card should not sit as one narrow
   column in the middle of the page (caught on /services and /book-now) */
.commerce.book-only{grid-template-columns:1fr;max-width:820px;margin-left:auto;margin-right:auto}
.commerce.book-only .ccard{width:100%}
.commerce.book-only .mindbody-widget{min-height:520px}
.commerce.buy-only{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.commerce.buy-only{grid-template-columns:1fr}}

/* ===== E2, the partnership bar =====
   Lives inside the existing fixed .topbar, so site.js keeps measuring one
   element for the body offset and nothing about the layout maths changes.
   Not a popup, in the markup before the nav, present with JS off. */
.topbar .pb-in{display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;line-height:1.35}
.topbar .pb-mark{height:17px;width:auto;display:block;flex:0 0 auto}
.topbar .pb-long,.topbar .pb-short{font-weight:700;color:inherit}
.topbar .pb-short{display:none}
.topbar .pb-go{color:var(--blue2);font-weight:800;white-space:nowrap;text-decoration:none;
  border-bottom:1px solid rgba(0,159,223,.45);padding-bottom:1px}
.topbar .pb-go:hover{border-bottom-color:var(--blue2)}
.topbar .pb-loc{opacity:.72;font-weight:600;white-space:nowrap}
@media(max-width:900px){
  .topbar .pb-loc{display:none}
}
@media(max-width:620px){
  .topbar{padding:8px 12px;font-size:12.5px}
  .topbar .pb-long{display:none}
  .topbar .pb-short{display:inline}
  .topbar .pb-go{display:none}
}