/* 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: Gridline. Headline on a cool grid field, a panoramic photo strip under it, the portrait as the last tile.
   Grotesk display over a serif body. Signature: effects-library hero-ripple-wave-expanding-concentric-rings
   (css-only), slow rings centered on the portrait tile; reduced motion shows one static ring.
   Also wired: layered-scroll-parallax-depth (CSS scroll timelines; reduced motion: layers static). */
@font-face{font-family:"Schibsted Grotesk";src:url(/assets/look/schibsted-grotesk-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/look/source-serif-4-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/look/source-serif-4-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
:root{--f-display:"Schibsted Grotesk",system-ui,sans-serif;--f-body:"Source Serif 4",Georgia,serif;--fw-display:700;--ls-display:-0.028em;--h1-max:4.5rem;
  --fs-body:1.0625rem;--radius-card:10px;--radius-photo:12px;--radius-btn:8px;--fw-quote:500;--fw-brand:800;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --strip-h:clamp(220px,25vw,360px);--grid:32px;
  --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)}
body{line-height:1.7;font-variation-settings:"opsz" 16}
h1,h2,h3{font-variation-settings:normal}
h3{font-weight:650;letter-spacing:-.012em}
.btn,.nav-call,.nav__list a,.nav__group summary,.nav__phone,.faq__q,.quote__by,.hero__docname,.visit__addr,.site-footer__h,.aside__h,.pills li,.link-arrow,.doc__role{font-family:var(--f-display)}
.btn{font-weight:650;letter-spacing:-.005em}
.faq__q{font-weight:600;font-size:1.05rem}
.sec__h{max-width:20ch}

/* ---------- hero: strip archetype ---------- */
/* .hero becomes a named-line grid; .hero__inner dissolves so copy, strip and tile share it.
   content = strip + tile = the 1180px wrap; the strip bleeds off the left edge of the viewport. */
.hero-strip .hero{display:grid;grid-template-columns:[full-start] minmax(1.25rem,1fr) [content-start] minmax(0,860px) [tile-start] minmax(0,320px) [content-end] minmax(1.25rem,1fr) [full-end];
  grid-template-rows:auto auto;padding-bottom:clamp(3.5rem,7vw,6rem);background:var(--tone-hero)}
/* the cool field: a faint measuring grid (an Amsler chart, read loosely) that fades out before the seam */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);background-position:center -1px;
  -webkit-mask-image:linear-gradient(#000 55%,transparent 92%);mask-image:linear-gradient(#000 55%,transparent 92%)}
.hero-strip .hero__inner{display:contents}
.hero-strip .hero__copy{grid-column:content-start/content-end;grid-row:1;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:end;
  padding-block:clamp(3rem,6.5vw,5.75rem) clamp(2rem,4vw,3.25rem)}
.hero-strip .hero__h1{grid-column:1;grid-row:1/span 4;max-width:13ch;margin:0;font-size:clamp(2.4rem,5.2vw,var(--h1-max));line-height:1.02;letter-spacing:-.035em;font-weight:750}
.hero-strip .hero__copy > :not(.hero__h1){grid-column:2}
.hero-strip .hero__lead{margin-bottom:1.4rem;font-size:clamp(1.05rem,1.3vw,1.2rem);max-width:38ch}
.hero-strip .proof-chip{margin-top:1rem}
/* the strip */
body.hero-strip .hero__bg{position:relative;inset:auto;z-index:0;grid-column:full-start/tile-start;grid-row:2;height:var(--strip-h);margin-right:clamp(.75rem,1.4vw,1.25rem);
  overflow:hidden;border-radius:0 var(--radius-photo) var(--radius-photo) 0;-webkit-mask-image:none;mask-image:none;background:var(--tone-photo)}
.hero-strip .hero__bg::after{display:none}
.hero-strip .hero__bg img{height:116%;width:100%;object-fit:cover}
/* the portrait: last tile of the strip, same height, caption on a glass label */
.hero-strip .hero__doc{position:relative;grid-column:tile-start/content-end;grid-row:2;justify-self:stretch;align-self:stretch;width:auto;height:var(--strip-h);margin:0;display:block}
.hero-strip .hero__doc img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:var(--radius-photo);position:relative;z-index:1}
.hero-strip .hero__doc figcaption{position:absolute;z-index:2;left:.6rem;right:.6rem;bottom:.6rem;margin:0;padding:.6rem .8rem .65rem;overflow:hidden;
  background:var(--glass);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);border:1px solid rgb(255 255 255 / .7);border-radius:8px;color:var(--ink)}
.hero-strip .hero__docname{font-size:1rem;line-height:1.25;font-weight:700;color:var(--heading);text-wrap:balance}
.hero-strip .hero__docrole{font:500 .85rem/1.35 var(--f-display);opacity:1;color:var(--muted)}
/* signature rings: ::before is the one ring that always shows; ::after ripples out from the tile */
.hero-strip .hero__doc::before,.hero-strip .hero__doc::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:118%;aspect-ratio:1;border-radius:50%;
  border:1.5px solid var(--ring);transform:translate(-50%,-50%) scale(1.12);pointer-events:none}
.hero-strip .hero__doc::after{opacity:0}

/* ---------- motion (all off under reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* hero-ripple-wave-expanding-concentric-rings: two rings, staggered, six passes, then the static ring remains */
  .hero__doc::after{animation:gl-ripple 7.2s cubic-bezier(.2,.6,.4,1) 1s 6 both}
  .hero__doc::before{animation:gl-ripple-rest 1.6s var(--ease) .2s both}
  .hero__copy > :not(.hero__h1){animation:gl-rise .9s var(--ease) both}
  .hero__copy > :nth-child(3){animation-delay:.1s}
  .hero__copy > :nth-child(4){animation-delay:.2s}
  .hero__doc figcaption::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .75) 50%,transparent 70%);
    transform:translateX(-120%);animation:gl-glass-sheen 1.6s var(--ease) 1.1s both;pointer-events:none}
}
@keyframes gl-ripple{0%{transform:translate(-50%,-50%) scale(.9);opacity:0}12%{opacity:1}72%{transform:translate(-50%,-50%) scale(1.6);opacity:0}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
@keyframes gl-ripple-rest{from{transform:translate(-50%,-50%) scale(.96);opacity:0}to{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@keyframes gl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gl-glass-sheen{to{transform:translateX(120%)}}
/* layered-scroll-parallax-depth: the strip photo drifts slower than the page, the portrait tile a little faster */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero__bg img{animation:gl-parallax-strip linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .hero__doc{animation:gl-parallax-tile linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .parallax-scene .photo-band{animation:gl-parallax-band linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes gl-parallax-strip{from{transform:translateY(-8%)}to{transform:translateY(4%)}}
@keyframes gl-parallax-tile{from{translate:0 0}to{translate:0 -36px}}
@keyframes gl-parallax-band{from{background-position:50% 30%}to{background-position:50% 70%}}

/* ---------- mobile hero: same strip and tile, narrower tile, copy stacked ---------- */
@media (max-width:860px){
  .hero-strip{--strip-h:clamp(190px,52vw,260px)}
  .hero-strip .hero{display:grid;grid-template-columns:[full-start] 1.25rem [content-start] minmax(0,1fr) [tile-start] minmax(0,40%) [content-end] 1.25rem [full-end]}
  .hero-strip .hero__copy{grid-template-columns:1fr;padding-block:2rem 1.5rem}
  .hero-strip .hero__h1,.hero-strip .hero__copy > :not(.hero__h1){grid-column:1;grid-row:auto}
  .hero-strip .hero__h1{margin-bottom:.9rem;max-width:none;font-size:clamp(2.1rem,8.6vw,2.7rem)}
  .hero-strip .hero__doc{display:block;grid-template-columns:none}
  .hero-strip .hero__doc img{aspect-ratio:auto;border-radius:var(--radius-photo)}
  .hero-strip .hero__doc figcaption{left:.4rem;right:.4rem;bottom:.4rem;padding:.45rem .55rem}
  .hero-strip .hero__docname{font-size:.85rem}
  .hero-strip .hero__docrole{font-size:.75rem}
  .hero-strip .hero__bg{margin-right:.6rem}
  .hero-strip .hero{padding-bottom:1.75rem}
}

/* ---------- structure below the hero ---------- */
/* tighter section rhythm than the base (the seam ramps already add height); highlights and cta keep their own */
.hero-strip .sec:not(.sec--highlights):not(.sec--cta){padding-block:clamp(3.25rem,6vw,5rem)}
@media (max-width:860px){.hero-strip .card{padding:1.3rem 1.25rem 1.4rem}}
/* reviews: ruled columns of serif italic, no cards */
.hero-strip .quotes{gap:0;margin-top:2.25rem}
.hero-strip .quote{background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:.25rem 1.75rem .5rem}
.hero-strip .quote:first-child{border-left-color:transparent;padding-left:0}
.hero-strip .quote blockquote{font:italic 400 1.15rem/1.55 var(--f-body);color:var(--heading)}
.hero-strip .quote__by{font-weight:650;font-size:.95rem}
@media (max-width:860px){.hero-strip .quote{border-left:0;border-top:1px solid var(--line);padding:1.25rem 0}.hero-strip .quote:first-child{border-top:0;padding-top:0}}
/* services: one ruled grid of tiles (the gridline), cobalt rule on hover; tilt is off in this look */
.hero-strip .cards{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media (min-width:1000px){.hero-strip .cards{grid-template-columns:repeat(4,1fr)}}
.hero-strip .card{background:transparent;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:1.6rem 1.5rem 1.7rem;transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.hero-strip .card--link{transform:none !important}
.hero-strip .card--link:hover{box-shadow:inset 0 3px 0 var(--accent);background-color:var(--card)}
.hero-strip .card__h{font-size:1.1rem;margin-bottom:.45em}
.hero-strip .card p{font-size:.98rem}
.hero-strip .cards__group{margin:2.5rem 0 0;font-size:1rem;color:var(--muted)}
/* doctor: photo in a tile with an offset hairline frame */
.hero-strip .split__media{position:relative}
.hero-strip .split__media::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--accent);border-radius:var(--radius-photo);opacity:.45}
.hero-strip .split__media img{position:relative}
.hero-strip .pull{font:italic 400 clamp(1.25rem,2vw,1.55rem)/1.4 var(--f-body)}
/* highlights on the photo band: a top rule over each point */
.hero-strip .point{border-top:1px solid rgb(255 255 255 / .35);padding-top:1.1rem}
/* new patients: steps on one line, joined by a cobalt rule; each step hangs from a small lens ring (no numerals, per the taste rubric) */
.hero-strip .steps{gap:2.5rem 0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.hero-strip .step{position:relative;background:none;border:0;border-top:2px solid var(--accent);border-radius:0;padding:1.6rem 1.5rem 0 0}
.hero-strip .step::before{content:"";position:absolute;top:-.6rem;left:0;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--bg);border:2px solid var(--accent);box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--ring)}
/* on the new patients page the steps sit in the narrow article column: one vertical rail, never a 3 plus 1 wrap */
.hero-strip .steps--page{grid-template-columns:1fr;gap:2.25rem 0;margin-top:2rem}
/* FAQ blocks inside article prose: the question keeps its row with the plus sign (prose h3 margin would push it down) */
.hero-strip .prose .faq__q{margin:0}
.hero-strip .prose .step h3{margin-top:0}
/* visit: the photo fills the column height, no dead space under it */
@media (min-width:861px){.hero-strip .visit{align-items:stretch}.hero-strip .visit__media:has(> img:only-child){display:block;height:100%}.hero-strip .visit__media:has(> img + img){grid-template-columns:1fr;grid-template-rows:minmax(0,1.7fr) minmax(0,1fr);height:100%;min-height:520px}.hero-strip .visit__media:has(> img + img) img{aspect-ratio:auto;height:100%}.hero-strip .visit__media img:only-child{aspect-ratio:auto;height:100%;min-height:320px}}
.hero-strip .visit__addr{font-weight:650}
.hero-strip .hours th{font-family:var(--f-display);font-weight:600}
/* cta: deep cobalt, the hero grid returns faintly, faded at both ends so it never stops on a hard line */
.hero-strip .sec--cta{padding-top:calc(170px + 2.5rem)}
.hero-strip .sec--cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgb(255 255 255 / .07) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .07) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);background-position:center 0;
  -webkit-mask-image:linear-gradient(transparent 150px,#000 260px,#000 calc(100% - 140px),transparent);mask-image:linear-gradient(transparent 150px,#000 260px,#000 calc(100% - 140px),transparent)}
/* footer and inner pages */
.hero-strip .page-head h1{font-weight:750;letter-spacing:-.032em}
.hero-strip .aside__card{border:1px solid var(--line);background:var(--card)}
.hero-strip .pills li{background:var(--card);border:1px solid var(--line);font-size:.88rem}

/* section_fx tokens: these rules follow the tokens (look.json section_fx, rendered on the sections since R5), so a
   re-skin that inherits or sets the same tokens gets the same effect. "image-reveal": the photo un-clips from 6% as it
   enters (never hidden). The doctor frame slide belongs to Gridline's own structure. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .image-reveal .split__media img,.image-reveal .visit__media img{animation:gl-unclip linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    .hero-strip .image-reveal .split__media::before{animation:gl-frame linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
  }
}
@keyframes gl-frame{from{translate:-14px -14px;opacity:0}to{translate:0 0;opacity:.45}}
@keyframes gl-unclip{from{clip-path:inset(6% 6% 6% 6% round var(--radius-photo))}to{clip-path:inset(0 0 0 0 round var(--radius-photo))}}

/* inner pages: the page head and the footer blend into the page tone instead of stopping on a hard edge
   (shared request R6, dental-ortho part; remove when base.css carries it) */
.hero-strip .page-head{background-image:linear-gradient(in oklab to bottom,var(--tone-base) 0,var(--tone-alt) 170px,var(--tone-alt) calc(100% - 150px),var(--tone-base) 100%)}
body.inner.hero-strip .site-footer{background:linear-gradient(in oklab to bottom,var(--tone-base) 0,var(--tone-ink) 170px);padding-top:calc(170px + 1.5rem)}
/* the converge renderer adds .in to reveals it could not scroll into view; show them at rest (shared request R6) */
.reveal.in{animation:none}

/* ---------- rework 2026-10-07: photo slots (base.css card__img, sec__media, prose__media), each section in its own form ---------- */
/* services: the tile photo sits flush inside the ruled tile, a 3:2 window; titles keep one baseline per row */
.hero-strip .card--img .card__img{aspect-ratio:3/2;border-radius:4px;margin:0 0 1.1rem}
@media (min-width:1000px){.hero-strip .card__h{min-height:2.5em;text-wrap:balance}}
.hero-strip .card--link.card--img::after{content:"\2192";position:absolute;top:calc(1.6rem + .55rem);right:calc(1.5rem + .55rem);width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;background:var(--bg);color:var(--accent);font:600 1rem/1 var(--f-display);pointer-events:none}
/* reviews: a low panoramic strip under the heading, echoing the hero strip */
.hero-strip .sec--reviews .sec__media{margin:2rem 0 .5rem}
.hero-strip .sec--reviews .sec__media img{aspect-ratio:3/1;border-radius:0 var(--radius-photo) var(--radius-photo) 0}
@media (max-width:860px){.hero-strip .sec--reviews .sec__media img{aspect-ratio:16/9;border-radius:var(--radius-photo)}}
/* new patients: photo beside the steps, which run as one vertical rail on wide screens */
@media (min-width:1000px){
  .hero-strip .sec--new-patients > .wrap:has(> .sec__media){display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .hero-strip .sec--new-patients > .wrap:has(> .sec__media) > *{grid-column:2}
  .hero-strip .sec--new-patients > .wrap > .sec__media{grid-column:1;grid-row:1/span 6;margin:0;position:sticky;top:6rem}
  .hero-strip .sec--new-patients > .wrap > .sec__media img{aspect-ratio:4/5}
  .hero-strip .sec--new-patients > .wrap:has(> .sec__media) .steps{grid-template-columns:1fr;gap:2.25rem 0}
}
/* FAQ: a round lens crop beside the heading, ringed like the hero tile */
.hero-strip .sec--faq .narrow:has(> .sec__media){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.5rem;align-items:center}
.hero-strip .sec--faq .narrow > .sec__h{grid-column:1;grid-row:1;margin-bottom:0}
.hero-strip .sec--faq .narrow > .sec__media{grid-column:2;grid-row:1;width:clamp(110px,16vw,190px);margin:0}
.hero-strip .sec--faq .narrow > :not(.sec__h):not(.sec__media){grid-column:1/-1}
.hero-strip .sec--faq .sec__media img{aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 6px var(--bg),0 0 0 7.5px var(--ring)}
/* service pages: section photos alternate between full width and a half-width float */
.hero-strip .prose__media img{border-radius:4px}
@media (min-width:861px){.hero-strip .prose > .prose__media:nth-of-type(even){float:right;width:46%;margin:.35rem 0 1rem 1.75rem}.hero-strip .prose > .prose__media:nth-of-type(even) img{aspect-ratio:4/3}.hero-strip .prose > h2{clear:both}}
/* mobile: shorter dark band seams (council: about 280 CSS px between text and the next heading) */
@media (max-width:860px){.hero-strip .sec--highlights{padding-block:11rem 9rem}.hero-strip .sec--cta{padding-top:calc(170px + 1rem)}}
/* mobile: tiles become thumb rows (eight full-width photo tiles ran too long), the arrow sits on the thumb corner; a second visit photo spans the row */
@media (max-width:860px){
  .hero-strip .card--img{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:1rem;align-items:start}
  .hero-strip .card--img .card__img{grid-column:1;grid-row:1/span 2;width:96px;aspect-ratio:1;margin:0}
  .hero-strip .card--img .card__h,.hero-strip .card--img p{grid-column:2}
  .hero-strip .card--link.card--img::after{top:calc(1.3rem + 96px - 1.6rem);left:calc(1.25rem + 96px - 1.6rem);right:auto;width:1.6rem;height:1.6rem;font-size:.85rem}
  .hero-strip .visit__media:has(> img + img) img:last-child{grid-column:1/-1;aspect-ratio:16/9}
}
/* council round 1 (optometry rework) */
/* the section after the dark photo band starts below the 170px wash, so its heading never sits dark on dark */
.hero-strip .sec--highlights + .sec:not(.sec--highlights):not(.sec--cta){padding-top:calc(170px + 1.75rem)}
/* the highlights band: shorter, so the dark lower half no longer runs empty */
@media (min-width:861px){.hero-strip .sec--highlights{padding-bottom:max(9.5rem,10vw)}}
/* after hours: a short bordered note, not a wall of serif under the hours table */
.hero-strip .hours__note:has(> strong){border-left:2px solid var(--accent);background:var(--card);padding:.75rem 1rem;border-radius:0 6px 6px 0;font-size:.95rem}
/* the hours table shows once on the home page (visit section); the footer copy stays on inner pages */
body:not(.inner).hero-strip .site-footer div:has(> .hours--compact){display:none}
/* inner page heads carry the Gridline field: the faint measuring grid fades out before the body */
.hero-strip .page-head{position:relative;isolation:isolate}
.hero-strip .page-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);background-position:center -1px;
  -webkit-mask-image:linear-gradient(transparent,#000 120px,#000 55%,transparent 92%);mask-image:linear-gradient(transparent,#000 120px,#000 55%,transparent 92%)}
.hero-strip .page-head__media img{box-shadow:0 0 0 7px var(--bg),0 0 0 8.5px var(--ring)}
/* doctor frame: no offset outline on phones (it ran 12px from the viewport edge) */
@media (max-width:860px){.hero-strip .split__media::before{display:none}}

:root{--bg:#F4F7FA;--alt:#E8EFF5;--card:#FFFFFF;--ink:#15222D;--muted:#475766;--heading:#0C1924;--accent:#2350D8;--on-accent:#FFFFFF;--accent-deep:#1B3FA6;--line:rgba(21,34,45,.14);--star:#2350D8;--tone-hero-c:#EAF0F6;--hero-ink:#15222D;--hero-heading:#0C1924;--hero-scrim:none;--tone-photo-c:#22374A;--photo-scrim:linear-gradient(180deg,rgba(23,38,51,.56),rgba(23,38,51,.68));--tone-accent-c:#1A3C9E;--cta-ink:#FFFFFF;--cta-btn:#FFFFFF;--cta-btn-ink:#1A3C9E;--tone-ink-c:#0F1B25;--on-ink:#DCE4EB;--cta-scrim:none;--grid-line:rgba(35,80,216,.085);--ring:rgba(35,80,216,.34);--glass:rgba(255,255,255,.84)}