/* CHERRY Services: fixed theater stage + petal morph
 Fonts/tokens from home.css. Outer shell never collapses on reveal. */

.page-services {
 --svc-ease: cubic-bezier(0.32, 0.72, 0, 1);
 --svc-spring: cubic-bezier(0.22, 1.05, 0.36, 1);
 --svc-stage: #e4e2db;
 --svc-stage-detail: #9e9890;
 --svc-r-outer: 36px;
 --svc-r-card: 22px;
 --svc-r-media: 14px;
 --svc-stage-h: clamp(520px, 62vh, 640px);
 overflow-x: clip;
}

.svc-page {
 position: relative;
 padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ═══════════════════════════════════════════
 Intro: compact, stable (never collapses)
 ═══════════════════════════════════════════ */
.svc-intro {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(200px, 0.7fr);
 gap: clamp(1.5rem, 4vw, 3.5rem);
 align-items: center;
 padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

.svc-intro-eyebrow {
 margin: 0 0 0.75rem;
 font-family: var(--font-sans);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: color-mix(in srgb, var(--ink) 42%, var(--muted));
}

.svc-intro-title {
 margin: 0 0 0.9rem;
 font-family: var(--font-serif);
 font-size: clamp(2.1rem, 4.4vw, 3.35rem);
 font-weight: 400;
 letter-spacing: -0.035em;
 line-height: 1.08;
 color: var(--ink);
}

.svc-intro-lede {
 margin: 0;
 max-width: 42ch;
 font-family: var(--font-sans);
 font-size: clamp(15px, 1.35vw, 16.5px);
 font-weight: 450;
 line-height: 1.65;
 letter-spacing: -0.01em;
 color: var(--body);
}

.svc-intro-visual {
 justify-self: end;
 width: min(100%, 320px);
 padding: 0.55rem;
 border-radius: 28px;
 background:
 linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18)),
 color-mix(in srgb, var(--surface) 88%, var(--ink) 4%);
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.65) inset,
 0 18px 40px rgba(17, 23, 25, 0.07);
}

/* Continuous-radius media stage: nested concentric to the tray */
.svc-intro-frame {
 position: relative;
 overflow: hidden;
 aspect-ratio: 4 / 3;
 border-radius: 20px;
 background: #d9d7d1;
}

.svc-intro-frame::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 box-shadow: inset 0 0 0 1px rgba(17, 23, 25, 0.06);
 pointer-events: none;
}

.svc-intro-frame img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center center;
}

/* Soften intro when detail is open: height preserved */
.svc-page[data-mode="detail"] .svc-intro {
 opacity: 0.42;
 filter: saturate(0.85);
 pointer-events: none;
 transition: opacity 320ms ease, filter 320ms ease;
}

.svc-page[data-mode="overview"] .svc-intro {
 opacity: 1;
 filter: none;
 transition: opacity 320ms ease, filter 320ms ease;
}

/* ═══════════════════════════════════════════
 Theater: one continuous Apple-style shell
 Same height in overview + detail → no jump
 ═══════════════════════════════════════════ */
.svc-theater {
 position: relative;
}

.svc-stage {
 --stage-pad: clamp(1.1rem, 2vw, 1.65rem);
 position: relative;
 display: flex;
 flex-direction: column;
 height: var(--svc-stage-h);
 min-height: var(--svc-stage-h);
 max-height: var(--svc-stage-h);
 padding: var(--stage-pad);
 border-radius: var(--svc-r-outer);
 background: var(--svc-stage);
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.35) inset,
 0 24px 56px rgba(17, 23, 25, 0.06);
 overflow: hidden;
 isolation: isolate;
 transition: background 420ms var(--svc-ease), box-shadow 420ms ease;
}

.svc-page[data-mode="detail"] .svc-stage {
 background: var(--svc-stage-detail);
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.18) inset,
 0 28px 64px rgba(17, 23, 25, 0.12);
}

.svc-stage-chrome {
 display: flex;
 align-items: baseline;
 flex: 0 0 auto;
 margin-bottom: 0.85rem;
 padding-inline: 0.35rem;
 min-height: 1.25rem;
}

.svc-stage-label {
 margin: 0;
 font-family: var(--font-sans);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: color-mix(in srgb, var(--ink) 55%, transparent);
 transition: color 280ms ease;
}

.svc-page[data-mode="detail"] .svc-stage-label {
 color: rgba(255, 255, 255, 0.72);
}

.svc-stage-body {
 position: relative;
 flex: 1 1 auto;
 min-height: 0;
 display: grid;
 grid-template-columns: 1fr;
 align-items: stretch;
}

.svc-page[data-mode="detail"] .svc-stage-body {
 grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
 gap: 0;
}

/* Strip */
.svc-strip-wrap {
 position: relative;
 z-index: 2;
 min-width: 0;
 height: 100%;
 overflow-x: auto;
 overflow-y: hidden;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 padding: 0.35rem 0.15rem 0.5rem;
}

.svc-strip-wrap::-webkit-scrollbar {
 display: none;
}

.svc-strip {
 display: flex;
 align-items: stretch;
 gap: clamp(14px, 1.5vw, 20px);
 height: 100%;
 width: max-content;
 min-width: 100%;
 padding: 10px 6px 14px;
}

.svc-page[data-mode="detail"] .svc-strip {
 align-items: center;
 padding: 28px 28px 36px 16px;
 gap: clamp(10px, 1.2vw, 14px);
}

/* ═══════════════════════════════════════════
 Cards: overview = equal cream-caption shelf
 Detail keeps photo overlay + morph tilt
 ═══════════════════════════════════════════ */
.svc-card {
 margin: 0;
 flex: 0 0 auto;
 width: clamp(168px, 15vw, 188px);
 height: min(100%, 400px);
 max-height: 100%;
 scroll-snap-align: start;
 align-self: stretch;
 transition:
 transform 480ms var(--svc-spring),
 opacity 320ms ease,
 width 420ms var(--svc-spring),
 filter 320ms ease;
}

.svc-page[data-mode="overview"] .svc-card.is-active {
 transform: translateY(-6px) scale(1.02);
 z-index: 2;
}

.svc-card-hit {
 position: relative;
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 border: 0;
 border-radius: var(--svc-r-card);
 overflow: hidden;
 text-align: left;
 color: var(--ink);
 cursor: pointer;
 background: color-mix(in srgb, var(--page) 88%, #fff 12%);
 box-shadow: 0 10px 28px rgba(20, 24, 18, 0.1);
 transition:
 transform 360ms var(--svc-ease),
 box-shadow 320ms ease;
}

.svc-page[data-mode="detail"] .svc-card-hit {
 display: block;
 color: #f5f5f2;
 background: #2c2f2b;
}

/* Concentric inset ring */
.svc-card-hit::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
 pointer-events: none;
 opacity: 0.7;
 transition: box-shadow 220ms ease, opacity 220ms ease;
}

.svc-card-hit:hover {
 box-shadow: 0 18px 40px rgba(20, 24, 18, 0.22);
}

.svc-card-hit:hover::after {
 opacity: 1;
 box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}

.svc-card-hit:focus-visible {
 outline: none;
 box-shadow: var(--focus);
}

.svc-page[data-mode="overview"] .svc-card.is-active .svc-card-hit::after {
 opacity: 1;
 box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.svc-card-media {
 position: relative;
 flex: 1 1 auto;
 min-height: 0;
 display: block;
 overflow: hidden;
 border-radius: calc(var(--svc-r-card) - 1px) calc(var(--svc-r-card) - 1px) 0 0;
 background: #454843;
}

.svc-page[data-mode="detail"] .svc-card-media {
 position: absolute;
 inset: 0;
 border-radius: inherit;
}

.svc-card-media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 40%;
 transform: scale(1.04);
 transition: transform 720ms var(--svc-ease), filter 300ms ease;
 filter: saturate(0.94);
}

.svc-card-hit:hover .svc-card-media img,
.svc-card.is-active .svc-card-media img {
 transform: scale(1.09);
 filter: saturate(1);
}

#deep-cleaning .svc-card-media img { object-position: center 62%; }
#office .svc-card-media img { object-position: center 45%; }
#specialised .svc-card-media img { object-position: center 35%; }

.svc-card-meta {
 position: relative;
 z-index: 2;
 flex: 0 0 auto;
 display: flex;
 flex-direction: column;
 gap: 0.18rem;
 padding: 0.85rem 0.9rem 1rem;
 background: transparent;
 pointer-events: none;
}

.svc-page[data-mode="detail"] .svc-card-meta {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 2.75rem 0.9rem 0.95rem;
 background: linear-gradient(
 180deg,
 transparent 0%,
 rgba(16, 18, 15, 0.2) 30%,
 rgba(16, 18, 15, 0.82) 100%
 );
}

.svc-card-num {
 margin: 0 0 0.2rem;
 font-family: var(--font-sans);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.16em;
 color: var(--muted);
}

.svc-card-title {
 font-family: var(--font-serif);
 font-size: clamp(14px, 1.2vw, 16px);
 font-weight: 500;
 letter-spacing: -0.02em;
 line-height: 1.15;
 color: var(--ink);
}

.svc-card-tag {
 font-family: var(--font-sans);
 font-size: 11px;
 line-height: 1.35;
 color: var(--body);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.svc-page[data-mode="detail"] .svc-card-num {
 color: rgba(245, 245, 242, 0.6);
}

.svc-page[data-mode="detail"] .svc-card-title {
 color: #f7f8f4;
}

.svc-page[data-mode="detail"] .svc-card-tag {
 color: rgba(245, 245, 242, 0.7);
}

/* Detail card states */
.svc-page[data-mode="detail"] .svc-card {
 width: clamp(132px, 12vw, 160px);
 height: min(100%, 360px);
 transform: none;
}

.svc-page[data-mode="detail"] .svc-card:not(.is-active) {
 opacity: 0.34;
 transform: scale(0.92);
 filter: saturate(0.5) brightness(0.88);
}

.svc-page[data-mode="detail"] .svc-card.is-active {
 width: clamp(148px, 13vw, 176px);
 opacity: 1;
 filter: none;
 z-index: 4;
 transform: translateY(-8px) rotate(5deg);
 transform-origin: 40% 60%;
}

.svc-page[data-mode="detail"] .svc-card.is-active .svc-card-hit {
 box-shadow:
 0 28px 50px rgba(17, 20, 19, 0.28),
 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.svc-page[data-mode="detail"] .svc-card.is-active .svc-card-hit::after {
 opacity: 1;
 box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
}

.svc-page[data-mode="detail"] .svc-card-tag {
 -webkit-line-clamp: 1;
}

/* ═══════════════════════════════════════════
 Petal sheet: parallel inside the stage
 ═══════════════════════════════════════════ */
.svc-sheet {
 --sheet-pad: clamp(1.2rem, 2vw, 1.85rem);
 position: absolute;
 inset: 0 0 0 auto;
 z-index: 6;
 width: min(48%, 480px);
 height: 100%;
 padding: calc(var(--sheet-pad) + 0.4rem) var(--sheet-pad) var(--sheet-pad) clamp(7.5rem, 32%, 11.5rem);
 background: #fff;
 color: var(--ink);
 border-radius: 0;
 clip-path: url(#svcPetalClip);
 -webkit-clip-path: url(#svcPetalClip);
 filter: drop-shadow(-24px 8px 36px rgba(17, 20, 19, 0.16));
 display: flex;
 flex-direction: column;
 justify-content: center;
 opacity: 0;
 transform: translateX(12%);
 pointer-events: none;
 visibility: hidden;
 transition:
 opacity 380ms ease,
 transform 540ms var(--svc-spring),
 visibility 0s linear 540ms;
}

.svc-sheet-clip {
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
}

.svc-page[data-mode="detail"] .svc-sheet {
 position: relative;
 inset: auto;
 grid-column: 2;
 width: calc(100% + 1.5rem);
 height: 100%;
 margin-right: -0.75rem;
 margin-left: -2.25rem;
 opacity: 1;
 transform: translateX(0);
 pointer-events: auto;
 visibility: visible;
 transition:
 opacity 340ms ease 40ms,
 transform 540ms var(--svc-spring),
 visibility 0s;
}

.svc-sheet-close {
 position: absolute;
 top: 1rem;
 right: 1rem;
 width: 34px;
 height: 34px;
 border-radius: 50%;
 border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
 background: transparent;
 display: grid;
 place-items: center;
 color: var(--ink);
 transition: background 180ms ease, transform 180ms ease;
}

.svc-sheet-close:hover {
 background: color-mix(in srgb, var(--ink) 5%, transparent);
 transform: scale(1.05);
}

.svc-sheet-close:focus-visible {
 outline: none;
 box-shadow: var(--focus);
}

.svc-sheet-kicker {
 margin: 0 0 0.65rem;
 font-family: var(--font-sans);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--muted);
}

.svc-sheet-title {
 margin: 0 0 0.8rem;
 font-family: var(--font-serif);
 font-size: clamp(22px, 2.35vw, 32px);
 font-weight: 500;
 letter-spacing: -0.03em;
 line-height: 1.12;
 color: var(--ink);
 max-width: 15ch;
}

.svc-sheet-body {
 margin: 0 0 1.15rem;
 font-family: var(--font-sans);
 font-size: 12.5px;
 line-height: 1.55;
 color: var(--body);
 max-width: 36ch;
}

.svc-sheet-features {
 list-style: none;
 margin: 0 0 1.25rem;
 padding: 0;
 display: grid;
 gap: 0.7rem;
}

.svc-sheet-features li {
 display: grid;
 grid-template-columns: 24px 1fr;
 gap: 0.6rem;
 align-items: start;
 color: var(--ink);
}

.svc-sheet-features .svc-feat-icon {
 width: 24px;
 height: 24px;
 display: grid;
 place-items: center;
 margin-top: 0.1rem;
}

.svc-feat-copy {
 display: grid;
 gap: 0.1rem;
}

.svc-feat-label {
 font-family: var(--font-sans);
 font-size: 12.5px;
 font-weight: 600;
 letter-spacing: -0.01em;
}

.svc-feat-sub {
 font-family: var(--font-sans);
 font-size: 11px;
 color: var(--body);
 line-height: 1.35;
}

.svc-sheet-cta {
 align-self: flex-start;
 font-size: 12px;
 padding: 0.75rem 1.2rem;
 background: var(--cta);
 color: var(--white);
}

/* ═══════════════════════════════════════════
 Responsive
 ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
 .svc-sheet,
 .svc-card,
 .svc-card-hit,
 .svc-card-media img,
 .svc-intro,
 .svc-stage {
 transition: none !important;
 }
}

@media (max-width: 1100px) {
 .svc-page[data-mode="detail"] .svc-stage-body {
 grid-template-columns: minmax(0, 1fr) minmax(260px, 0.95fr);
 }
}

@media (max-width: 900px) {
 .svc-intro {
 grid-template-columns: 1fr;
 gap: 1.25rem;
 }

 .svc-intro-visual {
 justify-self: start;
 width: min(100%, 280px);
 }

 .page-services {
 --svc-stage-h: clamp(480px, 58vh, 580px);
 }
}

@media (max-width: 767px) {
 .page-services {
 --svc-r-outer: 24px;
 --svc-stage-h: auto;
 }

 .svc-stage {
 height: auto;
 min-height: 0;
 max-height: none;
 }

 .svc-stage-body {
 display: flex;
 flex-direction: column;
 gap: 0.85rem;
 }

 .svc-page[data-mode="detail"] .svc-stage-body {
 display: flex;
 flex-direction: column;
 }

 .svc-strip-wrap {
 height: 280px;
 }

 .svc-page[data-mode="detail"] .svc-card.is-active {
 transform: none;
 }

 .svc-sheet,
 .svc-page[data-mode="detail"] .svc-sheet {
 position: relative;
 inset: auto;
 width: 100%;
 height: auto;
 margin: 0;
 border-radius: calc(var(--svc-r-outer) - 8px);
 clip-path: none;
 -webkit-clip-path: none;
 filter: none;
 box-shadow: 0 12px 32px rgba(17, 20, 19, 0.1);
 padding: 1.25rem 1.15rem 1.35rem;
 transform: none;
 }

 .svc-card,
 .svc-page[data-mode="detail"] .svc-card,
 .svc-page[data-mode="detail"] .svc-card.is-active {
 width: min(168px, 62vw);
 height: 250px;
 }

 .svc-sheet-title {
 max-width: none;
 }

 .svc-page[data-mode="detail"] .svc-intro {
 display: none;
 }
}