/* Service pages: sticky hero that splits its title, light overlay, before/after, indicator ticker, solutions, CTA, gallery ticker */
.service .wrap { position: relative; }
.s-hero { display: flex; flex-direction: column; height: 100vh; isolation: isolate; justify-content: flex-end; overflow: hidden; padding: 2rem 2rem 4rem; position: sticky; top: 0; width: 100%; }
.s-hero .bg { background: var(--ink); height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -1; }
.s-hero .bg img { object-position: 50% 25%; }
.s-hero .bg::before, .s-hero .bg::after { content: ""; left: 0; position: absolute; width: 100%; z-index: 1; }
.s-hero .bg::before { background: linear-gradient(0deg, rgba(13, 19, 17, 0), #0d1311); height: 23rem; top: -8.875rem; }
.s-hero .bg::after { background: var(--fade-ink); bottom: 0; height: 31.875rem; }
.s-hero .light-overlay { background: var(--porcelain); height: 100%; left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 100%; z-index: 0; }
.points { color: var(--porcelain); display: grid; grid-template-columns: repeat(2, 11.5rem); margin-bottom: 5.375rem; position: relative; z-index: 1; }
.point { --link-color: var(--porcelain); align-items: flex-end; border-left: 1px solid rgba(255, 255, 255, .5); display: flex; gap: .75rem; padding-left: 1rem; color: var(--porcelain); }
.point .h4 { line-height: .8; }
.s-hero .title { align-items: center; color: var(--porcelain); display: flex; font: 400 var(--t-size, 12rem)/.9 var(--serif); justify-content: space-between; letter-spacing: -.05em; position: relative; width: 100%; z-index: 1; white-space: nowrap; }
.s-hero .title i, .s-hero .title span { display: inline-block; }
.second-block { padding: 12rem 2rem 4rem; position: relative; width: 100%; z-index: 1; }
.second-block .small-title { color: var(--slate); margin: 0 auto; text-align: center; width: 40.5rem; }
.details { align-items: flex-start; display: flex; gap: 12.375rem; margin-top: 4rem; width: 100%; }
.details-text { color: var(--slate); width: 30.625rem; }
.details-text p + p { margin-top: 1rem; }
.before-after { border-radius: 1.875rem; cursor: grab; flex: none; height: 18.25rem; overflow: hidden; position: relative; touch-action: pan-y; user-select: none; width: 30.625rem; --pos: 50%; }
.before-after.moving { cursor: grabbing; }
.before-after img { inset: 0; pointer-events: none; position: absolute; }
.before-after .before { clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%); filter: sepia(.45) saturate(.7) brightness(.86) contrast(.92); }
.before-after .divider { background: var(--porcelain); height: 100%; left: var(--pos); pointer-events: none; position: absolute; top: 0; transform: translate(-50%); width: 2px; }
.before-after .knob { align-items: center; background: var(--porcelain); border-radius: 50%; color: var(--ink); display: flex; height: 3.25rem; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3.25rem; }
.before-after .knob svg { height: 1.25rem; width: 1.25rem; }
.ba-tag { background: rgba(17, 24, 22, .55); border-radius: 2rem; color: var(--porcelain); padding: .35rem .7rem; position: absolute; top: 1rem; }
.ba-tag.b { left: 1rem; } .ba-tag.a { right: 1rem; }

.key-indicators { background: var(--porcelain); padding: 10rem 0; position: relative; z-index: 1; }
.key-indicators .title { color: var(--slate); width: 100%; }
.key-indicators .line { display: flex; margin-left: 2rem; width: calc(100% - 4rem); }
.key-indicators .line.n1 { justify-content: space-between; }
.key-indicators .line.n2 { justify-content: center; }
.ticker { height: 24.875rem; margin-top: 5rem; overflow: hidden; width: 100%; }
.ticker-track { display: flex; gap: 2rem; width: max-content; will-change: transform; }
.ind { align-items: center; border: 1px solid var(--slate-10); border-radius: 50%; color: var(--slate); display: flex; flex: none; height: 24.875rem; justify-content: center; text-align: center; width: 24.875rem; will-change: transform; }
.ind span { width: 12rem; }
.mobile-list { display: none; }

.solutions { position: relative; z-index: 1; }
.solutions .first { background: var(--porcelain); display: flex; flex-direction: column; height: 53.875rem; isolation: isolate; justify-content: space-between; padding: 8rem 2rem 0; position: relative; width: 100%; }
.solutions .description { color: var(--slate); position: relative; width: 13.875rem; }
.solutions .bg { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -1; }
.solutions .bg img { object-position: 70% 30%; filter: grayscale(1); }
.solutions .bg::before { background: linear-gradient(180deg, #ece9e3, rgba(236, 233, 227, .85) 30%, rgba(236, 233, 227, .45) 55%, rgba(236, 233, 227, 0)); content: ""; height: 21.375rem; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
.solutions .bg::after { background: var(--fade-ink); bottom: 0; content: ""; height: 32.875rem; left: 0; position: absolute; width: 100%; z-index: 1; }
.sol-blob { bottom: -20rem; filter: blur(5rem); height: 50rem; left: -10%; mix-blend-mode: multiply; opacity: .5; position: absolute; width: 120%; z-index: 0; }
.sol-blob span { background: radial-gradient(closest-side, #9db4a7, transparent); border-radius: 50%; height: 100%; position: absolute; width: 60%; animation: blob1 11s ease-in-out infinite alternate; }
.sol-blob span + span { left: 40%; animation: blob2 13s ease-in-out infinite alternate; }
.solutions .first .title { align-items: center; color: var(--porcelain); display: flex; justify-content: space-between; position: relative; width: 100%; z-index: 2; }
.solutions .second { background: var(--ink); overflow: hidden; padding: 4.5rem 2rem 12rem; position: sticky; top: 0; width: 100%; }
.solutions .swiper { overflow: visible; width: 100%; }
.solutions .swiper-wrapper { display: flex; gap: 1.5rem; transition: transform .6s var(--ease); }
.solution { align-items: center; background: var(--porcelain); border-radius: 1.875rem; color: var(--slate); cursor: pointer; display: flex; flex: none; flex-direction: column; height: 32.375rem; justify-content: space-between; padding: 1.5rem .5rem; transition: transform .45s var(--ease); width: 20.375rem; }
@media (hover: hover) { .solution:hover { transform: translateY(-.5rem); } .solution:hover .solution-img img { transform: scale(1.06); } }
.solution .h4 { padding: 0 1rem; text-align: center; }
.solution-bottom { --link-color: var(--slate); align-items: center; display: flex; flex-direction: column; width: 100%; }
.solution-img { aspect-ratio: 1.68; border-radius: 1.5rem; overflow: hidden; position: relative; width: 100%; }
.solution-img img { transition: transform .6s var(--ease); }
.solution-desc { color: var(--slate-60); margin: 2.5rem 0 1.5rem; text-align: center; width: 15.5rem; }
.sol-open { color: var(--slate); }
.swiper-controls { display: flex; justify-content: space-between; margin-top: 1.5rem; position: relative; }
.round-btn { align-items: center; background: var(--bisque); border-radius: 50%; color: var(--ink); display: flex; height: 5rem; justify-content: center; width: 5rem; transition: opacity .3s var(--ease); }
.round-btn svg { height: 1rem; width: 1rem; }
.round-btn.dark { background: rgba(236, 233, 227, .12); color: var(--porcelain); }
.round-btn:disabled { opacity: .35; pointer-events: none; }

.cta { color: var(--porcelain); height: 62rem; overflow: hidden; position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6rem; background: var(--ink); }
.cta .bg { inset: 0; position: absolute; }
.cta .bg img { object-position: 50% 20%; }
.cta .bg::after { background: linear-gradient(180deg, rgba(17, 24, 22, .15) 0%, rgba(17, 24, 22, .55) 45%, #111816 80%); content: ""; inset: 0; position: absolute; }
.cta .content { position: relative; width: 50rem; display: flex; flex-direction: column; align-items: center; }
.cta-title { margin-bottom: 3rem; text-align: center; }
.cta .locations-radio { text-align: center; }
.cta .radios { justify-content: center; }
.cta .form { grid-template-columns: 1fr 1fr 5rem; width: 100%; }

.gallery { background: var(--ink); display: flex; flex-direction: column; padding: 10rem 0 11rem; position: relative; z-index: 1; }
.gallery .title { color: var(--porcelain); margin-left: 2rem; width: calc(100% - 4rem); }
.gallery .line { display: flex; position: relative; }
.gallery .line.n1 { margin-left: 32.5rem; }
.gallery .line.n2 { justify-content: space-between; width: 100%; }
.title-tip { left: 49.375rem; position: absolute; top: 50%; transform: translateY(-30%); width: 7.25rem; }
.gallery .mobile-title { display: none; }
.wrap-ticker { display: flex; margin-top: 5rem; overflow: hidden; width: 100%; }
.ticker-line { animation: ticker 40s linear infinite; display: flex; gap: .5rem; padding-left: .5rem; width: max-content; }
.wrap-ticker:hover .ticker-line { animation-play-state: paused; }
@keyframes ticker { to { transform: translate(-50%); } }
.wrap-image { flex: none; height: 14.625rem; overflow: hidden; position: relative; width: 18.25rem; }
.wrap-image img { transition: transform .6s var(--ease); }
@media (hover: hover) { .wrap-image:hover img { transform: scale(1.08); } }
.btn-view-gallery { margin: 4rem auto 0; }
.navy-plash { background: var(--ink); height: 14rem; position: relative; width: 100%; z-index: 1; }

/* treatment sheet (slides up like the reference's preview page) */
.sol-modal { height: 100vh; isolation: isolate; left: 0; overflow: hidden; position: fixed; top: 0; visibility: hidden; width: 100%; z-index: 13; }
.sol-modal::before { background: var(--ink); content: ""; inset: 0; opacity: 0; position: absolute; transition: opacity .5s var(--ease-menu); }
.sol-modal.active { visibility: visible; }
.sol-modal.active::before { opacity: .7; }
.preview-page { background: var(--porcelain); border-top-left-radius: 2.5rem; border-top-right-radius: 2.5rem; color: var(--slate); height: 100%; left: 0; overflow: auto; position: absolute; top: 0; transform: translate(0, 101%) scale(.9); transform-origin: center bottom; width: 100%; }
.pv-top { align-items: center; display: flex; justify-content: space-between; padding: .75rem 2rem; position: sticky; top: 0; z-index: 2; background: var(--porcelain); }
.pv-hero { align-items: center; display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100vh - 9rem); padding: 4.5rem 2rem 1rem; gap: 4rem; }
.pv-hero .title { line-height: 1; text-align: center; text-wrap: balance; width: 62.375rem; }
.procedure-details { display: grid; gap: 2rem .5rem; grid-template-columns: repeat(4, 1fr); width: 100%; }
.time-visit { align-items: flex-start; display: flex; gap: .5rem; grid-column: 1/3; padding-top: 1rem; }
.time span { color: var(--slate-60); }
.icon-clock { height: 1rem; width: 1rem; border: 1.5px solid currentColor; border-radius: 50%; position: relative; flex: none; }
.icon-clock::after { border-left: 1.5px solid; border-bottom: 1.5px solid; content: ""; height: .3rem; left: .38rem; position: absolute; top: .18rem; width: .2rem; }
.description-wrap { grid-column: 3/5; }
.pv-hero .description { width: 14.625rem; }
.highlight { aspect-ratio: 2.77; background: var(--bisque); border-radius: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; position: relative; width: 100%; }
.highlight::before { background: var(--ink); border-radius: 50%; content: ""; height: .375rem; position: absolute; right: 1.5rem; top: 1.5rem; width: .375rem; }
.pv-cta { display: flex; justify-content: center; padding: 2rem 0 3rem; }

@media (max-width: 1023px) {
  .s-hero { flex-direction: column-reverse; justify-content: flex-start; padding: 0 1rem 1.5rem; position: relative; height: 100svh; }
  .s-hero .title { align-items: center; flex-direction: column; font-size: 3.5rem; line-height: .86; letter-spacing: -.04em; }
  .points { align-items: center; display: flex; margin: 4.5rem auto 0; gap: 4rem; }
  .s-hero .light-overlay { display: none; }
  .second-block { background: var(--porcelain); overflow: hidden; padding: 7rem 1rem 3.5rem; }
  .second-block .small-title { width: 100%; }
  .details { align-items: center; flex-direction: column; gap: 0; margin-top: 3rem; }
  .details-text { margin-top: 2rem; width: 100%; }
  .before-after { aspect-ratio: 1.68; border-radius: 1.5rem; height: auto; width: 100%; touch-action: none; }
  .key-indicators { overflow: hidden; padding: 5rem 0; }
  .key-indicators .line { display: block; margin-left: 1rem; text-align: center; width: calc(100% - 2rem); }
  .ticker { display: none; }
  .mobile-list { display: block; margin: 4.5rem 0 0 1rem; width: calc(100% - 2rem); }
  .mobile-list .list-item { align-items: flex-start; border-top: 1px solid var(--slate-10); display: grid; grid-template-columns: repeat(2, 1fr); padding: 1rem 0 2rem; color: var(--slate); }
  .mobile-list .list-item:last-child { border-bottom: 1px solid var(--slate-10); }
  .mobile-list .c3 { color: var(--slate-60); }
  .solutions .first { align-items: center; height: auto; overflow: hidden; padding: 3.5rem 1rem 0; }
  .solutions .description { text-align: center; width: 17.125rem; }
  .solutions .bg img { height: 26.875rem; left: -8rem; position: absolute; top: 13rem; width: 40rem; max-width: none; }
  .solutions .bg::before { background: var(--fade-ink); height: 15.375rem; top: 25.25rem; }
  .solutions .bg::after { background: var(--ink); height: 15.375rem; }
  .solutions .first .title { flex-direction: column; margin-top: 30rem; }
  .solutions .second { align-items: center; display: flex; flex-direction: column; gap: 2rem; padding: 3rem 1rem 9rem; position: relative; }
  .solutions .swiper-wrapper { flex-direction: column; gap: 1rem; transform: none !important; }
  .solution { height: auto; padding: .5rem .5rem 1.5rem; width: 100%; gap: 1.5rem; }
  .swiper-controls { display: none; }
  .sol-open { background: var(--ink); border-radius: 4rem; color: var(--porcelain); display: flex; justify-content: space-between; min-width: 12rem; padding: 1.25rem 1.5rem; }
  .sol-open .tlink { --link-color: var(--porcelain); }
  .sol-open .tlink::after { display: none; }
  .sol-open::after { content: "+"; font: 400 1.2rem/1 var(--sans); }
  .cta { height: auto; padding: 22rem 1rem 4rem; }
  .cta .bg { height: 28rem; }
  .cta .content { width: 100%; }
  .cta .form { grid-template-columns: 1fr; }
  .gallery { overflow: hidden; padding: 5rem 0 6rem; }
  .gallery .title { display: none; }
  .gallery .mobile-title { color: var(--porcelain); display: block; text-align: center; width: 100%; }
  .wrap-ticker { margin-top: 3rem; }
  .btn-view-gallery { margin-top: 3rem; }
  .navy-plash { height: 2rem; }
  .pv-top { padding: .75rem 1rem; }
  .pv-hero { padding: 3rem 1rem 1rem; }
  .pv-hero .title { width: 100%; margin-bottom: 3rem; }
  .procedure-details { gap: .5rem; grid-template-columns: 1fr; }
  .time-visit { align-items: center; flex-direction: column; grid-column: auto; margin: 0 auto; }
  .description-wrap { grid-column: auto; margin: 1.5rem auto; width: 17.875rem; text-align: center; }
  .pv-hero .description { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ticker-line, .sol-blob span { animation: none; } }

.cta .locations-radio > .c2 { color: var(--porcelain); }