/* Gallery composition and construction motion, inspired by 21st's gallery and curtain patterns. */
:root { --site-header-height: 106px; }
html { scroll-padding-top: calc(var(--site-header-height) + 20px); }
body { padding-top: var(--site-header-height); }
#site-header { position: fixed; inset: 0 0 auto; width: 100%; height: var(--site-header-height); margin: 0; z-index: 100; box-shadow: 0 8px 24px #153e3308; }
.clinic-hero { background: #173e34; padding: 0; }
.clinic-hero-inner { position: relative; min-height: 760px; isolation: isolate; overflow: hidden; background: #173e34; }
.clinic-collage { position: absolute; inset: 0; display: grid; grid-template-columns: .85fr 1.25fr .85fr; gap: 14px; }
.clinic-frame { position: relative; overflow: hidden; background: #647359; }
.clinic-frame img { width: 100%; height: 100%; object-fit: cover; }
.clinic-frame-reception { margin-top: 70px; margin-bottom: 80px; }
.clinic-frame-reception img { object-position: 60% 45%; }
.clinic-frame-room { margin-top: 0; margin-bottom: 0; }
.clinic-frame-room img { object-position: 35% 50%; }
.clinic-frame-facade { margin-top: 40px; margin-bottom: 40px; }
.clinic-hero-inner::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg,#072c27a8,transparent 38%),linear-gradient(90deg,#143c325c,#0b302ac9 50%,#11392d4d); }
.clinic-hero-copy { position: relative; z-index: 2; text-align: center; color: #f7f6ec; margin-inline: auto; padding: 145px 25px 140px; max-width: 1060px; }
.clinic-hero-copy .eyebrow { justify-content: center; color: #e3ead6; font-size: 9px; letter-spacing: 2.2px; }
.clinic-hero h1 { font-family: var(--serif); font-size: clamp(66px,8.3vw,126px); line-height: .93; font-weight: 400; letter-spacing: -3px; margin: 38px 0 28px; }
.clinic-hero h1 .hero-line { margin-inline: auto; }
.clinic-hero h1 em { color: #d4e1bf; }
.clinic-hero-copy > p { font-size: 14px; line-height: 1.9; color: #eff2e7; }
.clinic-hero-actions { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 30px; }
.clinic-hero-actions .button-light { background: #edf0df; color: #173e34; min-width: 230px; }
.clinic-discover { font-size: 11px; display: inline-flex; align-items: center; gap: 15px; padding-block: 13px; border-bottom: 1px solid #d1ddc380; }
.clinic-discover .icon { width: 16px; height: 16px; }
.clinic-hero-foot { position: absolute; bottom: 30px; left: 35px; right: 35px; display: flex; justify-content: space-between; align-items: center; gap: 25px; color: #e4ead9; z-index: 2; font-size: 9px; letter-spacing: 1.1px; }
.clinic-hero-foot a { display: inline-flex; gap: 8px; align-items: center; letter-spacing: 0; font-size: 10px; }
.clinic-hero-foot .icon { width: 16px; height: 16px; }
.clinic-story { background: #e9ece2; }
.clinic-story-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 100px; }
.clinic-story-images { position: relative; padding-right: 100px; padding-bottom: 55px; }
.clinic-story-main { height: 465px; overflow: hidden; position: relative; background: #cbd3bf; }
.clinic-story-detail { position: absolute; right: 0; bottom: 0; width: 205px; height: 265px; border: 8px solid #e9ece2; overflow: hidden; background: #cbd3bf; }
.clinic-story-tag { position: absolute; bottom: 15px; left: 0; font-size: 8px; letter-spacing: 1.6px; }
.clinic-story-copy h2 { font-size: 57px; }
.clinic-story-copy > p { font-size: 13px; line-height: 1.95; color: var(--muted); }
.clinic-story-copy .text-link { margin-top: 15px; }
.home-card-top, .card-top { justify-content: flex-end; }
.home-treatment-summary { background: #e9ece2; border-block: 1px solid #d3dbc9; padding-block: 85px; }
.home-treatment-teaser { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 95px; }
.home-treatment-summary h2 { font-size: 56px; line-height: 1.06; margin: 22px 0; }
.home-treatment-summary-copy > p { max-width: 390px; color: #61705a; font-size: 14px; line-height: 1.85; margin-bottom: 28px; }
.home-treatment-summary .button { min-width: 245px; justify-content: space-between; }
.home-treatment-overview { list-style: none; padding: 0; margin: 0; }
.home-treatment-overview li { display: flex; align-items: center; gap: 22px; padding: 21px 0; border-bottom: 1px solid #c8d2bd; }
.home-treatment-overview li:first-child { border-top: 1px solid #c8d2bd; }
.home-overview-icon { width: 45px; height: 45px; border: 1px solid #c7d2bc; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #627c52; }
.home-overview-icon .icon { width: 23px; height: 23px; }
.home-treatment-overview li > span:last-child { font-family: var(--serif); font-size: 29px; letter-spacing: -.5px; }
.doctor-hero { padding-top: 25px; padding-bottom: 90px; }
.doctor-hero .breadcrumbs { margin-bottom: 42px; }
.doctor-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 95px; }
.doctor-hero h1 { font-size: clamp(58px,5.8vw,86px); line-height: 1; font-family: var(--serif); letter-spacing: -2px; margin-block: 30px; }
.doctor-hero h1 em { white-space: normal; font-size: .77em; color: #748668; }
.doctor-hero-copy > p { font-size: 13px; color: var(--muted); line-height: 1.95; max-width: 450px; }
.doctor-portrait .editorial-hero-image { min-height: 0; height: 530px; position: relative; }
.doctor-portrait .editorial-hero-image > img { object-position: 50% 45%; }
.doctor-portrait .home-photo-overline { margin-bottom: 16px; }
.doctor-portrait .home-experience-seal { left: -34px; }
.doctor-portrait .home-doctor-caption { padding-top: 42px; }
.doctor-portrait .home-hero-visual { width: 100%; }
.care-journey { background: #f5f4ee; }
.journey-widget { position: relative; border: 1px solid #c9d3be; padding: 44px; background: #f9f8f1; }
.journey-tabs { display: grid; grid-template-columns: repeat(4,1fr); position: relative; margin-bottom: 44px; }
.journey-tabs::before { content: ''; position: absolute; top: 24px; left: 12.5%; right: 12.5%; height: 1px; background: #ccd6c2; }
.journey-tabs::after { content: ''; position: absolute; top: 24px; left: 12.5%; width: 75%; height: 1px; background: #517444; transform: scaleX(var(--step-progress,0)); transform-origin: left; transition: transform 450ms var(--motion-ease); }
.journey-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 0 8px; background: none; color: #64775b; font-size: 12px; z-index: 1; }
.journey-tab-icon { width: 49px; height: 49px; display: grid; place-items: center; border: 1px solid #ccd6c2; border-radius: 50%; background: #f9f8f1; transition: background 250ms,color 250ms,border-color 250ms; }
.journey-tab-icon .icon { width: 22px; height: 22px; }
.journey-tab[aria-selected='true'] { color: #153e33; font-weight: 650; }
.journey-tab[aria-selected='true'] .journey-tab-icon { background: #153e33; border-color: #153e33; color: #f3f5e9; }
.journey-tab[data-complete] .journey-tab-icon { background: #e2e9d8; border-color: #98ae88; color: #416038; }
.journey-panel { display: grid; grid-template-columns: 140px 1fr; gap: 40px; padding: 35px; border-top: 1px solid #d5dccd; min-height: 245px; }
.journey-panel-mark { width: 116px; height: 116px; align-self: center; display: grid; place-items: center; color: #6c855a; background: #e7eddd; border-radius: 28px; }
.journey-panel-mark .icon { width: 55px; height: 55px; }
.journey-panel h3 { font-size: 43px; margin: 18px 0; }
.journey-panel p { color: #5b6f52; font-size: 14px; line-height: 1.85; margin-bottom: 10px; }
.journey-panel .journey-detail { color: #77836c; font-size: 12px; }
.journey-panel[hidden] { display: none; }
.journey-controls { display: none; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #d5dccd; padding-top: 28px; }
.stepper-ready .journey-controls { display: flex; }
.journey-back { display: flex; align-items: center; gap: 10px; background: transparent; color: #153e33; padding: 12px 0; font-size: 12px; }
.journey-back:disabled { opacity: .35; cursor: default; }
.journey-back .icon { width: 17px; height: 17px; }
.journey-current { font-size: 10px; color: #75856a; margin: 0; }
.journey-controls .button { min-width: 190px; justify-content: space-between; }
.journey-controls .journey-next-label { width: auto; height: auto; border: 0; font-size: 12px; transform: none; display: inline; border-radius: 0; }
.contact-panel .contact-phone { display: block; margin-top: 20px; font-size: 12px; text-align: center; color: #617355; }
.clinic-location { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: center; padding-top: 50px; }
.location-copy h2 { font-size: 59px; }
.location-copy > p { font-size: 13px; line-height: 1.9; color: var(--muted); margin-bottom: 28px; }
.location-map-composition { position: relative; margin-right: 25px; }
.location-map-backplate { position: absolute; inset: 26px -26px -26px 26px; background: #b8c9ad; border: 1px solid #a5b89a; }
.location-map { height: 370px; position: relative; overflow: hidden; background: #dbe2d1; border: 1px solid #ccd5c3; }
.location-map iframe { border: 0; width: 100%; height: 100%; display: block; }
.location-map-caption { position: relative; display: flex; align-items: center; gap: 10px; font-size: 11px; padding: 19px 18px; background: #f7f7ee; }
.location-map-caption > .icon { width: 17px; height: 17px; }
.location-map-caption > span { margin-left: auto; }
.location-map-caption > span .icon { width: 17px; height: 17px; }
.google-reputation { background: #e9ece2; }
.reputation-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 100px; }
.reputation-grid h2 { font-size: 57px; }
.reputation-grid > div > p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.google-rating { border: 1px solid #c7d2bd; padding: 35px 40px; background: #f7f7ee; }
.google-label { font-size: 11px; color: #617355; }
.rating-value { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; margin: 15px 0 30px; }
.rating-value strong { font-family: var(--serif); font-size: 86px; font-weight: 400; line-height: 1; letter-spacing: -3px; }
.rating-value > span { color: #879b63; letter-spacing: 4px; font-size: 19px; }

/* Build each element in space: opening picture masks, drawing rules and assembling frames. */
[data-build] { --build-delay: 0ms; }
.build-ready [data-build='photo'] { clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--motion-ease); transition-delay: var(--build-delay); }
.build-ready [data-build='photo'] > img { transform: scale(1.12); transition: transform 1300ms var(--motion-ease); transition-delay: var(--build-delay); }
.build-ready [data-build='photo'].is-built { clip-path: inset(0); }
.build-ready [data-build='photo'].is-built > img { transform: scale(1); }
.build-ready .clinic-frame-room { --build-delay: 140ms; }
.build-ready .clinic-frame-facade { --build-delay: 280ms; }
.build-ready [data-build='frame'] .home-photo-backplate,
.build-ready [data-build='frame'] .location-map-backplate { transform: translate(-26px,-26px) scaleX(0); transform-origin: left top; transition: transform 1100ms var(--motion-ease); }
.build-ready [data-build='frame'].is-built .home-photo-backplate,
.build-ready [data-build='frame'].is-built .location-map-backplate { transform: translate(0) scaleX(1); }
.build-ready [data-build='card'] { clip-path: inset(0 0 100% 0); transition: clip-path 850ms var(--motion-ease); transition-delay: var(--build-delay); }
.build-ready [data-build='card'].is-built { clip-path: inset(0); }
.build-ready [data-build='card'] .home-card-link { transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--motion-ease) 200ms; }
.build-ready [data-build='card'].is-built .home-card-link { transform: scaleX(1); }
.build-ready .home-treatment-card:nth-child(2) { --build-delay: 120ms; }
.build-ready .home-treatment-card:nth-child(3) { --build-delay: 240ms; }
@media (max-width:1100px) {
  :root { --site-header-height: 96px; }
  .home-treatment-teaser { gap: 55px; }
  .home-treatment-summary h2 { font-size: 48px; }
  .home-treatment-overview li > span:last-child { font-size: 26px; }
  .clinic-hero-inner { min-height: 660px; }
  .clinic-hero-copy { padding-block: 130px; }
  .clinic-hero h1 { font-size: 94px; }
  .clinic-story-grid,.doctor-hero-grid,.clinic-location,.reputation-grid { gap: 55px; }
  .clinic-story-images { padding-right: 70px; }
  .clinic-story-detail { width: 170px; height: 225px; }
  .clinic-story-copy h2,.location-copy h2 { font-size: 47px; }
  .doctor-hero h1 { font-size: 66px; }
  .doctor-portrait .editorial-hero-image { height: 490px; }
}
@media (max-width:800px) {
  :root { --site-header-height: 95px; }
  .header .nav.is-open { top: calc(100% - 1px); }
  .home-treatment-teaser { gap: 35px; }
  .home-treatment-summary h2 { font-size: 43px; }
  .home-treatment-summary-copy > p { font-size: 13px; }
  .home-treatment-overview li { gap: 15px; }
  .home-treatment-overview li > span:last-child { font-size: 24px; }
  .clinic-hero-inner { min-height: 650px; }
  .clinic-hero-copy { padding: 140px 20px 130px; }
  .clinic-hero h1 { font-size: 76px; }
  .clinic-hero h1 em { white-space: normal; }
  .clinic-hero-foot { font-size: 7px; left: 22px; right: 22px; }
  .clinic-hero-foot a { font-size: 9px; }
  .clinic-collage { grid-template-columns: .8fr 1.1fr .8fr; gap: 9px; }
  .clinic-story-grid { gap: 40px; }
  .clinic-story-images { padding-right: 40px; padding-bottom: 50px; }
  .clinic-story-main { height: 390px; }
  .clinic-story-detail { width: 140px; height: 185px; border-width: 5px; }
  .clinic-story-copy h2 { font-size: 40px; }
  .clinic-story-tag { font-size: 6px; letter-spacing: .7px; }
  .doctor-hero-grid { gap: 40px; }
  .doctor-hero h1 { font-size: 54px; }
  .doctor-hero-copy > p { font-size: 12px; }
  .doctor-portrait .editorial-hero-image { height: 450px; }
  .journey-widget { padding: 28px; }
  .journey-panel { grid-template-columns: 100px 1fr; padding: 28px 0; gap: 25px; }
  .journey-panel-mark { width: 90px; height: 90px; }
  .journey-panel h3 { font-size: 37px; }
  .journey-tab { font-size: 10px; }
  .journey-controls .button { min-width: 170px; }
  .clinic-location { gap: 40px; }
  .location-copy h2 { font-size: 44px; }
  .location-map { height: 330px; }
  .reputation-grid { gap: 35px; }
  .reputation-grid h2 { font-size: 44px; }
  .google-rating { padding: 25px; }
}
@media (max-width:600px) {
  :root { --site-header-height: 88px; }
  .home-treatment-summary { padding-block: 58px; }
  .home-treatment-teaser { grid-template-columns: 1fr; gap: 30px; }
  .home-treatment-summary h2 { font-size: 43px; letter-spacing: -1.2px; }
  .home-treatment-summary-copy > p { margin-bottom: 24px; }
  .home-treatment-summary .button { width: 100%; min-width: 0; }
  .home-treatment-overview li { padding-block: 17px; gap: 16px; }
  .home-treatment-overview li > span:last-child { font-size: 26px; }
  .header-cta { white-space: nowrap; }
  .clinic-hero-inner { min-height: 700px; }
  .clinic-collage { grid-template-columns: 1fr 1fr; gap: 7px; }
  .clinic-frame-reception { margin-top: 40px; margin-bottom: 125px; }
  .clinic-frame-room { grid-column: 1 / -1; grid-row: 1; margin-top: 0; margin-bottom: 0; }
  .clinic-frame-facade { position: absolute; width: 40%; height: 250px; right: 0; top: 25px; margin: 0; }
  .clinic-frame-reception { position: absolute; width: 37%; height: 240px; bottom: 18px; left: 0; margin: 0; z-index: 1; }
  .clinic-hero-inner::after { background: linear-gradient(180deg,#0e302a33,#0b302abf 30%,#0b302ad9 80%,#0b302a99); }
  .clinic-hero-copy { padding: 150px 22px 115px; }
  .clinic-hero-copy .eyebrow { font-size: 7px; letter-spacing: 1.1px; }
  .clinic-hero h1 { font-size: clamp(50px,15.4vw,85px); letter-spacing: -1.7px; line-height: .97; margin-top: 28px; }
  .clinic-hero .hero-line { width: auto; }
  .clinic-hero h1 em { display: block; }
  .clinic-hero-copy > p { font-size: 13px; }
  .clinic-hero-actions { flex-direction: column; gap: 12px; margin-top: 24px; }
  .clinic-discover { font-size: 10px; padding-block: 9px; }
  .clinic-hero-foot { left: 22px; right: 22px; bottom: 23px; justify-content: center; }
  .clinic-hero-foot > span { display: none; }
  .clinic-hero-foot a { font-size: 10px; }
  .clinic-story-grid { grid-template-columns: 1fr; gap: 40px; }
  .clinic-story-images { padding-right: 65px; padding-bottom: 50px; }
  .clinic-story-main { height: 335px; }
  .clinic-story-detail { width: 155px; height: 200px; }
  .clinic-story-tag { font-size: 7px; letter-spacing: 1px; }
  .clinic-story-copy h2 { font-size: 44px; }
  .doctor-hero { padding-top: 20px; padding-bottom: 65px; }
  .doctor-hero .breadcrumbs { margin-bottom: 28px; }
  .doctor-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .doctor-hero h1 { font-size: clamp(53px,14.6vw,77px); }
  .doctor-hero h1 em { font-size: .72em; }
  .doctor-hero-copy > p { font-size: 13px; }
  .doctor-portrait { width: calc(100% - 38px); }
  .doctor-portrait .editorial-hero-image { height: 420px; }
  .doctor-portrait .home-experience-seal { left: -22px; }
  .journey-widget { padding: 23px 19px; }
  .journey-tabs { margin-bottom: 27px; gap: 2px; }
  .journey-tab { font-size: 8px; padding: 0; gap: 12px; letter-spacing: -.2px; }
  .journey-tab-icon { width: 40px; height: 40px; }
  .journey-tab-icon .icon { width: 19px; height: 19px; }
  .journey-tabs::before,.journey-tabs::after { top: 20px; }
  .journey-panel { display: block; padding-block: 24px; min-height: 335px; }
  .journey-panel-mark { width: 66px; height: 66px; border-radius: 18px; margin-bottom: 23px; }
  .journey-panel-mark .icon { width: 34px; height: 34px; }
  .journey-panel h3 { font-size: 34px; margin-top: 16px; }
  .journey-panel p { font-size: 13px; }
  .journey-panel .journey-detail { font-size: 12px; }
  .journey-controls { padding-top: 22px; gap: 12px; }
  .journey-controls .button { min-width: 162px; min-height: 48px; gap: 14px; padding-left: 17px; }
  .journey-controls .journey-next-label { font-size: 10px; }
  .journey-controls .button > span:last-child { width: 25px; height: 25px; }
  .journey-current { display: none; }
  .journey-back { font-size: 11px; gap: 6px; }
  .clinic-location { grid-template-columns: 1fr; gap: 38px; padding-top: 25px; padding-bottom: 80px; }
  .location-copy h2 { font-size: 45px; }
  .location-map-composition { margin-right: 18px; }
  .location-map-backplate { inset: 18px -18px -18px 18px; }
  .location-map { height: 330px; }
  .location-map-caption { padding: 16px 12px; font-size: 10px; }
  .reputation-grid { grid-template-columns: 1fr; gap: 28px; }
  .reputation-grid h2 { font-size: 45px; }
  .google-rating { padding: 30px; }
  .rating-value { gap: 20px; }
  .rating-value strong { font-size: 77px; }
  .rating-value > span { font-size: 18px; }
}
@media (prefers-reduced-motion:reduce) {
  .build-ready [data-build] { clip-path: none; transition: none; }
  .build-ready [data-build] img, .build-ready [data-build] .home-card-link,
  .build-ready [data-build] .home-photo-backplate,.build-ready [data-build] .location-map-backplate { transform: none; transition: none; }
}