/* The tokens and the shared components come first, in this order; they must
   stay the first rules in this file (an @import after any rule is ignored).
   The ?v= is bumped by hand when either file changes: asset() versions the
   <link> to this sheet, not what it imports. Better still, two <link> tags in
   layout.php ahead of this one (asked for, 2026-10-11), then drop these. */
@import url("tokens.css?v=20261011lime1");
@import url("components.css?v=20261017phone1");

/* MindMorph: the site shell and the home page (2026-10-11).
   White paper and near-black ink carry the page; her logo's purple and its
   sage leaf are accents only (tokens.css). No tinted bands; a near-black
   floor under the film, the stats and the footer. Mobile first: every rule
   below is the phone, the min-width blocks add the wider layouts. Targets are
   44px at least; nothing depends on hover. This file is MindMorph's own: the
   shell, the header, the film, the moving line, the home sections, the band
   and the footer. What a sister site reuses lives in components.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--head) + var(--bar) + 16px)}
body{margin:0;background:var(--white);color:var(--ink);font:400 var(--fs-body)/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--plum);text-decoration-thickness:1px;text-underline-offset:.18em}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.18;color:var(--ink);margin:0;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:2.1rem;font-size:var(--fs-h1)}
h2{font-size:1.65rem;font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0}
address{font-style:normal}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--plum);color:var(--white);padding:12px 18px;border-radius:var(--radius-pill)}
.skip:focus{left:12px}
.muted{color:var(--quiet)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ---------- header: one line at every width ---------- */
/* dense frosted glass (Eric, 2026-10-11): at .86 white the hero's white words
   and the ask pill's placeholder read straight through behind the logo and
   Book; at .96 with a heavy blur nothing behind it is legible, only colour.
   Solid white where backdrop-filter isn't supported. */
.site-head{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--rule-soft)}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .site-head{background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(1.8) blur(24px);backdrop-filter:saturate(1.8) blur(24px)}
}
/* phones and tablets: iOS Safari lets a sticky header scroll away (Eric's
   iPhone, 2026-10-17; the MycoMuse fix), so at 920px and under it is fixed,
   announcement bar and all, and body keeps its row (head + bar + the 1px
   rule); the home film's negative margin still tucks under it */
@media (max-width:920px){
  .site-head{position:fixed;top:0;left:0;right:0}
  body{padding-top:calc(var(--head) + var(--bar) + 1px)}
}
.head-row{display:flex;align-items:center;gap:12px;height:var(--head);white-space:nowrap}
.brand{display:flex;align-items:center;min-height:44px;min-width:0;flex:0 1 auto;text-decoration:none;color:var(--ink);margin-right:auto}
/* the logo is the whole mark: MIND Morph stays legible at 42px tall on a phone */
.brand-logo{height:42px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.brand-logo-light{display:none}
.brand-text{font:500 1.05rem/1.15 var(--serif);overflow:hidden;text-overflow:ellipsis}
.head-book{min-height:44px;padding:10px 18px;flex:none}
.head-book .hb-long{display:none}
.menu-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;border:0;background:transparent;color:var(--ink);cursor:pointer}

/* the phone panel: core/assets/menu.css draws it, these are its links */
.nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--rule-soft);color:var(--ink);text-decoration:none;font:500 1.05rem/1.3 var(--sans)}
.nav a[aria-current="page"]{color:var(--plum);font-weight:600}
.nav .nav-book{margin-top:18px;border:0;justify-content:center;border-radius:999px;background:var(--btn-primary);color:var(--white);font:var(--btn-font)}
@media (max-width:920px){html:not(.js) .nav{display:block;padding:0 var(--pad) 16px}}
@media (min-width:480px){.brand-text{font-size:1.2rem}}
@media (min-width:600px){.head-book .hb-long{display:inline}.head-book .hb-short{display:none}}
@media (min-width:921px){
  .head-row{gap:28px}
  .brand-logo{height:52px}
  .menu-btn{display:none}
  .nav{display:flex;align-items:center;gap:26px}
  .nav a{min-height:44px;border:0;font:500 .9rem/1 var(--sans);color:var(--ink-soft)}
  .nav a:hover{color:var(--plum)}
  .nav a[aria-current="page"]{color:var(--plum);box-shadow:inset 0 -2px 0 var(--plum)}
  .nav .nav-book{display:none}
}

/* the header over the home film (Wren, 2026-10-11, the source fork's pattern):
   home.php sets html.head-over before the film paints, only when the opening
   has a film or photo; the header is clear and white-inked over it, then the
   usual glass bar once the page scrolls (.is-solid) or the menu opens. No
   script, no head-over: the header simply stays solid. The header's Book
   steps aside while the opening's own Book is on screen (one filled button
   per screen) and comes back with the solid bar. */
.site-head{transition:background-color .25s ease,border-color .25s ease}
html.head-over body:not(.menu-open) .site-head:not(.is-solid){background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html.head-over body:not(.menu-open) .site-head:not(.is-solid) .brand-logo:not(.brand-logo-light){display:none}
html.head-over body:not(.menu-open) .site-head:not(.is-solid) .brand-logo-light{display:block}
html.head-over body:not(.menu-open) .site-head:not(.is-solid) .brand-text,
html.head-over body:not(.menu-open) .site-head:not(.is-solid) .menu-btn{color:var(--white)}
html.head-over body:not(.menu-open) .site-head:not(.is-solid) .head-book{display:none}
@media (min-width:921px){
  html.head-over body:not(.menu-open) .site-head:not(.is-solid) .nav>a,
  html.head-over body:not(.menu-open) .site-head:not(.is-solid) .nav-dd>.nav-dd-btn{color:var(--white);text-shadow:0 1px 2px rgba(var(--night-rgb),.45)}
  html.head-over body:not(.menu-open) .site-head:not(.is-solid) .nav>a[aria-current="page"],
  html.head-over body:not(.menu-open) .site-head:not(.is-solid) .nav-dd.is-current>.nav-dd-btn{text-decoration-color:var(--sage-leaf)}
}

/* ---------- breadcrumbs ---------- */
.crumbs ol{list-style:none;margin:0;padding:18px 0 0;display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--quiet)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--rule)}
.crumbs a{color:var(--quiet);display:inline-flex;align-items:center;min-height:44px;margin:-14px -4px;padding:0 4px}
/* phones: one line, the page's own name gives way with an ellipsis (the trail itself, which feeds the schema, keeps every word) */
@media (max-width:599px){
  .crumbs ol{flex-wrap:nowrap;white-space:nowrap}
  .crumbs li:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- editor slots: an empty setting shows only to a signed-in editor ---------- */
.slot-empty{min-height:1.4em;min-width:6em;outline:1px dashed var(--violet);outline-offset:4px;border-radius:4px}
.is-edit [data-edit-type="setting"]:empty::before{content:"Empty: click to add";color:var(--quiet);font:italic 400 .9rem var(--sans)}

/* ---------- home: the opening (Wren, 2026-10-11, after the source fork's lotus) ----------
   The film (or the main photo) fills the box edge to edge, under the clear
   header; the words sit at the foot over the near-black scrim; the moving line
   runs along the very bottom; the stats row follows on the same floor. The scrim's
   alphas are measured, not guessed: over the brightest frame of the film the
   ground behind every line of body text composites to 4.5:1 or better with
   white, and the headline to 3:1 or better (large text). Change the film, and
   re-measure before lightening the scrim. */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;background:var(--night);color:var(--white);padding:0}
.hero.has-media{min-height:100vh;min-height:100svh}
html.head-over #main>.hero.has-media{margin-top:calc(-1 * (var(--head) + var(--bar)) - 1px)}
/* --edge: the content column's right edge, so the film's buttons line up with the header row */
.hero-media{--edge:calc(max(0px,(100% - var(--max)) / 2) + var(--pad));position:absolute;inset:0;z-index:0;margin:0;overflow:hidden;background:var(--night)}
.hero-media picture{display:contents}
.hero-media img,.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.hero-vid{opacity:0;transition:opacity .6s ease}
.hero-video.is-on .hero-vid{opacity:1}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--night-rgb),.62) 0,rgba(var(--night-rgb),.2) 17%,rgba(var(--night-rgb),.24) 30%,rgba(var(--night-rgb),.72) 46%,rgba(var(--night-rgb),.84) 62%,rgba(var(--night-rgb),.92) 100%)}
.hero:not(.has-media) .hero-scrim{display:none}
.hero-top{position:relative;z-index:2;padding-top:calc(var(--head) + var(--bar) + 40px);padding-bottom:28px;pointer-events:none}
/* the copy box spans the hero's top padding, over the film's sound/pause buttons: only its children take taps */
.hero-top > *{pointer-events:auto}
.hero:not(.has-media) .hero-top{padding-top:56px;padding-bottom:56px}
/* measures in em, never ch: ch is the width of the font's zero, which changes when
   the web font lands, and a max-width that moves re-wraps the headline (a shift) */
.hero-copy{max-width:44rem}
.hero .eyebrow{color:var(--sage-leaf)}
/* the headline's size is the --fs-hero / --fs-hero-lg tokens, set in components.css */
.hero h1{max-width:9em;color:var(--white);font-weight:400;line-height:1.06;letter-spacing:-.012em}
.hero-sub{margin-top:14px;max-width:34em;font-size:.98rem;line-height:1.55;color:var(--white)}
.hero-note{margin-top:14px;display:flex;align-items:center;gap:10px;font:500 .8rem/1.4 var(--sans);color:var(--sage-leaf)}
.hero-note::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sage-leaf)}
/* an upright phone: the words take the lower half, so the film rides higher
   and fades into the dark floor, keeping her face clear of the headline */
@media (max-width:599px){
  .hero-media img,.hero-vid{height:84%;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
}
@media (min-width:600px){
  .hero-sub{font-size:1.08rem;line-height:1.6}
  .hero-note{margin-top:18px}
}
@media (min-width:921px){
  .hero-scrim{background:
    linear-gradient(90deg,rgba(var(--night-rgb),.74) 0,rgba(var(--night-rgb),.62) 48%,rgba(var(--night-rgb),.22) 68%,rgba(var(--night-rgb),0) 82%),
    linear-gradient(180deg,rgba(var(--night-rgb),.55) 0,rgba(var(--night-rgb),0) 20%,rgba(var(--night-rgb),0) 55%,rgba(var(--night-rgb),.55) 100%)}
  .hero-top{padding-bottom:44px}
  .hero-sub{max-width:31em}
  .hero-media img,.hero-vid{object-position:50% 40%}
}

/* the moving line: services, then conditions (_marquee.php, assets/marquee.js) */
.mq{position:relative;z-index:3;overflow:hidden;width:100%;padding:5px 0;border-top:1px solid rgba(255,255,255,.18);color:var(--white)}
@supports (overflow:clip){.mq{overflow:clip}}
.mq-track{display:flex;width:max-content;animation:mqRun var(--mq-dur,40s) linear infinite}
.mq-run{display:flex;flex:none;list-style:none;margin:0;padding:0}
.mq-run li{display:flex;flex:none;margin:0;padding:0}
.mq-i{position:relative;flex:none;display:flex;align-items:center;min-height:44px;padding:0 22px;white-space:nowrap;font:italic 400 1.1rem/1.35 var(--serif);letter-spacing:.005em;color:inherit;text-decoration:none;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .2s}
.mq-i::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;margin-top:-1px;border-radius:50%;background:var(--sage-leaf)}
.mq-i:hover,.mq-i:focus{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:currentColor}
.mq-i:focus{outline:2px solid var(--white);outline-offset:-6px;border-radius:6px}
.mq-i:focus:not(:focus-visible){outline:none}
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
.mq.mq-js{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding:0 24px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mq.mq-js::-webkit-scrollbar{display:none;width:0;height:0}
.mq.mq-js .mq-track{animation:none;will-change:transform}
@media (hover:hover) and (pointer:fine){.mq.mq-js{cursor:grab}}
.mq.mq-drag,.mq.mq-drag .mq-i{cursor:grabbing}
@media (prefers-reduced-motion:no-preference){.mq.mq-js .mq-track{padding-left:24px}}
@keyframes mqRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 78%,transparent);mask-image:linear-gradient(to right,#000 78%,transparent)}
  .mq::-webkit-scrollbar{display:none}
  .mq-track{animation:none;padding-left:var(--pad)}
  .mq-dup{display:none}
  .mq-run li:first-child .mq-i{padding-left:0}
  .mq-run:not(.mq-dup){padding-right:22vw}
  .mq.mq-js{scroll-padding:0 calc(22% + 8px) 0 24px}
  .mq.mq-js .mq-track{will-change:auto}
  .hero-vid{display:none}
}
@media (min-width:921px){.mq{padding:10px 0 11px}.mq-i{padding:0 30px;font-size:1.25rem}}
@media print{.mq-track{animation:none}.mq-dup{display:none}}


/* ---------- home: sections ---------- */
.hsec{padding:var(--space-section) 0}
/* no tinted bands: a section that used to sit on lilac is set off by a hairline */
.hsec-tint{background:var(--white);border-top:1px solid var(--rule)}
.hsec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.hsec-intro{margin-top:12px;color:var(--ink-soft);max-width:40em}

/* the practitioner */
.about-grid{display:grid;gap:28px;align-items:center}
.about-photo{margin:0;border-radius:var(--radius-img);overflow:hidden;background:var(--wash-deep);aspect-ratio:1/1;max-width:420px}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-name{font-size:1.6rem}
.about-cred{margin-top:6px;font:500 var(--fs-small)/1.45 var(--sans);color:var(--quiet)}
.about-text{margin-top:18px;color:var(--ink-soft);max-width:38em}
@media (min-width:921px){.about-grid{grid-template-columns:.8fr 1.2fr;gap:64px}}


/* visit (2026-10-11, Mandala's layout in MindMorph's colours): the office in
   words, ruled detail rows, then the open map card (_visit-map.php) */
.visit{background:var(--wash);border-top:1px solid var(--rule)}
.visit-grid{display:grid;gap:36px;min-width:0}
.visit-main{min-width:0}
.visit h2{max-width:15em;margin:0 0 22px}
.visit-addr{margin:0;font:italic 400 clamp(1.3rem,1.1rem + .9vw,1.7rem)/1.35 var(--serif);color:var(--ink)}
.visit-note{margin:10px 0 0;font:600 var(--fs-small)/1.4 var(--sans);color:var(--sage-ink)}
.visit-note:empty{display:none}
.visit-acts{margin-top:26px}
.visit-rows{margin:0;border-top:1px solid var(--rule);min-width:0}
.visit-rows>div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.visit-rows dt{font:600 .72rem/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.visit-rows dd{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.visit-rows a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.22em;display:inline-flex;align-items:center;min-height:28px}
.visit-rows a:hover{text-decoration-color:var(--plum)}
/* phones: 44px to tap without moving the rows; a narrower label column keeps the email on one line */
@media (max-width:599px){
  .visit-rows a{min-height:44px;margin:-8px 0}
  .visit-rows>div{grid-template-columns:4.5rem minmax(0,1fr)}
  .visit-acts .btn{width:100%}
}
@media (min-width:921px){
  .visit-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:72px;row-gap:56px;align-items:end}
  .visit-rows>div{grid-template-columns:8rem minmax(0,1fr)}
}
/* the map card: drawn in CSS until the tap, then MapLibre + OpenFreeMap */
.vmap-wrap{grid-column:1/-1;min-width:0}
.vmap{position:relative;height:260px;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--rule);
  background-color:var(--plum-deep);
  background-image:
    linear-gradient(28deg,transparent 47%,rgba(255,255,255,.14) 47.6%,rgba(255,255,255,.14) 49.4%,transparent 50%),
    linear-gradient(-62deg,transparent 58%,rgba(255,255,255,.09) 58.5%,rgba(255,255,255,.09) 60%,transparent 60.5%),
    repeating-linear-gradient(0deg,transparent 0 43px,rgba(255,255,255,.06) 43px 45px),
    repeating-linear-gradient(90deg,transparent 0 57px,rgba(255,255,255,.06) 57px 59px)}
.vmap-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;
  background:radial-gradient(ellipse at center,rgba(53,30,47,.8) 0,rgba(53,30,47,.5) 55%,rgba(53,30,47,.15) 100%)}
.vmap-pin{color:var(--sage-leaf)}
.vmap-addr{margin:0;font:italic 400 1.08rem/1.4 var(--serif);color:var(--white)}
.vmap-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px}
.vmap-acts .slot{display:inline-flex}
.vmap-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border-radius:var(--radius-pill);border:0;background:var(--white);color:var(--plum-deep);font:600 .9rem/1 var(--sans);letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 16px -4px rgba(0,0,0,.4);transition:transform .2s ease}
.vmap-btn:hover{transform:translateY(-1px)}
.vmap-btn:focus-visible,.vmap-dir:focus-visible{outline:2px solid var(--sage-leaf);outline-offset:3px}
.vmap-dir{display:inline-flex;align-items:center;min-height:44px;color:var(--white);font:500 .9rem/1 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.vmap-note{margin:0;font-size:.78rem;line-height:1.4;color:rgba(255,255,255,.72)}
.vmap.is-live{background:#F4F2F1;border-color:var(--rule)}
.vmap.is-loading .vmap-btn{opacity:.6;cursor:progress}
.vmap .vmap-canvas{position:absolute;inset:0}   /* beats .maplibregl-map{position:relative}, which loads after this sheet */
.vmap-canvas .maplibregl-canvas:focus-visible{outline:2px solid var(--plum);outline-offset:-4px}
.vmap .maplibregl-ctrl-group:not(:empty){border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 2px 6px -2px rgba(22,19,20,.3),0 0 0 1px var(--rule)}
.vmap .maplibregl-ctrl-group button{width:36px;height:36px}
@media (pointer:coarse){.vmap .maplibregl-ctrl-group button{width:44px;height:44px}}
.vmap .maplibregl-ctrl.maplibregl-ctrl-attrib{font:400 11px/1.35 var(--sans);color:var(--ink-soft);background:rgba(247,246,246,.88);border-top-left-radius:var(--radius);padding:3px 8px}
.vmap .maplibregl-ctrl-attrib a{color:var(--ink)}
.vmap .maplibregl-cooperative-gesture-screen{background:rgba(53,30,47,.62);color:var(--white);font:500 1rem/1.4 var(--sans);padding:20px;border-radius:inherit}
.vmap-mark{display:flex;flex-direction:column;align-items:center;pointer-events:none;color:var(--plum)}
.vmap-mark-tag{margin-bottom:4px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--plum-deep);color:var(--white);font:600 12.5px/1.1 var(--sans);white-space:nowrap;max-width:min(300px,80vw);overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 14px -6px rgba(22,19,20,.5)}
.vmap-mark-pin{display:block;filter:drop-shadow(0 3px 3px rgba(22,19,20,.3))}
@media (min-width:921px){.vmap{height:340px}}
@media (prefers-reduced-motion:reduce){.vmap-btn{transition:none}.vmap-btn:hover{transform:none}}

/* ---------- the booking band that closes a page ---------- */
/* white, like the page, set off by a rule; the plum is the button, not the floor */
.band{background:var(--white);color:var(--ink);padding:56px 0;border-top:1px solid var(--rule)}
.band-text{margin-top:12px;color:var(--ink-soft);max-width:36em}
.band-grid{display:grid;gap:24px;align-items:center}
.band-actions{display:flex;flex-wrap:wrap;gap:12px}
/* on a phone the two buttons stack: one width (the wider one's), not two ragged ends */
@media (max-width:599px){.band-actions{display:grid;justify-content:stretch;gap:16px}.band-actions .btn{width:100%}}
@media (min-width:921px){.band-grid{grid-template-columns:1fr auto;gap:48px}.band{padding:72px 0}}

/* ---------- footer ---------- */
.site-foot{background:var(--night);color:rgba(255,255,255,.82);padding:56px 0 28px;font-size:.92rem}
.site-foot a{color:var(--white)}
.foot-grid{display:grid;gap:32px}
.foot-name{font:500 1.3rem/1.2 var(--serif);color:var(--white)}
.foot-social{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:16px}
.foot-social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;white-space:nowrap}
.foot-social svg{flex:none}
.foot-office{display:grid;gap:4px;line-height:1.55}
.foot-office .addr-note{color:var(--sage-leaf)}
.foot-phone{display:block;margin-top:8px}
.foot-phone a{display:inline-flex;min-height:44px;align-items:center}
.foot-hours,.foot-desk{margin-top:16px}
.foot-desk-h{display:block;color:var(--white);font-weight:600}
.foot-desk-list{list-style:none;margin:6px 0 0;padding:0}
.foot-desk-note{margin-top:6px;font-size:.85rem;color:rgba(255,255,255,.65)}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-content:start}
.foot-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.foot-nav a:hover{text-decoration:underline}
/* phones: two to a row, but a name too long for half the row takes the whole row
   instead of breaking onto two lines (measured by the browser, not counted) */
@media (max-width:599px){
  .foot-nav{display:flex;flex-wrap:wrap;gap:0 20px;align-content:flex-start}
  .foot-nav a{flex:1 0 calc(50% - 10px);white-space:nowrap}
}
.foot-note,.foot-crisis{grid-column:1/-1;color:rgba(255,255,255,.7);font-size:.86rem}
.foot-crisis{padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.tel-crisis{font-weight:600;white-space:nowrap}
.foot-crisis .tel-crisis{color:#fff;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:14px 6px;margin:-14px -6px}
.foot-legal{grid-column:1/-1;font-size:.8rem;color:rgba(255,255,255,.55)}
/* the language switch (core/Lang.php, Bea 2026-10-16): one quiet text link at the end of the copyright line, a full 44px to tap */
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.lang-switch{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;color:rgba(255,255,255,.75);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.lang-switch:hover{color:#fff;text-decoration-color:currentColor}
.lang-switch:focus-visible{outline-color:#fff}
.lang-draft{font-size:.9em;color:rgba(255,255,255,.55)}
/* a draft Russian page, for the signed-in editor only */
.ru-draft-note{margin-top:16px;margin-bottom:0;padding:12px 16px;border-left:3px solid var(--plum);background:rgba(106,60,95,.07);font-size:.92rem;line-height:1.5}
.ru-draft-note a{display:inline-flex;align-items:center;min-height:44px;margin-left:6px;font-weight:600}
.foot-fine{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.8rem}
.foot-fine a{color:rgba(255,255,255,.7);min-height:44px;display:inline-flex;align-items:center}
.foot-fine button{background:none;border:0;padding:0;min-height:44px;color:rgba(255,255,255,.7);font:inherit;text-decoration:underline;cursor:pointer}
@media (min-width:921px){
  .foot-grid{grid-template-columns:1.1fr 1fr 1fr;gap:40px 56px}
  .site-foot{padding:80px 0 32px}
}

/* ---------- home text sections (Content > Homepage) ---------- */
.home-text .wrap>h2{margin-bottom:16px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* signed-in editors: an empty slot on the dark opening stays findable */
.hero [data-edit-type]:empty::before,.stats [data-edit-type]:empty::before{color:rgba(255,255,255,.72)!important}
.hero [data-edit-type]:empty,.stats [data-edit-type]:empty{outline-color:rgba(255,255,255,.45)}

/* ---------- back to top (ported from MycoMuse, MindMorph palette) ---------- */
.totop{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(70px);z-index:46;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(var(--night-rgb),.18);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--plum);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s,color .15s ease,border-color .15s ease}
@supports not ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){.totop{background:rgba(255,255,255,.95)}}
.totop.show{opacity:1;pointer-events:auto;visibility:visible;transform:translateX(-50%);transition:opacity .3s ease,transform .3s ease,visibility 0s,color .15s ease,border-color .15s ease}
.totop:hover{color:var(--plum-deep);border-color:var(--plum)}
.totop:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
.totop svg{width:17px;height:17px;display:block}
@media (prefers-reduced-motion:reduce){.totop,.totop.show{transition:opacity .3s ease}}
@media print{.totop{display:none}}

/* headlines run wider and tighter (Eric 2026-10-11): the home headline and the
   page titles on their photos span about two thirds of the hero on a desktop,
   line-height 1.04, balanced so no word sits alone on the last line */
.hero h1{line-height:1.04;text-wrap:balance}
@media (min-width:921px){
  .hero-copy{max-width:min(82%,60rem)}
  .hero h1{max-width:12.5em}
}

/* hero accents in MycoMuse's lime (Eric 2026-10-11): eyebrow, keyword underline, the opening note's dot and the
   light booking button on the video; the title stays white, every other button stays plum */
.hero,.pg-hero{--accent-2-night:var(--lime);--kw-ink:var(--lime)}
.hero .eyebrow{color:var(--lime)}   /* the opening note's text keeps --sage-leaf: lime small text over the desk only reaches 3.8:1 */
.hero-note::before{background:var(--lime)}

/* ---------- the office address and hours, one shape everywhere (Otis, 2026-10-16) ----------
   mm_address_html: the street and city rows, the note as a small pill, then
   the directions link with its arrow, each on its own line. mm_hours_html: a
   small label, then days | times in two columns (times in tabular figures),
   then a note. Light by default; .hrs-dark and .foot-office on the footer. */
.addr{display:grid;justify-items:start;gap:6px}
.addr-lines{display:block}
.addr-note{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--wash-deep);font:500 .78rem/1.4 var(--sans);color:var(--ink-soft)}
.addr-dir{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-6px 0 -10px}
.addr-dir svg{flex:none;transition:transform .2s ease}
.addr-dir:hover svg{transform:translateX(2px)}
.foot-office .addr-note{background:rgba(255,255,255,.1);color:var(--sage-leaf)}
.hrs{display:grid;gap:6px;margin:0}
.hrs-h{margin:0;font:600 .8rem/1.4 var(--sans);color:var(--ink)}
.hrs-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hrs-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline}
.hrs-row-1{display:block}
.hrs-t{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hrs-note{margin:0;font-size:.85rem;color:var(--quiet)}
.hrs-dark .hrs-h{color:var(--white)}
.hrs-dark .hrs-note{color:rgba(255,255,255,.65)}
.foot-desk .hrs{max-width:20rem}
/* [hours] inside a page's words: the same block, no list dashes, a readable width */
.prose .hrs-body{max-width:22rem;margin:1em 0 1.4em}
.prose .hrs-body .hrs-list{padding-left:0}
.prose .hrs-body .hrs-list>li{margin:0}
.prose .hrs-body .hrs-list>li::before{display:none}
/* small print under a section (class="fine") */
.prose p.fine{font-size:.86rem;line-height:1.55;color:var(--quiet)}
@media (prefers-reduced-motion:reduce){.addr-dir svg{transition:none}}

/* ---------- credential badges (Otis, 2026-10-16; _fn.php mm_badges) ----------
   White cards on a hairline: the issuer's own logo in a fixed box (or its
   name in type), what it says under it. Two across on a phone, as many as fit
   above. The whole card is the link and opens the issuer's page in a new tab. */
.creds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.creds{grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}}
.cred{display:flex;flex-direction:column;align-items:flex-start;gap:10px;height:100%;min-height:44px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--white);color:var(--ink);text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease}
a.cred:hover{border-color:var(--rule-strong);box-shadow:0 2px 10px rgba(22,19,20,.06)}
a.cred:focus-visible{outline:2px solid var(--plum);outline-offset:2px}
.cred-mark{display:flex;align-items:center;height:44px;max-width:120px}
.cred-mark img{display:block;width:auto;height:auto;max-width:100%;max-height:44px;margin:0;border-radius:0;object-fit:contain}
.cred-mark-empty{width:44px;border:1px dashed var(--rule-strong);border-radius:6px}
.cred-text{display:grid;gap:2px}
.cred-name{font:500 .72rem/1.35 var(--sans);letter-spacing:.02em;color:var(--quiet)}
.cred-word{font:500 1.15rem/1.2 var(--serif);color:var(--plum-deep)}
.cred-label{font:600 .86rem/1.35 var(--sans);color:var(--ink)}
.hsec-creds{padding-top:0}
.creds-h{margin:0 0 16px;font:600 .8rem/1.4 var(--sans);letter-spacing:.06em;color:var(--quiet)}
/* in the footer: no cards, a quiet row of marks in white ink on the dark
   (each logo's -white twin, _fn.php mm_badge_html), the label under each;
   two across on a phone, one even row above */
.foot-creds{grid-column:1/-1;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.foot-creds .creds{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;align-items:start}
@media (min-width:700px){.foot-creds .creds{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:24px 40px}}
.foot-creds .cred{gap:12px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#fff;opacity:.82;transition:opacity .2s ease}
.site-foot .foot-creds a.cred{color:#fff}
.foot-creds a.cred:hover{opacity:1;box-shadow:none}
.foot-creds a.cred:focus-visible{outline-color:#fff;outline-offset:4px}
.foot-creds .cred-mark{height:40px;max-width:150px}
.foot-creds .cred-mark img{max-height:40px}
.foot-creds .cred-mark-chip{padding:4px 8px;border-radius:6px;background:#fff}
.foot-creds .cred-mark-chip img{max-height:32px}
.foot-creds .cred-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot-creds .cred-word{display:flex;align-items:center;min-height:40px;color:#fff;font-size:1.3rem}
.foot-creds .cred-label{font:500 .76rem/1.4 var(--sans);letter-spacing:.01em;color:rgba(255,255,255,.66)}
/* inside a page's words: no list dashes, no link underline, no photo margins */
.prose .creds{padding-left:0;margin-top:1.4em}
.prose .creds>li{margin:0}
.prose .creds>li::before{display:none}
.prose a.cred{text-decoration:none;color:var(--ink)}
/* one badge with a line beside it ([badge ...]) */
.cred-top{display:grid;gap:12px;align-items:center;margin:1.4em 0;padding:16px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--wash)}
.cred-top .cred{height:auto}
.cred-top-note{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-soft)}
@media (min-width:600px){.cred-top{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:20px}}
@media (prefers-reduced-motion:reduce){.cred{transition:none}}

/* the line under the home stats (hero_trust_line) */
.stats .stats-note{margin:0 auto;padding-top:14px;padding-bottom:18px;border-top:1px solid rgba(255,255,255,.12);font:500 var(--fs-small)/1.5 var(--sans);color:var(--sage-leaf)}
.stats-note-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px;text-decoration-thickness:1px}
.stats-note-link:hover,.stats-note-link:focus-visible{text-decoration-color:currentColor}
.stats-note-link{display:inline-block;padding:6px 0;margin:-6px 0}