/* SSO Hospitals — components used by the inner pages (About / Doctors / Locations / cancer
   pages). Ports of the same React components as css/site.css; tokens from ../../styles.css. */

/* ---------- section tones & paddings (Shell.jsx Section) ---------- */
.tone-paper{background:var(--surface-paper)}
.tone-inverse{background:var(--surface-inverse)}
.p72{padding:72px 0}
.p80{padding:80px 0}
.pb0{padding-bottom:0}

/* ---------- grid helpers ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.g2-a{grid-template-columns:.85fr 1.15fr;gap:56px}
.ct-split{grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:32px;align-items:start}
/* Side column layout lives here, not inline — an inline display:grid beat the mobile
   display:contents below, so the cards shrink-wrapped and pushed the page wider than 320. */
.ct-split .ct-side{display:grid;gap:16px;min-width:0}
@media (max-width:860px){
  .ct-split{display:flex;flex-direction:column;gap:16px;align-items:stretch}
  .ct-split .ct-side{display:contents}
  .ct-split .ct-card-form{order:1}
  .ct-split .ct-wa-card{order:2}
  .ct-split .ct-contactcard{order:3}
}
.g2-b{grid-template-columns:1.1fr .9fr;gap:56px}
.g2-c{grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.g2-b64{grid-template-columns:1.1fr .9fr;gap:64px}
.g2-c64{grid-template-columns:.9fr 1.1fr;gap:64px}
.g2-d{grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.g2-small{gap:24px;align-items:stretch}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.g4-tight{gap:20px}
/* Location cards are fixed-shape, not fluid — each card stays 300px (never stretched or
   squeezed, so the Directions link can't clip) and the row reflows its column count to fit
   the space, left-aligned flush with the filters/count above instead of centering as a block. */
#loc-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
#loc-grid .loc{width:100%;max-width:320px}
/* Footer links land on /locations/#loc-<slug>: clear the sticky nav and mark the centre. */
#loc-grid .loc{scroll-margin-top:140px}
#loc-grid .loc:target{border-color:var(--purple-300);box-shadow:0 0 0 3px var(--purple-100),var(--shadow-md)}
@media (max-width:860px){#loc-grid .loc{scroll-margin-top:16px}}
/* Locations-page phone layout: fixed 2-up, stable card shape (clamped address, fixed
   image ratio) so rows line up evenly instead of the generic single-column mobile card. */
@media (max-width:575px){
  #loc-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  #loc-grid .loc{max-width:none}
  #loc-grid .loc .top{aspect-ratio:4/3}
  #loc-grid .loc .body{padding:12px}
  #loc-grid .loc .hd{gap:4px;flex-direction:column;align-items:flex-start}
  #loc-grid .loc h3{font-size:var(--text-xs);line-height:1.25;white-space:normal}
  #loc-grid .loc .badge{padding:3px 8px;font-size:9px;flex:none}
  #loc-grid .loc .addr{margin-top:6px;font-size:10px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:42px}
  #loc-grid .loc .addr-more{font-size:10px}
  #loc-grid .loc .ph-row{margin-top:8px;font-size:10px;gap:5px}
  #loc-grid .loc .acts{margin-top:10px;padding-top:10px;flex-direction:column;gap:8px;align-items:center}
  #loc-grid .loc .acts .b{flex:none;min-height:38px;font-size:11px;width:100%}
  #loc-grid .loc .acts .b-ghost{width:auto;justify-content:center;gap:4px}
  /* ~133px cards at 320: the knob sat on "Book a Con…". Same tightening as the doctor cards. */
  #loc-grid .loc{container-type:inline-size}
  @container (max-width:150px){
    #loc-grid .loc .acts .b:not(.b-ghost){font-size:10px;padding-left:6px;padding-right:28px;--knob-d:20px;--knob-c:calc(4px + var(--knob-d) / 2);--sweep-rest:.0111}
    #loc-grid .loc .acts .b:not(.b-ghost) .knob{right:4px;width:20px;height:20px}
  }
}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.gfit{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.mt40{margin-top:40px}
.mt28{margin-top:28px}
/* Above xxxl the shell keeps growing (\u00a73), but fixed-count grids have no extra columns to
   gain \u2014 bound them so cards don't stretch to 4K widths. auto-fill grids (.gfit) are left
   fluid on purpose: they add columns instead. */
@media (min-width:1800px){
  .g2,.g3,.g4,.g5,.ovx,.ovx-head,.ovx-team,.ova{max-width:1800px;margin-inline:auto}
  .g3{gap:32px}
  .g4{gap:40px}
}

/* ---------- ImagePlaceholder ---------- */
.imgph{position:relative;overflow:hidden;width:100%;background:var(--image-placeholder);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg)}
.imgph>span{font-family:var(--font-label);font-size:var(--text-2xs);color:var(--text-label);text-align:center;padding:8px}
.imgph-r2xl{border-radius:var(--radius-2xl)}
.imgph-43{aspect-ratio:4/3}
.imgph-45{aspect-ratio:4/5}
.imgph image-slot{position:absolute;inset:0}

/* ---------- Card ---------- */
.card{border-radius:var(--radius-lg);padding:24px;background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);transition:var(--transition-base)}
.card-p32{padding:32px}
.card-p26{padding:26px}
.card-p22{padding:22px}
.card-soft{background:var(--surface-brand-soft);border-color:var(--purple-100);box-shadow:none}
.card-paper{background:var(--surface-paper);border-color:var(--sand-200);box-shadow:none}
.card-flat{background:var(--surface-subtle);border-color:transparent;box-shadow:none}
.card-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);box-shadow:none}
.card h3{margin-top:16px}
.card h4{margin-top:14px}
.card p{line-height:var(--leading-relaxed)}

/* ---------- Stat (non-inverse tones + sizes) ---------- */
.stat-sm .v{font-size:var(--text-2xl)}
.stat-md .v{font-size:var(--text-4xl)}
.stat-brand .v{color:var(--purple-600)}
.stat-brand .l{color:var(--text-label)}

/* ---------- Button extras ---------- */
.b .pre{position:relative;z-index:2;display:inline-flex}
.b-secondary{background:var(--purple-50);color:var(--action-secondary-fg)}
.b-secondary .knob{background:var(--purple-600);color:var(--neutral-0)}
.b-secondary .sweep{background:var(--purple-600)}
.b-secondary .ring{box-shadow:inset 0 0 0 4px var(--neutral-0)}
.b-secondary:hover{color:var(--neutral-0)}
.b-secondary:hover .knob{background:transparent;color:var(--neutral-0)}
.b-glass{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass)}
.b-glass .knob{background:var(--neutral-0);color:var(--purple-700)}
.b-glass .sweep{background:var(--neutral-0)}
.b-glass .ring{box-shadow:inset 0 0 0 4px var(--purple-600)}
.b-glass:hover{color:var(--purple-700)}
.b-glass:hover .knob{background:transparent;color:var(--purple-700)}

/* ---------- eyebrow-only label (About hero) ---------- */
.kicker{font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-weight:500;color:var(--text-label)}
.kicker-inv{color:var(--text-label-inverse)}

/* ---------- ChecklistItem ---------- */
.chk{padding:0;margin:28px 0 0;display:grid;gap:14px;list-style:none}
.chk li{display:flex;gap:12px;align-items:flex-start;list-style:none}
.chk li>span.b1{flex:none;margin-top:2px;width:22px;height:22px;border-radius:var(--radius-circle);background:var(--green-50);display:flex;align-items:center;justify-content:center}
.chk li>span.t{font-size:var(--text-sm);color:var(--text-body);line-height:var(--leading-relaxed)}
.chk-inv li>span.b1{background:rgba(255,255,255,.16)}
.chk-inv li>span.t{color:rgba(255,255,255,.82)}

/* ---------- Badge (info tone) ---------- */
.badge-info{background:var(--blue-50);color:var(--blue-700)}

/* ---------- ValueCard ---------- */
/* Values — copy column left, card cluster right; the first value carries the
   filled brand treatment. */
#values{padding-block:clamp(24px,2.4vw,36px)}
.ab-val{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
.ab-val-head{display:grid;justify-items:start;gap:14px}
.ab-val-pill{display:inline-block;padding:7px 15px;border-radius:var(--radius-pill,999px);border:1px solid var(--border-default,#d9d5e2);font-family:var(--font-label);font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-heading)}
.ab-val-cta{margin-top:6px}
.ab-val-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ab-val-c{padding:clamp(16px,1.8vw,22px);border-radius:var(--radius-lg);background:var(--surface-card,#fff);border:1px solid var(--border-subtle);display:grid;align-content:start;gap:10px;transition:transform var(--dur,220ms) var(--ease,ease),box-shadow var(--dur,220ms) var(--ease,ease)}
.ab-val-c-lead{grid-column:1/-1;background:var(--surface-card,#fff);border-color:var(--border-default,#d9d5e2)}
.ab-val-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--neutral-100);color:var(--text-heading)}
.ab-val-c-lead .ab-val-ico{background:var(--neutral-100)}
.ab-val-c h4{font-size:var(--text-md);color:var(--text-heading)}
.ab-val-c p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
.ab-val-c-lead h4{font-size:var(--text-md);color:var(--text-heading)}
.ab-val-c-lead p{color:var(--text-body)}
.ab-val-grid.roll .ab-val-c{opacity:0;transition:opacity 700ms var(--ease-out),transform 820ms cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0)*110ms)}
.ab-val-grid.roll .ab-val-c:nth-child(odd){transform:translateX(-9%)}
.ab-val-grid.roll .ab-val-c:nth-child(even){transform:translateX(9%)}
.ab-val-grid.roll .ab-val-c.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ab-val-grid.roll .ab-val-c{opacity:1;transform:none;transition:none}}
@media (hover:hover){.ab-val-c:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(46,33,69,.1)}}
@media (max-width:980px){
  .ab-val{grid-template-columns:1fr;gap:26px}
  .ab-val-c-lead{grid-column:1/-1}
}
@media (max-width:640px){.ab-val-grid{grid-template-columns:1fr}}
.vcard{padding:26px;border-radius:var(--radius-lg);background:var(--surface-brand-soft);border:1px solid var(--purple-100)}
.vcard-paper{background:var(--surface-paper);border-color:var(--sand-200)}
.vcard h4{margin-top:16px}
.vcard p{margin-top:8px;font-size:var(--text-sm);color:var(--text-body);line-height:var(--leading-relaxed)}

/* ---------- Accordion ---------- */
.acc{display:grid;gap:12px}
.acc-it{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);transition:var(--transition-base)}
.acc-it.on{border-color:var(--purple-200);background:var(--purple-50)}
.acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:transparent;border:0;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-heading)}
.acc-it.on .acc-q{color:var(--purple-700)}
.acc-q .ic{color:var(--neutral-500)}
.acc-it.on .acc-q .ic{color:var(--purple-600)}
.acc-a{padding:0 20px 20px;font-size:var(--text-sm);color:var(--text-body);line-height:var(--leading-relaxed)}

/* ---------- FAQ page (premium two-column) ---------- */
.faqx{margin-top:40px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
.faq-rail{position:sticky;top:calc(var(--chrome-h,116px) + 16px);display:grid;gap:20px}
.fnav{display:grid;gap:6px}
.fnav-b{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 16px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;cursor:pointer;font-family:var(--font-sans);text-align:left;color:var(--text-body);transition:var(--transition-base);position:relative}
.fnav-b::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--purple-600);opacity:0;transform:scaleY(.3);transition:var(--transition-base)}
.fnav-b:hover{background:var(--surface-subtle,#f6f3fb);color:var(--text-heading)}
.fnav-b.on{background:var(--purple-50);color:var(--purple-700)}
.fnav-b.on::before{opacity:1;transform:scaleY(1)}
.fnav-t{font-size:var(--text-sm);font-weight:600;line-height:1.3}
.fnav-n{flex:none;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;border-radius:var(--radius-pill);background:var(--neutral-100,#eee);color:var(--text-muted);font-size:var(--text-2xs);font-weight:700;font-family:var(--font-label)}
.fnav-b.on .fnav-n{background:var(--purple-600);color:#fff}
.fx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--border-subtle)}
.fx-headl{min-width:0}
.fx-cat{display:block;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-regular);color:var(--text-heading)}
.fx-blurb{margin-top:8px;max-width:56ch;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-muted);text-wrap:pretty}
.fx-count{flex:none;font-size:var(--text-2xs);font-family:var(--font-label);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.fxacc{display:grid;gap:14px}
.fx-it{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-card);overflow:hidden;transition:border-color 260ms var(--ease-standard),box-shadow 260ms var(--ease-standard)}
.fx-it:hover{border-color:var(--border-strong,#cfc9dd)}
.fx-it.on{border-color:var(--purple-200);box-shadow:0 14px 34px rgba(46,33,69,.08)}
.fx-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-md);font-weight:600;color:var(--text-heading);line-height:1.4;transition:color 220ms var(--ease-standard)}
.fx-it.on .fx-q{color:var(--purple-700)}
.fx-plus{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-circle);background:var(--purple-50);color:var(--purple-600);transition:var(--transition-base)}
.fx-it.on .fx-plus{background:var(--purple-600);color:#fff}
.fx-a{padding:0 24px 24px;animation:ssoFaqIn 300ms var(--ease-out) both}
.fx-a p{max-width:64ch;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
@media (max-width:860px){
  .faqx{grid-template-columns:1fr;gap:28px;margin-top:26px}
  .faq-rail{position:static;gap:18px}
  .fnav{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fnav::-webkit-scrollbar{display:none}
  .fnav-b{flex:none;width:auto;padding:9px 14px;border-radius:var(--radius-pill);border-color:var(--border-default)}
  .fnav-b::before{display:none}
  .fnav-b.on{border-color:var(--purple-600)}
  .fnav-t{font-size:var(--text-xs);white-space:nowrap}
  .fnav-n{min-width:20px;height:20px}
  .fx-head{flex-direction:column;gap:10px}
  .fx-q{padding:18px 18px;font-size:var(--text-sm)}
  .fx-a{padding:0 18px 20px}
  .fx-plus{width:30px;height:30px}
}

/* ---------- Tabs ---------- */
.tabs .tab-btns{display:flex;gap:4px;border-bottom:1px solid var(--border-subtle);overflow-x:auto}
.tabs .tab-btns button{padding:14px 24px;background:transparent;border:0;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text-muted);margin-bottom:-1px;border-bottom:2px solid transparent;transition:var(--transition-base);white-space:nowrap}
.tabs .tab-btns button.on{color:var(--blue-600);border-bottom-color:var(--blue-600)}
.tabs .tab-body{padding-top:32px}
.tabs .tab-panel{display:none}
.tabs .tab-panel.on{display:block}
.tabs-pill .tab-btns{border-bottom:0;gap:8px;overflow-x:auto;scrollbar-width:none}
.tabs-pill .tab-btns::-webkit-scrollbar{display:none}
.tabs-pill .tab-btns button{flex:none;margin:0;padding:9px 20px;border:1px solid var(--border-default);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text-muted)}
.tabs-pill .tab-btns button.on{background:var(--purple-600);border-color:var(--purple-600);color:#fff}
@media (hover:hover){.tabs-pill .tab-btns button:not(.on):hover{border-color:var(--purple-300);color:var(--purple-700)}}

/* ---------- Input + chips ---------- */
.inp{display:flex;align-items:center;gap:8px;background:var(--neutral-0);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:0 14px;height:48px;min-width:320px;transition:var(--transition-base)}
.inp:focus-within{border-color:var(--border-default);box-shadow:none;outline:none}
.inp input:focus,.inp input:focus-visible{outline:none;box-shadow:none;border:0}
.inp input{flex:1;border:0;outline:none;background:transparent;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-heading);min-width:0}
.filter-row{margin-top:28px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.find-sec{padding:56px 0 40px}
.find-sec-tight{padding-top:8px}
.results-sec{padding-top:32px}
/* Custom dropdown (replaces native select popup) */
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px;background:var(--neutral-0);border:1px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-heading);white-space:nowrap}
.dd-btn::after{content:"";width:8px;height:8px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg) translateY(-2px);transition:transform 200ms var(--ease-out)}
.dd.open .dd-btn::after{transform:rotate(-135deg) translateY(-2px)}
.dd-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:100%;max-height:none;overflow:visible;background:var(--neutral-0);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:0 18px 44px rgba(46,33,69,.16);padding:6px;display:grid;gap:3px;align-content:start;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.dd.open .dd-menu{opacity:1;transform:none;pointer-events:auto}
.dd-opt{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:0;padding:9px 12px;line-height:1.4;border:0;border-radius:var(--radius-md);background:none;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-body);white-space:nowrap}
.dd-opt:hover{background:var(--purple-50)}
.dd-opt.on{color:var(--purple-700);font-weight:600;background:color-mix(in oklab,var(--purple-500) 8%,var(--neutral-0))}
.dd-opt.on::after{content:"";width:9px;height:5px;border-left:2px solid var(--purple-600);border-bottom:2px solid var(--purple-600);transform:rotate(-45deg) translateY(-2px)}
.chips{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:2px}
/* Dropdown filter styled to match .inp */
.sel{position:relative;display:inline-flex;align-items:center;background:var(--neutral-0);border:1px solid var(--border-default);border-radius:var(--radius-md);height:48px}
.sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sel select{appearance:none;-webkit-appearance:none;border:0;outline:none;background:transparent;height:100%;padding:0 40px 0 14px;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-heading);cursor:pointer;max-width:260px}
.chip{padding:10px 18px;border-radius:var(--radius-pill);cursor:pointer;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;white-space:nowrap;background:var(--neutral-0);color:var(--text-body);border:1px solid var(--border-default);transition:var(--transition-base)}
.chip.on{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}

/* ---------- DoctorCard — clean white card: untouched portrait on top, info below ---------- */
.dcard{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);overflow:hidden;background:var(--neutral-0);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm,0 1px 3px rgba(46,33,69,.07));transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out)}
.dcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.dcard>img{width:100%;aspect-ratio:4/4.1;object-fit:cover;object-position:top center;transform-origin:top center;transition:transform 700ms var(--ease-out)}
.dcard:hover>img{transform:scale(1.045)}
.dcard>.ph{width:100%;aspect-ratio:4/4.1;display:flex;align-items:center;justify-content:center;background:var(--image-placeholder)}
.dcard>.ph span{font-family:var(--font-label);font-size:var(--text-2xs);color:var(--text-label);text-align:center;padding:8px}
.dcard .frost,.dcard .scrim{display:none}
.dcard .panel{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:16px 20px 20px;background:var(--neutral-0)}
/* accent tick that stretches on hover; hue cycles per card below */
.dcard .in::before{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--ac,var(--blue-500));margin-bottom:12px;transition:width 320ms var(--ease-out)}
.dcard:hover .in::before{width:52px}
.dcard .in{display:flex;flex-direction:column;flex:1}
.dcard h3{font-size:var(--text-md);color:var(--text-heading)}
.dcard .sp{margin-top:5px;font-size:var(--text-xs);color:var(--text-body);line-height:var(--leading-normal)}
.dcard .lo{margin-top:4px;font-size:var(--text-2xs);color:var(--text-muted)}
.dcard .act{margin-top:auto;padding-top:16px;display:flex;gap:8px;flex-wrap:nowrap}
.dcard .act .b{flex:1 1 auto;min-width:0;justify-content:space-between;font-size:10px;padding:6px 4px 6px 10px;gap:5px}
.dcard .act .b .lbl{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcard .act .b .knob{flex:none;width:22px;height:22px}
/* Every other knob size in the design pairs with an icon at ~half its width (34/15, 28/14).
   The 22px card knob never got its pairing and inherited the 14px b-sm arrow. */
.dcard .act .b .knob .ic{width:11px!important;height:11px!important}
/* Card CTAs keep the site's sweep animation; the knob is 22px at a 4px inset and the sweep
   geometry follows from those two numbers (see .b .sweep in site.css). */
.dcard .act .b{--knob-d:22px;--pad-r:4px;--sweep-d:900px;--sweep-rest:.02444}
.dcard .act .b .ring{box-shadow:inset 0 0 0 3px var(--purple-600)}
/* View Profile sweeps to dark purple (not lilac) on hover. */
.dcard .act .b-lilac .sweep{background:var(--purple-800)}
.dcard .act .b-lilac .ring{box-shadow:inset 0 0 0 3px var(--purple-800)}
.dcard .act .b-lilac:hover{color:var(--neutral-0)}
.dcard .act .b-lilac:hover .knob{background:var(--neutral-0);color:var(--purple-800)}
/* Touch: a tap is over before the 420ms colour transition finishes, so the label sat purple on the
   darkening sweep. White immediately on tap/press, and the sweep fills fast. */
@media (hover:none){
  .dcard .act .b-lilac:is(:hover,:active){color:var(--neutral-0)}
  .dcard .act .b-lilac:is(:hover,:active) .lbl{transition:none}
  .dcard .act .b-lilac:is(:hover,:active) .knob{background:var(--neutral-0);color:var(--purple-800);transition:none}
  .dcard .act .b-lilac:active .sweep{transform:scale(1);transition-duration:220ms}
}
/* Contact page "featured doctors": three wide cards (380–600px), so the compact 10px pills built
   for the 250px listing cards looked squashed and stretched. Standard small buttons at their
   natural width instead. 861–1099 keeps the compact pair — the cards are too narrow there. */
@media (min-width:1100px){
  #ct-docs .dcard .act{gap:10px;justify-content:flex-start;flex-wrap:wrap}
  /* min-width: the pair matches when it wraps to two lines (~320px cards at 1100–1365). */
  #ct-docs .dcard .act .b{flex:0 0 auto;min-width:156px;min-height:42px;padding:7px 7px 7px 18px;gap:12px;font-size:var(--text-xs);--knob-d:28px;--pad-r:7px;--sweep-d:520px;--sweep-rest:.0538}
  #ct-docs .dcard .act .b .lbl{overflow:visible}
  #ct-docs .dcard .act .b .knob{width:28px;height:28px}
  #ct-docs .dcard .act .b .knob .ic{width:14px!important;height:14px!important}
}

.dcard .exp{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-pill);background:color-mix(in oklab,var(--ac,var(--blue-500)) 62%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-family:var(--font-label);font-size:var(--text-3xs,10px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* ---------- ReviewCard (clamped, Read More) ---------- */
.rvcard{padding:24px;border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.rvcard .stars-o{display:flex;gap:2px}
.rvcard .q{margin-top:14px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rvcard.open .q{display:block}
.rvcard .ft{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;row-gap:8px}
.rvcard .au{min-width:0;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-heading)}
.rvcard .au span{color:var(--text-faint);font-weight:400}

/* ---------- Rating row ---------- */
.rating{display:flex;align-items:center;gap:8px}
.rating .val{font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--text-heading)}
.rating .st{display:flex;gap:2px}
.rating .ct{font-size:var(--text-xs);color:var(--text-muted)}

/* ---------- About: founder quote ---------- */
.fquote{margin:26px 0 0;padding-left:22px;border-left:2px solid var(--blue-200);font-family:var(--font-serif);font-style:italic;font-size:var(--text-lg);line-height:var(--leading-normal);color:var(--purple-900)}
.prose{margin-top:20px;line-height:var(--leading-relaxed)}
.prose+.prose{margin-top:16px}
.badges{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Doctors: helper band ---------- */
.helper{margin-top:48px;padding:40px;border-radius:var(--radius-2xl);background:var(--surface-brand-soft);border:1px solid var(--purple-100);display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.helper p{margin-top:8px;font-size:var(--text-sm)}
.countrow{display:flex;align-items:center;gap:12px}

/* ---------- cancer page hero ---------- */
.chero{position:relative;background:var(--surface-inverse);overflow:hidden}
.chero .bg{position:absolute;inset:0}
.chero .bg .imgph{height:100%;border-radius:0}
.chero .bg .scrim{position:absolute;inset:0;background:var(--scrim-left)}
.chero .in{position:relative;width:100%;max-width:100%;margin:0 auto;padding:clamp(44px,4.4vw,72px) var(--shell-gutter) clamp(60px,6vw,96px)}
/* Plain banner (page.php, search, 404, index): its .wrap had top padding only, so the last line —
   the lede / "Last updated" — sat on the banner's bottom edge. */
.chero>.wrap{position:relative;padding-top:clamp(44px,4.4vw,72px);padding-bottom:clamp(40px,4.4vw,64px)}
/* Desktop: the photo banners' extra top push (--banner-push) is split top / bottom on this short,
   text-only banner, so the title block sits centred instead of hanging off the bottom. */
@media (min-width:861px){
  .chero:not(.chero-tall)>.wrap{padding-top:calc(var(--banner-push,0px) * .5 + clamp(40px,4.4vw,72px));padding-bottom:calc(var(--banner-push,0px) * .5 + clamp(40px,4.4vw,64px))}
}
/* SCOPED to the dark banner. These were bare .crumbs rules, but header.php's breadcrumb bar
   uses <div class="wrap crumbs">, so it inherited white text on its white background and the
   whole trail went invisible on every inner page. Never style .crumbs unscoped. */
.chero .crumbs{display:flex;align-items:center;gap:8px;font-size:var(--text-2xs);color:rgba(255,255,255,.6)}
.chero .crumbs a{color:rgba(255,255,255,.6)}
.chero .crumbs a:hover{color:#fff}
.chero .crumbs .now{color:#fff}
.chero .crumbs .ic{color:rgba(255,255,255,.4)}
.chero .hcol{max-width:640px;margin-top:26px}
.tagpill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);color:#fff;font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-wide)}
.chero h1{margin-top:10px;color:#fff;font-size:var(--text-5xl)}
.chero .lede{margin-top:12px;font-size:var(--text-md);color:rgba(255,255,255,.82);line-height:var(--leading-normal)}
.chero .body{margin-top:14px;font-size:var(--text-sm);color:rgba(255,255,255,.66);line-height:var(--leading-relaxed)}
.chero .cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.note{margin-top:24px;font-size:var(--text-sm);color:var(--text-muted)}
.note-inv{color:rgba(255,255,255,.66)}
.sublabel{margin-top:22px;font-size:var(--text-2xs);font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-family:var(--font-label);color:var(--text-label)}
.tagrow{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.stack{display:grid;gap:24px}
.stack-start{align-content:start}
.paras{margin-top:24px;display:grid;gap:16px}
.paras p{font-size:var(--text-sm);line-height:var(--leading-relaxed)}
.typecard h4{color:var(--specialty-hpb)}
.typecard p{margin-top:10px;font-size:var(--text-sm);line-height:var(--leading-relaxed)}
.headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.locrow{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}

/* ================= responsive (860px = the React build's mobile switch) ================= */
@media (max-width:860px){
  .p72,.p80{padding:48px 0}
  .g2,.g2-a,.g2-b,.g2-c,.g2-d,.g2-b64,.g2-c64{grid-template-columns:1fr;gap:28px}
  .g2-small{gap:18px}
  .g3,.gfit{grid-template-columns:1fr;gap:18px}
  .gfit{grid-template-columns:1fr 1fr;gap:14px}
  .g4{grid-template-columns:1fr 1fr;gap:20px}
}
@media (max-width:575px){
  .g5{grid-template-columns:1fr 1fr;gap:14px}
  .locrow{grid-template-columns:1fr;gap:24px}
  .mt40{margin-top:28px}
  h1{font-size:var(--text-3xl);line-height:var(--leading-tight)}
  .chero h1{font-size:var(--text-3xl);line-height:var(--leading-tight)}
  .chero .in{padding:34px 20px 48px}
  .chero>.wrap{padding-top:30px;padding-bottom:32px}
  .chero .lede{margin-top:8px;font-size:var(--text-sm)}
  .chero .body{margin-top:12px;font-size:var(--text-xs)}
  .chero .cta{margin-top:22px;gap:10px}
  .chero .hcol{margin-top:18px}
  .stat-md .v{font-size:var(--text-xl)}
  .stat-sm .v{font-size:var(--text-md)}
  .inp{min-width:0;width:100%}
  .card-p32{padding:24px}
  .helper{margin-top:32px;padding:24px;gap:20px}
  .fquote{font-size:var(--text-md);padding-left:16px}
  .tabs .tab-btns button{padding:12px 16px;font-size:var(--text-xs)}
  .tabs .tab-body{padding-top:24px}
  .dcard .panel{padding:12px 14px 16px}
  .rvcard{padding:20px}
}

/* ---------- static page hero (inherits .hero from site.css) ---------- */
.hero-static{min-height:560px}
.hero-static .bg>.room{object-position:72% 30%}
/* The hero butts straight up against the fixed chrome, so its top padding has to clear the
   bar's own height — with a logo in the utility strip the bar runs taller than the CSS
   fallback and the eyebrow's bracket mark was getting clipped at the boundary. */
.hero-static .in{padding:calc(var(--chrome-h,116px) * .34 + clamp(44px,4.4vw,72px)) var(--shell-gutter) clamp(64px,6.4vw,104px)}
.hero-static .down{bottom:18px}
.hero-static .col{max-width:min(760px,58%)}
.hero-static h1{max-width:680px}
.hero-static h1 span{animation-delay:-3.5s}
.hero-static .copy .lede{max-width:560px;min-height:0}
@media (min-width:861px) and (max-width:1060px){
  .hero-static .col{max-width:min(760px,66%)}
  .hero-static .stats{gap:26px;white-space:normal;flex-wrap:wrap}
}
@media (max-width:860px){
  /* Match the home banner on mobile: same viewport-height hero, photo band at the
     bottom (.bg-m), and inline pill CTAs — not stretched full-width buttons. */
  .hero-static{min-height:470px;height:auto}
  .hero-static .in{display:flex;flex-direction:column;height:auto;padding:24px 20px 54px}
  .hero-static .col{max-width:none}
  .hero-static h1{font-size:30px}
  .hero-static .copy .lede{max-width:none;min-height:0}
  .hero-static .bg-m{height:52%}
  .hero-static .bg-m img{object-position:center 26%}
}

/* ---------- Doctors: "How our specialists help" ---------- */
/* Six cards fly in from outside the container; the portrait holds the centre. */
.help-sec{position:relative;padding:72px 0;overflow:hidden}
.help-bg{position:absolute;inset:0;pointer-events:none}
.help-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.45}
.help-bg .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.86) 100%)}
.help-sec .wrap{position:relative;z-index:1}
.help-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr) minmax(0,1fr);gap:44px;align-items:center}
.help-col{display:grid;gap:52px}
.help-card{position:relative;display:flex;align-items:center;gap:14px;background:var(--neutral-0);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px 22px;box-shadow:0 14px 32px rgba(46,33,69,.1);opacity:0;transition:transform 900ms cubic-bezier(.22,1,.36,1),opacity 620ms var(--ease-standard),box-shadow 320ms var(--ease-standard)}
.help-card .dot{flex:none;width:9px;height:9px;border-radius:var(--radius-circle)}
.help-card.c-purple{border-color:var(--blue-100)}
.help-card.c-purple .dot{background:var(--blue-500)}
.help-card.c-blue{border-color:var(--blue-100)}
.help-card.c-blue .dot{background:var(--blue-500)}
.help-card.c-green{border-color:var(--green-100)}
.help-card.c-green .dot{background:var(--green-500)}
.help-card.c-orange{border-color:var(--green-100)}
.help-card.c-orange .dot{background:var(--green-500)}
.help-col-l .help-card{transform:translateX(-125%)}
.help-col-r .help-card{transform:translateX(125%)}
.help-grid.in .help-card{opacity:1}
.help-col-l .help-card:nth-child(1),.help-col-r .help-card:nth-child(1){transition-delay:0ms}
.help-col-l .help-card:nth-child(2),.help-col-r .help-card:nth-child(2){transition-delay:130ms}
.help-col-l .help-card:nth-child(3),.help-col-r .help-card:nth-child(3){transition-delay:260ms}
.help-grid.in .help-col-l .help-card{transform:translateX(0)}
.help-grid.in .help-col-r .help-card{transform:translateX(0)}
.help-grid.in .help-col-l .help-card:nth-child(2){transform:translateX(0)}
.help-grid.in .help-col-r .help-card:nth-child(2){transform:translateX(0)}
.help-grid.in .help-col-l .help-card:nth-child(3){transform:translateX(0)}
.help-grid.in .help-col-r .help-card:nth-child(3){transform:translateX(0)}
.help-card:hover{transform:translateX(0) translateY(-4px) scale(1.06)!important;z-index:4;box-shadow:0 26px 54px rgba(46,33,69,.16)}
/* base.css sets text-wrap:balance on headings; in these narrow cards that leaves
   ragged mid-line gaps, so wrap these normally. */
.help-card h3{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:var(--leading-snug);color:var(--text-heading);text-wrap:pretty;hyphens:none}
.help-mid{text-align:center;display:grid;justify-items:center}
.help-mid h2{margin-top:6px;white-space:nowrap;font-size:var(--text-2xl)}
.help-photo{width:100%;margin-top:26px;aspect-ratio:4/3;border-radius:var(--radius-xl);overflow:hidden;background:var(--purple-50);box-shadow:0 22px 48px rgba(46,33,69,.16)}
.help-photo img{width:100%;height:100%;object-fit:cover}
.help-lede{margin-top:18px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:420px}
.help-cta{margin-top:24px}
.help-cta .b-lg{padding:9px 9px 9px 26px;gap:14px}
.help-cta .b-lg{--knob-d:34px;--pad-r:9px;--sweep-d:700px;--sweep-rest:.04857}
.help-cta .b-lg .knob .ic{width:15px!important;height:15px!important}
@media (max-width:860px){
  /* Mobile: no photo card; the six cards become a vertical timeline that rises in
     one-by-one along a coloured rail (the fly-in tilt is a desktop-only treatment). */
  .help-sec{padding:44px 0}
  .help-grid{grid-template-columns:1fr;gap:0}
  /* Intro first, timeline strips next, CTA last (mobile reading order). */
  .help-mid{display:contents}
  .help-mid>*{order:-2}
  .help-mid h2,.help-sec .help-lede{text-align:center}
  .help-cta{order:2;justify-self:center;margin:26px 0 0}
  .help-lede{margin-bottom:22px}
  .help-mid h2{white-space:normal;font-size:var(--text-xl)}
  .help-photo{display:none}
  .help-lede{margin-top:12px}
  .help-col{gap:0;position:relative}
  .help-col::before{content:"";position:absolute;left:15px;top:16px;bottom:0;width:2px;border-radius:1px;background:linear-gradient(180deg,var(--purple-200),var(--blue-200) 45%,var(--green-200) 82%,var(--orange-200))}
  .help-col-r::before{top:0;bottom:30px;background:linear-gradient(180deg,var(--orange-200),var(--blue-200) 55%,var(--purple-200))}
  .help-col-r{margin-top:0}
  .help-card{position:relative;margin:0 0 14px 36px;padding:13px 16px;border-radius:var(--radius-md);box-shadow:0 10px 22px rgba(46,33,69,.08)}
  .help-card h3{font-size:var(--text-xs)}
  .help-card .dot{position:absolute;box-sizing:border-box;left:-27px;top:50%;width:14px;height:14px;margin:0;transform:translateY(-50%);border:2px solid var(--neutral-0);box-shadow:0 1px 4px rgba(46,33,69,.18)}
  .help-col-l .help-card,.help-col-r .help-card{transform:translateY(18px) rotate(0)}
  .help-grid.in .help-col-l .help-card,.help-grid.in .help-col-r .help-card,
  .help-grid.in .help-col-l .help-card:nth-child(2),.help-grid.in .help-col-r .help-card:nth-child(2),
  .help-grid.in .help-col-l .help-card:nth-child(3),.help-grid.in .help-col-r .help-card:nth-child(3){transform:translateY(0) rotate(0)}
  .help-col-r .help-card:nth-child(1){transition-delay:390ms}
  .help-col-r .help-card:nth-child(2){transition-delay:520ms}
  .help-col-r .help-card:nth-child(3){transition-delay:650ms}
  .help-card:hover{transform:translateY(0) rotate(0)!important}
}
@media (prefers-reduced-motion:reduce){
  .help-card{transition:none}
  .help-col-l .help-card,.help-col-r .help-card{transform:none;opacity:1}
}

/* ---------- Doctors: FAQ grid ---------- */
.faq-sec{padding:56px 0 96px}
.faq2{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.faq-col{display:grid;gap:20px;align-content:start}
/* Each card carries its own brand hue via --fc, cycled in doctors.js. */
.faq-c{--fc:var(--blue-600);background:var(--neutral-0);border:1px solid var(--border-default);border-radius:var(--radius-xl);transition:background 320ms var(--ease-standard),border-color 320ms var(--ease-standard),box-shadow 320ms var(--ease-standard)}
.faq-c:hover{border-color:var(--border-strong,#cfc9dd)}
.faq-c.on{background:var(--neutral-0);border-color:var(--border-default);box-shadow:0 14px 34px rgba(46,33,69,.09)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 26px;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:var(--leading-snug);color:var(--text-heading)}
.faq-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-circle);background:var(--neutral-0);color:var(--fc);border:1px solid color-mix(in oklab,var(--fc) 24%,transparent);transition:background 320ms var(--ease-standard),color 320ms var(--ease-standard)}
.faq-c.on .faq-ic{background:var(--fc);color:var(--neutral-0);border-color:transparent}
.faq-a{padding:0 26px 26px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-muted);animation:ssoFaqIn 340ms var(--ease-out) both}
@keyframes ssoFaqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .faq-sec{padding:32px 0 56px}
  .faq2{margin-top:26px;grid-template-columns:1fr;gap:14px}
  .faq-col{gap:14px}
  .faq-q{padding:18px 18px;font-size:var(--text-xs)}
  .faq-a{padding:0 18px 20px;font-size:var(--text-xs)}
}

/* ---------- CTA banner (doctors page, pre-footer) ---------- */
.cta-banner{position:relative;overflow:hidden;padding:110px 0 120px;background:var(--neutral-0);text-align:center}
.cta-glow{position:absolute;inset:-40%;background:radial-gradient(420px 420px at var(--gx,30%) var(--gy,40%),color-mix(in oklab,var(--purple-300) 34%,transparent),transparent 70%),radial-gradient(520px 520px at calc(100% - var(--gx,30%)) calc(100% - var(--gy,40%)),color-mix(in oklab,var(--orange-200) 42%,transparent),transparent 70%);transition:background 260ms linear;pointer-events:none}
.cta-in{position:relative}
.cta-banner h2{font-family:var(--font-display);font-size:var(--text-4xl);color:var(--text-heading);margin:0}
.cta-accent{color:var(--purple-600);transition:color 700ms ease}
.cta-banner p{max-width:680px;margin:18px auto 0;font-style:italic;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body)}
.cta-banner .b{margin-top:36px}
/* Two-up CTA (doctor profile): speak + research */
.cta-2up{text-align:left}
.cta-2grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.cta-card{position:relative;padding:clamp(28px,3vw,44px);border-radius:var(--radius-2xl);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);box-shadow:0 24px 56px -34px rgba(46,33,69,.28);display:flex;flex-direction:column}
.cta-card--speak{background:linear-gradient(150deg,color-mix(in oklab,var(--purple-600) 7%,var(--surface-card,#fff)),var(--surface-card,#fff) 70%);justify-content:center}
.cta-card h2{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--text-heading);margin:0}
.cta-card--speak p{max-width:none;margin:14px 0 0;font-style:italic;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body)}
.cta-card--speak .b{margin-top:auto;align-self:flex-start;padding-top:0}
.cta-card--speak>.b{margin-top:28px}
/* No research for this doctor: the research card is not rendered and the speak card takes the row. */
.cta-2up--solo .cta-2grid{grid-template-columns:1fr}
.cta-2up--solo .cta-card--speak p{max-width:62ch}
.cta-card .b-lg{padding:9px 9px 9px 26px;gap:14px}
.cta-card .b-lg{--knob-d:34px;--pad-r:9px;--sweep-d:700px;--sweep-rest:.04857}
.cta-card .b-lg .knob .ic{width:15px!important;height:15px!important}
.cta-card-k{font-family:var(--font-label);font-size:var(--text-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-700)}
.cta-card--research h3{margin-top:10px;font-family:var(--font-display);font-size:var(--text-2xl);color:var(--text-heading)}
.cta-research-list{margin-top:18px;display:grid;gap:10px}
.cta-rlink{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 14px;padding:14px 16px;border-radius:var(--radius-lg);border:1px solid color-mix(in oklab,var(--purple-600) 20%,var(--border-subtle));background:color-mix(in oklab,var(--purple-600) 5%,var(--surface-card,#fff));text-decoration:none;transition:var(--transition-base)}
.cta-rlink-t{font-size:var(--text-sm);font-weight:600;color:var(--text-heading);line-height:1.35;grid-column:1}
.cta-rlink-m{grid-column:1;font-size:var(--text-2xs);font-style:italic;color:var(--text-muted)}
.cta-rlink-ar{grid-column:2;grid-row:1/3;color:var(--purple-600);display:flex}
.cta-rlink-ar .ic{transition:transform .22s var(--ease-out)}
@media (hover:hover){.cta-rlink:hover{border-color:var(--purple-500);background:color-mix(in oklab,var(--purple-600) 10%,var(--surface-card,#fff))}.cta-rlink:hover .cta-rlink-ar .ic{transform:translate(2px,-2px)}}
.cta-research-empty{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.cta-card--research .b{margin-top:20px;align-self:flex-start}
/* Sticky mini-profile dock — reserves its own lane in the sections it can appear
   over, so it never sits on top of section content (no overlap at any width it shows). */
.pf-dock{position:fixed;right:20px;top:50%;transform:translateY(-50%) translateX(20px);width:222px;z-index:55;background:var(--surface-card,#fff);border:1px solid var(--border-subtle);border-radius:20px;box-shadow:0 28px 60px -28px rgba(46,33,69,.38),0 3px 10px -2px rgba(46,33,69,.08);padding:16px 16px 15px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s var(--ease-out),transform .38s var(--ease-out)}
.pf-dock.show{opacity:1;visibility:visible;transform:translateY(-50%);pointer-events:auto}
.pf-dock-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-label);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-700)}
.pf-dock-tag i{width:5px;height:5px;border-radius:50%;background:var(--green-600);box-shadow:0 0 0 3px color-mix(in oklab,var(--green-600) 22%,transparent)}
.pf-dock-top{display:flex;align-items:center;gap:12px;margin-top:12px}
.pf-dock-av{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--purple-600) 10%,#fff);box-shadow:0 0 0 3px color-mix(in oklab,var(--purple-600) 16%,#fff)}
.pf-dock-av img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pf-dock-id{min-width:0;display:flex;flex-direction:column;gap:3px}
.pf-dock-nm{font-family:var(--font-display);font-size:var(--text-md);color:var(--text-heading);line-height:1.18;text-wrap:balance}
.pf-dock-q{font-size:10px;color:var(--text-muted);line-height:1.3}
.pf-dock-facts{margin:15px 0 0;padding-top:13px;border-top:1px solid var(--border-subtle);display:grid;gap:11px}
.pf-dock-facts>div{display:grid;gap:2px}
.pf-dock-facts dt{font-family:var(--font-label);font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--purple-700)}
.pf-dock-facts dd{margin:0;font-size:var(--text-xs);color:var(--text-body);line-height:1.35}
.pf-dock-cta{margin-top:16px;width:100%;justify-content:center;position:relative;padding-left:14px;padding-right:14px}
.pf-dock-cta .lbl{margin-inline:auto}
.pf-dock-cta .knob{position:absolute;right:7px;top:50%;transform:translateY(-50%)}
.pf-dock-cta{--knob-c:calc(7px + var(--knob-d) / 2)}
/* Reserves room for the profile page's sticky dock. Scoped to that page's own section
   classes — #videos and #cta-banner are ids shared with several other pages. */
@media (min-width:800px){#about .wrap,#credentials .wrap,#opd .wrap,.vid-sec .wrap,.cta-2up .wrap{padding-right:calc(var(--gutter) + 254px)}}
@media (max-width:799px){.pf-dock{display:none}}
.rx h3,.cta-card--research h3{overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.pf-dock{transition:opacity .2s}}
@media (max-width:860px){.cta-2grid{grid-template-columns:1fr;gap:20px}.cta-card h2{font-size:var(--text-2xl)}.cta-card--research h3{font-size:var(--text-xl)}}
@media (max-width:860px){
  .cta-banner{padding:64px 0 72px}
  .cta-banner h2{font-size:var(--text-2xl)}
  .cta-banner p{font-size:var(--text-sm);padding:0 8px}
  .cta-banner .b{margin-top:28px}
}

/* ---------- multi-brand accents on the inner pages ---------- */
.gfit .dcard{--ac:var(--blue-500)}
/* Doctor grids: at 240px tracks 1440 fitted five 246px cards and both CTAs clipped
   ("Book a C…", "View Pro…"). A 270px floor keeps 4-up at 1366–1599 and 6-up at 1920. */
@media (min-width:861px){.gfit:has(> .dcard){grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}}
.gfit .dcard:nth-child(2n){--ac:var(--green-500)}
/* Doctors listing and the "Our specialists" grid on cancer-type / treatment pages: five surgeons a
   row on desktop (client), whatever the width — the fit-as-many grid gave four up to ~1600px, six at 1920. */
@media (min-width:1200px){#doc-grid,#sp-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}}
/* Five-up cards are 205–267px below 1536px: the two side-by-side CTAs cut to "Book a …" / "View …".
   Stack them full width with the label centred and the knob right — the phone pattern. */
@media (min-width:1200px) and (max-width:1535px){
  :is(#doc-grid,#sp-grid) .dcard .act{flex-wrap:wrap}
  :is(#doc-grid,#sp-grid) .dcard .act .b{flex:1 1 100%;width:100%;min-height:38px;justify-content:center;padding-left:14px;padding-right:36px;position:relative;--knob-c:calc(8px + var(--knob-d) / 2)}
  :is(#doc-grid,#sp-grid) .dcard .act .b .lbl{margin-inline:auto}
  :is(#doc-grid,#sp-grid) .dcard .act .b .knob{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
}

/* ---------- Doctor profile page ---------- */
/* Light paper banner: info left, cut-out portrait anchored bottom-right. */
.phero{position:relative;overflow:hidden}
/* Pointer-follow glow layers cross-fading blue/green <-> purple/orange. */
/* Vertical overhang in px, not %: at inset:-35% the box's top tracked the header's height, so as the
   header grew during load this page-sized layer "moved" — a 0.6 layout shift on phones. */
.ph-glow{position:absolute;inset:-160px -35%;pointer-events:none;transition:background 260ms linear}
.ph-ga{background:radial-gradient(460px 460px at var(--gx,30%) var(--gy,40%),color-mix(in oklab,var(--blue-300) 38%,transparent),transparent 70%),radial-gradient(560px 560px at calc(100% - var(--gx,30%)) calc(100% - var(--gy,40%)),color-mix(in oklab,var(--green-200) 40%,transparent),transparent 70%);animation:phGlowA 14s ease-in-out infinite}
.ph-gb{background:radial-gradient(460px 460px at var(--gx,30%) var(--gy,40%),color-mix(in oklab,var(--purple-400) 34%,transparent),transparent 70%),radial-gradient(560px 560px at calc(100% - var(--gx,30%)) calc(100% - var(--gy,40%)),color-mix(in oklab,var(--orange-200) 42%,transparent),transparent 70%);animation:phGlowB 14s ease-in-out infinite}
@keyframes phGlowA{0%,38%{opacity:1}52%,88%{opacity:0}100%{opacity:1}}
@keyframes phGlowB{0%,38%{opacity:0}52%,88%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ph-ga,.ph-gb{animation:none}.ph-gb{opacity:0}}
/* Scoped to the profile hero's own inline trail — the global .crumbbar shares the
   .crumbs class and must not inherit this bottom margin. */
.phero .crumbs{display:flex;gap:8px;align-items:center;font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-muted);margin-bottom:28px}
.phero .crumbs a{color:var(--text-muted);text-decoration:none}
.phero .crumbs a:hover{color:var(--purple-600)}
.crumbs-inv,.crumbs-inv a{color:rgba(255,255,255,.75)}
.crumbs-inv a:hover{color:#fff}
/* Even split: .ph-info is capped at 560px anyway, so the portrait column takes the slack
   (client: doctor images bigger in proportion). */
.ph-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;min-height:560px}
.ph-info{align-self:center;padding:64px 0;max-width:560px}
.ph-info h1{font-family:var(--font-display);font-size:var(--text-5xl);line-height:var(--leading-tight);color:var(--text-heading)}
.ph-quals{margin-top:22px;font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);line-height:var(--leading-normal);color:var(--purple-700)}
.ph-intro{margin-top:20px;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body);max-width:480px}
.pf-spec{margin-top:12px;font-family:var(--font-label);font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--purple-600)}
/* Banner credentials: a hairline-ruled data rail, matching the spotlight's .spot-meta
   pattern — no boxes, so the banner keeps its open paper feel. Qualification and focus
   lead full-width; location and years sit as a two-up beneath. */
.ph-facts{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--border-subtle)}
.ph-fact{position:relative;display:grid;gap:0;padding:18px 0 18px 20px;border-bottom:1px solid var(--border-subtle)}
.ph-fact::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:1px;background:var(--blue-500)}
.ph-fact:nth-child(2)::before,.ph-fact:nth-child(4)::before{background:var(--green-500)}
.ph-fact:nth-child(1),.ph-fact:nth-child(2){grid-column:span 2}
.ph-fact:nth-child(3){padding-right:24px}
.ph-fact:nth-child(4){padding-left:24px}
.ph-fact .fi{display:none}
.ph-fact dt{font-family:var(--font-label);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.ph-fact dd{margin:0;font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--text-heading);text-wrap:pretty}
.ph-fact:nth-child(3) dd,.ph-fact:nth-child(4) dd{font-family:var(--font-label);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.ph-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:32px}
.ph-photo{position:relative;align-self:end;display:flex;align-items:flex-end;justify-content:center}
/* ---- Portrait frame: the "aperture arch" ----
   ONE shape for every doctor image on the site. The domed top is the doorway/theatre-light
   form (entry into care); the squared base and the notched bottom-left corner echo the
   corner-bracket mark used on every eyebrow (focus, precision). Two knobs adjust it:
   --df-arch (how domed the top is) and --df-ratio (frame proportion). The image is
   object-fit:cover with a top anchor, so any portrait crop or resolution sits correctly. */
/* The shape is a MASK on the image itself — no panel, no tint, no border marks. The image
   is object-fit:cover anchored top, so any resolution or crop fills the arch cleanly. */
.docframe{--df-arch:50%;--df-ratio:4/5;position:relative;width:100%;aspect-ratio:var(--df-ratio);overflow:hidden;border-radius:var(--df-arch) var(--df-arch) var(--radius-lg) var(--radius-lg)/40% 40% var(--radius-lg) var(--radius-lg)}
.docframe>img,.docframe>image-slot,.docframe>div{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.ph-photo #pf-photo{position:relative;z-index:1;width:100%;max-width:580px}
/* Banner portraits are transparent cut-outs, so they keep their own silhouette — no frame. */
.ph-photo #pf-photo{aspect-ratio:auto;border-radius:0;overflow:visible}
.ph-photo #pf-photo>img{width:100%;height:auto;max-height:600px;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 20px 38px rgba(46,33,69,.22))}
/* Live corner-bracket mark (same draw loop as the eyebrow logos) behind the portrait. */
.ph-brk{position:absolute;top:0;left:34%;width:196px;height:224px;color:var(--purple-300);z-index:0;transform:scaleX(-1)}
.ph-brk svg{width:100%;height:100%;preserveAspectRatio:none}
.ph-brk svg path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:square;stroke-dasharray:55;stroke-dashoffset:55;animation:ssoFrameDraw 5000ms cubic-bezier(.4,0,.2,1) 250ms infinite}
/* About: sticky heading, first para as a lead, rest as a numbered rail */
.pf-about-sec{position:relative;padding:88px 0 80px;overflow:hidden}
.pf-about-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:72px;align-items:start}
.pf-about-head{position:sticky;top:calc(var(--chrome-h,116px) + 20px)}
.pf-about-head h2{margin-top:18px;font-family:var(--font-display);font-size:var(--text-3xl);line-height:var(--leading-tight);color:var(--text-heading)}
.pf-about-head::after{content:"";display:block;width:56px;height:3px;border-radius:2px;margin-top:20px;background:var(--blue-700,#1c3f7a)}
.pf-about{counter-reset:pf;display:grid;gap:20px}
/* Cards begin stacked on top of each other (scaled + offset) and unstack as the
   section enters view; hovering nudges an individual card. */
.pf-about p{position:relative;margin:0;padding:24px 26px 24px 74px;background:var(--neutral-0);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:0 6px 18px rgba(46,33,69,.05);font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body);opacity:0;transform:translateY(calc(var(--i,0) * -100%)) scale(calc(1 - var(--i,0) * .04));transform-origin:top center;transition:opacity 520ms var(--ease-out),transform 760ms cubic-bezier(.2,.8,.25,1),color 240ms linear,box-shadow 300ms var(--ease-out),border-color 300ms var(--ease-out);z-index:calc(10 - var(--i,0))}
.pf-about.in p{opacity:1;transform:translateY(0) scale(1)}
.pf-about.in p:nth-child(2){transition-delay:120ms}
.pf-about.in p:nth-child(3){transition-delay:240ms}
.pf-about.in p:nth-child(4){transition-delay:360ms}
/* numbered marker + connecting rail */
.pf-about p::before{counter-increment:pf;content:counter(pf,decimal-leading-zero);position:absolute;left:22px;top:22px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-circle);font-family:var(--font-label);font-size:var(--text-2xs);font-weight:700;letter-spacing:.04em;color:var(--pc,var(--blue-600));background:color-mix(in oklab,var(--pc,var(--blue-500)) 10%,var(--neutral-0));border:1px solid color-mix(in oklab,var(--pc,var(--blue-500)) 26%,transparent);transition:transform 280ms var(--ease-out),background 280ms var(--ease-out),color 280ms var(--ease-out)}
.pf-about p::after{content:"";position:absolute;left:41px;top:100%;height:20px;width:1px;background:linear-gradient(180deg,color-mix(in oklab,var(--pc,var(--blue-500)) 34%,transparent),transparent)}
.pf-about p:last-child::after{display:none}
.pf-about.in p:hover{color:var(--text-heading);border-color:color-mix(in oklab,var(--pc,var(--blue-500)) 34%,transparent);box-shadow:0 20px 40px rgba(46,33,69,.12);transform:translateY(-6px) scale(1.012);transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out),border-color 260ms var(--ease-out),color 240ms linear;z-index:11}
.pf-about p:hover::before{transform:scale(1.12);background:var(--pc,var(--blue-600));color:var(--neutral-0)}
/* the opening paragraph reads as the lead */
.pf-about p:first-child{color:var(--text-heading)}
/* Languages + registration, under the heading in the sticky column; order:1 puts them after
   the head's accent rule (::after, order 0). */
.pf-about-head{display:flex;flex-direction:column}
.pf-about-meta{order:1;display:grid;gap:14px;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--border-subtle)}
.pf-about-meta dt{font-family:var(--font-label);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.pf-about-meta dd{margin:4px 0 0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-heading);overflow-wrap:anywhere}
.ach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ach{display:flex;gap:16px;align-items:flex-start;background:var(--neutral-0);border:1px solid var(--border-subtle);border-top:3px solid var(--ac,var(--blue-500));border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-sm,0 1px 3px rgba(46,33,69,.06))}
.ach .ic-b{flex:none;width:44px;height:44px;border-radius:var(--radius-circle);background:color-mix(in oklab,var(--ac,var(--blue-500)) 12%,var(--neutral-0));display:flex;align-items:center;justify-content:center}
.ach .v{font-family:var(--font-sans);font-weight:600;font-size:var(--text-sm);color:var(--text-heading);line-height:var(--leading-normal)}
.ach .s{margin-top:4px;font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-normal)}
/* ---------- Credentials: three tilted prescription cards ---------- */
.cred-sec{padding:72px 0 96px;background:radial-gradient(900px 520px at 12% 16%,rgba(106,44,182,.6),transparent 62%),radial-gradient(820px 480px at 88% 20%,rgba(14,116,175,.42),transparent 64%),radial-gradient(760px 440px at 84% 90%,rgba(62,172,71,.26),transparent 64%),radial-gradient(760px 440px at 14% 88%,rgba(210,74,0,.24),transparent 64%),radial-gradient(620px 400px at 50% 58%,rgba(206,0,53,.16),transparent 66%),linear-gradient(180deg,#30234a 0%,#241a37 100%);position:relative}
.cred-sec .sh .eyebrow>span{color:rgba(255,255,255,.7)}
/* The heading carries the doctor's name, so its length varies; under nowrap inside the 720px
   centred head it was cut mid-word ("…& speciali"). One line where it fits, balanced wrap where not. */
.cred-sec .sh{max-width:960px}
.cred-sec h2{color:var(--neutral-0);text-wrap:balance}
.rx-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;align-items:stretch;margin-top:56px;perspective:1200px}
/* Default state: all three cards stacked on the centre slot; the outer two fan out
   left and right when the section scrolls into view (and re-stack when it leaves). */
.rx{position:relative;display:flex;flex-direction:column;background:var(--neutral-0);border:1px solid color-mix(in oklab,var(--ac,var(--blue-500)) 34%,transparent);border-radius:var(--radius-lg);padding:26px 26px 30px;box-shadow:0 16px 34px rgba(46,33,69,.09);opacity:0;transition:transform 820ms cubic-bezier(.2,.8,.25,1),opacity 480ms var(--ease-out),box-shadow 380ms var(--ease-out)}
.rx:nth-child(1){transform:translateX(103%) translateY(12px) rotate(2deg) scale(.97);z-index:3}
.rx:nth-child(2){transform:none;z-index:5}
.rx:nth-child(3){transform:translateX(-103%) translateY(12px) rotate(-2deg) scale(.97);z-index:2}
.rx-row.in .rx{opacity:1}
.rx-row.in .rx:nth-child(1){transform:none;transition-delay:120ms}
.rx-row.in .rx:nth-child(2){transform:none}
.rx-row.in .rx:nth-child(3){transform:none;transition-delay:120ms}
/* Prescription-pad ℞ watermark. */
.rx{overflow:hidden}
.rx::after{content:"";display:none;position:absolute;right:10px;bottom:-14px;font-family:var(--font-display),serif;font-size:150px;line-height:1;color:var(--ac,var(--blue-500));opacity:.07;pointer-events:none;user-select:none}
.rx h3{margin-top:0;font-family:var(--font-display);font-size:var(--text-xl);color:var(--ac,var(--blue-600))}
.rx .rule{margin-top:12px;height:1px;background:color-mix(in oklab,var(--ac,var(--blue-500)) 34%,transparent)}
.rx ul{margin-top:14px;display:grid;gap:11px;list-style:none;padding:0}
.rx li{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.rx li .mk{flex:none;color:var(--ac,var(--blue-500));font-size:var(--text-2xs);line-height:1.8}
.rx .rx-note{margin-top:auto;padding-top:16px;font-style:italic;font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-relaxed)}
@media (max-width:860px){
  .cred-sec{padding:40px 0 48px}
  .cred-sec h2{white-space:normal;text-wrap:pretty}
  .rx-row{grid-template-columns:1fr;gap:14px;margin-top:24px}
  /* Mobile: cards pile into one slot (section shrinks), then deal out top-down 1 → 2 → 3 */
  .rx-row{display:block;position:relative}
  .rx{padding:18px;transform:translateY(calc(var(--i,0) * 10px)) scale(calc(1 - var(--i,0) * .035));transition:transform 640ms cubic-bezier(.22,.9,.3,1),opacity 400ms var(--ease-out),box-shadow 300ms var(--ease-out),margin 640ms cubic-bezier(.22,.9,.3,1);will-change:transform,opacity}
  /* The desktop fan-out start (.rx:nth-child(1|3) translateX(±103%)) outranks the .rx rule above,
     so before the deal-out the first card sat a full width off-screen and the page scrolled sideways. */
  .rx:nth-child(1),.rx:nth-child(3){transform:translateY(calc(var(--i,0) * 10px)) scale(calc(1 - var(--i,0) * .035))}
  .rx:nth-child(2),.rx:nth-child(3){position:absolute;left:0;right:0;top:0}
  .rx-row.in{display:grid}
  .rx-row.in .rx{position:relative;top:auto}
  .rx-row.in .rx,.rx-row.in .rx:nth-child(1),.rx-row.in .rx:nth-child(2),.rx-row.in .rx:nth-child(3){transform:translateY(0) scale(1)}
  .rx-row.in .rx:nth-child(1){transition-delay:0ms}
  .rx-row.in .rx:nth-child(2){transition-delay:110ms}
  .rx-row.in .rx:nth-child(3){transition-delay:220ms}
  .rx::after{font-size:110px;right:6px;bottom:-10px}
  .rx h3{font-size:var(--text-md);margin-top:0}
  .rx li{font-size:var(--text-xs)}
  .rx ul{margin-top:12px;gap:9px}
}
/* ---------- Profile: video player + queue ---------- */
.vid-sec{padding:40px 0 88px}
.vid-stage{display:grid;grid-template-columns:1.55fr .85fr;gap:24px;align-items:stretch;margin-top:36px}
.vid-main{position:relative;height:100%;min-height:0;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-inverse)}
.vid-main .thumb{position:absolute;inset:0;background:var(--image-placeholder)}
.vid-main .thumb img{width:100%;height:100%;object-fit:cover}
.vid-main .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,20,48,.1) 0%,rgba(30,20,48,.4) 48%,rgba(24,16,40,.94) 100%)}
.vid-main .body{position:absolute;left:0;right:0;bottom:0;padding:30px 32px;display:grid;gap:14px}
.vid-main .tag{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);background:rgba(255,255,255,.16);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);color:#fff;font-family:var(--font-label);font-size:var(--text-3xs,10px);letter-spacing:.08em;text-transform:uppercase}
.vid-main h3{font-family:var(--font-display);font-size:var(--text-lg);color:#fff;max-width:560px;line-height:var(--leading-relaxed);letter-spacing:.01em;text-shadow:0 2px 14px rgba(20,12,34,.7)}
.vid-main .meta{font-size:var(--text-xs);color:rgba(255,255,255,.75)}
.vid-main .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:none;cursor:pointer}
.vid-main .play>span{width:74px;height:74px;border-radius:var(--radius-circle);background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px rgba(46,33,69,.3);transition:transform 260ms var(--ease-out)}
.vid-main .play:hover>span{transform:scale(1.08)}
.vid-main .play svg{width:26px;height:26px;margin-left:4px;fill:var(--purple-700)}
.vid-queue{display:grid;gap:18px;align-content:start}
/* Desktop: the playing video is the big player, so its queue card stays hidden (mobile shows it). */
@media (min-width:861px){
  .vid-q.cur{display:none}
  .vid-stage.solo{grid-template-columns:minmax(0,1fr)}
  .vid-stage.solo .vid-main{height:auto;aspect-ratio:16/9;width:100%;max-width:880px}
  .vid-stage.solo .vid-queue{display:none}
}
.vid-q{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-inverse);cursor:pointer;text-align:left;aspect-ratio:16/10;transition:transform 300ms var(--ease-out),box-shadow 300ms var(--ease-out)}
.vid-q:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(46,33,69,.18)}
.vid-q .th{position:absolute;inset:0;border-radius:0;background:var(--image-placeholder)}
.vid-q .th img{width:100%;height:100%;object-fit:cover;transition:transform 620ms var(--ease-out)}
.vid-q:hover .th img{transform:scale(1.05)}
.vid-q .th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,20,48,0) 0%,rgba(30,20,48,.18) 32%,rgba(30,20,48,.72) 68%,rgba(24,16,40,.95) 100%)}
.vid-q .th .pl{position:absolute;top:12px;right:12px;left:auto;bottom:auto;display:block;z-index:2}
.vid-q .th .pl span{width:34px;height:34px;border-radius:var(--radius-circle);background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(46,33,69,.26);transition:transform 260ms var(--ease-out)}
.vid-q:hover .th .pl span{transform:scale(1.1)}
.vid-q .th .pl svg{width:13px;height:13px;margin-left:2px;fill:var(--purple-700)}
.vid-q .th image-slot{width:100%;height:100%;display:block}
.vid-q .tx{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:6px;padding:16px 18px}
.vid-q h4{font-size:var(--text-sm);font-weight:600;line-height:var(--leading-snug);color:#fff;letter-spacing:.01em;text-shadow:0 1px 10px rgba(20,12,34,.75)}
.vid-q .th image-slot{width:100%;height:100%;display:block;background:var(--surface-inverse)}
.vid-q .mt{font-family:var(--font-label);font-size:var(--text-3xs,10px);letter-spacing:.06em;color:rgba(255,255,255,.8);text-shadow:0 1px 8px rgba(20,12,34,.7)}
@media (max-width:860px){
  .vid-sec{padding:24px 0 48px}
  .vid-stage{grid-template-columns:1fr;gap:14px;margin-top:20px}
  .vid-main{aspect-ratio:16/9;height:auto}
  .vid-main .body{padding:18px 18px 20px;gap:10px}
  .vid-main h3{font-size:var(--text-sm)}
  .vid-main .play>span{width:54px;height:54px}
  .vid-main .play svg{width:20px;height:20px}
  /* Mobile: player + queue become one swipeable rail of equal-size cards */
  .vid-stage{display:block;margin-top:20px}
  .vid-main{display:none}
  .vid-main.playing{display:block;aspect-ratio:16/9;height:auto;margin-bottom:14px}
  .vid-queue{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .vid-queue::-webkit-scrollbar{display:none}
  .vid-q{flex:0 0 84%;scroll-snap-align:center;aspect-ratio:16/10}
  .vid-q h4{font-size:var(--text-sm);font-weight:600}
  .vid-q .tx{padding:16px 18px}
  .vid-q .th .pl span{width:34px;height:34px}
  .vid-q .th .pl svg{width:13px;height:13px}
  /* Touch devices have no hover — give the same feedback on tap, and let the card
     nearest the viewport centre carry the "active" treatment while scrolling. */
  .vid-q:active{transform:scale(.985)}
  .vid-q.focus .th img{transform:scale(1.05)}
  .vid-q.focus .th .pl span{transform:scale(1.1)}
  .opd-slot:active{transform:translateX(3px)}
  .opd-day:active{transform:scale(.97)}
  .pf-about p:active{color:var(--text-heading)}
  .dcard:active{transform:translateY(-4px);box-shadow:var(--shadow-md)}
  .help-card:active{box-shadow:0 18px 34px rgba(46,33,69,.14)}
  .vid-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
  .vid-dots i{width:6px;height:6px;border-radius:var(--radius-circle);background:var(--border-default);transition:background 220ms var(--ease-out),width 220ms var(--ease-out)}
  .vid-dots i.on{width:18px;border-radius:3px;background:var(--purple-600)}
}
/* Touch devices can't hover: drift the glow on a slow loop instead of following a pointer. */
@media (hover:none){
  @keyframes ssoGlowDrift{0%{--gx:26%;--gy:34%}25%{--gx:68%;--gy:26%}50%{--gx:74%;--gy:70%}75%{--gx:30%;--gy:66%}100%{--gx:26%;--gy:34%}}
  .cta-glow,.ph-glow{animation:ssoGlowDrift 18s ease-in-out infinite}
  .ph-ga{animation:ssoGlowDrift 18s ease-in-out infinite,phGlowA 14s ease-in-out infinite}
  .ph-gb{animation:ssoGlowDrift 18s ease-in-out infinite,phGlowB 14s ease-in-out infinite}
}
@property --gx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --gy{syntax:'<percentage>';inherits:true;initial-value:50%}
.ct-card-form{position:relative;box-shadow:var(--shadow-md,0 12px 32px rgba(46,33,69,.08));border-top:3px solid var(--purple-600)}
.ct-trust{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--green-50);color:var(--green-700);font-size:11px;font-weight:600;margin-bottom:16px}
.ct-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-row3{display:flex;flex-wrap:wrap;gap:14px}
.ct-row3>*{flex:1 1 0;min-width:140px}
@media (max-width:860px){
  #ct-docs{display:flex;grid-template-columns:none;overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:calc(-1*var(--shell-gutter));margin-right:calc(-1*var(--shell-gutter));padding-inline:var(--shell-gutter)}
  #ct-docs::-webkit-scrollbar{display:none}
  #ct-docs>.dcard{flex:0 0 82%;scroll-snap-align:center}
}
@media (max-width:640px){.ct-row2{grid-template-columns:1fr}}
.ct-wa-card{position:relative;display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#25d366 0%,#1fb958 100%);color:#fff;text-decoration:none;overflow:hidden;box-shadow:0 10px 26px rgba(37,211,102,.28);transition:var(--transition-base)}
.ct-wa-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.36)}
.ct-wa-ic{flex:none;display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--radius-circle);background:rgba(255,255,255,.2)}
.ct-wa-ic svg{width:22px;height:22px}
.ct-wa-txt{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.ct-wa-txt b{font-size:var(--text-sm)}
.ct-wa-txt small{font-size:11px;color:rgba(255,255,255,.85)}
.ct-wa-card .ic{background:rgba(255,255,255,.9);border-radius:50%;padding:3px}
/* The email address can't break on its own; at 992 it pushed the card past its column. */
.ct-contactcard{min-width:0}
.ct-contactcard a{overflow-wrap:anywhere}
.ct-copy-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);white-space:nowrap;padding:5px 10px;border-radius:6px;background:var(--ink-800,#2e2145);color:#fff;font-size:10px;font-weight:600;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity 180ms ease,transform 180ms ease}
.ct-copy-tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink-800,#2e2145)}
.ct-copy:hover .ct-copy-tip{opacity:1;transform:translateX(-50%) translateY(0)}
.ct-copy.copied .ct-copy-tip{opacity:1;transform:translateX(-50%) translateY(0);background:var(--green-600)}
.ct-copy.copied .ct-copy-tip::after{border-top-color:var(--green-600)}
.em-glow{position:absolute;inset:-40%;pointer-events:none;background:radial-gradient(460px 460px at var(--gx,30%) var(--gy,40%),color-mix(in oklab,var(--crimson-500,#e0546f) 40%,transparent),transparent 70%),radial-gradient(520px 520px at calc(100% - var(--gx,30%)) calc(100% - var(--gy,40%)),color-mix(in oklab,var(--orange-400,#f0954a) 30%,transparent),transparent 70%)}
.em-dim{position:absolute;inset:0;pointer-events:none;background:rgba(12,7,24,.42);z-index:0}
.em-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;z-index:1}
.em-mark{justify-self:end;display:flex;align-items:baseline;gap:4px;font-family:var(--font-display);line-height:.85;color:rgba(255,255,255,.2);letter-spacing:-.03em;user-select:none}
.em-mark .n{font-size:clamp(104px,15vw,248px);font-weight:800}
.em-mark .x{font-size:clamp(52px,7vw,120px);font-weight:700;color:rgba(255,255,255,.24)}
@media (max-width:860px){.em-wrap{grid-template-columns:1fr}.em-mark{position:absolute;top:-8px;right:0;opacity:.6}.em-mark .n{font-size:72px}}
@media (hover:none){.em-glow{animation:ssoGlowDrift 18s ease-in-out infinite}}
/* The emergency CTA uses the standard inverse hover (purple fill, white text). Only the phone
   layout below re-pads the dial button, which would push the resting fill circle off the knob,
   so the fill is dropped there alone — it used to be dropped everywhere, leaving no hover at all. */
@media (max-width:860px){
  #em-band .wrap>a.b-lg .sweep{display:none}
  #em-band .wrap>a.b-lg{width:100%;white-space:normal!important;text-align:center;padding:14px 18px!important;min-height:auto!important}
  #em-band .wrap>a.b-lg .lbl{white-space:normal!important;font-size:var(--text-sm)}
}
.vid-dots{display:none}
@media (max-width:860px){.vid-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}}
.pf-note{margin-bottom:18px;font-style:italic;font-size:var(--text-sm);color:var(--text-body)}
/* ---------- OPD: interactive week calendar ---------- */
.opd-sec{padding:72px 0 40px}
.opd-panel{display:grid;grid-template-columns:280px 1fr;gap:0;margin-top:36px;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;background:var(--neutral-0);box-shadow:0 18px 44px rgba(46,33,69,.08)}
.opd-side{padding:28px 24px;background:linear-gradient(180deg,var(--purple-50),var(--neutral-0));border-right:1px solid var(--border-subtle)}
.opd-doc{display:flex;align-items:center;gap:14px;position:relative}
.opd-doc .av{position:relative;flex:none;width:64px;height:64px;border-radius:var(--radius-circle);overflow:hidden;background:var(--image-placeholder);box-shadow:0 6px 16px rgba(46,33,69,.16)}
.opd-doc .av img{width:100%;height:100%;object-fit:cover;object-position:top center}
.opd-doc .ring{position:absolute;left:-6px;top:50%;width:76px;height:76px;margin-top:-38px;border-radius:var(--radius-circle);border:2px solid var(--purple-300);opacity:.7;animation:opdPulse 2600ms ease-out infinite}
@keyframes opdPulse{0%{transform:scale(.86);opacity:.7}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.opd-doc .ring{animation:none;opacity:.5}}
.opd-doc .who{display:grid;gap:3px}
.opd-doc .nm{font-family:var(--font-display);font-size:var(--text-md);color:var(--text-heading);line-height:var(--leading-snug)}
.opd-doc .mt{font-family:var(--font-label);font-size:var(--text-3xs,10px);letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.opd-legend{display:grid;gap:12px;margin-top:26px}
.opd-lg{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-2xs);line-height:var(--leading-relaxed);color:var(--text-body)}
.opd-lg .sw{flex:none;width:10px;height:10px;margin-top:5px;border-radius:3px;background:var(--ac,var(--blue-500))}
.opd-lg strong{display:block;font-size:var(--text-xs);color:var(--text-heading)}
.opd-main{padding:24px;display:grid;align-content:center}
.opd-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.opd-day{position:relative;display:grid;gap:7px;justify-items:center;padding:14px 4px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--neutral-0);cursor:pointer;transition:transform 240ms var(--ease-out),border-color 240ms var(--ease-out),background 240ms var(--ease-out),box-shadow 240ms var(--ease-out)}
.opd-day .d{font-family:var(--font-label);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-heading)}
.opd-day .n{font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-heading);line-height:1}
.opd-day .dots{display:flex;gap:3px;height:5px}
.opd-day .dots i{width:5px;height:5px;border-radius:var(--radius-circle);background:var(--dc,var(--purple-400))}
.opd-day:hover{transform:translateY(-3px);border-color:var(--purple-300);box-shadow:0 10px 22px rgba(46,33,69,.1)}
.opd-day.off{opacity:.5;cursor:default}
.opd-day.off:hover{transform:none;border-color:var(--border-subtle);box-shadow:none}
.opd-day.on{background:var(--purple-600);border-color:var(--purple-600);box-shadow:0 12px 26px rgba(106,44,182,.28)}
.opd-day.on .d{color:#fff}
.opd-day.on .n{color:#fff}
.opd-day.on .dots i{background:rgba(255,255,255,.9)}
.opd-slots{display:grid;gap:14px}
.opd-slot{display:grid;grid-template-columns:minmax(240px,1fr) auto;gap:18px;align-items:center;padding:18px 20px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);border-left:3px solid var(--ac,var(--blue-500));background:color-mix(in oklab,var(--ac,var(--blue-500)) 5%,var(--neutral-0));animation:opdIn 380ms var(--ease-out) both;transition:transform 240ms var(--ease-out),box-shadow 240ms var(--ease-out)}
.opd-slot:nth-child(2){animation-delay:90ms}
.opd-slot:hover{transform:translateX(4px);box-shadow:0 14px 30px rgba(46,33,69,.1)}
@keyframes opdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.opd-slot{animation:none}}
.opd-slot .tm{font-family:var(--font-display);font-size:var(--text-md);color:var(--ac,var(--purple-700));white-space:nowrap}
.opd-slot h3{font-size:var(--text-sm);color:var(--text-heading)}
.opd-slot .dys{margin-top:8px;font-family:var(--font-label);font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ac,var(--purple-700))}
.opd-slot .addr{margin-top:5px;font-size:var(--text-2xs);line-height:var(--leading-relaxed);color:var(--text-muted)}
.opd-slot .acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.opd-empty{padding:28px 20px;border-radius:var(--radius-lg);border:1px dashed var(--border-default);text-align:center;font-size:var(--text-sm);color:var(--text-muted)}
@media (max-width:860px){
  .sel{width:100%}
  .sel select{width:100%;max-width:none}
  /* Tighter filter block on mobile */
  .find-sec{padding:24px 0 18px}
  .results-sec{padding-top:12px;padding-bottom:32px}
  .results-sec .mt28{margin-top:14px}
  .filter-row{margin-top:16px;gap:10px}
  .inp{height:42px;padding:0 12px}
  .dd{width:calc(50% - 5px)}
  .dd-btn{width:100%;justify-content:space-between;height:42px;padding:0 12px;font-size:var(--text-xs)}
  /* The half-width rule is for filter rows; a contact-form dropdown fills its own labelled field. */
  .ct-form .dd{width:100%}
  /* Specialty is the right-hand filter; its widest option ran the (closed) menu past the
     viewport at 320 and scrolled the page sideways. Anchor it to its right edge. */
  #doc-spec .dd-menu{left:auto;right:0}
  .dd-opt{padding:8px 10px}
  /* Two doctor cards per row — keep info readable, tighten chrome not content */
  .dcard .panel{padding:12px 12px 14px}
  .dcard h3{font-size:var(--text-sm)}
  .dcard .sp{font-size:var(--text-2xs)}
  .dcard .lo{font-size:var(--text-3xs,10px)}
  .dcard .in::before{margin-bottom:8px}
  .dcard .act{padding-top:12px;flex-wrap:wrap}
  .dcard .act .b{min-height:44px;flex:1 1 100%;width:100%;justify-content:center;padding-left:14px;padding-right:38px;position:relative}
  /* Mobile: centre the CTA label within the full-width pill (knob stays right) */
  .dcard .act .b .lbl{margin-inline:auto}
  .dcard .act .b .knob{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
  /* Knob goes absolute at right:8px here, so only its centre offset changes. */
  .dcard .act .b{--knob-c:calc(8px + var(--knob-d) / 2)}
  /* One-tone circle: the resting sweep must match its own knob colour, or the two
     purples read as a double ring. */
  .dcard .act .b-lilac .knob{background:var(--purple-800)}
  .dcard .act .b:hover .sweep{transform:scale(1)}
  /* Phones/tablets: the portraits are top-anchored, so a top-right pill sat on the doctor's head.
     Pin it to the photo's bottom-left instead: the photo is 4:4.1 of the card width, so its bottom
     is at 102.5cqw (the card is the size container). */
  .dcard{container-type:inline-size}
  /* Full-width card CTAs here reach ~560px; the 900px sweep stopped short. 22/1200. */
  .dcard .act .b{--sweep-d:1200px;--sweep-rest:.01833}
  .dcard .exp{top:calc(102.5cqw - 18px - 10px);right:auto;left:10px;height:18px;padding:0 7px}
  /* Two-up cards on the smallest phones (~133px at 320) clipped "Book a Consult" to "Book a C…":
     tighten the side padding and knob so both labels fit whole. Card width, not viewport, decides. */
  @container (max-width:150px){
    .dcard .act .b{padding-left:6px;padding-right:28px;--knob-d:20px;--knob-c:calc(4px + var(--knob-d) / 2);--sweep-rest:.01667}
    .dcard .act .b .knob{right:4px;width:20px;height:20px}
  }
  /* ---- Profile page: mobile ---- */
  .ph-grid{grid-template-columns:1fr;gap:0;min-height:0}
  .ph-info{padding:20px 0 4px;max-width:none}
  .ph-info h1{font-size:var(--text-2xl)}
  .ph-quals{margin-top:12px;font-size:var(--text-sm)}
  .ph-intro{margin-top:12px;font-size:var(--text-sm)}
  .ph-facts{margin-top:18px}
  .ph-fact{padding:13px 0 13px 14px;gap:0}
  .ph-fact::before{top:13px;bottom:13px}
  .ph-fact:nth-child(3){padding-right:12px}
  .ph-fact:nth-child(4){padding-left:14px}
  .ph-fact dd{font-size:var(--text-sm)}
  .ph-fact:nth-child(3) dd,.ph-fact:nth-child(4) dd{font-size:var(--text-xs)}
  .ph-ctas{margin-top:20px}
  .ph-photo{margin-top:4px}
  .ph-photo #pf-photo{max-width:360px;margin:0 auto}
  .ph-brk{display:none}
  .phero .crumbs{margin-bottom:14px;font-size:var(--text-2xs)}
  .ach-grid{grid-template-columns:1fr;gap:14px}
  .opd-sec{padding:40px 0 24px}
  .opd-panel{grid-template-columns:minmax(0,1fr);margin-top:20px}
  .opd-side,.opd-main{min-width:0}
  .opd-side{border-right:0;border-bottom:1px solid var(--border-subtle);padding:18px}
  .opd-doc .av{width:52px;height:52px}
  .opd-doc .ring{left:-4px;width:62px;height:62px;margin-top:-31px}
  .opd-legend{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
  .opd-main{padding:14px}
  /* Day tabs scroll horizontally instead of squeezing seven columns */
  .opd-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .opd-days::-webkit-scrollbar{display:none}
  .opd-day{flex:0 0 auto;min-width:66px;padding:10px 12px;gap:6px}
  .opd-day .d{font-size:var(--text-2xs)}
  .opd-slots{margin-top:14px;gap:12px}
  .opd-slot{grid-template-columns:1fr;gap:10px;padding:16px}
  .opd-slot .tm{font-size:var(--text-sm)}
  .opd-slot .acts{justify-content:flex-start;gap:14px}
  .pf-about-sec{padding:44px 0 40px}
  .pf-about-grid{grid-template-columns:1fr;gap:26px}
  .pf-about-head{position:static}
  .pf-about-head h2{margin-top:12px;font-size:var(--text-2xl)}
  .pf-about-head::after{margin-top:14px}
  .pf-about-meta{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 20px;margin-top:18px;padding-top:14px}
  .pf-about{gap:16px}
  /* Mobile stack: cards pile with a small vertical offset so the unstack reads smoothly */
  .pf-about p{padding:18px 18px 18px 62px;font-size:var(--text-sm);transform:translateY(calc(var(--i,0) * -104%)) scale(calc(1 - var(--i,0) * .03));transition:opacity 420ms var(--ease-out),transform 620ms cubic-bezier(.22,.9,.3,1),color 240ms linear,box-shadow 260ms var(--ease-out),border-color 260ms var(--ease-out);will-change:transform,opacity}
  .pf-about.in p{transform:translateY(0) scale(1)}
  .pf-about.in p:nth-child(2){transition-delay:80ms}
  .pf-about.in p:nth-child(3){transition-delay:160ms}
  .pf-about.in p:nth-child(4){transition-delay:240ms}
  .pf-about.in p:hover{transform:none;box-shadow:0 6px 18px rgba(46,33,69,.05)}
  .pf-about p::before{left:16px;top:17px;width:32px;height:32px}
  .pf-about p::after{left:32px;height:16px}
}

/* Cancer Types banner sits taller than the standard inner hero. */
.hero-tall{min-height:min(680px,calc(100svh - var(--chrome-off,162px)));display:flex;flex-direction:column}
/* .in must fill the taller section or the absolutely-placed scroll arrow lands mid-banner. */
.hero-tall>.in{flex:1;width:100%;box-sizing:border-box}
@media (max-width:860px){.hero-tall{min-height:470px}.hero-tall .in{padding-top:24px;padding-bottom:54px}}

/* Light gradient band between the dark banner and the dark body map. */
.lightband{position:relative;padding:44px 0 46px;background:var(--neutral-0);overflow:hidden}
.lightband .wrap{position:relative}
.lb-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}
.lb-copy{max-width:none}
.lb-copy h2{margin-top:0}
.lb-copy .lede{margin-top:14px;font-size:16px;color:var(--text-muted);max-width:560px}
.lb-facts{display:flex;flex-direction:column;gap:6px}
.lb-fact{position:relative;display:grid;grid-template-columns:1fr;gap:2px;padding:18px 4px 20px;opacity:0;transform:translateY(14px);transition:opacity 640ms var(--ease-standard),transform 720ms var(--ease-out)}
.lb-facts.in .lb-fact{opacity:1;transform:none}
.lb-facts.in .lb-fact:nth-child(2){transition-delay:120ms}
.lb-facts.in .lb-fact:nth-child(3){transition-delay:240ms}
.lb-fact .n{font-family:var(--font-display,inherit);font-size:clamp(38px,4.4vw,54px);line-height:1;font-weight:500;color:var(--purple-600);font-variant-numeric:tabular-nums}
.lb-fact:nth-child(2) .n{color:var(--blue-600)}
.lb-fact:nth-child(3) .n{color:var(--green-600)}
.lb-fact .t{font-size:15px;color:var(--text-muted)}
.lb-fact .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(46,33,69,.1);overflow:hidden}
.lb-fact .bar::after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:currentColor;transition:transform 1200ms var(--ease-out)}
.lb-fact .bar{color:rgba(46,33,69,.28)}
.lb-facts.in .lb-fact .bar::after{transform:scaleX(1)}
.lb-facts.in .lb-fact:nth-child(2) .bar::after{transition-delay:120ms}
.lb-facts.in .lb-fact:nth-child(3) .bar::after{transition-delay:240ms}
@media (prefers-reduced-motion:reduce){.lb-fact{opacity:1;transform:none}}
@media (max-width:860px){
  .lightband{padding:28px 0 30px}
  .lb-grid{grid-template-columns:1fr;gap:22px}
  .lb-copy .lede{font-size:var(--text-sm)}
  .lb-facts{gap:2px}
  .lb-fact{padding:14px 2px 15px;grid-template-columns:auto 1fr;align-items:baseline;gap:14px}
  .lb-fact .n{font-size:32px}
  .lb-fact .t{font-size:var(--text-xs)}
}

.pf-spec .pf-loc{display:block;margin-top:6px;color:var(--text-muted);opacity:.75}

/* ---------- Cancer-type template ---------- */
.chero-tall{min-height:min(660px,calc(100svh - var(--chrome-off,162px)));display:flex;flex-direction:column}
.chero-tall>.in{flex:1;width:100%;box-sizing:border-box}
.chero .bg picture{display:block;width:100%;height:100%}
.chero .bg .chero-img{width:100%;height:100%;object-fit:cover;object-position:center}
.chero .bg .scrim-b{position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,33,69,.66) 0%,rgba(46,33,69,.5) 26%,rgba(46,33,69,.24) 58%,rgba(46,33,69,0) 90%)}
.chero h1 span{display:block;color:var(--purple-200);animation:ssoAccentHue 14s var(--ease-standard) infinite}
.ct-shot{overflow:hidden;border-radius:var(--radius-xl);background:var(--neutral-100);box-shadow:0 22px 48px rgba(46,33,69,.14)}
.ct-shot img{display:block;width:100%;height:100%;object-fit:cover}
.ct-shot-45{aspect-ratio:4/5}
.ct-shot-43{aspect-ratio:4/3}
.ct-stats{display:grid;gap:14px}
.tab-intro{max-width:720px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}

/* ---------- Overview: interactive route switch ----------
   Dark surface (same inverse tone as the hero and credentials band) so the section reads as
   a deliberate editorial block rather than another white card wall. */
/* Light module on a paper section — a faint tinted panel keeps it distinct without going dark. */
#overview{padding:clamp(36px,3.4vw,64px) 0}
#overview .ovx-panel{box-shadow:0 18px 40px rgba(46,33,69,.08)}
#overview .ovx-rail button.on .ib{background:var(--blue-100)}

/* ---------- Overview: prose module (any cancer, any amount of text) ---------- */
/* Used when a cancer has no two-route split: one column of copy against a tall
   sticky image, so the section reads as an editorial page rather than a leftover grid. */
/* Overview (prose pages): a statement lede, then the supporting copy in three
   short columns. No in-section photo — the page already carries imagery. */
.ova{margin-top:26px;display:grid;gap:clamp(26px,3vw,36px)}
.ova-act{justify-self:start}
/* Treatment pages wrap copy + CTA in .ova-body (same rhythm as .ova) so a section image can sit
   beside them: two columns from 861px, copy cards stacked; stacked under the copy on phones. */
.ova-body{display:grid;gap:clamp(26px,3vw,36px);min-width:0}
.ova-media{align-items:center}
@media (min-width:861px){
  .ova-media{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .ova-media .ova-cols{grid-template-columns:1fr}
}
.ova-fig{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-xl);background:var(--image-placeholder);box-shadow:0 16px 34px rgba(46,33,69,.12)}
.ova-fig img{display:block;width:100%;height:100%;object-fit:cover}
/* Overview copy reads as three editorial columns: a hairline above each, a short
   accent tick to mark the start, no card chrome. */
/* Card count follows the copy: two paragraphs give two cards, five give five, and
   the row reflows by available width rather than a fixed column count. */
.ova-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(14px,1.6vw,20px);align-items:stretch}
.ova-cols>:is(p,.ova-card){position:relative;padding:26px clamp(20px,1.8vw,26px) 24px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);box-shadow:0 1px 2px rgba(46,33,69,.04);font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty;transition:var(--transition-base)}
/* Rich cards (cancer types): the editor's paragraphs, lists and bold run-ins inside one card. */
/* Cancer-type Overview is three cards: one row from 861px up (auto-fit at 290px wrapped the
   third below 1100px); on tablets two plus a full-width third, never a lone half-width card. */
@media (min-width:861px){.ova-ct{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}}
@media (max-width:860px){.ova-ct>.ova-card:last-child:nth-child(odd){grid-column:1/-1}}
.ova-card>*+*{margin-top:12px}
.ova-card p,.ova-card li{margin:0}
.ova-card :is(ol,ul){margin-bottom:0;padding-left:1.3em;display:grid;gap:8px}
.ova-card li::marker{color:var(--purple-600);font-weight:600}
.ova-card :is(strong,b){font-weight:600;color:var(--text-heading)}
.ova-card a{color:var(--text-link)}
@media (hover:hover){.ova-cols>:is(p,.ova-card):hover{border-color:var(--border-default);box-shadow:0 14px 30px rgba(46,33,69,.08);transform:translateY(-2px)}}
@media (max-width:860px){.ova-cols{gap:12px}}

/* ---------- Overview: interactive route switch ---------- */
.ovx-head{display:grid;grid-template-columns:1.06fr .94fr;gap:40px;align-items:end}
.ovx-lede{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--neutral-600);text-wrap:pretty}
/* Two separate objects: the switch is its own control, the info panel its own card. */
.ovx{margin-top:24px;display:grid;gap:14px}
/* Segmented switch: a sliding white thumb over a recessed track, so it reads as a control
   you can flip rather than two headings. The thumb is positioned from --i (set in JS). */
.ovx-rail{--i:0;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;padding:6px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-subtle)}
.ovx-rail::before{content:"";position:absolute;z-index:0;top:6px;bottom:6px;left:6px;width:calc((100% - 18px) / 2);border-radius:var(--radius-md);background:var(--neutral-0);box-shadow:0 2px 8px rgba(46,33,69,.12),inset 0 0 0 1px var(--border-subtle);transform:translateX(calc(var(--i) * (100% + 6px)));transition:transform .42s var(--ease-standard)}
@media (prefers-reduced-motion:reduce){.ovx-rail::before{transition:none}}
.ovx-rail button{position:relative;z-index:1;display:flex;gap:12px;align-items:center;text-align:left;padding:12px 14px;background:transparent;border:0;border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-sans);transition:opacity var(--transition-base)}
.ovx-rail button:not(.on){opacity:.62}
.ovx-rail button:not(.on):hover{opacity:.85}
.ovx-rail .ib{flex:none;width:34px;height:34px;border-radius:var(--radius-circle);background:var(--blue-50);display:flex;align-items:center;justify-content:center;transition:box-shadow .35s var(--ease-standard)}
.ovx-rail button.on .ib{background:var(--blue-100);box-shadow:none}
.ovx-rail .tx{min-width:0}
.ovx-rail .n{display:block;font-family:var(--font-label);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.ovx-rail .t{display:block;margin-top:4px;font-family:var(--font-display);font-size:var(--text-md);color:var(--text-heading);letter-spacing:-.012em}
.ovx-rail .s{display:block;margin-top:3px;font-size:var(--text-xs);color:var(--text-muted)}
/* Who we are / What you can expect: only 2 segments and no icon/subtitle, so trim
   the rail's usual triplet layout down to a centred title. */
/* Who we are / What you can expect: plain pill tabs, not the sliding-thumb segmented
   switch used elsewhere \u2014 two standalone buttons, no shared track. */
#dk-rail{margin-top:24px;display:flex;gap:10px;padding:0;border:0;background:none;border-radius:0}
#dk-rail::before{display:none}
#dk-rail button{flex:none;padding:11px 22px;border:1px solid var(--border-default,#d8d3e0);border-radius:var(--radius-pill);background:var(--surface-card,#fff);opacity:1;transition:var(--transition-base)}
#dk-rail button .t{font-size:var(--text-sm);color:var(--text-body)}
#dk-rail button:hover{border-color:var(--purple-300)}
#dk-rail button.on{background:var(--purple-700);border-color:var(--purple-700)}
#dk-rail button.on .t{color:var(--neutral-0)}
@media (max-width:860px){
  #dk-rail{gap:8px;flex-wrap:wrap}
  #dk-rail button{padding:10px 16px}
}
.ovx-panel{display:grid;grid-template-columns:1fr 1fr;min-height:360px;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--surface-card);box-shadow:var(--shadow-sm);overflow:hidden}
.ovx-media{position:relative;overflow:hidden;background:var(--neutral-100)}
.ovx-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease-standard),transform 1.2s var(--ease-standard)}
.ovx-media img.on{opacity:1;transform:scale(1)}
/* Sits under the chips row in the body, not over the photo. */
.ovx-cap{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-subtle);font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--text-muted);text-wrap:pretty}
.ovx-body{padding:24px 28px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--border-subtle);transition:opacity .32s var(--ease-standard),transform .32s var(--ease-standard)}
.ovx-body.sw{opacity:0;transform:translateY(10px)}
.ovx-body h3{font-size:var(--text-lg)}
.ovx-body p.d{margin-top:10px;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
.ovx-facts{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-subtle);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ovx-facts .f{opacity:0;transform:translateY(8px);animation:ovxIn .5s var(--ease-standard) forwards}
.ovx-facts .v{font-family:var(--font-display);font-size:var(--text-md);line-height:var(--leading-tight);color:var(--text-heading)}
.ovx-facts .l{margin-top:7px;font-family:var(--font-label);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
@keyframes ovxIn{to{opacity:1;transform:none}}
.ovx-chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ovx-chips .cl{margin-right:4px;font-family:var(--font-label);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.ovx-chips .cp{padding:5px 10px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--surface-subtle);font-size:var(--text-xs);color:var(--text-body);transition:var(--transition-base)}
.ovx-chips .cp:hover{border-color:var(--blue-100);background:var(--blue-50);color:var(--blue-700)}
.ovx-teamhead{margin-top:28px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.ovx-teamhead .sublabel{margin-top:0}
.ovx-teamnote{font-size:var(--text-xs);color:var(--text-muted)}
/* Team row: icon and role sit on ONE line; the description reveals beneath, indented to the
   role's text column so it reads as one block rather than three stacked fragments. */
/* align-items:start so a collapsed card doesn't stretch to the tallest sibling's height. */
/* The five roles read as ONE strip — pills in a single row with the CTA at its right end.
   The role description becomes the pill's tooltip (title attr set in JS) so the row stays
   one line high. */
/* Label line + pills form one column; the CTA sits centred against that whole block. */
.ovx-teamrow{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:nowrap}
.ovx-teamcol{flex:1 1 0;min-width:0;display:grid;gap:12px}
.ovx-teamcol .ovx-teamhead{margin-top:0}
/* flex:1 1 0 (not auto) so the strip shrinks and the CTA keeps its place on the row; the
   pills then scroll horizontally with a fade edge instead of pushing the CTA to line two. */
.ovx-team{display:flex;flex-wrap:nowrap;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);font-family:var(--font-sans)}
.ovx-team::-webkit-scrollbar{display:none}
.ovx-team .m{--ib:24px;--ig:9px;--tint:var(--blue-50);--edge:var(--blue-100);--ink:var(--blue-700);flex:none;display:flex;align-items:center;gap:var(--ig);padding:7px 14px 7px 8px;border-radius:999px;border:1px solid var(--edge);background:var(--tint);transition:var(--transition-base);outline:none;cursor:default}
.ovx-team .m:nth-child(2n){--tint:var(--green-50);--edge:var(--green-100);--ink:var(--green-700)}
.ovx-team .m:hover,.ovx-team .m:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ovx-team .m .ib{flex:none;display:flex;width:var(--ib);height:var(--ib);align-items:center;justify-content:center;border-radius:var(--radius-circle);background:var(--neutral-0)}
.ovx-team .m h4{margin:0;font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);line-height:1.25;color:var(--ink);white-space:nowrap}
.ovx-team .m .r{display:none}
.ovx-cta{flex:none}
@media (max-width:860px){
  .ovx-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .ovx{margin-top:28px;gap:10px}
  .ovx-rail{grid-template-columns:1fr 1fr;margin:0;gap:4px}
  .ovx-rail::before{width:calc((100% - 16px) / 2);transform:translateX(calc(var(--i) * (100% + 4px)))}
  /* Phone: drop the icon chip and centre the label — at ~170px per segment the chip plus a
     two-line title read as clutter. */
  .ovx-rail button{padding:9px 8px;gap:3px;flex-direction:column;align-items:center;text-align:center}
  .ovx-rail .ib{display:none}
  .ovx-rail .tx{width:100%}
  .ovx-rail .n{font-size:9px;letter-spacing:.08em}
  .ovx-rail .t{margin-top:2px;font-size:var(--text-xs);line-height:1.2;text-wrap:balance}
  .ovx-panel{grid-template-columns:1fr;min-height:0}
  .ovx-media{aspect-ratio:4/3}
  .ovx-body{border-left:0;padding:26px 22px}
  .ovx-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .ovx-facts .v{font-size:var(--text-sm)}
  .ovx-facts .l{font-size:9px;letter-spacing:.05em}
  .ovx-teamhead{margin-top:32px}
  .ovx-teamrow{gap:12px;flex-wrap:wrap}
  .ovx-team{gap:6px;flex:1 1 100%}
  .ovx-team .m{--ib:20px;--ig:7px;padding:6px 11px 6px 6px}
  .ovx-cta{width:auto}
  .ovx-cta .b{width:auto}
}
@media (max-width:860px){
  .chero-tall{min-height:0}
  .chero-tall>.in{display:block}
  .ct-shot-45,.ct-shot-43{aspect-ratio:4/3}
  .ct-stats{grid-template-columns:1fr 1fr}
}
/* Cancer-type banner below 861px: the copy sits on the solid banner and the phone crop
   follows it WHOLE, full width at its own 6:5, fading up into the banner colour (the home
   hero's photo band). It was a cover background behind the copy, which blew a 1080x900
   crop up to fill a ~390x680 box. Capped at 62svh so it never runs past a short fold.
   .chero-ct only — about/contact/facilities share .chero-tall and have no phone crop. */
@media (max-width:860px){
  .chero-ct{display:flex;flex-direction:column}
  .chero-ct>.bg{position:relative;inset:auto;order:1;height:min(calc(100vw * 5 / 6),62svh);margin-top:-28px}
  .chero-ct>.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--surface-inverse) 0%,color-mix(in srgb,var(--surface-inverse) 40%,transparent) 10%,transparent 24%)}
  .chero-ct .bg .scrim,.chero-ct .bg .scrim-b{display:none}
  /* The photo below is the scroll cue; the arrow would sit on the CTA. */
  .chero-ct>.in>.down{display:none}
  .chero-ct h1{font-size:var(--text-2xl)}
}
/* Tablets: full width at 6:5 would be ~640px tall and run past the fold, so the band takes
   what's left of the screen. The picture fills the band edge to edge (cover, weighted to the
   top) — no side feathering (client: no side gradient on the hero, phone or tablet). */
@media (min-width:576px) and (max-width:860px){
  .chero-ct>.bg{height:min(calc(100vw * 5 / 6),40svh)}
  .chero-ct .bg picture{width:100%;height:100%}
  .chero-ct .bg .chero-img{object-position:center 30%}
}
@media (max-width:575px){
  .chero-ct h1{font-size:var(--text-xl)}
  .chero-ct .lede{font-size:var(--text-xs)}
  .chero-ct>.in{padding-bottom:40px}
  .chero-ct .hcol{margin-top:0}
  /* The banner body moved into the Overview cards (v2.9.24), so the photo fits the first screen:
     the band takes the height left below the CTA (--ct-band-top, measured by cancer-type.js;
     without it the band keeps its full 6:5), never under 200px. The picture fills it edge to
     edge (cover, weighted to the top) — no side feathering when the band is shorter. */
  .chero-ct>.bg{height:min(calc(100vw * 5 / 6),max(200px,calc(100svh - var(--ct-band-top,0px))))}
  .chero-ct .bg picture{width:100%;height:100%}
  .chero-ct .bg .chero-img{object-position:center 30%}
}

/* ---------- Breadcrumb bar (sits above the hero on every inner page) ---------- */
.crumbbar{background:var(--neutral-0);border-bottom:1px solid var(--border-subtle);margin-bottom:0;color:var(--text-muted)}
.crumbbar .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:10px;padding-bottom:10px;font-size:var(--text-2xs);font-family:var(--font-label);letter-spacing:.02em}
/* No gap between the trail and the banner that follows it — the bar's own padding
   is the only spacing, so above and below read equal. */
.crumbbar+.hero,.crumbbar+.chero,.crumbbar+.phero,.crumbbar+section{margin-top:0}
/* Sticky trail, desktop only. It stays in normal flow exactly where it is — sticky
   reserves its own space — so nothing on any page moves; it simply stops scrolling
   once it meets the bottom of the sticky bar. z-index sits just under the bar so the
   nav dropdowns still open over it. */
@media (min-width:861px){
  .crumbbar{position:sticky;top:var(--chrome-h,117px);z-index:59}
}
.crumbbar a{color:var(--text-muted);text-decoration:none;transition:var(--transition-base)}
.crumbbar a:hover{color:var(--purple-700)}
.crumbbar .now{color:var(--text-heading);font-weight:600}
.crumbbar .sep{display:inline-flex;align-items:center;color:var(--text-heading)}
/* The trail's separator is a chevron-right mask icon (sso_crumbs), not a .sep span —
   it inherits `color`, so set it here or it renders in the faint default. */
.crumbbar .wrap>.ic{color:var(--text-heading);opacity:1}
@media (max-width:860px){.crumbbar .wrap{gap:6px;padding-top:7px;padding-bottom:7px}}

/* Location cards on the cancer-type page need room for the pill + ghost link pair. */
.ct-locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:24px}
.ct-locs .loc{width:auto}
.ct-locs .loc .acts{flex-wrap:wrap}
@media (max-width:860px){.ct-locs{grid-template-columns:1fr;gap:16px}}

/* Cancer-type hero uses the standard bracket eyebrow, inverse on the dark banner. */
.chero .hcol .eyebrow{display:flex;align-items:center}
.chero .hcol .eyebrow>span{display:inline-flex;align-items:center;font-family:var(--font-label);font-size:14px;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-weight:500;color:rgba(255,255,255,.72)}

/* Scroll hint on the cancer-type banner (same treatment as the other heroes). */
.chero .down{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;background:none;border:none;cursor:pointer}
.chero .down span{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.4);color:#fff;animation:ssoScrollHint 1.8s ease-in-out infinite}
.chero-tall>.in{position:relative}

/* Height cap only: the banner never exceeds the viewport minus the chrome + crumb bar.
   Content layout inside the hero is untouched. */
@media (min-width:861px) and (max-height:900px){
  .hero-static,.chero-tall{min-height:calc(100svh - var(--chrome-off,162px))}
}

/* §3: chero shares the shell rail at xxxl+ (see site.css for the rest). */
@media (min-width:1800px){.chero .in{max-width:calc(1800px + var(--shell-gutter) * 2);margin-inline:auto}}

/* ---------- Symptoms: self-check ----------
   One column of numbered signs, each with its own accent; tapping one fills it and drives the
   gauge beside it. The advice escalates with the count. Nothing is stored or sent. */
/* Soft blue/green wash instead of the flat subtle tone, so the check reads as its own space. */
.sy-sec{background:radial-gradient(820px 460px at 6% 4%,rgba(14,116,175,.09),transparent 62%),radial-gradient(760px 440px at 96% 22%,rgba(23,138,96,.08),transparent 64%),linear-gradient(180deg,var(--surface-subtle),var(--surface-paper))}
.sy-head{max-width:760px}
.syx{margin-top:32px;display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(20px,2.6vw,44px);align-items:start}
.syx-grid{display:grid;grid-template-columns:1fr;gap:8px}
.syc{--ac:var(--blue-600);--tint:var(--blue-50);--edge:var(--blue-100);position:relative;display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--text-body);overflow:hidden;transition:transform .28s var(--ease-standard),background .28s var(--ease-standard),border-color .28s var(--ease-standard)}
.syc:nth-child(2n){--ac:var(--green-600);--tint:var(--green-50);--edge:var(--green-100)}
.syc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac);transform:scaleY(0);transform-origin:center;transition:transform .34s var(--ease-standard)}
.syc:hover{border-color:var(--edge);background:var(--tint);transform:translateX(3px)}
.syc:hover::before{transform:scaleY(.45)}
.syc.on{background:var(--tint);border-color:var(--ac);color:var(--text-heading)}
.syc.on::before{transform:scaleY(1)}
.syc .ix{flex:none;font-family:var(--font-label);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:.04em;color:var(--text-muted);transition:color .28s var(--ease-standard)}
.syc.on .ix{color:var(--ac)}
.syc .t{flex:1 1 auto;min-width:0;text-wrap:pretty}
.syc .bx{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-circle);border:1.5px solid var(--border-subtle);background:var(--neutral-0);color:transparent;transition:var(--transition-base)}
.syc.on .bx{border-color:var(--ac);background:var(--ac);color:var(--neutral-0);transform:scale(1.06)}
/* Gauge read-out */
.syx-read{position:sticky;top:calc(var(--chrome-h,116px) + 16px);display:grid;justify-items:center;padding:24px 22px;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--surface-paper);text-align:center}
.syx-read .gauge{--p:0;position:relative;width:132px;height:132px;border-radius:var(--radius-circle);background:conic-gradient(var(--blue-500) 0 calc(var(--p) * 1%),var(--green-500) calc(var(--p) * 1%) calc(var(--p) * 1%),var(--border-subtle) calc(var(--p) * 1%) 100%);display:grid;place-items:center;transition:background .5s var(--ease-standard)}
.syx-read .gauge .in{width:104px;height:104px;border-radius:var(--radius-circle);background:var(--surface-paper);display:grid;place-items:center;align-content:center;gap:2px}
.syx-read .c{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1;color:var(--blue-700)}
.syx-read .of{font-family:var(--font-label);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.syx-read .k{margin-top:20px;font-family:var(--font-label);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-heading)}
.syx-read .v{margin-top:6px;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
.syx-read .b{margin-top:18px}
.syx-read .n{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-subtle);font-size:var(--text-3xs);line-height:var(--leading-relaxed);color:var(--text-muted);text-wrap:pretty}
@media (max-width:860px){
  .syx{margin-top:20px;grid-template-columns:1fr;gap:16px}
  .syc{padding:12px 13px;gap:10px;font-size:var(--text-xs)}
  .syc .bx{width:21px;height:21px}
  .syx-read{position:static;padding:18px}
  .syx-read .gauge{width:110px;height:110px}
  .syx-read .gauge .in{width:86px;height:86px}
  .syx-read .c{font-size:var(--text-2xl)}
}

/* ---------- Clinical picture: stages / types / diagnosis ----------
   The switcher is a segmented control with counts; stages are a progression rail you click
   through; diagnosis is a numbered sequence. Blue and green accents alternate. */
/* Operating-theatre backdrop behind a heavy paper overlay, so the section has depth without
   costing legibility. */
.kx-sec{position:relative;overflow:hidden;background:var(--surface-paper)}
#specialists{padding-top:clamp(24px,2.4vw,44px)}
.kx-bg{position:absolute;inset:0;pointer-events:none}
.kx-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.kx-bg .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,250,252,.94),rgba(250,250,252,.88) 42%,rgba(250,250,252,.96))}
.kx-sec>.wrap{position:relative;z-index:1}
.kx{margin-top:28px}
.kx .tab-btns{--i:0;position:relative;display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:5px;border:1px solid var(--border-subtle);border-radius:999px;background:var(--surface-subtle);overflow:visible}
.kx .tab-btns::before{content:"";position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc((100% - 18px) / 3);border-radius:999px;background:var(--neutral-0);box-shadow:0 2px 8px rgba(46,33,69,.12),inset 0 0 0 1px var(--border-subtle);transform:translateX(calc(var(--i) * (100% + 4px)));transition:transform .4s var(--ease-standard)}
.kx .tab-btns button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 20px;margin:0;border:0;border-radius:999px;background:transparent;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);cursor:pointer;transition:color var(--transition-base)}
.kx .tab-btns button.on{color:var(--blue-700);border-bottom-color:transparent}
.kx .tab-btns .ct{display:none;place-items:center;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--border-subtle);font-family:var(--font-label);font-size:var(--text-3xs);color:var(--text-muted);transition:var(--transition-base)}
.kx .tab-btns button.on .ct{background:var(--blue-600);color:var(--neutral-0)}
.kx .tab-body{padding-top:26px}
/* Stage rail */
.kx-rail{--p:0;position:relative;margin-top:26px;display:flex;justify-content:space-between;gap:8px;padding-top:6px}
/* Nodes are equal flex cells, so the dots sit at each cell's CENTRE: the track must be inset
   by half a cell (50%/--n, set with --p in JS) and the fill scaled across the dot-centre span,
   or the line and progress terminus never land on a dot. */
.kx-rail::before,.kx-rail::after{content:"";position:absolute;left:calc(50% / var(--n,4));right:calc(50% / var(--n,4));top:20px;height:2px;border-radius:1px}
.kx-rail::before{background:var(--border-subtle)}
.kx-rail::after{right:auto;width:calc((100% - 100% / var(--n,4)) * var(--p) / 100);background:linear-gradient(90deg,var(--blue-500),var(--green-500));transition:width .45s var(--ease-standard)}
.kx-node{position:relative;z-index:1;flex:1 1 0;min-width:0;display:grid;justify-items:center;gap:9px;padding:0;border:0;background:transparent;cursor:pointer;font-family:var(--font-sans)}
.kx-node .dot{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-circle);background:var(--neutral-0);box-shadow:inset 0 0 0 2px var(--border-subtle);transition:var(--transition-base)}
.kx-node .i{font-family:var(--font-label);font-size:var(--text-3xs);font-weight:var(--weight-semibold);color:var(--text-muted)}
.kx-node .n{font-family:var(--font-label);font-size:var(--text-2xs);font-weight:var(--weight-semibold);color:var(--text-muted);text-align:center;transition:color var(--transition-base)}
.kx-node:hover .dot{box-shadow:inset 0 0 0 2px var(--blue-300,#7db8e8)}
.kx-node.done .dot{background:var(--blue-500);box-shadow:none}
.kx-node.done .i{color:var(--neutral-0)}
.kx-node.on .dot{background:var(--blue-600);box-shadow:0 0 0 5px var(--blue-50);transform:scale(1.08)}
.kx-node.on .i{color:var(--neutral-0)}
.kx-node.on .n{color:var(--blue-700)}
/* Editorial, not a card: an oversized stage numeral set against the copy, on a hairline rule. */
.kx-detail{margin-top:24px;padding-top:22px;border-top:1px solid var(--border-subtle);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,48px);align-items:start;opacity:0;transform:translateY(8px);transition:opacity .34s var(--ease-standard),transform .34s var(--ease-standard)}
.kx-detail.in{opacity:1;transform:none}
.kx-detail .num{display:grid;justify-items:center;line-height:1}
.kx-detail .num .r{font-family:var(--font-display);font-size:clamp(56px,7vw,104px);line-height:.86;color:var(--blue-600)}
.kx-detail .num .w{margin-top:8px;font-family:var(--font-label);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.kx-detail .tx{padding-top:4px}
.kx-detail h4{font-family:var(--font-display);font-size:var(--text-xl);color:var(--text-heading)}
.kx-detail p{margin-top:10px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty;max-width:64ch}
/* The staging caveat applies to every stage, so it sits in its own tinted strip. */
.kx .tab-panel>.note{margin-top:22px;padding:14px 18px;border-radius:var(--radius-md);border:1px solid var(--blue-100);background:var(--blue-50);font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
/* Type cards */
.kx-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.kx-type{position:relative;padding:22px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-card);overflow:hidden;transition:var(--transition-base)}
.kx-type::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ac)}
.kx-type:hover{transform:translateY(-4px);background:var(--tint);border-color:var(--ac);box-shadow:var(--shadow-sm)}
.kx-type .ix{font-family:var(--font-label);font-size:var(--text-3xs);font-weight:var(--weight-semibold);letter-spacing:.06em;color:var(--ac)}
.kx-type h4{margin-top:8px;font-size:var(--text-md);color:var(--text-heading)}
.kx-type p{margin-top:8px;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
/* Diagnosis sequence */
.kx-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kx-step{position:relative;padding:20px 18px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-card);color:var(--ac);transition:var(--transition-base)}
.kx-step:hover{transform:translateY(-4px);background:var(--tint);border-color:var(--ac);box-shadow:var(--shadow-sm)}
.kx-step h4{margin-top:0;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-regular,400);line-height:var(--leading-relaxed);color:var(--text-body)}
.kx-step p{margin-top:7px;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
@media (max-width:860px){
  .kx{margin-top:20px}
  .kx .tab-btns{width:100%}
  .kx .tab-btns button{padding:9px 10px}
  .kx .tab-body{padding-top:18px}
  .kx-rail{margin-top:18px;gap:4px}
  .kx-node .n{font-size:10px}
  .kx-detail{margin-top:18px;padding-top:16px;gap:14px}
  .kx-detail h4{font-size:var(--text-md)}
  .kx-detail p{font-size:var(--text-xs)}
  .kx-types,.kx-steps{grid-template-columns:1fr;gap:10px}
  .kx .tab-panel>.note{margin-top:16px;padding:12px 14px}
  /* One size for every line of copy inside a tab panel on phones. */
  .kx .tab-panel .tab-intro,.kx .tab-panel .paras p,.kx .tab-panel>.note{font-size:var(--text-xs)}
}

/* ---------- Risk & treatment: dark deck section ----------
   Same brand gradient as the homepage body-map band. Two card decks behind one switch, each
   card revealing on scroll with a stagger, so the long clinical copy reads as a system. */
.ctx-sec{position:relative;overflow:hidden;color:rgba(255,255,255,.86)}
.ctx-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,56px);align-items:end}
.ctx-lede{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:rgba(255,255,255,.72)}
.ctx-switch{--i:0;position:relative;margin-top:26px;display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.ctx-switch::before{content:"";position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc((100% - 14px) / 2);border-radius:999px;background:rgba(255,255,255,.94);transform:translateX(calc(var(--i) * (100% + 4px)));transition:transform .4s var(--ease-standard)}
.ctx-switch button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 20px;border:0;border-radius:999px;background:transparent;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:rgba(255,255,255,.7);cursor:pointer;transition:color var(--transition-base)}
.ctx-switch button.on{color:var(--purple-800)}
.ctx-switch .ct{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.16);font-family:var(--font-label);font-size:var(--text-3xs);color:rgba(255,255,255,.8)}
.ctx-switch button.on .ct{background:var(--purple-800);color:#fff}
.ctx-panels{margin-top:26px}
.ctx-panel{display:none}
.ctx-panel.on{display:block}
.ctx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.ctx-cards-sm{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* Entrance is a CSS animation on the active panel (restarts when the switch flips) rather
   than a JS-added class — a missed observer callback used to leave every card at opacity 0. */
.ctx-card{position:relative;padding:20px 18px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);background:rgba(255,255,255,.06);backdrop-filter:blur(6px);transition:background .3s var(--ease-standard),border-color .3s var(--ease-standard)}
.ctx-panel.on .ctx-card{animation:ctxIn .5s var(--ease-standard) var(--d,0ms) both}
@keyframes ctxIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ctx-card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;background:var(--ac);opacity:.55;transition:opacity .3s var(--ease-standard)}
.ctx-card:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3)}
.ctx-card:hover::before{opacity:1}
.ctx-card .ix{font-family:var(--font-label);font-size:var(--text-3xs);font-weight:var(--weight-semibold);letter-spacing:.06em;color:var(--ac)}
.ctx-card h4{margin-top:8px;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:var(--leading-snug);color:#fff;text-wrap:pretty}
.ctx-card p{margin-top:8px;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:rgba(255,255,255,.7);text-wrap:pretty}
.ctx-card-sm{padding:16px 15px}
.ctx-card-sm h4{font-size:var(--text-xs)}
.ctx-care{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,3vw,48px);align-items:start}
.ctx-lead h3{font-family:var(--font-display);font-size:var(--text-2xl);color:#fff}
.ctx-lead .d{margin-top:12px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:rgba(255,255,255,.76);text-wrap:pretty;max-width:52ch}
.sublabel-inv{color:rgba(255,255,255,.62)}
.ctx-also .ctx-cards{margin-top:12px}
.ctx-also .note-inv{margin-top:16px;font-size:var(--text-xs);color:rgba(255,255,255,.6)}
.ctx-cta{margin-top:20px}
@media (prefers-reduced-motion:reduce){.ctx-panel.on .ctx-card{animation:none}}
@media (max-width:860px){
  .ctx-head{grid-template-columns:1fr;gap:14px;align-items:start}
  .ctx-switch{margin-top:18px;width:100%}
  .ctx-switch button{padding:9px 10px}
  .ctx-panels{margin-top:18px}
  .ctx-cards,.ctx-cards-sm{grid-template-columns:1fr;gap:10px}
  .ctx-care{grid-template-columns:1fr;gap:20px}
  .ctx-lead h3{font-size:var(--text-lg)}
  .ctx-cta .b{width:auto}
}

/* ---------- Cancer-type page: phone tier ----------
   Base rules above are desktop-first for these modules, so the phone pass lives here.
   430px is the phone ceiling; 431-860 keeps the same treatment with a little more room. */
@media (max-width:860px){
  /* Clinical: the switch scrolls rather than crushing three labels into 320px */
  .kx .tab-btns{display:flex;width:100%;overflow-x:auto;scrollbar-width:none}
  .kx .tab-btns::-webkit-scrollbar{display:none}
  .kx .tab-btns::before{display:none}
  .kx .tab-btns button{flex:1 0 auto;min-height:44px;padding:11px 14px;border:1px solid transparent}
  .kx .tab-btns button.on{background:var(--neutral-0);border-color:var(--border-subtle);box-shadow:0 2px 8px rgba(46,33,69,.1)}
  /* Stage rail: scrollable so four nodes keep readable labels */
  /* Four stages fit a phone row when each node flexes; even spacing beats a scroll here. */
  .kx-rail{overflow:visible;justify-content:space-between;gap:6px;padding:6px 0 0}
  .kx-rail::before,.kx-rail::after{top:21px}
  .kx-node{flex:1 1 0;min-width:0}
  .kx-detail{grid-template-columns:1fr}
  .kx-detail .num{justify-items:start;grid-auto-flow:column;align-items:baseline;gap:8px}
  .kx-detail .num .r{font-size:44px}
  .kx-detail .num .w{margin-top:0}
  .kx-bg img{object-position:center 30%}
  /* Risk & treatment */
  .ctx-card{padding:16px 15px}
  .ctx-card h4{font-size:var(--text-xs)}
  .ctx-card p{font-size:var(--text-2xs)}
  /* Overview (route-pill type lives in the earlier 860 block — do not redeclare .ovx-rail .t/.s) */
  .ovx-teamrow{flex-direction:column;align-items:stretch;gap:14px}
  .ovx-teamcol{gap:10px}
  .ovx-team{overflow-x:auto;flex-wrap:nowrap}
  .ovx-cta .b{width:auto}
  /* Locations deck + reviews inherit the shared home-page phone rules */
  #locations{padding:44px 0 !important}
  #reviews .rev-side{margin-bottom:18px}
}
@media (max-width:430px){
  .kx .tab-btns .ct{display:none}
  .kx-node{flex:1 1 0}
  .kx-node .n{font-size:9.5px;line-height:1.2}
  .syc{font-size:11.5px}
  .why-pts li{font-size:11.5px}
}

/* Dot indicators for horizontally scrollable strips (phone only). */
.hs-dots{display:none}
@media (max-width:860px){
  /* 24px tap targets, dot painted by ::before (see .dots-row in site.css). */
  .hs-dots.on{display:flex;justify-content:center;gap:0;margin-top:4px}
  .hs-dots button{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
  .hs-dots button::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:var(--radius-pill);background:var(--border-strong,#c9ccd4);opacity:.55;transition:var(--transition-base)}
  .hs-dots button.on{width:26px}
  .hs-dots button.on::before{opacity:1;width:18px;background:var(--blue-600)}
}

/* ---------- Treatments hub + treatment page ---------- */
.tgrid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 24px 22px;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--surface-card);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:var(--transition-base)}
.tcard .sp{font-family:var(--font-label);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.tcard h3{font-size:var(--text-md);letter-spacing:-.012em;color:var(--text-heading)}
.tcard p{font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
.tcard .go{margin-top:auto;display:flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--blue-600)}
.tcard.soon .go{color:var(--text-muted)}
a.tcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(46,33,69,.12);border-color:var(--blue-300,#8fc4ee)}
.tcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--ac,var(--blue-600))}
.why-copy .wh-p{margin-top:14px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:rgba(255,255,255,.78);text-wrap:pretty}
.kx-steps .kx-step .sn{font-family:var(--font-label);font-size:var(--text-3xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ac)}
@media (max-width:980px){.tgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tgrid{grid-template-columns:1fr}}

/* ---------- About page ---------- */
.ab-cmp-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:end}
.ab-cmp-head .lede{max-width:56ch;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.ab-cmp{margin-top:30px;display:grid;gap:18px}
.ab-cmp-switch{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill,999px);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);justify-self:start;max-width:100%;overflow:auto}
.ab-cmp-switch button{flex:none;border:0;background:transparent;cursor:pointer;padding:9px 18px;border-radius:var(--radius-pill,999px);font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-weight:500;color:var(--text-muted);transition:background var(--dur,220ms) var(--ease,ease),color var(--dur,220ms) var(--ease,ease)}
.ab-cmp-switch button.on{background:var(--blue-600);color:#fff}
.ab-cmp-panel{display:grid;grid-template-columns:minmax(200px,290px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(22px,2.4vw,30px) 0;border-radius:var(--radius-xl);border:1px solid var(--border-subtle);background:var(--surface-card,#fff)}
/* Volume figure: the number counts up and the rule beneath it draws itself in a
   brand-gradient sweep once the card scrolls into view. */
.ab-cmp-fig{position:relative}
.ab-cmp-vol{display:block;font-family:var(--font-display);font-size:clamp(38px,4.6vw,62px);line-height:1;letter-spacing:-.02em;color:var(--text-heading);font-variant-numeric:tabular-nums}
.ab-cmp-vlabel{display:block;margin-top:10px;max-width:22ch;line-height:var(--leading-normal);font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.ab-cmp-bar{margin-top:20px;height:6px;border-radius:999px;background:var(--neutral-100);overflow:hidden}
.ab-cmp-bar span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--blue-600),var(--purple-600),var(--green-600),var(--blue-600));background-size:300% 100%;animation:abHue 6s linear infinite;transition:width 1100ms cubic-bezier(.22,1,.36,1)}
@keyframes abHue{to{background-position:-300% 0}}
.ab-cmp-body{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty;max-width:none;border-left:0;padding-left:0}
@media (prefers-reduced-motion:reduce){.ab-cmp-bar span{animation:none;transition:none}}
/* Scroll reveal: JS adds .rv-on to the group, so content stays visible without JS. */
.rv-on .rv{opacity:0;transform:translateY(16px);transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}
.rv-on .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none;transition:none}}

.ab-pillars{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* ---------- WhatOnSite (Facilities page): vertical list + 3-up image strip ---------- */
.wod{margin-top:36px;display:grid;grid-template-columns:270px minmax(0,1fr);gap:0;align-items:start;border-radius:var(--radius-2xl);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);box-shadow:0 24px 60px -20px rgba(46,33,69,.14);overflow:hidden}
.wod-list{display:grid;gap:0;padding:20px 12px;background:var(--surface-paper);border-right:1px solid var(--border-subtle);align-self:stretch}
.wod-list button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:16px 18px;margin:2px 0;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;color:var(--text-muted);transition:var(--transition-base)}
.wod-list button::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:var(--radius-pill);background:var(--purple-600);opacity:0;transform:scaleY(.4);transition:var(--transition-base)}
.wod-list button .ic{width:15px;height:15px;color:var(--purple-600);opacity:0;transform:translateX(-4px);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.wod-list button.on{color:var(--text-heading);font-weight:700;background:var(--surface-card,#fff);box-shadow:0 8px 20px -12px rgba(46,33,69,.18)}
.wod-list button.on::before{opacity:1;transform:none}
.wod-list button.on .ic{opacity:1;transform:none}
@media (hover:hover){.wod-list button:hover{color:var(--text-heading)}}
.wod-panel{padding:32px 32px 36px}
.wod-imgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;animation:wodIn 380ms var(--ease-out)}
.wod-img{display:grid;gap:12px}
.wod-img image-slot,.wod-img>img{aspect-ratio:4/3;border-radius:var(--radius-lg);box-shadow:0 14px 30px -14px rgba(46,33,69,.22);transition:transform 320ms var(--ease-out)}
.wod-img>img{display:block;width:100%;height:auto;object-fit:cover;background:var(--image-placeholder)}
@media (hover:hover){.wod-img:hover image-slot,.wod-img:hover>img{transform:translateY(-4px)}}
.wod-cap{font-size:var(--text-xs);font-weight:600;color:var(--text-heading);letter-spacing:.01em}
@keyframes wodIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#wod-points{margin-top:28px;padding-top:24px;border-top:1px solid var(--border-subtle);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;animation:wodIn 420ms var(--ease-out)}
#wod-points li{margin:0}
#wod-points .b1{background:var(--purple-50);color:var(--purple-600)}
@media (max-width:860px){
  .wod{grid-template-columns:1fr;border:0;box-shadow:none;background:transparent;border-radius:0}
  .wod-list{display:flex;overflow-x:auto;gap:8px;border-right:0;border-bottom:0;background:transparent;padding:0 0 16px;scrollbar-width:none}
  .wod-list::-webkit-scrollbar{display:none}
  .wod-list button{flex:none;width:auto;padding:10px 18px;margin:0;border-radius:var(--radius-pill);background:var(--neutral-100);font-size:var(--text-xs);font-weight:600;box-shadow:none}
  .wod-list button::before{display:none}
  .wod-list button .ic{display:none}
  .wod-list button.on{background:var(--purple-600);color:#fff;box-shadow:none}
  .wod-panel{padding:20px 16px 24px;border-radius:var(--radius-2xl);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);box-shadow:0 24px 60px -20px rgba(46,33,69,.14)}
  .wod-imgs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .wod-cap{font-size:var(--text-2xs)}
  #wod-points{grid-template-columns:1fr}
}
@media (max-width:640px){.wod-imgs{grid-template-columns:1fr 1fr}}
/* ---------- Blogs listing ---------- */
.blog-cat{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.94);font-family:var(--font-label);font-size:var(--text-3xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--purple-700);box-shadow:0 2px 8px rgba(20,12,34,.12)}
.blog-cat .dot{width:6px;height:6px;border-radius:50%;background:var(--purple-600)}
.blog-cat-plain{background:var(--purple-50);box-shadow:none}
.blog-feat{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.blog-feat-card{position:relative;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:0 30px 70px -24px rgba(46,33,69,.28)}
/* Covers: the placeholder's frame applies to a real <img> too — posts with a cover photo rendered it
   at its natural height (1500px in a 370px card). */
.blog-feat-card>img,.blog-latest-it>img,.blog-card>img,.bart-cover>img{width:100%;height:auto;object-fit:cover}
.blog-feat-card image-slot,.blog-feat-card>img{aspect-ratio:16/11;display:block;transition:transform 500ms var(--ease-out)}
@media (hover:hover){.blog-feat-card:hover image-slot{transform:scale(1.035)}}
.blog-feat-cap{position:absolute;left:0;right:0;bottom:0;padding:32px}
.blog-feat-cap::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,10,28,.86),rgba(16,10,28,.25) 60%,transparent);z-index:0}
.blog-feat-cap>*{position:relative;z-index:1}
.blog-feat-cap h3{margin-top:16px;color:#fff;font-size:var(--text-2xl);line-height:1.28;text-wrap:pretty;max-width:34ch}
.blog-feat-cap .meta{margin-top:12px;font-size:var(--text-2xs);color:rgba(255,255,255,.8)}
.blog-latest h3{font-size:var(--text-lg);color:var(--text-heading);padding-bottom:16px;border-bottom:1px solid var(--border-subtle)}
.blog-latest-list{margin-top:6px;display:grid;gap:2px}
.blog-latest-it{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:start;padding:16px 8px;margin:0 -8px;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base)}
@media (hover:hover){.blog-latest-it:hover{background:var(--surface-paper)}.blog-latest-it:hover h4{color:var(--purple-700)}}
.blog-latest-it+.blog-latest-it{border-top:1px solid var(--border-subtle)}
.blog-latest-it image-slot,.blog-latest-it>img{border-radius:var(--radius-md);aspect-ratio:1/1;display:block;box-shadow:0 4px 12px rgba(46,33,69,.14)}
.blog-latest-it h4{font-size:var(--text-sm);line-height:1.4;color:var(--text-heading);font-weight:500;transition:var(--transition-base)}
.blog-latest-it .meta{margin-top:7px;font-size:var(--text-3xs);color:var(--text-muted)}
.blog-sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
#blog-filter,#cs-filter,#vid-filter{display:inline-block}
#blog-filter .dd-menu,#cs-filter .dd-menu,#vid-filter .dd-menu{min-width:220px;width:max-content;max-width:280px}
/* ~12 cancer topics — cap and scroll, same as the Research page dropdown. */
#vid-filter .dd-menu{max-height:320px;overflow-y:auto}
#blog-filter .dd-btn,#cs-filter .dd-btn,#vid-filter .dd-btn{border:1.5px solid var(--blue-600);background:color-mix(in oklab,var(--blue-600) 8%,var(--surface-card,#fff));color:var(--blue-700);font-weight:700;padding-right:38px;box-shadow:0 8px 20px -12px color-mix(in oklab,var(--blue-700) 60%,transparent)}
#blog-filter .dd-btn::before,#cs-filter .dd-btn::before,#vid-filter .dd-btn::before{content:"";width:15px;height:15px;margin-right:9px;background:var(--blue-600);-webkit-mask:url("../icons/ui/filter.svg") center/contain no-repeat;mask:url("../icons/ui/filter.svg") center/contain no-repeat;flex:none}
#blog-filter .dd-btn::after,#cs-filter .dd-btn::after,#vid-filter .dd-btn::after{border-right-color:var(--blue-600)!important;border-bottom-color:var(--blue-600)!important}
@media (hover:hover){#blog-filter .dd-btn:hover,#cs-filter .dd-btn:hover,#vid-filter .dd-btn:hover{background:color-mix(in oklab,var(--blue-600) 14%,var(--surface-card,#fff))}}
/* Phone: the heading and filter stack, and the pill spans the row (the global .dd width:calc(50% - 5px) is for the two-up doctors filter row). */
@media (max-width:860px){
  .blog-sec-head{flex-wrap:wrap}
  #blog-filter,#cs-filter,#vid-filter,#rs-cat,#rs-doctor{display:block;width:100%}
  #blog-filter.dd,#cs-filter.dd,#vid-filter.dd,#rs-cat.dd,#rs-doctor.dd{width:100%}
  #blog-filter .dd-btn,#cs-filter .dd-btn,#vid-filter .dd-btn,#rs-cat .dd-btn,#rs-doctor .dd-btn{width:100%;justify-content:space-between}
  /* The menus carry desktop min/max widths that overflow a full-width phone anchor. */
  #blog-filter .dd-menu,#cs-filter .dd-menu,#vid-filter .dd-menu,#rs-cat .dd-menu,#rs-doctor .dd-menu{left:0;right:0;width:auto;min-width:0;max-width:100%}
}
.blog-grid{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (min-width:1200px){.blog-grid,.vid-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.blog-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;border-radius:var(--radius-2xl);overflow:hidden;background:var(--surface-card,#fff);border:1px solid var(--border-subtle);box-shadow:0 14px 34px -20px rgba(46,33,69,.18);cursor:pointer;transition:var(--transition-base)}
@media (hover:hover){.blog-card:hover{box-shadow:0 24px 50px -20px rgba(46,33,69,.26);transform:translateY(-3px)}.blog-card:hover image-slot{transform:scale(1.04)}}
.blog-card image-slot,.blog-card>img{border-radius:0;aspect-ratio:4/3;width:100%;min-width:0;height:auto;align-self:start;display:block;box-shadow:none;transition:transform 420ms var(--ease-out)}
.blog-card-body{padding:18px 24px 22px;display:grid;gap:12px}
.blog-card h4{font-size:var(--text-md);color:var(--text-heading);line-height:1.35;text-wrap:balance;overflow-wrap:break-word;padding-right:6px}
.blog-card p{font-size:var(--text-sm);color:var(--text-body);line-height:var(--leading-relaxed)}
.blog-card .meta{font-size:var(--text-2xs);color:var(--text-muted)}
.blog-pager{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
/* Pager items are real links (/blogs/page/N/); a disabled arrow is a <span>. */
.blog-pager>:is(a,span){width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border-default);background:var(--neutral-0);font-size:var(--text-xs);font-weight:600;color:var(--text-muted);text-decoration:none;cursor:pointer;transition:var(--transition-base)}
.blog-pager>.arw{color:var(--text-heading)}
.blog-pager>span.arw{opacity:.35;cursor:default}
.blog-pager>a.on{background:var(--purple-600);color:var(--neutral-0);border-color:var(--purple-600);box-shadow:0 8px 18px -8px rgba(107,63,196,.5)}
@media (hover:hover){.blog-pager>a:not(.on):hover{border-color:var(--purple-300);color:var(--purple-700)}}
.blog-pager[hidden]{display:none}
.blog-pg-note{font-family:var(--font-label);font-size:var(--text-sm);font-weight:500;color:var(--text-muted)}
/* View all / Show less: phones only (the grid collapses to 4 there), and only rendered when the
   page has more than 4 cards — `hidden` otherwise. */
#blog-viewall{display:none;margin-top:20px;justify-content:center}
@media (max-width:860px){
  .blog-feat{grid-template-columns:1fr;gap:24px}
  .blog-grid{grid-template-columns:1fr;gap:18px}
  .blog-grid:not(.expanded) .blog-card:nth-child(n+5){display:none}
  #blog-viewall:not([hidden]){display:flex}
  .blog-feat-cap{padding:20px}
  .blog-feat-cap h3{font-size:var(--text-lg)}
}
/* ---------- Blog article template ---------- */
.bart-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--purple-500),var(--purple-700));z-index:70;width:0%;transition:width 80ms linear}
.bart-cover{border-radius:var(--radius-2xl);overflow:hidden;box-shadow:0 30px 70px -24px rgba(46,33,69,.26);border:1px solid var(--border-subtle)}
.bart-cover image-slot,.bart-cover>img{aspect-ratio:16/6.5;display:block}
.bart-head{max-width:none;margin:0}
.bart-byline{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;border-radius:var(--radius-lg);background:var(--surface-paper)}
.bart-author{display:flex;align-items:center;gap:12px}
.bart-avatar{width:56px;height:56px;border-radius:50%;background:var(--purple-100);display:flex;align-items:center;justify-content:center;font-family:var(--font-label);font-size:var(--text-md);font-weight:700;color:var(--purple-700);flex:none;box-shadow:0 6px 16px -6px rgba(107,63,196,.4)}
.bart-author .nm{font-size:var(--text-sm);font-weight:600;color:var(--text-heading)}
.bart-author .rl{margin-top:2px;font-size:var(--text-2xs);color:var(--text-muted)}
.bart-meta{margin-top:12px;font-size:var(--text-2xs);font-weight:500;color:var(--text-muted)}
.bart-lede{margin-top:22px;font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-heading);font-weight:500;text-wrap:pretty}
.bart-div{margin-top:26px;border-top:1px solid var(--border-subtle)}
.bart-grid{margin-top:40px;max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:64px;align-items:start}
.bart-body{max-width:none}
.bart-body h2{margin-top:44px;padding-top:16px;border-top:3px solid var(--purple-600);font-size:var(--text-xl);color:var(--text-heading)}
.bart-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.bart-body h3{margin-top:22px;font-size:var(--text-md);color:var(--text-heading)}
.bart-body p{margin-top:14px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
.bart-body ul{margin:14px 0 0;padding:0;display:grid;gap:10px;list-style:none}
.bart-body ul li{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.bart-body ul li .b1{flex:none;margin-top:3px;width:18px;height:18px;border-radius:50%;background:var(--green-50);color:var(--green-600);display:flex;align-items:center;justify-content:center}
/* An article written in the editor (imported from the old site): plain HTML, styled to match. */
.bart-prose ul li{display:block;position:relative;padding-left:28px}
.bart-prose ul li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--green-50)}
.bart-prose ul li::after{content:"";position:absolute;left:4px;top:7px;width:10px;height:10px;background:var(--green-600);-webkit-mask:url("../icons/ui/check.svg") center/contain no-repeat;mask:url("../icons/ui/check.svg") center/contain no-repeat}
.bart-prose ol{margin:14px 0 0;padding-left:1.5em;display:grid;gap:10px}
.bart-prose ol li{padding-left:4px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.bart-prose ol li::marker{color:var(--purple-600);font-weight:700}
.bart-prose li>p:first-child{margin-top:0}
.bart-prose li ul,.bart-prose li ol{margin-top:10px}
.bart-prose h4,.bart-prose h5{margin-top:20px;font-size:var(--text-sm);font-weight:700;line-height:1.4;color:var(--text-heading)}
.bart-prose strong,.bart-prose b{font-weight:600;color:var(--text-heading)}
.bart-prose a{color:var(--purple-700);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
@media (hover:hover){.bart-prose a:hover{color:var(--purple-600)}}
.bart-prose blockquote{margin:18px 0 0;padding:14px 18px;border-left:3px solid var(--purple-600);border-radius:0 var(--radius-md) var(--radius-md) 0;background:var(--purple-50)}
.bart-prose blockquote>p:first-child{margin-top:0}
.bart-prose figure{margin:22px 0 0}
.bart-prose img{max-width:100%;height:auto}
.bart-prose figure img{display:block;width:100%;border-radius:var(--radius-lg)}
.bart-prose .bart-video{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-inverse)}
.bart-prose .bart-video iframe,.bart-prose .bart-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* A YouTube embed is served as its still + play button (inc/perf.php); the player loads on click. */
.yt-lite{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:var(--surface-inverse);cursor:pointer;overflow:hidden}
.bart-prose .bart-video .yt-lite{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.yt-lite .yt-still{display:contents}
.yt-lite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (hover:hover){.yt-lite:hover .vplay{transform:translate(-50%,-50%) scale(1.07)}}
.yt-lite:focus-visible{outline:3px solid var(--blue-200);outline-offset:3px}
.bart-prose hr{margin:28px 0 0;border:0;border-top:1px solid var(--border-subtle)}
.bart-prose table{margin-top:16px;width:100%;border-collapse:collapse;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.bart-prose td,.bart-prose th{padding:8px 10px;border:1px solid var(--border-subtle);vertical-align:top}
.bart-prose .bart-promo{margin-top:24px;padding:20px 22px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-paper)}
.bart-prose .bart-promo h3{margin-top:0}
.bart-prose .bart-promo-cta a{display:inline-flex;align-items:center;padding:10px 18px;border-radius:var(--radius-pill);background:var(--purple-600);color:var(--text-on-brand);font-size:var(--text-xs);font-weight:600;text-decoration:none}
@media (hover:hover){.bart-prose .bart-promo-cta a:hover{background:var(--purple-700);color:var(--text-on-brand)}}
.bart-items{margin-top:18px;display:grid;gap:14px}
.bart-item{position:relative;padding:18px 20px 18px 52px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-paper);transition:var(--transition-base)}
.bart-item .n{position:absolute;left:18px;top:18px;width:24px;height:24px;border-radius:50%;background:var(--purple-600);color:#fff;font-size:var(--text-3xs);font-weight:700;display:flex;align-items:center;justify-content:center}
@media (hover:hover){.bart-item:hover{border-color:var(--purple-200);box-shadow:0 14px 30px -18px rgba(46,33,69,.2);transform:translateY(-2px)}}
.bart-item h3{margin-top:0;font-size:var(--text-sm)}
.bart-item p{margin-top:6px;font-size:var(--text-sm)}
.bart-side{position:sticky;top:calc(var(--chrome-h,116px) + 16px);display:grid;gap:18px}
.bart-side-card{padding:22px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);box-shadow:0 14px 34px -20px rgba(46,33,69,.16);transition:var(--transition-base)}
.bart-side-card h4{font-size:var(--text-sm);color:var(--text-heading)}
.bart-side-card p{margin-top:8px;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--text-muted)}
.bart-side-card--cta{background:linear-gradient(160deg,var(--purple-700),var(--purple-800));border-color:transparent;box-shadow:0 20px 44px -20px rgba(107,63,196,.5)}
.bart-side-card--cta h4,.bart-side-card--cta p{color:rgba(255,255,255,.92)}
.bart-side-card--cta p{color:rgba(255,255,255,.72)}
.bart-share{display:flex;gap:10px;margin-top:12px}
.bart-share a{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-default);display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:var(--transition-base)}
@media (hover:hover){.bart-share a:hover{border-color:var(--purple-400);color:var(--purple-700);transform:translateY(-2px)}}
.bart-related{display:grid;gap:16px}
.bart-related a{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:start;text-decoration:none}
.bart-related a image-slot{width:88px;height:88px;border-radius:var(--radius-md);aspect-ratio:1/1;display:block;flex:none;box-shadow:0 8px 18px -10px rgba(46,33,69,.3)}
.bart-related a h5{font-size:var(--text-xs);font-weight:500;color:var(--text-heading);line-height:1.35}
.bart-related a .meta{margin-top:4px;font-size:var(--text-3xs);color:var(--text-muted)}
@media (max-width:960px){.bart-grid{grid-template-columns:1fr}.bart-side{position:static;grid-template-columns:1fr 1fr;display:grid}}
@media (max-width:640px){
  .bart-cover image-slot,.bart-cover>img{aspect-ratio:16/11}
  .bart-byline{padding:14px 16px}
  .bart-author{width:100%}
  .bart-meta{margin-top:10px}
  #bart-title{font-size:var(--text-2xl)!important}
  .bart-lede{margin-top:16px;font-size:var(--text-sm)}
  .bart-div{margin-top:18px}
  .bart-grid{margin-top:26px;gap:32px}
  .bart-body h2{margin-top:28px;padding-top:12px;font-size:var(--text-lg)}
  .bart-body h3{margin-top:16px}
  .bart-body p{margin-top:10px}
  .bart-prose figure{margin-top:16px}
  .bart-prose table{display:block;overflow-x:auto}
  .bart-prose .bart-promo{padding:16px 18px}
  .bart-items{gap:10px}
  .bart-item{padding:14px 16px 14px 46px}
  .bart-item .n{left:14px;top:14px;width:20px;height:20px;font-size:9px}
  .bart-side{grid-template-columns:1fr;display:grid;gap:14px}
  .bart-side-card{padding:16px 18px}
  .bart-side-card:nth-child(1),.bart-side-card:nth-child(2){padding:14px 16px}
  .bart-side-card:nth-child(1) p,.bart-side-card:nth-child(2) p{margin-top:4px}
  .bart-side-card:nth-child(1) h4,.bart-side-card:nth-child(2) h4{font-size:var(--text-xs)}
  .bart-share{margin-top:8px}
}
.ab-pill{position:relative;padding:22px 22px 24px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);border-top:2px solid var(--border-subtle);background:var(--surface-card,#fff);color:inherit;overflow:hidden;transition:border-color 320ms var(--ease-out),box-shadow 320ms var(--ease-out)}
.ab-pill::before{content:"";position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--blue-600);transition:width 420ms var(--ease-out)}
.ab-pill.in::before{width:38px}
.ab-pill .ic{color:var(--blue-600);transition:transform 320ms var(--ease-out)}
.ab-pill h4{margin-top:14px;font-size:var(--text-md);color:var(--text-heading)}
.ab-pill p{margin-top:8px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
@media (hover:hover){.ab-pill:hover::before{width:100%}.ab-pill:hover .ic{transform:translateY(-3px)}.ab-pill:hover{box-shadow:0 14px 30px rgba(46,33,69,.08)}}
.ab-steps{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ab-step{display:grid;gap:10px;text-align:left;padding:24px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);cursor:pointer;transition:border-color var(--dur,220ms) var(--ease,ease),box-shadow var(--dur,220ms) var(--ease,ease)}
.ab-step .n{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-circle,50%);background:var(--blue-50);color:var(--blue-600);font-family:var(--font-label);font-size:var(--text-2xs);font-weight:600}
.ab-step .k{font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--text-heading)}
.ab-step .b{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty;opacity:.55;transition:opacity var(--dur,220ms) var(--ease,ease)}
.ab-step.on{border-color:var(--blue-600);box-shadow:0 18px 40px rgba(46,33,69,.1)}
.ab-step.on .b{opacity:1}
.ab-step:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
/* Numbers strip — a slim band directly under the hero; figures count up and the
   four cells rise in sequence when the strip first appears. */
.numstrip{background:var(--purple-800);color:#fff;padding:26px 0}
.numstrip .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
.numstrip-k{font-family:var(--font-label);font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:rgba(255,255,255,.68);max-width:8ch;line-height:var(--leading-snug)}
/* Specialisation section is tuned to land inside one viewport — tighten the
   rhythm here rather than trimming copy. */
#specialisation{padding-block:clamp(40px,4.4vw,64px)}
/* Light background image + white-wash overlay behind the whole section. */
.ab-spec-bg{position:relative;overflow:hidden}
.ab-spec-img{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 30%;opacity:.14;filter:grayscale(1)}
.ab-spec-bg::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,var(--surface-subtle,#f5f4f7) 0%,color-mix(in oklab,var(--surface-subtle,#f5f4f7) 55%,transparent) 55%,var(--surface-subtle,#f5f4f7) 100%)}
.ab-spec-bg>.wrap{position:relative;z-index:1}
#specialisation .ab-cmp{margin-top:22px;gap:14px}
#specialisation .ab-cmp-panel{padding:clamp(22px,2.6vw,34px) clamp(22px,2.8vw,40px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:none;background:var(--surface-card,#fff)}
#specialisation .ab-cmp-vol{font-size:clamp(46px,6vw,86px)}
#specialisation .ab-cmp-bar{margin-top:14px}
#specialisation .note{margin:18px 0 0;padding:0 clamp(4px,.6vw,10px);max-width:100ch}
#specialisation .ab-pillars{margin-top:26px;gap:clamp(18px,2.4vw,36px)}
#specialisation .ab-pq{margin-top:18px;padding-top:14px}
.ab-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
/* Cells are visible by default; JS opts the strip into the staggered reveal, so a
   scroll observer that never fires can't leave the band blank. */
.ab-num{padding:0 clamp(14px,1.8vw,28px);border-left:1px solid rgba(255,255,255,.22);transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);transition-delay:calc(var(--i,0)*110ms)}
.ab-nums.stagger .ab-num{opacity:0;transform:translateY(12px)}
.ab-nums.stagger.in .ab-num{opacity:1;transform:none}
.ab-num:first-child{padding-left:0;border-left:0}
.ab-num .v{display:block;font-family:var(--font-display);font-size:clamp(26px,2.6vw,38px);line-height:1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.ab-num .l{display:block;margin-top:7px;font-size:var(--text-2xs);line-height:var(--leading-normal);color:rgba(255,255,255,.78);max-width:20ch}
@media (prefers-reduced-motion:reduce){.ab-num{opacity:1;transform:none;transition:none}}
/* Leadership — editorial spread: avatar tabs above, quote + bio + thumbnail below. */
.ab-ldr{margin-top:8px;display:grid;gap:22px}
.ab-ppl-switch{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);border-bottom:1px solid var(--border-subtle)}
.ab-ppl-switch button{position:relative;display:flex;align-items:center;gap:12px;text-align:left;padding:10px 2px 14px;border:0;background:none;cursor:pointer}
.ab-ppl-switch button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--purple-600);transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease-out)}
.ab-ppl-switch button.on::after{transform:scaleX(1)}
.ab-ppl-switch button .av{flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--purple-100,#e9defa);display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface-page,#fff),0 0 0 3px var(--border-subtle);transition:box-shadow 280ms var(--ease-out),filter 280ms var(--ease-out),opacity 280ms var(--ease-out);filter:grayscale(1);opacity:.75}
.ab-ppl-switch button .av img{width:100%;height:100%;object-fit:cover;object-position:center top}
.ab-ppl-switch button .av .fb{font-family:var(--font-display);font-size:var(--text-md);color:var(--purple-700)}
.ab-ppl-switch button.on .av{box-shadow:0 0 0 2px var(--surface-page,#fff),0 0 0 4px var(--purple-600);filter:none;opacity:1}
.ab-ppl-switch button .tx{display:grid;gap:1px}
.ab-ppl-switch button .nm{font-size:var(--text-sm);font-weight:600;color:var(--text-muted);transition:color 240ms var(--ease-out)}
.ab-ppl-switch button .rl{font-family:var(--font-label);font-size:var(--text-3xs,10px);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.ab-ppl-switch button.on .nm{color:var(--text-heading)}
@media (hover:hover){.ab-ppl-switch button:not(.on):hover .nm{color:var(--text-heading)}.ab-ppl-switch button:not(.on):hover .av{filter:none;opacity:1}}
.ab-ppl-switch button:focus-visible{outline:2px solid var(--purple-600);outline-offset:2px}
@media (max-width:640px){
  .ab-ppl-switch{gap:0;flex-wrap:nowrap}
  .ab-ppl-switch button{flex:1 1 0;min-width:0;padding-right:10px}
  .ab-ppl-switch button .tx{min-width:0}
  .ab-ppl-switch button .nm{font-size:var(--text-xs);line-height:1.25;white-space:normal;overflow-wrap:break-word}
}
.ab-ppl{display:grid;gap:clamp(20px,2.4vw,30px);animation:abFade 420ms var(--ease-out) both}
@keyframes abFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ab-ppl-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,44px);align-items:stretch}.ab-ppl-fig{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--neutral-100);min-height:clamp(300px,26vw,420px);box-shadow:0 16px 36px rgba(46,33,69,.12)}
.ab-ppl-fig .tag{position:absolute;left:12px;bottom:12px;padding:5px 11px;border-radius:var(--radius-pill,999px);background:rgba(20,14,30,.62);backdrop-filter:blur(6px);font-family:var(--font-label);font-size:var(--text-3xs,10px);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:#fff}
.ab-ppl-fig img,.ab-ppl-fig image-slot,.ab-ppl-video{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;border:0;object-fit:cover;object-position:center top}
.ab-ppl-play{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:var(--neutral-900,#1b1524);cursor:pointer}
.ab-ppl-play img{filter:brightness(.72)}
.ab-ppl-play .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--purple-600);box-shadow:0 14px 32px rgba(0,0,0,.35);transition:transform 260ms var(--ease-out)}
.ab-ppl-play .cap{position:absolute;left:16px;right:16px;bottom:14px;font-family:var(--font-label);font-size:var(--text-3xs,10px);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:#fff;text-align:left}
@media (hover:hover){.ab-ppl-play:hover .knob{transform:translate(-50%,-50%) scale(1.08)}}
.ab-ppl-copy{display:grid;gap:14px;align-content:start}
.ab-ppl-copy .ab-quote{margin-bottom:4px}
.ab-ppl-copy p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty;max-width:60ch}
.ab-quote{margin:0;padding-left:0;border-left:0;font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.5vw,20px);line-height:1.2;letter-spacing:-.012em;color:var(--text-heading);text-wrap:pretty}
@media (max-width:760px){.ab-ppl-body{grid-template-columns:1fr}.ab-ppl-fig{order:-1;aspect-ratio:auto;min-height:0;align-self:start}.ab-ppl-fig::before{content:"";display:block;padding-top:62.5%}}
/* Credentials read as a plain rule-divided stat row, not badge cards. */
.ab-chips{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,28px);padding-top:16px;border-top:1px solid var(--border-subtle)}
.ab-chips:has(>:nth-child(3)){flex-wrap:nowrap}
.ab-chips:has(>:nth-child(3))>div{flex:0 1 auto;min-width:0}
@media (max-width:900px){.ab-chips:has(>:nth-child(3)){flex-wrap:wrap}}
.ab-chips>div{display:grid;gap:2px;padding-right:clamp(18px,2.4vw,34px);border-right:1px solid var(--border-subtle)}
.ab-chips>div:last-child{padding-right:0;border-right:0}
.ab-chips dt{font-family:var(--font-display);font-size:var(--text-md);color:var(--text-heading);white-space:nowrap}
.ab-chips dd{margin:0;font-size:var(--text-2xs);color:var(--text-muted)}
.ab-chips:has(>:nth-child(3)) dd{white-space:normal;max-width:16ch}
/* Mission & vision — title on its own line, then the two bands stacked one below
   the other. Each band's disc sits half off its own left edge; simple, no overlap. */
#mission{padding-block:clamp(28px,3.2vw,44px)}
.ab-mv{display:grid;gap:0;--disc:clamp(96px,8vw,124px)}
.ab-mv-title{margin-bottom:clamp(22px,2.6vw,34px)}
.ab-mv-row+.ab-mv-row{margin-top:clamp(18px,2vw,26px)}
.ab-mv.roll .ab-mv-row{opacity:0;transform:translateX(-8%);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.ab-mv.roll .ab-mv-row.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ab-mv.roll .ab-mv-row{opacity:1;transform:none;transition:none}}
.ab-mv-band{position:relative;display:flex;align-items:center;gap:clamp(22px,2.6vw,36px);padding:clamp(20px,2.2vw,28px) clamp(24px,3vw,40px);border-radius:var(--radius-xl);background:color-mix(in oklab,var(--purple-600) 6%,#fff)}
.ab-mv-disc{position:relative;flex:none;width:var(--disc);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--purple-50);box-shadow:0 0 0 6px var(--surface-page,#fff),0 14px 30px rgba(46,33,69,.16)}
.ab-mv-disc .ic{color:var(--purple-600)}
.ab-mv-row-b .ab-mv-disc{background:var(--green-50)}
.ab-mv-row-b .ab-mv-disc .ic{color:var(--green-700)}
.ab-mv-copy{flex:1 1 auto;min-width:0}
.ab-mv-copy h3{font-family:var(--font-display);font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--text-heading)}
.ab-mv-copy p{margin-top:12px;font-family:var(--font-sans);font-weight:400;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty;max-width:70ch}
@media (max-width:640px){
  .ab-mv-band{flex-direction:column;align-items:flex-start}
  .ab-mv-disc{width:clamp(64px,18vw,84px)}
}

@media (hover:hover){.ab-step:hover{border-color:var(--blue-600)}}
@media (max-width:1100px){
  .ab-pillars{grid-template-columns:1fr 1fr}
  .numstrip .wrap{grid-template-columns:1fr;gap:16px}
  .numstrip-k{max-width:none}
  .ab-nums{grid-template-columns:1fr 1fr;row-gap:22px}
  .ab-num:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:980px){
  .ab-cmp-head{grid-template-columns:1fr;align-items:start;gap:18px}

  .ab-cmp-panel{grid-template-columns:1fr;gap:22px}
  .ab-cmp-body{padding-top:18px;border-top:1px solid var(--border-subtle)}
  .ab-ppl-body{grid-template-columns:1fr}
  /* 16:10 via a padding box, not aspect-ratio: Safari collapsed the stretched grid item to 0px,
     hiding both leader photos (the img is absolute, so nothing else gives it height). */
  .ab-ppl-fig{order:-1;aspect-ratio:auto;min-height:0;align-self:start}.ab-ppl-fig::before{content:"";display:block;padding-top:62.5%}
  .ab-steps{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ab-pillars{grid-template-columns:1fr}
  .ab-pq{grid-template-columns:1fr;gap:12px}
  .ab-pq blockquote{font-size:var(--text-sm)}
  .ab-pq figcaption{text-align:left;white-space:normal}
  .numstrip{padding:22px 0}
  .ab-nums{grid-template-columns:repeat(4,1fr);row-gap:0;column-gap:8px}
  .ab-num{padding:0 0 0 8px}
  .ab-num:nth-child(3){padding-left:8px;border-left:1px solid rgba(255,255,255,.22)}
  .ab-num .v{font-size:20px}
  .ab-num .l{margin-top:4px;font-size:10px;max-width:none}

}

/* ---------- Overview cards + section CTA: phone tier ---------- */
@media (max-width:860px){
  .ova{margin-top:18px;gap:20px}
  .ova-body{gap:20px}
  .ova-act .b{width:auto}
  .ova-cols>:is(p,.ova-card){padding:20px 16px 20px}
}
@media (max-width:430px){
  .ova-cols{gap:10px}
  .ova-cols>:is(p,.ova-card){font-size:var(--text-xs)}
}

/* ---------- Video thumbnail + play button (shared) ---------- */
.vthumb{position:relative;display:block;overflow:hidden;border-radius:var(--radius-md)}
.vthumb image-slot{display:block;aspect-ratio:16/9;transition:transform 460ms var(--ease-out)}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--purple-700);box-shadow:0 10px 26px -8px rgba(16,10,28,.5);transition:transform 260ms var(--ease-out),background 220ms}
.vplay .ic{margin-left:3px}
.vplay.lg{width:74px;height:74px;background:rgba(255,255,255,.96)}
.vplay.xl{width:88px;height:88px}
.vthumb.sm image-slot{aspect-ratio:1/1}
.vthumb.sm .vplay{width:30px;height:30px}
.vdur{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--radius-pill);background:rgba(16,10,28,.82);color:#fff;font-family:var(--font-label);font-size:var(--text-3xs);font-weight:600}
.vdur .ic{color:#fff}
.cat-pill{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;height:22px;padding:0 11px;border-radius:var(--radius-pill);background:color-mix(in oklab,var(--ac,var(--blue-600)) 94%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-family:var(--font-label);font-size:var(--text-3xs,10px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

@media (max-width:860px){
  .cat-pill{background:var(--ac,var(--blue-600));backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);height:24px}
}

/* ---------- Videos listing ---------- */
.vid-feat{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.vid-feat-card{position:relative;display:block;border-radius:var(--radius-2xl);overflow:hidden;text-decoration:none;box-shadow:0 30px 70px -24px rgba(46,33,69,.28)}
.vid-feat-card .vthumb{border-radius:0}
/* Same 16:10 frame for a real thumbnail as for the placeholder: an <img> with no reserved ratio
   grew the card when the YouTube thumbnail arrived and pushed the 'Latest' list down (CLS 0.2). */
.vid-feat-card .vthumb image-slot,.vid-feat-card .vthumb>img{aspect-ratio:16/10}
.vid-feat-card .vthumb>img{display:block;width:100%;height:auto;object-fit:cover}
@media (hover:hover){.vid-feat-card:hover .vthumb image-slot{transform:scale(1.035)}.vid-feat-card:hover .vplay{transform:translate(-50%,-50%) scale(1.08)}}
.vid-feat-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px;display:grid;gap:10px}
.vid-feat-cap::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,10,28,.9),rgba(16,10,28,.3) 58%,transparent);z-index:-1}
.vid-feat-cap h3{color:#fff;font-size:var(--text-2xl);line-height:1.26;text-wrap:pretty;max-width:26ch}
.vid-feat-cap p{color:rgba(255,255,255,.82);font-size:var(--text-sm);line-height:var(--leading-normal);max-width:52ch}
.vmeta{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);font-size:var(--text-2xs);color:var(--text-muted)}
.vid-feat-cap .vmeta{color:rgba(255,255,255,.9)}
.vid-feat-cap .vmeta .ic,.vmeta .ic{color:currentColor}
.vid-latest h3{font-size:var(--text-lg);color:var(--text-heading);padding-bottom:16px;border-bottom:1px solid var(--border-subtle)}
.vid-latest-list{margin-top:6px;display:grid;gap:2px}
.vid-latest-it{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;padding:14px 8px;margin:0 -8px;border-radius:var(--radius-md);text-decoration:none;transition:var(--transition-base)}
.vid-latest-it+.vid-latest-it{border-top:1px solid var(--border-subtle)}
@media (hover:hover){.vid-latest-it:hover{background:var(--surface-paper)}.vid-latest-it:hover h4{color:var(--purple-700)}.vid-latest-it:hover .vthumb image-slot{transform:scale(1.05)}}
.vid-latest-it h4{font-size:var(--text-sm);line-height:1.4;color:var(--text-heading);font-weight:500;transition:var(--transition-base)}
.vid-latest-it .meta{margin-top:6px;font-size:var(--text-3xs);color:var(--text-muted)}
.vid-latest-it .vplay{width:34px;height:34px}
.vid-latest-it .vplay .ic{width:13px;height:13px}
.vid-grid{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.vid-card{position:relative;display:grid;border-radius:var(--radius-2xl);overflow:hidden;text-decoration:none;background:var(--surface-card,#fff);border:1px solid var(--border-subtle);box-shadow:0 14px 34px -20px rgba(46,33,69,.18);transition:var(--transition-base)}
.vid-card .vthumb{border-radius:0}
@media (hover:hover){.vid-card:hover{box-shadow:0 24px 50px -20px rgba(46,33,69,.26);transform:translateY(-3px)}.vid-card:hover .vthumb image-slot{transform:scale(1.05)}.vid-card:hover .vplay{transform:translate(-50%,-50%) scale(1.08)}}
.vid-card-body{padding:18px 20px 22px;display:grid;gap:11px}
.vid-card h4{font-size:var(--text-md);color:var(--text-heading);line-height:1.34}
@media (max-width:860px){
  .vid-feat{grid-template-columns:1fr;gap:24px}
  .vid-grid{grid-template-columns:1fr;gap:18px}
  .vid-feat-cap{padding:18px;gap:8px}
  .vid-feat-cap h3{font-size:var(--text-lg)}
  .vid-feat-cap p{font-size:var(--text-xs);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .vid-latest-it{grid-template-columns:110px minmax(0,1fr)}
  .vid-latest h3{font-size:var(--text-md)}
  .vplay{width:42px;height:42px}
  .vplay .ic{width:16px!important;height:16px!important}
  .vplay.lg{width:56px;height:56px}
  .vplay.lg .ic{width:22px!important;height:22px!important}
}

/* ---------- Video description ---------- */
.vwatch-head{max-width:1120px;margin-inline:auto}
.vw-author{display:flex;align-items:center;gap:12px}
.vw-author .vw-avatar{width:44px;height:44px}
.vw-author-tx{display:grid}
.vw-author-tx .lbl{font-family:var(--font-label);font-size:var(--text-3xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.vw-author-tx .nm{font-family:var(--font-display);font-size:var(--text-md);color:var(--text-heading)}
.vw-author-tx .rl{font-size:var(--text-xs);color:var(--text-muted)}
.vwatch-head h1{margin-top:18px;font-size:var(--text-4xl);color:var(--text-heading);line-height:var(--leading-tight);text-wrap:pretty}
.vw-meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:18px}
.vw-meta span{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);font-size:var(--text-2xs);color:var(--text-muted)}
.vw-meta .ic{color:var(--purple-600)}
.vwatch-grid{margin-top:32px;max-width:1120px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.vplayer{position:relative;aspect-ratio:16/9;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:0 30px 70px -24px rgba(46,33,69,.3);border:1px solid var(--border-subtle);background:#100a1c}
/* The box holds its 16:9 shape itself, so swapping the poster for the YouTube player keeps the size. */
.vplayer>.yt-still{display:contents}
.vplayer>img,.vplayer>iframe,.vplayer>.yt-still>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.vplayer image-slot{display:block;aspect-ratio:16/9}
.vplayer-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(16,10,28,.28);border:none;cursor:pointer;transition:background 240ms}
.vplayer-play .vplay{position:static;transform:none}
@media (hover:hover){.vplayer-play:hover{background:rgba(16,10,28,.16)}.vplayer-play:hover .vplay{transform:scale(1.07)}}
.vplayer.playing .vplayer-play{background:#100a1c}
.vplayer.playing .vplay{display:none}
.vw-body{margin-top:26px;max-width:68ch}
.vw-body .vw-lede{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-heading);font-weight:500;text-wrap:pretty}
.vw-body p{margin-top:15px;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body)}
.vw-body h2{margin-top:34px;padding-top:16px;border-top:3px solid var(--purple-600);font-size:var(--text-xl);color:var(--text-heading)}
.vw-body ul{margin-top:14px;display:grid;gap:10px;list-style:none;padding:0}
.vw-body li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body)}
.vw-body li .b1{margin-top:3px;width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;background:color-mix(in oklab,var(--green-600) 16%,transparent);color:var(--green-700,#1a7a4a)}
.vw-body blockquote{margin:26px 0 0;padding:18px 22px;border-left:3px solid var(--purple-600);background:var(--surface-paper);border-radius:0 var(--radius-md) var(--radius-md) 0;font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--text-heading);text-wrap:pretty}
.vw-byline{margin-top:28px;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius-lg);background:var(--surface-paper)}
.vw-avatar,.tst-av{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:linear-gradient(150deg,var(--purple-500),var(--purple-700));color:#fff;font-family:var(--font-label);font-weight:600;font-size:var(--text-sm);overflow:hidden}
.vw-byline .nm{font-size:var(--text-sm);font-weight:600;color:var(--text-heading)}
.vw-byline .rl{margin-top:2px;font-size:var(--text-xs);color:var(--text-muted)}
.vwatch-side{position:sticky;top:calc(var(--chrome-h,116px) + 16px);display:grid;gap:18px}
.vw-related{margin-top:14px;display:grid;gap:14px}
.vw-rel{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;text-decoration:none}
.vw-rel h5{font-size:var(--text-xs);font-weight:500;color:var(--text-heading);line-height:1.35;transition:var(--transition-base)}
.vw-rel .meta{margin-top:5px;font-size:var(--text-3xs);color:var(--text-muted)}
@media (hover:hover){.vw-rel:hover h5{color:var(--purple-700)}.vw-rel:hover .vthumb image-slot{transform:scale(1.06)}}
@media (max-width:960px){.vwatch-grid{grid-template-columns:1fr;gap:28px}.vwatch-side{position:static;grid-template-columns:1fr 1fr;display:grid}}
@media (max-width:640px){
  .vwatch-head h1{font-size:var(--text-2xl)}
  .vw-meta{gap:12px 16px}
  .vw-body{margin-top:20px}
  .vw-body .vw-lede{font-size:var(--text-md)}
  .vw-body p{font-size:var(--text-sm);margin-top:12px}
  .vw-body h2{margin-top:24px;padding-top:12px;font-size:var(--text-lg)}
  .vw-body blockquote{font-size:var(--text-md);padding:14px 16px}
  .vwatch-side{grid-template-columns:1fr}
  .vw-related{margin-top:12px}
}

/* ---------- Testimonials listing ---------- */
.tst-feat{display:grid;grid-template-columns:.82fr 1fr;gap:0;border-radius:var(--radius-2xl);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-card,#fff);box-shadow:0 30px 70px -30px rgba(46,33,69,.24)}
.tst-feat-photo{position:relative;min-height:340px}
.tst-feat-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tst-feat-photo image-slot{display:block;width:100%;height:100%}
.tst-feat-body{padding:clamp(24px,3vw,44px);display:grid;align-content:center;gap:6px}
.tst-mk{font-family:var(--font-display);font-size:64px;line-height:.5;color:var(--purple-300);height:34px}
.tst-feat-q{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-heading);text-wrap:pretty}
.tst-who{margin-top:14px;display:grid;gap:2px}
.tst-who .nm{font-family:var(--font-display);font-size:var(--text-md);color:var(--text-heading)}
.tst-who .mt{font-family:var(--font-label);font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--purple-700)}
.tst-stars{display:inline-flex;gap:3px}
.tst-stars .ic{color:var(--rating-star)}
.tst-grid{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tst-card{position:relative;padding:26px 24px;border-radius:var(--radius-2xl);border:1px solid var(--border-subtle);border-top:3px solid var(--tc);background:var(--surface-card,#fff);box-shadow:0 14px 34px -22px rgba(46,33,69,.18);display:grid;gap:14px;align-content:start}
.tst-card-hd{display:flex;align-items:center;gap:12px}
.tst-av img{width:100%;height:100%;object-fit:cover}
.tst-av.sm{width:40px;height:40px;font-size:var(--text-xs)}
.tst-card-hd .nm{display:block;font-family:var(--font-display);font-size:var(--text-md);color:var(--text-heading)}
.tst-card-hd .mt{display:block;margin-top:2px;font-family:var(--font-label);font-size:var(--text-3xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.tst-q{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.tst-card.open .tst-q{-webkit-line-clamp:unset;display:block}
.tst-more{justify-self:start;padding:0;border:none;background:none;cursor:pointer;font-family:var(--font-label);font-size:var(--text-xs);font-weight:600;color:var(--tc)}
.tst-more:hover{text-decoration:underline}
.tst-reviews-head{margin-top:56px}
.tst-reviews{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tst-rev{padding:24px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);border-top:3px solid;background:var(--surface-card,#fff);box-shadow:0 12px 30px -22px rgba(46,33,69,.16);display:grid;gap:12px;align-content:start}
.tst-rev-hd{display:flex;align-items:center;gap:12px}
.tst-rev-hd .nm{display:block;font-weight:600;font-size:var(--text-sm);color:var(--text-heading)}
.tst-rev-hd .mt{display:block;margin-top:2px;font-size:var(--text-3xs);color:var(--text-muted)}
.tst-rev p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
@media (max-width:960px){.tst-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .tst-feat{grid-template-columns:1fr}
  .tst-feat-photo{min-height:240px}
  .tst-feat-q{font-size:var(--text-md)}
  .tst-grid{grid-template-columns:1fr;gap:16px}
  .tst-reviews{grid-template-columns:1fr}
  .tst-reviews-head{margin-top:40px}
}
@media (max-width:640px){
  .tst-card{padding:22px 20px}
  .tst-rev{padding:20px}
  .tst-q{-webkit-line-clamp:5}
}

/* ---------- Case studies listing (premium, blue/green only) ---------- */
.cs-feat{margin-bottom:38px}
.cs-feat-link{position:relative;display:grid;grid-template-columns:1.25fr 1fr;border-radius:var(--radius-2xl);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-card,#fff);text-decoration:none;box-shadow:0 24px 56px -30px rgba(46,33,69,.3);transition:var(--transition-base)}
@media (hover:hover){.cs-feat-link:hover{box-shadow:0 34px 70px -30px rgba(46,33,69,.4);transform:translateY(-3px)}.cs-feat-link:hover .cs-feat-media image-slot{transform:scale(1.04)}.cs-feat-link:hover .cs-feat-cta .ic{transform:translate(2px,-2px)}}
.cs-feat-media{position:relative;overflow:hidden}
.cs-feat-media image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform 500ms var(--ease-out)}
.cs-feat-badge{position:absolute;top:16px;left:16px;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--radius-pill);font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--cc);box-shadow:0 8px 20px -8px color-mix(in oklab,var(--cc) 70%,transparent)}
.cs-feat-badge .ic{color:#fff}
.cs-feat-body{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;gap:14px;border-left:4px solid var(--cc)}
.cs-feat-body .cs-cat{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:var(--text-2xs);font-weight:700;letter-spacing:.04em;color:var(--cc)}
.cs-feat-body .cs-dot{width:7px;height:7px;border-radius:var(--radius-circle);background:var(--cc)}
.cs-feat-body h3{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:var(--text-heading);text-wrap:pretty}
.cs-feat-body>p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
.cs-feat-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:2px}
.cs-feat-meta span{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-2xs);font-weight:500;color:var(--text-muted)}
.cs-feat-meta .ic{color:var(--cc)}
.cs-feat-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:var(--text-xs);font-weight:700;color:var(--cc)}
.cs-feat-cta .ic{color:var(--cc);transition:transform .22s var(--ease-out)}
@media (max-width:860px){.cs-feat-link{grid-template-columns:1fr}.cs-feat-media{aspect-ratio:16/9}.cs-feat-body{border-left:0;border-top:4px solid var(--cc)}}
.cs-grid{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cs-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 28px 26px;border-radius:var(--radius-2xl);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);box-shadow:0 1px 2px rgba(46,33,69,.05);overflow:hidden;transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),border-color .32s var(--ease-out)}
.cs-card::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;border-radius:0 3px 3px 0;background:var(--cc);opacity:0;transform:scaleY(.35);transform-origin:top;transition:opacity .32s var(--ease-out),transform .5s var(--ease-out)}
@media (hover:hover){.cs-card:hover{transform:translateY(-4px);box-shadow:0 26px 56px -26px rgba(46,33,69,.26);border-color:color-mix(in oklab,var(--cc) 42%,var(--border-subtle))}.cs-card:hover::before{opacity:1;transform:scaleY(1)}}
.cs-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cs-cat{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--font-label);font-size:var(--text-2xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--cc)}
.cs-dot{width:7px;height:7px;flex:none;border-radius:var(--radius-circle);background:var(--cc)}
.cs-num{font-family:var(--font-display);font-size:var(--text-4xl);line-height:.85;font-weight:600;color:var(--cc);opacity:.15}
.cs-card h3{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.25;color:var(--text-heading);text-wrap:pretty}
.cs-ex{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.cs-ft{margin-top:auto;padding-top:18px;border-top:1px solid var(--border-subtle);display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;color:var(--cc);text-decoration:none}
.cs-ft .ic{transition:transform .22s var(--ease-out)}
@media (hover:hover){.cs-card:hover .cs-ft .ic{transform:translate(3px,-3px)}}
.cs-cta{margin-top:44px;border-radius:var(--radius-2xl);position:relative;overflow:hidden;background:linear-gradient(120deg,var(--blue-700),var(--green-700));box-shadow:0 24px 54px -26px rgba(37,99,235,.42)}
.cs-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 100% 0,rgba(255,255,255,.16),transparent 60%);pointer-events:none}
.cs-cta-in{position:relative;padding:clamp(26px,3vw,42px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cs-cta h3{color:#fff;font-size:var(--text-xl)}
.cs-cta p{margin-top:8px;font-size:var(--text-sm);color:rgba(255,255,255,.82);max-width:52ch;line-height:var(--leading-normal)}
.cs-more{display:none;justify-content:center;margin-top:34px}
.cs-more.is-shown{display:flex}
.cs-more.loading #cs-more-btn{display:none}
.cs-spin{display:none;width:32px;height:32px;border-radius:var(--radius-circle);border:3px solid color-mix(in oklab,var(--blue-600) 20%,transparent);border-top-color:var(--blue-600);border-right-color:var(--green-600);animation:csSpin .7s linear infinite}
.cs-more.loading .cs-spin{display:block}
@keyframes csSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cs-spin{animation-duration:1.4s}}
@media (max-width:960px){.cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.cs-grid{grid-template-columns:1fr;gap:16px}.cs-cta-in{flex-direction:column;align-items:flex-start}}

/* ---------- Case study detail (article + figures) ---------- */
.cst-head{max-width:820px}
@media (min-width:861px) and (max-width:1099px){.cst-head{max-width:min(820px,calc(100% - 250px))}}
.cst-head .cs-cat{margin-top:0}
.cst-head h1{margin-top:14px;font-family:var(--font-display);font-size:clamp(30px,4vw,46px);line-height:1.12;color:var(--text-heading);text-wrap:pretty}
.cst-summary{margin-top:20px;font-size:20px;line-height:var(--leading-relaxed);color:var(--text-heading);font-weight:500;text-wrap:pretty}
.cst-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
/* Wraps instead of widening the page ("By Thoracic & Musculoskeletal Oncology team" at 320). */
.cst-meta>span{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:var(--radius-pill);background:var(--surface-paper);border:1px solid var(--border-subtle);font-size:var(--text-xs);font-weight:600;color:var(--text-heading);max-width:100%;line-height:1.35}
.cst-meta .ic{color:var(--cc,var(--blue-600))}
.cst-meta>span .ic{flex:none}
.cst-cover{margin:38px 0 0;display:grid;gap:14px}
.cst-cover image-slot{aspect-ratio:21/8;max-height:380px;display:block;border-radius:var(--radius-2xl);overflow:hidden;border:1px solid var(--border-subtle);box-shadow:0 34px 70px -34px rgba(46,33,69,.42)}
.cst-cover figcaption{display:flex;gap:9px;align-items:flex-start}
.cst-cover figcaption::before{content:"";flex:none;width:18px;height:2px;margin-top:.62em;background:var(--cc,var(--blue-600))}
.cst-cover figcaption{font-size:var(--text-2xs);font-style:italic;color:var(--text-muted);padding-left:4px}
.cst-cover.is-nocap figcaption{display:none}
.cst-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.cst-article{min-width:0}
.cst-block{padding-bottom:8px}
.cst-block + .cst-block{margin-top:32px}
.cst-block h2{font-family:var(--font-display);font-size:clamp(22px,2.3vw,28px);color:var(--text-heading);position:relative;padding-left:20px;line-height:1.2}
.cst-block h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:4px;border-radius:2px;background:linear-gradient(var(--cc),color-mix(in oklab,var(--cc) 35%,transparent))}
.cst-block p{margin-top:15px;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty;max-width:70ch}
.cst-block > p:first-of-type{color:var(--text-heading)}
.cst-block--core{margin-top:46px;padding:34px 38px 36px;border-radius:var(--radius-2xl);background:linear-gradient(135deg,color-mix(in oklab,var(--cc) 9%,var(--surface-paper)),var(--surface-paper) 62%);border:1px solid color-mix(in oklab,var(--cc) 24%,var(--border-subtle));box-shadow:0 28px 58px -38px color-mix(in oklab,var(--cc) 70%,transparent);position:relative;overflow:hidden}
.cst-block--core::after{content:"\201D";position:absolute;top:2px;right:28px;font-family:var(--font-display);font-size:104px;line-height:1;color:color-mix(in oklab,var(--cc) 18%,transparent);pointer-events:none}
.cst-block--core h2{padding-left:0;font-size:var(--text-2xs);font-family:var(--font-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cc)}
.cst-block--core h2::before{display:none}
.cst-block--core p{margin-top:12px;position:relative;font-size:20px;line-height:var(--leading-relaxed);color:var(--text-heading);font-weight:500}
.cst-fig{margin:24px 0 0;display:grid;gap:11px}
.cst-fig image-slot{aspect-ratio:var(--ar,4/3);display:block;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-paper);box-shadow:0 20px 44px -30px rgba(46,33,69,.4);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
@media (hover:hover){.cst-fig:hover image-slot{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(46,33,69,.5)}}
.cst-fig figcaption{display:flex;gap:9px;align-items:flex-start;font-size:var(--text-2xs);font-style:italic;color:var(--text-muted);line-height:1.5}
.cst-fig figcaption::before{content:"";flex:none;width:16px;height:2px;margin-top:.62em;background:var(--cc,var(--blue-600));font-style:normal}
.cst-fig--single{max-width:520px}
.cst-figrow{margin-top:22px;display:grid;gap:18px}
.cst-figrow.is-multi{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start}
.cst-figrow .cst-fig{margin:0}
.cst-side{position:sticky;top:calc(var(--chrome-h,116px) + 20px);display:grid;gap:16px}
.cst-side-card{position:relative;padding:24px 24px 26px;border-radius:var(--radius-xl);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);box-shadow:0 20px 44px -30px rgba(46,33,69,.28)}
.cst-side-card h4{font-size:var(--text-sm);font-weight:700;color:var(--text-heading)}
.cst-side-card:has(.cst-facts) h4{font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cc,var(--blue-700));padding-bottom:14px;border-bottom:1px solid var(--border-subtle)}
.cst-side-card--cta{background:var(--surface-paper);border-color:var(--border-subtle)}
.cst-side-card--cta h4{font-weight:500}
.cst-side-card--cta p{margin-top:8px;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--text-muted)}
.cst-facts{margin-top:4px;display:grid}
.cst-facts div{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--border-subtle)}
.cst-facts div:last-child{border-bottom:0;padding-bottom:0}
.cst-facts dt{flex:none;font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.cst-facts dt::after{content:none}
.cst-facts dd{font-family:var(--font-display);font-size:var(--text-md);font-weight:500;color:var(--text-heading);line-height:1.35;text-wrap:pretty}
.cst-disc{font-size:var(--text-2xs);line-height:var(--leading-relaxed);color:var(--text-muted);padding:0 4px}
.cst-more-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.cst-more-head h2{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--text-heading)}
@media (max-width:960px){.cst-layout{grid-template-columns:1fr;gap:36px}.cst-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.cst-disc{grid-column:1/-1}}
@media (max-width:600px){.cst-side{grid-template-columns:1fr}.cst-cover image-slot{aspect-ratio:16/9}}

/* ---------- Research listing ---------- */
.rs-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 32px;margin-bottom:16px}
.rs-cgroup{display:grid;gap:9px}
.rs-sortlbl{font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
#rs-doctor,#rs-cat{display:inline-block}
#rs-doctor .dd-menu{max-height:320px;overflow-y:auto}
/* Desktop-only widths: unscoped, they came after (and beat) the ≤860 full-width rule, so on
   phones the doctor menu stuck out past the right edge of the screen. */
@media (min-width:861px){
  #rs-doctor .dd-menu{min-width:230px;width:max-content;max-width:300px}
  #rs-cat .dd-menu{min-width:230px;width:max-content;max-width:300px}
}
#rs-doctor .dd-btn,#rs-cat .dd-btn{border:1.5px solid var(--blue-600);background:color-mix(in oklab,var(--blue-600) 8%,var(--surface-card,#fff));color:var(--blue-700);font-weight:700;box-shadow:0 8px 20px -12px color-mix(in oklab,var(--blue-700) 60%,transparent)}
#rs-doctor .dd-btn::after,#rs-cat .dd-btn::after{border-right-color:var(--blue-600)!important;border-bottom-color:var(--blue-600)!important}
@media (hover:hover){#rs-doctor .dd-btn:hover,#rs-cat .dd-btn:hover{background:color-mix(in oklab,var(--blue-600) 14%,var(--surface-card,#fff))}}
.rs-count{margin:6px 0 24px;font-size:var(--text-xs);font-weight:600;color:var(--text-muted)}
.rs-grid{display:grid;grid-template-columns:1fr;gap:18px}
.rs-card{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;padding:24px;border-radius:var(--radius-2xl);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);text-decoration:none;overflow:hidden;transition:var(--transition-base)}
.rs-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cc);opacity:0;transition:opacity .22s var(--ease-out)}
@media (hover:hover){.rs-card:hover{transform:translateY(-4px);box-shadow:0 26px 56px -26px rgba(46,33,69,.26);border-color:color-mix(in oklab,var(--cc) 42%,var(--border-subtle))}.rs-card:hover::before{opacity:1}.rs-card:hover .rs-more .ic{transform:translate(2px,-2px)}}
.rs-cover image-slot{aspect-ratio:3/4;display:block;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-paper);box-shadow:0 14px 30px -20px rgba(46,33,69,.4)}
.rs-card-main{display:flex;flex-direction:column;gap:11px;min-width:0}
.rs-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rs-type{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);font-size:var(--text-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cc)}
.rs-type .ic{color:var(--cc)}
.rs-year{font-family:var(--font-display);font-size:var(--text-md);font-weight:600;color:var(--text-muted)}
.rs-card h3{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.28;color:var(--text-heading);text-wrap:pretty}
.rs-abs{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rs-card-foot{margin-top:auto;padding-top:15px;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:6px}
.rs-authors{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-xs);font-weight:600;color:var(--text-heading)}
.rs-authors .ic{color:var(--text-muted);flex:none}
.rs-journal{font-size:var(--text-2xs);font-style:italic;color:var(--text-muted)}
.rs-more{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);font-size:var(--text-xs);font-weight:700;color:var(--cc)}
.rs-more .ic{color:var(--cc);transition:transform .22s var(--ease-out)}
.rs-card-cat{padding:4px 11px;border-radius:var(--radius-pill);font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.05em;color:var(--cc);background:color-mix(in oklab,var(--cc) 10%,transparent);white-space:nowrap}
/* Gallery tiles — presentations, abstracts, projects */
.rp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.rp-tile{display:flex;flex-direction:column;border-radius:var(--radius-xl);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);overflow:hidden;transition:var(--transition-base)}
@media (hover:hover){.rp-tile:hover{transform:translateY(-4px);box-shadow:0 24px 52px -28px rgba(46,33,69,.28);border-color:color-mix(in oklab,var(--cc) 40%,var(--border-subtle))}}
.rp-tile-cover{position:relative;background:var(--surface-paper)}
.rp-tile-cover image-slot{aspect-ratio:4/3;display:block}
.rp-tile-badge{position:absolute;top:12px;left:12px;padding:4px 11px;border-radius:var(--radius-pill);font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:color-mix(in oklab,var(--cc) 90%,#000)}
.rp-tile-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px}
.rp-tile-cat{align-self:flex-start;font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.05em;color:var(--cc)}
.rp-tile-body h4{font-family:var(--font-display);font-size:var(--text-md);line-height:1.3;color:var(--text-heading);text-wrap:pretty}
.rp-tile-venue{display:flex;gap:8px;align-items:flex-start;font-size:var(--text-2xs);line-height:1.5;color:var(--text-muted)}
.rp-tile-venue .ic{flex:none;margin-top:.25em;color:var(--cc)}
@media (max-width:960px){.rp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.rs-card{grid-template-columns:110px minmax(0,1fr);gap:18px;padding:18px}}
@media (max-width:600px){.rp-tiles{grid-template-columns:1fr}.rs-card{grid-template-columns:1fr}.rs-cover image-slot{aspect-ratio:16/9;max-height:180px}}

/* ---------- Research paper detail ---------- */
.rp-head{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.rp-head-main{max-width:none;min-width:0}
.rp-cover{margin:0;display:grid;gap:10px;width:170px;justify-self:start}
.rp-tags{display:flex;flex-wrap:wrap;gap:8px}
.rp-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-pill);font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-paper)}
.rp-tag--cat{color:var(--blue-700);background:var(--blue-50,color-mix(in oklab,var(--blue-600) 10%,transparent))}
.rp-head h1{margin-top:16px;font-family:var(--font-display);font-size:clamp(26px,3.4vw,40px);line-height:1.16;color:var(--text-heading);text-wrap:pretty}
.rp-authors{margin-top:18px;display:inline-flex;align-items:center;gap:9px;font-size:var(--text-sm);font-weight:600;color:var(--text-heading)}
.rp-authors .ic{color:var(--blue-600)}
.rp-meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--text-xs);color:var(--text-muted)}
.rp-meta span{display:inline-flex;align-items:center;gap:7px}
.rp-meta .ic{color:var(--text-muted)}
.rp-citebar{margin-top:20px;padding-top:18px;border-top:1px solid var(--border-subtle);display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.rp-cite-item{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-xs);color:var(--text-muted)}
.rp-cite-item em{font-style:italic;color:var(--text-heading);font-weight:500}
.rp-cite-item .ic{color:var(--blue-600)}
.rp-cite-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:var(--text-xs);font-weight:700;color:var(--blue-700)}
.rp-cite-link .ic{color:var(--blue-600);transition:transform .22s var(--ease-out)}
@media (hover:hover){.rp-cite-link:hover .ic{transform:translate(2px,-2px)}}
.rp-side-card--related h4{font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-700)}
.rp-grid{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.rp-cover{margin:0;display:grid;gap:10px;width:170px}
.rp-cover image-slot{aspect-ratio:1/1;display:block;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-paper);box-shadow:0 18px 40px -26px rgba(46,33,69,.42)}
.rp-cover figcaption{font-size:var(--text-3xs);font-style:italic;color:var(--text-muted);line-height:1.45}
.rp-pub-btn{margin-top:24px}
.rp-abstract{position:relative;padding:22px 24px;border-radius:var(--radius-xl);background:var(--surface-paper);border-left:3px solid var(--blue-600)}
.rp-abstract-lbl{font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-700)}
.rp-abstract p{margin-top:9px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-heading);text-wrap:pretty}
.rp-body h2{margin-top:36px;padding-top:20px;border-top:1px solid var(--border-subtle);font-family:var(--font-display);font-size:var(--text-xl);color:var(--text-heading)}
.rp-body p{margin-top:12px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty;max-width:68ch}
.rp-body ul{margin:12px 0 0;padding:0;display:grid;gap:10px;list-style:none}
.rp-body ul li{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.rp-body ul li .b1{flex:none;margin-top:3px;width:18px;height:18px;border-radius:50%;background:var(--green-50,color-mix(in oklab,var(--green-600) 12%,transparent));color:var(--green-600);display:flex;align-items:center;justify-content:center}
.rp-side{position:sticky;top:calc(var(--chrome-h,116px) + 20px);display:grid;gap:16px}
.rp-side-card{padding:22px 22px 24px;border-radius:var(--radius-xl);border:1px solid var(--border-subtle);background:var(--surface-card,#fff)}
.rp-side-card h4{font-size:var(--text-sm);font-weight:700;color:var(--text-heading)}
.rp-side-card--cta{background:var(--surface-paper)}
.rp-side-card--cta p{margin-top:8px;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--text-muted)}
.rp-cite{margin-top:14px;display:grid;gap:11px}
.rp-cite div{display:grid;gap:3px}
.rp-cite dt{font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.rp-cite dd{font-size:var(--text-xs);font-weight:500;color:var(--text-heading);line-height:var(--leading-snug);word-break:break-word}
.rp-related{margin-top:14px;display:grid;gap:12px}
.rp-rel{position:relative;display:grid;gap:6px;padding:16px 16px 16px 18px;border-radius:var(--radius-lg);border:1px solid color-mix(in oklab,var(--blue-600) 32%,var(--border-subtle));background:linear-gradient(135deg,color-mix(in oklab,var(--blue-600) 12%,var(--surface-card,#fff)),var(--surface-card,#fff) 78%);box-shadow:0 12px 26px -18px color-mix(in oklab,var(--blue-700) 60%,transparent);text-decoration:none;overflow:hidden;transition:var(--transition-base)}
.rp-rel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue-600)}
.rp-rel-src{display:flex;align-items:center;gap:6px;font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-700)}
.rp-rel-src .ic{color:var(--blue-600)}
.rp-rel h5{font-size:var(--text-sm);line-height:1.32;color:var(--text-heading);font-weight:500;text-wrap:pretty}
.rp-rel-j{font-size:var(--text-2xs);font-style:italic;color:var(--text-muted);line-height:1.45}
@media (hover:hover){.rp-rel:hover{border-color:var(--blue-600);background:linear-gradient(135deg,color-mix(in oklab,var(--blue-600) 18%,var(--surface-card,#fff)),var(--surface-card,#fff) 70%);box-shadow:0 20px 40px -20px color-mix(in oklab,var(--blue-700) 70%,transparent);transform:translateY(-3px)}.rp-rel:hover h5{color:var(--blue-700)}.rp-rel:hover .rp-rel-src .ic{transform:translate(2px,-2px)}}
.rp-rel-src .ic{transition:transform .22s var(--ease-out)}
@media (max-width:960px){.rp-grid{grid-template-columns:1fr;gap:36px}.rp-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.rp-side-card:last-child{grid-column:1/-1}}
@media (max-width:700px){.rp-head{grid-template-columns:1fr;gap:22px}.rp-cover{width:140px}}
@media (max-width:600px){.rp-side{grid-template-columns:1fr}}

/* ---------- Media (press coverage + clippings) ---------- */
.md-subhead{margin-bottom:22px}
.md-kick{display:inline-block;font-family:var(--font-label);font-size:var(--text-2xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-700)}
.md-subhead p{margin-top:8px;font-size:var(--text-sm);color:var(--text-muted)}
.md-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.md-card{display:flex;flex-direction:column;border-radius:var(--radius-2xl);border:1px solid var(--border-subtle);background:var(--surface-card,#fff);overflow:hidden;text-decoration:none;transition:var(--transition-base)}
@media (hover:hover){.md-card:hover{transform:translateY(-4px);box-shadow:0 26px 56px -26px rgba(46,33,69,.26);border-color:color-mix(in oklab,var(--cc) 42%,var(--border-subtle))}.md-card:hover .md-read .ic{transform:translate(2px,-2px)}}
/* Coverage with no article link yet renders as a plain card: no "Read coverage", no hover lift. */
.md-card:not(a) .md-read{display:none}
@media (hover:hover){.md-card:not(a):hover{transform:none;box-shadow:none;border-color:var(--border-subtle)}}
.md-card-shot{position:relative}
.md-card-shot image-slot{aspect-ratio:16/10;display:block}
.md-card-shot>img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
/* A lone featured story spans the row: photo left, text right (from 640px). */
@media (min-width:640px){
  .md-feat>.md-card:only-child{grid-column:1/-1;flex-direction:row}
  .md-feat>.md-card:only-child>.md-card-shot{flex:0 0 52%}
  .md-feat>.md-card:only-child .md-card-shot>img,.md-feat>.md-card:only-child .md-card-shot image-slot{height:100%}
  .md-feat>.md-card:only-child>.md-card-body{flex:1;justify-content:center;padding:28px 34px}
}
.md-type{position:absolute;top:12px;left:12px;padding:4px 11px;border-radius:var(--radius-pill);font-family:var(--font-label);font-size:var(--text-3xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:color-mix(in oklab,var(--cc) 90%,#000);backdrop-filter:blur(4px)}
.md-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px}
.md-card-out{display:flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:var(--text-2xs);font-weight:700;color:var(--text-heading);letter-spacing:.02em}
.md-dot{width:7px;height:7px;flex:none;border-radius:var(--radius-circle)}
.md-date{margin-left:auto;font-weight:500;color:var(--text-muted);letter-spacing:0}
.md-card h3{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.26;color:var(--text-heading);text-wrap:pretty}
.md-card p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.md-read{margin-top:2px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:var(--text-xs);font-weight:700;color:var(--cc)}
.md-read .ic{color:var(--cc);transition:transform .22s var(--ease-out)}
.md-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.md-clip{display:flex;flex-direction:column;gap:11px;padding:0;border:0;background:none;text-align:left;cursor:pointer;font:inherit}
.md-clip-shot{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-paper);transition:var(--transition-base)}
.md-clip-shot image-slot{aspect-ratio:3/4;display:block}
/* A scanned clipping is shown whole on the paper tile — never cropped. */
.md-clip-shot>img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;object-position:center top}
.md-clip-zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--blue-900,#0b2a4a) 55%,transparent);color:#fff;opacity:0;transition:opacity .2s var(--ease-out)}
.md-clip-zoom .ic{color:#fff}
@media (hover:hover){.md-clip:hover .md-clip-shot{border-color:var(--blue-300,color-mix(in oklab,var(--blue-600) 40%,var(--border-subtle)));box-shadow:0 18px 40px -22px rgba(46,33,69,.3)}.md-clip:hover .md-clip-zoom{opacity:1}}
.md-clip:focus-visible .md-clip-zoom{opacity:1}
.md-clip-cap{display:grid;gap:2px}
.md-clip-cap strong{font-family:var(--font-label);font-size:var(--text-2xs);font-weight:700;color:var(--text-heading)}
.md-clip-cap span{font-size:var(--text-3xs);color:var(--text-muted);line-height:1.4}
@media (max-width:960px){.md-feat{grid-template-columns:1fr;gap:18px}.md-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.md-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
/* Lightbox */
body.md-lb-open{overflow:hidden}
.md-lightbox{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,52px);background:color-mix(in oklab,var(--purple-950,#160c26) 78%,transparent);backdrop-filter:blur(6px)}
.md-lightbox.on{display:flex;animation:mdFade .2s var(--ease-out)}
@keyframes mdFade{from{opacity:0}to{opacity:1}}
.md-lb-stage{width:min(560px,100%)}
.md-lb-frame{display:grid;gap:14px}
.md-lb-paper{aspect-ratio:3/4;border-radius:var(--radius-lg);background:linear-gradient(160deg,#fff,#f3f0ea);border:1px solid rgba(255,255,255,.25);box-shadow:0 40px 90px -30px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:clamp(24px,5vw,48px);text-align:center}
.md-lb-out{font-family:var(--font-label);font-size:var(--text-lg);font-weight:700;letter-spacing:.03em;color:var(--text-heading)}
/* Real scan: the paper frame drops its padding/placeholder styling and lets the image fill it. */
.md-lb-paper.md-lb-has-shot{padding:0;aspect-ratio:auto;max-height:78vh;background:#fff}
.md-lb-paper.md-lb-has-shot img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:var(--radius-lg)}
.md-lb-ttl{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.25;color:var(--text-heading)}
.md-lb-note{margin-top:6px;font-size:var(--text-2xs);color:var(--text-muted);max-width:34ch;line-height:var(--leading-relaxed)}
.md-lb-cap{text-align:center;font-size:var(--text-xs);color:rgba(255,255,255,.9)}
.md-lb-cap strong{color:#fff}
.md-lb-x{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:var(--radius-circle);border:0;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-base)}
.md-lb-x .ic{color:#fff}
.md-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:var(--radius-circle);border:0;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-base)}
.md-lb-nav .ic{color:#fff}
.md-lb-prev{left:clamp(10px,3vw,34px)}
.md-lb-next{right:clamp(10px,3vw,34px)}
@media (hover:hover){.md-lb-x:hover,.md-lb-nav:hover{background:rgba(255,255,255,.28)}}
@media (max-width:600px){.md-lb-nav{width:44px;height:44px}.md-lb-prev{left:8px}.md-lb-next{right:8px}}

/* ---------- Banner height (site-wide, last word) ----------
   Every banner grows by the pinned bar's MEASURED height and reserves that same
   height as top padding, so the copy block sits lower on the banner and the top
   row — the eyebrow — can never ride under the bar. Height and inset move by the
   same amount, so the content area inside each banner is unchanged: the banner
   gets taller, the content moves down, nothing is squeezed.
   --chrome-h is measured by shared.js; the 116px fallback covers pre-JS paint.
   Phones set --chrome-h to 0 and the bar scrolls with the page, so all of this
   collapses to the original geometry below 861px — no mobile change. */
@media (min-width:861px){
  /* The bar is sticky now, so banners no longer have to compensate for an overlapping
     bar — this is purely the taller-banner treatment: every banner gains --banner-push
     in height and the same amount as top padding, so the copy sits lower and nothing
     inside is squeezed. A fixed value, not a measurement: it can't drift. */
  :root{--banner-push:64px}
  .hero{min-height:calc(clamp(620px,84svh,920px) + var(--banner-push))}
  .hero>.in,.chero>.in,.chero>.wrap{padding-top:calc(var(--banner-push) + clamp(48px,5vw,80px))}
  .hero-tall,.chero-tall{min-height:calc(min(700px,100svh - var(--chrome-off,162px)) + var(--banner-push))}
  .hero-static{min-height:calc(clamp(560px,72svh,760px) + var(--banner-push))}
  /* Shorter desktops: still fold-aware, but taller than the bar's own height. */
  @media (max-height:900px){
    .hero-static,.chero-tall,.hero-tall{min-height:calc(100svh - var(--chrome-off,162px) + var(--banner-push) * .5)}
  }
  /* Laptops and tablets (861–1599px — 1366, 1440, 1536 and the iPad range) are WIDE but
     SHORT: at 1536x864 the copy block plus the stats row is taller than the fold, so the
     stats got cut off at the bottom. The banner can't grow into space that isn't there,
     so shift the whole copy block up instead — a smaller push and a tighter top padding
     buy back ~70px, which is exactly the stats row. Above 1600px nothing changes. */
  @media (max-width:1599px){
    :root{--banner-push:28px}
    .hero>.in,.chero>.in,.chero>.wrap{padding-top:calc(var(--banner-push) + clamp(32px,3vw,52px))}
    .hero{min-height:clamp(560px,calc(100svh - var(--chrome-off,162px)),820px)}
    .hero .copy{row-gap:0}
    .hero .copy .lede{margin-top:14px}
    .hero .cta{margin-top:26px}
    .hero .stats{margin-top:30px;padding-top:26px}
  }
  /* Genuinely short laptops (≤820px tall, e.g. 1366x768): trim once more. */
  @media (max-width:1599px) and (max-height:820px){
    :root{--banner-push:12px}
    .hero>.in,.chero>.in,.chero>.wrap{padding-top:calc(var(--banner-push) + 28px)}
    .hero .cta{margin-top:20px}
    .hero .stats{margin-top:22px;padding-top:20px}
  }
  /* Home banner, short windows (≤820px of viewport — a 1536/1556x864 screen leaves ~730px once the
     browser and taskbar take theirs, 1366x768 ~625px). The copy, stats row and slide dots must all
     sit inside the first screen: the banner is capped to the space under the bar (no 560px floor),
     spacing tightens, and the headline scales with the window's height. The scroll hint would sit
     on the dots there, so it goes. Taller windows are unchanged. */
  @media (max-height:820px){
    .hero{min-height:max(420px,calc(100svh - var(--chrome-off,162px)))}
    .hero>.in{padding-top:20px;padding-bottom:18px}
    .hero :is(h1,h2){margin-top:12px;font-size:clamp(34px,7svh,var(--text-5xl))}
    .hero .copy .lede{margin-top:10px;font-size:min(18px,2.4svh)}
    .hero .cta{margin-top:16px}
    .hero .stats{margin-top:14px;padding-top:14px}
    .hero .dots{margin-top:10px}
    .hero .down{display:none}
  }
  @media (max-height:660px){
    .hero>.in{padding-top:14px;padding-bottom:12px}
    .hero :is(h1,h2){margin-top:10px;font-size:clamp(30px,6.4svh,var(--text-5xl))}
    .hero .copy .lede{margin-top:8px;font-size:max(14px,2.3svh)}
    .hero .cta{margin-top:14px}
    .hero .stats{margin-top:12px;padding-top:12px}
    .hero .dots{margin-top:8px}
  }
  /* A heading with a kept phrase (.hl-keep): 861–1279px is where the text column (412–555px) is
     narrower than a ~25-character line at full size — the headline scales with the width just
     enough to keep it clear of the photo, never above its usual size (or its short-window size). */
  @media (max-width:1279px){
    .hero :is(h1,h2):has(.hl-keep){font-size:min(var(--text-5xl),4.4vw)}
  }
  @media (max-width:1279px) and (max-height:820px){
    .hero :is(h1,h2):has(.hl-keep){font-size:min(clamp(34px,7svh,var(--text-5xl)),4.4vw)}
  }
  @media (max-width:1279px) and (max-height:660px){
    .hero :is(h1,h2):has(.hl-keep){font-size:min(clamp(30px,6.4svh,var(--text-5xl)),4.4vw)}
  }
  /* Light-banner pages (doctor profile, videos, locations, media, FAQs, blogs,
     case studies, research, testimonials) have no dark banner — their first
     section opens straight onto a section heading, so THAT eyebrow is the one
     riding up against the bar. Push the first section after the crumb trail down
     by half the bar's height. The templates set padding-top inline (32px), which
     only an !important can outrank; dark banners are excluded because they handle
     their own inset above. */
  main>.crumbbar+section:not(.hero):not(.chero):not(.phero),
  main>section:first-child:not(.hero):not(.chero):not(.phero){padding-top:calc(var(--banner-push) * .5 + 32px)!important}
  /* The doctor profile's paper banner has no padding of its own — give it the
     same inset without an !important fight. */
  main>.crumbbar+.phero{padding-top:calc(var(--banner-push) * .5)}
}

/* ---------- Treatments landing: explorer (page-treatments.php) ----------
   Speciality chips over the brand gradient, then one photo card per treatment. Cards are links
   end to end; the filter only toggles [hidden], so markup is always the server's. */
.tx-sec{padding:56px 0 64px}
.tx-filter{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tx-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 10px 9px 18px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:var(--neutral-0);font-family:var(--font-label);font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap;cursor:pointer;transition:var(--transition-base)}
.tx-chip .c{min-width:24px;height:24px;padding:0 7px;display:inline-grid;place-items:center;border-radius:var(--radius-pill);background:rgba(255,255,255,.16);font-size:var(--text-3xs)}
@media (hover:hover){.tx-chip:hover{background:rgba(255,255,255,.16)}}
.tx-chip.on{background:var(--neutral-0);border-color:var(--neutral-0);color:var(--purple-700)}
.tx-chip.on .c{background:var(--purple-50);color:var(--purple-700)}
.tx-chip:focus-visible{outline:2px solid var(--blue-200);outline-offset:2px}
.tx-count{margin-top:16px;text-align:center;font-family:var(--font-label);font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:rgba(255,255,255,.72)}
/* 330px floor: 1 col on phones, 2 on tablets/992, 3 at 1366–1440; capped at 4 on wide screens
   (auto-fill would make 5 at 1920 and leave 12 cards as 5+5+2). */
.tx-grid{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(16px,1.8vw,24px)}
@media (min-width:1600px){.tx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tx-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-card);color:inherit;text-decoration:none;box-shadow:0 18px 40px rgba(20,12,38,.22);transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out);animation:txIn 420ms var(--ease-out) both;animation-delay:calc(min(var(--i,0),8) * 50ms)}
.tx-card[hidden]{display:none}
@keyframes txIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tx-card{animation:none}}
@media (hover:hover){
  .tx-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(20,12,38,.3)}
  .tx-card:hover .tx-fig img{transform:scale(1.04)}
  .tx-card:hover .tx-go{color:var(--purple-700)}
  .tx-card:hover .tx-go svg{transform:translate(2px,-2px)}
}
.tx-card{position:relative}
/* One stretched link: the title's link covers the card, so the whole card stays clickable. */
.tx-link{color:inherit;text-decoration:none}
.tx-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.tx-card:has(.tx-link:focus-visible){outline:3px solid var(--blue-200);outline-offset:3px}
.tx-link:focus-visible{outline:none}
.tx-fig{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--image-placeholder)}
.tx-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 620ms var(--ease-out)}
/* The treatment's tag sits in the card body, under the summary (client: off the photo). */
.tx-tag{align-self:flex-start;max-width:100%;padding:6px 12px;border-radius:var(--radius-pill);background:var(--purple-50);color:var(--purple-700);font-family:var(--font-label);font-size:var(--text-3xs);font-weight:var(--weight-semibold);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:20px 22px}
.tx-body h3{font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--text-heading)}
.tx-lede{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* Three full lines; longer text gets "Read more" on the last line (no extra height). Open, the whole
   description lies over the tag and footer inside the card, "Show less" at its end — the card never
   changes size. */
.tx-lede-wrap{position:relative;display:block}
.tx-more{position:absolute;right:0;bottom:0;z-index:2;padding:0 0 0 30px;border:0;background:linear-gradient(90deg,transparent,var(--surface-card) 26px);font-family:var(--font-label);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:var(--leading-relaxed);color:var(--purple-600);cursor:pointer}
.tx-more[hidden],.tx-more [hidden]{display:none}
@media (hover:hover){.tx-more:hover{color:var(--purple-700);text-decoration:underline;text-underline-offset:2px}}
.tx-more:focus-visible{outline:2px solid var(--purple-600);outline-offset:2px;border-radius:3px}
.tx-card.is-open .tx-lede{position:absolute;left:0;right:0;top:0;z-index:2;display:block;-webkit-line-clamp:unset;max-height:var(--tx-open-h,none);overflow-y:auto;background:var(--surface-card);scrollbar-width:thin}
.tx-card.is-open .tx-tag{visibility:hidden}
.tx-card.is-open .tx-more{position:static;display:inline;margin-left:6px;padding:0;background:none;white-space:nowrap}
.tx-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:12px}
.tx-docs{font-size:var(--text-xs);color:var(--text-muted)}
.tx-go{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-label);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--purple-600);transition:color 220ms var(--ease-out)}
.tx-go svg{transition:transform 220ms var(--ease-out)}
.tx-foot-line{margin-top:34px}
@media (max-width:860px){
  .tx-sec{padding:36px 0 44px}
  /* Phones/tablets: one swipeable chip rail instead of a wrapped stack. */
  .tx-filter{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--shell-gutter));padding:2px var(--shell-gutter) 4px;scroll-snap-type:x proximity}
  .tx-filter::-webkit-scrollbar{display:none}
  .tx-chip{scroll-snap-align:start}
  .tx-body{padding:18px}
}
#doc-empty:not([hidden]){display:flex}
.ovx-body[hidden],.kx-detail[hidden],.syx-read [hidden]{display:none}

.vid-main iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Research images (Featured image): journal covers, graphical abstracts and figures arrive in any
   shape, so the frame keeps its ratio and the whole image shows on the paper background. */
.rs-cover>img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-paper);box-shadow:0 14px 30px -20px rgba(46,33,69,.4)}
.rp-cover>img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-paper);box-shadow:0 18px 40px -26px rgba(46,33,69,.42)}
@media (max-width:600px){.rs-cover>img{aspect-ratio:16/9;max-height:180px}}

/* ---------- Long documents on the generic page (Privacy Policy, Terms of Use — page.php) ----------
   Article typography (.bart-prose) beside a sticky "On this page" rail of the numbered sections;
   section headings carry the article's purple rule; "a) …" sub-points are smaller. Phones: the rail
   becomes a collapsed list above the text. */
.lg-grid{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:56px;align-items:start}
.lg-toc{position:sticky;top:calc(var(--chrome-h,116px) + 20px)}
.lg-toc-card{padding:20px 22px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-card,var(--neutral-0));box-shadow:0 14px 34px -20px rgba(46,33,69,.16)}
.lg-toc-d{max-height:calc(100svh - var(--chrome-h,116px) - 48px);overflow-y:auto;scrollbar-width:thin}
.lg-toc-h,.lg-toc-m summary{font-family:var(--font-label);font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--purple-700)}
.lg-toc ol{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.lg-toc a{display:block;padding:7px 10px;margin:0 -10px;border-radius:var(--radius-md);font-size:var(--text-xs);line-height:1.4;color:var(--text-body);text-decoration:none;transition:var(--transition-base)}
@media (hover:hover){.lg-toc a:hover{background:var(--purple-50);color:var(--purple-700)}}
.lg-toc-m{display:none}
.lg-body{max-width:74ch}
.lg-body>h2:first-child{margin-top:0;font-family:var(--font-display);font-size:var(--text-xl);line-height:1.3;color:var(--text-heading)}
.lg-body h2{margin-top:28px;font-size:var(--text-lg);color:var(--text-heading)}
.lg-body h3{margin-top:40px;padding-top:16px;border-top:3px solid var(--purple-600);font-size:var(--text-md);line-height:1.35;color:var(--text-heading);scroll-margin-top:calc(var(--chrome-h,116px) + 16px)}
.lg-body h3.lg-sub{margin-top:22px;padding-top:0;border-top:0;font-size:var(--text-sm)}
.lg-body h4{margin-top:20px;font-size:var(--text-sm);color:var(--text-heading)}
.lg-body p{margin-top:12px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.lg-body>p:first-of-type{margin-top:14px}
@media (max-width:960px){
  .lg-grid{grid-template-columns:1fr;gap:24px}
  .lg-toc{position:static}
  .lg-toc-d{display:none}
  .lg-toc-m{display:block;padding:14px 18px}
  .lg-toc-m summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
  .lg-toc-m summary::-webkit-details-marker{display:none}
  .lg-toc-m summary::after{content:"";width:10px;height:10px;background:var(--purple-700);-webkit-mask:url("../icons/ui/chevron-down.svg") center/contain no-repeat;mask:url("../icons/ui/chevron-down.svg") center/contain no-repeat;transition:transform 200ms var(--ease-standard)}
  .lg-toc-m[open] summary::after{transform:rotate(180deg)}
  .lg-body{max-width:none}
}
@media (max-width:640px){
  .lg-body>h2:first-child{font-size:var(--text-lg)}
  .lg-body h3{margin-top:30px;padding-top:12px}
}