/* 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: Meadow (base design system). Soft sky field; two photos in organic rounded masks joined by a
   hand-drawn line that draws itself, then dims (svg-line-draw-self-drawing-then-dim, js/look.js).
   Rounded Fredoka display, Atkinson Hyperlegible Next body, one sunflower accent. */
@font-face{font-family:"Fredoka";src:url(/assets/look/fredoka-normal.woff2) format("woff2");font-weight:300 700;font-stretch:75% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/assets/look/atkinson-next-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/assets/look/atkinson-next-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
:root{--f-display:"Fredoka","Trebuchet MS",system-ui,sans-serif;--f-body:"Atkinson Hyperlegible Next",system-ui,sans-serif;--fw-display:600;--ls-display:-0.005em;--h1-max:4.4rem;--fw-brand:600;--fw-quote:500;
  --radius-card:26px;--radius-photo:30px;--radius-btn:999px;--fs-body:1.0625rem;
  --blob-a:62% 38% 46% 54% / 55% 46% 54% 45%;
  --mask-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 1C77 1 99 17 99 42C99 70 84 98 56 99C28 100 1 84 1 57C1 28 23 1 50 1Z'/%3E%3C/svg%3E");
  --mask-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M55 2C80 4 99 22 98 50C97 77 76 98 48 98C20 98 2 78 2 48C2 20 28 0 55 2Z'/%3E%3C/svg%3E");--blob-b:46% 54% 52% 48% / 40% 44% 56% 60%;--blob-c:48% 52% 44% 56% / 54% 46% 54% 46%;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.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)}
h1,h2,h3,.brand__name,.site-footer__name{font-stretch:104%}
.sec__h{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.08}
body{line-height:1.62}

/* ---------- hero: collage. Copy left; office photo in a blob at upper right; the lead dentist in a
   second blob below it, overlapping; a drawn line joins them (SVG added by js/look.js). ---------- */
body.hero-collage .hero{background:
  radial-gradient(42% 46% at 80% 16%,var(--field-glow) 0,transparent 70%),
  radial-gradient(34% 40% at 6% 34%,rgb(255 255 255 / .62) 0,transparent 72%),
  linear-gradient(180deg,color-mix(in oklab,var(--tone-hero) 62%,#fff) 0,var(--tone-hero) 62%,var(--tone-hero) 100%)}
body.hero-collage .hero__bg{inset:auto;top:clamp(1.5rem,3vw,2.25rem);right:max(1.25rem,calc((100vw - 1180px) / 2 + .25rem));width:min(34vw,480px);aspect-ratio:5/4;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 26px 30px rgb(19 67 106 / .22))}
body.hero-collage .hero__bg img{-webkit-mask:var(--mask-a) center/100% 100% no-repeat;mask:var(--mask-a) center/100% 100% no-repeat}
body.hero-collage .hero__bg::after{display:none}
body.hero-collage .hero__inner{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;min-height:min(80vh,720px);padding-block:clamp(2.5rem,5vw,4rem) clamp(5rem,8vw,7rem)}
body.hero-collage .hero__copy{position:relative;z-index:2;max-width:620px}
body.hero-collage .hero__h1{font-size:clamp(2.4rem,4.4vw,var(--h1-max));line-height:1.03;max-width:15ch;letter-spacing:-.012em}
body.hero-collage .hero__lead{max-width:40ch;font-size:clamp(1.08rem,1.35vw,1.22rem)}
body.hero-collage .hero__doc{position:relative;z-index:2;align-self:end;justify-self:start;width:min(100%,214px);margin:0 0 calc(-1 * clamp(3rem,6vw,5.5rem)) calc(-1 * clamp(2rem,6vw,5.5rem));text-align:left}
body.hero-collage .hero__doc figcaption{width:max-content;max-width:300px}
body.hero-collage .hero__doc img{aspect-ratio:4/5;border-radius:var(--blob-b);border:7px solid var(--card);box-shadow:0 26px 50px -26px rgb(19 67 106 / .55);background:var(--card)}
body.hero-collage .hero__docname{font:600 1.12rem/1.25 var(--f-display);color:var(--hero-heading)}
body.hero-collage .hero__docrole{opacity:1;color:var(--muted)}
body.hero-collage .hero .btn--ghost{border-color:color-mix(in oklab,var(--hero-ink) 55%,transparent)}
/* the drawn line: decorative, aria-hidden, sits between the photos and the copy */
.md-line{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;color:var(--line-ink);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.md-line .md-sun{color:var(--sun);stroke-width:2.6}
.js .md-line.draw-armed{transition:opacity 1.2s var(--ease-out)}
.js .md-line.draw-armed [data-draw]{stroke-dashoffset:var(--draw-len);transition:stroke-dashoffset 2.6s cubic-bezier(.33,0,.2,1) var(--draw-delay,0s)}
.js .md-line.draw-armed.drawn [data-draw]{stroke-dashoffset:0}
.js .md-line.draw-armed.settled{opacity:.42}
@media (prefers-reduced-motion:reduce){
  .js .md-line.draw-armed,.js .md-line.draw-armed [data-draw]{transition:none}
  .js .md-line.draw-armed [data-draw]{stroke-dashoffset:0}
}
/* layered-scroll-parallax-depth: photo slowest, line between, portrait fastest (CSS scroll timeline;
   js/look.js covers browsers without it). Small values, hero only. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    body.hero-collage .hero__bg{animation:md-parallax-photo linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .hero-collage .md-line{animation:md-parallax-line linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    body.hero-collage .hero__doc{animation:md-parallax-doc linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  }
}
@keyframes md-parallax-photo{from{translate:0 0}to{translate:0 -34px}}
@keyframes md-parallax-line{from{translate:0 0}to{translate:0 -62px}}
@keyframes md-parallax-doc{from{translate:0 0}to{translate:0 -90px}}
@media (max-width:860px){
  body.hero-collage .hero{display:flex;flex-direction:column}
  body.hero-collage .hero__bg{position:relative;inset:auto;width:auto;aspect-ratio:16/10;margin:1rem 1.25rem 0;right:auto;top:auto}
  body.hero-collage .hero__inner{grid-template-columns:1fr;padding-top:0;min-height:0}
  body.hero-collage .hero__doc{display:grid;order:-1;width:auto;margin:2.1rem 0 .9rem;grid-template-columns:1fr 84px;gap:1rem;align-items:center}
  body.hero-collage .hero__doc img{grid-column:2;grid-row:1;aspect-ratio:1;border-radius:var(--blob-b);border-width:5px}
  body.hero-collage .hero__doc figcaption{grid-column:1;grid-row:1;width:auto;max-width:none;margin:0}
  body.hero-collage .hero__h1{max-width:none;font-size:clamp(2rem,8.4vw,2.6rem)}
  body.hero-collage .hero__lead{font-size:1.02rem;margin-bottom:1.25rem}
}

/* ---------- structure below the hero ---------- */
/* reviews as speech bubbles, staggered, tails alternating */
.hero-collage .quotes{gap:2.25rem 1.5rem;align-items:start}
.hero-collage .quote{position:relative;background:var(--card);border:0;border-radius:30px 30px 30px 8px;padding:1.8rem 1.75rem 1.5rem;box-shadow:0 1px 0 var(--line),0 22px 44px -30px rgb(19 67 106 / .4)}
.hero-collage .quote::after{content:"";position:absolute;left:0;bottom:-15px;width:30px;height:16px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}
.hero-collage .quote:nth-child(2){margin-top:2.75rem;border-radius:30px 30px 8px 30px;background:color-mix(in oklab,var(--accent) 20%,var(--card))}
.hero-collage .quote:nth-child(2)::after{left:auto;right:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.hero-collage .quote blockquote{font-size:1.06rem;line-height:1.55}
.hero-collage .quote__by{font:600 .95rem/1.3 var(--f-display);color:var(--heading)}
@media (max-width:860px){.hero-collage .quote:nth-child(2){margin-top:0}}
/* services as soft tiles in clean rows */
.hero-collage .cards{gap:1rem}
.hero-collage .card{background:color-mix(in oklab,var(--tone-hero) 55%,var(--card));border:0;border-radius:var(--radius-card);padding:1.6rem 1.5rem 1.5rem}
.hero-collage .card__h{font-size:1.18rem;line-height:1.2}
.hero-collage .card--link .card__h a{text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 80%,transparent);text-decoration-thickness:3px;text-underline-offset:5px}
@media (min-width:1000px){.hero-collage .cards{grid-template-columns:repeat(4,1fr)}}
@media (min-width:600px) and (max-width:999px){.hero-collage .cards{grid-template-columns:repeat(2,1fr)}}
/* doctor feature: the photo in an organic mask */
.hero-collage .split__media img{border-radius:0;-webkit-mask:var(--mask-c) center/100% 100% no-repeat;mask:var(--mask-c) center/100% 100% no-repeat}
.hero-collage .pull{font-weight:500;color:var(--heading)}
/* new families: steps as a trail of numbered stops on a dashed path (a real sequence) */
.hero-collage .sec--new-patients .steps{counter-reset:md-step;gap:1.5rem;position:relative}
.hero-collage .step{background:none;border:0;border-radius:0;padding:0}
.hero-collage .step h3{font-size:1.22rem}
.hero-collage .step::before{counter-increment:md-step;content:counter(md-step);display:grid;place-items:center;width:54px;height:54px;margin-bottom:1rem;border-radius:46% 54% 50% 50% / 52% 48% 52% 48%;background:var(--accent);color:var(--on-accent);font:600 1.35rem/1 var(--f-display);box-shadow:0 0 0 7px var(--tone-base);position:relative;z-index:1}
@media (min-width:861px){
  .hero-collage .sec--new-patients .steps{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .hero-collage .sec--new-patients .step{position:relative}
  .hero-collage .sec--new-patients .step:not(:last-child)::after{content:"";position:absolute;left:66px;right:calc(-1.5rem + 8px);top:26px;height:2px;background-image:linear-gradient(90deg,var(--line-ink) 0 55%,transparent 55% 100%);background-size:14px 2px;opacity:.55}
}

.hero-collage .steps--page{counter-reset:md-step}
.hero-collage .steps--page .step{display:grid;grid-template-columns:54px 1fr;column-gap:1.1rem;align-items:start}
.hero-collage .steps--page .step::before{grid-row:span 2;margin:0}
/* line-art corner drawings carry the hero line through the page (static, decorative) */
.hero-collage .sec--reviews{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 120' fill='none' stroke='%234A7C8C' stroke-opacity='.38' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 92c0-18 16-30 32-26 4-20 26-32 46-22 10-18 40-20 54-2 22-6 40 10 36 30 16 4 22 22 10 30H28c-6-2-9-6-8-10z'/%3E%3Cpath d='M214 30c10-8 22-8 30 0'/%3E%3C/svg%3E"),linear-gradient(in oklab to bottom,var(--prev,var(--tone)) 0,var(--tone) 170px);background-repeat:no-repeat;background-position:right max(2rem,6vw) top clamp(1.5rem,3.5vw,3rem),0 0;background-size:min(220px,30vw) auto,100% 100%}
.hero-collage .sec--services{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 170' fill='none' stroke='%234A7C8C' stroke-opacity='.4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M70 166C66 120 74 82 70 40'/%3E%3Cpath d='M70 120c-22-4-36-20-38-40 22 2 36 18 38 40z'/%3E%3Cpath d='M71 92c18-6 30-22 30-40-20 4-30 20-30 40z'/%3E%3Ccircle cx='70' cy='26' r='14'/%3E%3Cpath d='M70 4v6M92 26h-6M54 26h-6M85 11l-4 4M55 11l4 4'/%3E%3C/svg%3E"),linear-gradient(in oklab to bottom,var(--prev,var(--tone)) 0,var(--tone) 170px);background-repeat:no-repeat;background-position:right max(1.5rem,4vw) top clamp(2.5rem,5vw,4rem),0 0;background-size:min(120px,20vw) auto,100% 100%}
.hero-collage .sec--new-patients{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' fill='none' stroke='%234A7C8C' stroke-opacity='.36' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 70c40-40 80-40 110-10s70 30 100-6 60-40 78-20'/%3E%3Cpath d='M250 26l-8-14M262 22l2-16M272 30l12-10'/%3E%3C/svg%3E"),linear-gradient(in oklab to bottom,var(--prev,var(--tone)) 0,var(--tone) 170px);background-repeat:no-repeat;background-position:right max(1.5rem,5vw) top clamp(3rem,6vw,5rem),0 0;background-size:min(260px,40vw) auto,100% 100%}
/* tighter rhythm: the seam ramps already add air between sections */
.hero-collage .sec:not(.sec--highlights){padding-block:clamp(3.75rem,6.5vw,5.75rem)}
/* visit: one large photo in a blob, the second smaller and overlapping its lower edge */
.hero-collage .visit{align-items:center}
.hero-collage .visit__media{grid-template-columns:1fr;gap:0}
.hero-collage .visit__media img{border-radius:var(--radius-photo)}
.hero-collage .visit__media img:first-child{border-radius:0;aspect-ratio:5/4;-webkit-mask:var(--mask-a) center/100% 100% no-repeat;mask:var(--mask-a) center/100% 100% no-repeat}
.hero-collage .visit__media img:nth-child(2){width:58%;height:auto;aspect-ratio:4/3;justify-self:end;margin-top:-5rem;border:7px solid var(--card);position:relative;box-shadow:0 24px 44px -28px rgb(19 67 106 / .5)}
.hero-collage .visit__media img:nth-child(3){display:none}
/* faq: rounded markers */
.hero-collage .faq__item summary::after{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--alt);font:500 1.35rem/1 var(--f-display)}
.hero-collage .faq__q{font:600 1.08rem/1.35 var(--f-display);color:var(--heading)}
/* inner pages */
.hero-collage .page-head__media img{border-radius:0;aspect-ratio:5/4;object-fit:cover;-webkit-mask:var(--mask-a) center/100% 100% no-repeat;mask:var(--mask-a) center/100% 100% no-repeat}
.hero-collage .doc__media img{border-radius:var(--blob-b)}
.hero-collage .pills li{background:color-mix(in oklab,var(--tone-hero) 70%,var(--card))}
/* a reveal that a script has marked as shown (class "in") stays shown; see shared request R6 */
.hero-collage .reveal.in{animation:none} /* also in base.css since R6; kept for older renders */

/* seams into deep bands route through a saturated sky blue, never a grey trough; text starts below the ramp */
.hero-collage .sec--highlights{background:linear-gradient(in oklab to bottom,var(--prev) 0,color-mix(in oklab,var(--line-ink) 75%,var(--prev)) 80px,var(--tone-photo) 170px,var(--tone-photo))}
.hero-collage .sec.sec--cta{padding-top:max(11.5rem,13vw);background:linear-gradient(in oklab to bottom,var(--prev) 0,color-mix(in oklab,var(--line-ink) 75%,var(--prev)) 80px,var(--tone-accent) 170px,var(--tone-accent))}
.hero-collage .sec--highlights + .sec{padding-top:max(11.5rem,13vw);background-image:linear-gradient(in oklab to bottom,var(--tone-photo) 0,color-mix(in oklab,var(--line-ink) 70%,var(--tone-base)) 90px,var(--tone) 170px)}
.hero-collage .sec--highlights + .sec--new-patients{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' fill='none' stroke='%234A7C8C' stroke-opacity='.36' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 70c40-40 80-40 110-10s70 30 100-6 60-40 78-20'/%3E%3Cpath d='M250 26l-8-14M262 22l2-16M272 30l12-10'/%3E%3C/svg%3E"),linear-gradient(in oklab to bottom,var(--tone-photo) 0,color-mix(in oklab,var(--line-ink) 70%,var(--tone-base)) 90px,var(--tone) 170px)}
/* inner pages: the page head fades back to the page tone and carries a small line drawing; the footer
   washes in from the page tone instead of cutting to navy */
.hero-collage .page-head{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' fill='none' stroke='%234A7C8C' stroke-opacity='.4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='150' cy='34' r='16'/%3E%3Cpath d='M150 8v6M150 54v6M124 34h6M170 34h6M132 16l4 4M164 48l4 4M168 16l-4 4M136 48l-4 4'/%3E%3Cpath d='M8 104c30-26 60-28 84-8s50 16 72-10'/%3E%3C/svg%3E"),linear-gradient(in oklab to bottom,var(--tone-base) 0,var(--tone-hero) 140px,var(--tone-hero) calc(100% - 150px),var(--tone-base) 100%);background-repeat:no-repeat;background-position:right max(1.5rem,6vw) top 3.5rem,0 0;background-size:min(200px,30vw) auto,100% 100%;padding-bottom:clamp(4.5rem,8vw,7rem)}
.hero-collage .page-head:has(.page-head__media){background-size:0 0,100% 100%}
.inner.hero-collage .site-footer{background:linear-gradient(in oklab to bottom,var(--tone-base) 0,color-mix(in oklab,var(--line-ink) 75%,var(--tone-base)) 90px,var(--tone-ink) 190px,var(--tone-ink));padding-top:clamp(13rem,16vw,15rem)}
.hero-collage .faq__q{margin:0}
.hero-collage .faq__item summary{align-items:center}
/* phones: line drawings step aside so they never cross text */
@media (max-width:600px){
  .hero-collage .sec--reviews,.hero-collage .sec--services,.hero-collage .sec--new-patients,.hero-collage .page-head{background-size:0 0,100% 100%}
}

/* layered depth below the hero (section_fx tokens md-drift, md-depth): transforms only, content always visible */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .md-drift .split__media img{animation:md-parallax-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .md-depth .visit__media img:nth-child(2){animation:md-parallax-depth linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes md-parallax-drift{from{translate:0 18px}to{translate:0 -18px}}
@keyframes md-parallax-depth{from{translate:0 44px}to{translate:0 -44px}}
/* rework 2026-10-07: service tile photos bleed to the card edge under a soft organic top; two columns on
   phones so eight tiles do not stack into a long scroll; the mobile hero puts the H1 and call button
   before the office photo; the photo band exits through sky blue, not slate */
.hero-collage .card--img{padding-top:0;overflow:hidden}
.hero-collage .card--img .card__img{width:calc(100% + 3rem);max-width:none;margin:0 -1.5rem 1.1rem;border-radius:0 0 46% 54% / 0 0 14% 12%;aspect-ratio:16/11}
@media (max-width:599px){
  .hero-collage .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .hero-collage .card{padding:0 .9rem 1rem}
  .hero-collage .card--img .card__img{width:calc(100% + 1.8rem);margin:0 -.9rem .8rem}
  .hero-collage .card__h{font-size:1.02rem}
  .hero-collage .card p{font-size:.92rem;line-height:1.45}
}
@media (max-width:860px){
  body.hero-collage .hero__bg{order:2;margin:0 1.25rem 2.5rem}
}
.hero-collage .sec--highlights + .sec{background-image:linear-gradient(in oklab to bottom,var(--tone-photo) 0,color-mix(in oklab,var(--line-ink) 55%,var(--tone)) 80px,var(--tone) 170px);background-size:100% 100%;background-position:0 0}
.hero-collage .sec__media img,.hero-collage .prose__media img{border-radius:var(--radius-photo)}
/* rework 2026-10-07, council round 1 */
/* photo band: lighter scrim (look.json) and no empty dimmed photo under the copy */
.hero-collage .sec--highlights{padding-bottom:max(8.5rem,9vw)}
/* three section photos on the home page take three forms: reviews photo in an organic mask beside the
   heading row, new families photo as the wide band, FAQ photo beside the questions */
@media (min-width:861px){
  .hero-collage .sec--reviews .sec__media{margin:1.75rem 0 -9rem}
  .hero-collage .sec--reviews .sec__media img{aspect-ratio:21/8;border-radius:var(--radius-photo) var(--radius-photo) 0 0;-webkit-mask-image:linear-gradient(#000 45%,transparent 92%);mask-image:linear-gradient(#000 45%,transparent 92%)}
  .hero-collage .sec--reviews .quotes{position:relative;z-index:1;padding-inline:clamp(1rem,3vw,2.5rem)}
  .hero-collage .sec--faq .narrow{max-width:1180px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(2rem,5vw,4rem);align-items:start}
  .hero-collage .sec--faq .sec__h{grid-column:1/-1}
  .hero-collage .sec--faq .sec__media{grid-column:1;grid-row:2;margin:0;position:sticky;top:6rem}
  .hero-collage .sec--faq .sec__media img{aspect-ratio:4/5;border-radius:var(--blob-b)}
  .hero-collage .sec--faq .narrow > :not(.sec__h):not(.sec__media){grid-column:2}
}
/* treatment pages: section photos alternate between a wide strip and an organic inset beside the text */
.hero-collage .prose__media img{aspect-ratio:16/7}
@media (min-width:861px){
  .hero-collage .prose > h2{clear:both}
  .hero-collage .prose__media:nth-of-type(2n){float:right;width:42%;margin:.35rem 0 1rem 1.75rem}
  .hero-collage .prose__media:nth-of-type(2n) img{aspect-ratio:1;border-radius:0;-webkit-mask:var(--mask-a) center/100% 100% no-repeat;mask:var(--mask-a) center/100% 100% no-repeat}
  .hero-collage .prose .faq,.hero-collage .prose .reviewed{clear:both}
}
/* new families page: the sun and sprout line art beside "Your child's first visit" */
.hero-collage.inner .prose:has(> .steps--page) > h2:nth-of-type(2)::after{content:"";display:block;float:right;width:120px;height:146px;margin:-.5rem 0 1rem 1.5rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 170' fill='none' stroke='%232C6E9C' stroke-opacity='.55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M70 166C66 120 74 82 70 40'/%3E%3Cpath d='M70 120c-22-4-36-20-38-40 22 2 36 18 38 40z'/%3E%3Cpath d='M71 92c18-6 30-22 30-40-20 4-30 20-30 40z'/%3E%3Ccircle cx='70' cy='26' r='14' stroke='%23F4B740'/%3E%3Cpath d='M70 4v6M92 26h-6M54 26h-6M85 11l-4 4M55 11l4 4' stroke='%23F4B740'/%3E%3C/svg%3E") center/contain no-repeat}
/* steps: sunflower dots, no numerals (rubric: no numbered care steps) */
.hero-collage .step::before{content:"";background:radial-gradient(circle,var(--on-accent) 0 4px,transparent 5px),var(--accent)}
/* service tiles on phones: one column, photo left of the title and text */
@media (max-width:599px){
  .hero-collage .cards{grid-template-columns:1fr;gap:.75rem}
  .hero-collage .card.card--img{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:.9rem;align-items:start;padding:.75rem .9rem .75rem .75rem}
  .hero-collage .card--img .card__img{grid-column:1;grid-row:1/span 2;width:104px;height:104px;margin:0;aspect-ratio:1;border-radius:var(--blob-b)}
  .hero-collage .card--img .card__h,.hero-collage .card--img p{grid-column:2}
  .hero-collage .card__h{font-size:1.05rem;margin:.1rem 0 .3rem}
}
/* phone numbers and hours in Fredoka, so zeros are not slashed */
.hero-collage .btn,.hero-collage .nav-call,.hero-collage .hours,.hero-collage .visit__addr,.hero-collage .site-footer .hours{font-family:var(--f-display)}
/* closing band: the sun and sprout line art */
.hero-collage .sec.sec--cta{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 170' fill='none' stroke='%23F4B740' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M70 166C66 120 74 82 70 40'/%3E%3Cpath d='M70 120c-22-4-36-20-38-40 22 2 36 18 38 40z'/%3E%3Cpath d='M71 92c18-6 30-22 30-40-20 4-30 20-30 40z'/%3E%3Ccircle cx='70' cy='26' r='14'/%3E%3Cpath d='M70 4v6M92 26h-6M54 26h-6M85 11l-4 4M55 11l4 4'/%3E%3C/svg%3E"),linear-gradient(in oklab to bottom,var(--prev) 0,color-mix(in oklab,var(--line-ink) 75%,var(--prev)) 80px,var(--tone-accent) 170px,var(--tone-accent));background-repeat:no-repeat;background-position:right max(2rem,8vw) bottom 2.5rem,0 0;background-size:min(150px,26vw) auto,100% 100%}
/* mobile hero: H1 first, then the dentist, then the photo, joined by the line */
@media (max-width:860px){
  body.hero-collage .hero__doc{order:2;margin:1.75rem 0 0}
}

/* overlap fix 2026-10-23 (Meadow, Burrow): on phones the H1 sat flush under the header (padding-top 0 above beat
   Burrow's 1.5rem), and on the samples the fixed Colors pill (header bottom + 8px, 40px tall) touched it. Kite keeps
   the center layout's own padding (base.css). */
@media (max-width:860px){
  body.hero-collage .hero__inner{padding-top:1.5rem}
  body.hero-collage.has-psw .hero__inner{padding-top:3.75rem}
}

/* Look: Kite. A re-skin of Meadow for pediatrics. Meadow's sky field, masked photo collage and drawn line
   stay (the line reads as a kite string); Kite brings its own type pair (Gabarito display, Lexend text),
   a periwinkle or peach-dusk sky, and flies the new-family steps as small kites along the string, so the
   sequence needs no numerals. Loads after meadow/look.css. */
@font-face{font-family:"Gabarito";src:url(/assets/look/gabarito-normal.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Lexend";src:url(/assets/look/lexend-normal.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{--f-display:"Gabarito","Trebuchet MS",system-ui,sans-serif;--f-body:"Lexend",system-ui,sans-serif;--fw-display:700;--fw-brand:700;--fw-quote:600;--ls-display:-0.018em;--h1-max:4.1rem;--fs-body:1.02rem}
body{line-height:1.66}
.hero__docname,.hero-collage .hero__docname{font-weight:700}
.hero-collage .faq__q{font-weight:600}
.btn{font-weight:600;letter-spacing:.005em}

/* new families: each step is a small kite on the string (diamond with a cross spar), no step numerals */
.hero-collage .step::before{content:"";counter-increment:none;width:40px;height:64px;margin-bottom:.6rem;border-radius:0;box-shadow:none;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M20 1L38 19L20 44L2 19Z'/%3E%3Cpath d='M20 44c-7 5 7 9 0 13s6 5 1 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M20 1L38 19L20 44L2 19Z'/%3E%3Cpath d='M20 44c-7 5 7 9 0 13s6 5 1 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (min-width:861px){
  .hero-collage .sec--new-patients .step:not(:last-child)::after{left:52px;top:19px}
}
.hero-collage .steps--page .step{grid-template-columns:40px 1fr}

/* a kite drawing replaces Meadow's cloud in the reviews corner (static, decorative) */
.hero-collage .sec--reviews{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%235A5F86' stroke-opacity='.42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M120 10L160 52L120 112L80 52Z'/%3E%3Cpath d='M120 10V112M80 52H160'/%3E%3Cpath d='M120 112c-14 16 12 26-2 42s10 24-4 40'/%3E%3Cpath d='M112 136l10-2-6 8zM120 166l-10-2 6 8z'/%3E%3C/svg%3E"),linear-gradient(in oklab to bottom,var(--prev,var(--tone)) 0,var(--tone) 170px)}

/* grouped services: the group name is a real heading over its row of three tiles */
.look-kite .cards__group{font:700 1.35rem/1.2 var(--f-display);color:var(--heading);margin:2.75rem 0 0;padding-left:1.4rem;position:relative}
.look-kite .cards__group::before{content:"";position:absolute;left:0;top:.15em;width:14px;height:22px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M20 1L38 19L20 44L2 19Z'/%3E%3Cpath d='M20 44c-7 5 7 9 0 13s6 5 1 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M20 1L38 19L20 44L2 19Z'/%3E%3Cpath d='M20 44c-7 5 7 9 0 13s6 5 1 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.look-kite .sec__lead+.cards__group{margin-top:1.75rem}
.look-kite .cards__group+.cards{margin-top:1rem}
@media (min-width:1000px){.look-kite .cards__group+.cards{grid-template-columns:repeat(3,1fr)}}

/* animate-in (doctor, visit, faq; look.json section_fx keeps Meadow's hero, reviews and new-patients
   tokens): masked photos drift up into place and questions rise as they enter view. Forward fill only,
   so before the range starts each element shows its final state; nothing under reduced motion. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .look-kite .animate-in .split__media img,.look-kite .animate-in .visit__media img:first-child{animation:kt-drift linear forwards;animation-timeline:view();animation-range:entry 0% cover 40%}
    .look-kite .animate-in .faq__item{animation:kt-rise linear forwards;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes kt-drift{from{translate:0 36px}to{translate:0 0}}
@keyframes kt-rise{from{translate:0 22px;opacity:.2}to{translate:0 0;opacity:1}}

/* hero: Meadow's sun and sprig give way to the kite that kite/js/look.js ties to the line */
.look-kite .md-line .md-sun,.look-kite .md-line>path:not([class]){display:none}
.look-kite .kt-kite{color:var(--sun)}
.look-kite .kt-body{fill:var(--sun);fill-opacity:.9}
.look-kite .kt-string{stroke-width:1.6}
/* Eli 2026-10-26: the drawn kite read as AI slop and the 21:8 frame cut the photo's real kite off at the top.
   Hide the drawn kite and string; show the whole 3:2 photo so its kite and the children both fit. */
.look-kite .kt-kite,.look-kite .kt-string,.look-kite .hero .md-line{display:none}
body.look-kite:not(.hero-layout-own).hero-layout-center .hero__bg{aspect-ratio:3/2!important}

/* reviews: notes pinned along a string, each hanging a little crooked, instead of speech bubbles */
.look-kite .quotes{position:relative;padding-top:2.25rem;gap:2rem 1.75rem}
.look-kite .quotes::before{content:"";position:absolute;left:-1rem;right:-1rem;top:0;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none' fill='none' stroke='%235A5F86' stroke-opacity='.5' stroke-width='2'%3E%3Cpath d='M0 6C250 40 750 40 1000 6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.look-kite .quote,.look-kite .quote:nth-child(2){margin-top:0;border-radius:14px;background:var(--card);box-shadow:0 1px 0 var(--line),0 22px 40px -30px rgb(30 36 64 / .45)}
.look-kite .quote:nth-child(2){background:color-mix(in oklab,var(--sun) 12%,var(--card))}
.look-kite .quote::after,.look-kite .quote:nth-child(2)::after{content:"";left:50%;right:auto;top:-14px;bottom:auto;width:12px;height:22px;margin-left:-6px;border-radius:3px;background:var(--accent);clip-path:none}
@media (min-width:861px){
  .look-kite .quote:nth-child(3n+1){rotate:-1.2deg;margin-top:.4rem}
  .look-kite .quote:nth-child(3n+2){rotate:.8deg;margin-top:1.3rem}
  .look-kite .quote:nth-child(3n+3){rotate:-.6deg;margin-top:.5rem}
}

/* services: one row per group, the group name at left and its care in an open three-column list
   (no tiles), so the section reads differently from the reviews above it */
.look-kite .sec--services .wrap:has(.cards__group){display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);column-gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.look-kite .sec--services .wrap:has(.cards__group)>.sec__h,.look-kite .sec--services .wrap:has(.cards__group)>.sec__lead{grid-column:1/-1}
.look-kite .sec--services .cards__group,.look-kite .sec__lead+.cards__group{margin:2.25rem 0 0;padding-top:1.1rem;border-top:2px solid var(--accent)}
.look-kite .sec--services .cards__group::before{top:1.25rem}
.look-kite .sec--services .cards__group+.cards{margin:2.25rem 0 0;gap:0 1.75rem;border-top:1px solid var(--line)}
.look-kite .sec--services .cards__group~.cards .card{background:none;border-radius:0;padding:1.1rem 0 1.2rem}
@media (min-width:1000px){.look-kite .sec--services .cards__group+.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.look-kite .sec--services .wrap:has(.cards__group){grid-template-columns:1fr}.look-kite .sec--services .cards__group+.cards{margin-top:.75rem}}

/* corner drawings: kites, not Meadow's sun, sprig and cloud */
.look-kite .sec--services{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 170' fill='none' stroke='%235A5F86' stroke-opacity='.4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M70 6L100 38L70 80L40 38Z'/%3E%3Cpath d='M70 6V80M40 38H100'/%3E%3Cpath d='M70 80c-12 14 10 22-2 36s10 20-4 34'/%3E%3C/svg%3E"),linear-gradient(in oklab to bottom,var(--prev,var(--tone)) 0,var(--tone) 170px)}
.look-kite .page-head{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' fill='none' stroke='%235A5F86' stroke-opacity='.4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M150 6L174 32L150 66L126 32Z'/%3E%3Cpath d='M150 6V66M126 32H174'/%3E%3Cpath d='M150 66C130 90 60 80 8 112'/%3E%3C/svg%3E"),linear-gradient(in oklab to bottom,var(--tone-base) 0,var(--tone-hero) 140px,var(--tone-hero) calc(100% - 150px),var(--tone-base) 100%)}

/* one kite doodle per screen: the services corner stays clear (council r2) */
.look-kite .sec--services{background-size:0 0,100% 100%}

/* rework 2026-10-07 */
/* kite line art where Meadow (changed tonight) draws its sun and sprout: closing band and new families page */
.look-kite.hero-collage .sec.sec--cta{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 190' fill='none' stroke='%23F4F5FD' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M86 6L120 42L86 92L52 42Z'/%3E%3Cpath d='M86 6V92M52 42H120'/%3E%3Cpath d='M86 92c-16 18 12 30-4 48s12 26-6 46'/%3E%3Cpath d='M78 120l10-2-6 8zM84 152l-10-2 6 8z'/%3E%3C/svg%3E"),linear-gradient(in oklab to bottom,var(--prev) 0,color-mix(in oklab,var(--line-ink) 75%,var(--prev)) 80px,var(--tone-accent) 170px,var(--tone-accent))}
.look-kite.hero-collage.inner .prose:has(> .steps--page) > h2:nth-of-type(2)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 170' fill='none' stroke='%234B4FA0' stroke-opacity='.55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 6L112 40L80 86L48 40Z' stroke='%23C93A40'/%3E%3Cpath d='M80 6V86M48 40H112' stroke='%23C93A40'/%3E%3Cpath d='M80 86c-14 16 12 26-4 42s10 22-6 38'/%3E%3C/svg%3E")}
/* wordmark: a small kite before the practice name, so the motif is on every screen */
.look-kite .brand__name::before{content:"";display:inline-block;width:.72em;height:1.05em;margin-right:.42em;vertical-align:-.18em;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M20 1L38 19L20 44L2 19Z'/%3E%3Cpath d='M20 44c-7 5 7 9 0 13s6 5 1 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M20 1L38 19L20 44L2 19Z'/%3E%3Cpath d='M20 44c-7 5 7 9 0 13s6 5 1 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* services: the open three-column list carries a photo over each item (image cards), photo left on phones */
@media (min-width:600px){
  .look-kite .sec--services .cards__group~.cards .card--img{padding-top:1.25rem;overflow:visible}
  .look-kite .sec--services .cards__group~.cards .card--img .card__img{width:100%;margin:0 0 1rem;aspect-ratio:4/3;border-radius:18px 18px 18px 4px;box-shadow:0 18px 34px -26px rgb(30 36 64 / .55)}
}
@media (max-width:599px){
  .look-kite .sec--services .cards__group~.cards .card.card--img{padding:.9rem 0}
}
/* our doctors: masks and sides alternate down the page */
@media (min-width:861px){
  .look-kite .doc:nth-of-type(2n){grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .look-kite .doc:nth-of-type(2n) .doc__media{order:2}
}
.look-kite .doc:nth-of-type(3n+2) .doc__media img{border-radius:var(--blob-a)}
.look-kite .doc:nth-of-type(3n) .doc__media img{border-radius:var(--blob-c)}
/* highlights band: the photo is dimmed by brightness (hue kept) under a light periwinkle scrim, so the
   citrus foliage reads as a photo and not as a navy field (council r1 #4: band too dark) */
.look-kite .sec--highlights .photo-band{filter:brightness(.6) saturate(1.08)}

/* council round 1 (2026-10-07) */
/* phones: the closing kite drawing collided with the text and buttons; the hero H1 sat tight under the header */
@media (max-width:700px){.look-kite.hero-collage .sec.sec--cta{background-size:0 0,100% 100%}}
@media (max-width:860px){.look-kite.hero-collage .hero__copy{padding-top:1.75rem}}
/* phones: the highlights band ran about 400px of wash above and 700px below its content; shorter washes */
@media (max-width:860px){
  .look-kite.hero-collage .sec--highlights{padding-top:8.5rem;padding-bottom:4.5rem}
  .look-kite.hero-collage .sec--highlights .photo-band{-webkit-mask-image:linear-gradient(transparent 40px,#000 150px,#000 calc(100% - 110px),transparent);mask-image:linear-gradient(transparent 40px,#000 150px,#000 calc(100% - 110px),transparent)}
  .look-kite.hero-collage .sec--highlights+.sec{padding-top:calc(110px + 2.5rem)}
}
/* questions: a wide photo card above the list, so it no longer repeats the visit section's photo-beside-text form */
@media (min-width:861px){
  .look-kite.hero-collage .sec--faq .narrow{display:block;max-width:900px}
  .look-kite.hero-collage .sec--faq .sec__media{position:static;margin:0 0 2.25rem}
  .look-kite.hero-collage .sec--faq .sec__media img{aspect-ratio:21/8;border-radius:var(--blob-c)}
}
/* services: the unlinked tile keeps the same title rule (a sticky rail heading was tried and removed: it did not release at the end of its group, council-rv) */
.look-kite .sec--services .card:not(.card--link) .card__h{text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 35%,transparent);text-decoration-thickness:3px;text-underline-offset:5px}
/* our doctors: kite markers in place of browser bullets */
.look-kite .doc__copy ul{list-style:none;padding-left:0}
.look-kite .doc__copy ul li{position:relative;padding-left:1.3rem}
.look-kite .doc__copy ul li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:14px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M20 1L38 19L20 44L2 19Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M20 1L38 19L20 44L2 19Z'/%3E%3C/svg%3E") center/contain no-repeat}

:root{--bg:#FBFCFF;--alt:#EEF0FB;--card:#FFFFFF;--ink:#1E2440;--muted:#4A4F6E;--heading:#2A2470;--accent:#C93A40;--on-accent:#FFFFFF;--accent-deep:#A82E35;--line:rgba(30,36,64,.14);--star:#B97D0E;--tone-hero-c:#E3E6FA;--hero-ink:#1E2440;--hero-heading:#2A2470;--hero-scrim:transparent;--tone-photo-c:#2B2F5C;--photo-scrim:linear-gradient(180deg,rgba(43,47,92,.3),rgba(43,47,92,.5));--tone-accent-c:#2B2F5C;--cta-ink:#F4F5FD;--cta-btn:#C93A40;--cta-btn-ink:#FFFFFF;--tone-ink-c:#1B1E3D;--on-ink:#E6E8F6;--cta-scrim:transparent;--sun:#E5484D;--line-ink:#4B4FA0;--field-glow:#FFE9E4}