/* Practice template base layout. A look sets the tokens in look.css; the palette block is appended by render.mjs. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
html:focus-within{scroll-behavior:smooth} /* smooth for in-page links only; script scrolls stay instant (R6) */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body,1.0625rem)/1.65 var(--f-body);font-feature-settings:"kern";text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
picture{display:contents} /* the LCP image may sit in a picture (phone source, render.mjs img()); the img keeps its slot styles */
a{color:var(--link,var(--accent-deep))}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus,var(--accent));outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);font-weight:var(--fw-display,600);line-height:1.12;letter-spacing:var(--ls-display,-0.015em);text-wrap:balance;margin:0 0 .5em;color:var(--heading,var(--ink))}
h1{font-size:clamp(2.2rem,4.6vw,var(--h1-max,4.25rem))}
h2{font-size:clamp(1.7rem,3vw,2.6rem)}
h3{font-size:1.2rem;line-height:1.3}
h4{font-family:var(--f-display);font-weight:var(--fw-display,600);font-size:1.1rem;line-height:1.3;margin:0 0 .5em;color:var(--heading,var(--ink))} /* grouped card titles (R7, R9) */
p{margin:0 0 1em}
ul,ol{padding-left:1.2em}
address{font-style:normal}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:6px}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2.5rem,1180px);margin-inline:auto}
.narrow{max-width:760px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75rem 1.4rem;border-radius:var(--radius-btn,999px);font:600 1rem/1.1 var(--f-body);text-decoration:none;border:2px solid transparent;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background-color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgb(0 0 0 / .35)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--ghost{border-color:currentColor;color:var(--ink);background:transparent}
.btn--light{background:var(--cta-btn,var(--bg));color:var(--cta-btn-ink,var(--ink))}
.btn--ghost-light{border-color:currentColor;color:var(--cta-ink)}
.btn--small{min-height:44px;padding:.55rem 1.1rem;font-size:.92rem}
.link-arrow{display:inline-block;font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px} /* inline-block: the box takes the line height, 24px or more (WCAG 2.5.8) */
.link-arrow::after{content:" \2192";display:inline-block;transition:transform .2s}
.link-arrow:hover::after{transform:translateX(4px)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.site-header__row{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand__mark{height:2.6rem;width:auto}
.brand__name{font:var(--fw-brand,700) 1.15rem/1.1 var(--f-display);letter-spacing:-.01em}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav__list{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0;align-items:center}
.nav__list a,.nav__group summary{font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;padding:.5rem 0}
.nav__list a[aria-current=page]{box-shadow:inset 0 -2px var(--accent)}
.nav__group{position:relative}
.nav__group summary{list-style:none}
.nav__group summary::-webkit-details-marker{display:none}
.nav__group summary::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.45em;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-.2em) rotate(45deg)}
.nav__group ul{position:absolute;top:calc(100% + .6rem);left:-1rem;min-width:15rem;list-style:none;margin:0;padding:.6rem;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -20px rgb(0 0 0 / .35)}
.nav__group ul a{display:block;padding:.55rem .7rem;border-radius:8px}
.nav__group ul a:hover{background:var(--alt)}
.nav__actions{display:flex;align-items:center;gap:1rem}
.nav__phone{font-weight:700;font-size:.92rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-call{display:none} /* R15: one-tap call on phones, outside the collapsed nav */
.nav-toggle{display:none;background:none;border:0;width:48px;height:48px;padding:12px;cursor:pointer;color:var(--ink)}
.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s;content:"";position:relative}
.nav-toggle__bars::before{position:absolute;top:-7px}
.nav-toggle__bars::after{position:absolute;top:7px}
.nav-open .nav-toggle__bars{background:transparent}
.nav-open .nav-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:980px){
  .nav-toggle{display:block}
  .nav-call{display:inline-flex;align-items:center;min-height:48px;padding:0 1rem;border-radius:var(--radius-btn,999px);background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap}
  .site-header__row{gap:.75rem}
  .nav{position:fixed;inset:4.5rem 0 auto 0;max-height:calc(100dvh - 4.5rem);overflow:auto;flex-direction:column;align-items:stretch;gap:1rem;padding:1.25rem 1.25rem 2rem;background:var(--bg);border-bottom:1px solid var(--line);transform:translateY(-110%);visibility:hidden;transition:transform .3s ease,visibility 0s .3s}
  .nav-open .nav{transform:none;visibility:visible;transition:transform .3s ease}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list a,.nav__group summary{display:block;font-size:1.05rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
  .nav__group ul{position:static;box-shadow:none;border:0;padding:0 0 0 1rem;background:none}
  .nav__actions{flex-direction:column;align-items:stretch}
  .nav__phone{font-size:1.1rem;padding:.5rem 0}
}

/* section tones and seam blending: each section washes in from the previous tone */
[data-tone=base]{--tone:var(--tone-base)}
[data-tone=alt]{--tone:var(--tone-alt)}
[data-tone=photo]{--tone:var(--tone-photo)}
[data-tone=accent]{--tone:var(--tone-accent)}
[data-tone=ink]{--tone:var(--tone-ink)}
.sec{position:relative;padding:clamp(4.5rem,9vw,7.5rem) 0;background:linear-gradient(to bottom,var(--prev,var(--tone)) 0,var(--tone) 170px)}
.sec__h{max-width:22ch}
.sec__more{margin-top:2rem}

/* hero: one markup, three archetypes chosen by the look (body.hero-split | hero-band | hero-type) */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--tone-hero);color:var(--hero-ink,var(--ink))}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:"";position:absolute;inset:0;background:var(--hero-scrim)}
.hero__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;min-height:min(84vh,760px);padding-block:clamp(3rem,7vw,6rem)}
.hero__h1{max-width:16ch;color:var(--hero-heading,inherit)}
.hero__lead{font-size:clamp(1.08rem,1.4vw,1.25rem);max-width:46ch;margin-bottom:1.75rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero .btn--ghost{color:var(--hero-ink,var(--ink))}
.hero__doc{margin:0;justify-self:end;width:min(100%,420px)}
.hero__doc img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-photo,18px)}
.hero__doc figcaption{display:flex;flex-direction:column;margin-top:.9rem}
.hero__docname{font:600 1.1rem/1.3 var(--f-display)}
.hero__docrole{font-size:.92rem;opacity:.8}
.hero__docline{font-weight:600}
.proof-chip{display:inline-flex;align-items:center;gap:.5rem;margin:1.5rem 0 0;font-size:.95rem;font-weight:600}
.proof-chip a{color:inherit}
.stars{color:var(--star,#f2b01e);letter-spacing:.08em}
@media (max-width:860px){
  .hero__inner{grid-template-columns:1fr;min-height:0}
  .hero__doc{justify-self:start;display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:center;width:100%;order:-1}
  .hero__doc img{aspect-ratio:1;border-radius:50%}
  .hero__doc figcaption{margin:0}
}

/* cards, points, steps, quotes */
.cards{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.1rem}
.card{position:relative;padding:1.6rem 1.5rem 1.4rem;background:var(--card,var(--bg));border:1px solid var(--line);border-radius:var(--radius-card,16px);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.card p{margin:0;color:var(--muted)}
.card__h{font-size:1.15rem}
.card--link .card__h a{text-decoration:none;color:inherit}
.card--link .card__h a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card--link:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgb(0 0 0 / .45)}
.card--link:hover .card__h a{text-decoration:underline;text-decoration-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.card--link:hover{transform:none}}
/* tap targets: standalone links are at least 24px tall (WCAG 2.5.8 AA) */
.brand,.card__h a,.site-footer a,.aside__nav a,.crumbs a{display:inline-flex;align-items:center;min-height:24px}
.points{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem}
.point h3{font-size:1.25rem}
.steps{list-style:none;padding:0;margin:2.5rem 0 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.step{padding:1.5rem;border-radius:var(--radius-card,16px);background:var(--card,var(--bg));border:1px solid var(--line);border-top:4px solid var(--accent)}
.step p{margin:0;color:var(--muted)}
.steps--page{grid-template-columns:1fr;margin:1.2rem 0 2rem}
.ins{color:var(--muted);max-width:70ch}
.quotes{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.quote{margin:0;padding:1.75rem;background:var(--card,var(--bg));border-radius:var(--radius-card,16px);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
.quote blockquote{margin:0 0 1.2rem;font-size:1.05rem}
.quote blockquote p{margin:0}
.quote__by{margin:0;font-weight:700;display:flex;flex-direction:column}
.quote__by span{font-weight:400;font-size:.88rem;color:var(--muted)}

/* split feature (doctor) */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-photo,18px)}
.pull{margin:0 0 1.5rem;padding:0;font:var(--fw-quote,500) clamp(1.3rem,2.2vw,1.7rem)/1.35 var(--f-display);color:var(--heading,var(--ink))}
.pull p{margin:0}
.pull p::before{content:"\201C"}
.pull p::after{content:"\201D"}
.minidocs__h{margin:1.5rem 0 .5rem;font-weight:700}
.minidocs__h + .minidocs{margin-top:0}
.minidocs{list-style:none;padding:0;margin:1.5rem 0;display:flex;flex-wrap:wrap;gap:1rem}
.minidocs li{display:flex;align-items:center;gap:.6rem;font-weight:600}
.minidocs img{width:48px;height:48px;border-radius:50%;object-fit:cover}
@media (max-width:860px){.split{grid-template-columns:1fr}.split__media img{aspect-ratio:4/3}}

/* full-bleed photo band (highlights) */
.sec--highlights{color:var(--on-photo,#fff);background:var(--tone-photo);overflow:hidden;isolation:isolate}
.photo-band{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center}
/* band photo by viewport width and pixel ratio: render.mjs bg() sets --bg<d><k>-background-image (pixel-ratio group d: 1x, 1.25dppx, 2.25dppx;
   step k by viewport width), each sized to the look's band width at the top of that step, so a device fetches about what it shows */
.photo-band{background-image:var(--bg15-background-image)}
html.bands-lazy .photo-band:not(.bg-on){background-image:none!important} /* until site.js sees the band near the viewport */
@media (max-width:1600px){.photo-band{background-image:var(--bg14-background-image)}}
@media (max-width:1280px){.photo-band{background-image:var(--bg13-background-image)}}
@media (max-width:1024px){.photo-band{background-image:var(--bg12-background-image)}}
@media (max-width:640px){.photo-band{background-image:var(--bg11-background-image)}}
@media (min-resolution:1.25dppx){.photo-band{background-image:var(--bg27-background-image)}}
@media (min-resolution:1.25dppx) and (max-width:1440px){.photo-band{background-image:var(--bg26-background-image)}}
@media (min-resolution:1.25dppx) and (max-width:1024px){.photo-band{background-image:var(--bg25-background-image)}}
@media (min-resolution:1.25dppx) and (max-width:800px){.photo-band{background-image:var(--bg24-background-image)}}
@media (min-resolution:1.25dppx) and (max-width:640px){.photo-band{background-image:var(--bg23-background-image)}}
@media (min-resolution:1.25dppx) and (max-width:512px){.photo-band{background-image:var(--bg22-background-image)}}
@media (min-resolution:1.25dppx) and (max-width:320px){.photo-band{background-image:var(--bg21-background-image)}}
@media (min-resolution:2.25dppx){.photo-band{background-image:var(--bg37-background-image)}}
@media (min-resolution:2.25dppx) and (max-width:960px){.photo-band{background-image:var(--bg36-background-image)}}
@media (min-resolution:2.25dppx) and (max-width:683px){.photo-band{background-image:var(--bg35-background-image)}}
@media (min-resolution:2.25dppx) and (max-width:533px){.photo-band{background-image:var(--bg34-background-image)}}
@media (min-resolution:2.25dppx) and (max-width:426px){.photo-band{background-image:var(--bg33-background-image)}}
@media (min-resolution:2.25dppx) and (max-width:341px){.photo-band{background-image:var(--bg32-background-image)}}
@media (min-resolution:2.25dppx) and (max-width:213px){.photo-band{background-image:var(--bg31-background-image)}}
.photo-band::after{content:"";position:absolute;inset:0;background:var(--photo-scrim)}
.sec--highlights .sec__h,.sec--highlights h3{color:inherit}
.sec--highlights p{color:inherit;opacity:1}
/* WCAG 1.4.3 (SMP-3): on narrow screens every line runs across the light end of a left-to-right look scrim, so a floor of
   the band's own tone sits under the look scrim (::before paints above the photo and below ::after) */
@media (max-width:700px){.sec--highlights .photo-band::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--tone-photo) 45%,transparent)}}
/* atelier and kit show the band as a clear photo with no text on it (their ::after scrim is off), so no floor there */
.look-atelier .sec--highlights .photo-band::before,.look-kit .sec--highlights .photo-band::before{display:none}
.sec--highlights + .sec{--prev:var(--tone-photo)}

/* visit */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.visit__addr{font-size:1.2rem;font-weight:600;margin-bottom:1rem}
.visit__links{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 1.75rem}
.visit__media{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.visit__media img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-photo,18px)}
.visit__media img:first-child{grid-column:1/-1;aspect-ratio:16/10}
.hours{border-collapse:collapse;width:100%;max-width:420px}
.hours th,.hours td{padding:.55rem 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.hours th{font-weight:600}
.hours td{text-align:right}
.hours--compact th,.hours--compact td{padding:.3rem 0;font-size:.92rem}
.hours__note{color:var(--muted);font-size:.95rem;margin-top:.8rem}
@media (max-width:860px){.visit{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:2rem;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font:400 1.6rem/1 var(--f-body);color:var(--accent-deep);transition:transform .25s}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__q{margin:0;font:600 1.1rem/1.35 var(--f-body);color:var(--ink)}
.faq__a{padding:0 0 1.25rem;max-width:68ch;color:var(--muted)}
.faq__a p:last-child{margin:0}
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    :root{interpolate-size:allow-keywords}
    .faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
    .faq__item[open]::details-content{block-size:auto}
  }
}

/* cta */
.sec--cta{color:var(--cta-ink)}
.sec--cta .sec__h{color:inherit;margin-inline:auto}
.cta{text-align:center}
.cta p{max-width:52ch;margin:0 auto 1.75rem;font-size:1.1rem}
.cta .hero__actions{justify-content:center}

/* inner pages */
.page-head{--prev:var(--tone-base);--tone:var(--tone-alt);padding:1rem 0 clamp(2.5rem,5vw,4rem)}
.page-head__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:3rem;align-items:center}
.page-head__row:has(> :only-child){grid-template-columns:1fr}
.page-head h1{max-width:20ch;margin-top:1rem}
.page-head__lead{font-size:1.15rem;max-width:60ch;color:var(--muted);margin:0}
.page-head__media img{border-radius:var(--radius-photo,18px);aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:860px){.page-head__row{grid-template-columns:1fr}}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;font-size:.85rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.4rem}
.crumbs a{color:var(--muted)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,5vw,4.5rem);padding-block:clamp(3rem,6vw,5rem);align-items:start}
@media (max-width:900px){.article-grid{grid-template-columns:1fr}}
.prose{max-width:70ch}
.prose h2{margin-top:2.2em;font-size:clamp(1.5rem,2.4vw,2rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.6em}
.prose li{margin-bottom:.4em}
.aside{position:sticky;top:6rem;display:grid;gap:1.25rem}
.aside__card{padding:1.5rem;border-radius:var(--radius-card,16px);background:var(--alt);display:grid;gap:.75rem}
.aside__card p{margin:0}
.aside__h{font:600 1.1rem/1.3 var(--f-display)}
.aside__nav ul{list-style:none;padding:0;margin:.5rem 0 0}
.aside__nav li{border-bottom:1px solid var(--line)}
.aside__nav a{display:block;padding:.6rem 0;text-decoration:none;color:var(--ink)}
.aside .proof-chip{margin:0}
.reviewed{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.pills{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.pills li{padding:.35rem .8rem;border-radius:999px;background:var(--alt);font-size:.92rem}
.doc{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,4rem);padding-block:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line);align-items:start}
.doc__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-photo,18px);position:sticky;top:6rem}
.doc__role{color:var(--muted);font-weight:600}
@media (max-width:860px){.doc{grid-template-columns:1fr}}
.team{padding-block:3rem 5rem}
.team__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem}
.team__list img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-photo,18px);margin-bottom:.6rem}
.team__name{font-weight:700;margin:0}.team__role{margin:0;color:var(--muted)}
.posts{list-style:none;padding:3rem 0 5rem;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}
.post-card img{border-radius:var(--radius-photo,18px);aspect-ratio:16/10;object-fit:cover;margin-bottom:1rem}
.post-card h2{font-size:1.35rem}.post-card h2 a{color:inherit;text-decoration:none}
.post-meta{color:var(--muted);font-size:.92rem}
.inner main > .wrap.narrow{padding-block:2.5rem 5rem}

/* footer */
.site-footer{background:var(--tone-ink);color:var(--on-ink);padding:4.5rem 0 2rem;font-size:.95rem}
.site-footer a{color:inherit}
.site-footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:3rem}
.site-footer__name{font:600 1.3rem/1.2 var(--f-display);margin-bottom:.4rem}
.site-footer__tag{opacity:.8}
.site-footer__h{font:inherit;font-weight:700;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;text-transform:inherit;text-wrap:inherit;color:inherit;max-width:none;margin:0 0 .6rem} /* an h2 since SMP-29, set like the body text it was */
.site-footer .hours th,.site-footer .hours td{border-color:rgb(255 255 255 / .14)}
.site-footer__links,.site-footer__social,.site-footer__legal ul{list-style:none;padding:0;margin:0}
.site-footer__links li{padding:.2rem 0}
.site-footer__social{display:flex;gap:1rem;margin-top:1rem}
.site-footer__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgb(255 255 255 / .14);font-size:.88rem;opacity:.85}
.site-footer__legal p{margin:0}.site-footer__legal ul{display:flex;gap:1.25rem}
@media (max-width:860px){.site-footer__grid{grid-template-columns:1fr}}

/* motion: scroll-driven reveals, CSS only, off for reduced motion and in browsers without support */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:reveal-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .reveal-group .reveal:nth-child(3n+2){animation-range:entry 8% entry 63%}
    .reveal-group .reveal:nth-child(3n+3){animation-range:entry 16% entry 71%}
  }
}
@keyframes reveal-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.preview-bar{margin:0;padding:.45rem 1.25rem;background:var(--ink);color:var(--bg);font-size:.82rem;text-align:center}
.crisis-bar a{color:inherit;font-weight:700;text-underline-offset:.2em;display:inline-flex;align-items:center;min-height:24px} /* R10 */

/* seams: a dark photo layer fades into its OWN solid tone; the next section then ramps from that tone (render.mjs passes --prev) */
.sec,.page-head{background-image:linear-gradient(in oklab to bottom,var(--prev,var(--tone)) 0,var(--tone) 170px)}
/* WCAG 1.4.3 (SMP-31): the seam ends within the section's top padding, so the first heading sits on the section's own tone */
.sec{background-image:linear-gradient(in oklab to bottom,var(--prev,var(--tone)) 0,var(--tone) min(170px,clamp(4.5rem,9vw,7.5rem)))}
.hero{background:var(--tone-hero)}
body:not(.hero-split) .hero__bg{-webkit-mask-image:linear-gradient(#000 calc(100% - 150px),transparent);mask-image:linear-gradient(#000 calc(100% - 150px),transparent)}
body:not(.hero-split) .hero__inner{padding-bottom:clamp(5rem,9vw,8rem)}
.sec--highlights{padding-block:max(12.5rem,14vw);background:linear-gradient(in oklab to bottom,var(--prev) 0,var(--tone-photo) 170px,var(--tone-photo))}
.sec--highlights .photo-band{-webkit-mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 170px),transparent);mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 170px),transparent)}
.photo-band--cta{display:none}
.sec--cta{position:relative;isolation:isolate;overflow:hidden}
.cta-photo .sec--cta{padding-top:clamp(10rem,13vw,11rem)}
.cta-photo .photo-band--cta{display:block;-webkit-mask-image:linear-gradient(transparent 120px,#000 300px);mask-image:linear-gradient(transparent 120px,#000 300px)}
.cta-photo .photo-band--cta::after{content:"";position:absolute;inset:0;background:var(--cta-scrim)}
.site-footer{background:linear-gradient(in oklab to bottom,var(--tone-accent) 0,var(--tone-ink) 170px)}
/* inner pages end on the page tone, so the footer and the page head blend from it (R6) */
body.inner .site-footer{background:linear-gradient(in oklab to bottom,var(--tone-base) 0,var(--tone-ink) 170px);padding-top:calc(170px + 2rem)}
.page-head{background-image:linear-gradient(in oklab to bottom,var(--tone-base) 0,var(--tone-alt) 170px,var(--tone-alt) calc(100% - 150px),var(--tone-base) 100%)}
.cards{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.visit:not(:has(.visit__media)){grid-template-columns:1fr}
.reveal.in{animation:none} /* screenshot renderers add .in to show every reveal (R6) */
.faq__item .faq__q{margin:0} /* beats .prose h3 on service and new patient pages (R13) */
/* photo slots (2026-10-07): service tile photo, homepage section photo, service page section photo. Fixed ratio, so no layout shift. */
.card__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--radius-card,16px) * .6);margin:0 0 1rem;grid-column:1/-1}
.sec__media{margin:2rem 0 0}
.sec__media img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius-photo,18px)}
.narrow .sec__media img{aspect-ratio:16/9}
.prose__media{margin:0 0 1.25rem}
.prose__media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-photo,18px)}
/* 400 percent zoom and short landscape screens (WCAG 1.4.10, SMP-26): the sticky header would take a third of the view */
@media (max-height:500px){.site-header{position:static}}

/* hero layouts (look.json hero_layout) and zigzag sections (look.json sections).
   Absent fields add no body class, so none of this applies. A look with hero_layout_own keeps its own hero (class hero-layout-own). copy-left is today's markup and styling.
   Look css loads after this file and art-directs each hero, so these rules raise specificity and use !important.
   A look that wants its own art direction for a layout sets hero_layout_own: true, or overrides with !important and a
   higher specificity (for example body.look-x.hero-layout-center .hero__doc). */
@media (min-width:861px){
  /* copy-right: mirror the whole hero (art direction included), then un-mirror each leaf so text and faces read normally */
  body:not(.hero-layout-own).hero-layout-copy-right .hero{scale:-1 1}
  /* each leaf sits at the visual left of the mirrored copy column, so a narrow lead lines up under the H1 */
  body:not(.hero-layout-own).hero-layout-copy-right .hero__copy>*{margin-left:auto!important;margin-right:0!important}
  body:not(.hero-layout-own).hero-layout-copy-right .hero :is(.hero__kicker,.hero__h1,.hero__lead,.hero__docline,.hero__actions,.proof-chip,.hero__doc img,.hero__bg img,.hero__doc figcaption,.hero__doc .sig){scale:-1 1!important}
}

/* center, overlay, photo-top: shared reset of the look's hero art direction */
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero{display:block!important;background:var(--tone-hero)!important;background-image:none!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero::before{display:none!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero::after{display:none!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__bg{display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;clip-path:none!important;-webkit-mask:none!important;mask:none!important;filter:none!important;animation:none!important;transform:none!important;z-index:-1!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__bg img{width:100%!important;height:100%!important;object-fit:cover;border-radius:0!important;padding:0!important;clip-path:none!important;-webkit-mask:none!important;mask:none!important;animation:none!important;transform:none!important;scale:1!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__bg::after{display:block!important;content:"";position:absolute;inset:0}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__inner{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;align-items:center!important;padding-block:clamp(3rem,7vw,6rem)!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__copy{display:block!important;grid-column:auto!important;grid-row:auto!important;background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important;animation:none!important;transform:none!important;max-width:none!important;margin:0!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc{position:relative!important;inset:auto!important;grid-column:auto!important;grid-row:auto!important;transform:none!important;animation:none!important;margin:0!important;width:auto!important;height:auto!important;display:grid!important;grid-template-columns:60px minmax(0,1fr)!important;gap:.85rem;align-items:center;text-align:left!important;justify-self:start!important;align-self:auto!important;order:0!important;padding:.55rem 1.2rem .55rem .55rem!important;border-radius:999px!important;overflow:hidden!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc::before{display:none!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc img{width:60px!important;height:60px!important;aspect-ratio:1!important;border-radius:50%!important;object-fit:cover;object-position:50% 20%;padding:0!important;box-shadow:none!important;outline:0!important;position:static!important;animation:none!important;transform:none!important;scale:1!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc figcaption{position:static!important;inset:auto!important;width:auto!important;margin:0!important;align-items:flex-start!important;text-align:left!important;transform:none!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__actions{margin:0}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__h1{margin-bottom:1rem!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc img{min-height:0!important;max-height:60px!important;min-width:0!important;max-width:60px!important;align-self:center!important;margin:0!important;display:block!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc figcaption{background:none!important;box-shadow:none!important;padding:0!important;border:0!important;color:inherit}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc img{grid-column:1!important;grid-row:1!important;border:0!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc figcaption{grid-column:2!important;grid-row:1!important;max-width:none!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc::after,body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__bg::before,body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc .sig{display:none!important}

/* light layouts (center, overlay, photo-top): the hero is a light palette tint, text uses the page ink.
   --tone-hero is reset on body so the first section's seam ramps from the same light tone. */
body:not(.hero-layout-own):not(.inner):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top){--tone-hero:color-mix(in oklab,var(--accent) 11%,var(--bg))}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero{--hero-ink:var(--ink);--hero-heading:var(--heading,var(--ink));color:var(--ink)!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__h1{color:var(--heading,var(--ink))!important;text-shadow:none!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) :is(.hero__lead,.hero__docline,.proof-chip,.proof-chip a,.hero__docname,.hero__docrole,.hero .btn--ghost){color:var(--ink)!important;text-shadow:none!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__lead{opacity:1!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero .btn--ghost{background:transparent!important}
body:not(.hero-layout-own):not(.hero-quiet):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero .btn--ghost{border-color:currentColor!important} /* hearth family keeps its underlined text link */
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero .stars{color:var(--star,var(--accent-deep))!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__doc{background:var(--card,var(--bg))!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:0 16px 36px -24px rgb(0 0 0 / .5)!important}

/* center: text centered on a quiet light field (palette aurora plus a fine dot grid), doctor chip under the actions,
   the practice photo as a wide band below the copy */
body:not(.hero-layout-own).hero-layout-center .hero{display:flex!important;flex-direction:column}
body:not(.hero-layout-own).hero-layout-center .hero::before{display:block!important;content:""!important;position:absolute!important;inset:-12%!important;z-index:-1!important;pointer-events:none;opacity:1!important;filter:none!important;-webkit-mask:none!important;mask:none!important;
  background:
    radial-gradient(36% 44% at 20% 28%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%),
    radial-gradient(32% 40% at 82% 24%,color-mix(in srgb,var(--ring,var(--accent-deep)) 20%,transparent),transparent 70%),
    radial-gradient(46% 38% at 52% 70%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 72%)!important;
  animation:layout-aurora 38s ease-in-out infinite alternate!important}
@keyframes layout-aurora{from{transform:translate3d(-2%,1%,0)}to{transform:translate3d(2%,-1%,0) scale(1.05)}}
@media (prefers-reduced-motion:reduce){body:not(.hero-layout-own).hero-layout-center .hero::before{animation:none!important}}
body:not(.hero-layout-own).hero-layout-center .hero::after{display:block!important;content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none;opacity:1!important;
  background:radial-gradient(color-mix(in srgb,var(--ink) 10%,transparent) 1px,transparent 1.4px) 0 0/22px 22px!important;
  -webkit-mask:radial-gradient(70% 60% at 50% 38%,#000,transparent 85%)!important;mask:radial-gradient(70% 60% at 50% 38%,#000,transparent 85%)!important}
body:not(.hero-layout-own).hero-layout-center .hero__inner{order:1;justify-items:center;align-content:center;text-align:center;gap:1.75rem;min-height:0!important;padding-block:clamp(4rem,9vw,7.5rem) clamp(2.5rem,5vw,3.75rem)!important}
body:not(.hero-layout-own).hero-layout-center .hero__copy{max-width:52rem!important}
body:not(.hero-layout-own).hero-layout-center .hero__h1{max-width:18ch!important;margin-inline:auto!important}
body:not(.hero-layout-own).hero-layout-center .hero__lead{max-width:48ch!important;margin-inline:auto!important;margin-bottom:2rem!important}
body:not(.hero-layout-own).hero-layout-center :is(.hero__actions,.proof-chip){justify-content:center}
body:not(.hero-layout-own).hero-layout-center .hero__doc{justify-self:center!important}
body:not(.hero-layout-own).hero-layout-center .hero__bg{order:2;position:relative!important;inset:auto!important;z-index:0!important;width:min(100% - 2.5rem,1180px)!important;aspect-ratio:21/8!important;margin:0 auto clamp(3.5rem,7vw,6rem)!important;border-radius:var(--radius-photo,18px)!important;overflow:hidden!important;box-shadow:0 30px 60px -40px rgb(0 0 0 / .45)!important}
body:not(.hero-layout-own).hero-layout-center .hero__bg::after{display:none!important}

/* overlay: full-bleed photo, copy bottom-left on a light tinted panel, doctor as a small light card bottom-right */
body:not(.hero-layout-own).hero-layout-overlay .hero__bg{-webkit-mask:linear-gradient(#000 calc(100% - 150px),transparent)!important;mask:linear-gradient(#000 calc(100% - 150px),transparent)!important}
body:not(.hero-layout-own).hero-layout-overlay .hero__bg::after{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 30%,transparent) 0,transparent 60%)}
body:not(.hero-layout-own).hero-layout-overlay .hero__inner{grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;min-height:min(88vh,800px);column-gap:2rem}
body:not(.hero-layout-own).hero-layout-overlay .hero__copy{background:color-mix(in oklab,color-mix(in oklab,var(--accent) 7%,var(--card,var(--bg))) 95%,transparent)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:clamp(1.5rem,3vw,2.6rem)!important;border-radius:var(--radius-card,16px)!important;border-top:4px solid var(--accent)!important;max-width:40rem!important;box-shadow:0 30px 60px -36px rgb(0 0 0 / .45)!important}
body:not(.hero-layout-own).hero-layout-overlay .hero__doc{justify-self:end!important;align-self:end!important;max-width:19rem;border-radius:var(--radius-card,16px)!important}
body:not(.hero-layout-own).hero-layout-overlay .hero__doc img{border-radius:12px!important}

/* photo-top: photo across the top, then the headline left and lead plus actions right, on the light tint */
body:not(.hero-layout-own).hero-layout-photo-top .hero__bg{position:relative!important;inset:auto!important;height:clamp(240px,40vh,420px)!important;z-index:0!important}
body:not(.hero-layout-own).hero-layout-photo-top .hero__bg::after{display:none!important}
body:not(.hero-layout-own).hero-layout-photo-top .hero__inner{padding-block:0 clamp(3rem,6vw,5rem)!important;min-height:0!important;align-items:start!important;gap:0!important}
body:not(.hero-layout-own).hero-layout-photo-top .hero__doc{grid-row:1!important;margin-top:-2.4rem!important;z-index:2}
body:not(.hero-layout-own).hero-layout-photo-top .hero__copy{grid-row:2!important;display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-top:2.25rem!important}
body:not(.hero-layout-own).hero-layout-photo-top .hero__copy>:is(.hero__kicker,.hero__h1){grid-column:1}
body:not(.hero-layout-own).hero-layout-photo-top .hero__h1{grid-row:span 6;max-width:14ch}
body:not(.hero-layout-own).hero-layout-photo-top .hero__copy>:not(.hero__h1,.hero__kicker){grid-column:2}
@media (max-width:860px){
  body:not(.hero-layout-own).hero-layout-photo-top .hero__bg{height:34vh!important;min-height:220px}
  body:not(.hero-layout-own).hero-layout-photo-top .hero__copy{display:block!important}
  body:not(.hero-layout-own).hero-layout-overlay .hero__inner{grid-template-columns:minmax(0,1fr)!important;row-gap:1rem;padding-top:34vh!important}
  body:not(.hero-layout-own).hero-layout-overlay .hero__doc{justify-self:start!important}
  body:not(.hero-layout-own).hero-layout-center .hero__inner{padding-block:3rem 2rem!important}
  body:not(.hero-layout-own).hero-layout-center .hero__bg{aspect-ratio:4/3!important;margin-bottom:3rem!important}
}

/* hero extras (content.json home.kicker, home.h1_accent, home.eyebrows); looks restyle them */
.hero__kicker{margin:0 0 1rem;font:700 .82rem/1.35 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--hero-ink,var(--ink))}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__kicker{color:color-mix(in oklab,var(--accent-deep) 78%,var(--ink))!important} /* small text over the aurora: a little darker than accent-deep keeps AA */
.hero__accent{font-style:inherit;color:var(--hero-accent,inherit)}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hero__accent{color:var(--accent-deep)}
.sec__eyebrow{margin:0 0 .85rem;font:700 .8rem/1.35 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:inherit}

/* zigzag: hero media side, then the doctor split opposite, then the visit media opposite again.
   Hero media is right for copy-left (and absent), left for copy-right, none for center, overlay, photo-top. */
@media (min-width:861px){
  body.sections-zigzag .sec--doctor .split{direction:ltr!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important}
  body.sections-zigzag .sec--doctor .split__media{order:0!important}
  body.sections-zigzag .sec--doctor .split__copy{order:1!important}
  body.sections-zigzag:is(.hero-layout-copy-right,.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .sec--doctor .split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important}
  body.sections-zigzag:is(.hero-layout-copy-right,.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .sec--doctor .split__media{order:2!important}
  body.sections-zigzag:is(.hero-layout-copy-right,.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .sec--visit .visit__media{order:-1}
}

/* Colors pill clearance (2026-10-23): the demo palette switcher (.psw, render.mjs) is fixed 8px under the header and 40px tall,
   so the first hero content must start 56px or more below the header or the pill sits on the H1, kicker or doctor card.
   Keyed on body.has-psw (render.mjs sets it when meta.palette_switcher is on; it was :has(.psw), which only matched after the script
   inserted the pill and shifted the hero on slow loads, perf PERF-4) so a client site without the switcher keeps its own spacing. Left alone because they already clear it
   or are full-bleed art: overlay heroes (copy sits ~34vh down), crest (large top space) and atelier (the doctor photo runs
   flush under the header and the pill floats on the photo; folio extends atelier but has its own 48px top space, so it gets the 60px). Kit is an overlay look whose
   card sits at the top, so it is added back. */
@media (max-width:860px){
  body.has-psw:not(.hero-layout-overlay,.look-crest,.hero-portrait.hero-layout-copy-left:not(.look-folio)) .hero__inner,body.has-psw.look-kit .hero__inner{padding-top:3.75rem!important}
  /* atelier's small inset print sits 1rem from the top of the photo, right where the pill floats: drop it below the pill */
  body.has-psw.hero-portrait.hero-layout-copy-left .hero__bg{top:3.75rem}
}
/* inner pages: the breadcrumb row plus 1rem put the H1 line 7 to 8px under the pill; 8px more top padding clears 8px */
@media (max-width:860px){
  body.inner.has-psw .page-head{padding-top:1.5rem}
}
/* sample bar link to the gallery (2026-10-29) */
.preview-bar a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* Look: Hearth. Base design system "quiet": no full-bleed photo. A grain-textured fog field, a large
   Literata H1, a small round portrait with a hand-drawn ring, and room to breathe.
   Effects (effects-library ids): word-by-word-baseline-rise-3d (animejs, hero lead line, not the H1),
   svg-fractal-noise-grain-texture-overlay (css-only), svg-line-draw-self-drawing-then-dim (js-light,
   the portrait ring), layered-scroll-parallax-depth (CSS scroll timeline on the canopy band).
   Reduced motion: words at rest, ring drawn and faint, layers static. */
@font-face{font-family:"Literata";src:url(/assets/look/literata-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(/assets/look/literata-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Karla";src:url(/assets/look/karla-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{--f-display:"Literata",Georgia,serif;--f-body:"Karla",system-ui,sans-serif;--fw-display:430;--ls-display:-0.018em;--h1-max:4.75rem;--fs-body:1.0625rem;
  --radius-card:22px;--radius-photo:26px;--radius-btn:999px;--fw-quote:400;--fw-brand:500;
  --ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --tone-hero:var(--tone-hero-c);--tone-base:var(--bg);--tone-alt:var(--alt);--tone-photo:var(--tone-photo-c);--tone-accent:var(--tone-accent-c);--tone-ink:var(--tone-ink-c);
  --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
html{font-optical-sizing:auto}
body{line-height:1.7}
.sec__h,.prose h2{font-weight:420}
h3{font-weight:500}
.brand__name{font-weight:500;letter-spacing:-.005em}

/* hero: quiet. The evening room photo is only an atmosphere here: blurred, faint, multiplied into the fog. */
.hero-quiet .hero__bg{display:none} /* aurora replaces the photo atmosphere: the multiplied photo read as flat grey */
.hero-quiet .hero::before{content:"";position:absolute;inset:-12%;z-index:-1;pointer-events:none;will-change:transform;
  background:
    radial-gradient(34% 40% at 28% 36%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%),
    radial-gradient(30% 36% at 66% 42%,color-mix(in srgb,var(--ring) 34%,transparent),transparent 70%),
    radial-gradient(36% 40% at 62% 80%,color-mix(in srgb,var(--accent-deep) 6%,transparent),transparent 70%),
    radial-gradient(28% 34% at 30% 78%,color-mix(in srgb,var(--tone-accent-c) 4%,transparent),transparent 70%);
  background-size:140% 140%;background-position:0 0;animation:hearth-aurora 34s ease-in-out infinite alternate,hearth-aurora-drift 52s ease-in-out infinite alternate}
@keyframes hearth-aurora{to{background-position:100% 60%}}
@keyframes hearth-aurora-drift{from{transform:translate3d(-3%,2%,0) rotate(-4deg)}to{transform:translate3d(3%,-2%,0) rotate(5deg) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.hero-quiet .hero::before{animation:none}}
.hero-quiet .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--grain);background-size:220px;mix-blend-mode:soft-light;opacity:.42}
.hero-quiet .hero__inner{position:relative;z-index:1;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(2rem,4vw,4rem);min-height:min(78vh,740px);padding-block:clamp(3.5rem,7vw,6rem) clamp(5rem,8vw,7rem)}
.hero-quiet .hero__h1{font-weight:380;font-size:clamp(2.7rem,5.4vw,var(--h1-max));line-height:1.04;letter-spacing:-.024em;max-width:13.5ch;margin-bottom:.45em}
.hero-quiet .hero__lead{font:italic 400 clamp(1.25rem,1.9vw,1.55rem)/1.45 var(--f-display);max-width:34ch;color:var(--hero-ink);margin-bottom:2.25rem;perspective:600px}
.hero-quiet .hero__actions{gap:1rem;align-items:center}
.hero-quiet .hero .btn--ghost{border-color:transparent;padding-inline:.4rem;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.3em;text-decoration-thickness:2px}
.hero-quiet .hero .btn--ghost:hover{transform:none;box-shadow:none;text-decoration-thickness:3px}
.hero-quiet .hero__doc{justify-self:center;width:15rem;position:relative;margin-top:-2rem}
.hero-quiet .hero__doc img{width:13rem;height:13rem;aspect-ratio:1;object-fit:cover;border-radius:50%;margin:1rem;box-shadow:0 24px 50px -30px rgb(20 30 25 / .55)}
.hero-quiet .hero__doc figcaption{margin:2.1rem 0 0;width:15rem;align-items:center;text-align:center}
.hero-quiet .hero__docname{font:500 1.15rem/1.3 var(--f-display)}
.hero-quiet .hero__docrole{opacity:1;color:var(--muted);font-size:.95rem;line-height:1.4}
/* the hand-drawn ring (injected by js/look.js, aria-hidden) */
.hearth-ring{position:absolute;left:-1rem;top:-1rem;width:17rem;height:17rem;pointer-events:none;color:var(--ring);overflow:visible}
.hearth-ring path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;opacity:.55}
@media (max-width:860px){
  .hero-quiet .hero__inner{grid-template-columns:1fr;min-height:0;align-items:start;gap:2rem;padding-block:3rem 6rem}
  .hero-quiet .hero__doc{order:-1;justify-self:start;display:grid;grid-template-columns:7.5rem 1fr;gap:1.1rem;align-items:center;width:100%;margin:0}
  .hero-quiet .hero__doc img{width:6.5rem;height:6.5rem;margin:.5rem}
  .hero-quiet .hero__doc figcaption{margin:0;width:auto;align-items:flex-start;text-align:left}
  .hearth-ring{left:-.6rem;top:-.6rem;width:8.7rem;height:8.7rem}
}
/* signature: lead words rise into place with a slight tilt. Hidden only when scripting is on and motion
   is allowed; a CSS fallback shows the line after 2.5 s even if the module never runs. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .hero-quiet .hero__lead{opacity:0;animation:hearth-lead-safety 0s 2.5s forwards}
  .hero-quiet .hero__lead.is-split{opacity:1;animation:none}
}
@keyframes hearth-lead-safety{to{opacity:1}}
.wbr3d-word{display:inline-block;transform-origin:50% 100%}

/* base structure rules are keyed on .hero-quiet (inherited by every re-skin), not on the look id (R7).
   The converge renderer marks reveals with .in after scrolling; show them at rest (shared request R6). */
.reveal.in{animation:none}

/* services: soft panels, the name set in the display face, three to a row */
.hero-quiet .cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.25rem}
.hero-quiet .card{border:0;background:var(--card);padding:1.75rem 1.6rem 1.6rem;box-shadow:0 1px 0 var(--line)}
.hero-quiet .card__h{font:450 1.3rem/1.25 var(--f-display)}
.hero-quiet .card__h{display:flex;align-items:baseline;gap:.65rem}
.hero-quiet .card__h::before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);transform:translateY(-.1em);transition:transform .6s var(--ease-spring)}
.hero-quiet .card--link:hover .card__h::before{transform:translateY(-.1em) scale(1.6)}
@media (prefers-reduced-motion:reduce){.hero-quiet .card--link:hover .card__h::before{transform:translateY(-.1em)}}

/* about: a letter beside the room photo, the room photo layered over a tinted panel */
@media (min-width:861px){.hero-quiet .sec--doctor .split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.hero-quiet .split__media{position:relative;isolation:isolate}
.hero-quiet .split__copy > p{font:400 1.2rem/1.65 var(--f-display);max-width:38ch}
.hero-quiet .split__copy .link-arrow{font:600 1rem/1.4 var(--f-body)}

/* about and office photos (sections with the image-reveal token): image-clip-path-reveal, done by
   js/look.js with anime.js onScroll, once per photo. No JS or reduced motion: photos simply show. */
.hero-quiet .image-reveal .split__media img,.hero-quiet .image-reveal .visit__media img{will-change:clip-path}

/* highlights (parallax-scene): canopy photo band; the photo drifts slower than the words (CSS scroll timeline) */
.hero-quiet .sec--highlights .point h3{font:450 1.35rem/1.3 var(--f-display)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hero-quiet .parallax-scene .photo-band{inset:-9% 0;animation:hearth-parallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes hearth-parallax{from{transform:translateY(3%)}to{transform:translateY(-3%)}}

/* getting started: a path of numbered stops joined by a line (the steps are a real sequence) */
.hero-quiet .steps{position:relative;gap:2rem}
.hero-quiet .step{background:none;border:0;border-radius:0;padding:0;position:relative}
.hero-quiet .step::before{content:"";display:block;width:2.75rem;height:2.75rem;margin-bottom:1.1rem;border-radius:50%;border:1.5px solid var(--accent);background:radial-gradient(circle,var(--accent) 0 .32rem,var(--bg) .36rem);position:relative;z-index:1}
.hero-quiet .step h3{font:450 1.3rem/1.3 var(--f-display)}
@media (min-width:861px){.hero-quiet .sec--new-patients .steps{overflow-x:clip}.hero-quiet .sec--new-patients .step:not(:last-child)::after{content:"";position:absolute;left:3.25rem;right:-1.5rem;top:1.375rem;border-top:1.5px dashed color-mix(in oklab,var(--accent) 55%,transparent)}}
.hero-quiet .steps--page .step::before{width:1.6rem;height:1.6rem;margin-bottom:.7rem;background:radial-gradient(circle,var(--accent) 0 .22rem,var(--bg) .26rem)}

/* reviews, if a client adds permitted quotes later */
.hero-quiet .quote{border:0;background:var(--card)}
.hero-quiet .quote blockquote{font:italic 400 1.15rem/1.55 var(--f-display)}

/* crisis line: its own calm, clear panel in the footer and on the getting started page */
.crisis{margin:0 auto 2.5rem;padding:1.1rem 1.4rem 1.1rem 1.25rem;border-radius:16px;border-left:4px solid var(--ring);font-size:1rem;line-height:1.55}
.site-footer .crisis{background:rgb(255 255 255 / .07);color:var(--on-ink)}
.prose .crisis{background:color-mix(in oklab,var(--ring) 10%,var(--card));color:var(--ink);margin:0 0 2rem}

/* cta: deep tone with the same grain as the hero */
.hero-quiet .sec--cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:220px;mix-blend-mode:soft-light;opacity:.28}
.hero-quiet .sec--cta .sec__h{font-weight:380}
.hero-quiet .faq__q{font-weight:600}
.hero-quiet .page-head h1{font-weight:400}

/* spacing: calmer rhythm, no dead bands; headings start below the 170px colour ramps */
.hero-quiet .sec{padding-block:clamp(3.5rem,7vw,5.5rem)}
.hero-quiet .sec--new-patients,.hero-quiet .sec--cta{padding-top:calc(170px + 1.5rem)}
.hero-quiet .sec--cta{padding-bottom:4rem}
.hero-quiet .sec--highlights{padding-block:max(11.5rem,13vw) max(8rem,9vw)}
.hero-quiet .sec--faq .narrow{max-width:1180px}
.hero-quiet .sec--faq .faq{max-width:760px}
@media (min-width:861px){
  .hero-quiet .visit{align-items:stretch}
  .hero-quiet .visit__media{grid-template-columns:1fr;grid-auto-rows:1fr}
  .hero-quiet .visit__media img,.hero-quiet .visit__media img:first-child{grid-column:auto;aspect-ratio:auto;height:100%;min-height:240px}
}
/* inner pages: wash the page head into the body and the body into the footer, never a hard cut (R6) */
.hero-quiet .page-head{background-image:linear-gradient(in oklab to bottom,var(--tone-base) 0,var(--tone-alt) 170px,var(--tone-alt) calc(100% - 150px),var(--tone-base) 100%)}
body.inner.hero-quiet .site-footer{background:linear-gradient(in oklab to bottom,var(--tone-base) 0,var(--tone-ink) 170px)}
body.inner.hero-quiet .site-footer{padding-top:calc(170px + 1rem)}

/* FAQ inside .prose: keep the question flush with its + icon (.prose h3 margin otherwise wins) */
.faq__item .faq__q{margin:0}

/* crisis top bar (plan crisis_tel + labels.crisis_link, R10): plum on fog, its own colour so it does not merge with the sample bar */
.hero-quiet .crisis-bar{background:var(--ring);color:#fff;padding-block:.35rem}

/* council re-verify fixes: no empty grid slot in services, office photos full column width at every size,
   a firmer crisis panel, a wider FAQ column */
.hero-quiet .sec--services .cards{display:flex;flex-wrap:wrap}
.hero-quiet .sec--services .card{flex:1 1 300px}
.hero-quiet .visit__media{grid-template-columns:1fr}
.hero-quiet .visit__media img{width:100%;justify-self:stretch}
.crisis{font-size:1.05rem;font-weight:600}
.hero-quiet .sec--faq .faq{max-width:900px}

/* rework 2026-10-07 (bh-solo council round 1 of 2026-10-06, and the new photo slots) */
/* hero: a larger portrait so the right half is not empty; the services heading comes up sooner */
@media (min-width:861px){
  .hero-quiet .hero__inner{min-height:min(70vh,660px)}
  .hero-quiet .hero__doc{width:19rem}
  .hero-quiet .hero__doc img{width:17rem;height:17rem}
  .hero-quiet .hero__doc figcaption{width:19rem}
  .hearth-ring{width:21rem;height:21rem}
}
/* service tiles with photos: an even grid, the first tile wide when the count is odd, so no tile sits alone */
.hero-quiet .sec--services .cards:has(> .card--img){display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.hero-quiet .sec--services .cards:has(> .card--img) > .card{flex:none}
@media (min-width:600px){.hero-quiet .sec--services .cards:has(> .card--img:last-child:nth-child(odd)) > .card:first-child{grid-column:span 2}}
.hero-quiet .card--img{padding:.75rem .75rem 1.4rem}
.hero-quiet .card--img .card__img{border-radius:calc(var(--radius-card) - .5rem);margin-bottom:1.1rem}
.hero-quiet .card--img .card__h,.hero-quiet .card--img > p{padding-inline:.85rem}
/* highlights: titles wrap in balance so the four columns share one rhythm */
.hero-quiet .sec--highlights .point h3{text-wrap:balance}
/* FAQ: the photo sits beside the questions on desktop, so the right column is not empty */
@media (min-width:961px){
  .hero-quiet .sec--faq .narrow:has(.sec__media){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .hero-quiet .sec--faq .narrow:has(.sec__media) > .sec__h{grid-column:1/-1}
  .hero-quiet .sec--faq .narrow:has(.sec__media) > .sec__media{grid-column:2;grid-row:2;margin:0;position:sticky;top:6rem}
  .hero-quiet .sec--faq .narrow:has(.sec__media) > .faq{grid-column:1;grid-row:2;max-width:none}
  .hero-quiet .sec--faq .sec__media img{aspect-ratio:4/3}
}
/* section photos: soft corners and a quiet shadow, the same radius as every other photo */
.hero-quiet .sec__media img,.hero-quiet .prose__media img,.hero-quiet .page-head__media img{border-radius:var(--radius-photo);box-shadow:0 24px 50px -36px rgb(20 30 25 / .5)}
.hero-quiet .prose__media{margin:.25rem 0 1.5rem}
/* the wide first tile lays its photo beside the words, so its row stays the height of the others */
@media (min-width:600px){
  .hero-quiet .sec--services .cards:has(> .card--img:last-child:nth-child(odd)) > .card--img:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:.5rem;align-content:stretch}
  .hero-quiet .sec--services .cards:has(> .card--img:last-child:nth-child(odd)) > .card--img:first-child .card__img{grid-column:1;grid-row:1/span 3;margin:0;height:100%;min-height:100%;aspect-ratio:auto;align-self:stretch}
  .hero-quiet .sec--services .cards:has(> .card--img:last-child:nth-child(odd)) > .card--img:first-child > :not(.card__img){grid-column:2;padding-top:.6rem}
}
/* legal and 404 pages: the reading column starts on the same left edge as the H1 (council: 404 line indented) */
body.inner.hero-quiet main > .wrap.narrow{max-width:none}
body.inner.hero-quiet main > .wrap.narrow > *{max-width:760px}

/* council 2026-10-07 (rework round 1) */
/* link arrow on the heading itself (the link's ::after is the stretched click area from base.css) */
.hero-quiet .card--link .card__h::after{content:"\2192";color:var(--accent);transition:transform .4s var(--ease-out)}
.hero-quiet .card--link:hover .card__h::after{transform:translateX(.25em)}
@media (prefers-reduced-motion:reduce){.hero-quiet .card--link:hover .card__h::after{transform:none}}
/* phones: photo tiles become rows with a square thumbnail, so seven tiles fit in about one screen */
@media (max-width:599px){
  .hero-quiet .card--img{display:grid;grid-template-columns:5.5rem minmax(0,1fr);column-gap:1rem;padding:.75rem;align-content:start}
  .hero-quiet .card--img .card__img{grid-column:1;grid-row:1/span 2;aspect-ratio:1;margin:0}
  .hero-quiet .card--img .card__h,.hero-quiet .card--img > p{grid-column:2;padding-inline:0}
  .hero-quiet .card--img > p{font-size:.95rem;line-height:1.5;margin:0}
  .hero-quiet .card--img .card__h{font-size:1.12rem;margin:.1rem 0 .3rem}
}
/* photo bands dissolve into the next tone: no hard edge under How I work or under the closing band */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hero-quiet .sec--highlights.parallax-scene .photo-band{-webkit-mask-image:linear-gradient(transparent calc(8% + 120px),#000 calc(8% + 300px),#000 calc(91% - 200px),transparent 91%);mask-image:linear-gradient(transparent calc(8% + 120px),#000 calc(8% + 300px),#000 calc(91% - 200px),transparent 91%)}
  }
}
.hero-quiet.cta-photo .photo-band--cta{-webkit-mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 170px),transparent);mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 170px),transparent)}
/* therapy pages: the second section photo sits beside the words, so two sections never repeat one form */
@media (min-width:861px){
  .hero-quiet .prose > .prose__media:nth-of-type(2){float:right;width:46%;margin:.35rem 0 1.25rem 2rem}
  .hero-quiet .prose > .prose__media:nth-of-type(2) img{aspect-ratio:4/3}
  .hero-quiet .prose > h2{clear:both}
}
/* office: a 1 plus 2 mosaic at about half the old height (was three photos stacked in one column) */
@media (min-width:861px){
  .hero-quiet .visit__media{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:1rem;align-content:start}
  .hero-quiet .visit__media img,.hero-quiet .visit__media img:first-child{grid-column:auto;height:auto;min-height:0;aspect-ratio:4/3}
  .hero-quiet .visit__media img:first-child{grid-column:1/-1;aspect-ratio:16/9}
  .hero-quiet .visit{align-items:start}
}
/* FAQ photo on the left, so it does not repeat the office section's photos-right placement */
@media (min-width:961px){
  .hero-quiet .sec--faq .narrow:has(.sec__media){grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
  .hero-quiet .sec--faq .narrow:has(.sec__media) > .sec__media{grid-column:1}
  .hero-quiet .sec--faq .narrow:has(.sec__media) > .faq{grid-column:2}
}
/* crisis links: a dot between "call" and "text" so the pair reads as one line, not a glitch */
.crisis-link + .crisis-link::before{content:"\00B7";display:inline-block;margin:0 .6rem;text-decoration:none}
/* sticky header: solid enough that scrolled text does not smudge behind the wordmark */
.hero-quiet .site-header{background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}
/* getting started and other article pages: the call card follows the reader down the long column (R17: no body photo slot) */
@media (min-width:861px){.hero-quiet .article-grid .aside{position:sticky;top:6rem;align-self:start}}
.hero-quiet .prose > h2:not(:first-child){padding-top:1.75rem;border-top:1px solid var(--line)}

/* overlap fix 2026-10-23 (Dawn and Pebble): in the light layouts (center, overlay, photo-top) base.css turns the
   portrait into a 60px chip, but the ring kept its 17 to 21rem size and crossed the doctor's name. The ring is redrawn
   at the chip's size, centered on the 60px photo (.55rem pill padding), with a stroke that still reads at that scale. */
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hearth-ring{left:calc(.55rem - 7px)!important;top:50%!important;translate:0 -50%;width:74px!important;height:74px!important}
body:not(.hero-layout-own):is(.hero-layout-center,.hero-layout-overlay,.hero-layout-photo-top) .hearth-ring path{stroke-width:4.5}

/* Look: Pumice. Re-skin of Hearth for medical-first dermatology. Keeps Hearth's quiet hero (grain field,
   faint blurred photo, large H1, small round portrait with the drawn ring) and its hero effects, inherited:
   - word-by-word-baseline-rise-3d (animejs) on the lead line, hearth js/look.js. Reduced motion: words at rest.
   - svg-line-draw-self-drawing-then-dim (js-light): the portrait ring. Reduced motion: faint ring at once.
   - svg-fractal-noise-grain-texture-overlay (css-only): hero field and, below, the CTA band. Static.
   - layered-scroll-parallax-depth (CSS scroll timeline): wired below on the highlights photo band,
     because Hearth scopes its own band rule to .look-hearth. Reduced motion: layers static.
   Own system: porous pumice gray, one shade-blue accent, a warm sand ring; Piazzolla over Mona Sans;
   rounded pebble shapes below the hero. Loads after hearth/look.css. */
/* perf PERF-4 (seo-a11y 2026-10-23): the preloaded faces use font-display optional, so a late font never reflows the hero (CLS) */
@font-face{font-family:"Piazzolla";src:url(/assets/look/piazzolla-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:optional}
@font-face{font-family:"Piazzolla";src:url(/assets/look/piazzolla-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Mona Sans";src:url(/assets/look/mona-sans-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:optional}
:root{--f-display:"Piazzolla",Georgia,serif;--f-body:"Mona Sans",system-ui,sans-serif;--fw-display:420;--ls-display:-0.015em;--h1-max:4.5rem;--fs-body:1.0625rem;
  --radius-card:20px;--radius-photo:28px;--radius-btn:999px;--fw-brand:560;
  --pebble:46% 54% 50% 50% / 56% 46% 54% 44%}
body{line-height:1.65}
h1,h2,h3{text-wrap:balance}
.sec__h,.prose h2{font-weight:420}
.brand__name{font-family:var(--f-display);font-weight:500;font-size:1.25rem}

/* hero: the shade-blue glow replaces Hearth's warm one on the right; Piazzolla set light */
.hero-quiet .hero{background:radial-gradient(34% 44% at 80% 46%,color-mix(in oklab,var(--ring) 22%,transparent),transparent 70%),radial-gradient(46% 58% at 90% 10%,color-mix(in oklab,var(--accent) 12%,transparent),transparent 72%),var(--tone-hero)}
.hero-quiet .hero__h1{font-weight:360;letter-spacing:-.022em;max-width:15ch}
.hero-quiet .hero__inner{min-height:min(70vh,660px);padding-block:clamp(3.5rem,7vw,6rem) clamp(3.5rem,6vw,5rem)}
.hero-quiet .hero__lead{font-weight:380}
.hero-quiet .hero__doc img{border-radius:var(--pebble)}
@media (max-width:860px){.hero-quiet .hero{background:radial-gradient(60% 30% at 18% 14%,color-mix(in oklab,var(--ring) 20%,transparent),transparent 70%),var(--tone-hero)}}

/* reviews: three soft pebbles; the middle one sits lower, like stones set by hand */
.look-pumice.hero-quiet .quotes{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1.5rem;align-items:start}
.look-pumice.hero-quiet .quote{border:0;background:var(--card);border-radius:34px 28px 36px 26px;padding:2rem 1.9rem 1.7rem;box-shadow:0 1px 0 var(--line)}
@media (min-width:861px){.look-pumice.hero-quiet .quote:nth-child(3n+2){margin-top:2.5rem}}
.look-pumice.hero-quiet .quote blockquote{font:italic 400 1.15rem/1.55 var(--f-display);color:var(--heading)}
.look-pumice.hero-quiet .quote__by{color:var(--muted);font-size:.9rem}

/* services: Medical and Cosmetic as two side-by-side panels, each a plain list of what the practice treats */
@media (min-width:861px){
  .look-pumice.hero-quiet .sec--services .wrap:has(.cards__group){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
  .look-pumice.hero-quiet .sec--services .wrap:has(.cards__group)>:not(.cards__group):not(.cards){grid-column:1/-1}
  .look-pumice.hero-quiet .sec--services .wrap:has(.cards__group)>.cards__group{grid-row:3}
  .look-pumice.hero-quiet .sec--services .wrap:has(.cards__group)>.cards{grid-row:4;align-self:stretch}
  .look-pumice.hero-quiet .sec--services .wrap:has(.cards__group)>.cards__group:nth-of-type(2n),.look-pumice.hero-quiet .sec--services .wrap:has(.cards__group)>.cards:nth-of-type(2n){grid-column:2}
}
.look-pumice.hero-quiet .cards__group{font:italic 420 1.55rem/1.2 var(--f-display);color:var(--heading);margin:2.5rem 0 0;padding-left:1.6rem}
.look-pumice.hero-quiet .cards{grid-template-columns:1fr;gap:0;margin-top:1rem;background:var(--card);border-radius:var(--radius-card);padding:.6rem 1.6rem;box-shadow:0 1px 0 var(--line)}
.look-pumice.hero-quiet .card{background:none;border:0;border-radius:0;padding:1.1rem 0 1.15rem;box-shadow:none}
.look-pumice.hero-quiet .card+.card{border-top:1px solid var(--line)}
.look-pumice.hero-quiet .card__h{font:480 1.2rem/1.3 var(--f-display)}
.look-pumice.hero-quiet .card p{margin-top:.25rem;font-size:.97rem}
.look-pumice.hero-quiet .card--link .card__h a{text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 45%,transparent);text-decoration-thickness:1px;text-underline-offset:.22em}
.look-pumice.hero-quiet .card--link:hover{transform:none;box-shadow:none}

/* doctor: the portrait in a pebble shape, on a sand-tinted stone behind it */
@media (min-width:861px){.look-pumice.hero-quiet .sec--doctor .split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.look-pumice.hero-quiet .split__media{position:relative;isolation:isolate}
.look-pumice.hero-quiet .split__media::before{content:"";position:absolute;inset:10% 0 -6% 14%;z-index:-1;border-radius:var(--pebble);background:color-mix(in oklab,var(--ring) 18%,var(--alt))}
.look-pumice.hero-quiet .split__media img{border-radius:var(--pebble);max-height:560px;object-fit:cover;object-position:50% 20%}
.look-pumice.hero-quiet .pull{font:italic 400 clamp(1.25rem,1.9vw,1.5rem)/1.45 var(--f-display);border:0;padding:0;color:var(--heading)}
.look-pumice.hero-quiet .split__copy>p{max-width:42ch}
.look-pumice.hero-quiet .minidocs img{border-radius:50%}

/* highlights band: the photo drifts slower than the words (layered-scroll-parallax-depth, CSS scroll timeline) */
.look-pumice.hero-quiet .sec--highlights .point h3{font:480 1.3rem/1.3 var(--f-display)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .look-pumice.hero-quiet .sec--highlights .photo-band{animation:pumice-parallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes pumice-parallax{from{transform:translateY(2%)}to{transform:translateY(-2%)}}

/* new patient steps: four soft pebbles in a two by two field, each marked by a small stone, no numerals */
.look-pumice.hero-quiet .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;max-width:62rem}
.look-pumice.hero-quiet .step{background:var(--card);border:0;border-radius:30px 24px 32px 22px;padding:1.6rem 1.75rem 1.5rem 4.4rem;position:relative;box-shadow:0 1px 0 var(--line)}
.look-pumice.hero-quiet .step::before{content:"";position:absolute;left:1.6rem;top:1.85rem;width:1.5rem;height:1.25rem;border-radius:var(--pebble);background:color-mix(in oklab,var(--ring) 55%,var(--alt))}
.look-pumice.hero-quiet .step:nth-child(even)::before{background:color-mix(in oklab,var(--accent) 35%,var(--alt))}
.look-pumice.hero-quiet .step h3{font:480 1.25rem/1.3 var(--f-display)}
@media (max-width:700px){.look-pumice.hero-quiet .steps{grid-template-columns:1fr}}

/* cta: deep shade-blue with the hero's grain */
.look-pumice.hero-quiet .sec--cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:220px;mix-blend-mode:soft-light;opacity:.26}
.look-pumice.hero-quiet .sec--cta .sec__h{font-weight:380}
.look-pumice.hero-quiet .faq__q{font-weight:600}
.look-pumice.hero-quiet .page-head h1{font-weight:400}

/* shared request R6, carried here until base.css takes it: a reveal marked shown stays shown, and anchor
   scrolling is instant so a scripted scroll to the top (the converge capture) does not land mid-scroll */
.look-pumice.hero-quiet .reveal.in{animation:none}
html:has(body.look-pumice){scroll-behavior:auto}

/* visit: the two office photos as one even pair, stacked, same crop, soft corners */
.look-pumice.hero-quiet .visit__media{grid-template-columns:1fr;gap:1rem;align-content:start}
.look-pumice.hero-quiet .visit__media img,.look-pumice.hero-quiet .visit__media img:first-child{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-photo)}

/* Hearth keys its section rules to .hero-quiet, which every pumice page also carries, so pumice section
   rules use .look-pumice.hero-quiet to outrank them and turn off the ones that clash with its own forms. */
.look-pumice.hero-quiet .card__h::before,.look-pumice.hero-quiet .card--link .card__h a::before{content:none}
.look-pumice.hero-quiet .sec--new-patients .step:not(:last-child)::after{content:none}
.look-pumice.hero-quiet .cards{align-content:start}
.look-pumice.hero-quiet .sec--services .cards{display:grid}
.look-pumice.hero-quiet .sec--services .card{flex:none}
.look-pumice.hero-quiet .card__h{display:block}
.look-pumice.hero-quiet .step::before{border:0;margin:0}

/* rework 2026-10-07: service tile photos as round pebble thumbnails beside each row. The two groups stack
   full width, each a panel of rows in two columns, so Medical (6) and Cosmetic (4) both fill their panels
   (council: empty lower block in the Cosmetic panel). Outranks Hearth's photo-card grid. */
@media (min-width:861px){.look-pumice.hero-quiet .sec--services .wrap:has(.cards__group){display:block}}
.look-pumice.hero-quiet .sec--services .cards:has(>.card--img){grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));column-gap:2.5rem;padding:.4rem 1.75rem}
.look-pumice.hero-quiet .sec--services .cards:has(>.card--img)>.card--img{display:grid;grid-template-columns:5.25rem minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:1.2rem;align-items:start;padding:1.15rem 0;grid-column:auto;border-top:1px solid var(--line)}
.look-pumice.hero-quiet .sec--services .cards:has(>.card--img)>.card--img:first-child{border-top:0}
@media (min-width:861px){.look-pumice.hero-quiet .sec--services .cards:has(>.card--img)>.card--img:nth-child(2){border-top:0}}
.look-pumice.hero-quiet .sec--services .card--img .card__img{grid-column:1;grid-row:1/span 2;width:5.25rem;height:5.25rem;min-height:0;aspect-ratio:1;margin:0;border-radius:var(--pebble);object-fit:cover}
.look-pumice.hero-quiet .sec--services .card--img>:not(.card__img){grid-column:2;padding:0}
/* new patients: the photo as a pebble beside the steps; the step grid fills the rest of the row (council: empty right column) */
.look-pumice.hero-quiet .steps{max-width:none}
@media (min-width:861px){
  .look-pumice.hero-quiet .sec--new-patients .wrap:has(>.sec__media){display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .look-pumice.hero-quiet .sec--new-patients .wrap:has(>.sec__media)>*{grid-column:2}
  .look-pumice.hero-quiet .sec--new-patients .wrap:has(>.sec__media)>.sec__h{grid-column:1/-1}
  .look-pumice.hero-quiet .sec--new-patients .wrap:has(>.sec__media)>.sec__media{grid-column:1;grid-row:2/span 3;margin:0}
  .look-pumice.hero-quiet .sec--new-patients .sec__media img{aspect-ratio:4/5;border-radius:var(--pebble)}
}
/* the home page lists hours in the visit section, so its footer drops the second hours table (council: hours twice) */
@media (min-width:861px){body.look-pumice:has(.hero) .site-footer__grid{grid-template-columns:1.2fr 1fr}}
body.look-pumice:has(.hero) .site-footer__grid>div:nth-child(2){display:none}
/* band photo: Hearth's parallax inset (-9%) put the bottom fade outside the clipped section, so the photo ended on a hard line
   (council 2026-10-06 and converge 2026-10-07). The band stays inside the section and fades out before its bottom edge;
   the 2% drift stays inside the transparent ends. */
.look-pumice.hero-quiet .sec--highlights .photo-band{inset:0;-webkit-mask-image:linear-gradient(transparent 100px,#000 280px,#000 calc(100% - 280px),transparent calc(100% - 40px));mask-image:linear-gradient(transparent 100px,#000 280px,#000 calc(100% - 280px),transparent calc(100% - 40px))}

/* council 2026-10-07 round 1 (rework) */
/* less empty field under the hero buttons, between reviews and services, and below the band columns */
.hero-quiet .hero__inner{min-height:min(60vh,560px)}
.look-pumice.hero-quiet .sec.sec--reviews{padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.look-pumice.hero-quiet .sec.sec--highlights{padding-block:max(12rem,13vw) 7rem}
/* group labels on the container edge */
.look-pumice.hero-quiet .cards__group{padding-left:0}
/* the link arrow runs inline after the linked title; tiles with no page say so */
.look-pumice.hero-quiet .card--link .card__h::after{position:static;display:inline;margin-left:.35em}
.look-pumice.hero-quiet .sec--services .card--img:not(.card--link)>p::after{content:"Ask about it at your visit.";display:block;margin-top:.3rem;font-size:.82rem;font-style:italic;color:var(--muted)}
.look-pumice.hero-quiet .card p,.look-pumice.hero-quiet .step p,.hero-quiet .hero__docname{text-wrap:pretty}
/* visit: the building wide on top, the desk and hall as a pair below */
.look-pumice.hero-quiet .visit__media:has(img:nth-child(3)){grid-template-columns:1fr 1fr;gap:1rem}
.look-pumice.hero-quiet .visit__media:has(img:nth-child(3)) img:first-child{grid-column:1/-1}
.look-pumice.hero-quiet .visit__media:has(img:nth-child(3)) img:not(:first-child){aspect-ratio:4/3}
/* CTA photo fades into the footer navy instead of ending on a hard line */
.cta-photo.look-pumice .photo-band--cta{-webkit-mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 200px),transparent);mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 200px),transparent)}
/* service pages: section photos alternate between full width and a pebble beside the text */
@media (min-width:861px){
  .look-pumice.hero-quiet .prose .prose__media:nth-of-type(even){float:right;width:44%;margin:.3rem 0 1rem 1.75rem}
  .look-pumice.hero-quiet .prose .prose__media:nth-of-type(even) img{aspect-ratio:1;border-radius:var(--pebble)}
  .look-pumice.hero-quiet .prose h2{clear:both}
}

/* aurora, stronger than the Hearth base: pumice's grey ground needs more blue and apricot to read as colour */
.look-pumice.hero-quiet .hero::before{background:
  radial-gradient(34% 40% at 28% 36%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%),
  radial-gradient(32% 38% at 66% 42%,color-mix(in srgb,var(--ring) 46%,transparent),transparent 70%),
  radial-gradient(36% 40% at 62% 80%,color-mix(in srgb,var(--accent-deep) 3%,transparent),transparent 70%),
  radial-gradient(28% 34% at 30% 78%,color-mix(in srgb,var(--tone-accent-c) 2%,transparent),transparent 70%);background-size:140% 140%}

:root{--bg:#ECEBE8;--alt:#E1DFDA;--card:#F8F7F5;--ink:#262624;--muted:#57554F;--heading:#1A1A18;--accent:#1F4E6A;--on-accent:#FFFFFF;--accent-deep:#163A50;--line:rgba(38,38,36,.15);--star:#1F4E6A;--tone-hero-c:#E6E4E0;--hero-ink:#262624;--hero-heading:#1A1A18;--hero-scrim:linear-gradient(180deg,rgba(230,228,224,.30),rgba(230,228,224,.78));--tone-photo-c:#33414D;--photo-scrim:linear-gradient(180deg,rgba(36,48,60,.65),rgba(36,48,60,.7));--tone-accent-c:#1D3A4C;--cta-ink:#EEF1F3;--cta-btn:#ECEBE8;--cta-btn-ink:#1A1A18;--tone-ink-c:#1D2A33;--on-ink:#E6E8E9;--cta-scrim:linear-gradient(180deg,rgba(29,58,76,.55),rgba(29,42,51,.86));--ring:#A2714A}