/* LUCA — Reserve flow
   Same vocabulary as the marketing site but tuned for a focused, single-task surface.
*/

:root {
  --cream: #F6F3EC;
  --cream-2: #EDE7D9;
  --dark: #1A1714;
  --dark-2: #0E0C0A;
  --dark-3: #14110E;
  --gold: #C9A86C;
  --gold-soft: rgba(201, 168, 108, 0.18);
  --gold-line: rgba(201, 168, 108, 0.35);
  --tan: #C4A882;
  --mute: rgba(246, 243, 236, 0.55);
  --mute-2: rgba(246, 243, 236, 0.4);
  --line: rgba(246, 243, 236, 0.12);
  --line-strong: rgba(246, 243, 236, 0.22);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Marcellus", Georgia, serif;
  --ui: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--dark);
  color: var(--cream);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body { overflow-x: hidden; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; }

::selection { background: var(--gold); color: var(--dark); }

/* Ambient motion background */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.stage__layer {
  position: absolute;
  inset: -10%;
  background-repeat: no-repeat;
  filter: blur(60px);
  mix-blend-mode: screen;
  will-change: transform;
  opacity: 0.5;
}

.stage__layer--a {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(201, 168, 108, 0.5), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(196, 168, 130, 0.35), transparent 60%);
  animation: drift-a 38s var(--ease-soft) infinite alternate;
}
.stage__layer--b {
  background-image:
    radial-gradient(ellipse at 80% 20%, rgba(246, 243, 236, 0.18), transparent 60%);
  animation: drift-b 52s var(--ease-soft) infinite alternate;
}
.stage__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(14, 12, 10, 0.55) 70%, rgba(14, 12, 10, 0.9) 100%);
}
.stage__grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes drift-a {
  0%   { transform: translate(-3%, -2%) scale(1.05) rotate(0deg); }
  100% { transform: translate(5%, 4%) scale(1.15) rotate(6deg); }
}
@keyframes drift-b {
  0%   { transform: translate(3%, -3%) scale(1.1); }
  100% { transform: translate(-4%, 5%) scale(1.2); }
}

/* ─────────────────────────────  TOP BAR  ───────────────────────────── */

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 48px;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}

.topbar__logo {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--cream);
  text-transform: none;
}

.topbar__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--mute);
}

.topbar__progress-step {
  display: flex;
  align-items: center;
  gap: 14px;
  transition: color .6s var(--ease);
}
.topbar__progress-step.is-active { color: var(--gold); }
.topbar__progress-step.is-done   { color: var(--cream); }

.topbar__progress-step:not(:last-child)::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.topbar__close {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity .5s var(--ease);
  white-space: nowrap;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 18px;
}
.lang-toggle button {
  background: none;
  border: none;
  color: var(--cream);
  opacity: 0.5;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 18px;
  line-height: 1;
  filter: grayscale(0.6);
  transition: opacity .4s var(--ease), filter .4s var(--ease), transform .4s var(--ease);
}
.lang-toggle button:hover { opacity: 0.9; filter: grayscale(0.2); }
.lang-toggle button.is-active {
  opacity: 1;
  filter: grayscale(0) drop-shadow(0 0 8px rgba(201, 168, 108, 0.4));
  transform: scale(1.05);
}
.lang-toggle__divider { color: var(--cream); opacity: 0.25; font-size: 11px; }

/* ─────────────────────────────  SERVICE LIST (STEP 1 v2)  ───────────────────────────── */

.svc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
}

.svc-card {
  border: 1px solid var(--line);
  background: rgba(14, 12, 10, 0.5);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: border-color .6s var(--ease), background .6s var(--ease);
}

.svc-card.is-selected {
  border-color: var(--gold);
  background: rgba(201, 168, 108, 0.08);
}

.svc-card__main {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  width: 100%;
  text-align: left;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
}

.svc-card__main:hover:not(.is-selected) { background: rgba(255,255,255,0.02); }

.svc-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.svc-card__price {
  flex-shrink: 0;
}

.svc-card__mark {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all .5s var(--ease);
}
.svc-card.is-selected .svc-card__mark {
  border-color: var(--gold);
  background: var(--gold);
}
.svc-card__mark::after {
  content: "";
  width: 5px;
  height: 9px;
  border-right: 1.5px solid var(--dark);
  border-bottom: 1.5px solid var(--dark);
  transform: rotate(45deg) translate(-1px, -1px) scale(0);
  transition: transform .5s var(--ease);
}
.svc-card.is-selected .svc-card__mark::after {
  transform: rotate(45deg) translate(-1px, -1px) scale(1);
}

.svc-card__num {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
}

.svc-card__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  color: var(--cream);
  line-height: 1;
  display: block;
}

.svc-card__desc {
  display: block;
  font-family: var(--body);
  font-size: 14px;
  color: var(--mute);
  line-height: 1.5;
  max-width: 56ch;
}

.svc-card__price {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 30px;
  color: var(--gold);
  text-align: right;
  line-height: 1;
  white-space: nowrap;
}
.svc-card__price small {
  display: block;
  font-family: var(--ui);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 8px;
}

.svc-card__opts {
  border-top: 1px solid var(--line);
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: slideDown .6s var(--ease);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.svc-opt-group {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: center;
}

.svc-opt-label {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
}

.svc-opt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.svc-pill {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cream);
  border: 1px solid var(--line-strong);
  background: rgba(14, 12, 10, 0.3);
  padding: 10px 16px;
  transition: all .4s var(--ease);
  white-space: nowrap;
}

.svc-pill:hover {
  border-color: var(--gold-line);
  background: rgba(201, 168, 108, 0.08);
}

.svc-pill.is-on {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--dark);
}

/* ─────────────────────────────  RETURNING WELCOME  ───────────────────────────── */

.welcome-banner {
  position: relative;
  z-index: 6;
  margin: 0 48px 24px;
  padding: 22px 28px;
  background: linear-gradient(135deg, rgba(201, 168, 108, 0.12), rgba(201, 168, 108, 0.04));
  border: 1px solid var(--gold-line);
  display: flex;
  align-items: center;
  gap: 24px;
  animation: slideDown .8s var(--ease);
}

.welcome-banner__icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--gold);
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
}

.welcome-banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.welcome-banner__h {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--cream);
  line-height: 1;
}

.welcome-banner__b {
  font-family: var(--body);
  font-size: 14px;
  color: var(--mute);
  line-height: 1.4;
}

.welcome-banner__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.welcome-banner__btn {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .4s var(--ease);
  text-decoration: none;
}
.welcome-banner__btn--primary {
  background: var(--gold);
  color: var(--dark);
}
.welcome-banner__btn--primary:hover { background: var(--cream); }
.welcome-banner__btn--ghost {
  background: none;
  color: var(--mute);
  border-color: var(--line-strong);
}
.welcome-banner__btn--ghost:hover { color: var(--cream); border-color: var(--mute); }

/* ─────────────────────────────  SMART HINT  ───────────────────────────── */

.smart-hint {
  margin-top: 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(201, 168, 108, 0.08), rgba(201, 168, 108, 0.02));
  border-left: 2px solid var(--gold);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  animation: slideDown .6s var(--ease);
  position: relative;
}

.smart-hint__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  margin-top: 2px;
}
.smart-hint__icon svg { width: 16px; height: 16px; }

.smart-hint__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.smart-hint__label {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

.smart-hint__h {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: var(--cream);
  line-height: 1.2;
}

.smart-hint__b {
  font-family: var(--body);
  font-size: 14px;
  color: var(--mute);
  line-height: 1.5;
  max-width: 72ch;
}

.smart-hint__cta {
  align-self: flex-start;
  margin-top: 8px;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: gap .4s var(--ease);
}
.smart-hint__cta::after {
  content: "→";
  transition: transform .4s var(--ease);
}
.smart-hint__cta:hover { gap: 12px; }
.smart-hint__cta:hover::after { transform: translateX(2px); }

.smart-hint__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.6;
  transition: opacity .4s var(--ease);
}
.smart-hint__close:hover { opacity: 1; }

/* ─────────────────────────────  TRUST STRIP  ───────────────────────────── */

.trust-strip {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 0 48px 16px;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.trust-strip__item::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
}

/* ─────────────────────────────  CONFIRMATION UPSELLS  ───────────────────────────── */

.confirm__upsells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 48px auto 0;
  max-width: 720px;
  width: 100%;
  opacity: 0; transform: translateY(20px);
  animation: rise-in 1.2s var(--ease) 1.6s forwards;
}

.upsell-card {
  border: 1px solid var(--line);
  background: rgba(14, 12, 10, 0.5);
  padding: 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.upsell-card:hover {
  border-color: var(--gold-line);
  background: rgba(201, 168, 108, 0.04);
}

.upsell-card__h {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--cream);
  line-height: 1.2;
}

.upsell-card__b {
  font-family: var(--body);
  font-size: 14px;
  color: var(--mute);
  line-height: 1.5;
}

.upsell-card__cta {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.upsell-card__cta::after { content: "→"; }

@media (max-width: 700px) {
  .welcome-banner {
    margin: 0 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .welcome-banner__actions { width: 100%; }
  .trust-strip {
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 10px;
  }
  .confirm__upsells { grid-template-columns: 1fr; }
}
.topbar__close:hover { opacity: 1; }

/* ─────────────────────────────  LAYOUT  ───────────────────────────── */

.flow {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  padding: 24px 48px 48px;
  min-height: calc(100vh - 100px);
}

.flow[data-layout="centered"] {
  grid-template-columns: 1fr;
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

.flow[data-layout="centered"] .summary { display: none; }
.flow[data-layout="centered"] .summary--mobile { display: flex; }

/* Step stage */
.steps {
  position: relative;
}

.step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(40px);
  filter: blur(8px);
  pointer-events: none;
  transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .8s var(--ease);
}

.step.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
  pointer-events: auto;
}

.step.is-past {
  transform: translateX(-40px);
}

.step__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 56px;
  max-width: 760px;
}

.step__kicker {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.step__kicker::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.step__title {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--cream);
}

.step__title em {
  color: var(--gold);
  font-style: italic;
}

.step__sub {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--mute);
  margin-top: 28px;
  max-width: 56ch;
}

/* ─────────────────────────────  STEP 1 · EXPERIENCE  ───────────────────────────── */

.exp-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.exp-list .exp-opt:first-child {
  grid-column: 1 / -1;
}

.exp-opt {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(14, 12, 10, 0.5);
  backdrop-filter: blur(8px);
  padding: 36px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color .6s var(--ease), background .6s var(--ease), transform .8s var(--ease);
  isolation: isolate;
}

.exp-opt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold-soft) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .8s var(--ease);
  z-index: -1;
}

.exp-opt:hover {
  border-color: var(--gold-line);
  transform: translateY(-2px);
}
.exp-opt:hover::before { opacity: 0.4; }

.exp-opt.is-selected {
  border-color: var(--gold);
  background: rgba(201, 168, 108, 0.08);
}

.exp-opt__num {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  margin-bottom: 14px;
}

.exp-opt__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  color: var(--cream);
  margin-bottom: 14px;
}
.exp-opt__name em {
  color: var(--gold);
  font-style: italic;
}

.exp-opt__desc {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--mute);
  max-width: 44ch;
}

.exp-opt__meta {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 20px;
  display: flex;
  gap: 24px;
}
.exp-opt__meta strong { color: var(--cream); font-weight: 400; }

.exp-opt__price {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--gold);
  text-align: right;
  line-height: 1;
}
.exp-opt__price small {
  display: block;
  font-family: var(--ui);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 6px;
}

.exp-opt__mark {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all .6s var(--ease);
}
.exp-opt.is-selected .exp-opt__mark {
  border-color: var(--gold);
  background: var(--gold);
}
.exp-opt__mark::after {
  content: "";
  width: 5px;
  height: 9px;
  border-right: 1.5px solid var(--dark);
  border-bottom: 1.5px solid var(--dark);
  transform: rotate(45deg) translate(-1px, -1px) scale(0);
  transition: transform .5s var(--ease);
}
.exp-opt.is-selected .exp-opt__mark::after {
  transform: rotate(45deg) translate(-1px, -1px) scale(1);
}

/* recommended badge */
.exp-opt__badge {
  position: absolute;
  top: 24px;
  right: 60px;
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-line);
  padding: 4px 10px;
}

/* ─────────────────────────────  STEP 2 · DATE  ───────────────────────────── */

.calendar {
  border: 1px solid var(--line);
  background: rgba(14, 12, 10, 0.4);
  backdrop-filter: blur(8px);
  padding: 36px 40px;
  max-width: 720px;
}

.calendar__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.calendar__month {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  color: var(--cream);
  letter-spacing: 0.01em;
}

.calendar__nav {
  display: flex;
  gap: 4px;
}

.calendar__nav-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.calendar__nav-btn:hover { border-color: var(--gold); background: var(--gold-soft); }
.calendar__nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.calendar__nav-btn svg { width: 14px; height: 14px; }

.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}
.calendar__weekdays div {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  padding: 8px 0;
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-size: 16px;
  color: var(--cream);
  border: 1px solid transparent;
  transition: all .4s var(--ease);
}

.cal-cell--blank { visibility: hidden; }
.cal-cell--past, .cal-cell--closed { color: var(--mute-2); cursor: not-allowed; }
.cal-cell--closed::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 1px;
  background: var(--mute-2);
  transform: rotate(-30deg);
}

.cal-cell--avail {
  cursor: pointer;
}
.cal-cell--avail:hover {
  border-color: var(--gold-line);
  background: var(--gold-soft);
}

.cal-cell--today {
  color: var(--gold);
}

.cal-cell.is-selected {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}
.cal-cell.is-selected .cal-cell__dot { background: var(--dark); opacity: 0.3; }

.cal-cell__dot {
  position: absolute;
  bottom: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.cal-cell__dot--low  { background: rgba(201, 168, 108, 0.4); }
.cal-cell__dot--med  { background: rgba(201, 168, 108, 0.7); }
.cal-cell__dot--high { background: var(--gold); }

.calendar__legend {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mute);
}

.calendar__legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar__legend i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* ─────────────────────────────  STEP 3 · TIME  ───────────────────────────── */

.time-section { display: flex; flex-direction: column; gap: 40px; max-width: 760px; }

.time-band {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.time-band__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}

.time-band__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--cream);
}

.time-band__hint {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.time-slot {
  border: 1px solid var(--line);
  background: rgba(14, 12, 10, 0.4);
  padding: 18px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all .5s var(--ease);
  position: relative;
}

.time-slot:hover:not(:disabled):not(.is-selected) {
  border-color: var(--gold-line);
  background: rgba(201, 168, 108, 0.06);
}

.time-slot.is-selected {
  border-color: var(--gold);
  background: rgba(201, 168, 108, 0.12);
}

.time-slot:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--mute-2);
}

.time-slot__time {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--cream);
  line-height: 1;
}

.time-slot.is-selected .time-slot__time { color: var(--gold); }

.time-slot__mood {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 6px;
}

.time-slot__mood i {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor;
}

.time-slot__mood--intimate { color: rgba(196, 220, 200, 0.7); }
.time-slot__mood--shared   { color: rgba(201, 168, 108, 0.85); }
.time-slot__mood--lively   { color: rgba(220, 130, 90, 0.8); }

/* ─────────────────────────────  STEP 4 · GUESTS + ADD-ONS  ───────────────────────────── */

.field-stack { display: flex; flex-direction: column; gap: 32px; max-width: 760px; }

.field {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.field__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}

.field__label {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--cream);
}

.field__aux {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
}

.stepper button {
  width: 56px;
  height: 56px;
  font-family: var(--display);
  font-size: 24px;
  color: var(--cream);
  display: grid;
  place-items: center;
  transition: all .4s var(--ease);
}
.stepper button:hover { background: var(--gold-soft); color: var(--gold); }
.stepper button:disabled { opacity: 0.3; cursor: not-allowed; }

.stepper__value {
  width: 80px;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  color: var(--cream);
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  padding: 10px 0;
}

.addons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.addon {
  border: 1px solid var(--line);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  text-align: left;
  align-items: start;
  transition: all .5s var(--ease);
  position: relative;
}

.addon:hover { border-color: var(--gold-line); background: rgba(201, 168, 108, 0.05); }
.addon.is-on {
  border-color: var(--gold);
  background: rgba(201, 168, 108, 0.1);
}

.addon__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--cream);
  margin-bottom: 6px;
}

.addon__desc {
  font-family: var(--body);
  font-size: 14px;
  color: var(--mute);
  line-height: 1.5;
}

.addon__price {
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold);
  white-space: nowrap;
}

.addon__check {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition: all .4s var(--ease);
}

.addon.is-on .addon__check { background: var(--gold); border-color: var(--gold); }
.addon__check::after {
  content: "";
  width: 4px; height: 8px;
  border-right: 1.5px solid var(--dark);
  border-bottom: 1.5px solid var(--dark);
  transform: rotate(45deg) translate(-1px, -1px) scale(0);
  transition: transform .4s var(--ease);
}
.addon.is-on .addon__check::after { transform: rotate(45deg) translate(-1px, -1px) scale(1); }

/* ─────────────────────────────  STEP 5 · DETAILS  ───────────────────────────── */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 760px;
  border-top: 1px solid var(--line);
}

.input-cell {
  position: relative;
  padding: 28px 4px 18px;
  border-bottom: 1px solid var(--line);
}
.input-cell--full { grid-column: 1 / -1; }
.input-cell + .input-cell:not(.input-cell--full) { border-left: 1px solid var(--line); padding-left: 24px; }

.input-cell label {
  position: absolute;
  top: 28px;
  left: 4px;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  pointer-events: none;
  transition: all .5s var(--ease);
}
.input-cell + .input-cell:not(.input-cell--full) label { left: 24px; }

.input-cell input,
.input-cell textarea {
  width: 100%;
  padding-top: 22px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--cream);
  letter-spacing: 0;
}

.input-cell textarea { resize: none; min-height: 80px; font-size: 18px; line-height: 1.5; }

.input-cell.is-filled label,
.input-cell.is-focus label {
  transform: translateY(-14px);
  font-size: 9px;
  color: var(--gold);
}

.input-cell.is-error label { color: rgba(220, 130, 90, 0.9); }

.input-cell__line {
  position: absolute;
  bottom: -1px; left: 0;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width .8s var(--ease);
}
.input-cell.is-focus .input-cell__line { width: 100%; }

.consent {
  display: flex;
  gap: 14px;
  align-items: start;
  margin-top: 32px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--mute);
  line-height: 1.5;
  cursor: pointer;
}

.consent input { position: absolute; opacity: 0; pointer-events: none; }

.consent__box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
  margin-top: 2px;
  display: grid;
  place-items: center;
  transition: all .4s var(--ease);
}

.consent input:checked + .consent__box { background: var(--gold); border-color: var(--gold); }
.consent__box::after {
  content: "";
  width: 4px; height: 8px;
  border-right: 1.5px solid var(--dark);
  border-bottom: 1.5px solid var(--dark);
  transform: rotate(45deg) translate(-1px, -1px) scale(0);
  transition: transform .4s var(--ease);
}
.consent input:checked + .consent__box::after { transform: rotate(45deg) translate(-1px, -1px) scale(1); }

.consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────────  FOOTER NAV  ───────────────────────────── */

.flow-footer {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px 32px;
  gap: 24px;
  margin-top: 24px;
}

.btn {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 22px 40px;
  position: relative;
  overflow: hidden;
  transition: color .6s var(--ease), opacity .4s var(--ease);
}

.btn--ghost {
  color: var(--mute);
  background: none;
}
.btn--ghost:hover { color: var(--cream); }
.btn--ghost:disabled { opacity: 0.3; cursor: not-allowed; }

.btn--primary {
  color: var(--dark);
  background: var(--gold);
}
.btn--primary:hover { background: var(--cream); }
.btn--primary:disabled { background: rgba(201, 168, 108, 0.3); color: rgba(26, 23, 20, 0.6); cursor: not-allowed; }

.btn span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; }

/* ─────────────────────────────  SUMMARY (sticky sidebar)  ───────────────────────────── */

.summary {
  position: sticky;
  top: 32px;
  align-self: start;
  height: fit-content;
  border: 1px solid var(--line);
  background: rgba(14, 12, 10, 0.55);
  backdrop-filter: blur(12px);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 480px;
}

.summary--mobile { display: none; }

.summary__title {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
}
.summary__title::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--gold);
}

.summary__exp-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  color: var(--cream);
}
.summary__exp-name em { color: var(--gold); font-style: italic; }
.summary__exp-name--empty { color: var(--mute-2); }

.summary__exp-meta {
  font-family: var(--body);
  font-size: 14px;
  color: var(--mute);
  line-height: 1.5;
  margin-top: 4px;
}

.summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  gap: 16px;
}
.summary__row:first-of-type { border-top: 1px solid var(--line); }

.summary__row-label {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  flex-shrink: 0;
}

.summary__row-value {
  font-family: var(--body);
  font-size: 14px;
  color: var(--cream);
  text-align: right;
  line-height: 1.4;
  transition: opacity .6s var(--ease);
}

.summary__row-value--placeholder { color: var(--mute-2); font-style: italic; }

.summary__row-value strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--cream);
  display: block;
}

.summary__total {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--gold-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.summary__total-label {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cream);
}

.summary__total-value {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 40px;
  color: var(--gold);
  line-height: 1;
}

.summary__note {
  font-family: var(--body);
  font-size: 12px;
  color: var(--mute-2);
  line-height: 1.5;
  font-style: italic;
}

/* ─────────────────────────────  CONFIRMED  ───────────────────────────── */

.confirm {
  position: relative;
  z-index: 5;
  min-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px;
  text-align: center;
}

.confirm__seal {
  width: 96px;
  height: 96px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 48px;
  position: relative;
  animation: seal-in 1.6s var(--ease) both;
}
.confirm__seal::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  animation: pulse 3s var(--ease) infinite;
}
.confirm__seal svg { width: 32px; height: 32px; color: var(--gold); }

@keyframes seal-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 0; transform: scale(1.2); }
}

.confirm__kicker {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  opacity: 0; transform: translateY(20px);
  animation: rise-in 1.2s var(--ease) 0.2s forwards;
}

.confirm__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 16ch;
  margin: 0 auto;
  opacity: 0; transform: translateY(40px); filter: blur(8px);
  animation: rise-in 1.6s var(--ease) 0.4s forwards;
}
.confirm__title em { color: var(--gold); font-style: italic; }

.confirm__details {
  display: flex;
  gap: 60px;
  margin-top: 64px;
  padding: 36px 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(20px);
  animation: rise-in 1.4s var(--ease) 0.8s forwards;
}

.confirm__detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.confirm__detail-label {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
}

.confirm__detail-value {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--cream);
  line-height: 1.2;
}

.confirm__sub {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 52ch;
  margin: 48px auto 0;
  opacity: 0; transform: translateY(20px);
  animation: rise-in 1.2s var(--ease) 1.2s forwards;
}

.confirm__actions {
  display: flex;
  gap: 12px;
  margin-top: 40px;
  opacity: 0; transform: translateY(20px);
  animation: rise-in 1.2s var(--ease) 1.4s forwards;
}

@keyframes rise-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ─────────────────────────────  RESPONSIVE  ───────────────────────────── */

@media (max-width: 980px) {
  .flow {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 24px;
  }
  .summary {
    position: relative;
    top: 0;
    order: 2;
    min-height: 0;
  }
  .topbar { padding: 20px 24px; }
  .topbar__progress { display: none; }
  .flow-footer { padding: 16px 24px 24px; }
  .exp-list { grid-template-columns: 1fr; }
  .exp-list .exp-opt:first-child { grid-column: auto; }
  .svc-card__main {
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 24px;
  }
  .svc-card__name { font-size: 28px; }
  .svc-card__price { font-size: 24px; }
  .svc-opt-group { grid-template-columns: 1fr; gap: 8px; }
  .svc-card__opts { padding: 20px 24px; }
  .addons { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .input-cell + .input-cell:not(.input-cell--full) {
    border-left: none;
    padding-left: 4px;
  }
  .input-cell + .input-cell:not(.input-cell--full) label { left: 4px; }
  .confirm__details { flex-direction: column; gap: 28px; padding: 28px 24px; }
}