/* Mandala Medicine (Wren, 2026-09-28). Mobile first: every rule is the 390px
   phone until a min-width query says otherwise.

   Palette, measured against WCAG 2.2:
     olive  #383D31  body ink on cream 10.1:1; the dark sections' ground
     cream  #F9F6EE  page ground; ink on olive
     paper  #F1ECE0  the one tinted band (first visit)
     stone  #C9C8BF  secondary text on olive, 6.5:1
     muted  #666B57  secondary text on cream 5.1:1, on paper 4.7:1
     sage   #5F8B73  3.6:1 on cream: logo, drawings and rules only, never small text
     copper #C58C51  2.7:1 on cream, 3.8:1 on olive: dots, rules, drawing accents only
   Type: Newsreader for display, Inter for everything a reader operates. */

:root{
  --olive:#383D31;--olive-2:#2F3329;--cream:#F9F6EE;--paper:#F1ECE0;--stone:#C9C8BF;
  /* light yellow (Eric, 2026-10-06: "no orange buttons, instead light yellow
     opacity ... like Laurens"). Not in the brand book, which has no yellow:
     a pale butter kept as r,g,b so it is only ever used as a see-through veil
     (rgba(var(--lt-yellow),a)) on the finder's search buttons. Both designs.
     Warmed a few degrees toward apricot (hue 48 to 41) on Eric's "a bit more
     orangish tint, just slightly", 2026-10-06; was 244,227,161. */
  --lt-yellow:245,218,160;
  --sage:#5F8B73;--copper:#C58C51;--muted:#666B57;--ink-2:#4B5042;
  --line:rgba(56,61,49,.16);--line-strong:rgba(56,61,49,.32);--line-d:rgba(249,246,238,.18);
  /* --hair: the rule between rows of a link list (service groups, menu,
     category and post lists, FAQs). 1px, and half that on 2x/3x screens,
     where 1px paints 2 or 3 device pixels and reads heavy (Eric, 2026-10-06) */
  --hair:1px;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* --ui: the face for what a visitor presses (menu, buttons, links that
     stand alone). Inter in both designs (Eric, 2026-10-06, after Lauren's
     hero sub); here it is also the body, Lotus loads it for this alone */
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1200px;--pad:20px;--head:68px;--bar:0px;
  /* one radius scale (Lindsey, 2026-10-05: "soften to rounded corners on all
     photos and boxes"): photos, cards, panels and frames 16, inputs and small
     tags 10, buttons and chips stay pills. Full-bleed media stays square. */
  --r-photo:16px;--r-sm:10px;--r:var(--r-photo);
  /* raised buttons: a shadow tinted from the olive, offset down, never a
     grey halo. Dark grounds swap in a deeper set (see the button block). */
  --btn-sh:0 6px 16px -4px rgba(47,51,41,.36),0 2px 4px -1px rgba(47,51,41,.16);
  --btn-sh-hi:0 12px 26px -6px rgba(47,51,41,.42),0 4px 8px -2px rgba(47,51,41,.16);
  --btn-sh-lo:0 2px 5px -2px rgba(47,51,41,.4);
  --ease:cubic-bezier(.2,.7,.2,1);
  --safe-top:env(safe-area-inset-top,0px);
  --menu-top:calc(var(--head) + var(--bar) + var(--safe-top) + var(--vv-top,0px));--menu-bg:var(--cream);--menu-ink:var(--olive);--menu-line:var(--line);--menu-pad:var(--pad);--menu-z:49;--menu-veil-z:48;
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){:root{--hair:.5px}}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;touch-action:manipulation;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + var(--bar) + 12px)}
body{margin:0;background:var(--cream);color:var(--olive);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
/* the footer sits on the floor of a short page: main takes the slack */
main{flex:1 0 auto;display:block}
.site-head,.site-foot{flex:none}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.1;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.dark :focus-visible,.hero :focus-visible,.ethos :focus-visible,.visit :focus-visible,.site-foot :focus-visible{outline-color:var(--cream)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--cream);color:var(--olive);padding:12px 16px;border-radius:var(--r)}

/* periwinkle, the second accent (Lyndsey, 2026-10-06, "more periwinkle"):
   --peri the light one for focus rings and underlines, never small type;
   --peri-deep carries text: white on it 5.3:1, it on eggshell 4.9:1 (the
   accident band's ground, link and chip hovers, the eyebrow dot) */
:root{--peri:#6D90CA;--peri-deep:#5E67AA}
.eyebrow{font:600 .75rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.eyebrow-dot{display:flex;align-items:center;gap:10px}
.eyebrow-dot::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#5E67AA;background:var(--peri-deep)}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.slot{display:inline-flex;position:relative}
/* One colour logic for every button, both designs (Eric, 2026-10-06: "no
   orange fill anywhere"). A solid button is near-black with white type on a
   light ground, and white with near-black type on a dark one; a secondary is
   a ghost: no fill, a thin line, its type the same black or white. The ground
   sets the tokens and the buttons only read them, so a new dark band joins
   the list below and every button in it follows. Hover is a small shift (a
   step lighter, or a faint veil on a ghost), never a new colour. --btn-ink is
   the olive taken down to near-black (white on it 16:1). */
:root{--btn-ink:#1E2119;
  --btn-bg:var(--btn-ink);--btn-bg-hi:#363A2F;--btn-fg:#fff;
  --btn-gh-bg:transparent;--btn-gh-bg-hi:rgba(30,33,25,.06);--btn-gh-line:rgba(30,33,25,.55);--btn-gh-line-hi:var(--btn-ink);--btn-gh-fg:var(--btn-ink)}
.hero,.ethos,.visit,.band,.home-text-dark,.site-foot,.clinic-band,.dark,.mmx-map,.nl-pop-card,html.head-over .site-head:not(.is-solid){
  --btn-bg:#fff;--btn-bg-hi:rgba(255,255,255,.85);--btn-fg:var(--btn-ink);
  --btn-gh-bg:transparent;--btn-gh-bg-hi:rgba(255,255,255,.12);--btn-gh-line:rgba(255,255,255,.6);--btn-gh-line-hi:#fff;--btn-gh-fg:#fff}
/* over the film (the opening, and the bar while it floats on it) the solid
   rests a touch translucent and brightens to white under the pointer, and the
   ghost keeps Lauren's see-through white veil so it reads on any frame
   (laurenrose.com .btn.ghost.light) */
.hero,html.head-over .site-head:not(.is-solid){--btn-bg:rgba(255,255,255,.92);--btn-bg-hi:#fff}
.hero{--btn-gh-bg:rgba(255,255,255,.12);--btn-gh-bg-hi:rgba(255,255,255,.26);--btn-gh-line:rgba(255,255,255,.5)}
/* the open menu turns the bar cream again: light tokens */
html.head-over body.menu-open .site-head{
  --btn-bg:var(--btn-ink);--btn-bg-hi:#363A2F;--btn-fg:#fff;
  --btn-gh-bg:transparent;--btn-gh-bg-hi:rgba(30,33,25,.06);--btn-gh-line:rgba(30,33,25,.55);--btn-gh-line-hi:var(--btn-ink);--btn-gh-fg:var(--btn-ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--body);text-decoration:none;white-space:nowrap;cursor:pointer;background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-sh);-webkit-tap-highlight-color:transparent;transition:background-color .2s,color .2s,border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
/* btn-olive and btn-cream were the light and dark grounds' solids; both are
   now the one solid, which takes its colours from the ground */
.btn-cream,.btn-olive{background:var(--btn-bg);color:var(--btn-fg)}
.btn:hover,.btn-cream:hover,.btn-olive:hover{background:var(--btn-bg-hi);color:var(--btn-fg)}
/* the secondaries: btn-ghost-light (dark grounds) and btn-line (cream) */
.btn.btn-ghost-light,.btn.btn-line{background:var(--btn-gh-bg);border-color:var(--btn-gh-line);color:var(--btn-gh-fg);box-shadow:none}
.btn.btn-ghost-light:hover,.btn.btn-line:hover{background:var(--btn-gh-bg-hi);border-color:var(--btn-gh-line-hi);color:var(--btn-gh-fg);box-shadow:none}
.hero .btn.btn-ghost-light{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* the lift is a pointer's; a thumb gets the press (shadow tucks in), and
   reduced motion keeps the shadows but never moves the button */
@media (hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:var(--btn-sh-hi)}}
.btn:active{transform:translateY(0);box-shadow:var(--btn-sh-lo);transition-duration:.08s}
/* dark grounds: the same shadow, deeper, so it still reads on the olive */
.hero,.ethos,.visit,.band,.home-text-dark,.site-foot,.clinic-band{
  --btn-sh:0 8px 20px -6px rgba(14,16,11,.62),0 2px 4px -1px rgba(14,16,11,.34);
  --btn-sh-hi:0 14px 28px -8px rgba(14,16,11,.7),0 4px 8px -2px rgba(14,16,11,.34);
  --btn-sh-lo:0 2px 6px -2px rgba(14,16,11,.6)}
/* the round arrow keys and the small pills elsewhere: raised too */
button.sw-btn,button.rev-btn{background:#FFFDF8;border-color:var(--line);box-shadow:var(--btn-sh-lo)}
body .fv-btn{box-shadow:var(--btn-sh-lo)}
body .nl-btn,body .nl-pop .nl-btn{background:var(--btn-bg);color:var(--btn-fg)}
body .nl-btn:hover,body .nl-pop .nl-btn:hover{background:var(--btn-bg-hi);color:var(--btn-fg)}
body .nl-btn{border-radius:999px;box-shadow:var(--btn-sh);transition:background-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
@media (hover:hover){body .nl-btn:hover{transform:translateY(-2px);box-shadow:var(--btn-sh-hi)}}
body .nl-btn:active{transform:translateY(0);box-shadow:var(--btn-sh-lo)}
body .nl-input{border-radius:var(--r-sm)}
.link-arrow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 15px/1.2 var(--ui);letter-spacing:.005em;text-decoration:none;border-bottom:1px solid var(--line-strong)}
.link-arrow::after{content:"";width:18px;height:1px;background:currentColor}
.link-arrow{transition:border-color .2s var(--ease)}
.link-arrow:hover{border-bottom-color:currentColor}

/* ---------- header: one line at every width ---------- */
.site-head{position:-webkit-sticky;position:sticky;top:var(--vv-top,0px);z-index:50;padding-top:var(--safe-top);background:rgba(249,246,238,.9);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--line);transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,-webkit-backdrop-filter .25s ease,backdrop-filter .25s ease}
.head-row{display:flex;align-items:center;gap:8px;height:var(--head);flex-wrap:nowrap;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:8px;flex:none;min-height:44px;text-decoration:none}
.brand-mark{height:36px;width:auto}
.brand-word{height:24px;width:auto}
.nav a{white-space:nowrap;text-decoration:none;color:var(--olive)}
.head-book{margin-left:auto;min-height:44px;padding:0 18px;font-size:14px}
.head-find{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#FFFDF8;color:var(--olive);font:600 14px/1 var(--body);white-space:nowrap;cursor:pointer;box-shadow:var(--btn-sh-lo);-webkit-tap-highlight-color:transparent;transition:background-color .2s,border-color .2s,color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
.head-find:hover{background:#fff;border-color:var(--line-strong)}
@media (hover:hover){.head-find:hover{transform:translateY(-2px);box-shadow:var(--btn-sh)}}
.head-find:active{transform:translateY(0);box-shadow:none}
.head-find .hf-long{display:none}
.head-find+.head-book{margin-left:0}
@media (min-width:600px){.head-find .hf-long{display:inline}.head-find{padding:0 16px 0 14px}}
.hb-short{display:none}
.menu-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--olive);cursor:pointer;border-radius:50%}
@media (max-width:409px){.hb-long{display:none}.hb-short{display:inline}.head-book{padding:0 16px}} /* 409, not 399: the larger wordmark (2026-10-06) leaves "Book online" no room below 405 */
@media (max-width:359px){:root{--pad:16px}.brand-word{height:18px}.brand-mark{height:32px}.head-row{gap:6px}} /* the wordmark stays 18px here: at 314 this row has no room to spare */
/* the panel below 921px (core/assets/menu.css moves it; this dresses it) */
@media (max-width:920px){
  .nav{display:flex;flex-direction:column}
  .nav a{display:flex;align-items:center;min-height:52px;border-bottom:var(--hair,1px) solid var(--line);font:400 1.2rem/1.2 var(--ui);letter-spacing:0}
  .nav a[aria-current="page"]{color:var(--muted)}
  .nav .nav-book{margin-top:20px;border:0;justify-content:center;min-height:52px;border-radius:999px;background:var(--olive);color:var(--cream);font:600 16px/1 var(--body);box-shadow:var(--btn-sh)}
  html:not(.js) .head-row{flex-wrap:wrap;height:auto;min-height:var(--head)}
  html:not(.js) .nav{order:5;flex-basis:100%}
}
/* five nav items plus two pills: tighter until there is room */
@media (min-width:921px) and (max-width:1120px){.nav a{padding:0 8px}.head-find .hf-long{display:none}.head-find{padding:0 12px}}
@media (min-width:921px){
  :root{--head:88px;--pad:40px}
  .brand-mark{height:42px}
  .brand-word{height:30px}
  .brand{gap:10px}
  .nav{display:flex;align-items:center;gap:2px;margin-left:auto}
  .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:400 15px/1 var(--ui);letter-spacing:.005em;border-radius:999px}
  .nav a:hover{text-decoration:underline}
  .nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--copper);text-decoration-thickness:2px;text-underline-offset:.45em}
  .nav .nav-book{display:none}
  .head-book{margin-left:12px;font-size:15px;padding:0 22px}
  .head-find{margin-left:12px;font-size:15px}
  .head-find+.head-book{margin-left:10px}
  .menu-btn{display:none}
}

/* ---------- the header over the home film (Lindsey, 2026-10-05) ----------
   Only where the page opens on the hero. The hero always slides up under
   the header (pure CSS, so nothing jumps when the script lands); the bar
   itself goes clear only once mm-motion.js has armed the scroll watch
   (html.head-over), so without the script it simply stays the cream bar.
   Past 40px of scroll (.is-solid) or with the menu open it is the cream bar
   again, in 250ms. The logo files are olive and sage; on the film they are
   drawn as cream silhouettes. */
.has-hero-head #main>.hero{margin-top:calc(-1 * (var(--head) + var(--bar) + var(--safe-top) + 1px))}
html.head-over .site-head:not(.is-solid){background-color:rgba(249,246,238,0);border-bottom-color:transparent;-webkit-backdrop-filter:saturate(1) blur(0);backdrop-filter:saturate(1) blur(0)}
html.head-over body.menu-open .site-head{background-color:var(--cream);border-bottom-color:var(--line)}
.brand img{transition:filter .25s ease}
/* the cream logo files swap in over the film (layout: .brand.has-light); the filter is only the fallback when they are missing */
.brand .logo-light{display:none}
html.head-over .site-head:not(.is-solid) .brand.has-light .logo-dark{display:none}
html.head-over .site-head:not(.is-solid) .brand.has-light .logo-light{display:block}
html.head-over body.menu-open .site-head .brand.has-light .logo-dark{display:block}
html.head-over body.menu-open .site-head .brand.has-light .logo-light{display:none}
html.head-over .site-head:not(.is-solid) .brand:not(.has-light) img{filter:brightness(0) invert(96%) sepia(6%) saturate(320%) hue-rotate(6deg)}
html.head-over .site-head:not(.is-solid) .menu-btn{color:var(--cream)}
html.head-over .site-head:not(.is-solid) .head-book{--btn-sh:0 8px 20px -6px rgba(14,16,11,.55),0 2px 4px -1px rgba(14,16,11,.3);--btn-sh-hi:0 14px 28px -8px rgba(14,16,11,.6),0 4px 8px -2px rgba(14,16,11,.3)}
html.head-over .site-head:not(.is-solid) .head-find{border-color:transparent;--btn-sh-lo:0 2px 6px -2px rgba(14,16,11,.6);--btn-sh:0 8px 20px -6px rgba(14,16,11,.55)}
/* the finder's magnifier (Wren, 2026-10-06): a light-yellow veil, never an
   orange or solid pill. On the cream bar a paler wash with olive ink; over
   the film see-through, with a blur, a thin yellow edge and cream ink */
.head-find{background:rgba(var(--lt-yellow),.5);border-color:rgba(56,61,49,.2)}
.head-find:hover{background:rgba(var(--lt-yellow),.72)}
html.head-over .site-head:not(.is-solid) .head-find{background:rgba(var(--lt-yellow),.2);border-color:rgba(var(--lt-yellow),.6);color:var(--cream);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.head-over .site-head:not(.is-solid) .head-find:hover{background:rgba(var(--lt-yellow),.32)}
html.head-over body.menu-open .site-head .head-find{background:rgba(var(--lt-yellow),.5);border-color:rgba(56,61,49,.2);color:var(--olive)}
html.head-over body.menu-open .site-head .brand img{filter:none}
html.head-over body.menu-open .site-head .menu-btn{color:var(--olive)}
@media (min-width:921px){
  /* top-level items only: the dropdown panels keep their cream card and olive links */
  html.head-over .site-head:not(.is-solid) .nav>a,
  html.head-over .site-head:not(.is-solid) .nav-dd>.nav-dd-btn{color:var(--cream)}
  html.head-over .site-head:not(.is-solid) .nav>a[aria-current="page"]{text-decoration-color:var(--copper)}
}
/* the first paint and a restored scroll position snap, they do not fade */
.site-head.no-tr,.site-head.no-tr *{transition:none!important}

/* ---------- frosted once the page moves (Eric, 2026-10-05) ----------
   Every page, both designs: the header is sticky and never hides. Past 40px
   of scroll (mm-motion.js: .is-glass, with .is-solid on the home film) it
   turns to frosted cream: the cream at .82 over a blur, a hairline and a
   soft shadow. Olive ink on it stays above 6:1 even over black (cream at
   .82 on #000 is #CCCAC3), so the words, icons and Book button hold AA over
   the film, photos and the dark sections. .82 rather than .72 so a renderer
   that drops the blur never shows a photo's edges through the lower part of
   the bar, which made the buttons look as if they hung below it. No
   backdrop-filter: plain cream.
   The open menu always gets the plain cream bar it hangs from. */
.site-head.is-glass{background-color:rgba(249,246,238,.82);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-bottom-color:rgba(56,61,49,.14);box-shadow:0 10px 24px -18px rgba(14,16,11,.45)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.site-head.is-glass{background-color:var(--cream)}}
body.menu-open .site-head.is-glass{background-color:var(--cream);box-shadow:none}
/* Focus never scrolls the page under a pinned header (Wren, 2026-10-05). The
   html scroll-padding that keeps anchors clear of the header also makes the
   browser think anything INSIDE the header is hidden behind it, so tabbing
   to the menu button or the logo pulled the page up 30 to 70px. Shifting the
   header pieces' scroll box down by the same amount tells the browser they
   are already in view; anchors in the page keep the padding. */
.site-head *{scroll-margin-top:calc(-1 * (var(--head) + var(--bar) + 16px));scroll-margin-bottom:calc(var(--head) + var(--bar) + 16px)}

/* ---------- hero ---------- */
.hero{background:var(--olive);color:var(--cream)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);padding-top:44px}
.has-hero-head #main>.hero .hero-grid{padding-top:calc(44px + var(--head) + var(--bar) + var(--safe-top))}
.hero .eyebrow{color:var(--stone)}
.hero h1{font-size:2.6rem;font-size:max(2.6rem,min(11vw,4.6rem));font-size:clamp(2.6rem,11vw,4.6rem);line-height:1.02;letter-spacing:-.02em;max-width:11em}
.hero-sub{margin-top:20px;max-width:30em;font-size:1.08rem;line-height:1.55;color:var(--stone)}
.hero-copy{padding-bottom:44px}
.hero-photo{margin:0 calc(var(--pad) * -1);aspect-ratio:4/3;overflow:hidden;background:var(--olive-2)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
@media (min-width:921px){
  .hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:72px}
  .has-hero-head #main>.hero .hero-grid{padding-top:calc(60px + var(--head) + var(--bar) + var(--safe-top))}
  .hero-copy{padding-bottom:0}
  .hero-photo{margin:0;aspect-ratio:5/6;border-radius:var(--r);clip-path:inset(0 round var(--r))}
  .hero-sub{font-size:1.18rem}
}
@media (min-width:1280px){.hero-photo{aspect-ratio:1/1}}
/* the clinic film in the photo's box (home.php, hero-video.js): the still
   underneath, the video fading over it once it plays, a 44px pause button */
.hero-video{position:relative;isolation:isolate}
.hero-video picture{display:contents}
.hero-video .hero-still{position:relative;z-index:0}
.hero-video .hero-vid{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease;z-index:1;pointer-events:none}
.hero-video.is-on .hero-vid{opacity:1}
.hero-vbtn{position:absolute;right:14px;bottom:14px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:rgba(249,246,238,.9);color:var(--olive);cursor:pointer;box-shadow:0 2px 10px rgba(42,46,37,.25)}
.hero-vbtn:hover{background:var(--cream)}
.hero-vbtn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.hero-vbtn .i-play{display:none}
.hero-video.is-paused .hero-vbtn .i-play{display:block}
.hero-video.is-paused .hero-vbtn .i-pause{display:none}
@media (max-width:920px){.hero-vbtn{right:auto;left:14px}}   /* clear of the chat bubble on phones */
/* the clean opening (hero_style 'clean', Wren, 2026-10-06; the row and the
   moving line: home-extras.css). On a phone the photo (or film) fills the
   opening behind an olive scrim and the words sit at its foot, so the calm
   stack and the moving line fit 100svh, Safari's smallest visible viewport,
   with nothing under its toolbar (a constant foot, never
   env(safe-area-inset-bottom), which toggles as the toolbar collapses).
   From 921px the two columns stay, the moving line under them. */
@media (max-width:920px){
  .hero-clean{position:relative;isolation:isolate;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:flex-end;justify-content:flex-end;min-height:100vh;min-height:100svh}
  .hero-clean .hero-grid{position:static;padding-top:calc(32px + var(--head) + var(--bar) + var(--safe-top))}
  .has-hero-head #main>.hero-clean .hero-grid{padding-top:calc(32px + var(--head) + var(--bar) + var(--safe-top))}
  .hero-clean .hero-photo{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;margin:0;aspect-ratio:auto;border-radius:0}
  .hero-clean .hero-photo img,.hero-clean .hero-photo .hero-vid{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
  .hero-clean .hero-photo::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(47,51,41,.94) 0,rgba(47,51,41,.88) 45%,rgba(47,51,41,.55) 75%,rgba(47,51,41,.4) 100%)}
  .hero-clean .hero-copy{position:relative;z-index:3;padding-bottom:28px}
  .hero-clean .eyebrow,.hero-clean .hero-sub{color:#E4E2D9}
}
@media (min-width:921px){.hero-clean .hero-grid{padding-bottom:56px}.hero-clean .hero-photo{aspect-ratio:auto;height:calc(100vh - var(--head) - var(--bar) - var(--safe-top) - 190px);min-height:380px;max-height:660px}}
/* svh behind @supports: beside a var() an unknown unit is only rejected at
   computed time, which would unset the vh line above on older Safari. */
@supports (height:1svh){@media (min-width:921px){.hero-clean .hero-photo{height:calc(100svh - var(--head) - var(--bar) - var(--safe-top) - 190px)}}}
/* the condition finder's search button in the opening: home-extras.css .hero-find (2026-10-06) */

/* ---------- intro (the heading and blocks: home-extras.css, _intro.php) ---------- */
.intro{padding:64px 0}
@media (min-width:921px){.intro{padding:104px 0}}

/* ---------- section heads ---------- */
.sec-head{margin-bottom:36px}
.sec-head h2,.clinic h2,.owners h2,.visit h2{font-size:1.9rem;font-size:max(1.9rem,min(6.4vw,3rem));font-size:clamp(1.9rem,6.4vw,3rem)}
.sec-head h2{max-width:20em}
.more{margin-top:32px}

/* ---------- services ---------- */
.services{padding:64px 0;border-top:1px solid var(--line)}
.svc-groups{display:grid;gap:48px}
.svc-group{display:grid;gap:24px}
.group-photo{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--paper)}
.group-photo img{width:100%;height:100%;object-fit:cover}
.svc-group h3{font-size:1.6rem}
.group-list{list-style:none;margin:16px 0 0;padding:0;border-top:var(--hair,1px) solid var(--line)}
.group-list li{padding:12px 0;border-bottom:var(--hair,1px) solid var(--line);font-size:1.02rem}
.group-note{margin-top:16px;font-size:.94rem;line-height:1.55;color:var(--muted);max-width:32em}
/* accident recovery: white on periwinkle (Lyndsey, 2026-10-06; was paper).
   The car is drawn in the text colour; "Car or bike accident recovery" is
   the heading, "No copays. No referrals." the big line under it; the button
   is white with periwinkle type (5.3:1) */
.accident{margin-top:56px;padding:32px 24px;border:0;border-radius:var(--r);background:#5E67AA;background:var(--peri-deep);color:#fff;display:grid;gap:20px;
  --btn-bg:#fff;--btn-bg-hi:#ECEEF9;--btn-fg:#5E67AA;--btn-fg:var(--peri-deep);
  --btn-sh:0 8px 20px -6px rgba(28,31,70,.55),0 2px 4px -1px rgba(28,31,70,.3);--btn-sh-hi:0 14px 28px -8px rgba(28,31,70,.6),0 4px 8px -2px rgba(28,31,70,.3);--btn-sh-lo:0 2px 6px -2px rgba(28,31,70,.55)}
.accident .acc-car{display:block;width:180px;max-width:100%;height:auto;margin:0 0 20px;color:#fff}
.accident .acc-kicker{font:600 1.15rem/1.25 var(--display);letter-spacing:-.01em;color:#fff;margin:0 0 8px}
.accident .acc-claim{font:600 1.7rem/1.1 var(--display);font-size:max(1.7rem,min(5.6vw,2.3rem));font-size:clamp(1.7rem,5.6vw,2.3rem);letter-spacing:-.02em;color:#fff;margin:0}
.accident .acc-body p{color:#fff;max-width:36em}
.accident a:not(.btn):not(.pill){color:#fff}
.acc-cta{margin-top:20px}
@media (min-width:921px){
  .services{padding:104px 0}
  .svc-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
  .group-photo{aspect-ratio:5/4}
  .accident{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;padding:44px 44px;margin-top:80px;align-items:end}
  .accident .acc-car{width:200px;margin-bottom:24px}
}

/* ---------- the building ---------- */
.clinic{padding:64px 0}
.clinic-grid{display:grid;gap:32px}
.clinic-text p{margin-top:20px;color:var(--ink-2);max-width:34em}
.clinic-text h2{margin-top:0}
.clinic-text .clinic-sub{margin-top:14px;font:italic 400 max(1.15rem,min(1.7vw,1.35rem))/1.4 var(--display);color:var(--olive);text-wrap:pretty}
.clinic-old{margin-top:28px;border-radius:var(--r);overflow:hidden;filter:grayscale(.15)}
.clinic-photo{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
.clinic-photo img{width:100%;height:100%;object-fit:cover}
.space{margin-top:64px}
.space-h{font-size:1.5rem;margin-bottom:20px}
.space-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.space-grid figure{overflow:hidden;border-radius:var(--r);background:var(--paper)}
.space-grid img{width:100%;height:100%;object-fit:cover}
.space-1,.space-2{aspect-ratio:3/4}
.space-3{grid-column:1/-1;aspect-ratio:4/3}
@media (min-width:921px){
  .clinic{padding:104px 0}
  .clinic-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  /* the photo is as tall as the words beside it (the row), never a fixed 560 */
  .clinic-photo{aspect-ratio:auto;height:100%;min-height:320px}
  .space{margin-top:96px}
  .space-grid{grid-template-columns:3fr 3fr 5fr;gap:14px}
  .space-grid figure{aspect-ratio:auto;height:340px;height:max(340px,min(32vw,460px));height:clamp(340px,32vw,460px)}
  .space-3{grid-column:auto}
}

/* ---------- ethos band ---------- */
.ethos{background:var(--olive);color:var(--cream);padding:64px 0}
.ethos .eyebrow{color:var(--stone);margin-bottom:24px}
.ethos-text{font:400 max(1.6rem,min(6vw,2.8rem))/1.25 var(--display);letter-spacing:-.01em;max-width:24em}
.ethos-note{margin-top:28px;color:var(--stone);max-width:36em}
@media (min-width:921px){.ethos{padding:104px 0}}

/* ---------- owners ---------- */
.owners{padding:64px 0}
.owners-grid{display:grid;gap:36px}
.owners-text p{margin-top:20px;color:var(--ink-2);max-width:34em}
.owners-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.owner-photo{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--paper)}
.owner-photo img{width:100%;height:100%;object-fit:cover}
.owner figcaption{margin-top:12px;display:grid;gap:2px}
.owner-name{font:500 1.12rem/1.25 var(--display)}
.owner-role{font-size:.88rem;color:var(--muted)}
@media (min-width:921px){
  .owners{padding:104px 0}
  .owners-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:end}
  .owners-pair{gap:20px}
  .owner-name{font-size:1.3rem}
}

/* ---------- practitioners + blog (shown once there are rows) ---------- */
.team,.blog{padding:64px 0;border-top:1px solid var(--line)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:24px}
.card a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--olive)}
.card img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:var(--r);margin-bottom:10px}
.card-title{font:500 1.2rem/1.25 var(--display)}
.card-sub,.muted,.opt{color:var(--muted)}
.card-sub{font-size:.9rem}
.posts{list-style:none;margin:0;padding:0;display:grid;border-top:var(--hair,1px) solid var(--line)}
.posts>li>a{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-bottom:var(--hair,1px) solid var(--line);text-decoration:none}
.post-title{font:500 1.3rem/1.3 var(--display)}
.posts time{font-size:.88rem;color:var(--muted)}

/* ---------- visit ---------- */
.visit{background:var(--olive);color:var(--cream);padding:64px 0}
.visit .eyebrow{color:var(--stone)}
.visit-grid{display:grid;gap:44px}
.visit-addr{margin-top:28px;font:400 max(1.5rem,min(5.4vw,2rem))/1.3 var(--display);font-style:normal}
.visit-transit{margin-top:12px;color:var(--stone);font-size:.95rem}
.visit-facts{margin:0;display:grid;border-top:1px solid var(--line-d)}
.visit-facts>div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line-d)}
.visit-facts dt{font:italic 400 1rem/1.3 var(--display);color:var(--stone)}
.visit-facts dd{margin:0;line-height:1.55}
.visit-facts a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;color:var(--cream)}
@media (min-width:921px){
  .visit{padding:104px 0}
  .visit-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:start}
  .visit-facts>div{grid-template-columns:8.5rem minmax(0,1fr);gap:16px}
  .visit-facts dt{padding-top:.3em}
}

/* ---------- footer ---------- */
/* bottom 84px: the last line (copyright + badge) clears the floating chat button (52px, 16px up) */
.site-foot{background:var(--olive-2);color:var(--stone);padding:48px 0 calc(84px + env(safe-area-inset-bottom,0px));font-size:.94rem;border-top:1px solid var(--line-d)}
.foot-grid{position:relative;display:grid;gap:28px}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-mark{height:40px;width:auto}
.foot-word{height:24px;width:auto}
.foot-addr{font-style:normal;line-height:1.6}
.foot-addr a{color:var(--cream)}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 20px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--cream);text-decoration:none}
.foot-nav a:hover{text-decoration:underline}
.foot-note,.foot-legal{margin:0}
.foot-legal{font-size:.84rem;display:flex;align-items:center;gap:16px}
/* the welcome badge (Settings > Logos, brand_footer_badge): 48 wide on phones, 68 from 921px */
.foot-badge{display:block;flex:none;width:48px;height:auto;aspect-ratio:68/36;object-fit:cover;border-radius:2px}
@media (min-width:921px){
  .foot-grid{grid-template-columns:auto 1fr auto;column-gap:56px;row-gap:24px;align-items:start}
  .foot-nav{grid-column:3;grid-row:1 / span 2;display:block;columns:2 auto;column-gap:48px}
  .foot-nav a{display:flex;width:max-content;break-inside:avoid}
  .foot-nav a{min-height:36px}
  .foot-note{grid-column:1 / span 2}
  .foot-legal{grid-column:1 / -1;padding-top:24px;border-top:1px solid var(--line-d)}
  .foot-badge{width:68px}
}

/* ---------- inner pages (page, services, contact, practitioners, posts) ---------- */
/* breadcrumbs: one line, every item the same 44px box so they share a centre
   line; the last item truncates rather than wrap */
.crumbs{padding-top:12px}
.crumbs ol{display:flex;align-items:center;flex-wrap:nowrap;list-style:none;margin:0;padding:0;min-width:0;font:500 .875rem/1.2 var(--body);color:var(--muted)}
.crumbs li{display:flex;align-items:center;flex:none;min-height:44px;white-space:nowrap}
.crumbs li:last-child{flex:0 1 auto;min-width:0}
.crumbs li+li::before{content:"";flex:none;width:5px;height:5px;margin:0 12px 0 9px;border-top:1.5px solid var(--line-strong);border-right:1.5px solid var(--line-strong);transform:rotate(45deg)}
.crumbs a{display:flex;align-items:center;min-height:44px;padding:0 2px;margin:0 -2px;color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--olive);text-decoration:underline;text-underline-offset:.25em}.crumbs a:focus-visible{color:var(--olive);text-decoration:underline;text-underline-offset:.25em}
.crumbs [aria-current]{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--olive)}
@media (min-width:921px){.crumbs{padding-top:20px}}
/* the inner templates themselves are styled in inner.css; the radius scale
   reaches it through --r, and these few take the small step instead
   (body-scoped because inner.css loads after this sheet) */
body .field input,body .field textarea,body .field select,body .flash{border-radius:var(--r-sm)}
body .notice{border-radius:0 var(--r-sm) var(--r-sm) 0}
body .form-card{border-radius:var(--r)}
body .fdr{--finder-radius:var(--r)}
/* the paper loading frame belongs on the rounded photo, not on its wider square figure */
body .post-hero,body .fig{background-color:transparent}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
  .btn,.head-find,.pill,body .nl-btn{transform:none!important}}

/* aspect-ratio arrived in Safari 15. Before it, each frame took its photo's
   own shape. A padding box holds the frame's shape and the picture fills it
   (the card photos are sized by legacy.js). Browsers that know
   aspect-ratio skip this block. */
@supports not (aspect-ratio:1/1){
  .hero-photo,.group-photo,.clinic-photo,.owner-photo{position:relative}
  .hero-photo::before,.group-photo::before,.clinic-photo::before,.owner-photo::before{content:"";display:block;padding-top:75%}
  .clinic-photo::before,.owner-photo::before{padding-top:125%}
  .hero-photo img,.group-photo img,.clinic-photo img,.owner-photo img{position:absolute;top:0;left:0}
  .hero-video .hero-still{position:absolute}
  @media (min-width:921px){
    .hero-photo::before{padding-top:120%}
    .group-photo::before{padding-top:80%}
    .clinic-photo::before{display:none}
  }
  @media (min-width:1280px){.hero-photo::before{padding-top:100%}}
}