.reservation-page { background: var(--bone); }
.reservation-page .site-header { background: rgba(14, 12, 11, .72); box-shadow: 0 1px 0 var(--line-dark); }
.reservation-page .site-nav a[aria-current="page"] { color: var(--bone); }

.reservation-hero {
  position: relative; overflow: hidden; padding: calc(var(--header-height) + 5rem) 0 5.5rem;
  background: radial-gradient(circle at 88% 18%, #e4572e24, transparent 30rem), linear-gradient(145deg, var(--charcoal), var(--charcoal-deep));
  color: var(--bone);
}
.reservation-hero::before {
  position: absolute; inset: 0; content: ""; pointer-events: none;
  background-image: linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask-image: linear-gradient(#000b, transparent 92%); mask-image: linear-gradient(#000b, transparent 92%);
}
.reservation-glow { position: absolute; border-radius: 50%; filter: blur(12px); pointer-events: none; }
.reservation-glow-one { top: 10%; right: -8rem; width: 28rem; height: 28rem; background: #e4572e1a; }
.reservation-glow-two { bottom: -9rem; left: 20%; width: 24rem; height: 24rem; background: #e1b36e12; }
.reservation-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, .72fr); align-items: end; gap: clamp(3rem, 8vw, 8rem); }
.reservation-hero h1 { max-width: 9ch; margin-bottom: 1.5rem; }
.reservation-hero-copy > p:last-child { max-width: 42rem; margin: 0; color: rgba(255, 250, 241, .7); font-size: clamp(1.05rem, 1.5vw, 1.22rem); }
.reservation-note {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 1rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid #fff3; border-radius: var(--radius-large); background: linear-gradient(145deg, #ffffff14, #ffffff08);
  box-shadow: var(--shadow-deep); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform: rotate(1deg);
}
.reservation-note-number { padding-top: .12rem; color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.reservation-note strong { font-family: var(--font-display); font-size: 1.15rem; }
.reservation-note p { margin: .15rem 0 0; color: rgba(255, 250, 241, .62); font-size: .82rem; }

.reservation-section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.reservation-layout { display: grid; grid-template-columns: minmax(15rem, .58fr) minmax(0, 1.42fr); align-items: start; gap: clamp(2.5rem, 7vw, 7rem); }
.reservation-intro { position: sticky; top: calc(var(--header-height) + 2rem); }
.reservation-intro h2 { max-width: 9ch; font-size: clamp(2.7rem, 5vw, 4.8rem); }
.reservation-intro > p:not(.eyebrow) { color: var(--muted); }
.reservation-assistance { display: grid; gap: .35rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-light); }
.reservation-assistance span { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.reservation-assistance a { color: var(--ember-deep); font-weight: 700; }

.reservation-panel, .reservation-success {
  min-width: 0; padding: clamp(1.35rem, 4vw, 3rem); border: 1px solid var(--line-light); border-radius: var(--radius-large);
  background: #fffdf8; box-shadow: var(--shadow-soft);
}
.form-block + .form-block { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--line-light); }
.form-block-heading { display: grid; grid-template-columns: auto 1fr; gap: 1rem; margin-bottom: 1.75rem; }
.form-block-heading > span { color: var(--ember); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.form-block-heading h3 { margin-bottom: .4rem; font-size: clamp(1.55rem, 3vw, 2.1rem); letter-spacing: -.02em; line-height: 1.1; }
.form-block-heading p { margin: 0; color: var(--muted); font-size: .86rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.field-wide { grid-column: 1 / -1; }
.field { display: grid; align-content: start; gap: .45rem; }
.field > label, .schedule-fieldset legend { color: var(--ink); font-size: .78rem; font-weight: 700; }
.optional { margin-left: .35rem; color: var(--muted); font-size: .66rem; font-weight: 600; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.35rem; padding: .8rem 1rem; border: 1px solid #241c1833; border-radius: .8rem;
  background: var(--bone); color: var(--ink); font: inherit; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--ember-deep); background: #fff; outline: 3px solid var(--bone); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ember) !important; }
.field [aria-invalid="true"] { border-color: var(--ember-deep); box-shadow: 0 0 0 3px #b8331614; }
.field-error { min-height: 1.1rem; color: #98270f; font-size: .72rem; }
.honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

.schedule-fieldset { min-width: 0; margin: 1.35rem 0 0; padding: 0; border: 0; }
.schedule-status { margin: .5rem 0 1rem; color: var(--muted); font-size: .8rem; }
.schedule-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.schedule-option {
  min-height: 3.15rem; padding: .65rem .5rem; border: 1px solid #241c1833; border-radius: .75rem;
  background: var(--bone); color: var(--ink); cursor: pointer; font: 700 .82rem var(--font-body);
  transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.schedule-option:hover:not(:disabled), .schedule-option:focus-visible { border-color: var(--ember); transform: translateY(-2px); }
.schedule-option[aria-checked="true"] { border-color: var(--ember-deep); background: var(--ember-deep); color: #fff; box-shadow: 0 10px 24px #b8331638; }
.schedule-option:disabled { border-style: dashed; opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.schedule-grid[aria-busy="true"] { min-height: 3.15rem; border-radius: .75rem; background: linear-gradient(90deg, #f6eddf, #fffdf8, #f6eddf); background-size: 200% 100%; animation: schedule-loading 1.2s linear infinite; }

.request-status { margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: .75rem; background: #fff4e8; color: #6e2b18; font-size: .85rem; }
.request-status.is-error { border: 1px solid #b8331640; background: #fff0ec; color: #86250f; }
.form-submit-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.form-submit-row p { margin: 0; color: var(--muted); font-size: .72rem; }
.form-submit-row a { color: var(--ember-deep); }
.request-submit:disabled { border-color: #8c8178; background: #8c8178; box-shadow: none; cursor: not-allowed; opacity: .72; transform: none; }

.reservation-success { grid-column: 2; }
.reservation-success h2 { max-width: 12ch; font-size: clamp(2.7rem, 5vw, 4.8rem); }
.success-lead { max-width: 42rem; color: var(--muted); font-size: 1.05rem; }
.success-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 2.25rem 0; }
.success-details div { padding: 1rem; border: 1px solid var(--line-light); border-radius: .8rem; background: var(--bone); }
.success-details dt { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.success-details dd { margin: .25rem 0 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.success-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
[hidden] { display: none !important; }

@keyframes schedule-loading { to { background-position: -200% 0; } }

@media (max-width: 960px) {
  .reservation-hero-grid, .reservation-layout { grid-template-columns: 1fr; }
  .reservation-hero h1 { max-width: 11ch; }
  .reservation-note { max-width: 38rem; transform: none; }
  .reservation-intro { position: static; }
  .reservation-intro h2 { max-width: none; }
  .reservation-success { grid-column: 1; }
}
@media (max-width: 640px) {
  .reservation-hero { padding-top: calc(var(--header-height) + 3.5rem); }
  .reservation-note { grid-template-columns: auto 1fr; padding: 1.25rem; }
  .reservation-panel, .reservation-success { padding: 1.15rem; border-radius: var(--radius); }
  .field-grid, .form-submit-row, .success-details { grid-template-columns: 1fr; }
  .schedule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .request-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .reservation-note, .schedule-option, .request-submit { transform: none !important; transition: none !important; }
  .schedule-grid[aria-busy="true"] { animation: none; }
}
