:root {
      --white:  #fefdfb;
      --black:  #0c0b0a;
      --card:   #131210;
      --border: #272420;
      --mid:    #6a6460;
      --light:  #a09890;
      --copper: #b5703a;
      --copper-dim: rgba(181,112,58,.15);
      --copper-glow: rgba(181,112,58,.08);
      --st: env(safe-area-inset-top, 0px);
      --sb: env(safe-area-inset-bottom, 0px);
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
    body {
      font-family: 'Libre Franklin', sans-serif;
      background: var(--black);
      color: var(--white);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      min-height: 100dvh;
    }

    /* ── HEADER ── */
    header {
      position: fixed; top:0; left:0; right:0; z-index:100;
      padding: .8rem 1.25rem;
      padding-top: calc(.8rem + var(--st));
      display: flex; align-items:center; justify-content:space-between;
      background: linear-gradient(to bottom, rgba(12,11,10,.95) 0%, transparent 100%);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      opacity:0; animation: fd .6s ease forwards .3s;
    }
    .logo { display:flex; align-items:center; gap:.5rem; text-decoration:none; }
    .logo-mark {
      width:28px; height:28px; border:1px solid var(--copper);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }
    .logo-mark span {
      font-family:'Bodoni Moda',serif; font-size:.65rem; color:var(--copper); letter-spacing:.04em;
    }
    .logo b { font-family:'Bodoni Moda',serif; font-size:.9rem; font-weight:400; color:var(--white); letter-spacing:.06em; }
    .logo b em { font-style:italic; color:var(--copper); }
    .back-link {
      font-size:.55rem; font-weight:300; letter-spacing:.18em; text-transform:uppercase;
      color:var(--light); text-decoration:none; display:flex; align-items:center; gap:.4rem;
      transition: color .3s; -webkit-tap-highlight-color:transparent;
    }
    .back-link:hover { color:var(--copper); }
    .back-link::before { content:'←'; font-size:.7rem; font-family:serif; }

    /* ── PROGRESS STRIP ── */
    .progress-wrap {
      position: fixed; top:0; left:0; right:0; z-index:99;
      padding-top: calc(3.6rem + var(--st));
      opacity:0; animation: fd .5s ease forwards .5s;
    }
    .progress-inner {
      display: flex; align-items:center; justify-content:center; gap:0;
      padding: .7rem 1.5rem;
      background: rgba(12,11,10,.6);
      border-bottom: 1px solid var(--border);
    }
    .step {
      display:flex; align-items:center; gap:.5rem; position:relative;
    }
    .step-dot {
      width:24px; height:24px; border-radius:50%;
      border: 1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      font-size:.52rem; font-weight:400; letter-spacing:.05em;
      color:var(--mid); background:var(--black);
      transition: all .4s;
      flex-shrink:0;
    }
    .step.active .step-dot {
      border-color: var(--copper); color:var(--copper);
      background: var(--copper-dim);
      box-shadow: 0 0 16px var(--copper-dim);
    }
    .step.done .step-dot {
      border-color: var(--copper); background:var(--copper);
      color:var(--black);
    }
    .step-label {
      font-size:.5rem; letter-spacing:.14em; text-transform:uppercase;
      color:var(--mid); transition:color .4s; white-space:nowrap;
    }
    .step.active .step-label { color:var(--light); }
    .step-line {
      width:2.5rem; height:1px; background:var(--border);
      flex-shrink:0; margin:0 .3rem;
      position:relative; overflow:hidden;
    }
    .step-line::after {
      content:''; position:absolute; inset:0; background:var(--copper);
      transform: scaleX(0); transform-origin:left;
      transition: transform .5s ease;
    }
    .step-line.filled::after { transform:scaleX(1); }

    /* ── PAGE BODY ── */
    .page {
      min-height: 100dvh;
      padding-top: calc(7rem + var(--st));
      padding-bottom: calc(3rem + var(--sb));
      display:flex; flex-direction:column; align-items:center;
    }
    .step-panel {
      width:100%; max-width:520px;
      padding: 0 1.5rem;
      display:none; flex-direction:column; gap:2rem;
      opacity:0;
    }
    .step-panel.active { display:flex; animation: fu .5s ease forwards .1s; }

    /* ── STEP HEADER ── */
    .step-heading { text-align:center; }
    .step-heading .eyebrow {
      font-size:.52rem; letter-spacing:.22em; text-transform:uppercase;
      color:var(--copper); margin-bottom:.6rem; display:block;
    }
    .step-heading h2 {
      font-family:'Bodoni Moda',serif; font-size:1.9rem; font-weight:400;
      line-height:1.1; color:var(--white);
    }
    .step-heading h2 em { font-style:italic; color:var(--copper); }
    .step-heading p {
      font-size:.72rem; font-weight:300; color:var(--light);
      margin-top:.6rem; line-height:1.7;
    }

    /* ── DATE PICKER ── */
    .calendar-wrap { width:100%; }
    .cal-nav {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:1rem;
    }
    .cal-month {
      font-family:'Bodoni Moda',serif; font-size:1rem; font-weight:400;
      color:var(--white); letter-spacing:.04em;
    }
    .cal-arrow {
      width:32px; height:32px; border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      color:var(--light); font-size:.8rem; cursor:pointer;
      transition:all .25s; -webkit-tap-highlight-color:transparent;
      background:transparent;
    }
    .cal-arrow:hover { border-color:var(--copper); color:var(--copper); }
    .cal-grid {
      display:grid; grid-template-columns: repeat(7,1fr); gap:4px;
    }
    .cal-day-name {
      font-size:.48rem; letter-spacing:.15em; text-transform:uppercase;
      color:var(--mid); text-align:center; padding:.4rem 0;
    }
    .cal-day {
      aspect-ratio:1; display:flex; align-items:center; justify-content:center;
      font-size:.72rem; font-weight:300; color:var(--light);
      cursor:pointer; transition:all .2s; position:relative;
      -webkit-tap-highlight-color:transparent;
      border:1px solid transparent;
    }
    .cal-day:hover:not(.empty):not(.past) {
      color:var(--white); border-color:var(--border);
    }
    .cal-day.today { color:var(--copper); }
    .cal-day.past { color:var(--border); cursor:default; pointer-events:none; }
    .cal-day.empty { cursor:default; pointer-events:none; }
    .cal-day.selected {
      background:var(--copper); color:var(--black);
      font-weight:500; border-color:var(--copper);
    }
    .cal-day.selected::after {
      content:''; position:absolute; inset:-4px;
      border:1px solid var(--copper-dim); pointer-events:none;
    }

    /* ── TIME SLOTS ── */
    .slots { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
    .slot {
      border:1px solid var(--border); padding:1rem .5rem;
      text-align:center; cursor:pointer;
      transition:all .25s; position:relative; overflow:hidden;
      -webkit-tap-highlight-color:transparent;
      background:transparent;
    }
    .slot::before {
      content:''; position:absolute; inset:0;
      background:var(--copper-glow); opacity:0; transition:opacity .25s;
    }
    .slot:hover::before { opacity:1; }
    .slot:hover { border-color:rgba(181,112,58,.4); }
    .slot-time {
      font-family:'Bodoni Moda',serif; font-size:1.1rem; font-weight:400;
      color:var(--white); display:block; margin-bottom:.2rem;
    }
    .slot-label {
      font-size:.48rem; letter-spacing:.16em; text-transform:uppercase;
      color:var(--mid); display:block;
    }
    .slot.selected {
      border-color:var(--copper); background:var(--copper-dim);
    }
    .slot.selected::before { opacity:1; }
    .slot.selected .slot-time { color:var(--copper); }
    .slot.selected .slot-label { color:var(--light); }
    .slot.full { opacity:.35; cursor:not-allowed; pointer-events:none; }
    .slot.full .slot-label { color:var(--mid); }

    /* ── PARTY SIZE ── */
    .party-wrap {
      border:1px solid var(--border); padding:1.6rem;
      display:flex; align-items:center; justify-content:space-between;
      gap:1rem;
    }
    .party-info {}
    .party-info .party-title {
      font-size:.55rem; letter-spacing:.18em; text-transform:uppercase;
      color:var(--light); display:block; margin-bottom:.3rem;
    }
    .party-info .party-sub {
      font-size:.65rem; font-weight:300; color:var(--mid); line-height:1.5;
    }
    .party-stepper {
      display:flex; align-items:center; gap:1rem; flex-shrink:0;
    }
    .stepper-btn {
      width:36px; height:36px; border:1px solid var(--border);
      background:transparent; color:var(--light); font-size:1.1rem;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:all .25s; -webkit-tap-highlight-color:transparent;
      font-weight:200;
    }
    .stepper-btn:hover { border-color:var(--copper); color:var(--copper); }
    .stepper-btn:disabled { opacity:.25; cursor:not-allowed; }
    .party-num {
      font-family:'Bodoni Moda',serif; font-size:2rem; font-weight:400;
      color:var(--white); min-width:2rem; text-align:center;
      line-height:1;
    }

    /* ── FORM FIELDS ── */
    .form-row { display:flex; flex-direction:column; gap:1rem; }
    .field { display:flex; flex-direction:column; gap:.5rem; }
    .field label {
      font-size:.52rem; letter-spacing:.18em; text-transform:uppercase;
      color:var(--light);
    }
    .field input, .field textarea {
      background:var(--card); border:1px solid var(--border);
      color:var(--white); font-family:'Libre Franklin',sans-serif;
      font-size:.82rem; font-weight:300; padding:.85rem 1rem;
      outline:none; width:100%; transition:border-color .25s;
      -webkit-appearance:none; appearance:none;
      border-radius:0;
    }
    .field input::placeholder, .field textarea::placeholder { color:var(--mid); }
    .field input:focus, .field textarea:focus { border-color:var(--copper); }
    .field textarea { resize:none; height:80px; line-height:1.6; }
    .field-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }

    /* ── BOOKING SUMMARY (step 3) ── */
    .summary {
      border:1px solid var(--border); padding:1.4rem;
      display:flex; flex-direction:column; gap:.9rem;
    }
    .summary-title {
      font-size:.52rem; letter-spacing:.18em; text-transform:uppercase;
      color:var(--copper); margin-bottom:.2rem;
    }
    .summary-row {
      display:flex; justify-content:space-between; align-items:baseline;
      border-bottom:1px solid var(--border); padding-bottom:.7rem;
    }
    .summary-row:last-child { border-bottom:none; padding-bottom:0; }
    .summary-key {
      font-size:.58rem; font-weight:300; letter-spacing:.1em;
      text-transform:uppercase; color:var(--mid);
    }
    .summary-val {
      font-family:'Bodoni Moda',serif; font-size:.95rem;
      color:var(--white); text-align:right;
    }
    .summary-val.copper { color:var(--copper); }

    /* ── DEPOSIT BOX ── */
    .deposit-box {
      background:var(--copper-dim); border:1px solid rgba(181,112,58,.25);
      padding:1rem 1.2rem;
      display:flex; align-items:center; justify-content:space-between; gap:1rem;
    }
    .deposit-box .dep-label {
      font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
      color:var(--light); display:block; margin-bottom:.2rem;
    }
    .deposit-box .dep-sub {
      font-size:.62rem; font-weight:300; color:var(--mid); line-height:1.5;
    }
    .deposit-box .dep-amount {
      font-family:'Bodoni Moda',serif; font-size:1.6rem;
      color:var(--copper); flex-shrink:0;
    }

    /* ── POLICY ── */
    .policy {
      font-size:.6rem; font-weight:300; color:var(--mid);
      line-height:1.8; border-top:1px solid var(--border);
      padding-top:1rem;
    }
    .policy a { color:var(--light); text-decoration:underline; text-underline-offset:2px; }

    /* ── CTA BUTTONS ── */
    .cta-row { display:flex; flex-direction:column; gap:.6rem; }
    .btn {
      width:100%; padding:1rem 2rem;
      font-family:'Libre Franklin',sans-serif; font-size:.6rem;
      font-weight:400; letter-spacing:.2em; text-transform:uppercase;
      text-align:center; cursor:pointer; transition:all .3s;
      -webkit-tap-highlight-color:transparent; border:none; display:block;
    }
    .btn-primary { background:var(--white); color:var(--black); }
    .btn-primary:hover { background:var(--copper); color:var(--white); }
    .btn-primary:active { background:var(--copper); color:var(--white); }
    .btn-ghost {
      background:transparent; color:var(--light);
      border:1px solid var(--border);
    }
    .btn-ghost:hover { border-color:var(--copper); color:var(--copper); }
    .btn-copper {
      background:var(--copper); color:var(--black); font-weight:500;
    }
    .btn-copper:hover { background:var(--white); color:var(--black); }

    /* ── VALIDATION HINT ── */
    .hint {
      text-align:center; font-size:.6rem; font-weight:300;
      color:var(--mid); line-height:1.7; display:none;
    }
    .hint.show { display:block; animation:fu .3s ease; }
    .hint.error { color:rgba(200,80,80,.9); }

    /* ── DIVIDER ── */
    .rule {
      display:flex; align-items:center; gap:.8rem;
      color:var(--border);
    }
    .rule::before, .rule::after { content:''; flex:1; height:1px; background:var(--border); }
    .rule span { font-size:.48rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mid); white-space:nowrap; }

    /* ── FOOTER ── */
    footer {
      padding:.7rem 1.25rem;
      padding-bottom:calc(.7rem + var(--sb));
      text-align:center; border-top:1px solid var(--border);
    }
    footer p { font-size:.48rem; font-weight:300; color:var(--mid); letter-spacing:.1em; }

    /* ── ANIMATIONS ── */
    @keyframes fu { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fd { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

    /* ── TABLET ── */
    @media(min-width:640px) {
      .slots { gap:.8rem; }
      .slot { padding:1.2rem .8rem; }
      .form-row { gap:1.2rem; }
    }

    /* ── DESKTOP ── */
    @media(min-width:1024px) {
      .back-link { display:flex; }
      .page { padding-top: calc(7.5rem + var(--st)); }
      .step-panel { max-width:560px; }
      .btn { width:auto; min-width:200px; }
      .cta-row { flex-direction:row; justify-content:center; }
      .btn-ghost { min-width:140px; }
    }

    /* ── dynamic slot states ── */
    .slots-loading {
      grid-column: 1 / -1;
      text-align: center;
      font-size: .62rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--mid);
      padding: 1.1rem 0;
    }