.reservation-page {
  position: relative;
  overflow: hidden;
  background: var(--color-charcoal-950);
}

.reservation-page::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 9px);
  content: "";
}

.reservation-page > * {
  position: relative;
  z-index: 1;
}

.reservation-hero {
  position: relative;
  display: grid;
  min-height: 40rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-charcoal-950);
}

.reservation-hero__image,
.reservation-hero__overlay,
.reservation-hero__container {
  grid-area: 1 / 1;
}

.reservation-hero__image {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  filter: saturate(0.84) contrast(1.05);
}

.reservation-hero__overlay {
  background: linear-gradient(90deg, rgba(16,18,20,0.96) 0%, rgba(16,18,20,0.82) 42%, rgba(16,18,20,0.38) 73%, rgba(16,18,20,0.26) 100%);
}

.reservation-hero__container {
  display: flex;
  width: min(100% - (var(--container-padding) * 2), var(--container-width));
  min-width: 0;
  align-items: center;
  margin-inline: auto;
  padding-block: var(--space-8);
}

.reservation-hero__content {
  display: flex;
  width: min(48%, 37.5rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.reservation-hero__content .eyebrow,
.reservation-hero__content h1,
.reservation-hero__content p,
.reservation-hero__content address {
  margin: 0;
}

.reservation-hero__content h1 {
  max-width: 10ch;
  font-size: clamp(3.5rem, 6vw, 4rem);
}

.reservation-hero__lead {
  max-width: 37.5rem;
  color: var(--color-offwhite-100);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.reservation-hero__contact-copy {
  max-width: 35rem;
  color: var(--color-offwhite-300);
}

.reservation-hero__actions,
.reservation-cta__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.reservation-hero__actions > *,
.reservation-cta__actions > * {
  min-width: 0;
}

.reservation-hero__address {
  max-width: 35rem;
  padding-inline-start: var(--space-3);
  border-inline-start: var(--border-strong-width) solid var(--color-warning-yellow-500);
  color: var(--color-offwhite-300);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--text-label);
  font-style: normal;
  line-height: var(--leading-meta);
  overflow-wrap: anywhere;
}

.reservation-info__heading {
  width: min(100%, 40.625rem);
  min-width: 0;
}

.reservation-info__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  min-width: 0;
  margin-top: var(--space-6);
}

.reservation-info__grid > * {
  min-width: 0;
}

.reservation-info__card {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-steel-700);
  background: var(--color-charcoal-900);
  box-shadow: var(--shadow-hard-soft);
}

.reservation-info__number {
  min-width: 0;
  color: var(--color-warning-yellow-500);
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: var(--weight-extrabold);
  line-height: 1;
}

.reservation-info__copy {
  min-width: 0;
}

.reservation-info__copy h3 {
  margin-bottom: var(--space-3);
}

.reservation-info__copy p {
  margin-bottom: 0;
  color: var(--color-offwhite-300);
}

.reservation-spaces__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8);
  align-items: center;
}

.reservation-spaces__layout > * {
  min-width: 0;
}

.reservation-spaces__copy {
  width: 100%;
  max-width: 30rem;
  min-width: 0;
}

.reservation-spaces__module {
  min-width: 0;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-steel-700);
  background: var(--color-charcoal-900);
}

.reservation-spaces__module--salon {
  margin-left: var(--space-5);
  border-inline-start: var(--border-strong-width) solid var(--color-warning-yellow-500);
}

.reservation-spaces__module h3 {
  margin-bottom: var(--space-3);
}

.reservation-spaces__module p,
.reservation-spaces__note p {
  margin-bottom: 0;
  color: var(--color-offwhite-300);
}

.reservation-spaces__note {
  min-width: 0;
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-steel-700);
  background: rgba(69, 74, 77, 0.22);
}

.reservation-spaces__figure {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: var(--border-width) solid var(--color-steel-700);
  background: var(--color-charcoal-900);
}

.reservation-spaces__figure img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  object-position: right center;
  filter: saturate(0.82) contrast(1.04);
  transition: filter var(--transition-fast);
}

.reservation-spaces__figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(100%, 16.25rem);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(16,18,20,0.9);
  color: var(--color-offwhite-100);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.reservation-process__track {
  width: min(100%, 51.25rem);
  min-width: 0;
  margin-inline: auto;
}

.reservation-process__heading {
  min-width: 0;
}

.reservation-process__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  min-width: 0;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.reservation-process__step {
  position: relative;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-4);
}

.reservation-process__step::after {
  position: absolute;
  top: 4rem;
  bottom: calc(var(--space-5) * -1);
  left: 2.9375rem;
  width: 2px;
  background: var(--color-steel-700);
  content: "";
}

.reservation-process__step--last::after {
  background: var(--color-warning-yellow-500);
}

.reservation-process__step-number {
  position: relative;
  z-index: 1;
  display: flex;
  width: 4rem;
  min-width: 0;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid var(--color-steel-500);
  background: var(--color-charcoal-900);
  color: var(--color-warning-yellow-500);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: var(--weight-extrabold);
}

.reservation-process__step-copy {
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--color-steel-700);
  background: var(--color-charcoal-900);
}

.reservation-process__step-copy h3 {
  margin-bottom: var(--space-3);
}

.reservation-process__step-copy p {
  max-width: 38.75rem;
  margin-bottom: 0;
  color: var(--color-offwhite-300);
}

.reservation-process__address {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-offwhite-100);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--text-meta);
  overflow-wrap: anywhere;
}

.reservation-rhythm__heading {
  width: min(100%, 40rem);
  min-width: 0;
}

.reservation-rhythm__heading .lead {
  margin-bottom: 0;
}

.reservation-rhythm__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  min-width: 0;
  margin-top: var(--space-6);
}

.reservation-rhythm__grid > * {
  min-width: 0;
}

.reservation-rhythm__card {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-steel-700);
  background: var(--color-charcoal-900);
}

.reservation-rhythm__card--rust {
  border-color: var(--color-rust-600);
}

.reservation-rhythm__card--contact {
  border-width: var(--border-strong-width);
  border-color: var(--color-steel-500);
}

.reservation-rhythm__card h3 {
  margin-bottom: var(--space-3);
}

.reservation-rhythm__card p {
  margin-bottom: 0;
  color: var(--color-offwhite-300);
}

.reservation-experience__heading {
  width: min(100%, 43.75rem);
  min-width: 0;
}

.reservation-experience__media {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: var(--border-width) solid var(--color-steel-700);
  background: var(--color-charcoal-900);
}

.reservation-experience__media > img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  object-position: right center;
  filter: saturate(0.76) contrast(1.06);
  transition: filter var(--transition-fast);
}

.reservation-experience__panel {
  position: absolute;
  bottom: var(--space-7);
  left: var(--space-7);
  display: flex;
  width: min(100% - (var(--space-7) * 2), 28.75rem);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-steel-500);
  background: rgba(25,28,31,0.95);
  box-shadow: var(--shadow-hard);
}

.reservation-experience__panel h3,
.reservation-experience__panel p {
  margin: 0;
}

.reservation-experience__panel > p:not(.reservation-experience__quote) {
  color: var(--color-offwhite-300);
}

.reservation-experience__quote {
  padding-left: var(--space-4);
  border-left: var(--border-strong-width) solid var(--color-warning-yellow-500);
  color: var(--color-offwhite-100);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.reservation-location__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8);
  align-items: start;
}

.reservation-location__layout > * {
  min-width: 0;
}

.reservation-location__address-block {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-steel-700);
  background: var(--color-charcoal-900);
}

.reservation-location__address-block > p {
  width: min(100%, 26.25rem);
  color: var(--color-offwhite-300);
}

.reservation-location__address-block address {
  margin: 0;
  padding: var(--space-4);
  border-left: var(--border-strong-width) solid var(--color-warning-yellow-500);
  background: rgba(69,74,77,0.2);
  color: var(--color-offwhite-100);
  font-size: var(--text-lead);
  font-style: normal;
  line-height: var(--leading-lead);
  overflow-wrap: anywhere;
}

.reservation-location__contact {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-strong-width) solid var(--color-steel-700);
  background: var(--color-charcoal-900);
  box-shadow: var(--shadow-hard);
}

.reservation-location__contact .eyebrow,
.reservation-location__contact h3,
.reservation-location__contact p {
  margin: 0;
}

.reservation-location__contact p {
  width: min(100%, 22.5rem);
  color: var(--color-offwhite-300);
}

.reservation-location__phone,
.reservation-location__email {
  display: inline-flex;
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
  overflow-wrap: anywhere;
}

.reservation-location__phone {
  color: var(--color-warning-yellow-500);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.reservation-location__email {
  color: var(--color-offwhite-100);
}

.reservation-cta__panel {
  display: flex;
  width: min(100%, 47.5rem);
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-inline: auto;
  padding: var(--space-7);
  border: var(--border-width) solid var(--color-steel-500);
  border-top: var(--border-strong-width) solid var(--color-warning-yellow-500);
  background: var(--color-charcoal-900);
  box-shadow: var(--shadow-hard);
  text-align: center;
}

.reservation-cta__panel .eyebrow,
.reservation-cta__panel h2,
.reservation-cta__panel p {
  margin: 0;
}

.reservation-cta__panel p {
  width: min(100%, 37.5rem);
  color: var(--color-offwhite-300);
}

.reservation-cta__actions {
  justify-content: center;
}

.reservation-cta__actions .button {
  min-width: 11.25rem;
}

.reservation-closing {
  padding-bottom: var(--section-space);
}

.reservation-closing__panel {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-steel-700);
  background: var(--color-charcoal-900);
}

.reservation-closing__stripe {
  width: 100%;
  height: 0.75rem;
  margin-bottom: var(--space-4);
  background: repeating-linear-gradient(135deg, var(--color-warning-yellow-500) 0 12px, var(--color-charcoal-950) 12px 24px);
  background-size: 3rem 100%;
  animation: reservation-stripe-drift 16s linear infinite;
}

.reservation-closing__stamp {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-warning-yellow-500);
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.reservation-closing__panel p {
  width: min(100%, 47.5rem);
  margin: 0;
  color: var(--color-offwhite-100);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

@keyframes reservation-stripe-drift {
  to { background-position: 3rem 0; }
}

@media (pointer: fine) {
  .reservation-spaces__figure:hover img,
  .reservation-experience__media:hover > img {
    filter: saturate(0.96) contrast(1.1);
  }
}

@media (max-width: 980px) {
  .reservation-hero__image { object-position: center center; }
  .reservation-hero__overlay { background: linear-gradient(90deg, rgba(16,18,20,0.92), rgba(16,18,20,0.66)); }
  .reservation-hero__content { width: min(70%, 38.75rem); }
}

@media (max-width: 920px) {
  .reservation-spaces__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .reservation-spaces__copy { max-width: none; }
  .reservation-spaces__figure { order: 2; }
}

@media (max-width: 900px) {
  .reservation-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reservation-info__card--wide { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  .reservation-experience__media { overflow: visible; aspect-ratio: auto; border: 0; background: transparent; }
  .reservation-experience__media > img { display: block; aspect-ratio: 16 / 9; border: var(--border-width) solid var(--color-steel-700); }
  .reservation-experience__panel { position: static; width: 100%; margin-top: var(--space-4); box-shadow: none; }
}

@media (max-width: 760px) {
  .reservation-rhythm__grid,
  .reservation-location__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .reservation-process__step { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .reservation-process__step::after { left: 1.6875rem; }
}

@media (max-width: 680px) {
  .reservation-info__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .reservation-info__card--wide { grid-column: auto; }
}

@media (max-width: 620px) {
  .reservation-hero { min-height: 26.25rem; }
  .reservation-hero__container { align-items: end; padding-block: var(--space-5); }
  .reservation-hero__overlay { background: linear-gradient(0deg, rgba(16,18,20,0.98), rgba(16,18,20,0.6) 72%, rgba(16,18,20,0.34)); }
  .reservation-hero__content { width: 100%; gap: var(--space-3); }
  .reservation-hero__content h1 { max-width: 12ch; font-size: 2.25rem; line-height: 1; }
  .reservation-hero__lead { font-size: 1.125rem; }
  .reservation-hero__actions,
  .reservation-cta__actions { width: 100%; flex-direction: column; }
  .reservation-hero__actions .button,
  .reservation-cta__actions .button { width: 100%; min-height: 3rem; }
  .reservation-info__card,
  .reservation-spaces__module,
  .reservation-rhythm__card,
  .reservation-location__address-block,
  .reservation-location__contact,
  .reservation-experience__panel { padding: var(--space-5); }
  .reservation-spaces__module--salon { margin-left: 0; }
  .reservation-process__step { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .reservation-process__step::after { top: 4rem; bottom: calc(var(--space-4) * -1); left: 1.9375rem; height: auto; }
  .reservation-process__step-number { width: 4rem; }
  .reservation-process__step-copy { padding: var(--space-5); }
  .reservation-experience__media > img { aspect-ratio: 4 / 3; object-position: center; }
  .reservation-cta__panel { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .reservation-closing__stripe { animation: none; }
}