/* 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: Atelier. Oversized clinician portrait bleeding off the right edge over a stone field, a small
   inset office frame, copy left, the lead clinician's signature drawn beside the portrait.
   Effects (effects-library ids, weights and reduced-motion rules copied from the catalog):
   - svg-signature-line-draw-on-scroll (animejs, premium): js/look.js. Reduced motion: signature shows drawn, no stroke animation.
   - layered-scroll-parallax-depth (js-light, default_consider; here the CSS scroll-timeline path only): inset frame and portrait drift at two depths. Reduced motion: layers static.
   - svg-fractal-noise-grain-texture-overlay (css-only): grain on the stone field. Static, no motion. */
@font-face{font-family:"Bodoni Moda";src:url(/assets/look/bodoni-moda.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/assets/look/bodoni-moda-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/look/public-sans.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--f-display:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;--f-body:"Public Sans",system-ui,sans-serif;--fw-display:500;--ls-display:-0.01em;--h1-max:4.5rem;
  --radius-card:3px;--radius-photo:2px;--radius-btn:999px;--fw-quote:400;--fw-brand:500;
  --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);
  --at-portrait:min(44vw,720px);--at-ease:cubic-bezier(.16,1,.3,1)}
body{font-feature-settings:"kern","lnum"}
h1,h2,h3{font-optical-sizing:auto}
.sec__h,.prose h2{font-weight:500}
.brand__name{font-size:1.25rem;letter-spacing:0}
.btn{font-weight:600;letter-spacing:.01em}
.btn--primary{box-shadow:inset 0 -2px rgb(0 0 0 / .18)}
.link-arrow{border-bottom-width:1px}

/* hero: the stone field carries a fine grain (svg-fractal-noise-grain-texture-overlay) so it is a surface, not a flat band */
.hero-portrait .hero{background-color:var(--tone-hero);background-image:linear-gradient(to bottom,transparent calc(100% - 170px),var(--tone-hero)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .11 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 18% 30%,rgb(255 255 255 / .22),transparent 60%)}
body.hero-portrait .hero__inner{grid-template-columns:minmax(0,1fr);min-height:min(90vh,860px);padding-block:clamp(3.5rem,8vw,7rem) clamp(9rem,14vw,11rem);align-items:start}
.hero-portrait .hero__copy{max-width:calc(100% - var(--at-portrait) + (100vw - 100%) / 2 - 3.5rem)}
.hero-portrait .hero__h1{font-weight:500;font-size:clamp(2.6rem,4.7vw,var(--h1-max));line-height:1.03;letter-spacing:-.015em;max-width:13ch}
.hero-portrait .hero__lead{color:var(--hero-ink);max-width:40ch}
/* the portrait: full hero height, flush to the right edge */
.hero-portrait .hero__doc{position:absolute;top:0;right:0;bottom:0;width:var(--at-portrait);margin:0;overflow:hidden;z-index:0}
.hero-portrait .hero__doc img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0}
.hero-portrait .hero__doc::before{content:"";position:absolute;inset:0 auto 0 0;width:1px;background:rgb(34 30 28 / .25);z-index:1}
/* caption sits on the stone, left of the portrait: drawn signature, then name and role */
.hero-portrait .hero__doc{overflow:visible}
.hero-portrait .hero__doc>img{position:relative;z-index:0}
.hero-portrait .hero__doc figcaption{position:absolute;right:calc(100% + 1.75rem);bottom:clamp(2.25rem,6vh,3.75rem);width:17rem;margin:0;align-items:flex-end;text-align:right;z-index:2}
.hero-portrait .hero__docname{font:500 1.15rem/1.25 var(--f-display);color:var(--hero-heading)}
.hero-portrait .hero__docrole{font-size:.9rem;opacity:1;color:var(--hero-ink)}
.sig{display:block;color:var(--accent);overflow:visible}
.sig path{stroke-width:2.4;vector-effect:non-scaling-stroke}
.hero-portrait .sig{width:15.5rem;height:auto;margin:0 -1.25rem .55rem 0}
/* the small inset office frame: a matted print pinned over the portrait's left edge */
body.hero-portrait .hero__bg{inset:auto;top:clamp(2rem,6vh,3.5rem);right:calc(var(--at-portrait) - 8.5rem);width:clamp(150px,15vw,232px);aspect-ratio:3/2;z-index:3;padding:7px;background:var(--bg);box-shadow:0 1px 0 rgb(0 0 0 / .06),0 26px 50px -26px rgb(30 24 22 / .55);-webkit-mask-image:none;mask-image:none}
.hero-portrait .hero__bg::after{display:none}
.hero-portrait .hero__bg img{border-radius:1px}
.hero .btn--ghost{border-width:1px}
.hero-portrait .proof-chip{font-weight:500}

@media (max-width:860px){
  body.hero-portrait .hero__inner{padding-block:0 clamp(3rem,10vw,4rem);min-height:0}
  .hero-portrait .hero__copy{max-width:none}
  .hero-portrait .hero__doc{position:relative;inset:auto;width:auto;margin:0 -1.25rem;display:block;order:-1;justify-self:stretch}
  .hero-portrait .hero__doc img{height:38vh;min-height:270px;aspect-ratio:auto;border-radius:0}
  .hero-portrait .hero__doc::before{display:none}
  .hero-portrait .hero__doc figcaption{position:absolute;left:1.25rem;right:auto;bottom:-1.5rem;width:auto;margin:0;padding:.55rem .9rem .6rem;background:var(--bg);align-items:flex-start;text-align:left;box-shadow:0 14px 30px -18px rgb(30 24 22 / .5)}
  .hero-portrait .sig{width:8.75rem;margin:0 0 .15rem}
  .hero-portrait .hero__docname{font-size:1.02rem}
  .hero-portrait .hero__docrole{font-size:.82rem}
  body.hero-portrait .hero__inner{row-gap:2.6rem}
  .hero-portrait .hero__h1{font-size:clamp(2.2rem,9.4vw,2.7rem)}
  .hero-portrait .hero__lead{margin-bottom:1.25rem}
  body.hero-portrait .hero__bg{top:1rem;right:1.25rem;width:112px;padding:5px}
}

/* layered-scroll-parallax-depth, CSS scroll-timeline path: the inset frame rises faster than the portrait */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .hero-portrait .hero__bg{animation:at-parallax-fast linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .hero-portrait .hero__doc>img{animation:at-parallax-slow linear both;animation-timeline:scroll(root);animation-range:0 90vh;transform-origin:50% 0}
  }
}
@keyframes at-parallax-fast{from{transform:translateY(0)}to{transform:translateY(calc(var(--depth,.3) * -30vh))}}
@keyframes at-parallax-slow{from{transform:none}to{transform:translateY(calc(var(--depth,.08) * 15vh)) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.hero-portrait .hero__bg,.hero-portrait .hero__doc>img{animation:none!important;transform:none!important}}

/* structure 1: reviews as a ladder of large quotes, alternating sides, no cards */
.look-atelier .quotes{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4rem);max-width:68rem;margin-inline:auto}
.look-atelier .quote{background:none;border:0;border-radius:0;padding:0;max-width:44rem}
.look-atelier .quote:nth-child(even){align-self:flex-end;text-align:right}
.look-atelier .quote blockquote{font:400 clamp(1.3rem,2.2vw,1.7rem)/1.4 var(--f-display);color:var(--heading);margin-bottom:1rem}
.look-atelier .quote__by{font-size:.92rem}
.look-atelier .quote__by::before{content:"";display:block;width:2.75rem;height:1px;background:var(--accent);margin-bottom:.7rem}
.look-atelier .quote:nth-child(even) .quote__by{align-items:flex-end}
.look-atelier .sec--reviews .sec__h{max-width:none}

/* structure 2: services as shade tabs, a nod to the porcelain shade guide; each tab carries a stepped shade */
.look-atelier .cards__group{font:italic 500 1.35rem/1.2 var(--f-display);margin:2.75rem 0 0;color:var(--heading)}
.look-atelier .cards__group+.cards{margin-top:1rem}
.look-atelier .cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem .85rem}
.look-atelier .cards{padding-top:1.1rem}
.look-atelier .card{background:var(--card);border:1px solid var(--line);border-radius:0 var(--radius-card) var(--radius-card) var(--radius-card);padding:1.6rem 1.4rem 1.5rem;overflow:visible;border-top:4px solid var(--shade,#EFE6D6)}
.look-atelier .card::before{content:"";position:absolute;left:-1px;bottom:calc(100% + 4px);width:46%;height:1.05rem;border-radius:6px 6px 0 0;background:var(--shade,#EFE6D6);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5)}
.look-atelier .card:nth-child(4n+1){--shade:#E3D2B6}
.look-atelier .card:nth-child(4n+2){--shade:#D8C29E}
.look-atelier .card:nth-child(4n+3){--shade:#CBB089}
.look-atelier .card:nth-child(4n+4){--shade:#BC9D72}
.look-atelier .card__h{font:500 1.3rem/1.2 var(--f-display)}
.look-atelier .card p{margin-top:.35rem}
@media (max-width:640px){
  .look-atelier .cards{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:0;padding:1.1rem 0 .75rem;scrollbar-width:thin}
  .look-atelier .card{flex:0 0 80%;scroll-snap-align:start}
}

/* structure 3: doctor feature reversed, photo matted like the hero's inset print; the signature is drawn again here, scrubbed by scroll */
.look-atelier .split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.look-atelier .split__media{order:2}
.look-atelier .split__media img{padding:10px;background:var(--card);border-radius:var(--radius-photo);box-shadow:0 30px 60px -34px rgb(30 24 22 / .5)}
.look-atelier .sec--doctor .sig{width:min(100%,22rem);height:auto;margin:.5rem 0 1.75rem}
.look-atelier .pull{font-style:italic}
@media (max-width:860px){.look-atelier .split{grid-template-columns:1fr}.look-atelier .split__media{order:0}}

/* structure 5: the photo band is split. Copy on the solid dark tone above; the lounge photo below it as a
   clear full-width strip (no scrim), so the photo reads as a photo and no text sits on it */
.look-atelier .sec.sec--highlights{padding-block:calc(170px + 3rem) calc(clamp(260px,26vw,380px) + 3.5rem)}
.look-atelier .sec--highlights .photo-band{top:auto;bottom:0;height:calc(clamp(260px,26vw,380px) + 3.5rem);background-position:50% 55%;
  -webkit-mask-image:linear-gradient(transparent,#000 70px,#000 calc(100% - 110px),transparent);mask-image:linear-gradient(transparent,#000 70px,#000 calc(100% - 110px),transparent)}
.look-atelier .sec--highlights .photo-band::after{display:none}
.look-atelier .point{border-top:1px solid rgb(255 255 255 / .28);padding-top:1.1rem}
.look-atelier .point h3{font:500 1.35rem/1.25 var(--f-display)}

/* structure 4: new patient steps as a ruled row; no numerals (taste rubric: avoid numbered step numerals), a shade tab marks each step */
.look-atelier .steps{gap:2rem}
.look-atelier .step{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:1.25rem 0 0}
.look-atelier .step::before{content:"";display:block;width:2.6rem;height:.55rem;border-radius:3px 3px 0 0;background:var(--shade,#CBB089);margin:-1.25rem 0 1.1rem;box-shadow:inset 0 -1px 0 rgb(0 0 0 / .08)}
.look-atelier .step:nth-child(4n+1){--shade:#E3D2B6}.look-atelier .step:nth-child(4n+2){--shade:#D8C29E}.look-atelier .step:nth-child(4n+3){--shade:#CBB089}.look-atelier .step:nth-child(4n+4){--shade:#BC9D72}
.look-atelier .step h3{font:500 1.3rem/1.25 var(--f-display)}

.look-atelier .faq__q{font-family:var(--f-body)}
.look-atelier .sec{padding-block:clamp(4rem,7vw,6rem)}
.look-atelier .sec--highlights + .sec,.look-atelier .sec--cta{padding-top:calc(170px + 2.5rem)}
.look-atelier .sec.sec--reviews{padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.look-atelier .sec.sec--new-patients{padding-bottom:clamp(3rem,5vw,4rem)}
@media (min-width:861px){.look-atelier .visit{align-items:stretch}.look-atelier .visit__media{display:block;height:100%}.look-atelier .visit__media img:only-child{aspect-ratio:auto;height:100%;min-height:320px;padding:10px;background:var(--card);box-shadow:0 30px 60px -34px rgb(30 24 22 / .5)}}
/* the home page lists hours in the visit section, so its footer drops the second hours table */
@media (min-width:861px){body.look-atelier:has(.hero) .site-footer__grid{grid-template-columns:1.2fr 1fr}}
body.look-atelier:has(.hero) .site-footer__grid>div:nth-child(2){display:none}
.look-atelier .sec--cta .sec__h{font-weight:500}

/* section_fx tokens (look.json; render.mjs adds them once shared request R5 lands).
   parallax-scene: the hero's two depths above. animate-sig: the doctor signature, js/look.js.
   image-reveal (effects-library image-clip-path-reveal, css-only): the visit photo opens upward as it
   enters the viewport, scroll-driven. Reduced motion or no support: the photo shows open. */
.parallax-scene,.animate-sig{position:relative}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .image-reveal .visit__media img{animation:at-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@keyframes at-reveal{from{clip-path:inset(28% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

/* inner pages: page head on the grained stone field, Bodoni H1, photo matted like the hero's inset print */
.look-atelier .page-head{background-color:var(--tone-hero);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .11 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.look-atelier .page-head h1{font-weight:500;letter-spacing:-.015em;font-size:clamp(2.3rem,4.4vw,3.8rem)}
.look-atelier .page-head__lead{color:var(--ink)}
.look-atelier .page-head__media img{padding:8px;background:var(--bg);border-radius:var(--radius-photo);box-shadow:0 26px 50px -28px rgb(30 24 22 / .5)}
.look-atelier .prose h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.look-atelier .doc__media img{padding:8px;background:var(--card);box-shadow:0 26px 50px -30px rgb(30 24 22 / .45)}
.look-atelier .aside__card{background:var(--card);border:1px solid var(--line);border-top:4px solid #CBB089}

/* rework 2026-10-07: photo slots (base.css card__img, sec__media, prose__media). The tile photo runs to the
   card edges under the shade tab, like a print in a shade guide; section photos are matted like the hero's inset print */
.look-atelier .card--img{padding-top:0}
.look-atelier .card__img{width:calc(100% + 2.8rem);max-width:none;margin:0 -1.4rem 1.1rem;border-radius:0}
.look-atelier .sec__media img,.look-atelier .prose__media img{padding:8px;background:var(--card);border-radius:var(--radius-photo);box-shadow:0 26px 50px -30px rgb(30 24 22 / .45)}
.look-atelier .sec--reviews .sec__media{margin:1.5rem 0 3rem}
/* a two-tile treatment group keeps tile size: half the row, not two oversized photo cards */
@media (min-width:1000px){.look-atelier .cards:has(>.card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc(50% + .45rem)}}
/* the portrait's foot fades into the stone, so the hero meets the reviews seam without a hard photo edge */
@media (min-width:861px){.hero-portrait .hero__doc>img{-webkit-mask-image:linear-gradient(#000 calc(100% - 140px),transparent);mask-image:linear-gradient(#000 calc(100% - 140px),transparent)}}
/* highlights in two columns on desktop, so each point runs two or three lines, not four */
@media (min-width:861px){.look-atelier .points{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem}}
/* council 2026-10-07 round 1 fixes */
.hero-portrait .hero__doc::before{display:none}
@media (min-width:1000px){.look-atelier .cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* visual form varies: reviews photo beside the quotes, FAQ photo beside the questions, new patients keeps the wide banner */
@media (min-width:861px){
  .look-atelier .sec--reviews .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);column-gap:clamp(2rem,4vw,4rem);align-items:start}
  .look-atelier .sec--reviews .sec__h{grid-column:1}
  .look-atelier .sec--reviews .sec__media{grid-column:2;grid-row:1/span 2;margin:0;position:sticky;top:6rem}
  .look-atelier .sec--reviews .sec__media img{aspect-ratio:4/5}
  .look-atelier .sec--reviews .quotes{grid-column:1;margin-inline:0}
  .look-atelier .sec--faq .wrap.narrow{max-width:min(1100px,100% - 2.5rem);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .look-atelier .sec--faq .sec__h{grid-column:2}
  .look-atelier .sec--faq .sec__media{grid-column:1;grid-row:1/span 2;margin:0}
  .look-atelier .sec--faq .sec__media img{aspect-ratio:4/5}
  .look-atelier .sec--faq .faq{grid-column:2}
  /* treatment pages: section photos alternate between full width and a half-width float */
  .look-atelier .prose .prose__media:nth-of-type(even){float:right;width:46%;margin:.3rem 0 1rem 1.75rem}
  .look-atelier .prose h2{clear:both}
}
.look-atelier .aside{position:sticky;top:6rem;align-self:start}

/* Look: Velum. Re-skin of Atelier for medical and cosmetic dermatology. Keeps Atelier's hero (oversized
   portrait off the right edge, inset frame, drawn signature) and its effects, all inherited:
   - svg-signature-line-draw-on-scroll (animejs, premium), atelier js/look.js. Reduced motion: signature shows drawn.
   - layered-scroll-parallax-depth (CSS scroll timeline), atelier look.css. Reduced motion: layers static.
   - svg-fractal-noise-grain-texture-overlay (css-only) on the hero field. Static.
   - image-clip-path-reveal on the visit photo (section_fx image-reveal). Reduced motion: photo shows open.
   Own system: a cool celadon mineral field, Petrona over Rethink Sans, and a six-step skin-tone scale
   (Fitzpatrick types I to VI) that runs along the service list: this practice treats every skin type.
   Loads after atelier/look.css. */
@font-face{font-family:"Petrona";src:url(/assets/look/petrona-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Petrona";src:url(/assets/look/petrona-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Rethink Sans";src:url(/assets/look/rethink-sans-normal.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
:root{--f-display:"Petrona",Georgia,serif;--f-body:"Rethink Sans",system-ui,sans-serif;--fw-display:430;--ls-display:-0.012em;--h1-max:4rem;
  --radius-card:4px;--radius-photo:3px;--radius-btn:999px;--fw-brand:520;
  --fz1:#F1DFCB;--fz2:#E3C3A2;--fz3:#C99C74;--fz4:#A47450;--fz5:#76503A;--fz6:#4A3326}
body{font-feature-settings:"kern"}
h1,h2,h3{text-wrap:balance}
.sec__h,.prose h2{font-weight:430;letter-spacing:-.01em}
.brand__name{font-family:var(--f-display);font-size:1.3rem}

/* hero: Petrona carries the headline lighter than Atelier's Bodoni; the grain field is tinted by the palette */
.hero-portrait .hero__h1{font-weight:420;font-size:clamp(2.5rem,4.1vw,var(--h1-max));letter-spacing:-.02em;line-height:1.05;max-width:13ch}
.hero-portrait .hero__lead{font-size:1.1rem;line-height:1.6}
.hero-portrait .hero__docname{font-weight:520}
.hero-portrait .hero__doc::before{background:color-mix(in oklab,var(--accent) 40%,transparent)}
/* the portrait melts into the field at its left edge instead of sitting as a cut photo box */
@media (min-width:861px){.hero-portrait .hero__doc>img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}.hero-portrait .hero__doc::before{display:none}}
/* the skin-tone scale as a thin rule under the inset frame: six steps, I to VI */
body.hero-portrait .hero__bg::before{content:"";position:absolute;left:7px;right:7px;bottom:-9px;height:4px;background:linear-gradient(90deg,var(--fz1) 0 16.66%,var(--fz2) 0 33.33%,var(--fz3) 0 50%,var(--fz4) 0 66.66%,var(--fz5) 0 83.33%,var(--fz6) 0)}

/* reviews: three short notes side by side, divided by hairlines, no cards */
.look-velum .quotes{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0;margin-top:2.75rem}
.look-velum .quote{background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:.25rem 2rem 0}
.look-velum .quote:first-child{border-left:0;padding-left:0}
.look-velum .quote blockquote{font:italic 400 clamp(1.15rem,1.6vw,1.3rem)/1.5 var(--f-display);color:var(--heading);margin-bottom:1.25rem}
.look-velum .quote__by{font-size:.9rem;color:var(--muted)}
@media (max-width:860px){
  .look-velum .quote,.look-velum .quote:first-child{border-left:0;border-top:1px solid var(--line);padding:1.5rem 0 0}
  .look-velum .quote:first-child{border-top:0;padding-top:0}
  .look-velum .quotes{gap:1.5rem}
}

/* services: a two-column index. The group name (Medical, Cosmetic) holds the left column; the services
   run down the right as rows, each with its step of the skin-tone scale at the left edge. */
@media (min-width:861px){
  .look-velum .sec--services .wrap{display:grid;grid-template-columns:minmax(11rem,15rem) minmax(0,1fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .look-velum .sec--services .sec__h,.look-velum .sec--services .sec__lead,.look-velum .sec--services .wrap>p{grid-column:1/-1}
  .look-velum .sec--services .cards__group{grid-column:1}
  .look-velum .sec--services .cards{grid-column:2}
}
.look-velum .cards__group{font:italic 430 1.6rem/1.2 var(--f-display);color:var(--heading);margin:2.5rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line)}
.look-velum .cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 1.75rem;margin-top:2.5rem}
.look-velum .card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:1.25rem 0 1.4rem 1.6rem}
.look-velum .card::before{content:"";position:absolute;left:0;top:1.45rem;width:6px;height:2.1rem;border-radius:1px;background:var(--fz,var(--fz3))}
.look-velum .card:nth-child(6n+1){--fz:var(--fz1)}
.look-velum .card:nth-child(6n+2){--fz:var(--fz2)}
.look-velum .card:nth-child(6n+3){--fz:var(--fz3)}
.look-velum .card:nth-child(6n+4){--fz:var(--fz4)}
.look-velum .card:nth-child(6n+5){--fz:var(--fz5)}
.look-velum .card:nth-child(6n+6){--fz:var(--fz6)}
.look-velum .card__h{font:500 1.22rem/1.25 var(--f-display)}
.look-velum .card p{margin-top:.35rem;font-size:.97rem}
.look-velum .card--link:hover{transform:none;box-shadow:none}
.look-velum .card--link:hover .card__h a{text-decoration-thickness:1px;text-underline-offset:.2em}

/* doctor: the portrait print sits on a translucent veil panel; the signature is drawn again in the copy */
@media (min-width:861px){.look-velum .sec--doctor .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.look-velum .split__media{position:relative;isolation:isolate}
.look-velum .split__media::before{content:"";position:absolute;inset:8% 10% -6% -6%;z-index:-1;border-radius:var(--radius-photo);background:color-mix(in oklab,var(--accent) 14%,var(--alt))}
.look-velum .split__media img{border-radius:var(--radius-photo);box-shadow:0 30px 60px -36px rgb(16 32 30 / .5);max-height:620px;object-fit:cover;object-position:50% 20%}
.look-velum .sec--doctor .sig{width:min(100%,19rem);height:auto;margin:.25rem 0 1.5rem;color:var(--accent)}
.look-velum .pull{font:italic 420 clamp(1.3rem,2vw,1.6rem)/1.4 var(--f-display);border:0;padding:0;color:var(--heading)}
.look-velum .minidocs img{border-radius:50%}

/* highlights band: four short statements on the photo, set in the display face */
.look-velum .sec--highlights .point h3{font:500 1.3rem/1.3 var(--f-display)}

/* new patient steps: a vertical path, one rail with a dot per stop in the skin-tone steps, no numerals */
.look-velum .steps{grid-template-columns:1fr;gap:0;position:relative;margin-left:.4rem}
@media (min-width:861px){
  .look-velum .sec--new-patients .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(2.5rem,6vw,6rem);align-items:start}
  .look-velum .sec--new-patients .sec__h{grid-column:1;grid-row:1}
  .look-velum .sec--new-patients .steps{grid-column:2;grid-row:1 / span 3;margin-top:.4rem}
  .look-velum .sec--new-patients .wrap>p{grid-column:1;max-width:30ch}
}
.look-velum .steps::before{content:"";position:absolute;left:5px;top:.6rem;bottom:1.2rem;width:1px;background:var(--line)}
.look-velum .step{background:none;border:0;border-radius:0;padding:0 0 1.9rem 2.4rem;position:relative}
.look-velum .step::before{content:"";position:absolute;left:0;top:.45rem;width:11px;height:11px;border-radius:50%;background:var(--fz,var(--fz3));box-shadow:0 0 0 4px var(--tone,var(--bg))}
.look-velum .step:nth-child(1){--fz:var(--fz1)}.look-velum .step:nth-child(2){--fz:var(--fz3)}.look-velum .step:nth-child(3){--fz:var(--fz5)}.look-velum .step:nth-child(4){--fz:var(--fz6)}
.look-velum .step h3{font:500 1.25rem/1.3 var(--f-display);margin-bottom:.3rem}
.look-velum .step p{max-width:52ch}

.look-velum .faq__q{font-family:var(--f-body);font-weight:600}
.look-velum .sec{padding-block:clamp(4rem,7vw,6rem)}
.look-velum .sec--highlights{padding-block:max(12rem,13vw)}
.look-velum .sec--highlights + .sec,.look-velum .sec--cta{padding-top:calc(170px + 2.5rem)}
.look-velum .sec--cta .sec__h{font-weight:430}
.look-velum .page-head h1{font-weight:430}

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

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

/* render.mjs now also writes look-atelier on this body, so Atelier's section rules apply underneath.
   Velum keeps Atelier's reversed doctor split and matted print; it turns off the review ladder. */
.look-velum .quotes{display:grid}
.look-velum .quote:nth-child(even){align-self:auto;text-align:left}
.look-velum .quote:nth-child(even) .quote__by{align-items:flex-start}
.look-velum .quote__by::before{display:none}
.look-velum .card::before{right:auto}

/* Atelier turns service cards into a sideways swipe row on phones; Velum's index stays a plain
   vertical list there, so every service shows without a hidden swipe. */
@media (max-width:860px){
  .look-velum .cards{display:grid;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0}
  .look-velum .card{flex:none}
}
/* the doctor signature sits under the heading, not under the "Also on the team" label */
.look-velum .sec--doctor .split__copy{display:flex;flex-direction:column;align-items:flex-start}
.look-velum .sec--doctor .split__copy>*{order:3}
.look-velum .sec--doctor .split__copy>.sec__h{order:1}
.look-velum .sec--doctor .split__copy>.sig{order:2}

/* rework 2026-10-07: service tile photos as small prints at the head of each index row; the skin-tone
   step stays at the left edge, so the services stay an index and do not turn into big photo cards */
.look-velum .card--img{display:grid;grid-template-columns:6.75rem minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:1.1rem;align-items:start;padding:1.25rem 0 1.4rem 1.6rem}
.look-velum .card--img .card__img{grid-column:1;grid-row:1/span 2;width:100%;max-width:none;margin:0;aspect-ratio:4/3;border-radius:var(--radius-photo);object-fit:cover}
.look-velum .card--img>:not(.card__img){grid-column:2}
.look-velum .card--img .card__h{margin-top:.1rem}
@media (max-width:860px){.look-velum .card--img{grid-template-columns:5.5rem minmax(0,1fr)}}
/* new patients: the photo fills the left column under the heading, beside the step rail (council: empty left column) */
@media (min-width:861px){
  .look-velum .sec--new-patients .sec__media{grid-column:1;grid-row:2;margin:1.75rem 0 .5rem}
  .look-velum .sec--new-patients .sec__media img{aspect-ratio:4/3}
  .look-velum .sec--new-patients .steps{grid-row:1 / span 4}
}
/* seam-gradient gate: the teal band blends in sRGB, so the mid-blend keeps its hue instead of the lighter, grayer oklab path */
.look-velum .sec--highlights{background:linear-gradient(in srgb to bottom,var(--prev) 0,var(--tone-photo) 170px,var(--tone-photo))}
.look-velum .sec--highlights + .sec{background-image:linear-gradient(in srgb to bottom,var(--prev,var(--tone)) 0,var(--tone) 170px)}
/* seam-gradient gate: the gate reads the median of five columns. The doctor photo keeps to the right
   third so the strip above the band reads the plain field; the band photo strip shows sky and palm tops */
@media (min-width:861px){.look-velum .sec--doctor .split{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr)}}
.look-velum .sec.sec--doctor{padding-bottom:calc(clamp(4rem,7vw,6rem) + 60px)}
.look-velum .split__media::before{inset:8% 10% 0 -6%}
.look-velum .sec--highlights .photo-band{background-position:50% 12% !important}
.look-velum .sec--highlights .photo-band::after{display:block;background:var(--tone-photo);mix-blend-mode:color;opacity:.62}

/* council 2026-10-07 round 1 (rework) */
/* hero H1 sets in three lines, not four */
.hero-portrait .hero__h1{max-width:16ch}
/* reviews: three across beside the photo */
@media (min-width:861px){.look-velum .sec--reviews .quotes{grid-template-columns:repeat(3,minmax(0,1fr))}.look-velum .quote{padding:.25rem 1.25rem 0}.look-velum .quote:nth-child(n){border-left:1px solid var(--line)}.look-velum .quote:first-child{border-left:0;padding-left:0}}
/* tiles with no page say so, so they do not read as dead links */
.look-velum .card--img:not(.card--link)>p::after{content:"Ask about it at a consult.";display:block;margin-top:.35rem;font-size:.82rem;font-style:italic;color:var(--muted)}
.look-velum .card p{text-wrap:pretty}
/* visit: the building wide on top, the desk and hall as a pair below, with a gap */
.look-velum .visit__media:has(img:nth-child(3)){display:grid;height:auto;grid-template-columns:1fr 1fr;gap:1rem}
.look-velum .visit__media:has(img:nth-child(3)) img:first-child{grid-column:1/-1}
.look-velum .visit__media:has(img:nth-child(3)) img:not(:first-child){aspect-ratio:4/3}
/* highlights: one shorter wash from the photo into the stone, not photo to teal to stone */
.look-atelier.look-velum .sec--highlights .photo-band{-webkit-mask-image:linear-gradient(transparent,#000 70px,#000 calc(100% - 50px),transparent);mask-image:linear-gradient(transparent,#000 70px,#000 calc(100% - 50px),transparent)}
.look-velum .sec--highlights + .sec{background-image:linear-gradient(in srgb to bottom,var(--prev,var(--tone)) 0,var(--tone) 130px)}
.look-velum .sec--highlights + .sec{padding-top:calc(130px + 2.5rem)}
/* CTA: less empty teal under the buttons */
.look-velum .sec.sec--cta{padding-bottom:clamp(3rem,5vw,4rem)}
/* providers: the portrait stays in view beside the long bio */
@media (min-width:861px){.look-velum .doc__media{position:sticky;top:6rem;align-self:start}}

:root{--bg:#EEF1EC;--alt:#E1E7E0;--card:#F7F9F6;--ink:#1C2B29;--muted:#4A5957;--heading:#112321;--accent:#2E6A63;--on-accent:#F4F8F6;--accent-deep:#1E4A45;--line:rgba(28,43,41,.15);--star:#2E6A63;--tone-hero-c:#D6DED7;--hero-ink:#1C2B29;--hero-heading:#112321;--hero-scrim:linear-gradient(transparent,transparent);--tone-photo-c:#46655F;--photo-scrim:linear-gradient(90deg,rgba(30,50,48,.76),rgba(30,50,48,.68));--tone-accent-c:#1E4A45;--cta-ink:#EEF4F1;--cta-btn:#EEF1EC;--cta-btn-ink:#14302D;--tone-ink-c:#14302D;--on-ink:#E4ECE8;--cta-scrim:linear-gradient(180deg,rgba(30,74,69,.6),rgba(30,74,69,1))}