/* 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: Shoreline. Full-bleed photo, solid white copy card, framed portrait, grotesque display. */
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/look/bricolage-normal.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(/assets/look/figtree-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{--f-display:"Bricolage Grotesque",system-ui,sans-serif;--f-body:"Figtree",system-ui,sans-serif;--fw-display:700;--ls-display:-0.03em;--h1-max:4rem;
  --radius-card:14px;--radius-photo:14px;--radius-btn:10px;--fw-quote:600;
  --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)}
.sec[data-tone=alt] .card,.sec[data-tone=alt] .quote,.sec[data-tone=alt] .step{border-color:transparent;box-shadow:0 1px 2px rgb(19 41 61 / .06),0 12px 30px -18px rgb(19 41 61 / .25)}
.card::before{content:"";position:absolute;left:1.5rem;right:1.5rem;top:0;height:3px;background:var(--accent);border-radius:0 0 3px 3px;transform:scaleX(.18);transform-origin:left;transition:transform .35s ease}
.card--link:hover::before{transform:scaleX(1)}
/* hero: photo fills the band; copy sits in a solid card at the lower left; portrait framed at right */
.hero-band .hero__inner{align-items:end;min-height:min(88vh,800px)}
.hero-band .hero__copy{background:var(--card);padding:clamp(1.75rem,3.5vw,2.75rem);border-radius:18px;box-shadow:0 40px 80px -40px rgb(19 41 61 / .55);max-width:640px}
.hero-band .hero__doc{width:min(100%,250px);padding:.7rem .7rem 1rem;background:var(--card);border-radius:16px;box-shadow:0 30px 60px -30px rgb(19 41 61 / .6);align-self:end;color:var(--ink)}
.hero-band .hero__doc img{aspect-ratio:1;border-radius:10px}
@media (max-width:860px){
  .hero-band .hero__inner{padding-top:22vh}
  .hero-band .hero__doc{width:auto;padding:.6rem;align-self:start}
  .hero-band .hero__doc img{width:96px;border-radius:50%}
  .hero-band .hero__copy::before{content:none}
}
/* signature (effects-library layered-scroll-parallax-depth, js-light, done with CSS scroll timelines):
   three layers at three speeds. Back: the hero photo drifts down and slowly enlarges. Front: the
   portrait card rises faster than the page. Band: the photo behind "Why families stay" pans against
   the scroll. Reduced motion or no scroll-timeline support: every layer static. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    @media (min-width:861px){.hero__doc{animation:sh-parallax-float linear both;animation-timeline:scroll(root);animation-range:0 100vh}}
    .hero-band .hero__bg img{transform-origin:50% 30%;animation:sh-parallax-depth linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .parallax-scene .photo-band{animation:sh-parallax-band linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .parallax-scene .split__media img{animation:sh-parallax-pan-x linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .parallax-scene .visit__media img{animation:sh-parallax-pan-y linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes sh-parallax-depth{from{transform:translateY(0) scale(1.08)}to{transform:translateY(18%) scale(1.14)}}
@keyframes sh-parallax-band{from{background-position:50% 20%}to{background-position:50% 80%}}
/* the photo pans inside its own frame, slower than the page: no overflow, no gap overlap */
@keyframes sh-parallax-pan-x{from{object-position:35% 50%}to{object-position:65% 50%}}
@keyframes sh-parallax-pan-y{from{object-position:50% 25%}to{object-position:50% 75%}}
@keyframes sh-parallax-float{from{translate:0 0}to{translate:0 -60px}}
/* the converge renderer marks reveals with .in after scrolling; show them at rest (shared request R6) */
.reveal.in{animation:none}
/* headings never sit inside the 170px colour ramp after the hero or the photo band */
.sec--reviews,.sec--new-patients{padding-top:calc(170px + 2rem)}
/* visit: the two office photos fill the column beside the hours */
@media (min-width:861px){
  .visit{align-items:stretch}
  .visit__media{grid-template-columns:1fr;grid-auto-rows:1fr}
  .visit__media img,.visit__media img:first-child{grid-column:auto;aspect-ratio:auto;height:100%;min-height:220px}
}
/* structure: doctor feature mirrored (photo on the right); services as a clean four by two grid */
@media (min-width:861px){.look-shoreline .split{direction:rtl}.look-shoreline .split>*{direction:ltr}}
@media (min-width:1000px){.look-shoreline .cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* council round 1 fixes (2026-10-06) */
/* mobile visit: both office photos run full width, no half-empty row */
@media (max-width:860px){.visit__media{grid-template-columns:1fr}.visit__media img,.visit__media img:first-child{grid-column:auto;aspect-ratio:16/10}}
/* the photo band ends closer to its last line: less flat dark slab before the next section */
.sec--highlights{padding-bottom:calc(120px + 2.5rem)}
@media (max-width:860px){.sec--highlights{padding-bottom:7rem}}
/* calmer rhythm between reviews and services */
.sec--reviews{padding-bottom:clamp(3rem,6vw,5rem)}
.sec--services{padding-top:clamp(3.5rem,6vw,5rem)}
/* the CTA photo dissolves into its own tone before the footer, no straight photo edge */
.cta-photo .photo-band--cta{-webkit-mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 170px),transparent);mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 170px),transparent)}

/* rework 2026-10-07 (council round 2 open items) */
/* less flat ground: hours to questions, and under the services grid */
.sec--visit{padding-bottom:clamp(3rem,6vw,5rem)}
.sec--faq{padding-top:clamp(3.5rem,6vw,5rem)}
.sec--services{padding-bottom:clamp(3.5rem,6vw,5rem)}
/* no one-word last line under the steps */
.ins{text-wrap:pretty}
/* mobile: the photo band ends near its last point; the next ramp is 120px */
@media (max-width:860px){
  .sec--highlights{padding-bottom:5rem}
  .sec--new-patients{padding-top:calc(120px + 1.5rem);background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 120px)}
}
/* section headings sit below their fade: light-to-light seams use a 96px ramp and a 7rem top pad */
.sec--services,.sec--doctor,.sec--visit,.sec--faq{background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 96px)}
.sec--services,.sec--visit,.sec--faq{padding-top:7rem}

/* council round 1, rework 2026-10-07 */
/* seams interpolate in oklch, so a light to dark wash keeps its hue instead of passing through grey */
.sec{background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 170px)}
.sec--services,.sec--doctor,.sec--visit,.sec--faq{background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 96px)}
.sec--highlights{background:linear-gradient(in oklch to bottom,var(--prev) 0,var(--tone-photo) 170px,var(--tone-photo))}
.site-footer{background:linear-gradient(in oklch to bottom,var(--tone-accent) 0,var(--tone-ink) 170px)}
body.inner .site-footer{background:linear-gradient(in oklch to bottom,var(--tone-base) 0,var(--tone-ink) 170px)}
@media (max-width:860px){.sec--new-patients{background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 120px)}}
.sec--new-patients{padding-bottom:clamp(3rem,6vw,5rem)}
/* section forms vary: reviews keep the wide banner; new patient steps sit beside a tall photo; questions sit left of a photo */
@media (min-width:861px){
  .sec--new-patients>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .sec--new-patients>.wrap>*{grid-column:2}
  .sec--new-patients>.wrap>.sec__h{grid-column:1/-1}
  .sec--new-patients>.wrap>.sec__media{grid-column:1;grid-row:2 / span 3;margin:0;align-self:stretch}
  .sec--new-patients .sec__media img{aspect-ratio:auto;height:100%;min-height:420px}
  .sec--new-patients .steps{grid-template-columns:1fr 1fr;margin-top:0}
  .sec--faq>.wrap.narrow{max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .sec--faq>.wrap>.sec__h{grid-column:1/-1}
  .sec--faq>.wrap>.faq{grid-column:1;grid-row:2}
  .sec--faq>.wrap>.sec__media{grid-column:2;grid-row:2;margin:0;position:sticky;top:6rem}
  .sec--faq .sec__media img{aspect-ratio:4/5}
}
@media (max-width:860px){.sec--faq .sec__media img{aspect-ratio:21/9}}
/* hours: one wide office photo over two squares, about as tall as the address and hours column */
@media (min-width:861px){
  .visit{align-items:start}
  .visit__media{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .visit__media img{height:auto;min-height:0;aspect-ratio:1}
  .visit__media img:first-child{grid-column:1/-1;aspect-ratio:16/10}
}
@media (max-width:860px){
  .visit__media{grid-template-columns:1fr 1fr}
  .visit__media img{aspect-ratio:1}
  .visit__media img:first-child{grid-column:1/-1;aspect-ratio:16/10}
}
/* team portraits: four across, no empty fifth column */
@media (min-width:861px){.team__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* hero to reviews: the hero fades itself, so the reviews ramp is short and the gap closes */
.look-shoreline .sec--reviews{padding-top:calc(96px + 1.5rem);background-image:linear-gradient(in oklch to bottom,var(--prev,var(--tone)) 0,var(--tone) 96px)}
/* mobile hero: copy card first, the dentist card after it */
@media (max-width:860px){.hero-band .hero__doc{order:1}.hero-band .hero__inner{padding-top:14vh}}
/* mobile services: two columns of square photo cards, not eight full-width cards */
@media (max-width:600px){.look-shoreline .cards{grid-template-columns:1fr 1fr;gap:.75rem}.look-shoreline .card{padding:.75rem .75rem 1rem}.look-shoreline .card__img{aspect-ratio:1;margin-bottom:.6rem}.look-shoreline .card p{font-size:.9rem}}
/* a tile with no page of its own carries no accent tab, so only linked tiles look clickable */
.look-shoreline .card:not(.card--link)::before{content:none}
/* signature depth, stronger and on every width: photo sinks, copy card rises, portrait rises faster */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-band .hero__doc{animation:sh-parallax-float linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .hero-band .hero__copy{animation:sh-parallax-copy linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  }
}
@keyframes sh-parallax-depth{from{transform:translateY(0) scale(1.1)}to{transform:translateY(30%) scale(1.18)}}
@keyframes sh-parallax-copy{from{translate:0 0}to{translate:0 -36px}}

/* Look: Crest. Re-skin of Shoreline: full-bleed photo, solid copy card, framed portrait, layered scroll depth (inherited).
   Own system: white and sea mist, deep kelp ink, a sun-yellow call to action, tall Instrument Serif over Onest.
   Loads after shoreline/look.css. */
@font-face{font-family:"Instrument Serif";src:url(/assets/look/instrument-serif-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/look/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Onest";src:url(/assets/look/onest-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--f-display:"Instrument Serif",Georgia,serif;--f-body:"Onest",system-ui,sans-serif;--fw-display:400;--ls-display:-0.005em;--h1-max:5rem;
  --fw-brand:400;--fw-quote:400;--radius-card:20px;--radius-photo:20px;--radius-btn:999px;--fs-body:1.05rem}
h1,h2{font-weight:400;line-height:1.04}
h2{font-size:clamp(2rem,3.6vw,3.1rem)}
h3,.faq__q,.aside__h{font-family:var(--f-body);font-weight:600;letter-spacing:0}
.brand__name{font-size:1.45rem;letter-spacing:0}
.card::before{display:none}
.btn{font-weight:600}

/* hero (inherits the Shoreline band, card and depth layers). Tall serif headline, sun-yellow primary action. */
.hero-band .hero__copy{border-radius:24px;padding:clamp(1.9rem,3.6vw,3rem)}
.hero-band .hero__h1{font-size:clamp(2.9rem,5.8vw,var(--h1-max));line-height:.98;max-width:14ch}
.hero-band .hero__lead{color:var(--muted)}
.hero-band .hero__doc{border-radius:22px}
.hero-band .hero__doc img{border-radius:14px}
.hero .btn--primary{background:var(--sun);color:var(--heading)}
/* mobile: the photo is a band above the portrait card, not a full-height backdrop hidden behind both cards.
   Height-fitted, so the photo's own object-position (content.json) picks the slice; the subject sits above the card. */
@media (max-width:860px){
  .hero-band .hero__inner{padding-top:34vh}
  .look-crest.hero-band .hero__bg{bottom:auto;height:calc(34vh + 9rem)}
}
/* signature moment: a sun-yellow brush stroke draws itself under the headline once, after the card settles.
   Decorative pseudo element; the H1 text itself is never hidden or faded. Reduced motion: drawn, static. */
.look-crest .hero__h1::after{content:"";display:block;width:min(6.2em,100%);height:.34em;margin-top:.06em;background:var(--sun);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M5 17C70 8 160 5 295 9' stroke='%23000' stroke-width='15' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M5 17C70 8 160 5 295 9' stroke='%23000' stroke-width='15' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
@media (prefers-reduced-motion:no-preference){.look-crest .hero__h1::after{animation:cr-swash 1.3s .7s cubic-bezier(.65,0,.35,1) both}}
@keyframes cr-swash{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* the photo fades into the light sea mist of the reviews band, not into a dark band */
.sec{padding-block:clamp(4rem,7.5vw,6.5rem)}
.sec--reviews{padding-top:clamp(3rem,6vw,5rem)}
.sec--new-patients{padding-top:calc(170px + 2rem)}
.sec--highlights{padding-block:max(12.5rem,14vw)}
@media (min-width:861px){.look-crest .cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:860px){.look-crest .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the copy card settles onto the photo once on load: the near layer arrives last, after the far layer is in place */
@media (prefers-reduced-motion:no-preference){
  .hero__copy{animation:cr-card-rise .9s .15s cubic-bezier(.16,1,.3,1) both}
}
@keyframes cr-card-rise{from{transform:translateY(36px);box-shadow:0 0 0 rgb(0 0 0 / 0)}to{transform:none}}

/* structure 1: reviews as a conversation, alternating left and right in one narrow column */
.look-crest .quotes{grid-template-columns:1fr;max-width:880px;margin-inline:auto;gap:1.4rem}
.look-crest .quote{max-width:620px;background:var(--card);border:0;border-radius:26px 26px 26px 6px;padding:1.6rem 1.9rem;box-shadow:0 1px 2px rgb(17 48 44 / .06),0 18px 40px -28px rgb(17 48 44 / .35)}
.look-crest .quote:nth-child(even){margin-left:auto;border-radius:26px 26px 6px 26px}
/* owner 2026-10-26: a large quote mark fills the gap beside each offset card (decorative, wide screens only) */
@media (min-width:761px){.look-crest .quote:nth-child(even){position:relative}
  .look-crest .quote:nth-child(even)::before{content:"\201C";position:absolute;right:calc(100% + 2.5rem);top:50%;translate:0 -42%;font:400 clamp(7rem,12vw,10rem)/1 var(--f-display);color:var(--accent);opacity:.85;pointer-events:none}}
.look-crest .quote blockquote{font:400 clamp(1.3rem,2vw,1.6rem)/1.3 var(--f-display);color:var(--heading);margin-bottom:.9rem}
.look-crest .quote__by{font-size:.9rem;color:var(--muted)}
.look-crest .sec--reviews .sec__h{margin-inline:auto;text-align:center;max-width:none}

/* structure 2: services as soft sea-mist tiles with the name in the display serif; groups as a quiet label */
.look-crest .sec--services .card{background:var(--alt);border-color:transparent;box-shadow:none;padding:1.7rem 1.6rem 1.6rem}
.look-crest .card__h{font:400 1.6rem/1.1 var(--f-display);margin:0 0 .6rem}
.look-crest .card--link:hover{background:var(--card);box-shadow:0 22px 44px -28px rgb(17 48 44 / .45)}
.look-crest .cards__group{font:600 .95rem/1.3 var(--f-body);color:var(--muted);margin:2.75rem 0 0;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.look-crest .cards__group + .cards{margin-top:1rem}
/* image cards: the tile photo runs edge to edge across the top of the tile; the text keeps the tile padding */
.look-crest .sec--services .card--img{padding:0 0 1.6rem;overflow:hidden}
.look-crest .card--img .card__img{aspect-ratio:3/2;margin:0 0 1.25rem;border-radius:0}
.look-crest .card--img .card__h,.look-crest .card--img > p{padding-inline:1.6rem}
@media (prefers-reduced-motion:no-preference){
  .look-crest .card--img .card__img{transition:scale .6s cubic-bezier(.16,1,.3,1)}
  .look-crest .card--link:hover .card__img{scale:1.04}
}

/* structure 3: doctor feature with the photo on the right, set on an offset block of the accent color */
.look-crest .split__media{position:relative;isolation:isolate}
.look-crest .split__media::before{content:"";position:absolute;inset:1.25rem -1.25rem -1.25rem 1.25rem;border-radius:var(--radius-photo);background:var(--accent);z-index:-1}
@media (min-width:861px){.look-crest .split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.look-crest .split__media{order:2}}
@media (max-width:860px){.look-crest .split__media::before{inset:.75rem -.6rem -.6rem .75rem}}

/* first-visit steps: a dark rule drawn over each step and the title in the display serif; no numerals (taste rubric) */
.look-crest .step{background:linear-gradient(var(--heading),var(--heading)) top left/100% 2px no-repeat;border:0;border-radius:0;padding:1.1rem 0 0}
.look-crest .step h3{font:400 1.7rem/1.1 var(--f-display);margin-bottom:.6rem}
.look-crest .steps--page .step h3{font-size:1.45rem}
/* order marker without numerals: a small dial that fills a quarter more at each step (the list stays an ol for readers) */
.look-crest .step::before{content:"";display:block;width:1.2rem;height:1.2rem;margin-bottom:.85rem;border-radius:50%;box-shadow:inset 0 0 0 2px var(--heading);
  background:conic-gradient(var(--accent) calc(var(--cr-fill,.25) * 1turn),transparent 0)}
.look-crest .step:nth-child(2){--cr-fill:.5}
.look-crest .step:nth-child(3){--cr-fill:.75}
.look-crest .step:nth-child(n+4){--cr-fill:1}

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

/* a group of two care tiles fills the row instead of leaving an empty third slot */
@media (min-width:861px){.look-crest .cards:has(> li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ...and those two wide tiles turn sideways (photo left, text right) so they do not grow into tall posters.
   Tablet (two columns): an odd last tile spans the row the same way. */
@media (min-width:861px){
  .look-crest .cards:has(> li:nth-child(2):last-child) > .card--img{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:1.6rem;padding:0 1.6rem 0 0}
}
@media (min-width:600px) and (max-width:860px){
  .look-crest .cards > .card--img:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:1.4rem;padding:0 1.4rem 0 0}
}
@media (min-width:861px){
  .look-crest .cards:has(> li:nth-child(2):last-child) > .card--img .card__img{grid-column:1;grid-row:1/-1;height:100%;min-height:220px;aspect-ratio:auto;margin:0}
  .look-crest .cards:has(> li:nth-child(2):last-child) > .card--img > :not(img){grid-column:2;padding-inline:0}
  .look-crest .cards:has(> li:nth-child(2):last-child) > .card--img .card__h{grid-row:2;margin-top:1.5rem}
  .look-crest .cards:has(> li:nth-child(2):last-child) > .card--img > p{grid-row:3;padding-bottom:1.5rem}
}
@media (min-width:600px) and (max-width:860px){
  .look-crest .cards > .card--img:last-child:nth-child(odd) .card__img{grid-column:1;grid-row:1/-1;height:100%;min-height:200px;aspect-ratio:auto;margin:0}
  .look-crest .cards > .card--img:last-child:nth-child(odd) > :not(img){grid-column:2;padding-inline:0}
  .look-crest .cards > .card--img:last-child:nth-child(odd) .card__h{grid-row:2;margin-top:1.4rem}
  .look-crest .cards > .card--img:last-child:nth-child(odd) > p{grid-row:3;padding-bottom:1.4rem}
}

/* highlights band: serif point titles */
.look-crest .point h3{font:400 1.75rem/1.1 var(--f-display)}
.look-crest .faq__item summary::after{color:var(--accent)}

/* section_fx tokens (look.json). Scroll-linked layers; reduced motion or no scroll-timeline support: all static.
   parallax-scene: the copy card is the near layer and lifts faster than the photo behind it; the band photo pans.
   image-reveal: the green block slides out from behind the doctor photo; the visit backdrop unveils from the left
   and the framed second photo lifts into place (no clip on the frame, it would cut its shadow).
   line-draw: the rule over each first-visit step draws left to right. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero.parallax-scene .hero__copy{animation:cr-card-rise .9s .15s cubic-bezier(.16,1,.3,1) both,cr-parallax-card linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
    .sec--highlights.parallax-scene .photo-band{animation:sh-parallax-band linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .sec--doctor.image-reveal .split__media::before{animation:cr-block-slide linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    .sec--visit.image-reveal .visit__media img:first-child{animation:cr-unveil linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
    .sec--visit.image-reveal .visit__media img:not(:first-child){animation:cr-lift linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .line-draw .step{animation:cr-rule linear both;animation-timeline:view();animation-range:entry 15% cover 40%}
  }
}
@keyframes cr-parallax-card{from{translate:0 0}to{translate:0 -130px}}
@keyframes cr-block-slide{from{translate:-1.25rem -1.25rem}to{translate:0 0}}
@keyframes cr-unveil{from{clip-path:inset(0 30% 0 0 round 20px)}to{clip-path:inset(0 0 0 0 round 20px)}}
@keyframes cr-rule{from{background-size:0% 2px}to{background-size:100% 2px}}
@keyframes cr-lift{from{translate:0 2.5rem}to{translate:0 0}}

/* inner pages end on the base tone, so the footer ramps from it (R6 open; remove when base.css carries it) */
body.inner .site-footer{background:linear-gradient(in oklab to bottom,var(--tone-base) 0,var(--cr-seam-mid) 85px,var(--tone-ink) 170px)}

/* render.mjs also puts look-shoreline on the body of a Shoreline re-skin, so Shoreline's structure rules reach Crest.
   Undo the mirrored doctor split (Crest moves the photo right with order instead). */
@media (min-width:861px){.look-crest .split{direction:ltr}}

/* council round 1 fixes and photo slots (2026-10-07) */
/* seams into and out of the dark bands pass through a sea green midpoint (oklab), not the grey a straight
   dark to white ramp gives: #11302C to white mixes to #81918E at 50%, the midpoint here is #729F90 */
:root{--cr-seam-mid:color-mix(in oklab,var(--accent) 65%,#fff)}
.look-crest .sec--highlights{background:linear-gradient(in oklab to bottom,var(--prev) 0,var(--cr-seam-mid) 85px,var(--tone-photo) 170px,var(--tone-photo))}
.look-crest .sec--highlights + .sec{background-image:linear-gradient(in oklab to bottom,var(--tone-photo) 0,var(--cr-seam-mid) 85px,var(--tone) 170px)}
.look-crest .sec--cta{background-image:linear-gradient(in oklab to bottom,var(--prev,var(--tone)) 0,var(--cr-seam-mid) 85px,var(--tone) 170px)}
@media (max-width:860px){.look-crest .sec--highlights + .sec{background-image:linear-gradient(in oklab to bottom,var(--tone-photo) 0,var(--cr-seam-mid) 60px,var(--tone) 120px)}}

/* closing band: one flat scrim at the lowest alpha that keeps white text at 4.5:1 over a pure white pixel
   (look.json cta-scrim). Wide screens: the copy column keeps that alpha, the sides lift so the room reads. */
@media (min-width:1200px){
  .look-crest.cta-photo .photo-band--cta::after{background:linear-gradient(90deg,color-mix(in srgb,var(--tone-accent-c) 40%,transparent) 0,var(--cta-scrim) 24%,var(--cta-scrim) 76%,color-mix(in srgb,var(--tone-accent-c) 40%,transparent) 100%)}
}

/* reviews: the photo sits beside the conversation (form: image beside text); stacked on phones */
@media (min-width:861px){
  .look-crest .sec--reviews .wrap:has(> .sec__media){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .look-crest .sec--reviews .wrap:has(> .sec__media) > .sec__h{grid-column:1/-1;text-align:left;margin-inline:0}
  .look-crest .sec--reviews .wrap:has(> .sec__media) > .sec__media{margin:1rem 0 0;position:sticky;top:6.5rem}
  .look-crest .sec--reviews .wrap:has(> .sec__media) > .quotes{margin:1rem 0 0;max-width:none}
  .look-crest .sec--reviews .wrap:has(> .sec__media) .quote{max-width:88%}
}
.look-crest .sec--reviews .sec__media img{aspect-ratio:5/4;border-radius:26px 26px 26px 6px}
@media (max-width:860px){.look-crest .sec--reviews .sec__media img{aspect-ratio:16/9}}

/* first visit: a wide inset panorama between the heading and the steps (form: panorama); taller on phones */
@media (max-width:600px){.look-crest .sec--new-patients .sec__media img{aspect-ratio:16/9}}

/* Find us: the hours sit on a white card over the office photo (form: card over photo, Crest's own structure;
   Shoreline sets hours beside two stacked photos). The second photo is a framed print beside the card. */
.look-crest .sec--visit{isolation:isolate}
.look-crest .visit > div:first-child{background:var(--card);border-radius:24px;padding:clamp(1.6rem,3vw,2.6rem);box-shadow:0 40px 80px -40px rgb(17 48 44 / .5)}
.look-crest .visit .hours{max-width:none}
@media (min-width:861px){
  .look-crest .sec--visit:has(.visit__media){padding-block:clamp(8rem,13vw,11rem)}
  .look-crest .visit:has(.visit__media){grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  .look-crest .visit__media{align-self:end;justify-items:end}
  .look-crest .visit__media img:first-child{position:absolute;inset:0;z-index:-1;width:100%;height:100%;min-height:0;aspect-ratio:auto;border-radius:0;
    -webkit-mask-image:linear-gradient(transparent,#000 180px,#000 calc(100% - 180px),transparent);mask-image:linear-gradient(transparent,#000 180px,#000 calc(100% - 180px),transparent)}
  .look-crest .visit__media img:not(:first-child){width:min(100%,400px);height:auto;min-height:0;aspect-ratio:4/3;border-radius:14px;box-shadow:0 0 0 .6rem var(--card),0 40px 70px -30px rgb(17 48 44 / .55)}
}
@media (max-width:860px){
  .look-crest .visit__media{display:contents}
  .look-crest .visit__media img{height:auto}
  .look-crest .visit__media img:first-child{order:-1}
  .look-crest .visit:has(.visit__media) > div:first-child{position:relative;margin:-5rem .75rem 0}
}

/* questions: two columns, heading and photo on the left, the questions on the right (form: image beside text) */
@media (min-width:861px){
  .look-crest .sec--faq .wrap:has(> .sec__media){max-width:none;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .look-crest .sec--faq .wrap:has(> .sec__media) > .sec__h{grid-column:1;grid-row:1}
  .look-crest .sec--faq .wrap:has(> .sec__media) > .sec__media{grid-column:1;grid-row:2;margin:.5rem 0 0}
  .look-crest .sec--faq .wrap:has(> .sec__media) > .sec__media img{aspect-ratio:4/3}
  .look-crest .sec--faq .wrap:has(> .sec__media) > .faq{grid-column:2;grid-row:1/-1;margin-top:.4rem}
}

/* the footer drops its hours table on the homepage, where the Find us card two screens up already shows it */
.look-crest:has(.sec--visit .hours) .site-footer__grid > div:has(> .hours--compact){display:none}
@media (min-width:861px){
  .look-crest:has(.sec--visit .hours) .site-footer__grid{grid-template-columns:1.2fr 2fr}
  .look-crest:has(.sec--visit .hours) .site-footer__links{columns:2;column-gap:2rem}
}

/* inner page heads: the photo beside the H1 sits on an offset sun-yellow block (the doctor block's sibling) */
.look-crest .page-head__media{position:relative;isolation:isolate}
.look-crest .page-head__media::before{content:"";position:absolute;inset:1rem -1rem -1rem 1rem;border-radius:var(--radius-photo);background:var(--sun);z-index:-1}
@media (max-width:860px){.look-crest .page-head__media::before{inset:.6rem -.6rem -.6rem .6rem}}

/* care page sections: photos alternate between a full width frame and a smaller photo the text wraps around */
@media (min-width:700px){
  .look-crest .prose > .prose__media:nth-of-type(even){float:right;width:min(44%,300px);margin:.4rem 0 1rem 1.75rem}
  .look-crest .prose > .prose__media:nth-of-type(even) img{aspect-ratio:4/3}
  .look-crest .prose > h2{clear:both}
}

/* council round 2 fixes (2026-10-07) */
/* item 1: each wash runs inside the section padding; the heading sits just below the wash. No empty dark tail under How we work. */
.look-crest .sec--reviews{padding-bottom:clamp(2.5rem,4.5vw,3.75rem)}
.look-crest .sec--services{padding-top:clamp(2.5rem,4.5vw,3.75rem)}
.look-crest .sec--highlights{padding-bottom:clamp(3.5rem,6vw,5rem)}
.look-crest .sec--highlights .photo-band{-webkit-mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 90px),transparent)}
.look-crest .sec--highlights + .sec{padding-top:calc(130px + 1.25rem);background-image:linear-gradient(in oklab to bottom,var(--tone-photo) 0,var(--cr-seam-mid) 65px,var(--tone) 130px)}
.look-crest .sec--faq{padding-bottom:clamp(2rem,3.5vw,3rem)}
.look-crest.cta-photo .sec--cta,.look-crest .sec--cta{padding-top:calc(150px + 1.5rem);background-image:linear-gradient(in oklab to bottom,var(--prev,var(--tone)) 0,var(--cr-seam-mid) 75px,var(--tone) 150px)}
/* item 2: How we work scrim is one flat mid kelp tint, rgba(24,79,67,.74): over a pure white pixel that gives #5A8379 behind
   white text, 4.61:1 (.73 gives 4.45:1, fails). The old ramp ran to .72 ink green plus a 170px masked slab.
   CTA: no CSS blur exists in the stack (grep blur( over deploy/assets: header only); the soft look came from the long
   top mask fade, now shorter. Scrim stays var(--cta-scrim) rgba(17,48,44,.65): 4.5:1 floor is .64 (4.51:1). */
.look-crest .sec--highlights .photo-band::after{background:rgb(24 79 67 / .74)}
.look-crest.cta-photo .photo-band--cta{-webkit-mask-image:linear-gradient(transparent 60px,#000 190px);mask-image:linear-gradient(transparent 60px,#000 190px)}
/* item 3: deeper hero layers. Photo drifts down, card lifts (cr-parallax-card, -130px), portrait chip lifts most.
   CSS scroll timeline only; no support or reduced motion: static. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .look-crest.hero-band .hero__bg img,.look-crest .hero-band .hero__bg img{animation:cr-parallax-depth linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    @media (min-width:861px){.look-crest .hero__doc{animation:cr-parallax-chip linear both;animation-timeline:scroll(root);animation-range:0 100vh}}
  }
}
@keyframes cr-parallax-depth{from{transform:translateY(0) scale(1.06)}to{transform:translateY(28%) scale(1.18)}}
@keyframes cr-parallax-chip{from{translate:0 0;rotate:0deg}to{translate:0 -230px;rotate:-2deg}}
/* item 7: phones. Photo band capped at 38svh; the chip sits over the lower right of the photo, so the H1 leads, the Call button and the portrait both show in 430x932. */
@media (max-width:860px){
  .hero-band .hero__inner{padding-top:calc(38svh - 4rem)}
  .look-crest.hero-band .hero__bg,.look-crest .hero-band .hero__bg{bottom:auto;height:38svh}
  .look-crest.hero-band .hero__inner{position:relative}
  .look-crest.hero-band .hero__doc{position:absolute;z-index:3;right:1rem;top:calc(38svh - 10rem);margin:0}
  .look-crest .hero-band .hero__copy{padding:1.5rem 1.4rem}
}
/* item 8: phones. How we work is a compact 2 by 2 grid, not four stacked blocks. */
@media (max-width:860px){
  .look-crest .sec--highlights .points{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem;margin-top:1.75rem}
  .look-crest .sec--highlights .point h3{font-size:1.3rem;margin-bottom:.4rem}
  .look-crest .sec--highlights .point p{font-size:.95rem;line-height:1.45}
}

/* re-verify fix: the H1 breaks as "Family chiropractor / in Sarasota", not with a one word first line */
@media (min-width:861px){.look-crest.hero-band .hero__h1{max-width:none;text-wrap:balance;font-size:clamp(2.9rem,4.6vw,3.9rem)}}

:root{--bg:#FFFFFF;--alt:#F0F0F7;--card:#FFFFFF;--ink:#232B45;--muted:#525A72;--heading:#1A2036;--accent:#5A48B8;--on-accent:#FFFFFF;--accent-deep:#4A3A9E;--line:rgba(35,43,69,.13);--star:#B98A16;--tone-hero-c:#F0F0F7;--hero-ink:#232B45;--hero-heading:#1A2036;--hero-scrim:linear-gradient(transparent,transparent);--tone-photo-c:#232B45;--photo-scrim:linear-gradient(180deg,rgba(35,43,69,.56),rgba(35,43,69,.72));--tone-accent-c:#232B45;--cta-ink:#FFFFFF;--cta-btn:#F2C14E;--cta-btn-ink:#232B45;--tone-ink-c:#1A2036;--on-ink:#E4E6F0;--cta-scrim:rgba(35,43,69,.65);--sun:#F2C14E}