.services { background: var(--ink); }
.services-layout { display: grid; grid-template-columns: 1fr 1.05fr; align-items: start; gap: clamp(40px, 7vw, 110px); }
.services-photo { position: sticky; top: 106px; height: min(645px, calc(100dvh - 130px)); overflow: hidden; border-radius: var(--radius-media); background: #24211b; }
.services-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.services-photo .service-image-outgoing { position: absolute; inset: 0; pointer-events: none; }
.services-photo::after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / 45%)); pointer-events: none; }
.services-photo figcaption { position: absolute; z-index: 1; bottom: 32px; inset-inline: 32px; font-size: 12px; color: var(--paper); }
.section-heading p { margin-top: 23px; font-size: 13px; line-height: 1.9; }
.service-list { list-style: none; padding: 0; margin: 29px 0 19px; border-top: 1px solid var(--line); }
.service-list li { border-bottom: 1px solid var(--line); }
.service-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 65px; padding-block: 17px; font-size: 18px; font-weight: 500; letter-spacing: -.025em; list-style: none; cursor: pointer; }
.service-item summary::-webkit-details-marker { display: none; }
.service-item summary > span { transition: transform .25s var(--ease-out); }
.service-item summary .icon { transition: transform 200ms var(--ease-out); }
.service-item[open] summary { color: var(--gold-light); }
.service-item[open] summary .icon { transform: rotate(45deg); }
.service-description { padding: 0 26px 20px 0; }
.service-description p { font-size: 13px; line-height: 1.9; max-width: 65ch; }
.service-description .text-link { margin-top: 9px; min-height: 44px; font-size: 12px; }
.service-inline-image { display: none; border-radius: var(--radius-card); }
.services-photo img[src*="facial-care"] { object-position: 75% center; }
.service-list .icon { width: 21px; height: 21px; color: var(--gold); font-size: 21px; }
@media (hover: hover) { .service-item summary:hover { color: var(--gold-light); } .service-item summary:hover > span { transform: translateX(6px); } }
@media (max-width: 1000px) { .services-photo { height: min(620px, calc(100dvh - 130px)); } .services-layout { gap: 40px; } }
@media (max-width: 700px) {
    .services-layout { grid-template-columns: 1fr; gap: 40px; }
    .services-photo { display: none; }
    .service-description { padding-right: 0; }
    .service-inline-image { display: block; width: 100%; height: 220px; margin-top: 18px; object-fit: cover; }
    .service-inline-image[src*="facial-care"] { object-position: 75% center; }
    .services-photo img { object-position: center 53%; }
    .services-photo figcaption { bottom: 22px; inset-inline: 24px; font-size: 12px; }
    .section-heading h2 br { display: none; }
    .section-heading p { margin-top: 19px; }
    .service-list { margin-top: 26px; }
    .service-item summary { min-height: 63px; font-size: 17px; }
}
.service-label { display: flex; align-items: center; gap: 12px; }
.service-label .service-icon { width: 20px; height: 20px; font-size: 20px; color: var(--gold); }
.section-heading .section-eyebrow { margin-bottom: 14px; color: var(--gold); font-size: 12px; }