.spec-skip{position:fixed;inset-block-start:var(--sp-2);inset-inline-start:var(--sp-2);z-index:100;transform:translateY(-200%);padding:var(--sp-3) var(--sp-4);background:var(--surface-invert);color:var(--text-on-invert);}
.spec-skip:focus{transform:none;}
.spec-head{position:relative;border-block-end:var(--border-subtle);background:var(--surface-header);}
.spec-head-in{inline-size:var(--container-inline);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding-block:var(--sp-3);}
.spec-lock{display:flex;align-items:center;gap:var(--sp-3);min-inline-size:0;}
.spec-ring{display:block;flex:none;inline-size:var(--dot-size);block-size:var(--dot-size);border-radius:var(--radius-round);border:var(--dot-border);animation:mbg-pulse var(--dur-pulse) infinite;}
.spec-brand{display:grid;gap:var(--sp-05);font-family:var(--font-brand-lockup);min-inline-size:0;}
.spec-name{font-size:var(--size-mono-md);letter-spacing:var(--track-name);white-space:nowrap;}
.spec-credential{font-size:var(--size-mono-xs);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--text-faint);white-space:nowrap;}
.spec-controls{display:flex;align-items:center;gap:var(--sp-4);}
.spec-primary{display:none;gap:var(--sp-5);font-family:var(--type-nav-family);font-size:var(--type-nav-size);letter-spacing:var(--type-nav-track);text-transform:var(--type-nav-transform);}
.spec-nav-item{display:inline-flex;align-items:center;min-block-size:var(--hit-min);color:var(--text-support);}
.spec-nav-item[aria-current="page"]{color:var(--signal);}
.spec-language{display:flex;border:var(--border-control);font-size:var(--size-mono-sm);}
.spec-language>*{display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--hit-lang);min-inline-size:var(--hit-min);padding-inline:var(--sp-2);}
.spec-language [lang="en"]{font-family:var(--font-technical);}
.spec-language [lang="he"]{font-family:var(--font-sans-hebrew);}
.spec-language [aria-current="page"]{background:var(--surface-invert);color:var(--text-on-invert);}
.spec-mobile-button{display:inline-flex;align-items:center;min-block-size:var(--hit-min);padding-inline:var(--sp-3);border:var(--border-control);background:transparent;color:var(--text-strong);font-family:var(--type-nav-family);font-size:var(--type-nav-size);letter-spacing:var(--type-nav-track);text-transform:var(--type-nav-transform);cursor:pointer;}
.spec-mobile-panel{position:absolute;inset-block-start:100%;inset-inline:0;z-index:60;display:grid;background:var(--surface-page);border-block-end:var(--border-subtle);padding-inline:var(--sp-4);}
.spec-mobile-panel[hidden]{display:none;}
.spec-mobile-panel a{display:flex;align-items:center;min-block-size:var(--hit-row);border-block-end:var(--border-subtle);}
.spec-mobile-panel a:last-child{border-block-end:0;}
.spec-section{border-block-end:var(--border-subtle);}
.spec-inner{inline-size:var(--container-inline);margin-inline:auto;padding-block-start:var(--rhythm-section-start);padding-block-end:var(--rhythm-section-end);}
/* Half the closing space, so the About line sits closer to the rule that
   ends the hero. The row gap inside the hero is untouched, so neither the
   portrait nor the illustration moves. */
.spec-inner--hero{position:relative;overflow:hidden;padding-block-start:var(--rhythm-hero-start);padding-block-end:calc(var(--rhythm-hero-gap) / 2);}
.spec-inner--hero>div,.spec-inner--hero>.spec-portrait{position:relative;z-index:1;}
/* Tight halo in the page colour, so each letter carries its own ground where
   it crosses the illustration. Repeated at one radius to build density, with a
   single wider pass to soften the outer edge. */
.spec-inner--hero .mbg-overline,.spec-inner--hero .spec-h1,.spec-inner--hero .spec-credentials{text-shadow:0 0 3px var(--surface-page),0 0 3px var(--surface-page),0 0 7px color-mix(in srgb,var(--surface-page) 85%,transparent);}
.spec-credentials>span:first-child{font-size:calc(var(--size-small) * 1.2);color:var(--text-expertise);}
.spec-credentials>span:nth-child(2){font-size:calc(var(--size-small) * 1.2);color:color-mix(in srgb,var(--text-credential) 20%,white 80%);}
@media (min-width:90rem){
  .spec-credentials{max-inline-size:none;}
  .spec-credentials>span:first-child{white-space:nowrap;}
  .spec-credentials>span:nth-child(2){display:block;max-inline-size:var(--measure-hero);}
}
.spec-hero-art{position:absolute;inset-block-end:0.85rem;inset-inline-end:calc(var(--portrait-max) - 5.32rem);inline-size:48.67rem;max-inline-size:90%;aspect-ratio:16/9;opacity:.65;pointer-events:none;z-index:0;background-image:image-set(url("../assets/illustrations/hero-heart-900.png") 1x,url("../assets/illustrations/hero-heart-1600.png") 2x);background-image:image-set(url("../assets/illustrations/hero-heart-900.avif") type("image/avif") 1x,url("../assets/illustrations/hero-heart-1600.avif") type("image/avif") 2x,url("../assets/illustrations/hero-heart-900.webp") type("image/webp") 1x,url("../assets/illustrations/hero-heart-1600.webp") type("image/webp") 2x,url("../assets/illustrations/hero-heart-900.png") type("image/png") 1x,url("../assets/illustrations/hero-heart-1600.png") type("image/png") 2x);background-repeat:no-repeat;background-size:contain;}
@media (max-width:64rem){.spec-hero-art{display:none;}}
/* The illustration hangs from the bottom of the hero, so when the About panel
   opened and the hero grew, the illustration slid the same distance down the
   page. The About panel is now its own row of the hero rather than part of the
   text column, and the illustration hangs from the bottom of the first row,
   which the panel cannot change. The offset gives back the gap that used to
   sit between that row and the bottom of the hero, so the illustration rests
   exactly where it did before the About line existed. */
/* The two rows have to be named for the illustration to be able to hang from
   the first one. Without them the browser falls back to the whole hero. */
.spec-inner--hero{grid-template-rows:auto auto;}
.spec-hero-art{grid-row:1 / 2;grid-column:1 / -1;inset-block-end:calc(0.85rem - var(--rhythm-hero-gap));}
.spec-inner--tight{padding-block-start:var(--sp-10);}
.spec-h1{margin:0;font-family:var(--font-display);font-weight:var(--weight-regular);font-size:var(--size-display-1);line-height:var(--lh-flat);letter-spacing:var(--track-hero-role);text-wrap:balance;}
.spec-h1:lang(en){margin-inline-start:-0.086em;}
.spec-display{margin:0;font-family:var(--font-display);font-weight:var(--weight-light);font-size:var(--size-display-2);line-height:var(--lh-flat);letter-spacing:var(--track-display-role);text-wrap:balance;}
.spec-credentials{margin:var(--rhythm-lead-block) 0 0;max-inline-size:var(--measure-hero);display:grid;gap:var(--sp-8);font-family:var(--type-credential-family);font-size:var(--size-small);line-height:var(--lh-mono-stack);letter-spacing:var(--type-credential-track);text-transform:var(--type-credential-transform);color:var(--text-credential);}
.spec-credentials:lang(he)>span:first-child{font-size:22px;}
.spec-actions{display:flex;flex-wrap:wrap;border:var(--border-control);inline-size:fit-content;margin-block-start:var(--sp-12);}
.spec-actions>.spec-button{flex:1 1 auto;}
.spec-button{display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--hit-button);padding-inline:var(--sp-8);text-align:center;font-family:var(--type-button-family);font-size:15px;letter-spacing:var(--type-button-track);text-transform:var(--type-button-transform);transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);}
/* The smaller button type is an English decision. Hebrew keeps the size it
   had, because it carries less of its shape at a small size. */
.spec-button:lang(he){font-size:20px;}
.spec-button--solid{background:var(--surface-invert);color:var(--text-on-invert);}
.spec-button--solid:hover{background:var(--signal);color:var(--text-on-invert);}
.spec-button--quiet{border-inline-start:var(--border-control);}
.spec-button--quiet:hover{color:var(--signal);}
.spec-portrait{margin:0;max-inline-size:var(--portrait-max);}
.spec-portrait img{display:block;inline-size:100%;block-size:auto;aspect-ratio:4/5;object-fit:cover;border:var(--border-subtle);}
.spec-portrait>div{aspect-ratio:4/5;display:grid;align-content:end;gap:var(--sp-2);padding:var(--sp-5);border:var(--border-subtle);background-image:radial-gradient(circle at 2px 2px,var(--dot-grid-soft) 1.5px,transparent 0);background-size:var(--grid-dot-tile-fine);}
.spec-portrait-label{font-family:var(--type-overline-family);font-size:var(--size-mono-sm);letter-spacing:var(--type-overline-track);text-transform:var(--type-overline-transform);color:var(--signal);}
.spec-record-title{margin:0 0 var(--sp-6);font-family:var(--font-label);font-size:var(--size-body);font-weight:var(--weight-regular);letter-spacing:var(--track-label-role);text-transform:var(--transform-label-role);color:var(--text-credential);}
/* The record heading is set the same way in both languages, pale blue and
   lifted off the body size. Hebrew keeps the extra step up the page gives
   all its Hebrew labels. */
.mbg-production-home .spec-record-title{font-size:20px;color:var(--text-expertise);}
.mbg-production-home .spec-record-title:lang(he){font-size:24px;}
.spec-metrics li{display:grid;gap:var(--sp-3);padding:var(--pad-tile);background:var(--surface-page);}
.spec-metric{font-family:var(--font-technical);font-weight:var(--weight-light);font-size:var(--size-metric);line-height:var(--lh-flat);font-variant-numeric:tabular-nums;}
.spec-metric-label{font-family:var(--type-metric-label-family);font-size:var(--size-mono-sm);letter-spacing:var(--type-metric-label-track);text-transform:var(--type-metric-label-transform);color:var(--text-support);}
.spec-footnote{margin:var(--sp-5) 0 0;font-family:var(--font-label);font-size:var(--size-mono-sm);line-height:var(--lh-body);color:var(--text-faint);}
.spec-index{margin-block-start:var(--rhythm-grid);}
.spec-index-marker{font-size:var(--size-mono-lg);letter-spacing:var(--track-mono);color:var(--text-support);transition:color var(--dur-fast) var(--ease-out);}
.spec-index-title{font-size:var(--size-row-title);line-height:var(--lh-title);color:var(--signal);}
.spec-index-description{font-size:var(--size-body);line-height:var(--lh-row);color:var(--text-support);text-wrap:pretty;}
.spec-index-arrow{font-size:var(--size-arrow);color:var(--text-strong);opacity:.3;transition:opacity var(--dur) var(--ease-out);}
/* Conditions and treatments pairing.
   The two lists are siblings, not a row-by-row correspondence: condition
   three is not treated by treatment three, so the rows are deliberately left
   to flow at their own heights. Forcing them into shared rows would align the
   rules but would assert a pairing that is not true, which on a patient page
   is a content error, not a styling one.
   What is aligned is where the two lists begin. The column heading block sits
   in a shared row, so both ruled lists start on the same line however the
   headings wrap. */
/* Stacked, the treatments block needs its own air or its overline reads as a
   caption on the last condition row. Side by side that gap would fall between
   the shared rows instead, so it is cleared at the breakpoint. */
.spec-pairing{display:grid;grid-template-columns:1fr;row-gap:var(--rhythm-grid);}
.spec-pairing .mbg-index{grid-template-columns:1fr;}
@media (min-width:48rem){
  .spec-pairing{grid-template-columns:1fr 1fr;column-gap:2.5rem;row-gap:0;grid-template-rows:auto auto auto;}
  .spec-pairing>div{grid-row:1/-1;display:grid;grid-template-rows:subgrid;}
}
/* The column heads label a list, so they sit a step below the section
   displays and the pairing reads as one section with two halves rather than
   two sections butted together. The size is set so each heading holds a
   single line from 48rem up in both languages: at --size-display-2 the
   English condition head broke after "Dr.", which orphaned the title from
   the name and dropped that list a full line below its neighbour. */
.spec-pairing .spec-display{font-size:clamp(1.75rem,2.6vw,2.25rem);}
.spec-pairing .mbg-overline{font-size:.875rem;}
.spec-pairing .mbg-overline:lang(he){font-size:22px;}
/* The icon occupies the same 2.75rem track and the same baseline as the
   numeral it replaces. The wrapper span carries the numeral's own line box so
   the two columns share a baseline; the offset drops the 24px glyph so its
   centre sits on the digits' optical centre rather than on the baseline. */
.spec-index-icon{display:inline-block;inline-size:3rem;block-size:3rem;vertical-align:-.42em;}
/* The shared row grid baseline-aligns marker and title, which lines up
   numeral markers with their text but leaves an icon's own bottom margin
   hanging below. Icon rows only: top-align marker and title instead, so the
   title's cap-height starts level with the icon's own top edge. The marker
   also only occupied the title's row, so the 48px icon forced that row's own
   track to 48px tall and pushed the description down by the difference,
   widening the title-to-description gap past the numeral rows' gap. Spanning
   the marker across both rows lets the title and description size to their
   own text again, matching the numeral rows' gap. */
.mbg-row:has(.spec-index-icon) .mbg-row-idx{grid-row:1 / 3;align-self:start;}
.mbg-row:has(.spec-index-icon) .mbg-row-title{align-self:start;}
.spec-footer{color:var(--text-support);}
.spec-footer-inner{inline-size:var(--container-inline);margin-inline:auto;padding-block:var(--sp-12) var(--sp-8);}
.spec-footer-columns{display:grid;gap:var(--sp-12) var(--sp-10);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));}
.spec-footer h2{margin:0 0 var(--sp-4);font-family:var(--type-overline-family);font-size:var(--size-mono-xs);font-weight:var(--weight-regular);letter-spacing:var(--type-overline-track);text-transform:var(--type-overline-transform);color:var(--text-strong);}
.spec-footer ul{list-style:none;padding:0;margin:0;display:grid;}
.spec-footer li{display:flex;align-items:center;min-block-size:var(--hit-min);}
.spec-legal{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;margin-block-start:var(--sp-12);padding-block-start:var(--sp-6);border-block-start:var(--border-subtle);font-family:var(--font-label);font-size:var(--size-mono-sm);color:var(--text-faint);}
.spec-legal ul{display:flex;flex-wrap:wrap;gap:var(--sp-6);}
.spec-legal a{color:var(--text-faint);}
@media (min-width:64rem){.spec-primary{display:flex}.spec-mobile{display:none}}
@media (max-width:28rem){.spec-credential{display:none}.spec-controls{gap:var(--sp-2)}.spec-language>*{min-inline-size:var(--hit-min)}}
/* Stack the fused pair while the hero is sharing space with the portrait.
   The text column, not the viewport, is the limiting width between 48rem and
   64rem. Keeping the stack through 78rem prevents either label from wrapping
   inside a partial row, while wider layouts retain the approved inline pair. */
@media (max-width:78rem){.spec-actions{display:grid;inline-size:100%}.spec-button{inline-size:100%}.spec-button--quiet{border-inline-start:0;border-block-start:var(--border-control)}}
@media (prefers-reduced-motion:reduce){.spec-ring{animation:none}}

/* Production-shell bridge. The approved Gray fixture owns the visual rules;
   these selectors map the existing shared static shell onto that foundation
   only for the bounded homepage pilot. */
/* The scheme has to land on the root element, not the body: native scrollbars
   and form chrome read the root. tokens.css declares light for the rest of the
   site. Scoped to the page class rather than relying on stylesheet load order,
   so a future page that pulls this file in without the class stays light. */
:root:has(body.mbg-production-home){color-scheme:dark;}
.mbg-production-home{color-scheme:dark;--text-expertise:#b9dcf0;--mb-tap-highlight:color-mix(in srgb,var(--signal) 30%,transparent);}
/* Every followed link on this dark page turns the same light blue as the
   PubMed and Semantic Scholar citations. base.css's global a:visited is a
   light-theme navy that is unreadable on this ground.
   The booking button is the one exclusion, owner decision 23.08.2026: it is
   the only link with a white ground, where this blue measures 1.52:1 and the
   label would be unreadable once a patient has booked. Everywhere else the
   blue sits on the dark page at 9.94:1. */
.mbg-production-home a:visited:not(.spec-button--solid){color:var(--mb-atlantic-200);}
.mbg-production-home :is(h1,h2,h3,h4,h5,h6){color:var(--text-strong);}
.mbg-production-home .mb-masthead{position:relative;z-index:50;background:var(--surface-header);color:var(--text-strong);border-block-end:var(--border-subtle);}
.mbg-production-home .mb-masthead .mb-container,
.mbg-production-home .mb-footer .mb-container{inline-size:var(--container-inline);max-inline-size:none;margin-inline:auto;}
.mbg-production-home .mb-masthead__inner{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:var(--sp-4);padding-block:var(--sp-3);}
.mbg-production-home .mb-wordmark{display:flex;align-items:center;gap:var(--sp-3);min-inline-size:0;min-block-size:var(--hit-min);padding:0;color:var(--text-strong);text-decoration:none;}
.mbg-production-home .mb-wordmark:visited,
.mbg-production-home .mb-wordmark:hover{color:var(--text-strong);}
.mbg-production-home .mb-wordmark__signal{display:block;flex:none;inline-size:var(--dot-size);block-size:var(--dot-size);border-radius:var(--radius-round);border:var(--dot-border);animation:mbg-pulse var(--dur-pulse) infinite;}
.mbg-production-home .mb-wordmark__copy{display:grid;gap:var(--sp-05);font-family:var(--font-brand-lockup);min-inline-size:0;}
/* Gray has no Hebrew voice for the brand lockup: --font-brand-lockup resolves
   to --font-mono-latin at :root and the :lang(he) block in tokens/typography.css
   does not override it, so a Hebrew wordmark falls out of Space Mono into the
   system monospace fallback. Bridged here for the homepage pilot; the gap
   belongs upstream in the design system. */
.mbg-production-home .mb-wordmark__copy:lang(he){font-family:var(--font-sans-hebrew);}
/* Owner request, 2026-08-17 supersedes the 2026-08-14 sizing/dimming rule
   that lived here: the two credential lines now carry their own size and
   color directly on :first-child / :nth-child(2) above. */
.mbg-production-home .mb-wordmark__name{font-size:1.125rem;font-weight:var(--weight-regular);line-height:1.2;letter-spacing:var(--track-name);white-space:nowrap;}
.mbg-production-home .mb-wordmark__role{font-size:.75rem;line-height:1.2;letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--text-faint);white-space:nowrap;}
.mbg-production-home .mb-masthead__end{display:flex;align-items:center;gap:var(--sp-4);min-inline-size:0;}
.mbg-production-home .mb-nav{gap:var(--sp-5);}
.mbg-production-home .mb-nav__item{min-block-size:var(--hit-min);padding:0;border-radius:0;font-family:var(--type-nav-family);font-size:var(--type-nav-size);font-weight:var(--weight-regular);letter-spacing:var(--type-nav-track);text-transform:var(--type-nav-transform);color:var(--text-support);box-shadow:none;text-decoration:none;}
.mbg-production-home .mb-nav__item:visited{color:var(--text-support);}
.mbg-production-home .mb-nav__item:hover{background:transparent;color:var(--signal);}
.mbg-production-home .mb-nav__item.is-current{color:var(--signal);font-weight:var(--weight-regular);box-shadow:none;}
.mbg-production-home .mb-nav__item.is-disabled{color:var(--text-faint);}
.mbg-production-home .mb-langswitch{display:flex;border:var(--border-control);border-radius:0;overflow:visible;}
.mbg-production-home .mb-langswitch__item{min-block-size:var(--hit-lang);min-inline-size:var(--hit-min);padding-inline:var(--sp-2);font-size:var(--size-mono-sm);color:var(--text-support);background:transparent;}
.mbg-production-home .mb-langswitch__item[lang="en"]{font-family:var(--font-technical);}
.mbg-production-home .mb-langswitch__item[lang="he"]{font-family:var(--font-sans-hebrew);}
.mbg-production-home .mb-langswitch__item:hover{color:var(--signal);}
.mbg-production-home .mb-langswitch__item + .mb-langswitch__item{border-inline-start:var(--border-control);}
.mbg-production-home .mb-langswitch__item.is-current{background:var(--surface-invert);color:var(--text-on-invert);font-weight:var(--weight-regular);}
.mbg-production-home .mb-navtoggle__button{min-block-size:var(--hit-min);padding-inline:var(--sp-3);gap:var(--sp-2);border:var(--border-control);border-radius:0;background:transparent;color:var(--text-strong);font-family:var(--type-nav-family);font-size:var(--type-nav-size);letter-spacing:var(--type-nav-track);text-transform:var(--type-nav-transform);}
.mbg-production-home .mb-navtoggle__button:hover{background:var(--surface-hover);}
.mbg-production-home .mb-nav--mobile{position:absolute;inset-block-start:100%;inset-inline:0;z-index:60;display:grid;gap:0;padding-inline:var(--sp-4);padding-block:0;background:var(--surface-page);border-block-end:var(--border-subtle);}
.mbg-production-home .mb-nav--mobile[hidden]{display:none;}
.mbg-production-home .mb-nav--mobile .mb-nav__item{inline-size:100%;min-block-size:var(--hit-row);border-block-end:var(--border-subtle);font-size:var(--type-nav-size);}
.mbg-production-home .mb-nav--mobile .mb-nav__item:last-child{border-block-end:0;}
.mbg-production-home .mb-footer{padding:0;background:transparent;color:var(--text-support);}
.mbg-production-home .mb-footer .mb-container{padding-block:var(--sp-12) var(--sp-8);}
.mbg-production-home .mb-footer__cols{gap:var(--sp-12) var(--sp-10);}
.mbg-production-home .mb-footer__head{margin:0 0 var(--sp-4);font-family:var(--type-overline-family);font-size:var(--size-mono-xs);font-weight:var(--weight-regular);letter-spacing:var(--type-overline-track);text-transform:var(--type-overline-transform);color:var(--text-strong);}
html[lang="he"] .mbg-production-home .mb-footer__head{font-size:16px;color:var(--text-expertise);}
.mbg-production-home .mb-footer__list{font-size:var(--size-body);}
.mbg-production-home .mb-footer__list :is(a,li){min-block-size:var(--hit-min);}
.mbg-production-home .mb-footer a{color:var(--text-support);}
.mbg-production-home .mb-footer a:hover{color:var(--signal);}
.mbg-production-home .mb-footer__disabled{color:var(--text-faint);}
.mbg-production-home .mb-colophon{margin-block-start:var(--sp-12);padding-block-start:var(--sp-6);border-block-start:var(--border-subtle);font-family:var(--font-label);font-size:var(--size-mono-sm);color:var(--text-faint);}
.mbg-production-home .mb-colophon__links{gap:var(--sp-6);}
.mbg-production-home .mb-colophon__links :is(a,.mb-footer__disabled){display:inline-flex;align-items:center;min-block-size:var(--hit-min);}
/* Click-to-call sits inline in a sentence, so it inherits the paragraph's
   ~25px line box: below the 48px touch target the RTL checklist
   (HREFLANG_TRIGGER_2026-07-22_1445.md item 8) requires. --hit-row is the
   smallest system token that clears 48px; --hit-min is only 44px, which
   satisfies the design system but not the checklist. Flagged for the owner
   rather than resolved silently. */
.mbg-production-home .spec-tel{display:inline-flex;align-items:center;min-block-size:var(--hit-row);white-space:nowrap;}
/* A phone number or a time range is one atomic LTR run. unicode-bidi:isolate
   orders it correctly but does not stop it wrapping, and a wrapped range in
   RTL text renders as "-08:30" on one line and "17:00" on the next, which
   reads as a different time. Observed on /he/ at 375px before this rule. */
.mbg-production-home .spec-hours{white-space:nowrap;}
.mbg-production-home .mbg-row--disabled{color:var(--text-strong);cursor:not-allowed;}
.mbg-production-home .mbg-row--disabled:hover{background:transparent;color:var(--text-strong);}
.mbg-production-home .mbg-row--disabled:hover .mbg-row-idx{color:var(--text-support);}
.mbg-production-home .mbg-row--disabled:hover .mbg-row-arrow{opacity:.3;}
.mbg-production-home .mbg-row--static{cursor:default;}
/* A static row is not a link, so it must not carry the arrow that signals one. */
.mbg-production-home .mbg-row--static .mbg-row-arrow{display:none;}
.mbg-production-home .spec-button[aria-disabled="true"]{color:var(--text-faint);background:transparent;cursor:not-allowed;}
.mbg-production-home .spec-button[aria-disabled="true"]:hover{color:var(--text-faint);background:transparent;}
@media (max-width:28rem){
  .mbg-production-home .mb-masthead__inner{flex-wrap:wrap;}
  .mbg-production-home .mb-wordmark{inline-size:100%;}
  .mbg-production-home .mb-wordmark__role{display:none;}
  .mbg-production-home .mb-masthead__end{inline-size:100%;justify-content:space-between;gap:var(--sp-2);}
}
@media (prefers-reduced-motion:reduce){.mbg-production-home .mb-wordmark__signal{animation:none}}

/* The clinic address is a link to Google Maps, but it sat in a list of plain
   address lines in the same colour with no underline, so nothing marked it as
   clickable. Underline it, which is the only cue that does not rely on colour. */
.mb-footer__location-link{text-decoration:underline;text-underline-offset:3px;}

/* Safety notice beside the booking route. Draft wording, awaiting owner approval. */
.spec-safety{margin:var(--sp-5) 0 0;font-family:var(--font-label);font-size:var(--size-mono-sm);line-height:var(--lh-body);color:var(--text-body);}
.spec-safety .spec-tel{min-block-size:0;}

/* About, folded into the hero.
   A native disclosure, so it opens by click, by Enter and by Space, is found
   by the browser's own find, and needs no script. The landing release ships
   no script at all, which is why there is no hover-to-open here. */
/* Its own row of the hero, so opening it cannot change the height of the row
   the portrait and the illustration live in. The negative start takes back
   most of the hero's own row gap, leaving the panel sitting just under the
   buttons as though it were still part of that column. */
.spec-about{grid-row:2;grid-column:1 / -1;position:relative;z-index:1;margin-block-start:calc(var(--sp-8) - var(--rhythm-hero-gap));}
/* The hero illustration sits behind this column, so the trigger and the open
   lines both carry the same halo as the name and the credential lines above
   them. At a half-transparent plate the halo is doing the real work: the
   brightest part of the illustration shows through far enough that the plate
   alone would not hold the contrast. */
.spec-inner--hero .spec-about-summary,.spec-inner--hero .spec-about-item{text-shadow:0 0 3px var(--surface-page),0 0 3px var(--surface-page),0 0 7px color-mix(in srgb,var(--surface-page) 85%,transparent);}
/* The trigger is set exactly like the expertise line in the credentials
   above it, same family, size, tracking and pale blue, so it reads as one
   more line of the hero rather than as a control bolted on. */
.spec-about-summary{cursor:pointer;list-style:none;font-family:var(--type-credential-family);font-size:calc(var(--size-small) * 1.2);letter-spacing:var(--type-credential-track);text-transform:var(--type-credential-transform);color:var(--text-expertise);transition:color var(--dur) var(--ease-out);}
/* The row layout sits on a span inside the trigger, not on the trigger
   itself. Safari has a long history of dropping the disclosure control
   when the summary element is given a display of its own. */
.spec-about-trigger{display:flex;align-items:center;gap:var(--sp-3);min-block-size:var(--hit-min);}
.spec-about-summary::marker{content:"";}
.spec-about-summary::-webkit-details-marker{display:none;}
.spec-about-summary:hover{color:var(--signal);}
/* The outlined triangle. The same drawn shape marks the trigger and every
   line, which is what ties the two together. */
/* Sized in the text's own em, so the triangle keeps its proportion to the
   line it marks: larger beside the About label, smaller beside the bio
   lines, and larger again in Hebrew where the type is lifted. */
.spec-about-mark{flex:none;inline-size:.75em;block-size:.75em;color:var(--signal);}
/* The trigger's own mark runs a quarter larger than the marks beside the
   lines, so it reads as the control and they read as the list. */
.spec-about-mark--caret{inline-size:.9375em;block-size:.9375em;transition:transform var(--dur) var(--ease-out);}
.spec-about[open] .spec-about-mark--caret{transform:rotate(90deg);}
/* In Hebrew the whole block mirrors, so the apex points at the sentence from
   the other side. Rotating a mirrored triangle still lands apex-down. */
[dir="rtl"] .spec-about-mark{transform:scaleX(-1);}
[dir="rtl"] .spec-about[open] .spec-about-mark--caret{transform:scaleX(-1) rotate(90deg);}
/* Five lines of small text sitting over the hero illustration need a ground of
   their own. A printed card: the page's own dot grid laid on near-black, an
   orange rule along its top edge, and a hard offset shadow with no blur, so it
   reads as a card set down on the page rather than glass floating over it.
   Each line sets its own size below. */
/* fit-content, not the hero's full width: the longest biography line is shorter
   than the hero, so a full-width card left the text 25px from its left edge and
   103px from its right. The card now sizes to its own longest line, which makes
   both inner gaps the padding and nothing else. Still capped by the space
   available, so the narrow-screen behaviour below is unchanged. */
.spec-about-list{list-style:none;inline-size:fit-content;font-size:calc(var(--size-small) * 1.2);margin:0 0 var(--sp-6);margin-inline-start:20px;margin-inline-end:14px;padding:var(--sp-6);display:grid;gap:var(--sp-6);background-color:color-mix(in srgb,var(--surface-hover) 88%,transparent);background-image:radial-gradient(circle at 2px 2px,var(--dot-grid-soft) 1.5px,transparent 0);background-size:var(--grid-dot-tile-fine);border:var(--border-subtle);border-block-start:var(--dot-border);box-shadow:var(--sp-3) var(--sp-3) 2px 0 color-mix(in srgb,var(--ink-900) 50%,transparent);}
/* A cast shadow has no logical direction of its own, so the offset is
   mirrored by hand for Hebrew. */
[dir="rtl"] .spec-about-list{box-shadow:calc(-1 * var(--sp-3)) var(--sp-3) 2px 0 color-mix(in srgb,var(--ink-900) 50%,transparent);}
.spec-about-list:lang(he){font-size:22px;}
.spec-about-item{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:calc(var(--size-small) * 1.5);font-weight:300;line-height:1.65;color:var(--text-credential);text-wrap:pretty;}
.spec-about-item:lang(en){letter-spacing:0.5px;}
.spec-about-item .spec-about-mark{margin-block-start:.37em;}
.spec-about-sublist{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:grid;gap:var(--sp-1);}
.spec-about-sublist li{padding-inline-start:var(--sp-4);}
/* Hebrew carries less of its shape at a small size than Latin does, which is
   why the page already lifts its Hebrew labels. Same lift here. */
.spec-about-summary:lang(he){font-size:22px;}
.spec-about-item:lang(he){font-size:25.5px;}
/* At 320px the card plus its start and end margins is wider than the hero
   column, and .spec-inner--hero clips the overflow, which cut letters off the
   headline above. Below 22rem the alignment under the A of About is worth less
   than the text staying whole, so the side margins go. */
@media (max-width:22rem){.spec-about-list,[dir="rtl"] .spec-about-list{margin-inline:0;}}
/* The panel is fully present the moment it opens. The animation only softens
   the arrival, so the content survives print, a stopped animation and a
   headless screenshot. */
@keyframes spec-about-reveal{from{opacity:0;transform:translateY(-0.25rem);}to{opacity:1;transform:none;}}
.spec-about[open] .spec-about-list{animation:spec-about-reveal var(--dur) var(--ease-out);}
@media (prefers-reduced-motion:reduce){
  .spec-about[open] .spec-about-list{animation:none;}
  .spec-about-mark--caret{transition:none;}
}

/* Printing. The landing page is white text on a dark ground, and browsers drop
   backgrounds when printing, so without this the page prints white on white.
   Print the words, drop the decoration, and spell out the booking address. */
@media print {
  .mbg-production-home,
  .mbg-production-home body,
  .mbg-production-home main,
  .mbg-production-home section { background: #ffffff !important; color: #000000 !important; }
  .mbg-production-home *,
  .mbg-production-home *::before,
  .mbg-production-home *::after { background-image: none !important; color: #000000 !important; box-shadow: none !important; }
  .mbg-production-home .spec-button--solid { border: 1px solid #000000 !important; }
  .mbg-production-home .mb-skip-link,
  .mbg-production-home .mb-langswitch,
  .mbg-production-home .spec-hero-art,
  .mbg-production-home .spec-index-icon { display: none !important; }
  .mbg-production-home .spec-portrait { max-inline-size: 45mm; }
  .mbg-production-home a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  .mbg-production-home a[href^="tel:"]::after,
  .mbg-production-home a[href^="mailto:"]::after,
  .mbg-production-home a[href^="#"]::after { content: ""; }
}

/* The bio prints, open or closed, so a printed page carries it. */
@media print {
  .mbg-production-home .spec-about > *:not(summary) { display: block !important; }
  .mbg-production-home .spec-about::details-content { content-visibility: visible !important; block-size: auto !important; }
  .mbg-production-home .spec-about-list { animation: none !important; }
  /* The plate is a dark ground for white text. On paper the text is black,
     so the plate has to go or the lines print black on near-black. */
  .mbg-production-home .spec-about-list { background: none !important; padding-inline: 0 !important; padding-block: 0 !important; border: 0 !important; box-shadow: none !important; margin-inline-start: 0 !important; }
}