/* 07 · Lumen Skin Studio — med spa. Near-black, blush, silver; DM Serif Display and Manrope. Glass
   drifting over a photograph, treatments as tall panels, a form whose labels float, a membership table. */
.v-lumen { --bg: #141216; --fg: #f3eef2; --mut: #a79ea8; --acc: #f4b6c2; --acc2: #ffdbe3; --edge: #2b2630; background: var(--bg); color: var(--fg); font-family: "Manrope", var(--sans); --btn-r: 999px; --fx-lamp: rgb(244 182 194 / 0.14); --fx-pill-bg: var(--acc); --fx-compare-muted: var(--mut); --fx-compare-line: var(--edge); --fx-compare-yes: var(--acc); --fx-pill-ink: #141216; --fx-field-accent: var(--acc); --fx-field-line: var(--edge); --fx-field-soft: var(--mut); --fx-panels-ink: #ffffff; --fx-panels-focus: var(--acc); --fx-panels-focus-ink: #141216; }
.v-lumen .lu-hero { min-height: min(86svh, 820px); display: grid; align-content: end; border-radius: 26px; }
.v-lumen .lu-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-lumen .lu-hero__copy { position: relative; z-index: 2; padding: clamp(28px, 4vw, 56px); background: linear-gradient(180deg, rgb(20 18 22 / 0), rgb(20 18 22 / 0.78)); }
.v-lumen .eyebrow { color: var(--acc); }
.v-lumen h2 { font: 400 clamp(44px, 6vw, 96px)/1 "DM Serif Display", Georgia, serif; letter-spacing: -0.015em; max-width: 13ch; }
.v-lumen h2 em { font-style: italic; color: var(--acc); }
.v-lumen .btn { background: var(--acc); color: #141216; }
.v-lumen .lu-panels { margin-top: clamp(40px, 5vw, 72px); --fx-panels-height: clamp(360px, 46vw, 560px); border-radius: 22px; overflow: clip; }
.v-lumen .lu-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(56px, 7vw, 96px); align-items: start; }
.v-lumen .lu-rooms .ph { aspect-ratio: 4 / 3; border-radius: 22px; }
.v-lumen .lu-cap { margin-top: 12px; font: italic 400 16px/1.4 "DM Serif Display", Georgia, serif; color: var(--mut); }
.v-lumen .lu-form { padding: 28px; border: 1px solid var(--edge); border-radius: 22px; display: grid; gap: 18px; --fx-field-accent: var(--acc); --fx-field-line: var(--edge); }
.v-lumen .lu-form h3 { font: 400 32px/1 "DM Serif Display", Georgia, serif; }
.v-lumen .lu-form input, .v-lumen .lu-form textarea { width: 100%; background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--edge); padding: 14px 0 10px; font: inherit; }
.v-lumen .lu-table { margin-top: clamp(56px, 7vw, 96px); overflow-x: auto; }
.v-lumen table { width: 100%; border-collapse: collapse; min-width: 640px; }
.v-lumen caption { text-align: left; font: 400 32px/1 "DM Serif Display", Georgia, serif; padding-bottom: 20px; }
.v-lumen th, .v-lumen td { padding: 16px 14px; text-align: left; border-top: 1px solid var(--edge); font-size: 15px; }
.v-lumen thead th { font: 400 24px/1.2 "DM Serif Display", Georgia, serif; border-top: 0; vertical-align: bottom; }
.v-lumen thead small { display: block; font: 500 12px/1.4 "Manrope", var(--sans); color: var(--mut); letter-spacing: 0.06em; margin-top: 4px; }
.v-lumen tbody th { font-weight: 600; color: var(--mut); }
.v-lumen .fxlist { color: var(--mut); }
@media (max-width: 900px) { .v-lumen .lu-grid { grid-template-columns: 1fr; } }