/* SSO Hospitals — plain HTML5/CSS3 build.
   Every rule here is a port of the corresponding React component's inline styles
   (components/** and ui_kits/website/*.jsx). Tokens come from ../../styles.css. */

*,*::before,*::after{box-sizing:border-box}
/* `hidden` always wins: the page scripts show and hide server-rendered nodes with it, and a
   component display rule (flex, grid) would otherwise keep a hidden node on screen. */
[hidden]:not([hidden="until-found"]){display:none!important}
/* Fluid shell (CLAUDE.md §3): no stepped container widths. Extra viewport width becomes
   gutter and columns, never wider cards or longer lines. */
:root{--shell-gutter:clamp(20px,4vw,96px);--measure:68ch}
html{overflow-x:clip}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:var(--weight-regular);color:var(--text-heading);letter-spacing:-.012em;line-height:var(--leading-snug)}
p{margin:0}
a{text-decoration:none;color:var(--text-link)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="option"]:focus-visible,image-slot:focus-visible{outline:2px solid var(--purple-600);outline-offset:2px;border-radius:3px}
a:hover{color:var(--text-link-hover)}
/* height:auto: an optimiser (LiteSpeed Guest Optimization) adds width/height attributes to images,
   and a height attribute beats aspect-ratio — the doctor cards' 4:4.1 photos rendered 600px tall.
   Rules that set their own height (cover fills, banners) still win. */
img{max-width:100%;height:auto;display:block}
button{font:inherit}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:100%;margin:0 auto;padding:0 var(--shell-gutter)}
/* Sections whose content would read badly spanning 4K opt into a bounded rail. */
.wrap-bounded>*{max-width:1800px;margin-inline:auto}
.sec{position:relative;padding:clamp(56px,6vw,128px) 0}
/* A page's heading-only intro (eyebrow, h1, lede): the section after it starts close under the
   lede, not a full section gap away. */
.sec-intro+.sec{padding-top:var(--space-7)}
.sec>.wrap{position:relative}
.tone-subtle{background:var(--surface-subtle)}
.grad-brand{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%)}
.grad-paper{background:radial-gradient(760px 420px at 8% 6%,rgba(106,44,182,.07),transparent 62%),radial-gradient(700px 400px at 92% 18%,rgba(14,116,175,.07),transparent 64%),radial-gradient(680px 420px at 70% 96%,rgba(210,74,0,.06),transparent 64%),linear-gradient(180deg,var(--neutral-25) 0%,var(--neutral-100) 100%)}

/* ---------- Icon (mask-image, same as the React Icon component) ---------- */
.ic-none{display:none}
.ic{display:inline-block;flex:none;background:currentColor;mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center}

/* ---------- Button ---------- */
.b{position:relative;overflow:hidden;isolation:isolate;clip-path:inset(0 round var(--radius-pill));display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);border-radius:var(--radius-pill);border:0;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background 420ms cubic-bezier(.4,0,.2,1),transform var(--duration-instant) var(--ease-standard);flex:0 0 auto}
.b:active{transform:scale(var(--press-scale))}
.b .lbl,.b .knob{position:relative;z-index:2;flex:none;transition:color 420ms cubic-bezier(.4,0,.2,1),background 420ms cubic-bezier(.4,0,.2,1)}
/* The label — not the knob — absorbs any free space on a STRETCHED pill (full-width card
   CTAs). With justify-content:center the label+knob pair was centred as a group, so the knob
   drifted inward off the pill's padding edge while the resting sweep stayed anchored to that
   edge: the circle surfaced as a stray dot beside the knob at 1920. Growing the label instead
   keeps the text optically centred AND the knob at --pad-r, where the sweep expects it. On an
   auto-width pill there is no free space, so nothing moves. */
.b .lbl{flex:1 1 auto;min-width:0;text-align:center}
.b .knob{flex:none;width:var(--knob-d);height:var(--knob-d);border-radius:var(--radius-circle);display:inline-flex;align-items:center;justify-content:center}
/* Sweep geometry is DERIVED, never hand-tuned. The resting circle must sit dead-centre
   under the knob; every context that used to restate width/height/margin/right got one of
   the four numbers wrong sooner or later and the circle surfaced as a stray dot beside the
   knob (the 1920 locations-card bug). Now: --knob-d = knob diameter, --pad-r = its inset
   from the pill's right edge, --knob-c = knob centre measured from that edge, --sweep-d =
   expanded circle diameter, --sweep-rest = --knob-d / --sweep-d. A context that MOVES the
   knob overrides --knob-c alone; one that resizes it overrides --knob-d and --sweep-rest. */
.b{--knob-c:calc(var(--pad-r) + var(--knob-d) / 2)}
.b .sweep{position:absolute;z-index:0;pointer-events:none;border-radius:var(--radius-circle);top:50%;width:var(--sweep-d);height:var(--sweep-d);margin-top:calc(var(--sweep-d) / -2);right:var(--knob-c);margin-right:calc(var(--sweep-d) / -2);transform:scale(var(--sweep-rest));transform-origin:center;backface-visibility:hidden;transition:transform 520ms cubic-bezier(.4,0,.2,1)}
.b:hover .sweep{transform:scale(1);transition:transform 1150ms cubic-bezier(.4,0,.2,1)}
.b .ring{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:var(--radius-pill);opacity:0;transition:opacity 420ms cubic-bezier(.4,0,.2,1)}
.b:hover .ring{opacity:1}
/* sizes */
.b-sm{padding:7px 7px 7px 18px;font-size:var(--text-xs);gap:8px;--knob-d:28px;--pad-r:7px;--sweep-d:520px;--sweep-rest:.0538}
.b-md{padding:10px 10px 10px 26px;font-size:var(--text-sm);gap:12px;--knob-d:36px;--pad-r:10px;--sweep-d:760px;--sweep-rest:.0474}
.b-lg{padding:13px 13px 13px 34px;font-size:var(--text-base);gap:12px;--knob-d:42px;--pad-r:13px;--sweep-d:1000px;--sweep-rest:.042}
/* Hero banner CTAs: ONE size and width for every hero across the site
   (.hero = home/doctors banners, .chero = cancer-type banner, .help-cta = specialist band).
   Keep every new banner CTA on this rule instead of restyling per page. */
/* 260px: at 236 the cancer heroes' "Book an Appointment" ellipsised to "Book an Appointm…". */
.hero .cta .b-lg,.chero .cta .b-lg,.help-cta .b-lg{padding:9px 9px 9px 26px;gap:14px;width:260px;flex:none;justify-content:space-between;--knob-d:34px;--pad-r:9px;--sweep-d:700px;--sweep-rest:.04857}
.hero .cta .b-lg .lbl,.chero .cta .b-lg .lbl,.help-cta .b-lg .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.hero .cta .b-lg .knob .ic,.chero .cta .b-lg .knob .ic,.help-cta .b-lg .knob .ic{width:15px!important;height:15px!important}
/* variants */
.b-primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.b-primary .knob{background:var(--neutral-0);color:var(--purple-700)}
.b-primary .sweep{background:var(--neutral-0)}
.b-primary .ring{box-shadow:inset 0 0 0 4px var(--purple-600)}
.b-primary:hover{color:var(--purple-700)}
.b-primary:hover .knob{background:transparent;color:var(--purple-700)}
.b-inverse{background:var(--neutral-0);color:var(--purple-700)}
.b-inverse .knob{background:var(--purple-600);color:var(--neutral-0)}
.b-inverse .sweep{background:var(--purple-600)}
.b-inverse .ring{box-shadow:inset 0 0 0 4px var(--neutral-0)}
.b-inverse:hover{color:var(--neutral-0)}
.b-inverse:hover .knob{background:transparent;color:var(--neutral-0)}
/* minor CTA — lilac fill, used next to a primary button */
.b-secondary,.b-lilac{background:var(--purple-50);color:var(--purple-700);box-shadow:inset 0 0 0 1px var(--purple-100)}
.b-secondary .knob,.b-lilac .knob{background:var(--purple-600);color:var(--neutral-0)}
.b-secondary .sweep,.b-lilac .sweep{background:var(--purple-100)}
.b-secondary:hover,.b-lilac:hover{color:var(--purple-800)}
.b-ghost{background:transparent;color:var(--purple-600);padding:0;overflow:visible;gap:8px}
.b-ghost:hover{color:var(--purple-800)}
.b-ghost .knob{width:20px;height:20px;background:var(--purple-50)}
.b-ghost .knob .ic{width:10px!important;height:10px!important}
.b-ghost .sweep,.b-ghost .ring{display:none}
.b-ghost.b-flat{gap:8px}
.b-ghost-inv{color:var(--neutral-0)}
.b-ghost-inv:hover{color:var(--purple-200)}
.b-ghost-inv .knob{background:rgba(255,255,255,.16);color:var(--neutral-0)}
.b-ghost-inv:hover .knob{background:var(--neutral-0);color:var(--purple-700)}

/* ---------- SectionHeading ---------- */
.sh{max-width:760px}
.sh-center{max-width:720px;margin-inline:auto;text-align:center}
.sh .eyebrow{margin-bottom:14px;display:flex;align-items:center}
.sh-center .eyebrow{justify-content:center}
.sh .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:var(--text-label)}
.sh-inv .eyebrow>span{color:var(--text-label-inverse)}
.brk{position:relative;display:inline-flex;align-items:center;justify-content:flex-end;width:25px;height:25px;margin-right:-4px;padding-right:3px;flex:none}
.brk svg{position:absolute;inset:0;width:25px;height:25px}
.brk svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-dasharray:55;stroke-dashoffset:55;animation:ssoFrameDraw 5000ms cubic-bezier(.4,0,.2,1) 250ms infinite}
@keyframes ssoFrameDraw{0%{stroke-dashoffset:56}22%{stroke-dashoffset:0}76%{stroke-dashoffset:0}96%{stroke-dashoffset:-56}100%{stroke-dashoffset:-56}}
/* The bracketed first letter sits in its own 25px flex box, so it must carry the SAME
   line-height as the trailing text or its baseline rides ~2.4px high. */
.brk>span{position:relative;line-height:1;top:.6px}
.sh :is(h1,h2){font-size:var(--text-3xl)}
.sh-inv :is(h1,h2){color:var(--neutral-0)}
.sh .lede{margin-top:14px;font-size:var(--text-md);line-height:var(--leading-normal);color:var(--neutral-600)}
.sh-inv .lede{color:rgba(255,255,255,.78)}

/* ---------- Stat ---------- */
.stat .v{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.012em;line-height:var(--leading-tight);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7)}
.stat .l{margin-top:8px;font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-weight:500;color:rgba(255,255,255,.52)}

/* ---------- Hero ---------- */
/* §6: fluid hero height with svh so mobile browser chrome doesn't eat the fold. */
.hero{position:relative;background:var(--surface-inverse);overflow:hidden;min-height:clamp(600px,82svh,900px);display:flex;align-items:stretch}
.hero .bg{position:absolute;inset:0}
/* Home wraps .room in <picture> (phones get a 1×1 source — front-page.php). */
.hero .bg>picture{display:block;width:100%;height:100%}
.hero .bg>.room,.hero .bg>picture>.room{width:100%;height:100%;object-fit:cover;object-position:left center}
.hero .subject{position:absolute;top:0;right:0;bottom:0;width:46%;height:100%;object-fit:cover;object-position:var(--fx,50%) center;opacity:0;transition:opacity 1000ms var(--ease-standard);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 16%,#000 40%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 16%,#000 40%)}
.hero .subject.on{opacity:1}
.hero .scrim-a{position:absolute;inset:0;background:var(--scrim-left)}
.hero .scrim-b{position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,33,69,.62) 0%,rgba(46,33,69,.5) 24%,rgba(46,33,69,.28) 56%,rgba(46,33,69,0) 88%)}
.hero .in{position:relative;width:100%;max-width:100%;margin:0 auto;padding:clamp(48px,5vw,80px) var(--shell-gutter) clamp(44px,4.4vw,70px);display:flex;flex-direction:column;justify-content:center}
/* flex:1 0 0% was Bootstrap's .col rule, the only one of its grid the theme used (CDN file dropped). */
.hero .col,.hero-static .col{flex:1 0 0%}
.hero .col{width:100%;max-width:min(52ch,52%)}
.hero .slides{display:grid;grid-template-areas:"copy"}
/* All slides share one grid area, so .slides is already as tall as the tallest
   copy. Stretching each copy and bottom-aligning its rows pins the CTA (and the
   stats below it) to one y on every slide, with no gap after the headline. */
.hero .copy{grid-area:copy;display:grid;grid-template-rows:auto auto auto auto;align-self:stretch;align-content:end;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity 420ms var(--ease-standard),transform 420ms var(--ease-out)}
.hero .copy.on{opacity:1;transform:none;pointer-events:auto;transition:opacity 700ms var(--ease-standard) 180ms,transform 800ms var(--ease-out) 180ms}
.hero .copy .eyebrow{display:flex;align-items:center;min-height:19px}
/* Banner height + top inset for the pinned bar is set once for every banner on the
   site — see "Banner height" at the end of pages.css. */
.hero .copy .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)}
.hero :is(h1,h2){margin-top:22px;color:#fff;font-size:var(--text-5xl);max-width:600px}
/* Accent word loops through all four brand light shades — each reads clearly on
   the dark banner scrim. Slides start at different points in the cycle. */
@keyframes ssoAccentHue{0%,18%{color:var(--purple-200)}25%,43%{color:var(--blue-200)}50%,68%{color:var(--green-200)}75%,93%{color:var(--orange-200)}100%{color:var(--purple-200)}}
.hero :is(h1,h2) span{color:var(--purple-200);animation:ssoAccentHue 14s var(--ease-standard) infinite}
.hero .slides .copy:nth-child(2) :is(h1,h2) span{animation-delay:-3.5s}
.hero .slides .copy:nth-child(3) :is(h1,h2) span{animation-delay:-7s}
.hero .slides .copy:nth-child(4) :is(h1,h2) span{animation-delay:-10.5s}
@media (prefers-reduced-motion:reduce){.hero :is(h1,h2) span{animation:none}}
/* The heading's closing phrase ("|" in the CMS) stays on one line: the heading breaks before it,
   never inside it. Plain heading colour — it is not the accent span. */
.hero :is(h1,h2) .hl-keep{white-space:nowrap;color:inherit;animation:none}
.hero .copy .lede{margin-top:20px;font-size:18px;color:rgba(255,255,255,.8);max-width:480px;line-height:var(--leading-normal);align-self:start}
.hero .copy .cta{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap}
/* CTA sits on the last grid row of a stretched copy block, so it lands at the same
   y on every slide regardless of headline length */
.hero .stats{margin-top:30px;display:flex;gap:44px;flex-wrap:nowrap;white-space:nowrap}
/* Dots: each button is a transparent 24px tap target (WCAG 2.5.8 / Lighthouse target-size) and the
   dot itself is painted by ::before at its original size. Targets must not overlap, so dot centres
   sit 24px apart (visible gaps ~14px, were 8–10px). */
.hero .dots{margin-top:22px;display:flex;gap:0;justify-content:center}
.hero .dots button{position:relative;width:24px;height:24px;border:0;padding:0;cursor:pointer;background:none}
.hero .dots button::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:var(--radius-pill);background:rgba(255,255,255,.34);transition:var(--transition-base)}
.hero .dots button.on{width:34px}
.hero .dots button.on::before{width:28px;background:var(--neutral-0)}
.hero .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}
.hero .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}
@keyframes ssoScrollHint{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(6px);opacity:1}}

/* ---------- SurgeonSpotlight ---------- */
@keyframes ssoSpotIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ssoSpotImg{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
/* ONE height token drives both the thumbnail rail and the feature portrait, so they stay
   exactly equal at every width (they used to be a fixed 500px cap vs a content-driven
   portrait, which drifted apart on wide screens). */
.spot{--spot-h:clamp(460px,38vw,660px);margin-top:40px;display:grid;gap:16px 44px;grid-template-columns:minmax(340px,36%) 1fr;grid-template-areas:"rail stage" "dots stage";align-items:start}
.spot-stage{grid-area:stage;display:grid;grid-template-columns:minmax(240px,48%) minmax(240px,1fr);gap:44px;align-items:stretch}
.spot-row{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.spot-cta .b{align-items:center}
.spot-photo{height:500px;min-height:0;overflow:hidden;background:var(--neutral-100);border-radius:var(--radius-xl);box-shadow:0 22px 48px rgba(46,33,69,.18)}
.spot-photo>div{width:100%;height:100%;animation:ssoSpotImg 620ms var(--ease-out) both}
/* Top-anchored: the portraits have little headroom, and the old 18% offset pushed heads out of
   the frame whenever the box was wider than the photo's 4:5 (phones, tablets, 992). */
.spot-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.plate{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(106,44,182,.14),rgba(106,44,182,.05));text-align:center}
.plate .i{font-family:var(--font-display);color:var(--purple-600)}
.spot-photo .plate{gap:14px;padding:24px}
.spot-photo .plate .i{font-size:var(--text-3xl)}
.spot-photo .plate .s{font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}
.spot-copy{display:flex;flex-direction:column;justify-content:center}
.spot-copy>div{animation:ssoSpotIn 480ms var(--ease-out) both}
.spot-count{display:block;margin-bottom:16px;font-family:var(--font-label);font-size:var(--text-2xs);letter-spacing:.12em;color:var(--text-muted)}
.spot-copy h3{font-size:var(--text-2xl)}
.spot-spec{margin-top:10px;font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--text-heading)}
.spot-acts{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;padding-top:22px;border-top:1px solid var(--border-subtle)}
.spot-cta{margin-top:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spot-all .b{padding-left:0;padding-right:0}
.spot-meta{margin-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 24px;width:100%;align-items:flex-start;min-width:0}
.spot-meta>div{position:relative;padding-left:18px}
.spot-meta>div::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:1px;background:var(--purple-200)}
.spot-meta .k{font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}
.spot-meta .v{margin-top:5px;font-family:var(--font-label);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:var(--leading-snug);color:var(--text-heading)}
.spot-railwrap{grid-area:rail;min-width:0}
/* ---------- LocationDeck: city filters + dot scroller ---------- */
.loc-bar{margin-top:36px;display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap}
.loc-filter{display:flex;gap:10px;flex-wrap:wrap}
.loc-filter button{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:rgba(255,255,255,.84);font-family:var(--font-label);font-size:var(--text-xs);font-weight:500;white-space:nowrap;cursor:pointer;transition:var(--transition-base)}
.loc-filter button:hover{background:rgba(255,255,255,.18);color:var(--neutral-0)}
.loc-filter button.on{background:var(--neutral-0);border-color:var(--neutral-0);color:var(--purple-700)}
.loc-filter button .c{font-variant-numeric:tabular-nums;opacity:.55}
.loc-count{font-family:var(--font-label);font-size:var(--text-xs);color:rgba(255,255,255,.6)}
.loc-deck{margin-top:24px}
.loc-deck .dots-row{margin-top:22px}
@media (max-width:860px){.loc-bar{margin-top:24px;gap:12px}.loc-filter{gap:8px}.loc-filter button{padding:8px 13px}}
.spot-arw{display:none}
.spot-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:0}
.spot-rail button{position:relative;min-width:0;height:156px;padding:0;border:none;cursor:pointer;overflow:hidden;background:var(--neutral-100);filter:grayscale(.35);border-radius:var(--radius-lg);box-shadow:0 10px 22px rgba(46,33,69,.12);transition:var(--transition-base)}
.spot-rail button:hover{filter:grayscale(0);box-shadow:0 16px 30px rgba(46,33,69,.2)}
.spot-rail img{width:100%;height:100%;object-fit:cover;object-position:center top}
.spot-rail .plate .i{font-size:var(--text-sm)}
.spot-rail button.no-photo .cap{background:linear-gradient(180deg,rgba(46,33,69,0) 0%,rgba(46,33,69,.72) 38%,rgba(46,33,69,.95) 100%)}
.spot-rail .cap{position:absolute;left:0;right:0;bottom:0;display:grid;gap:4px;padding:30px 14px 14px;text-align:left;background:linear-gradient(180deg,rgba(24,16,40,0) 0%,rgba(24,16,40,.6) 44%,rgba(24,16,40,.9) 100%)}
.spot-rail .cap .n{font-family:var(--font-label);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1.22;color:var(--neutral-0);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word}
.spot-rail .cap .s{font-family:var(--font-label);font-size:var(--text-2xs);letter-spacing:.05em;text-transform:uppercase;line-height:1.2;color:rgba(255,255,255,.72);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}
.spot-rail.spot-rail-scroll{max-height:500px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:rgba(46,33,69,.14) transparent}
.spot-rail.spot-rail-scroll::-webkit-scrollbar{width:4px}
.spot-rail.spot-rail-scroll::-webkit-scrollbar-thumb{background:rgba(46,33,69,.14);border-radius:2px;transition:background 240ms linear}
.spot-rail.spot-rail-scroll:hover::-webkit-scrollbar-thumb{background:rgba(46,33,69,.3)}
/* Pointer-follow ambient glow (same treatment as the doctors-page CTA banner). */
.glow-sec{position:relative}
.glow-sec>.sec-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 500ms ease;background:radial-gradient(460px 460px at var(--gx,50%) var(--gy,50%),color-mix(in oklab,var(--purple-300) 26%,transparent),transparent 70%),radial-gradient(560px 560px at calc(100% - var(--gx,50%)) calc(100% - var(--gy,50%)),color-mix(in oklab,var(--orange-200) 30%,transparent),transparent 70%)}
.glow-sec:hover>.sec-glow{opacity:1}
@media (hover:none){
  @keyframes ssoSecGlowDrift{0%{--gx:28%;--gy:32%}25%{--gx:70%;--gy:28%}50%{--gx:72%;--gy:68%}75%{--gx:30%;--gy:64%}100%{--gx:28%;--gy:32%}}
  .glow-sec>.sec-glow{opacity:1;animation:ssoSecGlowDrift 20s ease-in-out infinite}
}
.glow-sec>.wrap{position:relative;z-index:1}
/* The button clips its children, so the ring is a stacked overlay rather than an
   outline (which the portrait paints over). */
.spot-rail button.on::after{content:"";position:absolute;inset:0;z-index:3;border:3px solid var(--blue-200);border-radius:inherit;pointer-events:none}
.spot-rail.spot-rail-scroll button{height:auto}
.spot-rail.spot-rail-scroll button::before{content:"";display:block;padding-top:100%}
.spot-rail.spot-rail-scroll img,.spot-rail.spot-rail-scroll .plate{position:absolute;inset:0;width:100%;height:100%}
.spot-rail.spot-rail-scroll .cap{padding:16px 7px 7px}
.spot-rail.spot-rail-scroll .cap .n{font-size:11px;-webkit-line-clamp:2}
.spot-rail.spot-rail-scroll .cap .s{display:none}
/* Mobile auto-scroller strip */
.spot-rail.spot-rail-mq{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%)}
.spot-rail.spot-rail-mq::-webkit-scrollbar{display:none}
.spot-rail.spot-rail-mq button{flex:0 0 104px;height:116px}
.spot-rail.spot-rail-mq .cap{padding:20px 8px 8px}
.spot-rail.spot-rail-mq .cap .n{font-size:11px;-webkit-line-clamp:2}
.dots-row{margin-top:0;display:flex;justify-content:center;gap:0}
/* Dots under a card rail sit clear of the cards (the home video dots touched the card). */
:where(.rail) + .dots-row{margin-top:18px}
#spot-dots{grid-area:dots}
.dots-row button{position:relative;width:24px;height:24px;border:none;padding:0;cursor:pointer;background:none}
.dots-row button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:5px;background:var(--neutral-300);transition:var(--transition-base)}
.dots-row button.on{width:32px}
.dots-row button.on::before{width:26px;background:var(--purple-600)}
.dots-row.inv button::before{background:rgba(255,255,255,.34)}
.dots-row.inv button.on::before{background:var(--neutral-0)}

/* ---------- BodyMap (1180x470 stage) ---------- */
/* The stage scales to its column in CSS (wrap width / 1180, capped at 1), so it fits before
   shared.js runs — LiteSpeed delays theme JS until first interaction. fit() sets the same values. */
.map-wrap{width:100%;position:relative;container-type:inline-size}
.map-stage{width:1180px;height:470px;position:absolute;top:0;left:max(0px,(100cqw - 1180px) / 2);transform-origin:top left;transform:scale(min(1,tan(atan2(100cqw,1180px))))}
@keyframes ssoFigIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ssoFigFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ssoOrganPop{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
.map-fig{position:absolute;left:450px;top:6px;width:280px;height:457px;pointer-events:none;animation:ssoFigIn 900ms var(--ease-out) both;transition:transform 400ms var(--ease-out),filter 400ms var(--ease-out)}
.map-stage:hover .map-fig{transform:scale(1.035) translateY(-4px);filter:drop-shadow(0 14px 22px rgba(15,10,28,.28))}
.map-fig img{width:100%;height:100%;object-fit:contain;animation:ssoFigFloat 7s ease-in-out 900ms infinite}
.map-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-svg .hot{pointer-events:auto;cursor:pointer;transition:stroke 240ms ease}
.map-row{position:absolute;width:250px;height:46px;display:flex}
.map-pop{position:absolute;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--neutral-0);box-shadow:0 6px 18px rgba(15,10,28,.35);animation:ssoOrganPop 260ms ease-out both;pointer-events:none}
.tile{display:flex;align-items:center;gap:14px;padding:0 2px 10px;width:100%;height:100%;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,.16);transition:var(--transition-base);cursor:pointer}
.tile.right{flex-direction:row-reverse}
.tile .t{font-family:var(--font-label);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.11em;white-space:nowrap;color:rgba(255,255,255,.78)}
.tile .ic{color:rgba(255,255,255,.62)}
.tile:hover,.tile.on{border-bottom-color:rgba(255,255,255,.55)}
.tile:hover .t,.tile.on .t{color:var(--neutral-0)}
.tile:hover .ic,.tile.on .ic{color:var(--neutral-0)}
/* Cancers with a built page are anchors: hover reveals the link arrow and underlines the label. */
a.tile{text-decoration:none;color:inherit}
.tile .lnk{margin-left:auto;display:flex;opacity:0;transform:translate(-4px,4px);transition:var(--transition-base);color:var(--neutral-0)}
.tile.right .lnk{margin-left:0;margin-right:auto}
.tile.linked:hover .lnk,.tile.linked:focus-visible .lnk{opacity:1;transform:none}
.tile.linked:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.mmap-pill.linked{text-decoration:none}
.map-foot{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.map-foot p{font-size:var(--text-sm);color:rgba(255,255,255,.62)}

/* phone body map */
.mmap{position:relative}
.mmap-hint{margin-bottom:14px;text-align:center;font-family:var(--font-label);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.mmap img{position:absolute;filter:saturate(.35) brightness(1.05);pointer-events:none}
.mmap-pill{position:absolute;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 6px;cursor:pointer;border-radius:var(--radius-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:var(--transition-base)}
.mmap-pill.on{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.mmap-pill span{font-family:var(--font-label);font-size:10px;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.8)}
.mmap-pill.on span,.mmap-pill.on .ic{color:var(--neutral-0)}
.mmap-pill .ic{color:rgba(255,255,255,.6)}
.mmap-pill.left{flex-direction:row-reverse}

/* ---------- why-choose banner ---------- */
.why{position:relative;border-radius:var(--radius-xl);overflow:hidden;height:300px;background:var(--ink-800)}
.why>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.why .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,33,69,.7) 0%,rgba(46,33,69,.4) 34%,rgba(46,33,69,.06) 62%,rgba(46,33,69,0) 78%)}
.why .copy{position:absolute;left:40px;top:50%;transform:translateY(-50%);max-width:440px}
.why .eb{display:inline-flex;align-items:center;font-family:var(--font-label);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-200)}
.why h2{margin-top:10px;font-size:var(--text-2xl);color:var(--neutral-0)}
.why p{margin-top:12px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:rgba(255,255,255,.82)}
/* Thin variant used on the cancer-type pages: shorter band, CTA pinned right. */
.why-thin{height:220px}
.why-thin .copy{max-width:560px}
.why-thin h2{font-size:var(--text-xl)}
.why-thin p{margin-top:8px;max-width:62ch}
/* ONE panel: the image band is the panel's header, the reason cards its body, the note and
   CTA its footer — so it reads as a single component instead of three loose blocks. */
.why-panel{border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--surface-card);box-shadow:var(--shadow-sm);overflow:hidden}
.why-panel .why{border-radius:0}
.why-below{padding:20px 24px}
/* Reason cards sit ON the banner: the band grows to fit, copy left, glass cards right. */
/* Split panel, hero vocabulary: dark ground, copy left, imagery right fading in
   from the right edge via a mask (same treatment as .hero .subject). */
.why-split{position:relative;display:grid;grid-template-columns:1.06fr .94fr;align-items:stretch;background:var(--surface-inverse);border-color:rgba(255,255,255,.12)}
/* The image spans the WHOLE panel and fades across it in many stops, so the dark-to-light
   flow is continuous instead of breaking at the column edge. */
.why-shot{position:relative;grid-column:1/-1;grid-row:1;min-height:340px;pointer-events:none}
.why-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 18%,rgba(0,0,0,.08) 30%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.38) 50%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.8) 70%,rgba(0,0,0,.93) 80%,#000 92%);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 18%,rgba(0,0,0,.08) 30%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.38) 50%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.8) 70%,rgba(0,0,0,.93) 80%,#000 92%)}
/* Treatment pages: each banner is its own photo with the subject in the middle, so on desktop it
   sits in the right column only (beside the copy, not under it), centred, with a short fade —
   the full-panel stretch anchored right hid the faces behind the text. */
@media (min-width:861px){
  .why-split-tr .why-shot{grid-column:2}
  .why-split-tr .why-shot img{object-position:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
}
.why-side{position:relative;grid-column:1;grid-row:1;z-index:2;padding:clamp(28px,3vw,44px);display:grid;gap:20px;align-content:center}
.why-copy .eb{display:inline-flex;align-items:center;font-family:var(--font-label);font-size:14px;letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:500;color:var(--blue-200)}
.why-copy .why-h{margin-top:14px;max-width:24ch;font-family:var(--font-display);font-size:var(--text-xl);line-height:var(--leading-snug);font-weight:400;color:var(--neutral-0);text-wrap:balance}
.why-copy .lede{margin-top:14px;max-width:46ch;font-size:17px;line-height:var(--leading-normal);color:rgba(255,255,255,.82)}
/* One point per row: hairline dividers, no cards. */
.why-pts.why-pts-stack{display:grid;grid-template-columns:1fr;gap:0;max-width:52ch}
.why-pts.why-pts-stack li{padding:12px 0;border:0;border-top:1px solid rgba(255,255,255,.14);border-radius:0;background:none;align-items:flex-start;gap:12px;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:rgba(255,255,255,.84);transition:color 220ms var(--ease-standard)}
.why-pts.why-pts-stack li:first-child{border-top:0;padding-top:0}
.why-pts.why-pts-stack li:hover{transform:none;background:none;box-shadow:none;border-color:rgba(255,255,255,.14);color:var(--neutral-0)}
.why-pts.why-pts-stack .b1{width:18px;height:18px;margin-top:1px;background:rgba(255,255,255,.14);color:var(--neutral-0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.why-split .why-foot{border-top-color:rgba(255,255,255,.14)}
.why-split .why-foot .note{color:rgba(255,255,255,.62)}
.why-foot-bare{margin-top:0;padding-top:0;border-top:0}
.why-pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.why-pts li{display:flex;gap:11px;align-items:center;padding:13px 15px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--neutral-0);font-size:var(--text-xs);line-height:var(--leading-snug);color:var(--text-body);text-wrap:pretty;transition:var(--transition-base)}
.why-pts li:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--ac) 40%,transparent);background:var(--surface-card);box-shadow:var(--shadow-sm)}
.why-pts .b1{flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:var(--radius-circle);background:color-mix(in oklab,var(--ac) 12%,transparent);color:var(--ac)}
.why-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.why-foot .note{margin:0;max-width:62ch;font-size:var(--text-xs)}
@media (max-width:860px){
  /* .copy must stay a positioned box: the img and veil are absolute and come after it in
     the DOM, so a static copy paints UNDER them (text vanished on phones).
     Double class beats the generic .why{height:400px} phone rule below. */
  .why.why-thin{height:auto;padding:20px}
  .why.why-thin .copy{position:relative;z-index:2;transform:none;left:auto;right:auto;top:auto;max-width:none}
  .why-below{padding:16px}
  .why-split{grid-template-columns:1fr}
  .why-shot{grid-column:1;grid-row:1;order:-1;min-height:200px}
  .why-side{grid-row:2}
  /* Phone: the photo is its own block and the dark panel meets it through a short
     scrim, instead of a long mask that washed the image out. */
  .why-shot{min-height:0;aspect-ratio:16/10}
  .why-shot img{object-position:center 30%;mask-image:none;-webkit-mask-image:none}
  .why-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(20,14,30,0) 0%,rgba(20,14,30,.55) 55%,var(--surface-inverse) 100%)}
  .why-side{padding:18px 16px 20px;gap:14px}
  .why-copy .lede{font-size:var(--text-sm)}
  .why-copy .why-h{font-size:var(--text-lg);max-width:none}
  .why-pts{grid-template-columns:1fr;gap:8px}
  .why-pts li{padding:12px 13px}
  .why-foot{margin-top:16px;padding-top:14px}
  .why-foot .b{width:auto}
}
.spec-title{margin-top:24px;font-size:var(--text-xl)}

/* ---------- SpecialtyCard ---------- */
@keyframes ssoSpecNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* The rail is the paging window, so it has to clip — which also clipped the cards' shadows at its
   edges. It now bleeds out by --rail-bleed on every side and each page insets its cards by the same
   amount: card size and paging are unchanged, the shadow has room, the next page stays hidden. */
.rail{--rail-bleed:16px;overflow:hidden;margin:calc(var(--rail-bleed) * -1);padding:var(--rail-bleed) 0}
.rail-track{display:flex;transition:transform 620ms var(--ease-out)}
.rail-page{min-width:0;display:grid;gap:18px;padding:0 var(--rail-bleed)}
.spec{position:relative;padding:10px;border-radius:var(--radius-xl);background:var(--neutral-0);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md);transition:var(--transition-base)}
.spec:hover{box-shadow:var(--shadow-lg)}
.spec .fig{position:relative;aspect-ratio:4/3}
.spec .clip{position:absolute;inset:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--neutral-100)}
.spec .clip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.spec image-slot{position:absolute;inset:0}
.loc .top image-slot{width:100%;height:100%}
.spec .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--image-placeholder);font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:rgba(46,33,69,.4);text-align:center;padding:16px}
.spec .over{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 16px;background:linear-gradient(180deg,rgba(20,14,30,0) 0%,rgba(20,14,30,.72) 42%,rgba(20,14,30,.93) 100%);transform:translateY(100%);transition:transform 380ms var(--ease-out);pointer-events:none}
.spec:hover .over{transform:translateY(0)}
.spec .over p.pr{font-family:var(--font-display);font-size:var(--text-base);line-height:1.25;color:var(--neutral-0)}
.spec .over p.dt{margin-top:10px;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:rgba(255,255,255,.8)}
.spec .over .act{margin-top:14px;pointer-events:auto}
/* Long department names ("Gastrointestinal & Colorectal Oncology") ran off the card at 320 under
   nowrap; they now wrap to a second line only when they don't fit. */
.spec .pill{position:absolute;top:12px;left:12px;right:12px;min-height:30px;display:flex;align-items:center;justify-content:flex-end;pointer-events:none}
.spec .pill>span{display:flex;align-items:center;min-height:30px;max-width:100%;padding:5px 12px;line-height:1.25;text-wrap:balance;border-radius:var(--radius-pill);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid rgba(255,255,255,.45);color:var(--neutral-0);font-family:var(--font-label);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide)}
.spec .nudge{position:absolute;bottom:12px;left:50%;margin-left:-17px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5);pointer-events:none;opacity:1;transition:opacity 260ms ease;animation:ssoSpecNudge 1.5s ease-in-out infinite}
.spec:hover .nudge{opacity:0}
/* Treatment chips: accent-tinted in rest, filled on hover — colourful without
   competing with the photo above. */
.spec-tx{margin-top:12px;padding:2px 4px 4px;display:flex;flex-wrap:wrap;gap:7px}
.spec-tx a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-pill);font-family:var(--font-label);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:.01em;line-height:1.2;text-decoration:none;color:var(--ac,var(--purple-700));background:color-mix(in oklab,var(--ac,var(--purple-600)) 12%,var(--neutral-0));border:1px solid color-mix(in oklab,var(--ac,var(--purple-600)) 26%,transparent);transition:background 260ms var(--ease-standard),color 260ms var(--ease-standard),border-color 260ms var(--ease-standard),transform 260ms var(--ease-out)}
.spec-tx a svg{flex:none;opacity:.55;transition:opacity 240ms var(--ease-standard),transform 240ms var(--ease-standard)}
.spec-tx a:hover{background:var(--ac,var(--purple-600));border-color:transparent;color:var(--neutral-0);transform:translateY(-1px)}
.spec-tx a:hover svg{opacity:1;transform:translate(1px,-1px)}

/* ---------- PatientStoryStrip ---------- */
.strip{margin-top:44px;display:flex;gap:10px;height:460px;align-items:stretch}
/* flex-grow interpolates (flex-basis:auto does not) — that is what makes the cards
   glide open/closed instead of snapping. */
.strip>.cell{display:flex;flex:0 1 250px;min-width:0;will-change:flex-grow;transition:flex-grow 900ms cubic-bezier(.22,1,.36,1)}
.strip>.cell.on{flex-grow:1}
.strip .plate-btn{flex:0 0 250px;position:relative;padding:0;border:none;cursor:pointer;overflow:hidden;background:var(--neutral-100);border-radius:var(--radius-lg);filter:opacity(.45);transition:filter 700ms cubic-bezier(.22,1,.36,1),border-radius 600ms cubic-bezier(.22,1,.36,1),box-shadow 600ms var(--ease-standard)}
.strip .cell.on .plate-btn{filter:opacity(1);border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.strip .plate-btn img{width:100%;height:100%;object-fit:cover}
.strip .plate-btn .nm{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 14px;background:linear-gradient(180deg,transparent,rgba(24,16,40,.72));font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.1em;color:var(--neutral-0);text-align:left}
.strip .panel{flex:1 1 0;min-width:0;overflow:hidden;background:var(--neutral-0);border:1px solid transparent;border-left:none;border-radius:0 var(--radius-lg) var(--radius-lg) 0;opacity:0;transition:opacity 520ms var(--ease-standard),border-color 520ms linear}
.strip .cell.on .panel{opacity:1;border-color:var(--border-subtle);border-left:none}
.qp{display:flex;flex-direction:column;justify-content:center;height:100%;padding:26px 28px;min-width:0;overflow-y:auto;opacity:0;transform:translateX(30px);transition:opacity 260ms var(--ease-standard),transform 320ms var(--ease-standard)}
/* The slide-in rest state is scoped to the desktop strip; the mobile panel has no
   .cell wrapper, so it must be visible on its own. */
#strip-m-panel .qp{opacity:1;transform:none;animation:none}
.strip .cell.on .qp{opacity:1;transform:none;transition:opacity 620ms var(--ease-standard) 300ms,transform 780ms cubic-bezier(.22,1,.36,1) 300ms}
.qp .mk{font-family:var(--font-display);font-size:64px;line-height:1;height:30px;display:block;overflow:hidden}
.qp .mk.top{margin-bottom:18px}
.qp .mk.bot{margin-top:18px;align-self:flex-start}
.qp .q{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty;max-width:620px}
.qp .who{margin-top:22px;font-family:var(--font-label);font-size:var(--text-sm);color:var(--text-heading)}
.qp .meta{margin-top:5px;font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}
.strip-foot{margin-top:30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.strip-foot p{font-size:var(--text-sm);color:var(--text-muted)}

/* ---------- LocationCard ---------- */
.loc{border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md);transition:var(--transition-base);display:flex;flex-direction:column;width:100%}
.loc:hover{box-shadow:var(--shadow-lg)}
.loc .top{aspect-ratio:16/10;overflow:hidden;flex:none;background:var(--image-placeholder)}
.loc .top img{width:100%;height:100%;object-fit:cover}
/* Location shots stretch to fill the frame edge-to-edge (several carry baked-in white margins). */
.loc .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--neutral-500);text-align:center;padding:14px}
.loc .body{padding:22px;display:flex;flex-direction:column;flex:1}
.loc .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.loc h3{font-size:var(--text-md)}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-pill);font-family:var(--font-label);font-size:var(--text-3xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-caps)}
.badge-brand{background:var(--blue-50);color:var(--blue-700)}
.badge-neutral{background:var(--neutral-100);color:var(--neutral-600)}
.loc .addr{margin-top:10px;font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-relaxed);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:calc(var(--leading-relaxed)*3em)}
/* "View address": the clamp keeps cards even; the popup shows the whole address. */
.addr-more{align-self:flex-start;margin-top:4px;padding:2px 0;border:0;background:none;cursor:pointer;font-family:var(--font-label);font-size:var(--text-2xs);font-weight:var(--weight-semibold);color:var(--purple-600);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--purple-600) 40%,transparent)}
@media (hover:hover){.addr-more:hover{color:var(--purple-800);text-decoration-color:currentColor}}
.addr-more:focus-visible{outline:2px solid var(--purple-400);outline-offset:2px;border-radius:2px}
/* ---------- Address popup (shared.js::addrDialog) ---------- */
.addr-dlg{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.addr-dlg[hidden]{display:none}
.addr-dlg-back{position:absolute;inset:0;background:rgba(20,12,38,.55)}
.addr-dlg-box{position:relative;width:min(440px,100%);padding:26px 24px 22px;border-radius:var(--radius-xl);background:var(--neutral-0);box-shadow:var(--shadow-lg);animation:addrIn 220ms var(--ease-out) both}
@keyframes addrIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.addr-dlg-box{animation:none}}
.addr-dlg-x{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:var(--radius-circle);background:var(--neutral-50);color:var(--text-heading);cursor:pointer}
.addr-dlg-k{font-family:var(--font-label);font-size:var(--text-3xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--purple-600)}
.addr-dlg-box h3{margin-top:6px;padding-right:40px;font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-heading)}
.addr-dlg-a{position:relative;margin-top:14px;padding:14px 56px 14px 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--neutral-50)}
.addr-dlg-txt{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);user-select:text}
/* Copy sits inside the address box, top-right; the tick replaces it for a moment once copied. */
.addr-dlg-copy{position:absolute;top:8px;right:8px;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--neutral-0);color:var(--purple-600);cursor:pointer;transition:color 160ms ease,border-color 160ms ease,background-color 160ms ease}
.addr-dlg-copy .ic{grid-area:1/1}
.addr-dlg-copy .ic:last-child{visibility:hidden}
.addr-dlg-copy.copied{color:var(--green-600);border-color:var(--green-200);background:var(--green-50)}
.addr-dlg-copy.copied .ic:first-child{visibility:hidden}
.addr-dlg-copy.copied .ic:last-child{visibility:visible}
@media (hover:hover){.addr-dlg-copy:not(.copied):hover{border-color:var(--purple-200);background:var(--purple-50);color:var(--purple-700)}}
.addr-dlg-tip{position:absolute;top:-13px;right:6px;padding:3px 10px;border-radius:var(--radius-pill);background:var(--green-600);color:var(--neutral-0);font-family:var(--font-label);font-size:var(--text-3xs);letter-spacing:.04em;white-space:nowrap;pointer-events:none}
.addr-dlg-tip:empty{display:none}
/* Directions matches the location card's: map-pin icon with text, no pill. */
.addr-dlg-acts{margin-top:14px;display:flex;justify-content:center}
.addr-dlg-acts .addr-dlg-go{min-height:44px;padding:0 10px}
html.addr-dlg-open{overflow:hidden}
.loc .ph-row{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:var(--text-xs);font-weight:600;color:var(--text-heading)}
.loc .acts{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
@media (max-width:860px){
  .loc .body{padding:16px}
  .loc .acts{flex-wrap:wrap;gap:10px}
  .loc .acts .b{min-height:44px;flex:1 1 100%;width:100%;justify-content:center;padding-left:14px;padding-right:38px;position:relative}
  .loc .acts .b .lbl{margin-inline:auto}
  .loc .acts .b .knob{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
  /* Full-width pills (up to ~800px at 768) outgrow .b-sm's 520px sweep — the fill stopped short of
     the left edge. Diameter ≥ 2× the widest pill; rest scale = 28/1800. */
  .loc .acts .b{--knob-c:calc(8px + var(--knob-d) / 2);--sweep-d:1800px;--sweep-rest:.01556}
  .loc .acts .b-lilac .knob,.loc .acts .b-secondary .knob{background:var(--purple-600)}
  .loc .acts .b-lilac .sweep,.loc .acts .b-secondary .sweep{background:var(--purple-600)}
  .loc .acts .b:hover .sweep{transform:scale(1)}
  /* Directions is a ghost button with its icon before the label (no knob): full width split them —
     icon on the left edge, label centred. It hugs its content and centres as one unit instead. */
  .loc .acts .b-ghost{flex:0 0 auto;width:auto;margin-inline:auto;padding:0 10px;justify-content:center;gap:6px}
  .loc .acts .b-ghost .lbl{margin-inline:0;flex:none}
}
/* Soft brand-tinted wash so the reviews block lifts off the payments band above.
   Green (the wordmark bracket) reads as reassurance — the right note for reviews. */
#reviews{background:linear-gradient(180deg,var(--green-50) 0%,color-mix(in oklab,var(--green-50) 50%,var(--neutral-0)) 46%,var(--neutral-0) 100%)}

/* ---------- multi-brand accents ----------
   The wordmark carries purple, blue, green and orange; sections that repeat a
   card shape cycle through them so the page is not a single-hue wash. */
.rail-page .spec{border-top:3px solid var(--purple-300)}
.rail-page .spec:nth-child(2){border-top-color:var(--blue-300)}
.rail-page .spec:nth-child(3){border-top-color:var(--green-200)}
.rail-page .spec:nth-child(4){border-top-color:var(--orange-200)}
#loc-desktop .loc:nth-child(2) .badge-brand{background:var(--blue-50);color:var(--blue-700)}
#loc-desktop .loc:nth-child(3) .badge-brand{background:var(--green-50);color:var(--green-700)}
#vid-desktop .vid:nth-child(2) .play>span{color:var(--blue-600)}
#vid-desktop .vid:nth-child(3) .play>span{color:var(--green-600)}
#vid-desktop .vid:nth-child(4) .play>span{color:var(--orange-600)}

/* ---------- payments ---------- */
/* Own surface + hairline edges so the photo band reads as its own block instead of
   bleeding into the tone-subtle reviews section below. */
#payments{background:var(--neutral-0);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.pay-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pay-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.4;filter:grayscale(.2)}
.pay-bg .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.66) 45%,rgba(255,255,255,.82) 100%)}
.pay-grid{display:grid;grid-template-columns:minmax(280px,34%) 1fr;gap:72px;align-items:start}
.pay-row{display:grid;grid-template-columns:76px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid rgba(46,33,69,.2)}
.pay-row:first-child{border-top:1px solid rgba(46,33,69,.2)}
.pay-row .n{font-family:var(--font-display);font-size:var(--text-2xl)}
.pay-row h4{font-size:var(--text-lg)}
.pay-row p{margin-top:8px;max-width:560px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}
.pay-note{margin-top:20px;font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}

/* ---------- PatientStories (reviews) ---------- */
.rev-grid{display:grid;grid-template-columns:minmax(300px,32%) 1fr;gap:56px;align-items:start}
.rev-side{position:sticky;top:calc(var(--chrome-h,116px) + 16px)}
.rev-rate{margin-top:32px;padding-top:26px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:16px}
.rev-rate .big{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--text-heading)}
.rev-rate .cap{display:block;margin-top:6px;font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}
.stars{display:flex;gap:3px}
.stars i{width:9px;height:9px;background:var(--orange-600);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.rev-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:720px}
.rev-cols .mq-m{display:none}
.mq{overflow:hidden;height:100%;mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
.mq-in{display:grid;gap:20px}
@keyframes ssoStoriesUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes ssoStoriesDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.mq:hover .mq-in{animation-play-state:paused}
.rcard{background:var(--neutral-0);border:1px solid var(--border-subtle);border-top-width:3px;border-top-style:solid;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 6px 16px rgba(46,33,69,.07);padding:26px 26px 30px;display:grid;gap:18px}
.rcard .hd{display:flex;align-items:center;justify-content:space-between;gap:16px}
.rcard .who{display:flex;align-items:center;gap:14px}
.rcard .av{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--neutral-100);border-radius:var(--radius-md);font-family:var(--font-label);font-size:var(--text-sm);color:var(--neutral-600)}
.rcard .nm{display:block;font-family:var(--font-label);font-size:var(--text-sm);color:var(--text-heading)}
.rcard .mt{display:block;margin-top:3px;font-family:var(--font-label);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}
.rcard p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body);text-wrap:pretty}

/* ---------- VideoCard ---------- */
.vid{display:block;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md);transition:var(--transition-base);width:100%}
.vid:hover{box-shadow:var(--shadow-lg)}
.vid .frame{position:relative;aspect-ratio:16/9;background:var(--image-placeholder)}
.vid .frame{overflow:hidden}
.vid .frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid .frame .scrim{position:absolute;inset:0;background:var(--scrim-bottom)}
.vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vid .play>span{width:52px;height:52px;border-radius:var(--radius-circle);background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);color:var(--purple-600)}
.vid .dur{position:absolute;right:10px;bottom:10px;background:rgba(23,26,31,.78);color:#fff;font-family:var(--font-label);font-size:10px;padding:3px 7px;border-radius:var(--radius-xs)}
.vid .body{padding:18px}
.vid h4{font-size:var(--text-sm);line-height:var(--leading-normal)}
.vid .doc{margin-top:8px;font-size:var(--text-2xs);color:var(--text-label)}

/* ---------- LogoStrip ---------- */
.logos .lbl{text-align:center;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);margin-bottom:24px}
.logos .roll-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
@keyframes ssoLogoRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logos .roll{display:inline-flex;animation:ssoLogoRoll 26000ms linear infinite}
.logos .roll:hover{animation-play-state:paused}
/* Spacing lives on each item (not as a row gap) so the duplicated set is exactly
   half the row width and translateX(-50%) seams without a jump. */
.logos .logo-row{display:flex;align-items:center;gap:0;flex-wrap:nowrap;justify-content:flex-start}
.logos .item{height:34px;min-width:110px;margin-right:40px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--image-placeholder);border-radius:var(--radius-xs);padding:0 14px;font-family:var(--font-label);font-size:10px;color:var(--neutral-500);filter:grayscale(1);white-space:nowrap}

/* ---------- TopBar / SiteHeader ---------- */
/* Chrome: pinned on DESKTOP only (>=861px) — fixed rather than sticky so ancestor
   overflow/transform contexts can't silently break it. On phones it scrolls away with the
   page, which is the design's original behaviour and keeps the mobile hero geometry intact.
   --chrome-h reserves the pinned bar's space; shared.js measures the real height and
   overwrites it, because the bar grows with the nav's compression and wrapping. */
:root{--chrome-h:116px}
/* The utility bar must not wrap — a second line silently grows the bar. */
.topbar .in{flex-wrap:nowrap}
.topbar .links{flex-wrap:nowrap;min-width:0;overflow:hidden}
.topbar .tel{flex:none;white-space:nowrap}
@media (min-width:861px){
  /* STICKY, not fixed. A fixed bar is out of flow, so the space beneath it had to be
     reserved by hand (body padding from a measured --chrome-h) — and any time that
     measurement was wrong or the stylesheet was stale, the first thing in <main> (the
     breadcrumb trail, only ~37px tall) sat underneath the bar and read as missing on
     desktop while mobile, where the bar is in flow, looked fine. Sticky occupies its own
     space in normal flow, so nothing can ever hide behind it and no measurement is
     involved. Kept: scroll-padding-top, so in-page anchors don't land under the bar. */
  .chrome{position:sticky;top:0;z-index:60}
  html{scroll-padding-top:max(var(--chrome-h,116px),96px)}
}
/* Phones: back to normal flow — no pinning, no reserved space, no offset. */
@media (max-width:860px){
  :root{--chrome-h:0px}
  .chrome{position:relative;z-index:60}
}
/* Logged-in admin bar is itself fixed at the top — drop the chrome below it. */
@media (min-width:861px){body.admin-bar .chrome{top:32px}}
.topbar{background:var(--surface-inverse);color:rgba(255,255,255,.85);font-size:var(--text-2xs)}
.topbar .in{width:100%;max-width:100%;margin:0 auto;padding:0 var(--shell-gutter);height:38px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.topbar .links{display:flex;gap:22px}
.topbar .links a{color:rgba(255,255,255,.72)}
.topbar .links a:hover{color:#fff}
.topbar .tel{display:flex;align-items:center;gap:7px;color:#fff;font-weight:600}
.hdr{position:relative;background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--border-subtle)}
.hdr .in{width:100%;max-width:100%;margin:0 auto;padding:0 var(--shell-gutter);height:78px;display:flex;align-items:center;gap:36px}
.hdr .logo{flex:none}
.hdr .logo img{height:42px;width:auto;object-fit:contain}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav>li{position:relative}
.nav>li>a{display:flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--neutral-700);padding-bottom:3px;border-bottom:2px solid transparent;transition:var(--transition-base)}
.nav>li:hover>a{color:var(--purple-600)}
.nav .sub{position:absolute;top:100%;left:-14px;padding-top:12px;display:none;z-index:20}
.nav>li:hover .sub{display:block}
.nav .sub-in{min-width:246px;background:var(--neutral-0);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:8px}
.nav .sub-in a{display:block;padding:9px 12px;font-size:var(--text-xs);color:var(--text-body);border-radius:var(--radius-xs)}
.nav .sub-in a:hover{background:var(--purple-50);color:var(--purple-700)}
/* ---------- Mega menus: Cancer Types, Treatments (inc/nav-walkers.php) ----------
   The panel anchors to the nav's right edge (its <li> goes static) so a wide panel never runs off
   the viewport; an intro column, then the items filling columns top to bottom (--rows). */
.nav{position:relative}
.nav>li.has-mega{position:static}
.nav>li:focus-within .sub{display:block}
.nav .sub.mega{left:auto;right:0;padding-top:14px}
.nav .sub-in.mega-in{width:min(760px,calc(100vw - 48px));min-width:0;display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);padding:0;overflow:hidden;border-radius:var(--radius-lg)}
.mega-intro{display:flex;flex-direction:column;gap:10px;padding:24px 22px 22px;background:var(--purple-50)}
.mega-k{font-family:var(--font-label);font-size:var(--text-3xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--purple-600)}
.mega-intro p{margin:0;font-family:var(--font-display);font-size:var(--text-md);line-height:var(--leading-snug);color:var(--text-heading)}
.nav .sub-in a.mega-all{margin-top:auto;display:inline-flex;align-items:center;gap:6px;padding:0;border-radius:0;background:none;font-weight:var(--weight-semibold);color:var(--purple-700)}
.nav .sub-in a.mega-all:hover{background:none;text-decoration:underline;text-underline-offset:3px}
.mega-list{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,6),auto);grid-auto-columns:minmax(0,1fr);gap:2px 10px;padding:14px;align-content:start}
.nav .mega-list a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);line-height:1.3}
.mega-list .mi{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-circle);background:var(--neutral-50);color:var(--purple-600);transition:background 200ms var(--ease-out)}
.mega-list .mi-dot::after{content:"";width:6px;height:6px;border-radius:var(--radius-circle);background:var(--purple-400)}
.nav .mega-list a:hover .mi,.nav .mega-list a.on .mi{background:var(--neutral-0)}
.burger{display:none;width:44px;height:44px;margin-left:auto;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;background:none;border:none;padding:0 4px;color:var(--purple-700);cursor:pointer}
.burger .bl{display:block;width:24px;height:2.5px;border-radius:2px;background:currentColor;transform-origin:center;transition:transform 300ms var(--ease-out),opacity 200ms var(--ease-out),width 300ms var(--ease-out)}
.burger .bl:nth-child(2){width:16px}
.burger.on .bl{width:24px}
.burger.on .bl:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.on .bl:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger.on .bl:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* Drawer overlays the page (anchored under the sticky header) instead of pushing it,
   and animates open/closed. */
.drawer{position:absolute;left:0;right:0;top:100%;border-top:1px solid var(--border-subtle);background:var(--neutral-0);max-height:70vh;overflow-y:auto;padding:10px 20px 20px;box-shadow:0 24px 44px rgba(46,33,69,.18);visibility:hidden;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s linear 220ms}
.drawer.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.drawer .it{border-bottom:1px solid var(--border-subtle)}
.drawer-util{margin-top:0;padding-top:0;display:block}
.drawer-util a{display:flex;align-items:center;justify-content:space-between;padding:16px 2px;min-height:48px;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--neutral-700);border-bottom:1px solid var(--border-subtle)}
.drawer-util a:hover{color:var(--text-heading)}
.drawer .it>a{display:flex;align-items:center;justify-content:space-between;padding:16px 2px;min-height:48px;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--neutral-700)}
.drawer .kids{display:none;padding-bottom:10px}
.drawer .it.open .kids{display:block}
.drawer .kids a{display:block;padding:12px;min-height:44px;font-size:var(--text-xs);color:var(--text-body)}

/* ---------- SiteFooter ---------- */
.ftr{background:linear-gradient(160deg,#fbfdfb 0%,var(--green-50,#eef7f1) 42%,var(--blue-50,#e8f1f9) 100%);color:var(--text-body);border-top:1px solid var(--border-subtle)}
.ftr .in{width:100%;max-width:100%;margin:0 auto;padding:64px var(--shell-gutter) 32px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px}
.ftr img.mark{height:46px}
.ftr h4{color:var(--text-heading);font-size:var(--text-sm)}
.ftr .cbl{margin-top:26px}
.ftr .contact{margin-top:12px;display:grid;gap:9px;font-size:var(--text-xs)}
.ftr .contact a{display:flex;gap:8px;align-items:center;color:var(--text-body);text-decoration:none}
.ftr .contact a:first-child{color:var(--text-heading);font-weight:600}
.ftr .contact a:hover{color:var(--blue-700,#1d5b8f)}
.ftr .social{margin-top:22px;display:flex;gap:10px}
.ftr .social a{width:34px;height:34px;border-radius:var(--radius-circle);background:var(--neutral-0);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;color:var(--green-700,#2f6b4c);transition:var(--transition-base)}
.ftr .social a:hover{background:var(--green-600);border-color:var(--green-600);color:var(--neutral-0)}
.ftr .col-links{margin-top:14px;display:grid;gap:9px}
.ftr .col-links a{font-size:var(--text-xs);color:var(--text-muted);text-decoration:none}
.ftr .col-links a:hover{color:var(--blue-700,#1d5b8f)}
.ftr .base{border-top:1px solid var(--border-subtle)}
.ftr .base .in2{width:100%;max-width:100%;margin:0 auto;padding:20px var(--shell-gutter);display:flex;justify-content:space-between;gap:16px;font-size:var(--text-2xs);color:var(--text-muted)}
.ftr .base a{color:inherit;text-decoration:none}
.ftr .base a:hover{color:var(--blue-700,#1d5b8f)}

/* ---------- BookingCard ---------- */
.book{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:14px;padding:10px;background:linear-gradient(135deg,rgba(106,44,182,.32) 0%,rgba(46,33,69,.56) 100%);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),var(--shadow-purple);border-radius:var(--radius-lg);transition:var(--transition-base)}
.book:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),var(--shadow-xl)}
.book.hid,.book-fab.hid{opacity:0;pointer-events:none;transition:opacity 300ms var(--ease-out)}
@media (min-width:861px) and (max-height:700px){.book{gap:10px;padding:8px}.book img{width:44px;height:44px}.book .ttl{font-size:var(--text-2xs)}.book .act .b-sm{padding:6px 6px 6px 14px}}
/* Desktop-only idle float — pauses on hover so the CTA is easy to hit. */
@media (min-width:861px){
  .book{animation:ssoBookFloat 4.2s ease-in-out infinite}
  .book:hover{animation-play-state:paused;transform:translateY(-2px) rotate(0)}
  .book img{transition:transform 400ms var(--ease-out)}
  .book:hover img{transform:scale(1.06)}
  @keyframes ssoBookFloat{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-7px) rotate(-.6deg)}60%{transform:translateY(-2px) rotate(.4deg)}}
}
.book .r{display:none}
.book img{width:58px;height:66px;object-fit:cover;object-position:center top;border-radius:var(--radius-sm);flex:none}
.book .txt{padding-right:4px}
.book .ttl{font-family:var(--font-display);font-size:var(--text-sm);color:var(--neutral-0);line-height:var(--leading-snug);letter-spacing:.04em;white-space:nowrap}
.book .act{margin-top:8px}
.book-fab{display:none;position:fixed;right:12px;bottom:14px;z-index:60;width:56px;height:56px;padding:3px;border-radius:var(--radius-circle);border:none;cursor:pointer;background:linear-gradient(135deg,rgba(106,44,182,.5) 0%,rgba(46,33,69,.72) 100%);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),var(--shadow-purple)}
.book-fab .r{display:none}
.book-fab img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:var(--radius-circle)}

/* ================= responsive (860px = the React build's mobile switch) ================= */
@media (max-width:860px){
  /* React swaps Button size lg -> sm on mobile; match the sm metrics exactly. */
  .b-lg{padding:7px 7px 7px 18px;font-size:var(--text-xs);gap:8px;--knob-d:28px;--pad-r:7px;--sweep-d:520px;--sweep-rest:.0538}
  .b-lg .knob .ic{width:14px!important;height:14px!important}
  /* Hero CTA overrides are sized for the 34px desktop knob; re-match the mobile
     sm metrics or the purple sweep circle pokes outside the pill. */
  .hero .cta .b-lg,.chero .cta .b-lg,.help-cta .b-lg{padding:7px 7px 7px 18px;gap:8px;width:auto;--knob-d:28px;--pad-r:7px;--sweep-d:520px;--sweep-rest:.0538}
  .hero .cta .b-lg .knob .ic,.chero .cta .b-lg .knob .ic,.help-cta .b-lg .knob .ic{width:14px!important;height:14px!important}
  #locations .loc-head{grid-template-columns:1fr!important;gap:24px!important;align-items:start!important}
  #locations .loc-head>div:last-child{justify-content:flex-start!important}
  .sec{padding:48px 0}
  .sec-intro+.sec{padding-top:var(--space-6)}
  #locations{padding:48px 0!important}
  .sec.logos-sec{padding:24px 0 48px!important}
  #pay-cta{margin-top:18px!important}
  .topbar .links{display:none}
  .topbar .in{justify-content:center;padding:0 20px}
  .hdr .in{padding:0 20px;height:64px;gap:16px}
  .hdr .logo img{height:34px}
  .nav,.hdr .headcta{display:none}
  .burger{display:flex}
  /* The bar is fixed, so the hero's usable height is the viewport minus the MEASURED bar
     (the old hardcoded 100px is smaller than the real bar, which pushed the copy out of the
     box). min-height only — never a fixed height — or a long headline overflows and
     .hero{overflow:hidden} clips the eyebrow and first line off the top. */
  .hero{min-height:max(470px,calc(100svh - 100px));height:auto}
  .hero .in{min-height:max(470px,calc(100svh - 100px));height:auto;display:flex;flex-direction:column;justify-content:flex-start;padding:24px 20px 54px}
  /* Copy flows from the top on phones; the photo band and stats sit below it. */
  .hero .copy{align-content:start}
  .hero .slides{min-height:0}
  .hero .stats{display:none}
  .hero-stats-band{display:block;background:var(--surface-inverse);padding:20px}
  .hero-stats-band .stats{display:flex;gap:14px;justify-content:space-between;white-space:nowrap}
  /* Below 375px the four stats (their uppercase, tracked labels set the width) ran 22px past a
     320px screen. Gap and label tracking ease in under 375 only; 375+ is unchanged. */
  .hero-stats-band .stats{gap:clamp(6px,calc((100vw - 320px) * .2 + 6px),14px)}
  .hero-stats-band .stat .l{letter-spacing:clamp(.02em,calc((100vw - 320px) * .02),var(--tracking-caps))}
  .hero .dots{margin-top:auto}
  .hero .col{max-width:100%}
  .hero .bg{display:none}
  /* Photo band: square (capped at 62svh), anchored top. It was 5:4 anchored bottom, which
     cropped the doctor's head off the square slide photo. The copy column reserves the
     band's height (less a short overlap into the veil) so a long headline pushes the
     band down instead of running over the picture; the dots stay on the photo. */
  .hero .bg-m{display:block;position:absolute;left:0;right:0;bottom:0;height:min(100vw,62svh)}
  .hero .col{margin-bottom:calc(min(100vw,62svh) - 70px)}
  .hero .bg-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) top;opacity:0;transition:opacity 1000ms var(--ease-standard)}
  .hero .bg-m img.on{opacity:1}
  .hero .bg-m .veil{position:absolute;inset:0;background:linear-gradient(180deg,var(--surface-inverse) 0%,color-mix(in srgb,var(--surface-inverse) 55%,transparent) 10%,color-mix(in srgb,var(--surface-inverse) 12%,transparent) 26%,color-mix(in srgb,var(--surface-inverse) 4%,transparent) 100%)}
  .hero :is(h1,h2){margin-top:14px;font-size:30px;line-height:var(--leading-tight)}
  .hero :is(h1,h2):has(.hl-keep){font-size:min(30px,8.2vw)}   /* kept phrase fits a 320px phone */
  .hero .copy .lede{margin-top:12px;font-size:15px}
  .hero .copy .cta{margin-top:20px}
  .hero .stats{margin-top:22px;gap:14px;justify-content:space-between}
  .stat .v{font-size:var(--text-md)}
  .sh :is(h1,h2){font-size:var(--text-xl)}
  .sh .lede{margin-top:10px;font-size:var(--text-sm)}
  .spot{margin-top:22px;gap:14px;grid-template-columns:1fr;grid-template-areas:"rail" "dots" "stage"}
  /* Arrows flank the rail on mobile; the dot row is redundant there. */
  .spot-railwrap{display:flex;align-items:center;gap:8px}
  #spot-dots{display:none}
  .spot-rail{flex:1;min-width:0}
  .spot-arw{display:inline-flex;flex:none;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:var(--radius-circle);background:var(--neutral-0);border:1px solid var(--border-subtle);color:var(--purple-700);box-shadow:var(--shadow-sm);cursor:pointer;transition:var(--transition-base)}
  .spot-arw:disabled{opacity:.35;cursor:default}
  .spot-rail{grid-template-columns:repeat(3,1fr)}
  /* Scales with width: a fixed 240px band at tablet width (691×240) left room for only part of a face. */
  .spot-photo{height:clamp(240px,52vw,380px);min-height:0}
  .spot-stage{grid-template-columns:1fr;gap:24px}
  .spot-row{flex-direction:column;align-items:flex-start;gap:18px;flex-wrap:wrap}
  .spot-id{min-width:0}
  .spot-rail button{height:180px}
  .spot-rail .cap{padding:22px 9px 9px}
  .spot-rail .cap .n{font-size:var(--text-2xs)}
  .spot-rail .cap .s{font-size:9px}
  .spot-copy>div{grid-template-columns:1fr;gap:22px}
  .spot-count{margin-bottom:10px}
  .spot-copy h3{font-size:var(--text-lg)}
  .spot-spec{margin-top:12px;font-size:var(--text-md)}
  .spot-cta{margin-top:20px;gap:12px}
  .spot-meta{margin-top:16px;gap:0 20px}
  .spot-meta>div{padding-left:12px}
  .spot-rail .cap{padding:16px 6px 6px;gap:2px}
  .spot-rail .cap .s{display:none}
  .spot-rail{gap:10px}
  .spot-rail button{height:86px}
  .why{height:400px}
  .why .veil{background:linear-gradient(180deg,rgba(46,33,69,.5) 0%,rgba(46,33,69,.68) 100%)}
  .why .copy{left:20px;right:20px;max-width:none}
  .strip{display:none}
  .strip-plates{margin-top:28px;display:flex;gap:10px}
  .strip-plates button{flex:1;min-width:0;height:150px;position:relative;padding:0;border:none;cursor:pointer;overflow:hidden;border-radius:var(--radius-lg);background:var(--neutral-100);filter:grayscale(.55)}
  .strip-plates button.on{filter:none;outline:2px solid var(--purple-600);outline-offset:-2px}
  .strip-plates img{width:100%;height:100%;object-fit:cover}
  .strip-m-panel{margin-top:16px;background:var(--neutral-0);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
  .strip-foot{margin-top:22px;justify-content:center}
  .strip-foot p{display:none}
  .pay-grid{grid-template-columns:1fr;gap:32px}
  .pay-row{grid-template-columns:34px 1fr;gap:10px;padding:14px 0}
  .pay-row .n{font-size:var(--text-lg)}
  .pay-row h4{font-size:var(--text-md)}
  .pay-row p{margin-top:5px;font-size:var(--text-xs)}
  .pay-note{margin-top:14px}
  .rev-grid{grid-template-columns:1fr;gap:30px}
  .rev-side{position:static}
  .rev-cols{grid-template-columns:1fr;height:520px}
  .rev-cols .mq-d{display:none}
  .rev-cols .mq-m{display:block}
  .ftr .in{padding:44px 20px 28px;grid-template-columns:1fr;gap:32px}
  .ftr .base .in2{padding:18px 20px;flex-direction:column;gap:10px}
  .book{display:none}
  .book-fab{display:block}
}
@media (min-width:861px) and (max-width:1099px){
  /* Three 250px plates left the open story ~140px for its quote at 992 (one word per line).
     150px plates give the full 60-110 word quote ~470px, so it fits the 460px-high strip. */
  .strip>.cell{flex-basis:150px}
  .strip .plate-btn{flex-basis:150px}
  .strip .qp{padding:18px 22px}
  .hdr .in{gap:14px}
  .nav{gap:16px}
  .hdr .headcta .lbl{display:none}
  .hdr .headcta{padding-inline:14px}
  .spot{grid-template-columns:minmax(270px,34%) 1fr;grid-template-areas:"rail stage" "dots stage";gap:16px 32px}
  .spot-stage{grid-template-columns:1fr;gap:22px}
  .spot-photo{min-height:330px}
}
@media (min-width:861px){
  .hero .bg-m,.strip-plates,.strip-m-panel,.hero-stats-band{display:none}
}

/* ---------- Booking sheet ---------- */
.bk-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,12,38,.5);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity 240ms var(--ease-standard)}
.bk-ov.on{opacity:1;pointer-events:auto}
.bk-sheet{position:relative;width:min(420px,100%);max-height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden;background:var(--neutral-0);border-radius:var(--radius-lg);box-shadow:0 30px 70px rgba(20,12,38,.3);transform:translateY(12px) scale(.98);transition:transform 280ms var(--ease-out)}
.bk-ov.on .bk-sheet{transform:none}
.bk-x{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer;transition:var(--transition-base)}
.bk-x:hover{background:var(--surface-subtle,#f4f2f7);color:var(--text-heading)}
.bk-body{padding:24px 22px 22px}
.bk-body,.bk-body :not(.b):not(.b *){box-sizing:border-box}
.bk-body input,.bk-body select,.bk-body .bk-dd,.bk-body .bk-call{max-width:100%}
.bk-body h3{font-family:var(--font-display);font-size:var(--text-xl);color:var(--text-heading)}
.bk-sub{margin-top:6px;font-size:var(--text-2xs);color:var(--text-muted);line-height:var(--leading-relaxed)}
.bk-call{margin-top:16px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md,10px);border:1px solid var(--border-subtle);background:var(--surface-subtle,#faf9fb);text-decoration:none;transition:var(--transition-base)}
.bk-call:hover{border-color:var(--border-default,#ddd8e6);background:var(--neutral-0);box-shadow:0 8px 20px rgba(46,33,69,.07)}
.bk-call-ic{flex:none;display:flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:50%;background:var(--neutral-0);border:1px solid var(--border-subtle);color:var(--text-heading)}
.bk-call span span{display:block}
.bk-call .l{font-size:10px;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-family:var(--font-label);color:var(--text-muted)}
.bk-call .n{margin-top:2px;font-family:var(--font-display);font-size:var(--text-sm);color:var(--text-heading)}
.bk-or{position:relative;margin:16px 0 14px;text-align:center}
.bk-or::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border-subtle)}
.bk-or span{position:relative;padding:0 10px;background:var(--neutral-0);font-size:10px;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-family:var(--font-label);color:var(--text-muted)}
.bk-form{display:grid;gap:10px}
.bk-f{display:grid;gap:4px;min-width:0}
.bk-f>span{font-size:10px;font-family:var(--font-label);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.bk-f>span i{font-style:normal;text-transform:none;letter-spacing:0}
.bk-f input,.bk-f select{width:100%;min-width:0;padding:9px 11px;border-radius:8px;border:1px solid var(--border-default,#ddd8e6);background:var(--neutral-0);font-family:inherit;font-size:var(--text-xs);color:var(--text-heading)}
.bk-f input:focus,.bk-f select:focus{outline:none;border-color:var(--text-heading);box-shadow:none}
.bk-f.err input,.bk-f.err select{border-color:var(--crimson-600,#c0304a)}
.bk-dd{position:relative}
.bk-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--border-default,#ddd8e6);background:var(--neutral-0);font-family:inherit;font-size:var(--text-xs);color:var(--text-heading);cursor:pointer;text-align:left;transition:var(--transition-base)}
.bk-dd-btn:hover{border-color:var(--text-heading)}
.bk-dd-btn .cv{flex:none;width:7px;height:7px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg) translateY(-2px);transition:transform 200ms var(--ease-standard)}
.bk-dd.open .bk-dd-btn{border-color:var(--purple-500)}
.bk-dd.open .bk-dd-btn .cv{transform:rotate(-135deg) translateY(1px)}
.bk-dd-menu{position:absolute;bottom:calc(100% + 6px);left:0;right:0;z-index:20;max-height:min(210px,42vh);overflow-y:auto;padding:6px;background:var(--neutral-0);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:0 18px 40px rgba(46,33,69,.16);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity 160ms var(--ease-standard),transform 160ms var(--ease-out)}
.bk-dd.open .bk-dd-menu{opacity:1;transform:none;pointer-events:auto}
.bk-dd-menu{transform:translateY(4px)}
.bk-dd-opt{display:block;width:100%;padding:8px 10px;border:0;border-radius:7px;background:none;font-family:inherit;font-size:var(--text-xs);color:var(--text-body);text-align:left;cursor:pointer;transition:var(--transition-base)}
.bk-dd-opt:hover{background:var(--purple-50,#f7f4fc);color:var(--text-heading)}
.bk-dd-opt.on{background:var(--purple-50,#f7f4fc);color:var(--purple-700);font-weight:600}
.bk-note{font-size:10px;color:var(--text-muted);line-height:var(--leading-relaxed)}
/* Honeypot (inc/enquiry.php): off-screen rather than display:none, which crawlers skip. */
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Submit feedback shared by the booking sheet and the contact form. */
.bk-err,.ct-err{font-size:var(--text-xs);color:var(--crimson-700);line-height:var(--leading-relaxed)}
.bk-form .b[disabled],.ct-form .b[disabled]{opacity:.62;pointer-events:none}
.bk-act{display:flex}
.bk-done{display:none;text-align:center;padding:10px 0 4px}
.bk-done .tick{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in oklab,var(--green-600) 12%,transparent);color:var(--green-600)}
.bk-done h4{margin-top:12px;font-family:var(--font-display);font-size:var(--text-md);color:var(--text-heading)}
.bk-done p{margin-top:6px;font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-relaxed)}
.bk-done a{color:var(--text-heading);font-weight:600;text-decoration:none;white-space:nowrap}
.bk-sheet.sent .bk-form,.bk-sheet.sent .bk-or,.bk-sheet.sent .bk-sub,.bk-sheet.sent .bk-call{display:none}
.bk-sheet.sent .bk-done{display:block}
@media (max-width:860px){.bk-ov{padding:12px}.bk-body{padding:22px 16px 18px}.bk-sheet{max-height:calc(100vh - 24px)}}

/* Submenu entry for the page you are on. */
.nav .sub-in a.on,.drawer .kids a.on{color:var(--purple-700);font-weight:600}

/* ---------- WhatsApp FAB (sits above the booking card; card design untouched) ---------- */
/* ---------- Global search (header icon + drawer) — adds one item, existing header/nav/CTA/burger positions untouched ---------- */
.hdr-search{position:relative;flex:none}
.hdr-search-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--surface-card,#fff);display:flex;align-items:center;justify-content:center;color:var(--purple-700);cursor:pointer;transition:var(--transition-base)}
.hdr-search-btn .ic{color:inherit}
@media (hover:hover){.hdr-search-btn:hover{background:var(--purple-50)}}
.hdr-search-panel{position:absolute;top:calc(100% + 14px);right:0;width:360px;background:var(--surface-card,#fff);border:1px solid var(--border-subtle);border-radius:var(--radius-lg,16px);box-shadow:0 28px 60px -24px rgba(46,33,69,.32);padding:14px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);z-index:80}
.hdr-search.open .hdr-search-panel{opacity:1;visibility:visible;transform:translateY(0)}
.hdr-search-box{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--border-default,#ddd8e6);border-radius:var(--radius-lg,10px);background:var(--surface-subtle,#f7f5fb)}
.hdr-search-box .ic{flex:none}
.hdr-search-input{flex:1;min-width:0;border:none;background:transparent;font-size:var(--text-sm);color:var(--text-heading);outline:none;font-family:inherit}
.hdr-search-input:focus,.hdr-search-input:focus-visible{outline:none;box-shadow:none}
.hdr-search-box:focus-within{border-color:var(--purple-400,var(--purple-500))}
.hdr-search-clear{flex:none;border:none;background:none;padding:2px;margin:0;color:var(--text-muted);cursor:pointer;display:flex}
.hdr-search-results{max-height:360px;overflow:auto}
.hdr-search-results.has{margin-top:10px;border-top:1px solid var(--border-subtle);padding-top:10px}
.hsr-item{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:var(--radius-lg,8px);text-decoration:none}
@media (hover:hover){.hsr-item:hover{background:var(--purple-50)}}
.hsr-cat{font-family:var(--font-label);font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--purple-700)}
.hsr-tt{font-size:var(--text-sm);font-weight:600;color:var(--text-heading);line-height:1.3}
.hsr-sub{font-size:var(--text-2xs);color:var(--text-muted);line-height:1.3}
.hsr-empty{padding:6px 4px 2px;text-align:center}
.hsr-empty p{font-size:var(--text-xs);color:var(--text-body);line-height:1.4}
.hsr-empty-row{display:flex;gap:10px;margin-top:10px}
.hsr-empty-a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg,10px);font-size:var(--text-xs);font-weight:600;color:var(--text-heading);text-decoration:none}
@media (hover:hover){.hsr-empty-a:hover{background:var(--purple-50)}}
.hsr-empty .b{margin:10px auto 0;display:inline-flex}
@media (max-width:860px){
  /* Search sits beside the burger in the header, not inside the drawer. */
  .hdr-search{display:block;margin-left:auto}
  .hdr .burger{margin-left:4px}
  .hdr-search-btn{width:40px;height:40px}
  .hdr-search-panel{width:min(360px,calc(100vw - 24px));right:-40px;max-height:70svh;overflow:auto}
}
.drawer-search{display:none}
.drawer-search .hdr-search-results.has{margin-top:10px}
.wa-fab{position:fixed;right:20px;bottom:124px;z-index:61;display:flex;align-items:center;gap:0;width:52px;height:52px;padding:0;border-radius:var(--radius-pill);background:#25d366;color:#fff;box-shadow:0 10px 26px rgba(16,90,52,.34);text-decoration:none;overflow:hidden;transition:width 320ms var(--ease-out),box-shadow 260ms var(--ease-out),opacity 300ms var(--ease-out)}
.wa-fab svg{flex:none;width:52px;height:52px;padding:13px}
.wa-fab .lbl{white-space:nowrap;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;opacity:0;transition:opacity 200ms var(--ease-out)}
.wa-fab:hover{width:200px;box-shadow:0 14px 32px rgba(16,90,52,.42)}
.wa-fab:hover .lbl{opacity:1}
.wa-fab.hid{opacity:0;pointer-events:none}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:ssoWaPulse 2.6s ease-out infinite;pointer-events:none}
@keyframes ssoWaPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){.wa-fab::after{animation:none}}
@media (max-width:860px){
  .wa-fab{right:12px;bottom:80px;width:46px;height:46px}
  .wa-fab svg{width:46px;height:46px;padding:11px}
  .wa-fab:hover{width:46px}
  .wa-fab .lbl{display:none}
}

/* ---------- Back to top ----------
   Stacks above the WhatsApp button on the right edge, centred on it (desktop 52px → 44px button,
   phone 46px → 40px). The outer circle is the scroll-progress ring; the inner one the button. */
.to-top{position:fixed;right:24px;bottom:188px;z-index:61;width:44px;height:44px;padding:3px;border:0;border-radius:var(--radius-circle);cursor:pointer;
  background:conic-gradient(var(--purple-600) calc(var(--p,0) * 1turn),var(--purple-100) 0);box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out),visibility 0s linear 260ms}
.to-top.on{opacity:1;visibility:visible;transform:none;transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.to-top-in{width:100%;height:100%;display:grid;place-items:center;border-radius:var(--radius-circle);background:var(--neutral-0);color:var(--purple-700);transition:background-color 200ms var(--ease-out),color 200ms var(--ease-out)}
.to-top:focus-visible{outline:2px solid var(--purple-600);outline-offset:3px}
@media (hover:hover){.to-top:hover .to-top-in{background:var(--purple-600);color:var(--neutral-0)}}
body:has(#drawer.open) .to-top{opacity:0;visibility:hidden}
@media (max-width:860px){.to-top{right:15px;bottom:136px;width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.to-top,.to-top.on{transform:none}}

/* Header nav sits on the header’s vertical centre. */
.hdr .in>.nav{align-self:center;align-items:center}
.hdr .nav>li{display:flex;align-items:center;flex:none}
.hdr .nav>li>a{white-space:nowrap}

/* §3: at xxxl+ the fluid shell keeps growing; pin every shell band to the same 1800px rail
   so the utility bar, nav, hero copy, section content and footer share one left/right edge.
   Lives here (not pages.css) because every page loads site.css. */
@media (min-width:1800px){
  .topbar .in,.hdr .in,.ftr .in,.ftr .base .in2,.hero .in,.wrap{max-width:calc(1800px + var(--shell-gutter) * 2)}
  .topbar .in,.hdr .in,.ftr .in,.ftr .base .in2,.hero .in{margin-inline:auto}
}

/* ---------- Phone tap targets (CLAUDE.md §11: >=44px) ----------
   The pill sizes are tuned for pointer use; on touch every button clears 44px
   without changing its knob or sweep geometry. */
@media (max-width:860px){
  .b-sm,.b-md,.b-lg{min-height:44px}
  .b-sm{padding:8px 8px 8px 18px}
  .b-md{padding:10px 10px 10px 22px}
  .hero .cta .b-lg,.chero .cta .b-lg,.help-cta .b-lg{min-height:44px;padding:8px 8px 8px 18px}
  .dcard .act{gap:10px;flex-wrap:wrap}
  /* Phone: the pills go full-width, so the label centres instead of hugging the left. */
  .dcard .act .b{min-height:44px;flex:1 1 100%;justify-content:center;padding-left:14px;padding-right:38px;position:relative}
  .dcard .act .b .lbl{margin-inline:auto}
  .dcard .act .b .knob{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
  .dcard .act .b{--knob-c:calc(8px + var(--knob-d) / 2)}
  .dcard .act .b-lilac .knob{background:var(--purple-800)}
  /* Specialty overlay CTA follows the same phone pattern as the card CTAs:
     full-width pill, label centred clear of the knob, sweep centred under it. */
  .spec .over .act .b{min-height:44px;width:100%;justify-content:center;padding-left:14px;padding-right:38px;position:relative}
  .spec .over .act .b .lbl{margin-inline:auto}
  .spec .over .act .b .knob{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
  .spec .over .act .b{--knob-c:calc(8px + var(--knob-d) / 2);--sweep-d:1800px;--sweep-rest:.01556}
  .spec .over .act .b:hover .sweep{transform:scale(1)}
  .dcard .act .b:hover .sweep{transform:scale(1)}
  button.down{width:44px;height:44px}
}
/* A link inside running text must not rely on colour alone (WCAG 1.4.1) — e.g. the phone number
   in the cancer / treatment hero lede. */
.lede a{text-decoration:underline;text-underline-offset:2px}
/* Expandable items carry both icons (render.php::sso_ic_toggle); the item's .on state picks one,
   so opening/closing is a class change, never a re-render. */
:is(.faq-c,.fx-it,.acc-it):not(.on) .ic-m,:is(.faq-c,.fx-it,.acc-it).on .ic-p{display:none}
.faq-a[hidden],.acc-a[hidden],.fx-a[hidden],.fx-panel[hidden]{display:none}
.strip-m-panel .qp[hidden]{display:none}

.b .lbl[hidden]{display:none}
.bk-ov{visibility:hidden;transition:opacity 240ms var(--ease-standard),visibility 0s linear 240ms}
.bk-ov.on{visibility:visible;transition:opacity 240ms var(--ease-standard)}
.loc[hidden],.rail-page[hidden],.dots-row button[hidden],.loc-count [hidden]{display:none}

/* Body map: both layouts are in the HTML (sso_body_map); the breakpoint picks one. */
.bmap .map-m{display:none}
@media (max-width:860px){.bmap .map-d{display:none}.bmap .map-m{display:block}}
.map-wrap.map-d{aspect-ratio:1180/470;max-height:470px}
.map-svg .pulse,.map-svg g.on .tip{display:none}
.map-svg g.on .pulse{display:inline}
.map-svg g.on .ol{stroke:var(--neutral-0);stroke-width:1.8}
.map-svg path.on{stroke-width:3.4}
.map-svg path.fine.on{stroke:var(--neutral-0);stroke-width:1.5}
.mmap-svg .act,.mmap-svg g.on .dot{display:none}
.mmap-svg g.on .act{display:inline}
.mmap-pill{width:max(96px,calc((100% - 153px) / 2 - 8px))}
.mmap img{left:50%;top:50%;width:clamp(72px,100% - 200px,153px);aspect-ratio:.612;height:auto;transform:translate(-50%,-50%)}
/* Home videos: grid above 860px, paged rail below — both server-rendered. */
@media (max-width:860px){#vid-desktop{display:none!important}}
@media (min-width:861px){#vid-mobile{display:none}}
.spot-rail:not(.spot-rail-mq) .dup{display:none}

/* Missing-photo placeholder: a static tinted tile (no script, no caption). */
image-slot{display:block;position:relative;width:100%;height:100%;aspect-ratio:3/2;background:var(--image-placeholder);overflow:hidden}
image-slot[shape="rounded"]{border-radius:var(--radius-lg)}
image-slot[shape="circle"]{border-radius:var(--radius-circle)}
image-slot[shape="pill"]{border-radius:var(--radius-pill)}

/* Full patient quotes: centred when they fit, top-aligned (never clipped) when they don't. */
.qp{justify-content:safe center}
.qp.qp-long .q{font-size:var(--text-sm)}
.qp.qp-long .mk.top{margin-bottom:12px}
.qp.qp-long .mk.bot{margin-top:12px}