/* ============================================================
   BOOKING: the reservation flow, set in the v5 branding.

   This sheet is self contained: booking.html no longer loads
   style.css, because that sheet is the old dark, glassy, pill
   shaped site and every rule in it had to be fought. Everything
   the booking page needs (nav, mobile menu, buttons, forms,
   footer) is defined here in the v5 language instead.

   Palette and type come from v5-quantum/index.html, pushed to
   the item P contrast step: deeper ink on brighter bone, bone
   on espresso, Law D greens only. Hairlines carry the structure,
   no pills, no shadows, radius 4px maximum, zero dashes.
   ============================================================ */

:root{
  /* --- grounds: the AVA ramp. Every surface starts at absolute black and
         the panels differ by one step and a hairline, never by hue. --- */
  --bone:#000000;        /* the page ground, and the label on a white pill */
  --bone-2:#141414;      /* inset surfaces: inputs, calendar, slots */
  --oat:#2E2E2E;         /* the one step up, for a thing under the pointer */
  --espresso:#000000;    /* dark bands, and the label on a white pill */
  --white:#FFFFFF;

  /* --- type on black, ranked by energy. Surfaces sit in the bottom third,
         type in the top third, and pure white is reserved for what is on. */
  --ink:#E4E4E4;               /* 16.5:1  AAA, headlines and content */
  --ink-soft:#9A9A9A;          /*  7.6:1  AAA, body and support */
  --ink-label:#7A7A7A;         /*  4.8:1  AA, mono labels and meta */
  --ink-placeholder:#5C5C5C;   /* an empty field must still read empty */

  /* --- the signal: white is the primary, wherever a hand belongs.
         Colour is never decoration, brightness means something is on. --- */
  --moss:#FFFFFF;
  --moss-deep:#FFFFFF;
  --mint:#FFFFFF;
  --mint-lift:#FFFFFF;

  /* --- failure is stated in white on a hairline box, and said in words --- */
  --alert:#FFFFFF;

  /* --- hairlines --- */
  --rule-ink:#1E1E1E;
  --rule-ink-firm:#383838;
  --rule-bone:#2E2E2E;

  /* the one spacing scale, DESIGN.md: 8 / 16 / 32 / 64 / 128 / 256 */
  --s1:8px; --s2:16px; --s3:32px; --s4:64px; --s5:128px; --s6:256px;
  --nav-h:68px;

  --sans:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

.booking-body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.45;
  letter-spacing:-0.005em;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,ul{margin:0}
::selection{background:var(--moss);color:var(--bone)}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}

/* ---------- shared type ---------- */
.booking-tag,
.progress-label,
.progress-num,
.tuning-label,
.intensity-end,
.seat-count-label,
.time-slots-title,
.stat-label,
.sidebar-label,
.confirmed-eyebrow,
.calendar-weekdays span,
.jsc-meta,
.jsc-flag,
.mood-chip,
.confirmed-row span,
.btn,
.btn-ghost,
.nav-logo,
.nav-links a,
.footer-logo{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1;
}

/* ============================================================
   NAV: white over the photograph, bone and ink once scrolled
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  color:var(--white);
  background:none;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav-inner{
  max-width:1180px;
  height:100%;
  margin:0 auto;
  padding:0 var(--s3);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);
}
.nav-logo{
  display:inline-flex;align-items:center;gap:var(--s1);
  min-height:44px;
  font-size:12px;
  color:inherit;
}
.nav-mark{
  width:auto;height:20px;
}
.nav-links{display:flex;align-items:center;gap:var(--s3)}
.nav-links a{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  padding:0 var(--s1);
  font-size:12px;letter-spacing:.14em;
  color:inherit;
  text-decoration:underline 1px transparent;
  text-underline-offset:7px;
  transition:text-decoration-color .25s ease;
}
.nav-links a:hover,.nav-links a:focus-visible{text-decoration-color:currentColor}
/* the Book link is a link, not a chip (Law 3) */
.nav-links .nav-cta{background:none;border:0;padding:0 var(--s1);color:inherit}
/* the current page is marked with a rule under it, not a filled shape */
.nav-links a.nav-active::after{
  content:"";
  position:absolute;
  left:var(--s1);right:var(--s1);
  bottom:12px;
  height:1px;
  background:currentColor;
}
.nav.scrolled{
  background:var(--bone);
  color:var(--ink);
  border-bottom-color:var(--rule-ink);
}
/* the nav lands on the same black, so the mark never changes value */

.nav-toggle{
  display:none;
  position:relative;z-index:1001;
  width:44px;height:44px;
  background:none;border:0;padding:0;
  cursor:pointer;
}
.nav-toggle span{
  display:block;position:absolute;left:11px;
  width:22px;height:1px;
  background:currentColor;
  transition:transform .3s ease,top .3s ease,bottom .3s ease;
}
.nav-toggle span:first-child{top:18px}
.nav-toggle span:last-child{bottom:18px}
.nav-toggle.active span:first-child{top:50%;transform:rotate(45deg)}
.nav-toggle.active span:last-child{bottom:50%;transform:rotate(-45deg)}
.nav-toggle.active{color:var(--ink)}

/* ---------- mobile menu ---------- */
.mobile-menu{
  display:none;
  position:fixed;inset:0;z-index:999;
  background:var(--espresso);
  color:var(--ink);
  flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.mobile-menu.active{opacity:1;pointer-events:auto}
.mobile-link{
  display:inline-flex;align-items:center;
  min-height:44px;
  font-size:clamp(26px,7vw,34px);
  font-weight:300;
  letter-spacing:-0.03em;
  color:var(--ink);
  opacity:.86;
  transition:opacity .25s ease;
}
.mobile-link:hover{opacity:1}
.mobile-menu :focus-visible{outline-color:var(--mint)}

/* ============================================================
   BUTTONS: rectangles, 2px radius, moss on bone, mint on ink
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  padding:0 26px;
  border:1px solid var(--moss);
  border-radius:999px;
  background:var(--moss);
  color:var(--bone);
  font-family:var(--mono);
  font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  line-height:1;
  text-align:center;
  cursor:pointer;
  transition:box-shadow .24s var(--ease),background-color .24s var(--ease),border-color .24s var(--ease);
}
/* the one permitted glow, and it always means a hand is on the control */
.btn:hover{box-shadow:0 0 24px 2px rgba(255,255,255,.35)}
/* the system's disabled: a panel fill and a dim label, never a faded pill */
.btn:disabled{background:var(--bone-2);border-color:var(--bone-2);color:#3A3A3A;box-shadow:none;cursor:not-allowed;pointer-events:none}
.btn-full{width:100%}
/* booking.js appends a hover glow span to every .btn. It belongs to the
   old glassy sheet; here it stays inert rather than being torn out of JS. */
.btn .hover-circle{display:none}

.btn-ghost{
  /* "Back" is short enough to fall under the 44px target on its own, so the
     box is held open while the label stays flush with the content column */
  display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:44px;min-width:44px;
  padding:0;
  background:none;border:0;
  color:var(--ink-label);
  font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  transition:color .25s ease;
}
.btn-ghost:hover{color:var(--ink)}

/* ============================================================
   FORMS
   ============================================================ */
.form-group{margin-bottom:var(--s2)}
.form-group input,
.form-group textarea,
#f-playlist{
  width:100%;
  padding:14px var(--s2);
  background:var(--bone-2);
  border:1px solid var(--rule-ink);
  border-radius:6px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.4;
  outline:none;
  transition:border-color .25s ease,background-color .25s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder,
#f-playlist::placeholder{color:var(--ink-placeholder);opacity:1}
.form-group input:focus,
.form-group textarea:focus,
#f-playlist:focus{border-color:var(--moss);background:var(--bone)}
.form-group textarea{resize:vertical;min-height:104px}

/* ============================================================
   PAGE FRAME
   ============================================================ */
.booking-stage{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--s3) var(--s5);
}

/* ---------- the photograph: graded, never scrimmed ---------- */
.booking-photo-header{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  height:clamp(320px,52vh,560px);
  overflow:hidden;
  background:var(--espresso);
}
.booking-photo-header img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 46%;
  /* v5's grade on the room, one step deeper so the white nav clears AA
     against the brightest pixels of the drapes. On the image, not over it. */
  filter:grayscale(1) brightness(.34) contrast(1.12);
}

/* ---------- header ---------- */
.booking-header{
  max-width:56ch;
  margin:var(--s4) 0 var(--s4);
  text-align:left;
}
.booking-tag{
  display:flex;align-items:baseline;gap:var(--s2);
  color:var(--ink-label);
  margin-bottom:var(--s3);
}
.booking-title{
  font-weight:300;
  font-size:clamp(34px,4.8vw,64px);
  line-height:.98;
  letter-spacing:-0.035em;
  color:var(--ink);
  max-width:16ch;
  margin-bottom:var(--s3);
}
/* Law 4: no italic as decoration. The emphasis is the setting, not a slant. */
.booking-title em{font-style:normal;font-weight:300;color:inherit}
.booking-sub{
  font-weight:300;
  font-size:clamp(18px,1.5vw,22px);
  line-height:1.32;
  letter-spacing:-0.02em;
  color:var(--ink-soft);
  max-width:34ch;
}
.booking-sub a{
  color:var(--moss);
  text-decoration:underline 1px var(--rule-ink-firm);
  text-underline-offset:5px;
}
.booking-sub a:hover{text-decoration-color:var(--moss)}

/* ---------- the AVA mark, once, beside the line that places it ---------- */
.ava-lockup{
  display:flex;align-items:center;gap:var(--s3);
  flex-wrap:wrap;
  margin-top:var(--s4);
  padding-top:var(--s3);
  border-top:1px solid var(--rule-ink);
}
.ava-mark{width:300px;height:auto;color:var(--ink);flex:0 0 auto}
.ava-line{
  font-size:14px;
  font-weight:400;
  line-height:1.4;
  color:var(--ink-soft);
  max-width:26ch;
}

/* ---------- progress: hairlines, not bubbles ---------- */
.booking-progress{
  display:flex;
  gap:var(--s2);
  margin-bottom:var(--s4);
}
.progress-line{display:none}
.progress-step{
  flex:1 1 0;
  display:flex;align-items:baseline;gap:var(--s1);
  min-width:0;
  padding-top:var(--s1);
  border-top:1px solid var(--rule-ink);
  color:var(--ink-label);
  opacity:.5;
  transition:opacity .3s ease,border-color .3s ease,color .3s ease;
}
.progress-step.done{opacity:1}
.progress-step.active{
  opacity:1;
  color:var(--ink);
  border-top-color:var(--moss);
}
.progress-step.done{border-top-color:var(--rule-ink-firm)}
.progress-num{color:inherit}
.progress-label{
  color:inherit;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- two column shell ---------- */
.booking-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--s4);
  align-items:start;
}
.booking-main{min-width:0}
.booking-panel{display:none}
.booking-panel.active{display:block;animation:panelIn .4s ease-out both}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.panel-title{
  font-weight:300;
  font-size:clamp(26px,3vw,40px);
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin-bottom:var(--s3);
}
.panel-actions{
  display:flex;align-items:center;gap:var(--s3);
  margin-top:var(--s4);
}
.panel-actions .btn-full{width:auto;flex:1 1 auto;max-width:340px}

/* ============================================================
   STEP 1: journey
   ============================================================ */
.seat-octagon-help{
  font-size:16px;
  font-weight:300;
  line-height:1.45;
  color:var(--ink-soft);
  margin-bottom:var(--s3);
  max-width:52ch;
}
.seat-octagon-help a{
  color:var(--moss);
  text-decoration:underline 1px var(--rule-ink-firm);
  text-underline-offset:4px;
}

.journey-select-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s2);
}
.journey-select-card{
  position:relative;
  display:flex;flex-direction:column;
  text-align:left;
  padding:0;
  background:var(--bone);
  border:1px solid var(--rule-ink);
  border-radius:6px;
  overflow:hidden;
  color:var(--ink);
  font-family:var(--sans);
  cursor:pointer;
  transition:border-color .25s ease,background-color .25s ease;
}
.journey-select-card:hover{border-color:var(--rule-ink-firm)}
.journey-select-card.selected{border-color:var(--moss);background:var(--oat)}
.jsc-image{
  display:block;
  height:136px;
  background-size:cover;
  background-position:center;
  background-color:var(--espresso);
  /* P-01: the catalog stills are lit in every colour of the room. One
     grade, on the image, brings them all onto the one neutral ramp
     without retouching or veiling them. */
  filter:grayscale(1) brightness(.82) contrast(1.06);
}
/* The flag is typographic and sits on the ground, not on the photograph.
   It is anchored to the name row rather than to the bottom of the card,
   because the grid stretches cards to a shared height and a bottom anchor
   leaves it floating in whatever slack that card happens to have. */
.jsc-flag{
  position:absolute;
  font-family:var(--mono);
  right:var(--s2);
  /* 136px image + the body's padding-top, then one .jsc-name line to
     centre against, so the flag shares that line's optical centre */
  top:calc(136px + var(--s2));
  height:22px;
  display:flex;align-items:center;
  font-size:10px;letter-spacing:.2em;
  color:var(--moss);
  background:none;border:0;padding:0;
}
.jsc-body{
  display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s2) var(--s2) var(--s3);
}
.jsc-name{
  font-size:20px;font-weight:500;letter-spacing:-0.025em;line-height:1.1;color:var(--ink);
  padding-right:96px;   /* keeps a long name clear of the flag */
}
.jsc-desc{
  font-size:14px;font-weight:400;line-height:1.5;
  color:var(--ink-soft);
}
.jsc-meta{margin-top:var(--s1);color:var(--ink-label)}

/* ---------- tuning ---------- */
.journey-tuning{
  display:flex;flex-direction:column;gap:var(--s3);
  margin-top:var(--s4);
  padding-top:var(--s3);
  border-top:1px solid var(--rule-ink);
}
.tuning-label{display:block;color:var(--ink-label);margin-bottom:var(--s2)}
.tuning-help{
  font-size:14px;font-weight:400;line-height:1.45;
  color:var(--ink-soft);
  margin:0 0 var(--s2);
  max-width:44ch;
}
.mood-chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.mood-chip{
  min-height:44px;
  padding:0 var(--s3);
  background:var(--bone-2);
  border:1px solid var(--rule-ink);
  border-radius:6px;
  color:var(--ink);
  font-family:var(--sans);
  cursor:pointer;
  transition:border-color .25s ease,background-color .25s ease,color .25s ease;
}
.mood-chip:hover{border-color:var(--rule-ink-firm)}
.mood-chip.selected{background:var(--moss);border-color:var(--moss);color:var(--bone)}

.intensity-row{display:flex;align-items:center;gap:var(--s2)}
.intensity-end{color:var(--ink-label);white-space:nowrap}
/* the track is a hairline; the control is 44px tall so a thumb can be hit */
#f-intensity{
  flex:1;
  -webkit-appearance:none;appearance:none;
  height:44px;
  background:none;
  outline:none;
  cursor:pointer;
}
#f-intensity::-webkit-slider-runnable-track{
  height:1px;
  background:var(--rule-ink-firm);
}
#f-intensity::-moz-range-track{
  height:1px;
  background:var(--rule-ink-firm);
}
#f-intensity::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;
  margin-top:-8px;
  border-radius:6px;
  background:var(--moss);
  border:0;
  cursor:pointer;
}
#f-intensity::-moz-range-thumb{
  width:16px;height:16px;
  border-radius:6px;
  background:var(--moss);
  border:0;
  cursor:pointer;
}
.intensity-readout{margin:var(--s2) 0 0}

/* ============================================================
   STEP 2: seats
   ============================================================ */
.seat-octagon-wrap{
  position:relative;
  width:100%;max-width:360px;
  margin:0 auto var(--s3);
}
#seat-octagon{display:block;width:100%;height:auto}
.seat-wedge{
  fill:var(--bone-2);
  stroke:var(--rule-ink-firm);
  stroke-width:1;
  cursor:pointer;
  transition:fill .25s ease,stroke .25s ease;
}
.seat-wedge:hover{fill:var(--oat)}
.seat-wedge.selected{fill:var(--moss);stroke:var(--moss)}
.seat-octagon-hub{fill:var(--bone);stroke:var(--rule-ink);stroke-width:1}
.seat-octagon-center{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
  width:130px;height:130px;
}
.seat-count{
  font-size:40px;font-weight:300;line-height:1;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}
.seat-count-label{color:var(--ink-label);margin-top:var(--s1)}

/* ============================================================
   STEP 3: date and time
   ============================================================ */
.calendar{
  background:var(--bone-2);
  border:1px solid var(--rule-ink);
  border-radius:6px;
  padding:var(--s3);
  margin-bottom:var(--s4);
}
.calendar-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s3);
}
.cal-month{
  font-size:20px;font-weight:300;letter-spacing:-0.02em;
}
.cal-nav{
  width:44px;height:44px;
  background:none;
  border:1px solid var(--rule-ink);
  border-radius:6px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;line-height:1;
  cursor:pointer;
  transition:border-color .25s ease,background-color .25s ease;
}
.cal-nav:hover{border-color:var(--moss);background:var(--oat)}
.cal-nav:disabled{opacity:.28;cursor:not-allowed}
.calendar-weekdays{
  display:grid;grid-template-columns:repeat(7,1fr);
  margin-bottom:var(--s1);
}
.calendar-weekdays span{
  text-align:center;
  font-size:10px;
  color:var(--ink-label);
}
.calendar-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:2px;
}
.cal-day{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  min-height:38px;
  font-size:15px;font-weight:400;
  font-variant-numeric:tabular-nums;
  border-radius:6px;
  border:1px solid transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.cal-day:hover:not(.disabled):not(.selected):not(.empty){background:var(--oat)}
.cal-day.empty{cursor:default}
.cal-day.disabled{color:var(--ink-label);opacity:.42;cursor:not-allowed}
.cal-day.today{border-color:var(--moss)}
.cal-day.selected{background:var(--moss);border-color:var(--moss);color:var(--bone)}

.time-slots-title{color:var(--ink-label);margin-bottom:var(--s2)}
.time-slots-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s1);
}
.time-slot{
  display:flex;align-items:center;justify-content:center;
  min-height:56px;
  padding:var(--s2) var(--s1);
  background:var(--bone-2);
  border:1px solid var(--rule-ink);
  border-radius:6px;
  text-align:center;
  font-size:15px;font-weight:400;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:border-color .25s ease,background-color .25s ease,color .25s ease;
}
.time-slot:hover{border-color:var(--rule-ink-firm)}
.time-slot.selected{background:var(--moss);border-color:var(--moss);color:var(--bone)}
.time-slot.unavailable{
  opacity:.34;
  cursor:default;
  text-decoration:line-through;
  pointer-events:none;
}
.time-slots-loading,
.time-slots-none{
  grid-column:1 / -1;
  font-size:15px;font-weight:400;
  color:var(--ink-soft);
  padding:var(--s1) 0;
}

/* ============================================================
   STEP 4: checkout
   ============================================================ */
.checkout-panel{
  border:1px solid var(--rule-ink);
  border-radius:6px;
  overflow:hidden;
  background:var(--bone);
}
/* the product, on the one neutral ramp like every other surface.
   ONE LINE IMAGE SWAP: change the url below. */
.checkout-panel-image{
  height:220px;
  background:url('media/product-bone.jpg') center 58%/cover no-repeat;
  filter:grayscale(1) brightness(.92) contrast(1.06);
}
.checkout-panel-body{padding:var(--s3)}
.checkout-summary{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s3);
  flex-wrap:wrap;
}
.checkout-recap-name{
  font-size:24px;font-weight:500;letter-spacing:-0.03em;color:var(--ink);
  margin-bottom:var(--s1);
}
.checkout-recap-sub{font-size:14px;font-weight:400;color:var(--ink-soft)}
.checkout-recap-stats{display:flex;gap:var(--s3)}
.checkout-stat{display:flex;flex-direction:column;gap:var(--s1)}
/* numerals are set in mono, always */
.stat-num{
  font-family:var(--mono);
  font-size:20px;font-weight:400;letter-spacing:.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat-label{color:var(--ink-label)}
.checkout-divider{
  height:1px;
  background:var(--rule-ink);
  margin:var(--s3) 0;
}
.checkout-note{
  font-size:15px;font-weight:400;line-height:1.45;
  color:var(--ink-soft);
  margin-bottom:var(--s3);
  max-width:52ch;
}
.form-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s2);
}
#checkout-submit{margin-top:var(--s2)}
/* failure is stated in words on a white hairline box, since brightness,
   not hue, is what carries state in this system */
.checkout-error{
  font-size:14px;
  color:var(--alert);
  border:1px solid var(--alert);
  border-left-width:3px;
  border-radius:6px;
  padding:12px var(--s2);
  margin-bottom:var(--s2);
}
.checkout-success{
  margin-top:var(--s3);
  padding:var(--s2);
  border:1px solid var(--moss);
  border-radius:6px;
  background:var(--oat);
}
.checkout-success-title{font-size:16px;font-weight:500;margin-bottom:var(--s1)}
.checkout-success p{font-size:14px;font-weight:400;line-height:1.5;color:var(--ink-soft)}
.canceled-notice{
  display:inline-block;
  margin-top:var(--s3);
  padding:12px var(--s2);
  font-size:14px;
  color:var(--ink-soft);
  border:1px solid var(--rule-ink);
  border-radius:6px;
}

/* ============================================================
   CONFIRMED
   ============================================================ */
.confirmed-card{
  max-width:600px;
  padding:var(--s4);
  background:var(--espresso);
  color:var(--ink);
  border:1px solid var(--rule-ink);
  border-radius:6px;
}
.confirmed-eyebrow{color:var(--mint);margin-bottom:var(--s3)}
.confirmed-title{
  font-size:clamp(30px,3.6vw,48px);
  font-weight:300;
  line-height:1;
  letter-spacing:-0.035em;
  margin-bottom:var(--s2);
}
.confirmed-title em{font-style:normal;font-weight:300}
.confirmed-code{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mint);
  margin-bottom:var(--s4);
}
.confirmed-details{
  display:flex;flex-direction:column;
  border-top:1px solid var(--rule-bone);
  margin-bottom:var(--s3);
}
.confirmed-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s2);
  padding:var(--s2) 0;
  border-bottom:1px solid var(--rule-bone);
  font-size:16px;
}
.confirmed-row span{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  opacity:.8;
}
.confirmed-row strong{font-weight:400}
.confirmed-note{
  font-size:15px;font-weight:400;line-height:1.5;
  opacity:.86;
  margin-bottom:var(--s3);
  max-width:44ch;
}
.confirmed-card .btn{
  background:var(--mint);border-color:var(--mint);color:var(--espresso);
}
.confirmed-card .btn:hover{background:var(--mint-lift);border-color:var(--mint-lift)}
.confirmed-card :focus-visible{outline-color:var(--mint)}

/* ============================================================
   SIDEBAR: a hairline column, not a floating card
   ============================================================ */
.booking-sidebar{
  position:sticky;
  top:calc(var(--nav-h) + var(--s3));
  display:flex;flex-direction:column;
  padding-left:var(--s3);
  border-left:1px solid var(--rule-ink);
}
.sidebar-title{
  font-size:22px;font-weight:300;letter-spacing:-0.025em;
  margin-bottom:var(--s3);
}
.sidebar-row{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 0;
  border-top:1px solid var(--rule-ink);
}
.sidebar-row:first-of-type{border-top:none;padding-top:0}
.sidebar-label{color:var(--ink-label)}
.sidebar-value{font-size:16px;font-weight:400}
/* booking.js writes an en dash into an empty slot. The flow keeps its
   logic; the page keeps its no dash rule, so the placeholder is set here
   instead of being read off the node. */
.sidebar-value.sidebar-empty{
  position:relative;
  color:transparent;
  user-select:none;
}
.sidebar-value.sidebar-empty::after{
  content:"Not set";
  position:absolute;left:0;top:0;
  color:var(--ink-label);
  font-size:16px;font-weight:400;
  letter-spacing:-0.005em;
}
.sidebar-total{
  border-top:1px solid var(--rule-ink-firm);
  margin-bottom:var(--s3);
}
.sidebar-total .sidebar-value:not(.sidebar-empty){font-size:22px;font-weight:300;letter-spacing:-0.02em}
.booking-sidebar .btn{margin-top:auto}
.sidebar-note{
  font-size:12px;font-weight:400;line-height:1.5;
  color:var(--ink-label);
  margin-top:var(--s2);
}

/* ============================================================
   FOOTER: espresso ground, bone ink
   ============================================================ */
.footer{
  background:var(--espresso);
  color:var(--ink-label);
  border-top:1px solid var(--rule-ink);
  padding:var(--s4) 0;
}
.container{max-width:1180px;margin:0 auto;padding:0 var(--s3)}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);
  flex-wrap:wrap;
}
.footer-logo{font-size:12px}
.footer-links{display:flex;align-items:center;gap:var(--s3)}
.footer-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  font-size:13px;
  opacity:.82;
  transition:opacity .25s ease;
}
.footer-link:hover{opacity:1}
.footer-copy{font-size:13px;opacity:.82}
.footer :focus-visible{outline-color:var(--mint)}

/* ============================================================
   RESPONSIVE: the scale steps down one notch
   ============================================================ */
@media (max-width:1024px){
  .booking-shell{grid-template-columns:minmax(0,1fr)}
  .booking-sidebar{
    position:static;
    /* the choices come first on a narrow screen; the summary follows them */
    order:1;
    margin-top:var(--s4);
    padding-left:0;
    padding-top:var(--s3);
    border-left:0;
    border-top:1px solid var(--rule-ink-firm);
  }
  .booking-sidebar .btn{margin-top:var(--s2)}
}

@media (max-width:860px){
  :root{--nav-h:56px}
  .nav-inner{padding:0 var(--s2)}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .mobile-menu{display:flex}
  .booking-stage{padding:0 var(--s2) var(--s4)}
  .booking-photo-header{height:clamp(260px,40vh,380px)}
  .booking-header{margin:var(--s3) 0 var(--s4)}
  .booking-tag{margin-bottom:var(--s2)}
  .booking-title{margin-bottom:var(--s2)}
  .ava-lockup{margin-top:var(--s3);padding-top:var(--s2);gap:var(--s2)}
  .ava-mark{width:228px}
  .booking-progress{gap:var(--s1);margin-bottom:var(--s3)}
  .progress-label{display:none}
  .progress-step{justify-content:center}
  .journey-select-grid{grid-template-columns:minmax(0,1fr)}
  .journey-tuning{margin-top:var(--s3)}
  .panel-actions{margin-top:var(--s3);gap:var(--s2)}
  .panel-actions .btn-full{max-width:none}
  .calendar{padding:var(--s2);margin-bottom:var(--s3)}
  .time-slots-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checkout-panel-body{padding:var(--s2)}
  .checkout-summary{gap:var(--s2)}
  /* Three across is too tight at 390px: the journey name breaks over two
     lines and the date label wraps mid word. The journey takes the full
     width and the two short stats share the row below it. */
  .checkout-recap-stats{
    width:100%;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--s2) var(--s3);
  }
  .checkout-stat:first-child{grid-column:1 / -1}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .confirmed-card{padding:var(--s3)}
  .footer{padding:var(--s3) 0}
  .container{padding:0 var(--s2)}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:var(--s1)}
}

@media (prefers-reduced-motion:reduce){
  .booking-panel.active{animation:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}