/* Home and About extras (Otis, 2026-10-05, Lindsey's notes), both designs.
   The award and Google rating in the opening, the Our space carousel, the
   click-to-load map in Visit us, and the story sections on About. One file
   serves Mandala and Lotus (asset() falls back to this theme); Lotus tweaks
   are scoped with body.lotus. Mobile first: 390px until a min-width says
   otherwise. Tokens come from style.css / lotus.css, with fallbacks. */

.mmx-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- the opening's stats band (Wren, 2026-10-06) ----------
   Along the foot of the opening, both designs (_stats.php), after
   laurenrose.com's hero stats (Eric): one hairline rule across the full
   width of the opening, then the stats in a row on the content column's left
   edge, each a large serif number over a small tracked Inter label. No fill,
   no tint, no blur, no borders, no dividers. A text stat (the award) runs in
   the same serif with its source under it. Phone: two across, a long stat
   on its own row; from 921px one row with even gaps. A linked stat's label
   underlines on hover. */
.hero-stats-band{position:relative;z-index:3;width:100%;border-top:1px solid rgba(255,255,255,.18);color:#fff;pointer-events:auto}
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:0;padding:22px 0 28px;list-style:none}
.hero-stats .stat{display:flex;min-width:0}
.hero-stats .stat-long{grid-column:1/-1}
.stat-in{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none}
a.stat-in{min-height:44px}
a.stat-in:hover .stat-l{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}a.stat-in:focus-visible .stat-l{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
a.stat-in:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.stat-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.stat-vrow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.stat-v{font:500 max(1.55rem,min(6.6vw,1.85rem))/1.1 var(--display,Georgia,serif);letter-spacing:0;font-variant-numeric:lining-nums;text-wrap:balance}
.stat-l{font:500 11px/1.4 var(--ui,system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);text-wrap:balance}
.stat-mark{flex:none;display:grid;place-items:center}
.mmx-seal{flex:none;width:44px;height:44px;color:var(--copper,#C58C51)}
.mmx-seal .mmx-star{fill:var(--copper,#C58C51)}
.mmx-seal .mmx-year{fill:#fff;font:600 11.5px/1 var(--ui,system-ui,sans-serif);letter-spacing:.02em}
.mmx-badge{flex:none;width:auto;height:48px;max-width:96px;object-fit:contain}
/* the rating stars: the Lotus reviews mask, defined here too so Mandala has it */
.hero-stats .stat-stars{--pct:100%;display:inline-block;flex:none;width:6.3em;height:1.1em;font-size:.78rem;
  background:linear-gradient(90deg,var(--copper,#C58C51) var(--pct),rgba(255,255,255,.3) var(--pct));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 0l3.1 7.3 7.9.7-6 5.2 1.8 7.8L12 16.9 5.2 21l1.8-7.8-6-5.2 7.9-.7z'/%3E%3C/svg%3E") left center/1.26em 1.1em repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 0l3.1 7.3 7.9.7-6 5.2 1.8 7.8L12 16.9 5.2 21l1.8-7.8-6-5.2 7.9-.7z'/%3E%3C/svg%3E") left center/1.26em 1.1em repeat-x}
/* the narrowest phones (320) give the words the seal's room: the year is in the words */
@media (max-width:359px){.hero-stats .stat-mark{display:none}.hero-stats{gap:16px 16px}}
/* Lotus: on the film; its serif is Alegreya, and the opening's foot air moves under the band */
body.lotus .stat-v{font-family:var(--lede,Georgia,serif);font-weight:500}
body.lotus .hero-top.has-stats{padding-bottom:36px}
body.lotus .hero-stats-band .stat-in{text-shadow:0 1px 2px rgba(20,22,17,.5)}
body.lotus .hero-stats .stat-stars{background:linear-gradient(90deg,var(--gold,#C58C51) var(--pct),rgba(255,255,255,.3) var(--pct))}
@media (min-width:921px){
  .hero-stats{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px 64px;padding:28px 0 36px}
  .hero-stats .stat{flex:none;max-width:100%}
  .stat-v{font-size:2.15rem}
  .mmx-seal{width:52px;height:52px}
  body.lotus .hero-top.has-stats{padding-bottom:48px}
  .hero-grid.has-stats{padding-bottom:48px}
}
@media (min-width:1280px){.hero-stats{gap:24px 80px}}
/* short phones: keep the call to action in view */
@media (max-width:920px) and (max-height:760px){.mmx-seal{width:38px;height:38px}.hero-stats{padding:18px 0 22px;gap:14px 20px}}

/* ---------- the finder button: "I need help with [phrase]" (Wren) ----------
   One line at every width, a ticker: the words sit in a slot exactly one
   line tall with the overflow clipped, and find-say.js rolls the old words up
   and out while the next rise from below (.is-in waits just under the slot).
   A phrase turns only the tail (.find-ph is its own slot); a whole sentence
   turns the whole line (.find-say). Never wraps; a phrase too long for the
   button ends in an ellipsis. Under reduced motion nothing turns. */
.hero-find [data-finder-open]{white-space:nowrap}
.find-say{position:relative;display:block;flex:1 1 auto;min-width:0;height:1.3em;line-height:1.3;overflow:hidden;white-space:nowrap}
.hero-find [data-finder-open] .find-say span{min-width:0;white-space:nowrap}
.find-say .find-row{display:block;height:1.3em;overflow:hidden;text-overflow:ellipsis}
.find-say .find-ph{position:relative;display:inline-block;vertical-align:top;height:1.3em;max-width:100%;overflow:hidden}
.find-say .find-w{display:block;text-overflow:ellipsis;overflow:hidden}
.find-say .is-in{position:absolute;left:0;top:100%}
.find-say .find-row.is-in{right:0}

/* ---------- the finder button in the opening (Wren, 2026-10-06) ----------
   Back under the headline (_find-hero.php), both designs. At rest a
   see-through glass of the light yellow (--lt-yellow, style.css, a pale
   apricot-butter, never the old solid orange) with cream words; on hover,
   focus or a tap it fills to the full yellow with olive words, in .2s (Eric:
   "more opacity, full opacity on hover", read as more see-through at rest).
   Phones have no hover, so :focus and :active fill it too.
   The yellow is an inset shadow over a dark scrim (background-color), so
   both layers ease together. Yellow .34 over a .4 scrim is the most yellow
   that keeps the cream words AA at rest: measured on rendered frames of the
   moving video, the lightest 2% of the ground under the words gives 4.8:1 at
   worst (Lotus), 5.2:1 on Mandala; at .45 it fell to 3.8:1. Full: olive on
   the yellow 9:1. The words also carry a soft shade.
   The opening keeps its bottom free for a stats band (Lauren's .hero-stats). */
.hero-find{display:flex;margin-top:26px}
.hero-find .slot{display:block;width:100%;max-width:560px}
.find-bar{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:12px 22px;border-radius:999px;
  border:1px solid rgba(var(--lt-yellow),.9);color:var(--cream);
  background-color:rgba(20,22,17,.4);
  box-shadow:inset 0 0 0 100vmax rgba(var(--lt-yellow),.34),0 10px 28px -12px rgba(20,22,17,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:600 1.02rem/1.3 var(--ui);letter-spacing:0;text-shadow:0 1px 2px rgba(20,22,17,.45);text-align:left;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:box-shadow .2s ease,color .2s ease,text-shadow .2s ease}
.find-bar svg{flex:none;color:currentColor}
.find-bar:focus,.find-bar:active{color:var(--olive);text-shadow:none;box-shadow:inset 0 0 0 100vmax rgb(var(--lt-yellow)),0 10px 28px -12px rgba(20,22,17,.6)}
@media (hover:hover){.find-bar:hover{color:var(--olive);text-shadow:none;box-shadow:inset 0 0 0 100vmax rgb(var(--lt-yellow)),0 14px 32px -12px rgba(20,22,17,.7)}}
.find-bar:focus{outline:none}
.find-bar:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
body.lotus .hero-find{margin-top:24px}
body.lotus .hero-find .slot{max-width:760px}
@media (max-width:920px){.hero-find .find-bar{gap:10px;padding:12px 18px;font-size:.98rem}}
@media (max-width:359px){.hero-find .find-bar{padding:12px 16px;font-size:.92rem}}
@media (min-width:921px){
  .hero-find{margin-top:32px}
  .find-bar{min-height:64px;padding:14px 26px;font-size:1.08rem}
  body.lotus .hero-find{margin-top:36px}
  body.lotus .find-bar{min-height:76px;padding:16px 32px;font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){.find-bar{transition:none}}

/* ---------- What do you treat? (Wren, 2026-10-06; carousel Felix) ----------
   The guide under the opening (_finder-sec.php, _treat.php), both designs:
   a heading and a line, then the groups as one thin row of same-size blocks
   (Eric, 2026-10-06: "carousel so it's thin height", no expanding). A block
   is its heading, its words cut to two lines and the chips that fit in two
   rows; every block stretches to the tallest, so all match. The row runs
   to the screen edges on a phone (82% blocks, the next one peeks). With no
   script it is a plain swipe row with snap points; home-extras.js adds the
   drift (.is-drift: the view stops scrolling, the row moves by transform),
   the copies and the buttons. Old Safari: margins, never flex gap; prefixed
   transforms and masks. Chips are 36px pills with a 44px tap area. Measured:
   olive on a chip over cream 9.5:1, --ink-2 on cream 8.4:1. */
.find-sec{position:relative;background:var(--paper);color:var(--olive);border-top:1px solid var(--line-strong);padding:48px 0 56px}
.find-in{display:grid;gap:28px}
.find-head h2{margin:0;font-family:var(--display);font-size:1.85rem;font-size:max(1.85rem,min(7vw,2.6rem));font-size:clamp(1.85rem,7vw,2.6rem);line-height:1.05;color:var(--olive);text-wrap:balance}
.find-lede{margin:10px 0 0;max-width:36em;color:var(--ink-2);font-size:1rem;line-height:1.55}
body.lotus .find-lede{font:italic 400 1.1rem/1.45 var(--lede)}
.treat-rail{position:relative;min-width:0;margin:0 calc(-1 * var(--pad,20px))}
.treat-view{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-left:var(--pad,20px);scrollbar-width:none;padding:4px 0}
.treat-view::-webkit-scrollbar{display:none}
.treat-row{display:flex;align-items:stretch;width:-webkit-max-content;width:max-content;
  margin:0;padding:0 var(--pad,20px);list-style:none}
.treat-card{flex:none;display:flex;flex-direction:column;
  width:82vw;max-width:340px;margin-right:12px;padding:18px 18px 14px;box-sizing:border-box;scroll-snap-align:start;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r,16px)}
.treat-card:last-child{margin-right:0}
/* a long heading takes a second line (every block then grows to match); the
   words take two. Cut clean: line-clamp where it works, a height where not */
.treat-card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.5em;
  margin:0;font-family:var(--display);font-size:1.2rem;line-height:1.25;color:var(--olive);text-wrap:balance}
.treat-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.9em;
  margin:6px 0 0;color:var(--ink-2);font-size:.95rem;line-height:1.45}
/* Two rows of chips at the foot of the block; a chip that would start a third
   is hidden by home-extras.js (clipped here with no script). A chip is 44px
   tall to the finger and 36px to the eye: 4px of clear border above and
   below, the pill painted in the padding box, its line an inset shadow. */
.treat-chips{display:flex;flex-wrap:wrap;box-sizing:border-box;max-height:96px;overflow:hidden;margin:auto 0 0 -6px;padding:8px 0 0;list-style:none}
.treat-chips li{display:flex;max-width:100%;margin:0 0 0 6px}
.treat-chips li[hidden]{display:none}
.treat-chip{display:inline-flex;align-items:center;max-width:100%;min-height:44px;padding:0 12px;box-sizing:border-box;border-radius:999px;
  border:solid transparent;border-width:4px 0;background-color:rgba(var(--lt-yellow),.5);background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(56,61,49,.16);
  color:var(--olive);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:500 .84rem/1.2 var(--ui);letter-spacing:0;text-decoration:none;background-image:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .2s,box-shadow .2s}
/* pressed and hovered, a chip turns periwinkle (Lyndsey, 2026-10-06, "more periwinkle") */
.treat-chip:active{background-color:rgba(109,144,202,.3)}
@media (hover:hover){.treat-chip:hover{background-color:rgba(109,144,202,.22);box-shadow:inset 0 0 0 1px rgba(94,103,170,.5);color:var(--olive);text-decoration:none}}
.treat-chip:focus-visible{outline:2px solid var(--olive);outline-offset:-3px}
/* the drift: the row moves by transform inside a still view */
.treat-rail.is-drift .treat-view{overflow:hidden;scroll-snap-type:none;touch-action:pan-y;cursor:-webkit-grab;cursor:grab}
.treat-rail.is-drift .treat-row{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:transform}
.treat-rail.is-drift .treat-card:last-child{margin-right:12px}
.treat-rail.is-drag .treat-view{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;user-select:none}
.treat-rail.is-drag .treat-chip{pointer-events:none}
/* the buttons: back, pause or play, forward (44px, the Our space arrows) */
.treat-ctl{display:flex;justify-content:flex-end;margin:12px var(--pad,20px) 0}
.treat-ctl[hidden]{display:none}
.treat-ctl .mmx-arrow{margin-left:8px}
.treat-ctl .mmx-arrow:first-child{margin-left:0}
.treat-ctl .treat-i-play,.treat-ctl .is-paused .treat-i-pause{display:none}
.treat-ctl .is-paused .treat-i-play{display:block}
.treat-ctl .mmx-arrow:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.treat-more{margin:0}
.treat-more .slot{display:inline-flex;max-width:100%}
.treat-more-btn{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:48px;padding:10px 22px;border-radius:999px;
  border:1px solid var(--line-strong);background:transparent;color:var(--olive);font:500 1rem/1.25 var(--ui);letter-spacing:0;text-align:left;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .2s}
.treat-more-btn svg{flex:none}
@media (hover:hover){.treat-more-btn:hover{background:rgba(var(--lt-yellow),.5)}}
.treat-more-btn:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
/* signed in: the row stands still and every block shows all its words and chips, to edit */
html.is-edit .treat-text{display:block;max-height:none;-webkit-line-clamp:unset}
html.is-edit .treat-card h3{display:block;max-height:none;-webkit-line-clamp:unset}
html.is-edit .treat-chips{max-height:none}
@media (min-width:700px){
  .treat-card{width:340px;max-width:none;margin-right:16px}
  .treat-rail.is-drift .treat-card:last-child{margin-right:16px}
  /* the buttons sit level with the search button, at the right */
  .has-more .treat-ctl{position:absolute;right:0;top:100%;margin-top:30px}
}
@media (min-width:921px){
  .find-sec{padding:72px 0 80px}
  .find-in{gap:36px}
  .find-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:end}
  .find-lede{margin:0}
  .treat-card{width:372px;padding:20px 22px 16px}
  .has-more .treat-ctl{margin-top:38px}
}
/* wider than the content column (Mandala 1200px, Lotus 1280px) the row ends
   in a soft fade instead of a hard cut */
@media (min-width:1201px){
  body:not(.lotus) .treat-rail.is-drift .treat-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
}
@media (min-width:1281px){
  body.lotus .treat-rail.is-drift .treat-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
}
/* Lotus: its own faces, the paper card on white-cream */
body.lotus .find-head h2{font-weight:800;letter-spacing:-.035em;line-height:.98;font-size:2.25rem;font-size:max(2.25rem,min(6.6vw,4.4rem));font-size:clamp(2.25rem,6.6vw,4.4rem)}
body.lotus .treat-card h3{font:800 1.2rem/1.25 var(--display);letter-spacing:-.02em}
body.lotus .treat-text{font:400 1rem/1.45 var(--body)}
body.lotus .treat-chip:focus-visible,body.lotus .treat-more-btn:focus-visible,body.lotus .treat-ctl .mmx-arrow:focus-visible{outline-color:var(--peri,#6D90CA)}
@media (prefers-reduced-motion:reduce){.treat-chip,.treat-more-btn{transition:none}}
@media print{.hero-find,.treat-more,.treat-ctl{display:none!important}
  .treat-view{overflow:visible!important}.treat-row{display:block!important;width:auto!important;-webkit-transform:none!important;transform:none!important}
  .treat-card{width:auto!important;max-width:none!important;margin:0 0 12px!important;break-inside:avoid}.treat-card[aria-hidden]{display:none!important}
  .treat-text{max-height:none;-webkit-line-clamp:unset;display:block}.treat-chips{max-height:none}.treat-chips li[hidden]{display:flex}}

/* ---------- Services: each listed service opens its own page (Wren) ----------
   The whole row is the link (_svc-links.php), with a small arrow so a phone
   can tell; by Eric's order nothing moves, shades or underlines on hover.
   Keyboard focus keeps the design's clear ring, drawn round the row. */
.group-list li.has-link{padding:0}
.group-list .svc-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 2px 12px 0;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
body.lotus .group-list .svc-link{padding:11px 2px 11px 0}
.group-list .svc-link svg{flex:none;opacity:.5}
.group-list .svc-link:hover{color:inherit;text-decoration:none;background:none;box-shadow:none;transform:none}
.group-list .svc-link:focus-visible{outline-offset:2px;border-radius:6px}

/* ---------- Our space: the rooms as a swipe row ---------- */
.mmx-space{--h:280px;--edge:max(var(--pad,20px),calc((100% - var(--max,1200px)) / 2 + var(--pad,20px)));padding:64px 0;border-top:1px solid var(--line,rgba(56,61,49,.16));overflow:hidden}
.mmx-space-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.mmx-space-head h2{font-size:1.9rem;font-size:max(1.9rem,min(6.4vw,3rem));font-size:clamp(1.9rem,6.4vw,3rem)}
.mmx-nav{display:flex;gap:10px;flex:none}
.mmx-nav[hidden]{display:none}
.mmx-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line-strong,rgba(56,61,49,.32));background:transparent;color:var(--olive,#383D31);cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}
.mmx-arrow:hover{background:var(--olive,#383D31);color:var(--cream,#F9F6EE)}
.mmx-arrow:disabled{opacity:.35;cursor:default;background:transparent;color:var(--olive,#383D31)}
.mmx-track{margin-top:28px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--edge);scroll-padding-right:var(--edge);scroll-padding-inline:var(--edge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mmx-track::-webkit-scrollbar{display:none}
.mmx-track:focus-visible{outline:2px solid var(--olive,#383D31);outline-offset:4px}
.mmx-slides{display:flex;gap:12px;margin:0;padding:0 var(--edge);list-style:none;width:max-content}
.mmx-slide{flex:none;height:var(--h);aspect-ratio:2/3;scroll-snap-align:start}
.mmx-slide.is-wide{aspect-ratio:3/2;max-width:calc(100vw - 2 * var(--pad,20px) - 28px)}
/* before Safari 15 a slide has a height and no width: give it the width outright */
@supports not (aspect-ratio:1/1){.mmx-slide{width:calc(var(--h) * 2 / 3)}.mmx-slide.is-wide{width:calc(var(--h) * 3 / 2)}}
.mmx-slide figure{position:relative;width:100%;height:100%;margin:0;overflow:hidden;border-radius:var(--r,16px);background:var(--paper,#F1ECE0)}
.mmx-slide img{width:100%;height:100%;object-fit:cover}
.mmx-count{display:flex;align-items:center;gap:16px;margin-top:20px}
.mmx-bar{position:relative;flex:1 1 auto;max-width:240px;height:2px;background:var(--line,rgba(56,61,49,.16));border-radius:2px;overflow:hidden}
.mmx-bar>span{position:absolute;top:0;right:auto;bottom:0;left:0;inset:0 auto 0 0;width:var(--f,10%);background:var(--olive,#383D31);border-radius:2px;transition:width .3s ease}
.mmx-num{font:500 .8rem/1 var(--body,system-ui,sans-serif);letter-spacing:.08em;color:var(--muted,#666B57);font-variant-numeric:tabular-nums}
@media (min-width:921px){
  .mmx-space{--h:440px;padding:88px 0}
  .mmx-slides{gap:16px}
  .mmx-slide.is-wide{max-width:none}
}
body.lotus .mmx-space{padding:var(--sec,72px) 0;border-top:0}
body.lotus .mmx-space-head h2{font-size:2.25rem;font-size:max(2.25rem,min(6.6vw,4.4rem));font-size:clamp(2.25rem,6.6vw,4.4rem);line-height:.98;letter-spacing:-.035em}
body.lotus .mmx-num{font:400 .74rem/1 var(--caps,var(--body));letter-spacing:.16em}
body.lotus .mmx-track:focus-visible{outline-color:var(--peri,#6D90CA)}
body.lotus .mmx-bar>span{background:var(--gold,#C58C51)}

/* ---------- the map in Visit us: drawn card, the open map loads on tap ---------- */
.mmx-maps{grid-column:1/-1;display:grid;gap:16px}
.mmx-map{position:relative;height:240px;overflow:hidden;border-radius:var(--r,16px);border:1px solid var(--line-d,rgba(249,246,238,.18));
  background-color:var(--olive-2,#2F3329);
  background-image:
    linear-gradient(28deg,transparent 47%,rgba(249,246,238,.13) 47.6%,rgba(249,246,238,.13) 49.4%,transparent 50%),
    linear-gradient(-62deg,transparent 58%,rgba(249,246,238,.09) 58.5%,rgba(249,246,238,.09) 60%,transparent 60.5%),
    repeating-linear-gradient(0deg,transparent 0 43px,rgba(249,246,238,.06) 43px 45px),
    repeating-linear-gradient(90deg,transparent 0 57px,rgba(249,246,238,.06) 57px 59px)}
.mmx-map-face{position:absolute;top:0;right:0;bottom:0;left:0;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(47,51,41,.82) 0,rgba(47,51,41,.55) 55%,rgba(47,51,41,.2) 100%)}
.mmx-pin{color:var(--copper,#C58C51)}
.mmx-map-addr{font:400 1.02rem/1.4 var(--display,Georgia,serif);color:var(--cream,#F9F6EE)}
.mmx-map-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px}
.mmx-map-acts .slot{display:inline-flex}
.mmx-map-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;border:0;background:var(--btn-bg,#fff);color:var(--btn-fg,#1E2119);font:600 15px/1 var(--body,system-ui,sans-serif);cursor:pointer;box-shadow:0 6px 16px -4px rgba(0,0,0,.4);transition:transform .2s ease,background-color .2s}
.mmx-map-btn:hover{transform:translateY(-1px);background:var(--btn-bg-hi,#fff)}
.mmx-map-dir{display:inline-flex;align-items:center;min-height:44px;color:var(--cream,#F9F6EE);font:400 .95rem/1 var(--ui,system-ui,sans-serif);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.mmx-map-note{font-size:.78rem;line-height:1.4;color:var(--stone,#C9C8BF)}
.mmx-map.is-live{background:#EFE9DC;border-color:transparent}
.mmx-map.is-loading .mmx-map-btn{opacity:.6;cursor:progress}
/* the open map (MapLibre + OpenFreeMap), drawn under the face until it is ready */
.mmx-map-canvas{position:absolute;top:0;right:0;bottom:0;left:0;inset:0}
.mmx-map-canvas .maplibregl-canvas:focus-visible{outline:2px solid var(--copper,#C58C51);outline-offset:-4px}
.mmx-map .maplibregl-ctrl-group:not(:empty){border-radius:var(--r-sm,10px);overflow:hidden;background:#FFFDF8;box-shadow:0 2px 6px -2px rgba(47,51,41,.35),0 0 0 1px rgba(56,61,49,.12)}
.mmx-map .maplibregl-ctrl-group button{width:36px;height:36px}
@media (pointer:coarse){.mmx-map .maplibregl-ctrl-group button{width:44px;height:44px}}
.mmx-map .maplibregl-ctrl-group button+button{border-top-color:rgba(56,61,49,.14)}
.mmx-map .maplibregl-ctrl.maplibregl-ctrl-attrib{font:400 11px/1.35 var(--body,system-ui,sans-serif);color:#4B5042;background:rgba(249,246,238,.86);border-top-left-radius:var(--r-sm,10px);padding:3px 8px}
.mmx-map .maplibregl-ctrl-attrib a{color:#383D31}
.mmx-map .maplibregl-cooperative-gesture-screen{background:rgba(47,51,41,.62);color:var(--cream,#F9F6EE);font:500 1rem/1.4 var(--body,system-ui,sans-serif);padding:20px;border-radius:inherit}
/* the pin: the clinic's name on a cream tag over a copper marker */
.mmx-mark{display:flex;flex-direction:column;align-items:center;pointer-events:none;color:var(--copper,#C58C51)}
.mmx-mark-tag{margin-bottom:4px;padding:6px 12px;border-radius:999px;background:var(--olive,#383D31);color:var(--cream,#F9F6EE);font:600 13px/1.1 var(--body,system-ui,sans-serif);white-space:nowrap;max-width:min(300px,80vw);overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 14px -6px rgba(47,51,41,.55)}
.mmx-mark-pin{display:block;filter:drop-shadow(0 3px 3px rgba(47,51,41,.35))}
@media (min-width:921px){
  .mmx-maps{margin-top:8px}
  .mmx-maps.is-two{grid-template-columns:1fr 1fr}
  .mmx-map{height:320px}
}
body.lotus .mmx-map-addr{font:italic 400 1.1rem/1.4 var(--lede,Georgia,serif)}
body.lotus .mmx-map-btn{font:400 .8rem/1 var(--caps,var(--body));letter-spacing:.14em;text-transform:uppercase}
body.lotus .mmx-map-dir{font:400 .8rem/1 var(--caps,var(--body));letter-spacing:.14em;text-transform:uppercase}
body.lotus .mmx-pin{color:var(--gold,#C58C51)}
body.lotus .mmx-mark{color:var(--gold,#C58C51)}
body.lotus .mmx-mark-tag{font:400 .7rem/1.1 var(--caps,var(--body));letter-spacing:.1em;text-transform:uppercase;padding:7px 13px}
body.lotus .mmx-map .maplibregl-ctrl-attrib,body.lotus .mmx-map .maplibregl-cooperative-gesture-screen{font-family:var(--body)}

/* ---------- About: the story sections after the page text ---------- */
.about-story{margin-top:56px}
.about-story>section:first-child{border-top:0}
@media (min-width:921px){.about-story{margin-top:80px}}

@media (prefers-reduced-motion:reduce){
  .mmx-bar>span,.mmx-arrow,.mmx-map-btn{transition:none}
  .mmx-map-btn:hover{transform:none}
}

/* ---------- the welcome, "Complementary medicine" (Wren, 2026-10-06) ----------
   _intro.php, both designs. The heading sits above the words (no side
   column): the upright words in near-black, the italic words in the sage
   accent (3.9:1 on cream, large text). The blocks are upright, larger than
   body copy, one column on phones and two from 921px, each held to a
   comfortable line (about 60 characters). No drop cap. */
.intro-h{margin:0;max-width:18em;font:400 max(2.15rem,min(8.4vw,3.5rem))/1.06 var(--display);letter-spacing:-.015em;color:#1E2119;text-wrap:balance}
.intro-em{font-style:italic;color:var(--sage,#5F8B73)}
.intro-blocks{display:grid;gap:22px;margin-top:28px}
.intro-b{margin:0;max-width:34em;font:400 1.16rem/1.62 var(--body);letter-spacing:0;color:var(--ink-2,#4B5042)}
@media (min-width:921px){
  .intro-blocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 64px;margin-top:44px}
  .intro-b{font-size:1.24rem}
}
body.lotus .intro-h{font:800 max(2.25rem,min(8.8vw,4.4rem))/1 var(--display);letter-spacing:-.035em;color:#1E2119}
body.lotus .intro-em{font:italic 500 1.08em/1 var(--lede,Georgia,serif);letter-spacing:-.01em;color:var(--sage,#5F8B73)}
body.lotus .intro-b{font:400 1.24rem/1.58 var(--body);color:var(--ink-2,#434839)}
@media (min-width:921px){body.lotus .intro-b{font-size:1.36rem}body.lotus .intro-blocks{margin-top:52px}}

/* ---------- the clean opening (Wren, 2026-10-06, Lyndsey's notes) ----------
   hero_style 'clean' (_hero-clean.php, _marquee.php), both designs; every
   rule is scoped to .hero-clean, .mq or .stats-strip, so the classic opening
   draws exactly as before. A calm stack after knotsprings.com: small line,
   headline, the line under it, then ONE row: a compact Book pill and the
   search field taking the rest. The row never wraps: on a phone the pill
   reads its short label (hero_cta_short) and the field ends its words in an
   ellipsis before it would push. Both 48px tall (52 from 921px). The only
   divider in the opening is the hairline over the moving line. */
.hero-clean .hero-sub{margin-top:16px}
.hero-act{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;max-width:640px;margin-top:24px}
.hero-act .hero-book-slot{flex:none;display:block}
.hero-clean .hero-act .hero-book{min-height:48px;padding:0 18px;font-size:.92rem;box-shadow:none}
.hero-act .hero-book .hb-short{display:none}
.hero-act .hero-book .hb-long{display:inline}
.hero-clean .hero-act .hero-find{flex:1 1 auto;min-width:0;margin-top:0}
.hero-clean .hero-act .hero-find .slot{max-width:none}
.hero-clean .hero-act .find-bar{min-height:48px;padding:0 16px;gap:10px;font-size:.95rem;box-shadow:inset 0 0 0 100vmax rgba(var(--lt-yellow),.34)}
.hero-clean .hero-act .find-bar:focus,.hero-clean .hero-act .find-bar:active{box-shadow:inset 0 0 0 100vmax rgb(var(--lt-yellow))}
@media (hover:hover){.hero-clean .hero-act .find-bar:hover{box-shadow:inset 0 0 0 100vmax rgb(var(--lt-yellow))}}
.hero-clean .hero-act .find-bar svg{width:20px;height:20px}
@media (max-width:599px){
  .hero-act .hero-book .hb-long{display:none}
  .hero-act .hero-book .hb-short{display:inline}
  .hero-clean .hero-act .hero-book{padding:0 16px}
}
@media (max-width:359px){.hero-act{gap:8px}.hero-clean .hero-act .find-bar{padding:0 12px;gap:8px;font-size:.9rem}}
@media (min-width:921px){
  .hero-act{gap:12px;max-width:720px;margin-top:36px}
  .hero-clean .hero-act .hero-book{min-height:52px;padding:0 24px;font-size:.95rem}
  .hero-clean .hero-act .find-bar{min-height:52px;padding:0 22px;font-size:1.02rem}
}

/* the moving line of services: one hairline over it, the names in the
   design's serif with a small copper dot after each. The row is the list
   twice, slid left by half a lap in --mq-dur (about 4.5 s a name, set
   inline). It pauses under a pointer or focus, stands still under reduced
   motion (one row, the copy hidden, fading out at the right edge, so the
   opening keeps its height), and its box clips, so the page can never
   scroll sideways. Screen readers get the plain list instead. */
.mq{position:relative;z-index:3;overflow:hidden;width:100%;padding:14px 0 16px;border-top:1px solid rgba(249,246,238,.2);color:var(--cream);pointer-events:auto}
@supports (overflow:clip){.mq{overflow:clip}}
.mq-track{display:-webkit-box;display:-webkit-flex;display:flex;width:-webkit-max-content;width:max-content;-webkit-animation:mqRun var(--mq-dur,40s) linear infinite;animation:mqRun var(--mq-dur,40s) linear infinite}
.mq-run{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex:none;flex:none}
.mq-i{position:relative;-webkit-flex:none;flex:none;padding:0 22px;white-space:nowrap;font:italic 400 1.08rem/1.35 var(--display,Georgia,serif);letter-spacing:.005em;opacity:.92}
.mq-i::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;margin-top:-1px;border-radius:50%;background:var(--copper,#C58C51)}
.mq:hover .mq-track,.mq:focus-within .mq-track{-webkit-animation-play-state:paused;animation-play-state:paused}
@-webkit-keyframes mqRun{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}
@keyframes mqRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .mq-track{-webkit-animation:none;animation:none;padding-left:var(--pad,20px)}
  .mq-dup{display:none}
  .mq-i:first-child{padding-left:0}
  .mq{-webkit-mask-image:linear-gradient(to right,#000 78%,transparent);mask-image:linear-gradient(to right,#000 78%,transparent)}
}
body.lotus .mq-i{font-family:var(--lede,Georgia,serif);font-size:1.12rem}
@media (min-width:921px){.mq{padding:18px 0 20px}.mq-i{padding:0 30px;font-size:1.22rem}body.lotus .mq-i{font-size:1.28rem}}
@media print{.mq-track{-webkit-animation:none;animation:none}.mq-dup{display:none}}

/* the clean opening's stats, just under it on the page's own ground: the
   band's dark-ground colours turned for cream, and no rule over it */
.stats-strip .hero-stats-band{border-top:0;color:var(--olive,#383D31)}
.stats-strip .hero-stats{padding:24px 0 4px}
.stats-strip .stat-l{color:var(--muted,#666B57)}
.stats-strip a.stat-in:focus-visible{outline-color:var(--olive,#383D31)}
.stats-strip .mmx-seal .mmx-year{fill:#fff}
.stats-strip .hero-stats .stat-stars{background:linear-gradient(90deg,var(--copper,#C58C51) var(--pct),rgba(56,61,49,.22) var(--pct))}
body.lotus .stats-strip .hero-stats-band .stat-in{text-shadow:none}
body.lotus .stats-strip .hero-stats .stat-stars{background:linear-gradient(90deg,var(--gold,#C58C51) var(--pct),rgba(56,61,49,.22) var(--pct))}
@media (min-width:921px){.stats-strip .hero-stats{padding:36px 0 8px}}