/* =====================================================================
   LOLA · C · REST OR STAY — services.css (services.html only)
   Round 3 (8 Oct 2026): night boudoir. Two worlds: REST (#rest, massage) on pink-lit night,
   STAY (#stay, escort) on velvet emerald; one rates board. (The Crossover was dropped: client, 8 Oct 2026.)
   Uses base.css tokens/components; everything here is scoped to the page.
   ===================================================================== */

.page-services [hidden] { display: none !important; }
.page-services .section { padding-block: clamp(56px, 8vw, 104px); }

/* ---------- HEAD: two lit doors (REST pink, STAY mint) ---------------- */
.svc-hero {
  position: relative; padding: calc(var(--header-h) + 14px) 0 clamp(40px, 6vw, 72px);
  background-color: var(--linen);
  background-image:
    radial-gradient(60% 60% at 8% 0%, rgba(255,46,139,.16), transparent 62%),
    radial-gradient(50% 60% at 100% 100%, rgba(63,230,176,.10), transparent 64%);
  overflow: clip;
}
.svc-hero__grid { display: grid; gap: 22px; }
.svc-hero__text .crumbs { margin-bottom: 8px; }
.svc-hero__neon { font-size: clamp(2.6rem, 12vw, 5.4rem); white-space: nowrap; }
.svc-hero__h1 { margin-top: 10px; font-size: clamp(1.75rem, 7vw, 3.5rem); max-width: 18ch; }
.svc-hero__sub { margin: 12px 0 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.svc-hero__row { margin-top: 16px; }
.svc-hero__ctas { display: none; }

.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.door {
  --tube: var(--neon); --halo: rgba(255,46,139,.5);
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius);
  text-decoration: none; color: var(--cream);
  box-shadow: 0 0 0 1.5px var(--tube), 0 0 26px -4px var(--halo), 0 24px 40px -24px rgba(0,0,0,.9);
  transition: box-shadow .4s var(--ease-sign), translate .4s var(--ease-sign);
}
.door--stay { --tube: #3FE6B0; --halo: rgba(63,230,176,.45); }
.door:hover, .door:focus-visible { text-decoration: none; translate: 0 -3px; box-shadow: 0 0 0 2px var(--tube), 0 0 44px 0 var(--halo), 0 30px 50px -24px rgba(0,0,0,.9); }
.door__photo { position: absolute; inset: 0; border-radius: var(--radius); }
.door__photo img { position: absolute; inset: 0; transition: transform 1.2s var(--ease-sign); }
.door:hover .door__photo img { transform: scale(1.04); }
.door__photo::before {   /* the label sinks into the night at the bottom */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(12,6,18,.92) 0%, rgba(12,6,18,.55) 26%, transparent 52%);
}
.door__label { position: absolute; z-index: 3; left: 12px; right: 10px; bottom: 10px; display: grid; gap: 4px; }
.door__sign {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.9rem, 9vw, 3.8rem); line-height: .82; letter-spacing: .06em;
  color: #FFE3F0;
  text-shadow: 0 0 1px #fff, 0 0 4px var(--tube), 0 0 12px var(--tube), 0 0 30px var(--tube);
}
.door--stay .door__sign { color: #E8FFF7; }
.door__what { font-stretch: 85%; font-weight: 650; font-size: .8rem; line-height: 1.25; letter-spacing: .02em; }
.door__what b { display: block; font-family: var(--f-display); font-stretch: 112%; font-weight: 900; font-size: 1.02rem; letter-spacing: 0; color: #FFB8D8; }
.door--stay .door__what b { color: var(--mint); }

@media (max-width: 380px) { .svc-hero__sub { font-size: .9rem; } .door__label { left: 9px; } }

@media (min-width: 960px) {
  .svc-hero { padding: calc(var(--header-h) + 28px) 0 clamp(56px, 6vw, 88px); }
  .svc-hero__grid { grid-template-columns: minmax(0, 5.6fr) minmax(0, 6fr); gap: clamp(36px, 4vw, 64px); align-items: center; }
  .svc-hero__neon { font-size: clamp(3.6rem, 5.4vw, 5.4rem); }
  .svc-hero__h1 { font-size: clamp(2.3rem, 3.4vw, 3.5rem); margin-top: 14px; }
  .svc-hero__sub { font-size: 1.06rem; margin-top: 16px; }
  .svc-hero__row { margin-top: 20px; }
  .svc-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 20px; }
  .doors { gap: clamp(16px, 2vw, 28px); padding-bottom: 48px; }
  .door { aspect-ratio: 3 / 4; }
  .door--stay { translate: 0 48px; }
  .door--stay:hover, .door--stay:focus-visible { translate: 0 45px; }
  .door__label { left: 18px; right: 16px; bottom: 16px; gap: 6px; }
  .door__sign { font-size: clamp(2.6rem, 4.2vw, 4rem); }
  .door__what { font-size: .9rem; }
  .door__what b { font-size: 1.2rem; }
}

/* ---------- WORLDS: REST (boudoir, pink) / STAY (velvet, mint) -------- */
.world { position: relative; padding-block: clamp(56px, 8vw, 112px); overflow: clip; isolation: isolate; }
.world > .wrap { position: relative; z-index: 2; }
.world__head { display: grid; gap: 16px clamp(32px, 5vw, 72px); align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.world__head .neon-sign { line-height: .78; }
.world__intro .h-section { max-width: 18ch; }
.world__intro .lead { margin: 16px 0 0; max-width: 50ch; }
.world--stay .eyebrow { color: var(--mint); }
@media (min-width: 900px) { .world__head { grid-template-columns: auto minmax(0, 1fr); } }

/* ambient loops behind the signs (screen-blended: black disappears) */
.world__haze, .world__candle { position: absolute; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: screen; }
.world__haze { inset: -4% -10% auto 20%; height: min(80vh, 760px);
  -webkit-mask-image: radial-gradient(70% 70% at 55% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(70% 70% at 55% 40%, #000 30%, transparent 75%); }
.world__candle { top: 0; right: 0; width: min(62vw, 900px); height: min(70vh, 640px); opacity: .42;
  -webkit-mask-image: radial-gradient(75% 75% at 70% 30%, #000 25%, transparent 72%); mask-image: radial-gradient(75% 75% at 70% 30%, #000 25%, transparent 72%); }
.world__haze video, .world__candle video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.world__haze video.is-playing, .world__candle video.is-playing { opacity: 1; }
@media (max-width: 759px) { .world__haze { inset: 0 -30% auto 0; height: 60vh; } .world__candle { width: 100vw; height: 50vh; } }

/* ---------- SERVICE BLOCKS ------------------------------------------ */
.svc { position: relative; scroll-margin-top: calc(var(--header-h) + 16px); }
.svc__media { position: relative; }
.svc__photo { border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -34px rgba(0,0,0,.9); transition: box-shadow .6s var(--ease-sign); }
.svc__photo > img { position: absolute; inset: 0; }
.svc__photo .room-state { z-index: 4; }
.svc.is-vacant .svc__photo { box-shadow: 0 0 0 1.5px var(--mint), 0 18px 54px -14px rgba(126,242,203,.6); }
.svc__plate { position: absolute; z-index: 5; left: 12px; bottom: -13px; margin: 0; max-width: calc(100% - 24px); }

.svc__name { margin: 0; font-family: var(--f-display); font-stretch: 112%; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; letter-spacing: -.012em; }
.svc__hook { margin: 10px 0 0; max-width: 24ch; font-family: var(--f-display); font-stretch: 72%; font-weight: 620; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.04; color: var(--rouge); }
.on-emerald .svc__hook { color: #FFC9E0; }
.svc__desc { margin: 12px 0 0; max-width: 52ch; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.on-emerald .svc__desc { color: var(--on-emerald-2); }
.svc__colours { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; font-size: .86rem; font-weight: 600; }
.svc__colours li { display: inline-flex; align-items: center; gap: 6px; }
.svc__colours span { width: 13px; height: 13px; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1px rgba(255,243,236,.4), 0 0 8px -1px var(--c); }
.svc__keys { margin-top: 16px; display: grid; gap: 12px; }
.svc__keyrow { display: grid; gap: 6px; }
.svc__keylabel { margin: 0; font-stretch: 78%; font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.on-emerald .svc__keylabel { color: var(--mint); }
.page-services .svc .rate-row__keys { justify-content: flex-start; }
.svc__keys .rate-key { min-width: 80px; min-height: 54px; }
.svc__keys .rate-key__price { font-size: 1.16rem; }
.svc__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.svc__tags .tag { min-height: 28px; font-size: .8rem; }

/* lead (one per world): a tall photo with the Switch, text beside it */
.svc--lead .svc__body { padding-top: 34px; }
.svc--lead .sw__fig { aspect-ratio: 5 / 6; }
@media (min-width: 640px) and (max-width: 959px) { .svc--lead .sw__fig { aspect-ratio: 1; } }
.svc--lead .svc__name { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.svc--lead .svc__hook { font-size: clamp(1.5rem, 3vw, 2.15rem); }
.svc--lead .svc__desc { font-size: var(--t-body); color: var(--ink); }
.on-emerald .svc--lead .svc__desc { color: var(--on-emerald); }
@media (min-width: 960px) {
  .svc--lead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(28px, 3.4vw, 56px); align-items: center; }
  .svc--lead .svc__media { grid-column: 1 / span 5; grid-row: 1; }
  .svc--lead .svc__body { grid-column: 6 / span 7; grid-row: 1; padding-top: 0; }
  .svc--lead.svc--flip .svc__media { grid-column: 8 / span 5; }
  .svc--lead.svc--flip .svc__body { grid-column: 1 / span 7; }
  .svc--lead .sw__fig { aspect-ratio: auto; height: min(78svh, 640px); min-height: 520px; }
  .svc--flip .svc__plate { left: auto; right: 14px; }
}

/* cards: photo + text, two per row on wide screens */
.svc-grid { display: grid; gap: 64px; margin-top: clamp(64px, 8vw, 104px); }
.svc--card { display: grid; }
.svc--card .svc__photo { aspect-ratio: 3 / 2; }
.svc--card .svc__body { padding-top: 28px; }
@media (min-width: 640px) {
  .svc--card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(20px, 2.4vw, 32px); align-items: stretch; }
  .svc--card .svc__photo { aspect-ratio: auto; height: 100%; min-height: 300px; }
  .svc--card .svc__plate { bottom: 12px; }
  .svc--card .svc__body { padding-top: 4px; }
}
@media (min-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px clamp(40px, 4.4vw, 72px); }
}

/* The Switch: dressed → undressed (a dark key with a neon rim; no chrome, no sticker shadows) */
.sw { position: relative; }
.sw__fig > img { position: absolute; inset: 0; }
.sw__b { clip-path: inset(0 0 100% 0); }
.sw.is-on .sw__b { clip-path: inset(0 0 0 0); }
.sw__flash { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
.sw__ctl { position: absolute; z-index: 6; right: 10px; bottom: 26px; display: grid; justify-items: end; gap: 8px; max-width: calc(100% - 20px); }
.sw__line {
  margin: 0; padding: 7px 11px 6px; border-radius: 2px;
  background: rgba(12,6,18,.86); color: #FFD9EA;
  font-family: var(--f-display); font-stretch: 72%; font-weight: 650; font-size: clamp(1.1rem, 2.2vw, 1.45rem); line-height: 1;
  text-shadow: 0 0 6px rgba(255,46,139,.8), 0 0 16px rgba(255,46,139,.45);
  box-shadow: 0 0 0 1px rgba(255,46,139,.45), 0 12px 24px -12px rgba(0,0,0,.8);
}
.on-emerald .sw__line { color: #E8FFF7; text-shadow: 0 0 6px rgba(63,230,176,.8), 0 0 16px rgba(63,230,176,.4); box-shadow: 0 0 0 1px rgba(126,242,203,.45), 0 12px 24px -12px rgba(0,0,0,.8); }
.rocker {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 14px 6px 8px;
  color: var(--cream); text-align: left; border-radius: var(--radius);
  background: var(--void);
  box-shadow: 0 0 0 1.5px var(--neon), 0 0 22px -4px rgba(255,46,139,.6);
  transition: box-shadow .25s var(--ease-sign), transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.rocker:hover { box-shadow: 0 0 0 1.5px var(--neon), 0 0 34px 0 rgba(255,46,139,.7); }
.rocker:active { transform: translate(1px, 1px); }
.on-emerald .rocker { box-shadow: 0 0 0 1.5px var(--mint), 0 0 22px -4px rgba(126,242,203,.55); }
.on-emerald .rocker:hover { box-shadow: 0 0 0 1.5px var(--mint), 0 0 34px 0 rgba(126,242,203,.65); }
.rocker__plate {   /* a toggle track */
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px;
  background: rgba(255,243,236,.08); box-shadow: inset 0 0 0 1.5px rgba(255,243,236,.6);
  transition: background .2s;
}
.rocker__key {
  position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cream); transition: translate .2s var(--ease-sign), background .2s;
}
.rocker[aria-pressed="true"] .rocker__plate { background: var(--mint); box-shadow: inset 0 0 0 1.5px var(--mint), 0 0 12px rgba(126,242,203,.7); }
.rocker[aria-pressed="true"] .rocker__key { translate: 18px 0; background: var(--void); }
.rocker__txt { display: grid; gap: 1px; font-stretch: 82%; font-weight: 750; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; }
.rocker__txt small { font-weight: 600; font-size: .8rem; letter-spacing: .02em; text-transform: none; color: var(--ink-2); }
.rocker[aria-pressed="false"] .rocker__off, .rocker[aria-pressed="true"] .rocker__on { color: var(--rouge); font-weight: 800; }
.on-emerald .rocker[aria-pressed="false"] .rocker__off, .on-emerald .rocker[aria-pressed="true"] .rocker__on { color: var(--mint); }
@media (min-width: 960px) {
  .svc--lead .sw__ctl { right: -14px; bottom: 36px; }
  .svc--flip .sw__ctl { right: auto; left: -14px; justify-items: start; }
}

/* ---------- RATES BOARD ---------------------------------------------- */
.svc-rates { background-color: var(--linen-2); }
.page-services .board { align-items: stretch; }
.svc-rates__head { margin-bottom: clamp(24px, 4vw, 44px); }
.svc-rates__head .lead { margin-top: 14px; }
.page-services .board__col--rest { box-shadow: 0 0 0 1px rgba(255,46,139,.38), 0 0 46px -14px rgba(255,46,139,.35); }
.page-services .board__col--stay { box-shadow: 0 0 0 1px rgba(126,242,203,.35), 0 0 46px -14px rgba(126,242,203,.3); }
.page-services .board__head { border-bottom-color: var(--hair); border-bottom-width: 1px; }
.page-services .board__sign { font-weight: 300; color: #FFE3F0; text-shadow: 0 0 1px #fff, 0 0 4px var(--neon), 0 0 12px var(--neon), 0 0 28px rgba(255,46,139,.6); }
.page-services .board__col--stay .board__sign { color: #E8FFF7; text-shadow: 0 0 1px #fff, 0 0 4px #3FE6B0, 0 0 12px #3FE6B0, 0 0 28px rgba(63,230,176,.55); }
.rate-row__name a { text-decoration: none; }
.rate-row__name a:hover { text-decoration: underline; text-decoration-color: var(--rouge); }
.board__col--stay .rate-row__name a:hover { text-decoration-color: var(--mint); }
.board__foot { margin: 14px 0 0; font-size: .9rem; color: var(--ink-2); }
.board__col--stay .board__foot { color: var(--on-emerald-2); }
.board__foot b { font-family: var(--f-display); font-weight: 900; color: var(--ink); }
.board__col--stay .board__foot b { color: var(--cream); }

.svc-fine { margin-top: clamp(48px, 6vw, 80px); }
.svc-fine__h { margin-bottom: 14px; }
.fine { display: grid; margin: 0; border-top: 1px solid var(--hair); }
.fine__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); align-content: start; }
.fine dt { font-family: var(--f-display); font-stretch: 106%; font-weight: 800; font-size: 1rem; }
.fine__v { margin: 0; text-align: right; font-family: var(--f-display); font-stretch: 112%; font-weight: 900; font-size: 1rem; color: var(--rouge); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fine__d { grid-column: 1 / -1; margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 760px) { .fine { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 1100px) { .fine { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- FAQ + CLOSE ----------------------------------------------- */
.svc-faq__grid { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .svc-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .svc-faq__head { position: sticky; top: calc(var(--header-h) + 32px); }
}
.svc-close__in { display: grid; justify-items: start; }
.svc-close__neon { font-size: clamp(2.3rem, 9vw, 4.8rem); margin-bottom: .3em; }
.svc-close .lead { margin: 16px 0 0; max-width: 56ch; }
.svc-close .lead a { color: var(--rouge); font-weight: 600; text-decoration-color: rgba(255,106,174,.5); }
.svc-close__keys { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px; }
.svc-close__keys .btn--wa { flex: 1 1 100%; }
.svc-close__keys .link-arrow { margin-left: 6px; }
@media (min-width: 560px) { .svc-close__keys .btn--wa { flex: 0 0 auto; } }

/* ---------- reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .door, .door__photo img { transition: none; }
  .rocker__key, .rocker__plate { transition: none; }
  .world__haze, .world__candle { display: none; }
}

/* ---------- link from each block to the service's own page (SEO round) ---------- */
.svc__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }