/* 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: Stride. Action photo cut by a diagonal edge, copy on a deep solid panel, one variable family (Archivo) run condensed for display. */
@font-face{font-family:"Archivo";src:url(/assets/look/archivo-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
:root{--f-display:"Archivo",system-ui,sans-serif;--f-body:"Archivo",system-ui,sans-serif;--fw-display:800;--ls-display:-0.005em;--h1-max:5rem;--fw-brand:800;--fw-quote:600;
  --radius-card:3px;--radius-photo:3px;--radius-btn:14px;--focus:var(--accent-deep);
  --st-ease:cubic-bezier(.16,1,.3,1);
  --tone-hero:var(--tone-hero-c);--tone-base:var(--bg);--tone-alt:var(--alt);--tone-photo:var(--tone-photo-c);--tone-accent:var(--tone-accent-c);--tone-ink:var(--tone-ink-c)}
body{font-stretch:100%}
h1,h2{font-stretch:76%;font-weight:800}
h2{font-size:clamp(2rem,3.7vw,3.2rem);line-height:1}
h3{font-stretch:88%;font-weight:700}
.brand__name,.site-footer__name{font-stretch:78%;font-weight:800;letter-spacing:0}
.brand__name{font-size:1.3rem}
.btn{font-weight:700;font-stretch:92%;letter-spacing:.01em}
.hero,.sec--cta,.sec--highlights,.site-footer{--focus:var(--accent)}
.link-arrow{border-bottom-width:3px}

/* hero: deep panel at left, the action photo at right cut by a diagonal edge, an orange lane line along the cut */
@media (min-width:861px){.hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);min-height:min(86vh,780px)}}
.hero__bg{left:auto;right:0;width:54%;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%)}
.hero__bg img{object-position:var(--hero-focus,60% 50%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--accent);
  clip-path:polygon(calc(46% + 54% * .22 - 18px) 0,calc(46% + 54% * .22 - 9px) 0,calc(46% - 9px) 100%,calc(46% - 18px) 100%);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 150px),transparent);mask-image:linear-gradient(#000 calc(100% - 150px),transparent)}
.hero__copy{max-width:min(36rem,40vw)}
.hero__h1{font-size:clamp(2.7rem,5.4vw,var(--h1-max));line-height:.94;letter-spacing:0;font-stretch:72%;font-weight:820;width:13ch;max-width:none;
  text-shadow:.25em 0 0 transparent}
/* the transparent shadow widens the H1 paint area, so Chrome repaints the glyph overhang while the width settles
   (without it, thin stems of the wide frames stay on screen to the right of the longest line; seen on the M4 2026-10-06) */
.hero__lead{max-width:40ch}
.hero .btn--ghost{border-color:rgb(255 255 255 / .45)}
.hero__doc{align-self:end;justify-self:end;width:min(100%,228px);padding:.5rem .5rem .85rem;background:var(--tone-hero-c);border-radius:3px;box-shadow:0 34px 60px -30px rgb(0 0 0 / .7);position:relative}
.hero__doc::before{content:"";position:absolute;left:16px;top:-9px;width:92px;height:18px;border-radius:9px;background:var(--accent);transform:rotate(-7deg)}
.hero__doc img{aspect-ratio:4/5;border-radius:2px}
.hero__doc figcaption{padding:0 .35rem;color:var(--hero-ink)}
.hero__docname{color:var(--hero-heading);font-stretch:84%;font-weight:800}
@media (max-width:860px){
  .hero{display:flex;flex-direction:column}
  .hero__bg{position:relative;inset:auto;width:auto;height:42vh;min-height:250px;clip-path:polygon(0 0,100% 0,100% 84%,0 100%);-webkit-mask-image:none;mask-image:none}
  .hero::after{display:none}
  .hero__inner{padding-top:1.25rem;gap:1.5rem}
  .hero__copy{max-width:none}
  .hero__h1{font-size:clamp(2.5rem,11vw,3.4rem)}
  .brand__name{font-size:1.12rem}
  .hero__doc{width:100%;padding:0;background:none;box-shadow:none;grid-template-columns:64px 1fr}
  .hero__doc::before{display:none}
  .hero__doc img{border-radius:50%}
}

/* signature: variable-font-axis-animation. The H1 settles once from wide to condensed. Its width is in ch, so
   the box narrows with the letters and the line breaks hold (no reflow under the lead or the buttons). */
@media (prefers-reduced-motion:no-preference){
  .hero__h1{animation:st-axis-settle 1.2s var(--st-ease) .1s both}
}
@keyframes st-axis-settle{from{font-stretch:125%;font-weight:560}to{font-stretch:72%;font-weight:820}}

/* the two image wipes fill forwards only (no backwards fill): before entry the photo is off screen in a live browser, and a full-page
   capture taken at scroll 0 shows it whole instead of clipped to nothing (rework 2026-10-07) */
/* layered-scroll-parallax-depth, in CSS scroll timelines on the .parallax-scene sections (look.json section_fx): the hero
   photo, the highlights band and the CTA band drift slower than the page. Reduced motion or no support: static.
   image-clip-path-reveal on .image-reveal sections and line-expand-reveal-decorative-hr-separator on .line-draw, same rules. */
.sec--new-patients.line-draw .step{position:relative}
.sec--new-patients.line-draw .step::after{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--accent);transform-origin:0 50%}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero.parallax-scene .hero__bg img{transform-origin:60% 40%;animation:st-parallax-hero linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .sec--highlights.parallax-scene .photo-band{animation:st-parallax-band linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .sec--cta.parallax-scene .photo-band--cta{animation:st-parallax-cta linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .sec--doctor.image-reveal .split__media img{animation:st-diag-wipe linear forwards;animation-timeline:view();animation-range:entry 0% cover 40%}
    .sec--visit.image-reveal .visit__media img{animation:st-image-wipe linear forwards;animation-timeline:view();animation-range:entry 0% cover 35%}
    .sec--new-patients.line-draw .step::after{animation:st-lane-draw linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
    .sec--new-patients.line-draw .step:nth-child(2)::after{animation-range:entry 40% cover 50%}
    .sec--new-patients.line-draw .step:nth-child(3)::after{animation-range:entry 50% cover 55%}
    .sec--new-patients.line-draw .step:nth-child(4)::after{animation-range:entry 60% cover 60%}
    body::before{content:"";position:fixed;left:0;top:0;right:0;height:3px;z-index:60;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
      animation:st-lane-progress linear both;animation-timeline:scroll(root)}
  }
}
@keyframes st-parallax-hero{from{transform:translateY(0) scale(1.1)}to{transform:translateY(9%) scale(1.14)}}
@keyframes st-parallax-band{from{background-position:50% 18%}to{background-position:50% 82%}}
@keyframes st-parallax-cta{from{background-position:50% 30%}to{background-position:50% 70%}}
@keyframes st-diag-wipe{from{clip-path:polygon(0 0,0 0,0 86%,0 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 86%,84% 100%,0 100%)}}
@keyframes st-image-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes st-lane-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes st-lane-progress{to{transform:scaleX(1)}}

/* structure: services as lane rows (name left, summary right, ruled like track lanes); steps carry no numerals (taste rubric), the lane line draws across them in order */
.look-stride .cards{display:block;margin-top:2.5rem;border-top:3px solid var(--heading)}
.look-stride .card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:.4rem 3rem;align-items:baseline;padding:1.35rem .25rem 1.35rem 1.1rem;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;transform:none !important;
  transition:translate .3s var(--st-ease),box-shadow .3s var(--st-ease),background-color .3s}
.look-stride .card__h{margin:0;font-size:clamp(1.3rem,2.1vw,1.75rem);font-stretch:80%;font-weight:800;line-height:1.1}
.look-stride .card p{font-size:1.02rem}
/* a row with its own page carries an orange lane edge; on hover the edge widens and the row steps forward */
.look-stride .card--link{box-shadow:inset 2px 0 0 var(--accent)}
.look-stride .card--link:hover{translate:8px 0;box-shadow:inset 5px 0 0 var(--accent);background-color:var(--card)}
.look-stride .card--link:hover .card__h a{text-decoration:none}
.look-stride .card--link .card__h a{min-height:44px}
@media (prefers-reduced-motion:reduce){.look-stride .card--link:hover{translate:none}}
@media (max-width:700px){.look-stride .card{grid-template-columns:1fr}}
.look-stride .steps{gap:2rem}
.look-stride .step{background:none;border:0;border-top:3px solid var(--heading);border-radius:0;padding:1rem 0 0}
.look-stride .step h3{font-size:1.3rem}
.look-stride .quote{background:none;border:0;border-top:3px solid var(--accent);border-radius:0;padding:1.4rem 0 0}
.look-stride .quote blockquote{font-size:1.12rem;line-height:1.55}
.look-stride .quote__by{font-stretch:88%}
.look-stride .point{border-left:3px solid var(--accent);padding-left:1.1rem}
.look-stride .point h3{font-size:1.35rem;font-stretch:80%}
/* the doctor photo and the page heads echo the hero cut on one corner */
.look-stride .split__media img,.look-stride .page-head__media img{clip-path:polygon(0 0,100% 0,100% 86%,84% 100%,0 100%)}
.look-stride .doc__media img{clip-path:polygon(0 0,100% 0,100% 90%,86% 100%,0 100%)}
.look-stride .sec--cta .sec__h{font-size:clamp(2.2rem,4.6vw,3.8rem);max-width:18ch}
.look-stride .faq__q{font-size:1.08rem}
/* inner pages: base.css (R6) ramps the footer from the page tone over 170px, which leaves the footer labels inside the light part
   of the ramp (cold council measured 3.14:1). Stride ramps over 130px and starts the footer text below it. */
body.inner .site-footer{background:linear-gradient(in oklab to bottom,var(--tone-base) 0,var(--tone-ink) 130px);padding-top:calc(130px + 2.5rem)}
/* the second clinician list sits under its own rule and the rendered label (render.mjs writes .minidocs__h) */
.look-stride .minidocs__h{margin:1.75rem 0 .6rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.9rem;font-weight:600;color:var(--muted)}
/* the section after the dark photo band starts its heading below the 170px seam ramp (a cold council measured 3.10:1 for a heading on the ramp in a sibling look) */
.sec--highlights + .sec{padding-top:calc(170px + 1.75rem)}

/* rework 2026-10-07: photo slots and the open council items */
/* lane rows with a tile photo: a small thumb at the lane start, cut on one corner like the hero; linked rows get an arrow */
.look-stride .card--img{grid-template-columns:132px minmax(0,.8fr) minmax(0,1.3fr);align-items:center;padding-left:.9rem}
.look-stride .card--img .card__img{grid-column:1;grid-row:1;width:132px;margin:0;border-radius:2px;clip-path:polygon(0 0,100% 0,100% 78%,80% 100%,0 100%)}
.look-stride .card--img{grid-template-columns:132px minmax(0,.8fr) minmax(0,1.3fr) 1.75rem}
.look-stride .card--link::after{content:"\2192";grid-column:4;grid-row:1;align-self:center;justify-self:end;font-weight:700;color:var(--accent-deep);transition:translate .3s var(--st-ease)}
.look-stride .card--link:hover::after{translate:4px 0}
@media (max-width:700px){
  .look-stride .card--img{grid-template-columns:96px minmax(0,1fr);column-gap:1rem}
  .look-stride .card--link::after{display:none}
  .look-stride .card--img .card__img{width:96px;grid-row:1 / span 2;align-self:start}
  .look-stride .card--img .card__h,.look-stride .card--img p{grid-column:2}
}
/* section photos echo the hero cut on one corner */
.look-stride .sec__media img,.look-stride .prose__media img{border-radius:2px;clip-path:polygon(0 0,100% 0,100% 84%,94% 100%,0 100%)}
/* visit collage: one gutter value, lower pair fills the row (council: uneven gutters) */
.look-stride .visit__media img:not(:first-child){height:auto;aspect-ratio:4/3}
/* closing CTA photo fades into its own tone at the bottom, so the footer ramp starts from the same color (council: hard edge) */
.look-stride .photo-band--cta{-webkit-mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 150px),transparent);mask-image:linear-gradient(transparent 120px,#000 300px,#000 calc(100% - 150px),transparent)}
/* inner pages keep the Stride cut: a deep wedge with the orange lane line sits behind the page-head photo, inset from both seams */
@media (min-width:861px){
  .look-stride .page-head:has(.page-head__media){position:relative;isolation:isolate}
  .look-stride .page-head:has(.page-head__media)::before{content:"";position:absolute;z-index:-1;right:0;top:clamp(3.5rem,6vw,5rem);bottom:clamp(1.25rem,2.5vw,2rem);width:40%;background:var(--tone-hero-c);clip-path:polygon(24% 0,100% 0,100% 100%,0 100%)}
  .look-stride .page-head:has(.page-head__media)::after{content:"";position:absolute;z-index:-1;right:0;top:clamp(3.5rem,6vw,5rem);bottom:clamp(1.25rem,2.5vw,2rem);width:40%;translate:-16px 0;background:var(--accent);clip-path:polygon(24% 0,calc(24% + 8px) 0,8px 100%,0 100%)}
  .look-stride .page-head__media{position:relative;padding-left:12%}
  .look-stride .page-head:has(.page-head__media) .page-head__lead{max-width:44ch}
}

/* council round 1 (2026-10-07) */
/* tighter seams: plain sections drop to about 88px a side; the section after the dark band keeps its heading below the ramp */
.look-stride .sec:not(.sec--highlights):not(.sec--cta){padding-block:clamp(3.5rem,6.5vw,5.5rem)}
.look-stride .sec.sec--highlights + .sec:not(.sec--cta){padding-top:calc(170px + 1.75rem)}
.look-stride .sec.sec--highlights{padding-bottom:clamp(4.5rem,7vw,6rem)}
/* reviews: a narrow photo beside the quotes, stacked (a different form from the wide strip over the first-visit steps) */
@media (min-width:861px){
  .look-stride .sec--reviews > .wrap:has(> .sec__media){display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .look-stride .sec--reviews > .wrap > .sec__h{grid-column:2;grid-row:1}
  .look-stride .sec--reviews > .wrap > .sec__media{grid-column:1;grid-row:1 / span 2;margin:0}
  .look-stride .sec--reviews > .wrap > .sec__media img{aspect-ratio:4/5;object-position:42% 60%}
  .look-stride .sec--reviews > .wrap > .quotes{grid-column:2;grid-row:2;grid-template-columns:1fr;gap:1.5rem;margin-top:1.75rem}
}
/* visit collage: grid items may shrink, so both rows share one width */
.look-stride .visit__media > img{min-width:0}
/* service pages: every second section photo sits beside its text, so a page does not repeat one stack three times */
@media (min-width:861px){
  .look-stride .prose figure.prose__media:nth-of-type(2){float:right;width:46%;margin:.35rem 0 1rem 1.75rem}
  .look-stride .prose figure.prose__media:nth-of-type(2) img{aspect-ratio:4/3}
  .look-stride .prose h2{clear:both}
}
/* mobile hero: a shorter photo so the H1 and buttons come up sooner */
@media (max-width:860px){.look-stride .hero__bg{height:32vh;min-height:200px}}
/* the reviews heading follows the dark hero, so it keeps its start below most of that ramp */
.look-stride .sec.sec--reviews:not(.sec--cta){padding-top:clamp(7.5rem,9vw,8.5rem)}

/* overlap fixes 2026-10-23 (audit _work/sample-overlap-2026-10-22). Scope: the copy-right hero of Stride and Ridge;
   Split (copy-left) and Arc (center) keep their own heroes. The hero is mirrored (base.css), so in these rules "left"
   and "right" are unmirrored: the copy column is on the left, the photo on the right. */
@media (min-width:861px){
  /* the lane is tied to the copy column: --st-e is the photo's bottom corner, the copy's edge plus a 2rem clearance and
     the 18px lane, so the lane (furthest toward the copy at the bottom) never reaches text or buttons at any size */
  body.look-stride.hero-layout-copy-right:not(.hero-layout-own) .hero{--st-clear:2rem;--st-copy:min(36rem,40vw);
    --st-e:calc(max(1.25rem,50% - 590px) + var(--st-copy) + var(--st-clear) + 18px)}
  body.look-stride.hero-layout-copy-right:not(.hero-layout-own) .hero__bg{width:calc(100% - var(--st-e))}
  body.look-stride.hero-layout-copy-right:not(.hero-layout-own) .hero::after{
    clip-path:polygon(calc(var(--st-e) + (100% - var(--st-e)) * .22 - 18px) 0,calc(var(--st-e) + (100% - var(--st-e)) * .22 - 9px) 0,calc(var(--st-e) - 9px) 100%,calc(var(--st-e) - 18px) 100%)}
  body.look-stride.hero-layout-copy-right:not(.hero-layout-own) .hero__inner{grid-template-columns:var(--st-copy) minmax(0,1fr);align-content:center;row-gap:1.75rem;padding-top:clamp(2.5rem,min(7vw,8vh),6rem)}
  body.look-stride.hero-layout-copy-right:not(.hero-layout-own) .hero__copy{grid-column:1;grid-row:1;max-width:none}
  /* the doctor moves off the photo, so it never covers the subject whatever the photo: a portrait line under the buttons
     (the phone layout's form). Unmirrored order is name then portrait, so on screen the portrait leads. */
  body.look-stride.hero-layout-copy-right:not(.hero-layout-own) .hero__doc{grid-column:1;grid-row:2;align-self:start;justify-self:end;width:auto;max-width:100%;
    display:grid;grid-template-columns:minmax(0,auto) 64px;column-gap:1rem;align-items:center;padding:0;background:none;box-shadow:none;border-radius:0}
  body.look-stride.hero-layout-copy-right:not(.hero-layout-own) .hero__doc::before{display:none}
  body.look-stride.hero-layout-copy-right:not(.hero-layout-own) .hero__doc img{grid-column:2;grid-row:1;width:64px;height:64px;aspect-ratio:1;border-radius:50%;object-fit:cover}
  body.look-stride.hero-layout-copy-right:not(.hero-layout-own) .hero__doc figcaption{grid-column:1;grid-row:1;margin:0;padding:0}
}
/* the mirrored photo is flipped back around its center: an off-center origin (60%) left a 125px strip with no photo
   at the lane side once the parallax scale ran */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference) and (min-width:861px){
    body.look-stride.hero-layout-copy-right:not(.hero-layout-own) .hero.parallax-scene .hero__bg img{transform-origin:50% 40%}
  }
}
/* owner ask 2026-10-23: rounded edges on the content photos, at the button radius; the corner cuts go (Stride and Ridge).
   Ridge keeps its two full diagonal edges (doctor photo and every second bio, desktop). */
body.look-stride:not(.look-split):not(.look-arc){--radius-media:var(--radius-btn)}
body.look-stride:not(.look-split):not(.look-arc) :is(.sec__media,.prose__media,.split__media,.visit__media,.doc__media,.page-head__media) img,
body.look-stride:not(.look-split):not(.look-arc) .card--img .card__img{border-radius:var(--radius-media);clip-path:none}
@media (min-width:861px){
  body.look-stride.look-ridge:not(.look-split):not(.look-arc) .sec--doctor .split__media img{clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
  body.look-stride.look-ridge:not(.look-split):not(.look-arc) .doc:nth-of-type(even) .doc__media img{clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    body.look-stride:not(.look-split):not(.look-arc) .sec--doctor.image-reveal .split__media img{animation-name:st-image-wipe}
  }
  @media (prefers-reduced-motion:no-preference) and (min-width:861px){
    body.look-stride.look-ridge:not(.look-split):not(.look-arc) .sec--doctor.image-reveal .split__media img{animation-name:rd-diag-wipe}
  }
}

/* Look: Arc. Re-skin of Stride for orthodontics. Keeps Stride's archetype (photo cut by an edge inside the hero,
   copy on a deep solid panel, condensed display type) and its signature variable-font-axis-animation (the H1
   settles from wide to condensed once). The cut is an arc instead of a straight diagonal, with a mint archwire
   stripe along it. Ultraviolet or tide panels, Anybody (a variable font with a wide wdth axis) over Albert Sans.
   Below the hero: reviews in ruled columns, treatments as deep-panel tiles, first-visit steps under arched caps.
   Effects (effects-library ids, inherited from Stride's look.json and stylesheet): variable-font-axis-animation
   (css-only; reduced motion: final width), layered-scroll-parallax-depth (CSS scroll timelines; reduced motion:
   static), image-clip-path-reveal, line-expand-reveal-decorative-hr-separator, css-variable-scroll-progress-bar. */
/* perf PERF-4 (seo-a11y 2026-10-23): the preloaded faces use font-display optional, so a late font never reflows the hero (CLS) */
@font-face{font-family:"Anybody";src:url(/assets/look/anybody-var.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-style:normal;font-display:optional}
@font-face{font-family:"Albert Sans";src:url(/assets/look/albert-sans-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:optional}
:root{--f-display:"Anybody",system-ui,sans-serif;--f-body:"Albert Sans",system-ui,sans-serif;--fw-display:800;--ls-display:-0.01em;
  --radius-card:18px;--radius-photo:22px;--radius-btn:999px}
body{font-family:var(--f-body)}
h1,h2,h3,.brand__name,.site-footer__name{font-family:var(--f-display)}
h2{line-height:1.02}

/* primary buttons: mint on the deep panels, ultraviolet (or deep sea blue) on light pages so they hold contrast */
.btn--primary{background:var(--accent-deep);color:#fff}
.hero .btn--primary,.sec--cta .btn--primary{background:var(--accent);color:var(--on-accent)}

/* hero: the photo edge is an arc, not a straight cut; a mint stripe (the archwire) runs along it */
.hero__bg{clip-path:ellipse(100% 125% at 100% 50%)}
.hero::after{left:auto;width:calc(54% + 16px);z-index:-2;background:var(--accent);clip-path:ellipse(100% 125% at 100% 50%);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 320px),transparent calc(100% - 170px));mask-image:linear-gradient(#000 calc(100% - 320px),transparent calc(100% - 170px))}
.hero__h1{text-wrap:balance}
@media (min-width:861px){.hero__doc{justify-self:start;transform:translate(-42%,12%)}}
/* a closed mint half-disc seated inside the card corner (the open ring read as a loading spinner, council 2026-10-06) */
.hero__doc::before{width:26px;height:13px;left:auto;right:14px;top:14px;border:0;border-radius:26px 26px 0 0;background:var(--accent);transform:none}
.hero__doc{border-radius:16px}
.hero__doc img{border-radius:12px}
.hero__h1{line-height:.96}
@media (max-width:860px){
  .hero__bg{clip-path:ellipse(125% 100% at 50% 0)}
  .hero__doc img{border-radius:50%}
}

/* reviews: four ruled columns, a mint quote mark, no boxes */
.look-arc .quotes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0}
.look-arc .quote{background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:.4rem 1.6rem 0}
.look-arc .quote:first-child{border-left:0;padding-left:0}
.look-arc .quote::before{content:"\201C";display:block;font:800 3.4rem/.8 var(--f-display);font-stretch:80%;color:var(--accent-deep);margin-bottom:.2rem}
.look-arc .quote blockquote{margin:0}
.look-arc .quote__by{font-weight:700;color:var(--muted)}
@media (max-width:760px){.look-arc .quote{border-left:0;border-top:1px solid var(--line);padding:1.4rem 0 0}.look-arc .quote:first-child{border-top:0}}

/* treatments: deep-panel tiles with a mint arc in the corner */
.look-arc .cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
@media (min-width:1000px){.look-arc .cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.look-arc .sec .card{position:relative;overflow:hidden;background:var(--tone-hero-c);color:var(--hero-ink);border:0;border-radius:var(--radius-card);padding:1.6rem 1.5rem 1.7rem}
.look-arc .card::after{content:"";position:absolute;right:-34px;bottom:-34px;width:96px;height:96px;border-radius:50%;border:6px solid var(--accent);opacity:.9;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.look-arc .card__h,.look-arc .card__h a{color:var(--hero-heading)}
.look-arc .card p{color:var(--hero-ink);position:relative;padding-right:2.6rem}
.look-arc .card--link .card__h a{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.25em}
.look-arc .card--link .card__h a::after{content:"";position:absolute;inset:0}
.look-arc .card--link:hover::after,.look-arc .card--link:focus-within::after{transform:translate(-14px,-14px) scale(1.15)}
.look-arc .card--link:focus-within{outline:3px solid var(--accent-deep);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.look-arc .card::after{transition:none}}

/* highlights band: each point opens with a small mint arc */
.look-arc .points{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px;gap:2.4rem 3.5rem}
@media (max-width:700px){.look-arc .points{grid-template-columns:1fr}}
.look-arc .point h3{display:flex;align-items:center;gap:.7rem}
.look-arc .point h3::before{content:"";flex:none;width:26px;height:13px;border-radius:26px 26px 0 0;background:var(--accent)}

/* first-visit steps: each under an arched cap (Stride's lane line still draws along the top) */
.look-arc .step{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:2.6rem 1.5rem 1.5rem}
.look-arc .step::before{content:"";position:absolute;inset:0 0 auto 0;height:30px;border-top:5px solid var(--accent-deep);border-radius:50% 50% 0 0 / 100% 100% 0 0}
.look-arc .steps--page .step{padding:1.3rem 1.5rem 1.3rem 1.9rem}
.look-arc .steps--page .step::before{inset:0 auto 0 0;width:22px;height:auto;border-top:0;border-left:5px solid var(--accent-deep);border-radius:50% 0 0 50% / 100% 0 0 100%}

/* doctor and inner page heads: rounded photos (Stride cuts a corner; Arc rounds it) */
.look-arc .split__media img,.look-arc .page-head__media img{border-radius:var(--radius-photo)}
.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%)}

/* doctor: smaller portrait so a short bio does not leave a tall empty column; visit: photo fills its column */
@media (min-width:861px){.look-arc .sec--doctor .split{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}
.look-arc .visit{align-items:stretch}
.look-arc .visit__media img:only-child{aspect-ratio:auto;height:100%;object-fit:cover}

/* section rhythm and FAQ */
.look-arc .sec:not(.sec--highlights){padding-block:clamp(3rem,5vw,4.5rem)}
.look-arc .sec.sec--highlights + .sec,.look-arc .sec.sec--reviews{padding-top:calc(150px + 1rem)}
.look-arc .faq__q{font-family:var(--f-display);font-weight:700;font-stretch:90%}
.look-arc .faq__item summary::after{color:var(--accent-deep)}
.look-arc .sec.sec--cta{padding-top:calc(150px + 1rem)}

/* the body also carries look-stride since shared request R7, so Stride's own below-hero structure reaches this look;
   these rules keep Arc's structure (same specificity or higher, later in the cascade) */
.look-arc .cards{display:grid;border-top:0}
.look-arc .sec .card{display:block}
.look-arc .card__h{font-size:1.15rem;font-stretch:90%}
.look-arc .card--link,.look-arc .card--link:hover{box-shadow:none;translate:none;background-color:var(--tone-hero-c)}
.look-arc .point{border-left:0;padding-left:0}
.look-arc .split__media img,.look-arc .page-head__media img{clip-path:none}

/* doctor (section_fx animate-in): the portrait opens from a round crop as it scrolls into view, the hero's curve
   again (image-clip-path-reveal). Reduced motion or no scroll-timeline support: shown open. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec--doctor.animate-in .split__media img{animation:arc-open linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  }
}
@keyframes arc-open{from{clip-path:circle(38% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}

/* rework 2026-10-07: council round 2 should-fix items and the new photo slots */
/* H1: balanced lines inside Stride's 13ch measure */
.look-arc .hero__h1{text-wrap:balance}
/* treatment tiles now carry a photo; the title sits clear of the body text */
.look-arc .card__img{border-radius:12px;margin-bottom:1.1rem}
.look-arc .card__h{margin-bottom:.75rem}
/* homepage section photos and service page photos keep the rounded Arc corner */
.look-arc .sec__media img,.look-arc .prose__media img{border-radius:var(--radius-photo)}
/* highlights band: shorter photo tail under the last point (about 230px of empty photo before) */
.look-arc .sec--highlights{padding-bottom:6rem}
@media (max-width:860px){.look-arc .sec--highlights{padding-bottom:7rem}}
/* closing band: the Arc motif, a mint arc stroke inside the band right of the heading; a faint rule above the footer grid */
.look-arc .sec--cta::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;bottom:0;translate:-50% 0;width:min(64vw,760px);aspect-ratio:2/1;
  border:3px solid var(--accent);border-bottom:0;border-radius:999px 999px 0 0;opacity:.4}
@media (max-width:860px){.look-arc .sec--cta::after{display:none}}
.look-arc .site-footer__grid{border-top:1px solid rgb(255 255 255 / .08);padding-top:2rem}
/* inner page heads: a mint arc along the left edge of the head photo, the hero's curve again */

/* FAQ: the plus sign sits on the question's center line */
.look-arc .faq__item summary{align-items:center}
/* tiles: Stride's lane-row thumbnail (2026-10-07) gives way to a full-width photo on top of each Arc tile */
.look-arc .sec .card--img{display:block;padding-left:1.5rem}
.look-arc .sec .card--img .card__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin:0 0 1.1rem;border-radius:12px;clip-path:none}
/* visit photo: the wipe starts from a partly open frame, so a capture taken before the scroll still shows the photo
   (Stride's wipe starts fully closed; full-page captures showed an empty column) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .look-arc .sec--visit.image-reveal .visit__media img{animation-name:arc-visit-open}
  }
}
@keyframes arc-visit-open{from{clip-path:inset(0 0 0 28% round var(--radius-photo))}to{clip-path:inset(0 round var(--radius-photo))}}

/* council round 1 (2026-10-07) */
/* inner page heads: Arc keeps one curve; Stride's wedge and lane line stay off, the photo is rounded */
.look-arc .page-head:has(.page-head__media)::before,.look-arc .page-head:has(.page-head__media)::after{content:none}
.look-arc .page-head__media{padding-left:0}
.look-arc .sec__media img,.look-arc .prose__media img{clip-path:none}
/* tile arrows in mint, kept with the last word */
.look-arc .card--link .card__h::after{color:var(--accent)}
.look-arc .card__h a{text-wrap:balance}
/* reviews: every quote starts at the top of its column */
.look-arc .quotes{align-items:start}
/* team list on the doctors page: round headshots */
.look-arc .team__list img{border-radius:50%;width:96px;height:96px;object-fit:cover;margin-bottom:.6rem}
/* service and first-visit pages: the side card stays in view beside long text */
@media (min-width:861px){.look-arc .aside{position:sticky;top:6rem;align-self:start}}

/* perf PERF-4 (seo-a11y round 2): stride's settle animates font-stretch and font-weight, which holds still in stride's
   left-aligned hero (the box is in ch) but moves the centered arc heading and changes its line count while it plays
   (Lighthouse mobile CLS 0.134). Arc keeps the settle as a transform from wide to final, so layout is final from the
   first frame. */
@media (prefers-reduced-motion:no-preference){
  .look-arc .hero__h1{animation:arc-axis-settle 1.2s var(--st-ease,cubic-bezier(.2,.8,.2,1)) .1s both}
}
@keyframes arc-axis-settle{from{transform:scaleX(1.3)}to{transform:none}}

:root{--bg:#F2F1F7;--alt:#E6E3F0;--card:#FFFFFF;--ink:#1B1830;--muted:#4E4A63;--heading:#16122E;--accent:#5FE0C2;--on-accent:#14112A;--accent-deep:#4B2FC0;--line:rgba(27,24,48,.15);--star:#4B2FC0;--tone-hero-c:#241A52;--hero-ink:#DCD8EE;--hero-heading:#FFFFFF;--hero-scrim:linear-gradient(90deg,rgba(36,26,82,.30) 0%,rgba(36,26,82,0) 40%);--tone-photo-c:#1F1747;--photo-scrim:rgba(31,23,71,.62);--tone-accent-c:#241A52;--cta-ink:#E9E6F5;--cta-btn:#5FE0C2;--cta-btn-ink:#14112A;--tone-ink-c:#17113A;--on-ink:#D8D4EA;--cta-scrim:linear-gradient(180deg,rgba(36,26,82,.50) 0%,rgba(36,26,82,.80) 72%,rgb(36,26,82) 100%)}