/* Lotus (Maren, 2026-10-05): the editorial layer over the base design.
   Loads LAST, after style.css, inner.css and mm-motion.css, so every rule
   here is the final word. Mobile first: every rule is the 390px phone until a
   min-width query says otherwise.

   Palette, the IsaMadeThis brand book as printed, measured against WCAG 2.2:
     evergreen #383D31  ink on eggshell 10.1:1; the Visit band's ground
     eggshell  #F9F6EE  the page
     grey      #DDD9D2  rules, photo frames while a picture loads
     sage      #5F8B73  the ethos band: eggshell type on it at 24px+ only (3.6:1)
     gold      #C58C51  the civic colour: black type on gold 7.3:1 (accident band, the hand-drawn underline)
     faded blue #5F6C80 secondary text on eggshell 5.0:1 (labels, dates, roles)
     periwinkle #6D90CA link underlines and focus on eggshell, never small type
   Type, freely licensed stand-ins for the book's faces (all OFL):
     DM Sans 700/800 for Brown LL Black (headings)
     Inter 500/600 (--ui, style.css) for what a visitor presses: the menu,
       pills, buttons, standalone links (Eric, 2026-10-06, after Lauren's site)
     Alegreya Sans for Freight Sans (running text, and links inside it)
     Alegreya italic for Freight Text Italic (quotes, addresses, display lines;
       page ledes and blurbs moved to the sans, Lindsey 2026-10-06)
     Tenor Sans, the book's own tertiary face, for every all-caps label */

:root{
  --olive:#383D31;--olive-2:#2A2E25;--cream:#F9F6EE;--paper:#F1ECE0;--grey:#DDD9D2;--stone:#C9C8BF;
  --sage:#5F8B73;--gold:#C58C51;--copper:#C58C51;--peri:#6D90CA;--blue:#5F6C80;
  /* --peri is the brand kit's periwinkle, the only one (Lyndsey, 2026-10-06:
     the band in "that exact color"; a deeper #5E67AA was tried and dropped).
     Decorative everywhere (the accident band's ground, link and chip hovers,
     the eyebrow dot, focus rings, underlines); white type on it only at
     large size (3.2:1: 24px, or 18.66px bold); never small type on eggshell
     (3.0:1). --peri-ink is the evergreen that small type on the band uses,
     4.7:1 on the periwinkle */
  --peri-ink:#23271F;
  --muted:#5F6C80;--ink-2:#434839;
  --line:var(--grey);--line-strong:rgba(56,61,49,.4);--line-d:rgba(249,246,238,.2);
  --display:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Alegreya Sans","Gill Sans","Trebuchet MS",sans-serif;
  --lede:"Alegreya",Georgia,"Times New Roman",serif;
  --caps:"Tenor Sans","Gill Sans",sans-serif;
  /* one spacing scale (Maren, 2026-10-05 night): 8 12 16 24 32 40 48 56 64 80 96 120;
     --sec is the gap between sections, --gap-x the gutter between columns */
  --max:1280px;--pad:20px;--head:72px;--r:var(--r-photo);--sec:72px;--gap-x:24px;
  --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(--grey);--menu-pad:var(--pad);
  /* retheme hooks for the condition finder's modal (modules/finder) */
  --finder-ink:var(--olive);--finder-bg:var(--cream);--finder-accent:var(--gold);--finder-surface:#FFFDF8;--finder-radius:var(--r);--finder-font:var(--display);
}
@media (min-width:921px){:root{--pad:40px;--head:96px;--sec:120px;--gap-x:64px}}
@media (max-width:359px){:root{--pad:16px}}

html{scroll-padding-top:calc(var(--head) + var(--bar) + 16px)}
body{background:var(--cream);color:var(--olive);font:400 17px/1.6 var(--body)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.03em;font-optical-sizing:auto}
a{text-decoration:underline dotted;text-decoration-color:var(--dot);text-decoration-thickness:1px;text-underline-offset:.22em}
/* the stitch (Eric, 2026-10-05): inline links carry a faint 1px dotted line
   and no colour of their own; on hover a second row of dots in the text's
   own colour draws in left to right, under 300 ms. --dot is the faint row
   (olive on cream, cream on the evergreen); --dot-y puts the row under the
   letters when the link is a 44px flex box. */
:root{--dot:rgba(56,61,49,.38);--dot-y:100%}
.visit,.hero,.accident,.visit-facts{--dot:rgba(249,246,238,.42)}
.stitch,.prose a,.acc-a a,.svc-faq-more a,.cr-staff a,.job-more,.visit-facts dd a,.clinic-text a,.ethos a,.foot-loc a,.foot-nav a,.foot-note a,.foot-tag a,.foot-rating>span:last-child{color:inherit;text-decoration:none;background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,var(--dot) 0 1px,transparent 1px 4px);background-repeat:no-repeat;background-position:0 var(--dot-y),0 var(--dot-y);background-size:0 1px,100% 1px;transition:background-size .26s cubic-bezier(.4,0,.2,1)}
:is(.stitch,.prose a,.acc-a a,.svc-faq-more a,.cr-staff a,.job-more,.visit-facts dd a,.clinic-text a,.ethos a,.foot-loc a,.foot-nav a,.foot-note a,.foot-tag a):is(:hover,:focus-visible),.foot-rating:is(:hover,:focus-visible)>span:last-child{background-size:100% 1px,100% 1px}
.foot-loc a,.foot-nav a,.job-more{--dot-y:calc(50% + .78em)}
:focus-visible{outline:3px solid var(--peri);outline-offset:3px}
.hero :focus-visible,.site-foot :focus-visible{outline-color:var(--peri)}
.visit :focus-visible,.accident :focus-visible{outline-color:var(--cream)}
::selection{background:var(--gold);color:#000}
/* the finder's box opens with the hero's words selected (find-say.js): a soft ink tint there, not a copper block */
#finder .fdr-input::selection{background:rgba(30,33,25,.16);color:inherit}

/* ---------- labels ---------- */
.eyebrow{font:400 .76rem/1.4 var(--caps);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.eyebrow-dot::before{background:#6D90CA;background:var(--peri);width:8px;height:8px}
.intro .eyebrow,.owners .eyebrow,.clinic-text .eyebrow{color:var(--muted)}

/* ---------- pills: big, plain, high contrast ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:2px solid transparent;font:700 .95rem/1 var(--display);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:var(--btn-sh);transition:background-color .2s,color .2s,border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
.pill-book,.pill-gold{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent}
.pill-book:hover,.pill-gold:hover{background:var(--btn-bg-hi);color:var(--btn-fg);border-color:transparent}
/* the finder's pills are a light-yellow veil, not gold (Eric, 2026-10-06:
   "no orange buttons"); style.css carries --lt-yellow and the header rules,
   these restate them over the pill's own colours */
.pill-find{background:rgba(var(--lt-yellow),.5);color:var(--olive);border-color:rgba(56,61,49,.2)}
.pill-find:hover{background:rgba(var(--lt-yellow),.72);color:var(--olive);border-color:rgba(56,61,49,.32)}
html.head-over .site-head:not(.is-solid) .pill-find{background:rgba(var(--lt-yellow),.2);border-color:rgba(var(--lt-yellow),.6);color:var(--cream)}
html.head-over .site-head:not(.is-solid) .pill-find:hover{background:rgba(var(--lt-yellow),.32);color:var(--cream)}
html.head-over body.menu-open .site-head .pill-find{background:rgba(var(--lt-yellow),.5);border-color:rgba(56,61,49,.2);color:var(--olive)}
/* the secondaries (pill-line on cream, pill-line-light on the evergreen):
   one ghost, a thin line in the ground's black or white (style.css tokens) */
.pill-line,.pill-line-light{background:var(--btn-gh-bg);border-width:1px;border-color:var(--btn-gh-line);color:var(--btn-gh-fg);box-shadow:none}
.pill-line:hover,.pill-line-light:hover{background:var(--btn-gh-bg-hi);border-color:var(--btn-gh-line-hi);color:var(--btn-gh-fg)}
.pill-lg{min-height:56px;padding:0 30px;font-size:1.02rem}
.pill-xl{min-height:68px;padding:16px 30px;font-size:1.05rem;font-size:max(1.05rem,min(2.2vw,1.3rem));font-size:clamp(1.05rem,2.2vw,1.3rem);white-space:normal;text-align:left;line-height:1.2}
.pill-xl svg{flex:none}
/* Lauren's raised buttons (Lindsey, 2026-10-05): the olive-tinted shadow is
   in style.css; a pointer lifts the pill 2px, a thumb presses it (the shadow
   tucks in), reduced motion keeps the shadow and never moves it */
@media (hover:hover){.pill:hover{transform:translateY(-2px);box-shadow:var(--btn-sh-hi)}}
.pill:active{transform:translateY(0);box-shadow:var(--btn-sh-lo);transition-duration:.08s}
.pill.pill-line:hover,.pill.pill-line:active,.pill.pill-line-light:hover,.pill.pill-line-light:active{box-shadow:none}
.hero .pill-line{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* button colours, the grounds Lotus draws differently from the base: the
   ethos band and the footer are light here (the base lists them as dark), and
   on the sage band a bare white line would be 3.9:1, so its ghost keeps a
   faint evergreen veil that takes white type to 5.7:1 */
.ethos,.site-foot{
  --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)}
.band{--btn-gh-bg:rgba(30,33,25,.28);--btn-gh-bg-hi:rgba(30,33,25,.4)}
/* light grounds inside lotus that the base drew dark; gold gets a warm shadow */
.ethos,.site-foot{--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)}
.accident{--btn-sh:0 8px 20px -6px rgba(74,46,14,.55),0 2px 4px -1px rgba(74,46,14,.3);--btn-sh-hi:0 14px 28px -8px rgba(74,46,14,.6),0 4px 8px -2px rgba(74,46,14,.3);--btn-sh-lo:0 2px 6px -2px rgba(74,46,14,.55)}
.actions{gap:14px;margin-top:0}
/* the base button class, where inner pages still use it */
.btn{font:600 .95rem/1 var(--ui);border-width:2px;min-height:48px;padding:0 24px}
.btn.btn-ghost-light,.btn.btn-line{border-width:1px}
.link-arrow{font:400 .95rem/1.2 var(--ui);letter-spacing:.005em;border-bottom:2px solid var(--gold)}
.link-arrow:hover{border-bottom-color:var(--peri)}
/* Inter on every pill (Eric, 2026-10-06; the finder's button sets its own
   face in home-extras.css); a rule of its own so the face can come off
   without touching the pills above */
.pill{font-family:var(--ui);font-weight:600;letter-spacing:0}

/* ---------- header: one line at every width ---------- */
.site-head{background:rgba(249,246,238,.94);border-bottom:1px solid var(--grey)}
.head-row{gap:8px}
.brand{gap:10px}
.brand-mark{height:38px}
.brand-word{height:21.5px}
.head-find{margin-left:auto;min-height:44px;padding:0 13px;font-size:.9rem;gap:8px}
.head-find .hf-long{display:none}
.head-book{margin-left:0;min-height:44px;padding:0 16px;font-size:.9rem}
.hb-short{display:none}
.menu-btn{color:var(--olive)}
@media (max-width:479px){.hb-long{display:none}.hb-short{display:inline}}
@media (max-width:359px){.brand .brand-word{display:none!important}} /* the cream wordmark over the film too: at 320 the row needs its room */
@media (min-width:600px){.head-find .hf-long{display:inline}.head-find{padding:0 18px 0 15px}}
@media (max-width:920px){
  .nav a{min-height:58px;border-bottom:var(--hair,1px) solid var(--grey);font:400 1.45rem/1.15 var(--ui);letter-spacing:0;color:var(--olive)}
  .nav a[aria-current="page"]{color:var(--muted)}
  .nav .nav-book{margin-top:24px;min-height:56px;border-radius:999px;background:var(--olive);color:var(--cream);font:600 1.02rem/1 var(--ui);letter-spacing:0}
}
@media (min-width:921px){
  .brand-mark{height:46px}
  .brand-word{height:26px}
  .nav{gap:2px;margin-left:auto}
  .nav a{min-height:44px;padding:0 14px;font:400 .95rem/1 var(--ui);letter-spacing:.005em;color:var(--olive);border-radius:0;text-decoration:none}
  .nav a:hover{text-decoration:underline;text-decoration-color:var(--peri);text-decoration-thickness:2px;text-underline-offset:.5em}
  .nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:.5em}
  .head-find{margin-left:14px;font-size:.95rem}
  .head-book{margin-left:4px;padding:0 22px;font-size:.95rem}
}
@media (min-width:921px) and (max-width:1040px){.nav a{padding:0 10px}.head-find{margin-left:8px}}

/* ---------- breadcrumbs ---------- */
.crumbs ol{font:400 .78rem/1.3 var(--caps);letter-spacing:.1em;text-transform:uppercase}

/* ---------- home: the opening, the film edge to edge ----------
   The clinic video (or the main photo) fills the box; the words sit on it at
   the foot over an evergreen scrim. Measured (WebKit, brightest pixel under
   each line): cream on the scrim's lower half is 7:1 and better, Book is olive on cream (10:1), Call is cream on the
   scrim. The headline takes turns (.hl, one at a time, stacked on one grid
   cell so the box never jumps); the first is the page's title, server-side. */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100vh - var(--head) - var(--bar));padding:0;background:var(--olive-2);color:var(--cream)}
/* svh behind @supports: next to a var() an unknown unit is only caught at
   computed time, which unsets the vh line above instead of falling back to it */
@supports (height:1svh){.hero{min-height:calc(100svh - var(--head) - var(--bar))}}
.hero-grid{display:block}
.has-hero-head #main>.hero{min-height:100vh;min-height:100svh}
.hero-media{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:auto;isolation:auto;margin:0;overflow:hidden;background:var(--olive-2);aspect-ratio:auto;border-radius:0}
.hero-media picture{display:contents}
.hero-media img,.hero-media .hero-vid{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-media .hero-still{z-index:0;transform:none}
html.fx .hero-media:has(>img.mm-ld),html.fx .hero-media:has(>picture>img.mm-ld){background-color:var(--olive-2)}
.hero-media .hero-vid{opacity:0;transition:opacity .7s ease;z-index:1;pointer-events:none}
.hero-video.is-on .hero-vid{opacity:1}
.hero-scrim{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(42,46,37,.9) 0,rgba(42,46,37,.86) 44%,rgba(42,46,37,.5) 70%,rgba(42,46,37,.16) 100%)}
/* a soft shade along the top so the cream logo and links hold on a bright frame */
.has-hero-head #main>.hero .hero-scrim{background:linear-gradient(to bottom,rgba(42,46,37,.55) 0,rgba(42,46,37,.22) 120px,rgba(42,46,37,0) 200px),linear-gradient(to top,rgba(42,46,37,.9) 0,rgba(42,46,37,.86) 44%,rgba(42,46,37,.5) 70%,rgba(42,46,37,.16) 100%)}
.hero-top{position:relative;z-index:3;width:100%;padding-top:128px;padding-bottom:76px;pointer-events:none}
.hero-copy{position:relative;padding:0;pointer-events:auto}
.hero .eyebrow{color:var(--cream)}
.hero h1{display:grid;align-items:end;font-size:2.6rem;font-size:max(2.6rem,min(10vw,7.2rem));font-size:clamp(2.6rem,10vw,7.2rem);line-height:.96;letter-spacing:-.04em;max-width:none;text-wrap:balance;color:var(--cream)}
.hero h1 .hl{grid-area:1/1;display:block;visibility:hidden;opacity:0;transform:translateY(.25em);transition:opacity .6s ease,transform .6s ease,visibility 0s linear .6s}
.hero h1 .hl.is-on{visibility:visible;opacity:1;transform:none;transition-delay:0s,0s,0s}
.hero h1 .hl a{color:inherit;text-decoration:none}
.hero h1 .hl a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.05em;text-underline-offset:.1em}.hero h1 .hl a:focus-visible{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.05em;text-underline-offset:.1em}
.hero h1.is-still{display:block}
.hero h1.is-still .hl{visibility:visible;opacity:1;transform:none;margin-top:.1em}
/* the editor's list of the lines that take turns: it floats above the words
   (the hero's air, there in both states) so the signed-in hero is laid out
   exactly like the public one */
.hero-lines-edit{position:absolute;left:0;bottom:100%;width:min(760px,100%);margin:0 0 20px}
/* under the clear header the box would climb behind the bar: editors get it in the flow, under the headline */
html.is-edit .has-hero-head #main>.hero .hero-lines-edit{position:static;margin:20px 0 0}
/* the film's change-photo tab starts below the clear header, where a tap can reach it */
html.is-edit .has-hero-head #main>.hero .rre-img-tab{top:calc(var(--head) + var(--bar) + var(--safe-top) + 12px)}
.hero-lines-h{display:block;margin-bottom:6px;font:400 .68rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.hero-lines{list-style:none;margin:0;padding:8px 12px;border-radius:var(--r-sm);border:1px dashed rgba(249,246,238,.55);background:rgba(42,46,37,.55);font:400 .95rem/1.5 var(--body);color:var(--cream)}
.hero-lines li{padding:2px 0}
.hero-row{display:grid;gap:28px;margin-top:28px}
.hero-sub{margin:0;max-width:26em;font:italic 400 max(1.2rem,min(2.2vw,1.6rem))/1.35 var(--lede);color:var(--cream)}
.hero .actions{margin-top:0}
/* the opening's pills take the dark ground's tokens (style.css): Book is
   white with near-black type, Call is Lauren's see-through white ghost */
/* the film: a 44px pause button in the corner, under the words' box */
.hero-vbtn{position:absolute;right:14px;bottom:14px;z-index:4;width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:rgba(249,246,238,.92);color:var(--olive);cursor:pointer;box-shadow:0 2px 10px rgba(42,46,37,.35)}
.hero-vbtn:hover{background:var(--cream)}
.hero-vbtn:focus-visible{outline:2px solid var(--gold);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}
/* the finder's button in the opening: home-extras.css .hero-find (2026-10-06) */
/* on a phone the call is a quiet text link under the Book pill */
@media (max-width:599px){
  .hero .actions{flex-direction:column;align-items:flex-start;gap:12px}
  .hero .hero-call{min-height:44px;padding:0;border:0;background:none;color:var(--cream);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(255,255,255,.6);font-weight:700;box-shadow:none;transform:none}
  .hero .hero-call:hover{background:none;color:var(--cream);box-shadow:none;transform:none}
}
@media (min-width:921px){
  .hero-top{padding-top:160px;padding-bottom:96px}
  .hero-row{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px;margin-top:36px}
  .hero-vbtn{right:20px;bottom:20px}
}
/* the gold hand-drawn underline (the brand book's graphic element) draws
   under the last word of the headline, in place of the base sage band */
.hero .w-hl::before{left:-.02em;right:-.02em;bottom:-.06em;height:.16em;border-radius:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9c22-7 38 6 60 1s38-9 62-2 44 6 74-3' fill='none' stroke='%23C58C51' stroke-width='3.6' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;transform:none;transform-origin:0 50%;z-index:-1}
html.fx .hero .w-hl::before{animation:ltDraw 1.1s cubic-bezier(.3,.6,.2,1) 1.3s both}
html.fx .hero h1.mm-split .w-hl{animation:mmWord .7s cubic-bezier(.2,.65,.25,1) var(--wd,.18s) both}
@keyframes ltDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the clean opening (hero_style 'clean', Wren, 2026-10-06; the row and the
   moving line: home-extras.css). Still the film edge to edge at 100svh, the
   words at the foot, now a short calm stack, so the whole of it fits the
   smallest visible viewport (Safari with its toolbar showing) and nothing
   rests under the toolbar. A constant foot, never env(safe-area-inset-bottom),
   which toggles as Safari's toolbar collapses. */
.hero-clean .hero-top{padding-top:calc(var(--head) + var(--bar) + var(--safe-top) + 32px);padding-bottom:28px}
.hero-clean .hero-sub{max-width:24em}
/* one fixed headline: a block, so the split words (the opening's rise) flow as text, not as grid cells */
.hero-clean h1{display:block}
@media (min-width:921px){.hero-clean .hero-top{padding-top:calc(var(--head) + var(--bar) + var(--safe-top) + 48px);padding-bottom:44px}}

/* ---------- the welcome (heading over blocks, no drop cap: home-extras.css, _intro.php) ---------- */
.intro{padding:var(--sec) 0}

/* ---------- section heads: a magazine's thick rule, label over heading ---------- */
.sec-head{margin-bottom:40px;padding-top:24px;border-top:2px solid var(--olive)}
.sec-head h2,.clinic h2,.owners h2,.visit 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;max-width:none}
.sec-head .eyebrow{margin-bottom:22px}
@media (min-width:921px){
  .sec-head{margin-bottom:48px;padding-top:32px}
  .sec-head h2{max-width:14em}
}

/* ---------- services: numbered, alternating spreads ---------- */
.services{padding:0 0 0}
.svc-groups{display:grid;gap:56px}
.svc-group{display:grid;gap:24px;align-items:center;padding:0;border:0;background:none}
.group-photo{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--grey);border-radius:var(--r)}
.group-photo img{width:100%;height:100%;object-fit:cover}
.group-text{padding:0}
.num{font:800 .9rem/1 var(--display);letter-spacing:.14em;color:var(--gold);margin:0 0 14px}
.group-text h3{font-size:1.75rem;font-size:max(1.75rem,min(4vw,2.6rem));font-size:clamp(1.75rem,4vw,2.6rem);line-height:1;letter-spacing:-.03em}
/* One rule per item: the list draws the top line, each item only its
   bottom. (style.css already gives the list a top and each item a bottom;
   an item top here as well made every separator two lines thick.) */
.group-list{list-style:none;margin:24px 0 0;padding:0;columns:auto;display:block;border-top:var(--hair,1px) solid var(--grey)}
.group-list li{padding:11px 0;border-top:0;border-bottom:var(--hair,1px) solid var(--grey);font-size:1.08rem;line-height:1.4;margin:0}
.group-list li::before{display:none}
.group-note{margin-top:18px;font:400 1.0625rem/1.5 var(--body);color:var(--muted)}
.services .more{margin-top:48px}
@media (min-width:921px){
  /* the base lays the two groups side by side; lotus gives each its own spread */
  .svc-groups{grid-template-columns:minmax(0,1fr);gap:96px}
  .svc-group{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap-x)}
  /* mirrored, truly: the text column takes the photo column's width and the photo the text's */
  .svc-group:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .svc-group:nth-child(even) .group-photo{order:2}
  .services .more{margin-top:64px}
}
/* accident recovery: white on periwinkle (Lyndsey, 2026-10-06; was black on
   gold). The car is drawn in the text colour; "Car or bike accident recovery"
   is the band's heading, "No copays. No referrals." the big line under it.
   The ground is the brand kit's #6D90CA exactly (Lyndsey): white holds only
   at large size (3.2:1), so the heading (24px+, 800) and the claim stay
   white and the paragraph, its links and the button label take --peri-ink
   (4.7:1 on the band; the olive label 11.2:1 on the white button; the
   periwinkle label was 3.2:1). The button's shadow goes blue */
.accident{display:block;margin:var(--sec) 0 0;padding:56px 0;background:#6D90CA;background:var(--peri);color:#fff;border:0;border-radius:0;
  --btn-bg:#fff;--btn-bg-hi:#ECEEF9;--btn-fg:#383D31;--btn-fg:var(--olive);
  --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:200px;max-width:100%;height:auto;margin:0 0 28px;color:#fff}
.accident .acc-kicker{font:800 1.5rem/1.1 var(--display);font-size:max(1.5rem,min(4.4vw,1.9rem));font-size:clamp(1.5rem,4.4vw,1.9rem);letter-spacing:-.02em;color:#fff;margin:0 0 10px}
.accident .acc-claim{font:800 2.1rem/.98 var(--display);font-size:max(2.1rem,min(5.4vw,3.8rem));font-size:clamp(2.1rem,5.4vw,3.8rem);letter-spacing:-.035em;color:#fff;max-width:none;margin:0}
.accident .acc-body p{font-size:1.15rem;line-height:1.5;max-width:30em;color:#23271F;color:var(--peri-ink)}
.accident .acc-cta{margin-top:28px}
.accident .acc-body a:not(.pill):not(.btn){color:#23271F;color:var(--peri-ink);--dot:rgba(35,39,31,.5)}
.accident-grid{display:grid;gap:28px}
@media (min-width:921px){
  .accident{margin-top:var(--sec);padding:80px 0}
  .accident-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gap-x);align-items:end}
  .accident .acc-car{width:240px;margin-bottom:36px}
  .accident .acc-claim{font-size:max(2.1rem,min(4.6vw,3.4rem));font-size:clamp(2.1rem,4.6vw,3.4rem);text-wrap:balance}
  .accident .acc-body{padding-bottom:6px}
}

/* ---------- first visit (base partial): its own type, our faces ---------- */
.fv{border-top:0;background:var(--paper)}
.fv-n{font-family:var(--lede)}
.fv-step{border-color:var(--grey);border-radius:var(--r)}

/* ---------- the building: a full-bleed band with the words on it, then the story and three rooms ---------- */
.clinic{padding:var(--sec) 0 0}
.clinic-band{position:relative;isolation:isolate;overflow:hidden;background:var(--olive-2);color:var(--cream)}
.clinic-photo{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;margin:0;overflow:hidden;background:var(--grey);border-radius:0;aspect-ratio:auto}
.clinic-photo img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* the drift (home.php): a taller picture, moved on a transform in a rAF */
.clinic-band.has-drift .clinic-photo img{top:-10%;height:120%;will-change:transform}
.clinic-band-copy{position:relative;z-index:1;display:flex;align-items:flex-end;min-height:72vh;min-height:72svh;padding:180px 0 40px;background:linear-gradient(to top,rgba(42,46,37,.88) 0,rgba(42,46,37,.72) 38%,rgba(42,46,37,0) 78%)}
.clinic-band .eyebrow{color:var(--cream);margin-bottom:18px}
.clinic-band h2{color:var(--cream);margin:0;max-width:12em}
/* the band's words sit on the page's left edge (Eric, 2026-10-05): a flex
   item shrinks to its words, so the wrap is told to take the full width */
.clinic-band-copy>.wrap{flex:1 1 auto;width:100%}
.clinic-sub{margin:18px 0 0;max-width:26em;font:italic 400 max(1.2rem,min(2.2vw,1.6rem))/1.35 var(--lede);color:var(--cream);text-wrap:pretty}
.clinic-grid{display:grid;gap:32px;padding-top:40px}
.clinic-text p{margin:0;font-size:1.1rem;line-height:1.65;color:var(--ink-2);max-width:34em}
.clinic-text p+p{margin-top:1em}
/* the 1917 street photo: wide on a phone; beside the words it fills their
   height (see the 921px block), cropped toward the marked building */
.clinic-old{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--grey);border-radius:var(--r)}
.clinic-old img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 50%;filter:none}
.space{margin-top:0;padding-top:48px}
.space-h{margin-bottom:24px}
.space-grid{display:grid;gap:16px}
.space-grid>figure{grid-column:auto;aspect-ratio:4/5;overflow:hidden;background:var(--grey);border-radius:var(--r);margin:0}
.space-grid img{width:100%;height:100%;object-fit:cover}
@media (min-width:921px){
  .clinic-band-copy{min-height:min(680px,76vh);padding:220px 0 64px}
  .clinic-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap-x);padding-top:56px;align-items:stretch}
  /* one block: the photo is as tall as the words (their first and last line), never under 300px */
  .clinic-old{aspect-ratio:auto;min-height:300px;margin:6px 0}
  .space{padding-top:var(--gap-x)}
  .space-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  /* the base design's fixed row height made each 4:5 photo 16px narrower than its column */
  .space-grid>figure{height:auto}
}

/* ---------- ethos: evergreen on paper (olive 9.5:1, ink-2 8:1), the gold underline ---------- */
.ethos{background:var(--paper);color:var(--olive);padding:var(--sec) 0;margin-top:var(--sec)}
.ethos-inner{max-width:1100px}
.ethos .eyebrow{color:var(--olive);margin-bottom:28px}
.ethos-text{font:700 max(1.7rem,min(4.6vw,3.7rem))/1.1 var(--display);letter-spacing:-.03em;text-wrap:balance;margin:0;color:var(--olive)}
.ethos-note{margin-top:28px;font:400 1.125rem/1.5 var(--body);color:var(--ink-2);max-width:34em}
.ethos .sq{display:block;width:180px;height:14px;margin-top:44px;color:var(--gold)}
@media (min-width:921px){.ethos .sq{width:240px;height:18px}}

/* ---------- the owners ---------- */
.owners{padding:var(--sec) 0}
.owners-grid{display:grid;gap:40px}
.owners-text p:not(.eyebrow){margin-top:24px;font-size:1.1rem;line-height:1.65;color:var(--ink-2);max-width:32em}
.owners-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.owner{margin:0}
.owner-photo{aspect-ratio:4/5;overflow:hidden;background:var(--grey);border-radius:var(--r)}
.owner-photo img{width:100%;height:100%;object-fit:cover}
.owner figcaption{padding-top:14px}
.owner-name{display:block;font:800 1.08rem/1.25 var(--display);letter-spacing:-.015em}
.owner-role{display:block;margin-top:6px;font:400 .74rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (min-width:921px){
  .owners{padding:var(--sec) 0}
  .owners-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-x);align-items:start}
  .owners-pair{gap:32px}
}

/* ---------- practitioners: the swipe row, portraits tall ---------- */
.team{padding:0 0 var(--sec)}
.cards{list-style:none;margin:0;padding:0}
.card{margin:0}
.card a{display:block;color:inherit;text-decoration:none}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--grey);border-radius:var(--r)}
.card-title{display:block;margin-top:14px;font:800 1.05rem/1.25 var(--display);letter-spacing:-.015em}
.card-sub{display:block;margin-top:5px;font:400 .72rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card a:hover .card-title{text-decoration:underline;text-decoration-color:var(--peri);text-decoration-thickness:2px;text-underline-offset:.2em}
.team .more{margin-top:48px}
.sw-btn{border-color:var(--olive);border-width:2px}
@media (min-width:921px){.team{padding-bottom:var(--sec)}}

/* ---------- from the blog: a contents page ---------- */
.blog{padding:0 0 var(--sec)}
.blog-grid{display:grid;gap:0}
.posts{list-style:none;margin:0;padding:0}
.posts li a{display:grid;gap:8px;padding:22px 0;border-bottom:var(--hair,1px) solid var(--grey);color:inherit;text-decoration:none}
.posts li:first-child a{border-top:0}
.post-title{font:700 max(1.15rem,min(2vw,1.5rem))/1.25 var(--display);letter-spacing:-.02em}
.posts time{font:400 .74rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.posts li a:hover .post-title{text-decoration:underline;text-decoration-color:var(--peri);text-decoration-thickness:2px;text-underline-offset:.2em}
@media (min-width:600px){.posts li a{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:24px}}
@media (min-width:921px){
  .blog{padding-bottom:var(--sec)}
  .blog-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gap-x);align-items:start}
  .blog .sec-head{margin-bottom:0}
  .posts{border-top:2px solid var(--olive);padding-top:8px}
}

/* ---------- what patients say (lotus/_reviews.php, Otis 2026-10-05) ----------
   The Google reviews chosen on Content > Reviews as a swipe row: one card and a
   peek on a phone, two editorial cards per view from 600px. The base theme's
   reviews.css is never loaded here; reviews.js drives both. No autoplay. */
.reviews{padding:var(--sec) 0;border-top:0;background:var(--paper)}
.lrev-head h2{margin:0}
.lrev-score{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:22px 0 0;font:400 .76rem/1.4 var(--caps);letter-spacing:.18em;text-transform:uppercase;color:var(--olive)}
.lrev-stars{--pct:100%;display:inline-block;width:6.3em;height:1.1em;flex:none;
  background:linear-gradient(90deg,var(--gold) var(--pct),var(--grey) 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}
.lrev .rev-track{display:flex;gap:16px;margin:0;padding:0 0 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lrev .rev-track::-webkit-scrollbar{display:none}
.lrev .rev-track:focus-visible{outline:3px solid var(--peri);outline-offset:6px}
.lrev .rev-track.is-drag{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
.lrev .rev-slide{flex:0 0 86%;min-width:0;scroll-snap-align:start}
.lrev-card{margin:0;height:100%;display:flex;flex-direction:column;gap:18px;padding:22px 22px 24px;background:var(--cream);border-radius:var(--r)}
.lrev-mark{display:block;height:.5em;font:400 4.2rem/1 var(--lede);color:var(--gold)}
.lrev-card blockquote{margin:0}
.lrev-card blockquote p{margin:0;font:italic 400 max(1.15rem,min(4.4vw,1.45rem))/1.45 var(--lede);color:var(--olive);overflow-wrap:anywhere}
.lrev-card blockquote p+p{margin-top:.6em}
.lrev-card figcaption{margin-top:auto;padding-top:16px;border-top:1px solid var(--grey);display:flex;flex-direction:column;gap:6px;font:400 .74rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lrev-who{color:var(--olive)}
.lrev .rev-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 28px;margin-top:32px}
.lrev .rev-nav{display:flex;gap:10px}
.lrev .rev-btn{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:2px solid var(--olive);border-radius:50%;background:#FFFDF8;color:var(--olive);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:var(--btn-sh-lo);transition:background-color .2s,color .2s,opacity .2s}
@media (hover:hover){.lrev .rev-btn:hover:not(:disabled){background:var(--olive);color:var(--cream)}}
.lrev .rev-btn:disabled{opacity:.3;cursor:default}
.lrev .rev-car.is-static .rev-nav{display:none}
.lrev .link-arrow{display:inline-flex;align-items:center;min-height:44px}
@media (prefers-reduced-motion:no-preference){.lrev .rev-track{scroll-behavior:smooth}.lrev .rev-track.is-drag{scroll-behavior:auto}}
@media (min-width:600px){.lrev .rev-track{gap:24px}.lrev .rev-slide{flex-basis:calc((100% - 24px) / 2)}.lrev-card{padding:28px 30px 30px}}
@media (min-width:921px){
  .reviews{padding:var(--sec) 0}
  .lrev .rev-track{gap:40px}
  .lrev .rev-slide{flex-basis:calc((100% - 40px) / 2)}
  .lrev-card{padding:36px 40px 36px}
  .lrev-head .lrev-score{margin-top:28px}
  .lrev .rev-foot{margin-top:40px}
}

/* ---------- visit: the one dark band ---------- */
.visit{background:var(--olive);color:var(--cream);padding:var(--sec) 0}
.visit .eyebrow{color:var(--stone)}
.visit-grid{display:grid;gap:40px}
.visit-addr{display:block;margin-top:28px;font:italic 400 max(1.3rem,min(2.2vw,1.7rem))/1.4 var(--lede);color:var(--cream)}
.visit-transit{margin-top:10px;color:var(--stone)}
.visit .actions{margin-top:36px}
/* one hairline between rows: the list's top rule (base) plus a bottom rule
   per row; the base's per-row top rule is dropped so no rule is doubled */
.visit-facts{margin:0;display:grid;gap:0;border-top:1px solid var(--line-d)}
.visit-facts>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:20px 0;border-top:0;border-bottom:1px solid var(--line-d)}
.visit-facts dt{font:400 .74rem/1.6 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin:0}
.visit-facts dd{margin:0;font-size:1.05rem;line-height:1.55}
.visit-facts dd a{color:var(--cream)}
@media (min-width:921px){
  .visit-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap-x);align-items:start}
  .visit-facts{padding-top:12px}
}

/* ---------- custom text sections (Content > Homepage) ---------- */
.home-text{padding:var(--sec) 0;border-top:0}
.home-text-tint{background:var(--paper)}
.home-text-dark{background:var(--olive);color:var(--cream)}

/* ---------- footer: a masthead's colophon on the page's grid ----------
   Brand and the Google line, the two locations (the second only once it is
   named), the pages, the ways to reach the clinic, the note and the legal
   line. Tightened 2026-10-05 night (Lindsey): the links sit on a 34px pitch
   with a 44px target, the Pages list runs in two columns from 700px, the
   three columns share one row from 600px, every gap is on the scale.
   2026-10-06 (Wren): two Pages columns only where each holds its longest
   label; the brand keeps its own line until 1200px. */
/* bottom 84px: the last line (copyright + badge) clears the floating chat button (52px, 16px up) */
.site-foot{background:var(--cream);color:var(--olive);border-top:2px solid var(--olive);padding:48px 0 calc(84px + env(safe-area-inset-bottom,0px));font-size:1rem}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--grey)}
.foot-kicker{display:flex;align-items:center;gap:14px;margin:0;font:800 max(1.5rem,min(3vw,2.4rem))/1 var(--display);letter-spacing:-.03em}
.foot-mark{height:44px;width:auto}
.foot-cta{margin:0}
.foot-grid{position:relative;display:grid;gap:32px 24px}
.foot-h{display:block;font:400 .74rem/1.4 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.foot-brand{position:relative;display:grid;gap:12px;align-content:start}
.foot-brand .foot-word{height:18px;width:auto;margin:0}
.foot-rating{display:inline-flex;align-items:center;gap:10px;min-height:44px;width:max-content;max-width:100%;color:var(--olive);font:400 .95rem/1.3 var(--ui);text-decoration:none}
/* the row is five star tiles wide (6.3em over a 1.26em tile) at any size, so
   only the type scales here: the old width:5.6em drew 4.4 stars for a 5.0 */
.foot-rating .lrev-stars{font-size:.9em}
.foot-tag{margin:0;font:italic 400 1.05rem/1.45 var(--lede);color:var(--ink-2);max-width:22em}
.foot-loc{display:grid;gap:4px;align-content:start}
.foot-addr{font-style:normal;font-size:1.05rem;line-height:1.6}
.foot-addr a,.foot-loc a{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0;color:var(--olive)}
.foot-loc a[href^="tel:"],.visit-facts dd a[href^="tel:"]{white-space:nowrap}
.foot-hours{margin:6px 0 0;font-size:.98rem;line-height:1.55;color:var(--ink-2)}
.foot-nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;columns:auto;grid-column:auto;grid-row:auto}
.foot-nav .foot-h{margin-bottom:14px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;margin:-5px 0;width:max-content;color:var(--olive);font:400 1rem/1.3 var(--ui);text-decoration:none}
.foot-note{grid-column:1/-1;margin:0;color:var(--ink-2);max-width:40em}
.foot-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--grey);font:400 .74rem/1.5 var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.foot-legal .foot-word{height:16px;width:auto}
.foot-legal-r{display:inline-flex;align-items:center;gap:16px;min-width:0}
/* the second location before it is named (editors only, layout.php): it
   must not take a row the public page does not have. From 1200px it sits in
   the brand column's air under the Google line; narrower, an editor names
   it in Content > Homepage (the slot is hidden there). */
.site-foot:not(.has-loc2) .foot-loc-2{display:none}
@media (min-width:600px){
  .foot-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.6fr);column-gap:32px}
  .foot-brand,.foot-note{grid-column:1/-1}
}
@media (min-width:700px){
  /* two columns only where both hold the longest label on one line
     ("Insurance & coverage", 165px); a narrower column runs as one list */
  .foot-nav:not(.foot-nav-2){display:block;-webkit-columns:10.5em 2;columns:10.5em 2;column-gap:24px}
  .foot-nav:not(.foot-nav-2) .foot-h{column-span:all;margin-bottom:9px}
  /* the same 34px pitch with the overlap below each link: a column break
     drops a top margin, which set the second column 5px low */
  .foot-nav:not(.foot-nav-2) a{display:flex;width:auto;break-inside:avoid;margin:0 0 -10px}
}
@media (min-width:921px){
  /* below 1200 the brand keeps the top line to itself (its Google line is
     295px and ran into the address in a 1024 column), Visit, Pages and
     Elsewhere share the next; with a second location the brand takes the
     top line and the four columns the next */
  .site-foot{padding-top:64px}
  .foot-grid{column-gap:48px;row-gap:32px;align-items:start}
  .site-foot.has-loc2 .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .site-foot.has-loc2 .foot-brand{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
  .site-foot.has-loc2 .foot-loc-1{grid-column:1;grid-row:2}
  .site-foot.has-loc2 .foot-loc-2{grid-column:2;grid-row:2}
  .site-foot.has-loc2 .foot-nav-2{grid-column:3;grid-row:2}
  .site-foot.has-loc2 .foot-nav:not(.foot-nav-2){grid-column:4;grid-row:2}
  .site-foot.has-loc2 .foot-note{grid-column:1/-1}
}
@media (min-width:1200px){
  /* four real columns: the brand column holds the Google line (295px), the
     address column never falls below 220px, so a street line stays a line
     and the phone stays whole; Elsewhere takes only
     its own width so Pages can hold two columns; brand, Visit, Elsewhere and
     Pages share one top line */
  .foot-grid{grid-template-columns:minmax(300px,1.1fr) minmax(220px,1fr) max-content minmax(0,1.5fr)}
  .foot-brand{grid-column:1;grid-row:1}
  .foot-loc-1{grid-column:2;grid-row:1}
  .foot-nav-2{grid-column:3;grid-row:1}
  .foot-nav:not(.foot-nav-2){grid-column:4;grid-row:1}
  .foot-loc-2{grid-column:2;grid-row:2}
  .foot-note{grid-column:2/-1}
  /* the second location before it is named (editors only) sits in the brand column's air */
  .site-foot:not(.has-loc2) .foot-loc-2{display:grid;position:absolute;left:var(--pad);top:120px;width:min(280px,calc(26% - var(--pad)));grid-column:auto;grid-row:auto}
}
@media (min-width:1200px){.foot-grid{column-gap:56px}}

/* ---------- inner pages: the same voice ---------- */
.phead h1{font-size:2.8rem;font-size:max(2.8rem,min(9.5vw,6.4rem));font-size:clamp(2.8rem,9.5vw,6.4rem);line-height:.96;letter-spacing:-.04em;max-width:12em}
.phead-lede,.phead-lede.prose{font:400 1.125rem/1.5 var(--body);font-size:max(1.125rem,min(1.6vw,1.3rem));font-size:clamp(1.125rem,1.6vw,1.3rem);color:var(--olive)} /* Lindsey 10-06: reading text in the sans, upright */
.phead-count{font:400 .74rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase}
.prose,.prose-page,.prose-post{font-size:1.1rem;line-height:1.65;color:var(--ink-2)}
.prose h2{font-weight:800;letter-spacing:-.03em;line-height:1.02}
.prose h3{font-weight:800;letter-spacing:-.025em;line-height:1.1}
.prose h4,.prose h5,.prose h6{font:400 .76rem/1.4 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.prose a{padding-bottom:1px}
.prose ul>li::before{background:var(--gold)}
.prose strong,.prose b{font-weight:700}
/* service body links keep the stitched underline, in brand colour: olive
   words over a faint copper row that draws in solid on hover and focus */
.prose.svc-body a{color:var(--olive);--dot:rgba(197,140,81,.6)}
.svc-head h1{font-size:2.8rem;font-size:max(2.8rem,min(9.5vw,6.4rem));font-size:clamp(2.8rem,9.5vw,6.4rem);line-height:.96;letter-spacing:-.04em}
.svc-photo,.post-hero img,.person-photo,.fig img,.svc-card-photo,.pcard-photo,.scard-photo,.bcard-photo{border-radius:var(--r);background:var(--grey)}
.who-photo{border-radius:var(--r-sm);background:var(--grey)}
.svc-card-title,.pcard-name,.scard-name,.bcard-title,.who-name,.acc-btn,.side-h,.cv-h,.form-card-h,.faq-group-h,.tgroup-h,.peers-head h2,.staff-head h2,.focus h2,.more-svc-h{font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.pcard-cred,.pcard-role,.scard-role,.bcard-cat,.bcard-date,.person-cred,.person-role,.person-pron,.person-lic,.post-meta,.post-by,.filter-label,.tgroup-n,.catlist-n,.who-sub{font-family:var(--caps);letter-spacing:.12em;text-transform:uppercase;font-weight:400}
.chip{font:700 .85rem/1 var(--display);border-radius:999px;border-width:2px}
.chip[aria-current],.chip.on{background:var(--olive);color:var(--cream);border-color:var(--olive)}
.band{background:var(--sage);color:var(--cream);border-radius:0}
.band h2{font-weight:800;letter-spacing:-.03em}
.side-card,.form-card,.card-visit,.acc-item,.fv-step{border-color:var(--grey);border-radius:var(--r)}
.field input,.field textarea,.field select{border-radius:var(--r-sm);border-color:var(--line-strong);font-family:var(--body);font-size:1.05rem}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline-color:var(--peri);border-color:var(--olive)}
.rev,.bcard,.pcard,.scard,.svc-card{border-radius:var(--r)}

/* ---------- FAQ + Careers drop-downs (Bea, 2026-10-05) ----------
   The MycoMuse FAQ style (Eric, 2026-10-05) in the book's own type: rows
   between grey hairlines, the question in DM Sans 500, a thin evergreen plus
   on the far right that becomes a minus, the answer in Alegreya Sans at
   ~65ch. No boxes, discs, rails or fills. Careers chips are the book's Tenor
   caps; its icons are gold drawings. Lotus-only; markup is the base theme's
   (_faq.php, careers.php, career.php). */
.acc{border-top:var(--hair,1px) solid var(--grey)}
.acc-item{border-radius:0;border-bottom:var(--hair,1px) solid var(--grey)}
.acc-btn{color:var(--olive);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.acc-ic::before,.acc-ic::after{background:var(--olive)}
.acc-btn:focus-visible{outline-color:var(--peri)}
.acc-a{font-size:1.04rem;color:var(--ink-2)}
.acc-a a{padding-bottom:1px}
.faq-group-h,.cr-h{font-weight:800;letter-spacing:-.03em;line-height:1}
.cr-jobs .acc-btn{font-size:1.3rem;font-size:max(1.3rem,min(4.6vw,1.6rem));font-size:clamp(1.3rem,4.6vw,1.6rem);font-weight:500;letter-spacing:-.015em}
.job-chips{font:400 .74rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);gap:10px 20px}
.job-chips svg,.job-sched svg{color:var(--gold)}
.job-sum{font:400 1.0625rem/1.5 var(--body);color:var(--olive)}
.job-head .job-sum{font-size:1.125rem;font-size:max(1.125rem,min(1.6vw,1.3rem));font-size:clamp(1.125rem,1.6vw,1.3rem)}
.job-more{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ui);font-weight:400}
.job-back a{font:400 .78rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.cr-empty{border-top:1px solid var(--grey);font:400 1.125rem/1.5 var(--body);color:var(--olive)}
.cr-about{border-top:1px solid var(--grey)}
.cr-photo{border-radius:var(--r);background:var(--grey)}
.cr-hero,.cr-space-ph{border-radius:var(--r);background:var(--grey)}
.cr-space{border-top:1px solid var(--grey)}
.cr-space figcaption{font:400 1rem/1.45 var(--body);color:var(--olive)}
.cr-staff a{padding-bottom:1px}

/* ---------- chat launcher: evergreen, black on hover ---------- */
.mm-chat-launch{background:var(--olive);color:var(--cream)}
.mm-chat-launch:hover{background:#000}

/* ---------- the ways out ---------- */
@media (prefers-reduced-motion:reduce){
  .pill,.btn,.link-arrow{transition:none}
  .hero .w-hl::before{animation:none!important;transform:none}
  .hero-video .hero-vid{transition:none;transform:none}
  .hero-video .hero-still{transform:none}
  .hero h1 .hl{transition:none}
  .stitch,.prose a,.acc-a a,.svc-faq-more a,.cr-staff a,.job-more,.visit-facts dd a,.clinic-text a,.ethos a,.foot-loc a,.foot-nav a,.foot-note a,.foot-tag a,.foot-rating>span:last-child{transition:none}
  .clinic-band .clinic-photo img{transform:none!important}
}
@media print{
  .site-head,.hero-find,.head-find,.mm-chat-launch,.mm-chat-panel,.adminbar,.hero-vid,.hero-vbtn,.hero-lines-edit{display:none!important}
  .hero{min-height:0;color:var(--olive);background:none}
  .hero-media,.hero-scrim{display:none}
  .hero h1 .hl{visibility:visible;opacity:1;position:static}
  .hero .w-hl::before{animation:none!important;transform:none}
}

/* aspect-ratio arrived in Safari 15: lotus's own frame shapes over the base
   fallbacks in style.css. Skipped where aspect-ratio works. */
@supports not (aspect-ratio:1/1){
  .group-photo::before{padding-top:75%}
  .clinic-photo::before{display:none}
  .clinic-old::before{content:"";display:block;padding-top:62.5%}
  @media (min-width:921px){.clinic-old::before{display:none}}
}