/* Muswellbrook Doctors — front template styles
   GENERATED by _wp_assets.py from the static build.
   Do not hand-edit: regenerate instead, or the two will drift. */
/* ═══ 01 HERO ═══ */
#hero{height:clamp(560px,84svh,820px);position:relative;background:var(--euc-3);overflow:hidden}
/* On the homepage this block now follows the "not sure who to choose" panel,
   which already ends in its own edge — the rule was a second divider on top
   of the first. About keeps its border, where .tm still follows the bare
   doctor grid and the separation is doing real work. */
#people .tm{border-top:0}
/* ═══ 02d ADHD ASSESSMENT ═══ */
#adhd{background:linear-gradient(168deg,var(--euc) 0%,var(--euc-3) 78%);color:var(--tx-i);
 padding:clamp(48px,5.6vw,88px) 0 clamp(44px,5vw,74px);position:relative;overflow:clip}
#adhd:before{content:"";position:absolute;left:-6%;top:-24%;width:46%;height:150%;pointer-events:none;
 background:radial-gradient(closest-side,rgba(52,185,215,.18),rgba(52,185,215,0) 70%)}
/* editorial: nothing is enclosed. Hairlines and space only — no pill, no card,
   no bordered panel anywhere in this section. */
.adg{display:grid;grid-template-columns:1fr clamp(190px,17vw,250px);gap:clamp(28px,3.4vw,60px);
 align-items:end}
.adeb{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--yl)}
#adhd .adh{margin-top:13px;font-family:var(--fd);font-weight:800;letter-spacing:-.028em;
 line-height:1.06;font-size:clamp(28px,4vw,54px);color:#fff;max-width:17ch}
#adhd .adld{margin-top:clamp(16px,1.8vw,24px);font-size:clamp(14px,1.15vw,16.4px);line-height:1.7;
 color:#DCE6F5;max-width:54ch}
#adhd .adld b{color:#fff;font-weight:600}
.adpt{position:relative;aspect-ratio:4/5}
.adpt .fr{position:absolute;inset:0}
.adpt picture>img,.adpt .fr>img{width:100%;height:100%;object-fit:cover;object-position:center top;
 -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);
 mask-image:linear-gradient(180deg,#000 62%,transparent)}
.adpc{margin-top:12px;font-size:12.6px;line-height:1.5;color:#BFCEE6}
.adpc b{display:block;font-size:14px;color:#fff;font-weight:700}
/* the three appointments — hairline columns, no tiles */
.adsl{margin-top:clamp(30px,3.6vw,50px);display:grid;grid-template-columns:repeat(3,1fr);
 gap:clamp(20px,2.4vw,40px);border-top:1px solid rgba(255,255,255,.20)}
.adst{padding:clamp(18px,2vw,26px) 0 0;border-left:1px solid rgba(255,255,255,.14);
 padding-left:clamp(18px,2vw,28px)}
.adst:first-child{border-left:0;padding-left:0}
.adst>b{display:block;margin-top:10px;font-size:clamp(14.5px,1.25vw,17px);font-weight:700;
 color:#fff;line-height:1.26}
.adst>span{display:block;margin-top:8px;font-size:13.2px;line-height:1.65;color:#BFCEE6;max-width:44ch}
/* THE NUMERALS LIGHT UP.
   The outline is -webkit-text-stroke on the element; the gold fill is the same
   numeral repeated as ::before and faded in over it. Two layers rather than one
   animated stroke, because text-stroke does not interpolate reliably across
   engines and the two states must stay pixel-aligned. */
.adst>i{position:relative;display:block;font-style:normal;font-family:var(--fd);font-weight:800;
 font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-.04em;
 color:transparent;-webkit-text-stroke:1.4px rgba(247,196,71,.30);
 transition:-webkit-text-stroke-color .6s var(--e)}
.adst>i:before{content:attr(data-n);position:absolute;left:0;top:0;
 color:var(--yl);-webkit-text-stroke:0;opacity:0;transform:translateY(4px);
 text-shadow:0 0 18px rgba(247,196,71,.45);
 transition:opacity .6s var(--e),transform .7s var(--e)}
.adst.in>i{-webkit-text-stroke-color:rgba(247,196,71,.85)}
.adst.in>i:before{opacity:1;transform:none;transition-delay:calc(var(--d,0ms) * .35 + 140ms)}
/* the fee: a rule and a run-in label, not a panel */
.adfee{margin-top:clamp(24px,2.8vw,36px);padding-left:clamp(14px,1.5vw,20px);
 border-left:2px solid var(--yl);font-size:13.3px;line-height:1.7;color:#DCE6F5;max-width:62ch}
.adfl{font-weight:800;letter-spacing:.02em;color:var(--yl)}
.adfee a{color:var(--yl);font-weight:600;white-space:nowrap;border-bottom:1px solid rgba(247,196,71,.4)}
.adfee a s{text-decoration:none}
.adnote{margin-top:clamp(20px,2.4vw,30px);padding-left:clamp(14px,1.5vw,20px);
 border-left:1px solid rgba(255,255,255,.22);font-size:13.4px;line-height:1.7;
 color:#BFCEE6;max-width:58ch}
.adnote b{color:#fff;font-weight:600}
.adcta{margin-top:clamp(20px,2.4vw,30px);display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:860px){
 .adg{grid-template-columns:1fr}
 .adr{max-width:230px}
 .adsl{grid-template-columns:1fr;gap:0}
 .adst{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.14)}
 .adst:first-child{border-top:0}
}
@media(prefers-reduced-motion:reduce){
 .adst>i,.adst>i:before{transition:none}
 .adst>i{-webkit-text-stroke-color:rgba(247,196,71,.85)}
 .adst>i:before{opacity:1;transform:none}
}
/* The stats are a navy band — the one dark element between the story and the
   Medicare section, so it separates them instead of vanishing into the ivory.

   Everything is centred on one axis, and the label and the link SWAP in the
   same space rather than stacking. That is what keeps the band short: the
   earlier version reserved a paragraph's worth of room under each label so the
   hover copy could rise into it without moving the page, and that reserve read
   as a hole whenever nothing was hovered. Swapping means the reserve only has
   to be as tall as the taller of the two lines. */
.stg{position:relative;display:flex;margin-top:clamp(36px,4vw,58px);
 border-radius:22px;overflow:hidden;background:linear-gradient(122deg,var(--euc) 0%,var(--euc-3) 100%);
 box-shadow:0 30px 64px -40px rgba(14,28,60,.75)}
.stg:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(120% 150% at 12% 0%,rgba(52,185,215,.10),rgba(52,185,215,0) 62%);
 animation:stgdrift 15s ease-in-out infinite}
@keyframes stgdrift{0%,100%{opacity:.75;transform:translateX(-2%)}50%{opacity:1;transform:translateX(6%)}}
/* no flex-grow on hover: with centred content a widening panel drags its own
   centre sideways and shunts its neighbours, which reads as a glitch rather
   than an emphasis. The emphasis is vertical instead. */
.sti{position:relative;z-index:1;flex:1 1 0;min-width:0;
 display:flex;flex-direction:column;align-items:center;text-align:center;
 padding:clamp(26px,2.9vw,38px) clamp(16px,1.8vw,24px) clamp(24px,2.6vw,34px);
 border-left:1px solid rgba(255,255,255,.13);opacity:0;
 transition:background .45s var(--e)}
.sti:first-child{border-left:0}
.sti:hover,.sti:focus-visible{background:rgba(255,255,255,.05)}
.sti:focus-visible{outline:2px solid var(--cy);outline-offset:-4px}
.stg.go .sti{animation-name:statrise;animation-duration:.9s;
 animation-timing-function:cubic-bezier(.2,.9,.25,1);animation-fill-mode:both;
 animation-delay:calc(var(--i,0) * 140ms)}
@keyframes statrise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.stin{display:block}
.sti b{display:inline-block;font-family:var(--fd);font-weight:800;letter-spacing:-.035em;line-height:.92;
 font-size:clamp(42px,5vw,70px);color:#fff;font-variant-numeric:tabular-nums;
 transition:transform .5s var(--e),color .4s}
.sti b i{font-style:normal;font-size:.46em;margin-left:3px;vertical-align:.14em;color:var(--yl)}
.sti:hover b,.sti:focus-visible b{transform:translateY(-3px) scale(1.04)}
.sti:nth-child(2) b{color:var(--cy-lt)}
/* the swap: label out, link in, both on the same line of the same box */
.stiw{position:relative;display:block;width:100%;margin-top:11px;min-height:2.9em}
.stiw>span{position:absolute;left:0;right:0;top:0;
 transition:opacity .38s var(--e),transform .45s var(--e)}
.stil{font-size:13.4px;line-height:1.45;font-weight:600;color:#E4ECF9}
.stia{display:flex;align-items:center;justify-content:center;gap:7px;
 font-size:11.8px;font-weight:700;letter-spacing:.03em;color:var(--yl);
 opacity:0;transform:translateY(8px)}
.stia s{text-decoration:none}
.sti:hover .stil,.sti:focus-visible .stil{opacity:0;transform:translateY(-8px)}
.sti:hover .stia,.sti:focus-visible .stia{opacity:1;transform:none}
/* the gold rule draws outward from the centre */
.stiu{display:block;margin-top:clamp(12px,1.3vw,16px);height:2px;width:44px;border-radius:2px;
 background:var(--yl);text-decoration:none;transform:scaleX(.3);
 transition:transform .55s var(--e3)}
.sti:hover .stiu,.sti:focus-visible .stiu{transform:scaleX(1)}
@media(max-width:760px){
 /* no hover to rely on: label and link both show, stacked */
 .stg{flex-direction:column}
 .sti{padding:clamp(22px,5vw,28px);border-left:0;border-top:1px solid rgba(255,255,255,.13)}
 .sti:first-child{border-top:0}
 .stiw{min-height:0}
 .stiw>span{position:static}
 .stia{opacity:1;transform:none;margin-top:9px}
 .sti:hover .stil,.sti:focus-visible .stil{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
 .stg:before{animation:none}
 .stg.go .sti{animation-name:none;opacity:1}
 .sti,.sti b,.stiw>span,.stiu{transition:none}
}
/* Re-proportioned so each slot matches the photograph in it. The old sm2 slot
   was 2 cols x 3 rows of a square grid — an aspect of 0.54, strongly portrait —
   which is what sliced the sign and cut a staff member out of frame. These
   three slots are 1.77, 1.34 and 1.34 against sources of 1.78, 1.45 and 1.50. */
.stym{position:relative;display:grid;grid-template-columns:repeat(6,1fr);
 grid-template-rows:repeat(5,minmax(0,1fr));
 gap:clamp(8px,.9vw,13px);aspect-ratio:1/.94}
@media(max-width:960px){.stym{aspect-ratio:1/.88}}
@media(max-width:560px){.stym{aspect-ratio:1/1.24}}
.sm1{grid-column:1/7;grid-row:1/4}
.sm2{grid-column:1/4;grid-row:4/6}
.sm4{grid-column:4/7;grid-row:4/6}
/* over the entrance photograph, which is the one that is actually
   Muswellbrook Fair — and off the faces in the reception shot */
.stcap{position:absolute;right:clamp(-6px,-.4vw,0px);bottom:clamp(-16px,-1.3vw,-10px);z-index:6;
 background:#fff;border:1px solid var(--ln);border-radius:14px;padding:13px 20px;
 box-shadow:0 18px 34px -18px rgba(34,63,122,.5);text-align:left}
/* ── "Connect with us" — icon-led tiles that unfold into cards ───────────
   At rest the icon is the tile. On hover/focus the icon shrinks into the
   top-left corner and the card is masked open from the icon's own footprint
   (clip-path inset starting as a pill where the icon sits), so the card reads
   as unfolding out of the icon rather than fading in beneath it.

   The expanded state has three triggers, all mapped to one selector list:
     .cx:hover / .cx:focus-visible   pointer and keyboard
     .cx.on                          set by JS on touch, and permanently below
                                     900px and under prefers-reduced-motion
   Contrast under the veil is solved numerically in _build_connect.py — the
   veil stops and the halo/pill opacities are not arbitrary. */
.cxg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,22px);
 margin-top:clamp(28px,3.2vw,44px)}
.cx{position:relative;display:block;overflow:hidden;isolation:isolate;
 min-height:clamp(300px,25vw,356px);border-radius:24px;
 -webkit-tap-highlight-color:transparent;
 box-shadow:0 20px 44px -30px rgba(15,28,60,.55);
 transition:transform .6s var(--e),box-shadow .6s var(--e)}
.cx:focus-visible{outline:3px solid var(--cy);outline-offset:4px}
.cx:hover,.cx:focus-visible{transform:translateY(-8px);box-shadow:0 40px 70px -34px rgba(15,28,60,.62)}
/* the coloured field, gently drifting so the tile reads as live before touch */
.cxbg{position:absolute;inset:0;z-index:0;background-size:230% 230%;background-position:12% 50%;
 animation:cxdrift 17s ease-in-out infinite;transition:background-position 1.2s var(--e)}
@keyframes cxdrift{0%,100%{background-position:10% 46%}50%{background-position:74% 58%}}
/* the veil that buys the text its contrast; only present once the card opens */
.cxvl{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s var(--e)}
/* the icon: oversized and centred at rest, a corner badge once open */
.cxic{position:absolute;left:50%;top:44%;z-index:3;width:clamp(112px,10vw,136px);
 height:clamp(112px,10vw,136px);display:grid;place-items:center;transform:translate(-50%,-50%);
 transform-origin:0 0;
 transition:left .62s var(--e),top .62s var(--e),transform .62s var(--e)}
.cxih{position:absolute;left:-42%;top:-42%;width:184%;height:184%;border-radius:50%;
 transition:opacity .5s var(--e)}
.cxig{position:relative;display:grid;place-items:center;width:100%;height:100%;
 animation:cxfloat 7s ease-in-out infinite}
@keyframes cxfloat{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
.cxig svg{width:70%;height:70%;overflow:visible;
 filter:drop-shadow(0 8px 20px rgba(8,14,32,.34))}
.cxig svg .gl{fill:#fff}
.cxig svg .gs{fill:none;stroke:#fff;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
/* the resting platform label, on its own pill so small text still clears AA */
.cxpl{position:absolute;left:50%;top:calc(44% + clamp(74px,6.6vw,90px));z-index:3;
 transform:translateX(-50%);padding:6px 15px;border-radius:999px;white-space:nowrap;
 font-size:10.2px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#fff;
 transition:opacity .34s var(--e),transform .5s var(--e)}
/* the card, masked open from where the icon was */
/* The card stays in normal flow — it is masked open, not positioned open.
   That matters twice over: the tile height is content-driven so nothing can
   ever be clipped by overflow:hidden (the Google card is the tallest, with
   five children), and because the content occupies the same space in both
   states there is no layout shift at all when a tile opens. */
.cxc{position:relative;z-index:4;display:block;opacity:0;
 padding:clamp(22px,2.2vw,30px);
 padding-top:calc(clamp(22px,2.2vw,30px) + clamp(112px,10vw,136px) * .4 + 20px);
 clip-path:inset(38% 34% 44% 34% round 999px);
 -webkit-clip-path:inset(38% 34% 44% 34% round 999px);
 transition:clip-path .62s var(--e),-webkit-clip-path .62s var(--e),opacity .3s ease .04s}
.cxc>*{opacity:0;transform:translateY(11px);
 transition:opacity .42s var(--e),transform .48s var(--e)}
.cxc b{display:block;font-family:var(--fd);font-weight:800;text-transform:uppercase;
 letter-spacing:.012em;font-size:clamp(15.5px,1.35vw,19px);line-height:1.16;color:#fff;max-width:17ch}
.cxp{display:block;margin-top:10px;font-size:clamp(12.4px,1vw,13.6px);line-height:1.56;
 color:rgba(255,255,255,.94);max-width:31ch}
.cxa{display:flex;align-items:center;justify-content:space-between;gap:12px;
 margin-top:clamp(16px,1.7vw,22px)}
.cxab{display:inline-block;padding:9px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.46);
 font-size:11.4px;font-weight:700;letter-spacing:.03em;color:#fff;
 transition:background .42s,color .42s,border-color .42s}
.cxa>s{text-decoration:none;font-size:19px;line-height:1;color:#fff;
 transform:translateX(calc(var(--ax,0) * 9px));transition:transform .34s var(--e)}
.cxn{display:block;margin-top:12px;font-size:11px;line-height:1.5;letter-spacing:.005em}
/* ── the open state ─────────────────────────────────────────────────── */
.cx:hover .cxvl,.cx:focus-visible .cxvl,.cx.on .cxvl{opacity:1}
.cx:hover .cxic,.cx:focus-visible .cxic,.cx.on .cxic{
 left:clamp(22px,2.2vw,30px);top:clamp(22px,2.2vw,30px);transform:translate(0,0) scale(.4)}
.cx:hover .cxih,.cx:focus-visible .cxih,.cx.on .cxih{opacity:0}
.cx:hover .cxig,.cx:focus-visible .cxig,.cx.on .cxig{animation:none;transform:none}
.cx:hover .cxpl,.cx:focus-visible .cxpl,.cx.on .cxpl{opacity:0;transform:translateX(-50%) translateY(-8px)}
.cx:hover .cxc,.cx:focus-visible .cxc,.cx.on .cxc{opacity:1;
 clip-path:inset(0 0 0 0 round 24px);-webkit-clip-path:inset(0 0 0 0 round 24px)}
.cx:hover .cxc>*,.cx:focus-visible .cxc>*,.cx.on .cxc>*{opacity:1;transform:none}
/* heading first, copy immediately after, CTA and arrow last */
.cx:hover .cxc b,.cx:focus-visible .cxc b,.cx.on .cxc b{transition-delay:.12s}
.cx:hover .cxc .cxp,.cx:focus-visible .cxc .cxp,.cx.on .cxc .cxp{transition-delay:.2s}
.cx:hover .cxc .cxst,.cx:focus-visible .cxc .cxst,.cx.on .cxc .cxst{transition-delay:.25s}
.cx:hover .cxc .cxa,.cx:focus-visible .cxc .cxa,.cx.on .cxc .cxa{transition-delay:.3s}
.cx:hover .cxc .cxn,.cx:focus-visible .cxc .cxn,.cx.on .cxc .cxn{transition-delay:.36s}
.cx:hover .cxab,.cx:focus-visible .cxab,.cx.on:hover .cxab{background:#fff;border-color:#fff}
/* ── Facebook ───────────────────────────────────────────────────────── */
.cx-fb .cxbg{background:linear-gradient(134deg,#1B6FE0 0%,#1257B8 52%,#0B3F8C 100%)}
.cx-fb .cxvl{background:linear-gradient(180deg,rgba(18,4,42,0) 0%,rgba(18,4,42,.34) 34%,
 rgba(18,4,42,.62) 58%,rgba(18,4,42,.70) 78%,rgba(18,4,42,.76) 100%)}
.cx-fb .cxih{background:radial-gradient(circle,rgba(6,26,64,.46) 0%,rgba(6,26,64,.34) 44%,rgba(6,26,64,0) 71%)}
.cx-fb .cxpl{background:rgba(6,22,56,.60)}
.cx-fb:hover .cxab,.cx-fb:focus-visible .cxab{color:#1257B8}
/* ── Instagram ──────────────────────────────────────────────────────── */
.cx-ig .cxbg{background:linear-gradient(128deg,#FEDA75 0%,#FA7E1E 24%,#D62976 52%,#962FBF 76%,#4F5BD5 100%)}
.cx-ig .cxvl{background:linear-gradient(180deg,rgba(18,4,42,0) 0%,rgba(18,4,42,.36) 34%,
 rgba(18,4,42,.62) 58%,rgba(18,4,42,.70) 78%,rgba(18,4,42,.76) 100%)}
.cx-ig .cxih{background:radial-gradient(circle,rgba(18,4,42,.50) 0%,rgba(18,4,42,.40) 44%,rgba(18,4,42,0) 71%)}
.cx-ig .cxpl{background:rgba(18,4,42,.62)}
.cx-ig:hover .cxab,.cx-ig:focus-visible .cxab{color:#B32A6B}
/* ── Google — light card, so it gets its own text colours ───────────── */
.cx-gg{border:1px solid var(--ln);box-shadow:0 20px 44px -32px rgba(34,63,122,.6)}
.cx-gg .cxbg{background:linear-gradient(140deg,#fff 0%,#F7F9FD 46%,#EEF3FB 100%);animation-duration:21s}
.cx-gg:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:5;
 background:linear-gradient(90deg,#4285F4 0 25%,#EA4335 25% 50%,#FBBC05 50% 75%,#34A853 75% 100%)}
.cx-gg .cxvl{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.62) 40%,
 rgba(255,255,255,.9) 100%)}
.cx-gg .cxih{background:radial-gradient(circle,rgba(52,185,215,.20) 0%,rgba(52,185,215,.09) 46%,rgba(52,185,215,0) 72%)}
.cx-gg .cxig svg{filter:drop-shadow(0 8px 18px rgba(34,63,122,.20))}
.cx-gg .cxpl{background:rgba(34,63,122,.09);color:var(--euc)}
.cx-gg .cxc b{color:var(--euc)}
.cx-gg .cxp{color:var(--tx-2)}
/* --tx-3 (#8B97AA) measures only 2.65:1 on this card, so the fine print
   gets its own colour rather than the site token */
.cx-gg .cxn{color:#55637A}
.cx-gg .cxab{border-color:var(--ln);color:var(--euc)}
.cx-gg .cxa>s{color:var(--cy-dp)}
.cx-gg:hover .cxab,.cx-gg:focus-visible .cxab{background:var(--euc);border-color:var(--euc);color:#fff}
.cx-gg:hover,.cx-gg:focus-visible{border-color:var(--cy)}
/* the stars are a Google cue, not a rating of this clinic — they are empty
   outlines, carry no number and are hidden from assistive technology */
.cxst{display:flex;gap:5px;margin-top:13px}
.cxst .gstar{width:15px;height:15px;fill:none;stroke:#FBBC05;stroke-width:1.7;
 stroke-linejoin:round;opacity:.9}
.cx-gg:hover .gstar,.cx-gg:focus-visible .gstar,.cx-gg.on .gstar{animation:cxpop .5s var(--e) both;
 animation-delay:calc(.3s + var(--s))}
@keyframes cxpop{0%{transform:scale(.4) rotate(-18deg);opacity:0}
 60%{transform:scale(1.14) rotate(3deg);opacity:1}100%{transform:none;opacity:.9}}
/* ── touch, small screens, reduced motion: the card simply stays open ── */
@media(max-width:900px){
  .cxg{grid-template-columns:1fr}
  .cx{min-height:0}
  .cxc{padding:clamp(20px,5vw,26px);
   padding-top:calc(clamp(20px,5vw,26px) + clamp(112px,10vw,136px) * .46 + 16px)}
  .cx .cxic{left:clamp(20px,5vw,26px);top:clamp(20px,5vw,26px);transform:translate(0,0) scale(.46)}
  .cx .cxih,.cx .cxpl{opacity:0}
  .cx .cxvl{opacity:1}
  .cx .cxig{animation:none;transform:none}
  .cx .cxc{opacity:1;clip-path:inset(0 0 0 0 round 24px);-webkit-clip-path:inset(0 0 0 0 round 24px)}
  .cx .cxc>*{opacity:1;transform:none}
  .cx:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .cxbg,.cxig,.cxst .gstar{animation:none!important}
  .cx,.cxvl,.cxic,.cxc,.cxc>*,.cxa>s,.cxpl,.cxih{transition:none!important}
  .cx:hover,.cx:focus-visible{transform:none}
  .cx .cxic{left:clamp(22px,2.2vw,30px);top:clamp(22px,2.2vw,30px);transform:translate(0,0) scale(.4)}
  .cx .cxih,.cx .cxpl{opacity:0}
  .cx .cxvl{opacity:1}
  .cx .cxc{opacity:1;clip-path:none;-webkit-clip-path:none}
  .cx .cxc>*{opacity:1;transform:none}
}
/* ═══ MEGA MENU ═══ */
.mega{border-radius:0 0 clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px)}
.megain{max-width:var(--mw);margin:0 auto;padding:clamp(24px,2.6vw,38px) var(--pd) clamp(18px,2vw,26px);
 display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,42px)}
@media(max-width:1000px){.megain{grid-template-columns:repeat(2,1fr)}}
.mgc h6{font-family:var(--fu);font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
 color:var(--tx-3);margin-bottom:14px;padding-bottom:0;border-bottom:0}
.mgc a{position:relative;display:block;padding:6.5px 0 6.5px 17px;font-size:14px;font-weight:500;
 line-height:1.35;color:var(--tx);transition:color .25s,padding-left .25s var(--e)}
.mgc a:before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%}
.mgc.c0 a:before{background:var(--yl)}
.mgc.c1 a:before{background:var(--cy)}
.mgc.c2 a:before{background:var(--yl-dp)}
.mgc.c3 a:before{background:var(--cy-dp)}
.mgc a:hover{color:var(--cy-dp);padding-left:21px}
.mgf{max-width:var(--mw);margin:0 auto;padding:clamp(16px,1.8vw,24px) var(--pd) clamp(20px,2.2vw,30px);
 border-top:1px solid var(--ln);display:flex;align-items:center;justify-content:space-between;
 gap:clamp(16px,2vw,32px);flex-wrap:wrap}
.mega .mgb{display:inline-flex;align-items:center;margin-top:0;padding:12px 24px;border-radius:100px;
 background:var(--euc);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;
 transition:background .3s}
.mega .mgb:hover{background:var(--cy-dp);color:#fff;padding-left:24px}
@media(max-width:700px){.mgf{flex-direction:column;align-items:flex-start}}
.fsl{background:var(--euc-3);color:#C8D6EE;padding:clamp(34px,4vw,56px) 0 clamp(26px,3vw,40px);
 border-top:1px solid rgba(255,255,255,.10)}
.fsl h3{font-family:var(--fu);font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
 color:var(--yl);margin:0 0 11px}
/* ═══ 02e SKIN CHECKS — bulk billed promo ═══
   Full-bleed grid: the photograph runs off the right edge of the viewport,
   while the copy still lines up with the page wrapper. That alignment is done
   with padding-left rather than by nesting the text in a .wr, because the grid
   itself has to span the full width for the image to bleed. */
#skinbb{position:relative;overflow:hidden;border-bottom:1px solid var(--ln);
 background:linear-gradient(158deg,rgba(52,185,215,.16),rgba(255,255,255,0) 52%),var(--ivory-2)}
#skinbb:before{content:"";position:absolute;left:-6%;top:-30%;width:44%;height:150%;pointer-events:none;
 background:radial-gradient(closest-side,rgba(247,196,71,.28),rgba(247,196,71,0) 70%)}
.skpg{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;align-items:center}
.skptx{padding:clamp(46px,5.4vw,84px) clamp(28px,3.6vw,60px) clamp(46px,5.4vw,84px)
 max(var(--pd),calc((100vw - var(--mw))/2 + var(--pd)))}
.skpbdg{display:inline-block;padding:7px 15px;border-radius:100px;background:var(--yl);color:#4A3705;
 font-family:var(--fu);font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.skph{margin-top:15px;color:var(--euc);max-width:16ch}
.skph .it{color:var(--cy-dp)}
#skinbb .ld{margin-top:15px;max-width:54ch}
#skinbb .ld b{color:var(--euc);font-weight:700}
/* billing facts — icon rows, not bordered boxes, so they sit under the lead
   rather than competing with it */
.skpf{margin-top:clamp(22px,2.6vw,32px);display:grid;gap:14px;max-width:56ch}
.skpfr{display:flex;gap:14px;align-items:flex-start;padding-left:2px}
.skpfr svg{flex:0 0 auto;width:34px;height:34px;padding:7px;border-radius:11px;fill:none;stroke-width:1.6;
 stroke-linecap:round;stroke-linejoin:round;background:rgba(52,185,215,.16);stroke:var(--cy-dp)}
.skpfy svg{background:rgba(247,196,71,.28);stroke:var(--yl-dp)}
.skpfr span{font-size:13.6px;line-height:1.62;color:var(--tx-2)}
.skpfr b{display:block;font-family:var(--fd);font-size:15.5px;font-weight:700;color:var(--euc);
 letter-spacing:-.012em;margin-bottom:3px}
.skpcta{margin-top:clamp(24px,2.8vw,34px);display:flex;flex-wrap:wrap;gap:11px}
.bn.skpgh{background:transparent;color:var(--euc);border:1px solid rgba(34,63,122,.34);box-shadow:none}
.bn.skpgh:hover{background:rgba(34,63,122,.07);border-color:var(--euc)}
.skplk{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 22px}
.skplk a{display:inline-flex;align-items:center;gap:7px;font-size:13.2px;font-weight:600;color:var(--cy-dp);
 transition:gap .4s var(--e)}
.skplk a s{text-decoration:none}
.skplk a:hover{gap:11px}
/* the photograph, bleeding to the right edge */
.skpph{position:relative;align-self:stretch;min-height:clamp(330px,36vw,500px);overflow:hidden;
 background:var(--ivory-3)}
.skpph .fr{position:absolute;inset:0}
.skpph picture>img,.skpph>img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.skpphv{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,var(--ivory-2) 0%,rgba(233,242,247,.55) 7%,rgba(233,242,247,0) 22%)}
/* "worth booking if" — a full-width stack of expandable rows. Five items in a
   three-column grid left a ragged row, which the CTA cell used to absorb; with
   that cell gone, a stack is the honest fix. Native <details>, so it is
   keyboard-reachable and works with JS off, and full width means expanding a
   row does not reflow its neighbours. */
.skpwl{position:relative;z-index:2;padding-bottom:clamp(44px,5vw,72px)}
.skpck{margin-top:clamp(30px,3.4vw,46px);background:#fff;border:1px solid var(--ln);border-radius:22px;
 padding:clamp(24px,2.8vw,40px);box-shadow:0 30px 64px -44px rgba(34,63,122,.5)}
.skpckh{font-family:var(--fd);font-size:clamp(17px,1.7vw,23px);font-weight:700;color:var(--euc);
 letter-spacing:-.016em;line-height:1.24;max-width:26ch}
.skpacc{margin-top:clamp(18px,2vw,26px);display:grid;gap:8px}
.skpacc details{border:1px solid var(--ln);border-radius:14px;overflow:hidden;
 transition:border-color .35s,background .35s}
.skpacc details:hover{border-color:var(--cy)}
.skpacc details[open]{border-color:rgba(52,185,215,.5);background:rgba(52,185,215,.05)}
.skpacc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
 padding:14px clamp(15px,1.7vw,20px);min-height:52px;font-size:13.9px;line-height:1.5;color:var(--tx-2)}
.skpacc summary::-webkit-details-marker{display:none}
.skpacc summary:focus-visible{outline:2px solid var(--cy);outline-offset:-3px}
.skpacc summary>span{flex:1 1 auto}
.skpacc summary b{color:var(--euc);font-weight:700}
.skpacc summary>svg{flex:0 0 auto;width:19px;height:19px;fill:none;stroke:var(--cy-dp);stroke-width:1.7;
 stroke-linecap:round;stroke-linejoin:round}
.skpacc summary>i{flex:0 0 auto;position:relative;width:20px;height:20px;border-radius:50%;
 border:1px solid var(--ln);transition:transform .4s var(--e),border-color .35s,background .35s}
.skpacc summary>i:before,.skpacc summary>i:after{content:"";position:absolute;left:50%;top:50%;
 background:var(--cy-dp);border-radius:1px;transform:translate(-50%,-50%)}
.skpacc summary>i:before{width:8px;height:1.5px}
.skpacc summary>i:after{width:1.5px;height:8px;transition:opacity .3s,transform .4s var(--e)}
.skpacc details[open] summary>i{transform:rotate(180deg);border-color:var(--cy);background:rgba(52,185,215,.14)}
.skpacc details[open] summary>i:after{opacity:0;transform:translate(-50%,-50%) scaleY(0)}
.skpab{padding:0 clamp(15px,1.7vw,20px) 16px 46px}
.skpab p{font-size:13.4px;line-height:1.7;color:var(--tx-2);max-width:82ch}
.skpcka{display:inline-flex;align-items:center;gap:7px;margin-top:clamp(16px,1.8vw,22px);
 font-size:13.2px;font-weight:600;color:var(--cy-dp);transition:gap .4s var(--e)}
.skpcka s{text-decoration:none}
.skpcka:hover{gap:11px}
.skpn{margin-top:clamp(18px,2.2vw,26px);padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--ln);
 font-size:12.6px;line-height:1.66;color:var(--tx-3);max-width:96ch}
@media(max-width:620px){.skpab{padding-left:clamp(15px,1.7vw,20px)}}
@media(max-width:980px){
  .skpg{grid-template-columns:1fr}
  .skptx{padding:clamp(42px,5vw,64px) var(--pd) clamp(30px,3.4vw,42px)}
  .skpph{min-height:clamp(260px,52vw,380px);order:-1}
  .skpphv{background:linear-gradient(180deg,rgba(233,242,247,0) 62%,var(--ivory-2) 100%)}
  .skph{max-width:none}
}
/* ── hero: let the h1 render as the two lines it is authored as ── */
#hero .hc h1{max-width:26ch}
#hero .hc{padding-top:calc(var(--hh,112px) + clamp(34px,3.8vw,58px))}
/* ── trust band: the ECG trace crosses the section from edge to edge, entering
      at the left and leaving at the right behind the card panel, instead of
      sitting as a band along the top ── */
#trust{padding:clamp(30px,3.4vw,52px) 0 clamp(34px,4vw,58px)}
#trust .tline{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
 z-index:1;margin:0;overflow:visible;pointer-events:none}
#trust .tline svg{height:clamp(64px,7vw,104px)}
#trust .tcw{margin-top:0;z-index:3}
/* ═══════════════════════════════════════════════════════════════════════
   01 HERO — the Muswellbrook landscape
   Depth comes from the one supplied photograph: .mbsky is the whole frame,
   .mbfg is the SAME image masked to its bottom third (rocks and foliage) and
   drifting faster. No invented layers.
   ═══════════════════════════════════════════════════════════════════════ */
#hero{position:relative;height:100svh;min-height:560px;max-height:1040px;overflow:hidden;
 background:var(--euc-3);--mx:0;--my:0;--sy:0}
.mbstage{position:absolute;inset:0;overflow:hidden}
.mbplane{position:absolute;inset:-2% -2% -2% -2%;will-change:transform}
.mbplane .fr{position:absolute;inset:0;background:none}
.mbplane picture>img,.mbplane>img,.mbplane .fr>img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* base plane: slow cinematic push-in */
.mbsky{transform:translate3d(calc(var(--mx)*-7px),calc(var(--my)*-5px + var(--sy)*40px),0) scale(1.03);
 animation:mbpush 22s cubic-bezier(.22,1,.36,1) forwards}
@keyframes mbpush{to{scale:1.047}}
/* foreground plane: same photograph, masked to the near ground, moving ~1.9x */
.mbfg{--m:linear-gradient(to top,#000 0%,#000 20%,rgba(0,0,0,.55) 31%,transparent 42%);
 -webkit-mask-image:var(--m);mask-image:var(--m);
 transform:translate3d(calc(var(--mx)*-13px),calc(var(--my)*-9px + var(--sy)*74px),0) scale(1.06)}
/* scrim — solved against the photograph, see the module docstring */
.mbscrim{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(100deg,rgba(9,20,45,.38) 0%,rgba(9,20,45,.34) 30%,rgba(9,20,45,.04) 66%,rgba(9,20,45,0) 82%),
            linear-gradient(180deg,rgba(9,20,45,0) 0%,rgba(9,20,45,.34) 42%,rgba(9,20,45,.62) 100%)}
.mbhc{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:space-between;
 gap:clamp(24px,4vw,64px);max-width:var(--mw);margin:0 auto;left:0;right:0;
 padding:calc(max(var(--hh,112px),104px) + 24px) var(--pd) calc(var(--mbh) + clamp(74px,7vw,104px))}
.mbhi{max-width:min(100%,720px)}
.mbpill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px;
 background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);
 -webkit-backdrop-filter:blur(8px);font-family:var(--fu);font-size:11px;font-weight:700;
 letter-spacing:.1em;text-transform:uppercase;color:#fff}
.mbpill i{width:7px;height:7px;border-radius:50%;background:#5BD98A;box-shadow:0 0 0 3px rgba(91,217,138,.26)}
.mbpill.shut i{background:#F2A65A;box-shadow:0 0 0 3px rgba(242,166,90,.26)}
.mbh1{margin-top:clamp(16px,2vw,26px);font-family:var(--fd);font-weight:800;
 font-size:clamp(40px,7.4vw,104px);line-height:.98;letter-spacing:-.035em;color:#fff;
 text-shadow:0 2px 30px rgba(7,16,38,.5)}
.mbloc{position:relative;display:inline-block;font-style:italic;font-weight:700;color:var(--yl);
 padding-right:.06em}
.mbund{position:absolute;left:0;right:.02em;bottom:-.12em;width:100%;height:.19em;overflow:visible}
.mbund path{fill:none;stroke:var(--yl);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;
 stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1) .75s}
.mbh1 .wl.in .mbund path{stroke-dashoffset:0}
.mbbec{margin-top:clamp(14px,1.7vw,22px);font-family:var(--fu);font-size:11.5px;font-weight:800;
 letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.mbcta{margin-top:clamp(24px,3vw,38px);display:flex;flex-wrap:wrap;gap:12px}
.bn.mbgh{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.42);
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:none}
.bn.mbgh:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}
.mbcount{flex:0 0 auto;text-align:right;padding-bottom:6px}
.mbcount b{display:block;font-family:var(--fd);font-size:clamp(38px,4.4vw,62px);font-weight:800;
 line-height:1;letter-spacing:-.03em;color:var(--yl)}
.mbcount span{display:block;margin-top:4px;font-family:var(--fu);font-size:10px;font-weight:800;
 letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.mbcount p{margin-top:12px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.78)}
.mbscroll{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--mbh) + 26px);z-index:6;
 width:26px;height:44px;border-radius:100px;border:1px solid rgba(255,255,255,.4);
 display:grid;place-items:start center;padding-top:8px}
.mbscroll i{width:3px;height:8px;border-radius:2px;background:rgba(255,255,255,.9);
 animation:mbdrop 2.1s cubic-bezier(.65,0,.35,1) infinite}
@keyframes mbdrop{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{transform:translateY(16px);opacity:0}100%{opacity:0}}
@media(max-width:900px){
  .mbhc{flex-direction:column;align-items:flex-start;justify-content:flex-end}
  .mbcount{text-align:left;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .mbcount b{font-size:32px}.mbcount p{flex:1 1 100%;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
  .mbsky,.mbfg{animation:none;transform:none}
  .mbund path{stroke-dashoffset:0;transition:none}
  .mbscroll i{animation:none}
}
/* ═══ 01b MUSWELLBROOK COMES INTO FOCUS ═══════════════════════════════════
   Not a crossfade: the town arrives behind a directional mask that wipes from
   the left, and a gold route line draws across it toward the clinic. */
#mbtown{position:relative;height:min(88svh,760px);min-height:440px;overflow:hidden;background:var(--euc-3)}
.mbtimg{position:absolute;inset:0;
 clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);
 transition:clip-path 1.5s cubic-bezier(.65,0,.35,1),-webkit-clip-path 1.5s cubic-bezier(.65,0,.35,1)}
#mbtown.in .mbtimg{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
.mbtimg .fr{position:absolute;inset:0;background:none}
.mbtimg picture>img,.mbtimg .fr>img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.mbtscrim{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(96deg,rgba(9,20,45,.80) 0%,rgba(9,20,45,.62) 34%,rgba(9,20,45,.20) 62%,rgba(9,20,45,.06) 100%)}
.mbtc{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
 max-width:var(--mw);margin:0 auto;left:0;right:0;padding:0 var(--pd)}
.mbtk{font-family:var(--fd);font-size:clamp(26px,4.6vw,62px);font-weight:800;line-height:1;
 letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:0 2px 26px rgba(7,16,38,.5)}
.mbts{margin-top:10px;font-family:var(--fu);font-size:11px;font-weight:800;letter-spacing:.26em;
 text-transform:uppercase;color:var(--yl)}
.mbth{margin-top:clamp(20px,2.6vw,34px);font-family:var(--fd);font-weight:700;
 font-size:clamp(20px,2.5vw,34px);line-height:1.16;letter-spacing:-.02em;color:#fff;max-width:22ch}
.mbth .it{color:var(--yl);font-style:italic}
@media(prefers-reduced-motion:reduce){
  .mbtimg{clip-path:none;-webkit-clip-path:none;transition:none}
}
/* ═══ 02 TEAM REVEAL — hotspots over the real photograph ═════════════════
   The doctors are not cut out. Seven invisible hotspots sit over the flat
   group photo at positions measured from the image itself. Since individual
   people cannot be dimmed in a flat photograph, .tmspot dims the whole frame
   and opens a soft hole over whoever is hovered — which reads the same way. */
#mbteam{position:relative;background:linear-gradient(172deg,var(--euc) 0%,var(--euc-3) 82%);
 color:var(--tx-i);padding:clamp(30px,3.2vw,50px) 0 clamp(34px,3.8vw,56px);overflow:hidden}
.tmhd{position:relative;z-index:2}
.tmh{color:#fff;max-width:20ch}
.tmh .it{color:var(--yl)}
#mbteam .ld{margin-top:16px;max-width:56ch;color:#D6E1F2}
.tmstage{position:relative;z-index:2;margin:clamp(16px,1.8vw,24px) auto 0;max-width:min(100%,1560px);
/* faces sat at 44% of the uncropped file; in the new frame they are at 22% */
 border-radius:clamp(14px,1.6vw,22px);overflow:hidden;--sx:50%;--sy:22%;
 box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
/* Cropped to the bottom 70% of the file. Measured against the pixels: the
   sign occupies source y 2-22%, then y 23-39% is empty wall, and heads only
   start at y 40%. The frame was locked to the file's own 1918x820, so a
   sixth of the section was blank plaster. 1918/574 keeps the full width —
   which matters, because the hotspots are positioned as percentages of it —
   and bottom-anchors the crop so the group fills the frame.
   The sign is lost, but it already appears twice in the gallery below. */
.tmimg{position:relative;aspect-ratio:1918/574;background:var(--euc-2)}
.tmimg .fr{position:absolute;inset:0;background:none}
.tmimg picture>img,.tmimg .fr>img{width:100%;height:100%;object-fit:cover;object-position:center 100%;
 transition:transform .8s var(--e);transform-origin:var(--sx) var(--sy)}
.tmstage.on .tmimg img{transform:scale(1.045)}
.tmspot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .55s var(--e);
 background:radial-gradient(circle at var(--sx) var(--sy),
  rgba(9,20,45,0) 0%,rgba(9,20,45,0) 9%,rgba(9,20,45,.42) 26%,rgba(9,20,45,.60) 52%)}
.tmstage.on .tmspot{opacity:1}
.tmhots{position:absolute;inset:0}
.tmhot{position:absolute;top:0;bottom:0;padding:0;margin:0;border:0;background:none;cursor:pointer;
 -webkit-appearance:none;appearance:none}
.tmhot:focus-visible{outline:2px solid var(--yl);outline-offset:-4px;border-radius:8px}
/* the card morphs across rather than reappearing */
.tmcard{position:absolute;left:0;bottom:clamp(14px,2vw,26px);z-index:3;pointer-events:none;
 width:max-content;max-width:min(88%,290px);
 transform:translate3d(var(--cx,50%),14px,0) translateX(-50%);opacity:0;
 transition:transform .55s var(--e),opacity .4s}
.tmstage.on .tmcard{opacity:1;transform:translate3d(var(--cx,50%),0,0) translateX(-50%)}
.tmc{display:none;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
 -webkit-backdrop-filter:blur(10px);border-radius:14px;padding:14px 16px;
 box-shadow:0 24px 50px -28px rgba(0,0,0,.7)}
.tmc.on{display:block}
.tmc b{display:block;font-family:var(--fd);font-size:15.5px;font-weight:700;color:var(--euc);
 letter-spacing:-.012em;line-height:1.25}
.tmc span{display:block;margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.15em;
 text-transform:uppercase;color:var(--cy-dp)}
.tmc em{display:block;margin-top:8px;font-style:normal;font-size:12.6px;line-height:1.5;color:var(--tx-2)}
.tmcl{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:700;
 color:var(--cy-dp)}
.tmcl s{text-decoration:none}
.tmft{position:relative;z-index:2;margin-top:clamp(22px,2.6vw,34px);display:flex;align-items:center;
 justify-content:space-between;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap}
.tmcta{display:flex;flex-wrap:wrap;gap:11px}
.bn.tmgh{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42);box-shadow:none}
.bn.tmgh:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
/* the rail is the touch equivalent of hovering */
.tmrail{display:none;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
 scrollbar-width:none}
.tmrail::-webkit-scrollbar{display:none}
.tmrail .tmc{display:block;flex:0 0 min(74vw,264px);scroll-snap-align:start;background:rgba(255,255,255,.94)}
@media(max-width:900px){
  .tmhots,.tmcard,.tmspot{display:none}
  .tmrail{display:flex}
  .tmft{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
  .tmstage.on .tmimg img{transform:none}
  .tmcard{transition:opacity .3s}
}
/* ═══ 03 APPROACHING THE CLINIC ═════════════════════════════════════════
   A perspective push toward the doors as the section scrolls through — the
   still is scaled and the frame widens. No fabricated door movement. */
#mbentry{position:relative;height:min(92svh,820px);min-height:460px;overflow:hidden;background:var(--euc-3);--ez:0}
.meimg{position:absolute;inset:0;overflow:hidden;
 clip-path:inset(calc(8% - var(--ez)*8%) calc(14% - var(--ez)*14%) round calc(22px - var(--ez)*22px));
 -webkit-clip-path:inset(calc(8% - var(--ez)*8%) calc(14% - var(--ez)*14%) round calc(22px - var(--ez)*22px))}
.meimg .fr{position:absolute;inset:0;background:none}
.meimg picture>img,.meimg .fr>img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
 transform:scale(calc(1.02 + var(--ez)*0.16));transform-origin:center 46%}
.mescrim{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(9,20,45,.62) 0%,rgba(9,20,45,.30) 38%,rgba(9,20,45,.78) 100%)}
.mec{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
 max-width:var(--mw);margin:0 auto;left:0;right:0;padding:0 var(--pd) clamp(46px,5.4vw,80px)}
.meh{color:#fff;max-width:18ch}
.meh .it{color:var(--yl)}
#mbentry .ld{margin-top:16px;max-width:52ch;color:#DBE4F3}
.mecta{margin-top:clamp(22px,2.6vw,32px);display:flex;flex-wrap:wrap;gap:11px}
.bn.megh{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42);box-shadow:none}
.bn.megh:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
@media(prefers-reduced-motion:reduce){
  .meimg{clip-path:none;-webkit-clip-path:none}
  .meimg picture>img,.meimg .fr>img{transform:none}
}
/* ═══ 04 THE RECEPTION TEAM ═════════════════════════════════════════════ */
#mbrecep{background:var(--ivory-2);border-top:1px solid var(--ln)}
.mrg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
 gap:clamp(26px,3.6vw,60px);align-items:center}
.mrim{position:relative;aspect-ratio:1512/1040;border-radius:22px;overflow:hidden;background:var(--ivory-3);
 box-shadow:0 34px 74px -46px rgba(34,63,122,.6)}
.mrim .fr{position:absolute;inset:0;background:none}
.mrim picture>img,.mrim .fr>img{width:100%;height:100%;object-fit:cover;
 transform:scale(1.04);transition:transform 1.4s var(--e)}
.mrim.in picture>img,.mrim.in .fr>img{transform:scale(1)}
.mrh{color:var(--euc);max-width:15ch}
.mrh .it{color:var(--cy-dp)}
#mbrecep .ld{margin-top:16px;max-width:46ch}
.mrn{margin-top:clamp(18px,2.2vw,26px);padding-left:16px;border-left:2px solid var(--cy);
 font-size:13.6px;line-height:1.7;color:var(--tx-2)}
.mrn a{color:var(--cy-dp);font-weight:700}
@media(max-width:900px){.mrg{grid-template-columns:1fr}}
.mbarfoot{position:relative;left:auto;right:auto;bottom:auto}
/* ── the opening is one pinned runway, not two stacked pictures ──────────
   #hero is 230svh of scroll; .mbpin holds the viewport for all of it while
   the town wipes across the landscape. Progress is mapped in JS to --w/--hf/
   --tf so the CSS stays declarative. */
#hero{position:relative;height:230svh;background:var(--euc-3);
 --mx:0;--my:0;--sy:0;--w:0;--hf:1;--tf:0;max-height:none;overflow:visible}
.mbpin{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden}
/* the town, wiping in behind a slanted leading edge */
.mbtwrap{position:absolute;inset:0;z-index:2;overflow:hidden;
 clip-path:polygon(0 0, calc(var(--w) * 122%) 0, calc(var(--w) * 122% - 16%) 100%, 0 100%);
 -webkit-clip-path:polygon(0 0, calc(var(--w) * 122%) 0, calc(var(--w) * 122% - 16%) 100%, 0 100%)}
/* the superseded town section left .mbtimg clipped to zero width; the wipe
   now lives on .mbtwrap, so that clip must be explicitly released */
.mbtimg{position:absolute;inset:0;clip-path:none;-webkit-clip-path:none;transition:none}
/* a gold light-sweep riding the wipe edge */
.mbedge{position:absolute;top:-6%;bottom:-6%;z-index:3;width:2px;pointer-events:none;
 left:calc(var(--w) * 122% - 8%);transform:rotate(8.2deg);transform-origin:center;
 background:linear-gradient(180deg,rgba(247,196,71,0),var(--yl) 22%,var(--yl) 78%,rgba(247,196,71,0));
 box-shadow:0 0 22px 3px rgba(247,196,71,.55);
 opacity:calc(min(var(--w),1 - var(--w)) * 3.2)}
.mbhc{z-index:5;opacity:var(--hf);transform:translateY(calc((1 - var(--hf)) * -30px));
 will-change:opacity,transform;pointer-events:auto}
.mbhc[data-gone="1"]{pointer-events:none}
.mbtc{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;
 opacity:var(--tf);transform:translateY(calc((1 - var(--tf)) * 30px));will-change:opacity,transform}
.mbtc .wr{width:100%}
.mbth{margin-top:clamp(20px,2.6vw,34px);font-family:var(--fd);font-weight:700;
 font-size:clamp(20px,2.5vw,34px);line-height:1.16;letter-spacing:-.02em;color:#fff;max-width:26ch}
/* the town copy must not sit under the header while it is arriving */
@media(max-width:900px){.mbth{font-size:clamp(19px,4.4vw,26px)}}
@media(prefers-reduced-motion:reduce){
  /* no pin, no wipe — two panels at rest, with the join softened */
  #hero{height:auto}
  .mbpin{position:static;height:auto}
  .mbstage{position:relative;height:100svh;min-height:520px}
  .mbhc{position:absolute;inset:auto 0 0 0;height:100svh;top:0;opacity:1;transform:none}
  .mbtwrap{position:relative;height:100svh;min-height:460px;clip-path:none;-webkit-clip-path:none}
  .mbtwrap:before{content:"";position:absolute;left:0;right:0;top:0;height:14%;z-index:4;
   background:linear-gradient(180deg,var(--euc-3),rgba(9,20,45,0))}
  .mbtc{position:absolute;top:auto;bottom:0;height:100svh;opacity:1;transform:none}
  .mbedge{display:none}
}
/* ═══ 01c AT A GLANCE — the ECG line as the interface ════════════════════
   The trace is no longer decoration behind cards: four nodes sit on it, and
   choosing one lights the line up to that point and morphs the panel below.
   --lit (0–1) is set by JS from the node's own x position. */
#trust{position:relative;background:linear-gradient(168deg,var(--euc) 0%,var(--euc-3) 88%);
 color:var(--tx-i);padding:clamp(46px,5.4vw,84px) 0 clamp(40px,4.8vw,72px);overflow:hidden;
 border-bottom:0;--lit:0.125}
#trust:before{content:"";position:absolute;right:-10%;top:-40%;width:52%;height:160%;pointer-events:none;
 background:radial-gradient(closest-side,rgba(52,185,215,.20),rgba(52,185,215,0) 70%)}
.tzhd{position:relative;z-index:2}
.tzt{color:#fff;max-width:20ch}
.tzt .it{color:var(--yl)}
.tzrail{position:relative;z-index:2;margin:clamp(30px,3.6vw,52px) 0 0;height:clamp(96px,10vw,132px)}
.tzsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tzsvg path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tzb{stroke:rgba(255,255,255,.20);stroke-width:1.6}
/* 1697.4 is the path's MEASURED arc length, not a guess. It was 1460, which is
   shorter than the path — and a dasharray shorter than its path repeats, so the
   trace lit up in two places with a gap between them. */
.tzl{stroke:var(--yl);stroke-width:2.4;filter:drop-shadow(0 0 7px rgba(247,196,71,.6));
 stroke-dasharray:1697.4;stroke-dashoffset:calc(1697.4 - var(--lit) * 1697.4);
 transition:stroke-dashoffset .7s cubic-bezier(.22,1,.36,1)}
.tznodes{position:absolute;inset:0}
.tzn{position:absolute;left:var(--x);top:55%;transform:translate(-50%,-50%);
 display:flex;flex-direction:column;align-items:center;gap:9px;
 background:none;border:0;padding:0;cursor:pointer;color:rgba(255,255,255,.72);
 transition:color .35s}
.tzn i{display:grid;place-items:center;width:clamp(42px,4.2vw,54px);height:clamp(42px,4.2vw,54px);
 border-radius:50%;background:rgba(9,20,45,.82);border:1px solid rgba(255,255,255,.26);
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 transition:transform .45s var(--e),border-color .35s,background .35s,box-shadow .35s}
.tzn i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;
 stroke-linecap:round;stroke-linejoin:round}
.tzn b{font-family:var(--fu);font-size:10.5px;font-weight:800;letter-spacing:.14em;
 text-transform:uppercase;white-space:nowrap;transition:color .35s}
.tzn:hover,.tzn:focus-visible{color:#fff}
.tzn:hover i{transform:scale(1.08);border-color:rgba(247,196,71,.6)}
.tzn:focus-visible i{outline:2px solid var(--yl);outline-offset:3px}
.tzn.on{color:#fff}
.tzn.on i{background:var(--yl);border-color:var(--yl);color:#3A2B04;transform:scale(1.12);
 box-shadow:0 0 0 6px rgba(247,196,71,.18),0 14px 30px -14px rgba(247,196,71,.7)}
/* one panel at a time, morphing rather than swapping */
.tzpanes{position:relative;z-index:2;margin-top:clamp(24px,2.8vw,38px);min-height:clamp(150px,15vw,178px)}
.tzp{position:absolute;inset:0;opacity:0;transform:translateY(12px);pointer-events:none;
 transition:opacity .45s var(--e),transform .55s var(--e);max-width:64ch}
.tzp.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.tzp h3{font-family:var(--fd);font-size:clamp(19px,2vw,27px);font-weight:700;color:#fff;
 letter-spacing:-.018em;line-height:1.2;max-width:24ch}
.tzp p{margin-top:12px;font-size:14.6px;line-height:1.72;color:#CBD8EC;max-width:58ch}
.tzp p a{color:var(--yl);font-weight:600;border-bottom:1px solid rgba(247,196,71,.45)}
.tzpb{margin-top:clamp(18px,2.2vw,26px);display:flex;flex-wrap:wrap;align-items:center;gap:11px}
.bn.tzgh{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42);box-shadow:none}
.bn.tzgh:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
/* the shared live-status pill, restyled for the dark ground */
#trust .tst{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;
 font-family:var(--fu);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff}
#trust .tst:before{content:"";width:7px;height:7px;border-radius:50%;background:#5BD98A;
 box-shadow:0 0 0 3px rgba(91,217,138,.24)}
#trust .tst.sa:before{background:var(--yl);box-shadow:0 0 0 3px rgba(247,196,71,.24)}
#trust .tst.sh:before{background:#8FA2C0;box-shadow:0 0 0 3px rgba(143,162,192,.22)}
/* below 820px nothing may depend on hover: the track becomes a stacked list */
@media(max-width:820px){
  .tzrail{display:none}
  .tzpanes{min-height:0}
  .tzp{position:relative;opacity:1;transform:none;pointer-events:auto;
   padding:clamp(18px,4vw,24px);border-radius:16px;background:rgba(255,255,255,.06);
   border:1px solid rgba(255,255,255,.16);margin-bottom:12px}
  .tzp h3{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .tzl{transition:none}
  .tzp{transition:opacity .2s}
  .tzn i{transition:none}
}
/* ── #people: the practical "choose a doctor" step ───────────────────────
   The full-width team band that used to open this section was the third
   appearance of the same photograph on the homepage, so it came out. #mbteam
   above is the team moment; this section is the booking step, and it now has
   a heading and a filter of its own so it is doing different work.
   Filtering is progressive: with JS off the chips never render and all eight
   doctors are shown, which is the correct fallback. */
.pplhd{padding-top:clamp(58px,6.4vw,100px)}
.dflw{margin-top:clamp(26px,3vw,40px)}
.dfl-l{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.dfl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dfb{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
 border:1px solid var(--ln);background:#fff;color:var(--tx-2);font:inherit;font-size:13.2px;
 font-weight:600;line-height:1;cursor:pointer;
 transition:border-color .3s,background .3s,color .3s,transform .3s var(--e)}
.dfb:hover{border-color:var(--cy);transform:translateY(-1px)}
.dfb:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.dfb i{font-style:normal;font-size:11.4px;font-weight:700;color:var(--tx-3);
 padding:2px 6px;border-radius:999px;background:rgba(34,63,122,.07);transition:background .3s,color .3s}
.dfb[aria-pressed="true"]{background:var(--euc);border-color:var(--euc);color:#fff}
.dfb[aria-pressed="true"] i{background:rgba(255,255,255,.19);color:#fff}
.dfc{margin-top:13px;font-size:12.8px;line-height:1.6;color:var(--tx-3);min-height:1.6em}
/* filtered-out cards leave the flow entirely so the grid closes up */
.dc.dgo{display:none}
.dc.dfin{animation:dfin .42s var(--e) both}
@keyframes dfin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dc.dfin{animation:none}.dfb:hover{transform:none}}
/* ══ the GP discovery carousel ═══════════════════════════════════════════
   The portrait owns the top 70% of the card and the copy sits on a solid navy
   panel below it. A scrim over the photograph was measured and rejected: the
   brightest pixels in the lower 40% of the eight portraits reach
   rgb(253,250,237), which needs a 0.75 scrim to carry white or gold text.

   Two things keep the row still while it animates:
   - the card BOX never changes size; only .gpcin scales, so the scroll-snap
     positions cannot move while you are scrolling;
   - the active card's panel grows UPWARD over its own photograph rather than
     making the card taller, so the row never reflows. */
.gpw{position:relative;margin-top:clamp(24px,2.8vw,38px)}
/* THE FOCUS IS THE LEADING CARD, NOT THE CENTRED ONE — and that is a fix, not
   a preference. Two earlier attempts each broke something:
     - padding the track so the first card reaches dead centre left ~840px of
       empty track at 1440px+, so the row opened as a void;
     - cutting that back to gutter padding filled the row, but then card one can
       never REACH the centre, so it can never become active and the first two
       doctors were unreachable.
   Anchoring focus at the leading position solves both: the row is full from the
   left edge, Dr Eslam is active at rest, and every card can reach the anchor.
   The end padding is what lets the LAST card reach it too. */
.gptrk{display:flex;gap:clamp(14px,1.5vw,22px);overflow-x:auto;overflow-y:hidden;
 scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
 padding:clamp(10px,1.2vw,16px) 0 clamp(10px,1.2vw,16px) var(--pd);
 scroll-padding-inline-start:var(--pd);scrollbar-width:none}
/* a trailing spacer, so the last doctor can sit at the anchor like the rest */
.gptrk:after{content:"";flex:0 0 max(var(--pd),calc(100% - var(--pd) - clamp(252px,23vw,318px)))}
.gptrk::-webkit-scrollbar{display:none}
.gptrk:focus-visible{outline:2px solid var(--cy);outline-offset:4px}
.gptrk.grab{cursor:grab}
.gptrk.grabbing{cursor:grabbing;scroll-behavior:auto}
.gptrk.grabbing .gpc{pointer-events:none}
.gpc{flex:0 0 clamp(252px,23vw,318px);scroll-snap-align:start;
 height:clamp(414px,38vw,486px);position:relative;
 transition:opacity .42s var(--e)}
.gpc.gone{display:none}
.gpcin{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:var(--euc-3);
 transform:scale(.945);opacity:.72;
 box-shadow:0 22px 48px -34px rgba(14,28,60,.7);
 transition:transform .6s var(--e),opacity .5s var(--e),box-shadow .6s var(--e)}
.gpc.on .gpcin{transform:scale(1.055);opacity:1;
 box-shadow:0 44px 86px -40px rgba(14,28,60,.8)}
/* a soft glow behind whoever is centred */
.gpc.on:before{content:"";position:absolute;left:-16%;right:-16%;top:-8%;bottom:-8%;z-index:-1;
 pointer-events:none;border-radius:34px;
 background:radial-gradient(60% 50% at 50% 50%,rgba(52,185,215,.26),rgba(52,185,215,0) 70%)}
.gpcp{position:absolute;left:0;right:0;top:0;height:70%;overflow:hidden;background:var(--euc-2)}
.gpcp .fr{position:absolute;inset:0;background:none}
.gpcp picture>img,.gpcp .fr>img{width:100%;height:100%;object-fit:cover;object-position:center top;
 transform:scale(1.02);transition:transform 1s var(--e)}
.gpc.on .gpcp img{transform:scale(1.06)}
.gpfm{position:absolute;left:12px;top:12px;z-index:2;padding:5px 11px;border-radius:100px;
 background:rgba(255,255,255,.94);color:var(--euc);
 font-size:9.4px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
/* the panel: 30% at rest, grown over the photograph when centred */
.gpcb{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:2;
 padding:clamp(14px,1.5vw,19px) clamp(14px,1.5vw,19px) clamp(13px,1.4vw,17px);
 background:linear-gradient(180deg,var(--euc) 0%,var(--euc-3) 100%);
 transition:height .6s var(--e)}
/* 56%, not 66% — at 66% the open card showed more panel than person, which
   is the opposite of what this section is for */
.gpc.on .gpcb{height:56%}
.gpcb:before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px;pointer-events:none;
 background:linear-gradient(180deg,rgba(20,36,74,0),var(--euc))}
.gpcb h3{font-family:var(--fd);font-size:clamp(15px,1.35vw,17.5px);font-weight:700;line-height:1.2;
 color:#fff;letter-spacing:-.012em}
.gpcr{margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
 color:var(--cy-lt)}
.gpct{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;list-style:none}
.gpct li{padding:4px 9px;border-radius:100px;background:rgba(255,255,255,.11);
 border:1px solid rgba(255,255,255,.15);font-size:10.4px;font-weight:600;color:#DCE6F5}
/* revealed once the card is centred — reserved space, so no reflow */
.gpcx{margin-top:12px;opacity:0;transform:translateY(10px);pointer-events:none;
 transition:opacity .42s var(--e) .1s,transform .5s var(--e) .1s}
.gpc.on .gpcx{opacity:1;transform:none;pointer-events:auto}
.gpcxi{font-size:11.8px;line-height:1.55;color:#C8D6EC}
.gpcxb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:13px}
.gpcxa{font-size:11px;font-weight:700;letter-spacing:.03em;color:#E4ECF9;
 border-bottom:1px solid rgba(255,255,255,.34);transition:border-color .3s}
.gpcxa:hover{border-color:#fff}
.gpcxk{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:100px;
 background:var(--yl);color:#3D2D04;font-size:11px;font-weight:800;letter-spacing:.02em;
 transition:gap .4s var(--e),background .3s}
.gpcxk s{text-decoration:none}
.gpcxk:hover{gap:10px;background:var(--yl-lt)}
/* arrows */
.gpnav{position:absolute;top:50%;z-index:5;width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);
 transform:translateY(-50%);border-radius:50%;border:1px solid var(--ln);background:#fff;
 cursor:pointer;display:grid;place-items:center;
 box-shadow:0 14px 30px -16px rgba(34,63,122,.5);
 transition:transform .4s var(--e),border-color .3s,background .3s}
.gpprev{left:clamp(6px,1.2vw,18px)}
.gpnext{right:clamp(6px,1.2vw,18px)}
.gpnav:hover{border-color:var(--cy);background:var(--ivory-2);transform:translateY(-50%) scale(1.07)}
.gpnav:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.gpnav s{width:9px;height:9px;border-right:2px solid var(--euc);border-bottom:2px solid var(--euc);
 text-decoration:none}
.gpprev s{transform:rotate(135deg);margin-left:3px}
.gpnext s{transform:rotate(-45deg);margin-right:3px}
/* dots + hint */
.gpfoot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
 margin-top:clamp(12px,1.4vw,18px)}
.gpdots{display:flex;gap:7px}
.gpdots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
 background:rgba(34,63,122,.22);transition:background .35s,transform .35s var(--e)}
.gpdots button.on{background:var(--cy-dp);transform:scale(1.42)}
.gpdots button:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.gphint{font-size:11.8px;color:var(--tx-3)}
/* "not sure who to choose" */
.gpns{margin-top:clamp(30px,3.4vw,46px);display:grid;grid-template-columns:1.15fr .85fr;
 gap:clamp(22px,2.6vw,44px);align-items:center;
 background:var(--ivory-2);border:1px solid var(--ln);border-radius:22px;
 padding:clamp(24px,2.8vw,40px)}
.gpnse{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--cy-dp)}
.gpnsl h3{margin-top:9px}
.gpnsl>p{margin-top:11px;font-size:13.6px;line-height:1.66;color:var(--tx-2);max-width:48ch}
.gpnsl .bn{margin-top:clamp(16px,1.8vw,22px)}
.gpnsr{list-style:none;display:grid;gap:11px}
.gpnsr li{padding-left:15px;border-left:2px solid var(--yl)}
.gpnsr b{display:block;font-size:13px;font-weight:700;color:var(--euc)}
.gpnsr span{display:block;margin-top:3px;font-size:12.4px;line-height:1.5;color:var(--tx-2)}
/* the scroll cue that hands the team photograph to the carousel */
.tmeb{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--yl)}
.tmhd .d2{margin-top:12px}
.tmcue{position:relative;z-index:3;display:inline-flex;align-items:center;gap:9px;
 margin:clamp(18px,2vw,26px) auto 0;padding:0 var(--pd);
 font-size:11.4px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.tmcue i{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
 display:grid;place-items:center;transition:transform .45s var(--e),background .35s}
.tmcue i:after{content:"";width:6px;height:6px;border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;
 transform:rotate(45deg) translate(-1px,-1px)}
.tmcue:hover i{background:rgba(255,255,255,.15);transform:translateY(3px)}
/* centre the heading block ONLY — the hotspot name cards below it are
   left-aligned by design and a section-wide text-align:center reaches them */
#mbteam .tmhd{text-align:center}
#mbteam .tmhd .ld,#mbteam .tmh{margin-left:auto;margin-right:auto}
.gpw,.gpfoot{text-align:left}
@media(max-width:900px){
  .gpns{grid-template-columns:1fr}
  .gpnav{display:none}
  .gptrk{padding-left:var(--pd);padding-right:var(--pd);scroll-snap-type:x proximity}
  .gpc{flex-basis:min(74vw,300px)}
  .gpcin{transform:none;opacity:1}
  .gpc.on .gpcin{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .gptrk{scroll-behavior:auto}
  .gpcin,.gpcb,.gpcx,.gpcp img,.gpnav,.gpdots button{transition:none}
  .gpcin{transform:none;opacity:1}
  .gpc.on .gpcin{transform:none}
  .gpc.on:before{display:none}
}