/* 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: Porch. Cream split hero, arched photo, overlapping portrait card, soft serif. */
@font-face{font-family:"Fraunces";src:url(/assets/look/fraunces-normal.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/look/instrument-sans-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{--f-display:"Fraunces",Georgia,serif;--f-body:"Instrument Sans",system-ui,sans-serif;--fw-display:500;--ls-display:-0.02em;--h1-max:4.4rem;
  --radius-card:22px;--radius-photo:24px;--radius-btn:999px;
  --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);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}
h1,h2{font-variation-settings:"SOFT" 60,"WONK" 0}
.card{background:var(--card);border-color:transparent;box-shadow:0 1px 0 var(--line)}
.sec[data-tone=base] .card{background:var(--alt)}
.step{border-top:0;border-left:4px solid var(--accent);border-radius:6px 22px 22px 6px}
/* hero: text on cream at left; the photo sits in an arch on the right; portrait card overlaps its lower edge */
.hero-split .hero__bg{left:auto;right:clamp(1rem,3vw,2.5rem);top:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);width:min(46%,640px);border-radius:999px 999px 28px 28px;overflow:hidden}
.hero-split .hero__bg::after{display:none}
.hero-split .hero__inner{min-height:min(86vh,780px)}
.hero-split .hero__doc{align-self:end;justify-self:start;width:min(100%,260px);padding:.8rem .8rem 1rem;background:var(--card);border-radius:20px;box-shadow:0 30px 60px -30px rgb(43 37 34 / .45);transform:translate(-18%,8%)}
.hero-split .hero__doc img{aspect-ratio:1;border-radius:14px}
@media (max-width:860px){
  .hero-split .hero__bg{position:relative;inset:auto;width:auto;height:32vh;margin:1rem 1.25rem 0;border-radius:999px 999px 24px 24px}
  .hero{display:flex;flex-direction:column}
  .hero-split .hero__doc{transform:none;padding:0;background:none;box-shadow:none;width:100%}
  /* mobile: doctor row, H1 and buttons fill the first screen; the arch follows them */
  .hero-split .hero__inner{padding-block:1.75rem 1.5rem}
  .hero-split .hero__bg{order:2;height:30vh;margin:0 1.25rem 2rem}
}
/* signature (effects-library image-clip-path-reveal, css-only): the arch opens upward on load.
   Reduced motion: the arch shows open, no clip animation (the whole block sits in no-preference). */
@media (prefers-reduced-motion:no-preference){
  .hero__bg{animation:po-open 1.2s cubic-bezier(.65,0,.35,1) both}
  .hero-split .hero__bg img{animation:po-settle 1.8s var(--ease-out) both}
  .hero-split .hero__doc{animation:po-card .6s .7s var(--ease-spring) both}
}
@keyframes po-open{from{clip-path:inset(100% 0 0 0 round 999px 999px 28px 28px)}to{clip-path:inset(0 0 0 0 round 999px 999px 28px 28px)}}
@keyframes po-settle{from{scale:1.12}to{scale:1.04}}
@keyframes po-card{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
/* depth (effects-library layered-scroll-parallax-depth, js-light, done with CSS scroll timelines):
   three layers move at different speeds. Back: the photo inside the arch. Middle: the doctor photo
   inside its frame. Front: the photo band behind "Why families stay". Reduced motion or no
   scroll-timeline support: every layer static. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-split .hero__bg img{animation:po-settle 1.8s var(--ease-out) both,po-parallax-arch linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 90vh}
    .parallax-scene .split__media{overflow:hidden;border-radius:var(--radius-photo)}
    .parallax-scene .split__media img{scale:1.1;animation:po-parallax-feature linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .parallax-scene .photo-band{animation:po-parallax-band linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes po-parallax-arch{from{translate:0 0}to{translate:0 7%}}
@keyframes po-parallax-feature{from{translate:0 -4%}to{translate:0 4%}}
@keyframes po-parallax-band{from{background-position:50% 25%}to{background-position:50% 75%}}
.hero-split .hero__copy{max-width:min(600px,48vw)}
.hero-split .hero__h1{font-size:clamp(2.3rem,4.2vw,3.9rem)}
@media (max-width:860px){.hero-split .hero__copy{max-width:none}}
/* image-clip-path-reveal again, on the office photos of any section with the image-reveal token
   (look.json section_fx): js/look.js adds .fx-reveal only with JS and motion allowed, then .revealed
   once per photo as it enters the view. Without JS or with reduced motion the photos simply show. */
.fx-reveal .image-reveal .visit__media img{clip-path:inset(100% 0 0 0 round var(--radius-photo));transition:clip-path .95s cubic-bezier(.22,1,.36,1)}
.fx-reveal .image-reveal .visit__media img:nth-child(2){transition-delay:.15s}
.fx-reveal .image-reveal .visit__media img.revealed{clip-path:inset(0 0 0 0 round var(--radius-photo))}
/* the converge renderer marks reveals with .in after scrolling; show them at rest (shared request R6) */
.reveal.in{animation:none}
/* headings never sit inside the 170px colour ramp that follows a dark photo band or leads into the accent CTA */
.sec--new-patients{padding-top:calc(170px + 2.5rem)}
.sec--cta{padding-top:calc(170px + 2rem)}
/* visit: the two office photos fill the column beside the hours instead of leaving it half empty */
@media (min-width:861px){
  .visit{align-items:stretch}
  .visit__media{grid-template-columns:1fr;grid-auto-rows:1fr}
  .visit__media img,.visit__media img:first-child{grid-column:auto;aspect-ratio:auto;height:100%;min-height:220px}
}
/* structure: services as a two-column ruled list, reviews led by one large quote */
.look-porch .cards{display:block;columns:2 320px;column-gap:3.5rem}
.look-porch .card{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;break-inside:avoid;padding:1.2rem 0}
.look-porch .sec[data-tone=base] .card{background:none}
.look-porch .card--link:hover{transform:none;box-shadow:none}
.look-porch .card--link .card__h a::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.6em;border-radius:50%;background:var(--accent);transform:translateY(-.1em)}
.look-porch .quotes{grid-template-columns:1.6fr 1fr 1fr;align-items:start}
.look-porch .quote:first-child{background:none;border:0;padding:0 1rem 0 0}
.look-porch .quote:first-child blockquote{font:400 clamp(1.3rem,2vw,1.6rem)/1.4 var(--f-display)}
@media (max-width:860px){.look-porch .quotes{grid-template-columns:1fr}}

/* council round 1 fixes (2026-10-06) */
/* mobile visit: both office photos run full width, no half-empty row */
@media (max-width:860px){.visit__media{grid-template-columns:1fr}.visit__media img,.visit__media img:first-child{grid-column:auto;aspect-ratio:16/10}}
/* the photo band ends closer to its last line: less flat dark slab before the next section */
.sec--highlights{padding-bottom:calc(120px + 2.5rem)}
@media (max-width:860px){.sec--highlights{padding-bottom:7rem}}
/* calmer rhythm between reviews and services */
.sec--reviews{padding-bottom:clamp(3rem,6vw,5rem)}
.sec--services{padding-top:clamp(3.5rem,6vw,5rem)}
/* every service row carries the dot; rows without their own page get a muted one */
.look-porch .card:not(.card--link) .card__h::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.6em;border-radius:50%;background:var(--line);transform:translateY(-.1em)}
@media (max-width:860px){.hero-split .hero__inner{min-height:0}}

/* rework 2026-10-07 (council round 2 open items) */
/* less flat ground: hours to questions, and under the services grid */
.sec--visit{padding-bottom:clamp(3rem,6vw,5rem)}
.sec--faq{padding-top:clamp(3.5rem,6vw,5rem)}
.sec--services{padding-bottom:clamp(3.5rem,6vw,5rem)}
/* no one-word last line under the steps */
.ins{text-wrap:pretty}
/* mobile: the photo band ends near its last point; the next ramp is 120px */
@media (max-width:860px){
  .sec--highlights{padding-bottom:5rem}
  .sec--new-patients{padding-top:calc(120px + 1.5rem);background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 120px)}
}
/* service tiles: a small square photo beside the name; the list keeps its quiet two-column form */
.look-porch .card--img{display:grid;grid-template-columns:104px 1fr;column-gap:1.1rem;align-items:start}
.look-porch .card--img .card__img{grid-column:1;grid-row:1 / span 2;width:104px;aspect-ratio:1;margin:0;border-radius:18px}
.look-porch .card--img .card__h,.look-porch .card--img p{grid-column:2}
/* section headings sit below their fade: light-to-light seams use a 96px ramp and a 7rem top pad */
.sec--services,.sec--doctor,.sec--visit,.sec--faq{background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 96px)}
.sec--services,.sec--visit,.sec--faq{padding-top:7rem}

/* council round 1, rework 2026-10-07 */
/* seams interpolate in oklch, so a light to dark wash keeps its hue instead of passing through grey */
.sec{background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 170px)}
.sec--services,.sec--doctor,.sec--visit,.sec--faq{background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 96px)}
.sec--highlights{background:linear-gradient(in oklch to bottom,var(--prev) 0,var(--tone-photo) 170px,var(--tone-photo))}
.site-footer{background:linear-gradient(in oklch to bottom,var(--tone-accent) 0,var(--tone-ink) 170px)}
body.inner .site-footer{background:linear-gradient(in oklch to bottom,var(--tone-base) 0,var(--tone-ink) 170px)}
@media (max-width:860px){.sec--new-patients{background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 120px)}}
.sec--new-patients{padding-bottom:clamp(3rem,6vw,5rem)}
/* section forms vary: reviews keep the wide banner; new patient steps sit beside a tall photo; questions sit left of a photo */
@media (min-width:861px){
  .sec--new-patients>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .sec--new-patients>.wrap>*{grid-column:2}
  .sec--new-patients>.wrap>.sec__h{grid-column:1/-1}
  .sec--new-patients>.wrap>.sec__media{grid-column:1;grid-row:2 / span 3;margin:0;align-self:stretch}
  .sec--new-patients .sec__media img{aspect-ratio:auto;height:100%;min-height:420px}
  .sec--new-patients .steps{grid-template-columns:1fr 1fr;margin-top:0}
  .sec--faq>.wrap.narrow{max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .sec--faq>.wrap>.sec__h{grid-column:1/-1}
  .sec--faq>.wrap>.faq{grid-column:1;grid-row:2}
  .sec--faq>.wrap>.sec__media{grid-column:2;grid-row:2;margin:0;position:sticky;top:6rem}
  .sec--faq .sec__media img{aspect-ratio:4/5}
}
@media (max-width:860px){.sec--faq .sec__media img{aspect-ratio:21/9}}
/* hours: one wide office photo over two squares, about as tall as the address and hours column */
@media (min-width:861px){
  .visit{align-items:start}
  .visit__media{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .visit__media img{height:auto;min-height:0;aspect-ratio:1}
  .visit__media img:first-child{grid-column:1/-1;aspect-ratio:16/10}
}
@media (max-width:860px){
  .visit__media{grid-template-columns:1fr 1fr}
  .visit__media img{aspect-ratio:1}
  .visit__media img:first-child{grid-column:1/-1;aspect-ratio:16/10}
}
/* team portraits: four across, no empty fifth column */
@media (min-width:861px){.team__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* mobile hero: H1, lead and buttons first, then the dentist row, then the arch */
@media (max-width:860px){.hero-split .hero__doc{order:1;grid-template-columns:72px 1fr}}
/* service list: the photo marks each row; linked rows end in an arrow, no dot legend */
.look-porch .card--img .card__h::before,.look-porch .card--img .card__h a::before{content:none}
.look-porch .card--link .card__h a::after{content:" \2192";color:var(--accent)}
/* reviews: equal card heights */
.look-porch .quotes{align-items:stretch}
/* steps: a top hairline, not a side stripe */
.look-porch .step{border-left:0;border-top:2px solid var(--accent);border-radius:var(--radius-card)}
/* inner pages keep the arch: page head photos are arch-topped */
.look-porch .page-head__media img{border-radius:999px 999px var(--radius-photo) var(--radius-photo)}
/* service list with photos: no dot on any row (beats the unlinked-row dot rule); linked names carry an accent underline, no arrow */
.look-porch .card.card--img .card__h::before,.look-porch .card.card--img:not(.card--link) .card__h::before{content:none}
.look-porch .card--link .card__h a::after{content:none}
.look-porch .card--link .card__h a{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.25em}

/* Look: Grove. Re-skin of Porch: split hero, arched photo, overlapping portrait card, clip-path reveal (inherited).
   Own system: limestone ground, evergreen ink, one marigold sun that rises behind the arch.
   Type: Alegreya (display) over Albert Sans (body). Loads after porch/look.css. */
@font-face{font-family:"Alegreya";src:url(/assets/look/alegreya-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya";src:url(/assets/look/alegreya-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(/assets/look/albert-sans-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--f-display:"Alegreya",Georgia,serif;--f-body:"Albert Sans",system-ui,sans-serif;--fw-display:500;--ls-display:-0.012em;--h1-max:4.4rem;
  --fw-brand:600;--fw-quote:400;--radius-card:18px;--radius-photo:20px;--radius-btn:999px}
h1,h2{font-variation-settings:normal}
.sec__h{font-weight:500}
.brand__name{font-size:1.3rem}

/* hero (inherits the Porch arch and its clip-path opening). The sun: one marigold disc behind the arch shoulder. */
.hero-split .hero__h1{font-size:clamp(2.6rem,4.8vw,var(--h1-max));line-height:1.02;max-width:12ch}
.hero-split .hero__lead{color:var(--muted)}
.hero::before{content:"";position:absolute;z-index:-2;width:clamp(170px,19vw,290px);aspect-ratio:1;border-radius:50%;background:var(--sun);
  right:calc(clamp(1rem,3vw,2.5rem) + min(46%,640px) - clamp(110px,12vw,180px));top:clamp(1.5rem,4vw,3.5rem)}
/* Grove's own portrait: no white card. A round medallion on a small marigold disc, set as a byline under the buttons
   (desktop) or above the H1 (mobile), always on limestone so the caption keeps body contrast. */
.hero-split .hero__doc{--med:clamp(76px,6.5vw,92px);position:relative;isolation:isolate;grid-column:1;align-self:start;justify-self:start;width:auto;
  display:grid;grid-template-columns:var(--med) auto;align-items:center;column-gap:1.15rem;padding:0;background:none;box-shadow:none;border-radius:0;transform:none}
.hero-split .hero__doc::before{content:"";position:absolute;z-index:-1;left:calc(var(--med) * -.2);top:calc(var(--med) * -.16);width:calc(var(--med) * 1.08);aspect-ratio:1;border-radius:50%;background:var(--sun)}
.hero-split .hero__doc img{width:var(--med);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 4px var(--tone-hero)}
.hero-split .hero__doc figcaption{margin:0}
.hero-split .hero__inner{row-gap:1.75rem;align-content:center}
@media (max-width:860px){
  :root{--arch-h:34vh}
  .hero-split .hero__bg{height:var(--arch-h)}
  /* Porch puts the arch under the buttons on mobile (order 2, margin-bottom 2rem); the sun sits on its top left shoulder,
     fully inside the first 860px screen with the top of the arch */
  .hero::before{right:auto;left:.25rem;top:auto;bottom:calc(2rem + var(--arch-h) - 72px);width:112px}
  .hero-split .hero__inner{padding-block:1.25rem 1.75rem;gap:1.1rem}
  .hero-split .hero__doc{--med:80px;width:100%}
}
/* signature moment: the sun rises once, after the arch has opened; still under reduced motion */
@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:gr-sunrise 1.8s .55s cubic-bezier(.16,1,.3,1) both}
}
@keyframes gr-sunrise{from{transform:translateY(55%) scale(.86);opacity:0}to{transform:none;opacity:1}}

/* structure 1: services. Group names in a left column; each group is a two-column list hung on a line with marigold nodes */
.look-grove .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.75rem;margin:1.25rem 0 0}
.look-grove .card{background:none;border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none;padding:1rem 0 1.5rem 1.6rem}
.look-grove .sec[data-tone=base] .card{background:none}
.look-grove .card::before{content:"";position:absolute;left:-7px;top:1.35rem;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--tone-base);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.look-grove .card__h{font:600 1.3rem/1.25 var(--f-display);margin:0 0 .45rem}
.look-grove .card--link:hover{box-shadow:none}
.look-grove .card--link:hover::before{transform:scale(1.45)}
.look-grove .cards__group{font:500 clamp(1.35rem,1.9vw,1.7rem)/1.2 var(--f-display);letter-spacing:var(--ls-display);color:var(--heading);margin:2.6rem 0 0}
.look-grove .cards__group::after{content:"";display:block;width:2.25rem;height:3px;margin-top:.7rem;border-radius:2px;background:var(--sun)}
/* service photos: a small arched thumbnail beside each item on the line (the hero arch, in miniature); fixed width and ratio, no shift */
.look-grove .card--img{display:grid;grid-template-columns:clamp(72px,6.5vw,92px) minmax(0,1fr);column-gap:1.15rem;align-items:start}
.look-grove .card--img .card__img{grid-column:1;grid-row:1 / span 2;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;margin:0;border-radius:999px 999px 12px 12px}
.look-grove .card--img .card__h,.look-grove .card--img p{grid-column:2}
@media (min-width:861px){
  .look-grove .sec--services .wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2.3fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .look-grove .sec--services .sec__h,.look-grove .sec--services .sec__lead,.look-grove .sec--services .wrap>.cards:only-of-type{grid-column:1/-1}
  .look-grove .sec--services .cards__group{grid-column:1;margin-top:2.4rem}
  .look-grove .sec--services .cards{grid-column:2;margin-top:1.4rem}
}
@media (max-width:640px){.look-grove .cards{grid-template-columns:1fr}}

/* structure 2: reviews are not cards. Three large italic quotes, set on a slope */
.look-grove .quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.look-grove .quote{background:none;border:0;border-radius:0;padding:0}
.look-grove .quote:nth-child(2){margin-top:2.5rem}
.look-grove .quote:nth-child(3){margin-top:5rem}
.look-grove .quote blockquote{font:italic 400 clamp(1.2rem,1.6vw,1.4rem)/1.45 var(--f-display);color:var(--heading)}
.look-grove .quote blockquote::before{content:"\201C";display:block;font:700 4rem/.7 var(--f-display);color:var(--accent);margin-bottom:.4rem}
.look-grove .quote__by{font-size:.92rem;color:var(--muted);font-weight:600}
@media (max-width:860px){.look-grove .quotes{grid-template-columns:1fr}.look-grove .quote:nth-child(n){margin-top:0}}

/* doctor feature: the portrait repeats the hero's arch */
.look-grove .split__media{overflow:hidden;border-radius:999px 999px 22px 22px}
.look-grove .split__media img{border-radius:0}
.look-grove .doc__media img{border-radius:999px 999px 22px 22px}

/* highlights band: marigold rule over each point */
.look-grove .point{border-top:3px solid var(--sun);padding-top:1.1rem}

/* structure 3: the first-visit steps hang on one line with marigold nodes (the services motif); no numerals (taste rubric) */
.look-grove .steps{gap:2rem}
.look-grove .step{position:relative;background:none;border:0;border-radius:0;padding:2.75rem 0 0}
.look-grove .step::before{content:"";position:absolute;left:0;top:.75rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--sun);box-shadow:0 0 0 5px var(--tone-base)}
.look-grove .step::after{content:"";position:absolute;left:1.8rem;right:-1.3rem;top:1.25rem;height:2px;background:var(--line)}
.look-grove .step:last-child::after{display:none}
@media (min-width:1100px){.look-grove .sec--new-patients .steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
@media (min-width:761px) and (max-width:1099px){.look-grove .sec--new-patients .steps{grid-template-columns:repeat(2,minmax(0,1fr))}.look-grove .sec--new-patients .step:nth-child(2n)::after{display:none}}
.look-grove .steps--page .step{padding:0 0 1.75rem 3.2rem}
.look-grove .steps--page .step::before{left:.75rem;top:.25rem}
.look-grove .steps--page .step::after{left:1.25rem;right:auto;top:1.6rem;bottom:-.25rem;width:2px;height:auto}
@media (max-width:760px){
  .look-grove .steps .step{padding:0 0 1.75rem 3.2rem}
  .look-grove .steps .step::before{left:.75rem;top:.25rem}
  .look-grove .steps .step::after{left:1.25rem;right:auto;top:1.6rem;bottom:-.25rem;width:2px;height:auto;display:block}
  .look-grove .steps .step:last-child::after{display:none}
}

/* the second clinician chip: the renderer labels it (plan label also_team); keep the label quiet */
.look-grove .minidocs__h{font:600 .9rem/1.3 var(--f-body);color:var(--muted);margin-top:1.75rem}

/* tighter section rhythm (gate-10 r1: dead space at seams). Light to light seams keep the 170px ramp; text may sit in it
   because both tones are pale. The dark seams around the photo band use a 120 to 140px ramp and keep their text clear of it. */
.look-grove .sec{padding-block:clamp(3rem,5.5vw,4.75rem)}
.look-grove .sec--cta{padding-top:calc(170px + 2rem)}
.look-grove .sec--highlights{padding-top:calc(140px + clamp(1.5rem,3vw,2.5rem));padding-bottom:calc(90px + clamp(2rem,3.5vw,3rem));
  background:linear-gradient(in oklab to bottom,var(--prev) 0,var(--tone-photo) 140px,var(--tone-photo))}
/* the photo fades in under the top ramp and out over the last 90px only, so no empty dark slab under the columns */
.look-grove .sec--highlights .photo-band{-webkit-mask-image:linear-gradient(transparent 90px,#000 230px,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(transparent 90px,#000 230px,#000 calc(100% - 90px),transparent)}
.look-grove .sec--new-patients{padding-top:calc(120px + 2.25rem);background-image:linear-gradient(in oklab to bottom,var(--prev,var(--tone)) 0,var(--tone) 120px)}
@media (max-width:860px){.hero-split .hero__inner{min-height:0}}

/* photo slots. Each homepage section takes a different form from its neighbours:
   hero arch beside text, reviews arched window band, services arched thumbnails on the line, doctor arch beside text,
   highlights full bleed background band, new patients pill on the step line, visit photos beside the hours, FAQ medallion beside the heading. */
.look-grove .sec--reviews .sec__media{margin:1.75rem 0 0}
.look-grove .sec--reviews .sec__media img{aspect-ratio:16/5;border-radius:min(220px,30vw) min(220px,30vw) var(--radius-photo) var(--radius-photo)}
.look-grove .sec--new-patients .sec__media{margin:1.5rem 0 0}
.look-grove .sec--new-patients .sec__media img{aspect-ratio:5/1;border-radius:999px}
.look-grove .sec--faq .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(1.25rem,4vw,2.5rem);align-items:center}
.look-grove .sec--faq .wrap>*{grid-column:1/-1}
.look-grove .sec--faq .wrap>.sec__h{grid-column:1;grid-row:1;margin:0}
.look-grove .sec--faq .wrap>.sec__media{grid-column:2;grid-row:1;margin:0}
.look-grove .sec--faq .sec__media img{width:clamp(104px,14vw,164px);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 5px var(--tone-base),0 0 0 8px var(--sun)}
@media (max-width:640px){
  .look-grove .sec--reviews .sec__media img{aspect-ratio:16/9}
  .look-grove .sec--new-patients .sec__media img{aspect-ratio:5/2}
}
/* mobile visit: both office photos full width, none left at half width */
@media (max-width:860px){
  .look-grove .visit__media{grid-template-columns:1fr}
  .look-grove .visit__media img{grid-column:1/-1;aspect-ratio:16/10;height:auto}
}

/* inner page heads: the photo is a round medallion on the marigold sun (no motion: it is the LCP image) */
.look-grove .page-head__media{position:relative;isolation:isolate;justify-self:center;width:min(100%,340px)}
.look-grove .page-head__media::before{content:"";position:absolute;z-index:-1;left:-9%;top:-7%;width:48%;aspect-ratio:1;border-radius:50%;background:var(--sun)}
.look-grove .page-head__media img{aspect-ratio:1;border-radius:50%}
@media (max-width:860px){.look-grove .page-head__media{justify-self:start;width:min(64%,250px);margin-left:1rem}}
/* service page sections alternate form: a wide photo under the first heading, a round inset the text wraps around under the next */
@media (min-width:700px){
  .look-grove .prose__media:nth-of-type(even){float:right;width:min(32%,200px);margin:.3rem 0 .75rem 1.5rem;shape-outside:circle(50%)}
  .look-grove .prose__media:nth-of-type(even) img{aspect-ratio:1;border-radius:50%}
  .look-grove .prose h2,.look-grove .prose .faq,.look-grove .prose .reviewed{clear:both}
}
@media (max-width:699px){
  .look-grove .prose__media:nth-of-type(even){width:min(60%,220px)}
  .look-grove .prose__media:nth-of-type(even) img{aspect-ratio:1;border-radius:50%}
}

/* small chrome */
.look-grove .faq__item summary::after{color:var(--accent-deep)}
.look-grove .pills li{background:var(--alt)}

/* section_fx tokens (look.json). Each one is a scroll-linked layer; reduced motion or no scroll-timeline support: all static.
   parallax-scene: the sun is a third depth layer that sinks slower than the page; the band photo pans.
   image-reveal: the doctor's arch opens as it enters (the hero's clip-path reveal, repeated once); the visit photos unveil upward.
   line-draw: the line joining the first-visit steps draws from step to step. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero.parallax-scene::before{animation:gr-sunrise 1.8s .55s cubic-bezier(.16,1,.3,1) both,gr-parallax-sun linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 90vh}
    .sec--highlights.parallax-scene .photo-band{animation:po-parallax-band linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .sec--doctor.image-reveal .split__media{animation:gr-arch-open linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    .sec--visit.image-reveal .visit__media img{animation:gr-unveil linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
    .line-draw .step::after{transform-origin:left center;animation:gr-draw-x linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    @media (max-width:760px){.line-draw .step::after{transform-origin:center top;animation-name:gr-draw-y}}
  }
}
@keyframes gr-parallax-sun{from{translate:0 0}to{translate:0 30%}}
@keyframes gr-arch-open{from{clip-path:inset(30% 0 0 0 round 999px 999px 22px 22px)}to{clip-path:inset(0 0 0 0 round 999px 999px 22px 22px)}}
@keyframes gr-unveil{from{clip-path:inset(0 0 28% 0 round 20px)}to{clip-path:inset(0 0 0 0 round 20px)}}
@keyframes gr-draw-x{from{scale:0 1}to{scale:1 1}}
@keyframes gr-draw-y{from{scale:1 0}to{scale:1 1}}

/* inner pages end on the base tone, so the footer ramps from it (R6 open; remove when base.css carries it) */
body.inner .site-footer{background:linear-gradient(in oklab to bottom,var(--tone-base) 0,color-mix(in oklch,var(--tone-accent) 30%,var(--tone-base)) 50px,color-mix(in oklch,var(--tone-accent) 62%,var(--tone-base)) 100px,var(--tone-ink) 170px)}

/* render.mjs also puts look-porch on the body of a Porch re-skin, so Porch's own structure rules reach Grove.
   Undo each one here (same or higher specificity, later in the cascade). */
.look-grove .cards{display:grid;columns:auto}
.look-grove .card--link .card__h a::before,.look-grove .card:not(.card--link) .card__h::before{content:none}
.look-grove .quote:first-child{padding:0}
.look-grove .quote:first-child blockquote{font:italic 400 clamp(1.2rem,1.6vw,1.4rem)/1.45 var(--f-display)}

/* gate-10 r2 fixes (items 3, 4, 6, 7, 8, 9, 10, 12) */
/* item 3: mobile hero byline sits under the buttons, no marigold disc against the Call button */
@media (max-width:860px){
  .hero-split .hero__doc{order:1}
  .hero-split .hero__doc::before{display:none}
}
/* item 4: service tiles. Headings reserve two lines so body text tops line up; a lone last tile fills its row */
@media (min-width:641px){
  .look-grove .card__h{min-height:2.5em}
  .look-grove .card--img{grid-template-rows:auto 1fr;align-content:start}
  .look-grove .cards>li:last-child:nth-child(odd){grid-column:1/-1}
  .look-grove .cards>li:last-child:nth-child(odd) .card__h{min-height:0}
}
/* item 6: cream into the evergreen CTA band, and into the footer, through a sage midpoint (oklch mixed stops keep chroma) */
.look-grove .sec--cta{background-image:linear-gradient(in oklab to bottom,var(--prev) 0,color-mix(in oklch,var(--tone-accent) 30%,var(--prev)) 50px,color-mix(in oklch,var(--tone-accent) 62%,var(--prev)) 100px,var(--tone) 170px,var(--tone))}
.look-grove .site-footer{background:linear-gradient(in oklab to bottom,var(--tone-accent) 0,color-mix(in oklch,var(--tone-ink) 50%,var(--tone-accent)) 85px,var(--tone-ink) 170px)}
/* item 7: home only. The visit section already lists the hours, so the footer drops its copy */
.look-grove:not(.inner) .site-footer__grid>div:has(>.hours--compact){display:none}
@media (min-width:861px){.look-grove:not(.inner) .site-footer__grid{grid-template-columns:1.2fr 1fr}}
/* item 8: how we work. A few points more scrim under the text column; the photo past it stays lighter */
.look-grove .sec--highlights .photo-band::after{background:linear-gradient(90deg,color-mix(in srgb,var(--tone-photo) 85%,transparent) 0,color-mix(in srgb,var(--tone-photo) 68%,transparent) min(100%,calc(50% + 560px)),color-mix(in srgb,var(--tone-photo) 54%,transparent) 100%)}
/* item 9: linked service tiles carry an arrow after the heading; unlinked tiles carry none */
.look-grove .card--link .card__h::after{content:"\2192"/"";display:inline-block;margin-left:.35em;color:var(--accent-deep);font-family:var(--f-body);font-weight:600}
.look-grove .card:not(.card--link) .card__h::after{content:none}
@media (prefers-reduced-motion:no-preference){
  .look-grove .card--link .card__h::after{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .look-grove .card--link:hover .card__h::after{transform:translateX(.25em)}
}
/* item 10: new patients page timeline. The step heading drops the prose top margin so the dot sits on its first line */
.look-grove .steps--page .step h3{margin-top:0;line-height:1.3}
.look-grove .steps--page .step::before{top:.23rem} /* h3 1.2rem x 1.3 line: centre .78rem, dot 1.1rem */
/* item 12: doctors page. The portrait column follows the bio on desktop, below the sticky header */
@media (min-width:861px){
  .look-grove .doc__media{position:sticky;top:6rem;align-self:start}
  .look-grove .doc__media img{position:static}
}

:root{--bg:#F4F5EE;--alt:#E7EBDD;--card:#FFFFFF;--ink:#1F2B23;--muted:#4E5A50;--heading:#18261D;--accent:#E2A229;--on-accent:#1F2B23;--accent-deep:#7A5000;--focus:#7A5000;--line:rgba(31,43,35,.14);--star:#B07A12;--tone-hero-c:#F4F5EE;--hero-ink:#1F2B23;--hero-heading:#18261D;--hero-scrim:linear-gradient(transparent,transparent);--tone-photo-c:#20352A;--photo-scrim:linear-gradient(90deg,rgba(28,46,36,.80),rgba(28,46,36,.54));--tone-accent-c:#2C4A37;--cta-ink:#FFFFFF;--cta-btn:#E2A229;--cta-btn-ink:#1F2B23;--tone-ink-c:#1B2B21;--on-ink:#E9ECE0;--sun:#E2A229;--cta-scrim:linear-gradient(180deg,rgba(27,43,33,.65),rgba(27,43,33,.74))}