.landing__bar {
  display: flex; align-items: center;
  padding: var(--stack-gap) var(--head-gap);
  border-bottom: 1px solid var(--hairline);
}

.landing__wrap {
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--inset) var(--head-gap);
}

.landing__card {
  min-width: 0; width: min(100%, var(--measure-widest)); margin-inline: auto;
  padding: var(--stack-gap) var(--head-gap);
  background: var(--paper); border: 0;
}

@media (max-width: 29.99rem) {
  .landing__wrap { padding: 0; }
  .landing__card { width: 100%; }
}

.bare { display: grid; min-height: 100dvh; }

.call { display: grid; gap: var(--head-gap); }

.bare .call { width: min(100%, var(--measure-wide)); margin-inline: auto; }

.bare .request__calendar iframe { min-height: 100dvh; }

.route { overflow-x: clip; }

.route__ground { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.route__plate  { position: absolute; inset: 0; }

img.route__plate {
  inset: calc(-1 * var(--inset)) auto auto calc(-1 * var(--inset));
  width:  calc(100% + 2 * var(--inset));
  height: calc(100% + 2 * var(--inset));
  object-fit: cover; object-position: var(--focal);
  filter: blur(var(--head-gap));
}

.route__veil {
  position: absolute; inset: 0;
  background: var(--scrim);
}

.route__label {
  position: absolute; z-index: 1; top: 0; left: 0;
  max-width: var(--measure); text-align: left;
}

.route__wrap {
  position: relative; z-index: 1; min-height: 100dvh;
  display: flex; align-items: center;
  padding: var(--inset);
}

.route__card {
  position: relative; min-width: 0;
  width: min(100%, var(--measure-widest)); margin-inline: auto;
  padding: var(--stack-gap) var(--head-gap);
  background: var(--surface); border: 1px solid var(--hairline);
}

.route__close {
  position: absolute; z-index: 2; top: 0; right: 0;
  place-items: start end; line-height: var(--lead-tight);
  padding-inline-end: calc(var(--tight-gap) / var(--phi));
  text-decoration: none;
}

.request__title {
  margin: 0 0 var(--tight-gap);
  font-size: var(--f3); font-weight: 400; line-height: var(--lead-tight);
  text-wrap: balance;
}
.request__intro { margin: 0 0 var(--stack-gap); }

.request__submit { font-family: inherit; justify-self: center; padding-inline: var(--s2); }

@media (max-width: 29.99rem) {
  .request__submit { justify-self: stretch; }
}

.request__error {
  margin: var(--tight-gap) 0 0;
  font-size: var(--f-1);
  color: var(--accent-ink);
}

.request__wire { margin: 0; font-size: var(--f-1); color: var(--ink-soft); }
.request__wire a { color: var(--ink); }

.request__form[hidden],
.request__beats[hidden],
.request__beat[hidden] { display: none; }

.request__beat:focus { outline: none; }

.request__beats { display: grid; gap: var(--head-gap); }
/* scroll-margin: a beat opens where a section would, so it lands with a section's air above it */
.request__beat  { display: grid; gap: var(--stack-gap); justify-items: center; text-align: center;
                  scroll-margin-top: var(--band); }
.request__beat > * { margin-inline: auto; }
/* the beat centres its own type; a control keeps the alignment its own module gave it */
.request__beat .choice__opt { text-align: start; }
.request__beat-body { margin: 0; max-width: var(--measure); }

.request__actions { display: flex; flex-wrap: wrap; gap: var(--stack-gap); justify-content: center; }

.request__eyebrow { margin: 0; max-width: var(--measure); }
[data-optin-form-only] > .request__eyebrow { margin-block-end: var(--tight-gap); }

.request__calendar { width: 100%; }
/* the booking widget asks for 745-790px at every width and every step, and cannot resize a
   cross-origin frame, so the height is a floor it clears and never a share of the viewport */
.request__calendar iframe {
  display: block; width: 100%; border: 0;
  min-height: 860px;
}

/* a beat is the whole card, so its ground meets the widget's */
.route__card:has([data-optin-beats]:not([hidden])) { background: var(--paper); }
/* the widget carries no ground of its own at the foot, so the card gives it one */
.route__card:has([data-optin-beat="calendar"]:not([hidden])) { padding-block-end: var(--band); }

@media (max-width: 29.99rem) {
  .route__wrap  { padding: 0; align-items: stretch; }
  .route__card  { width: 100%; min-height: 100dvh; border: 0; background: var(--paper); }
  .route__label { display: none; }
  /* a centred head reaches the close control's corner at this width, so it starts below it */
  .route__card:has([data-optin-beats]:not([hidden])) .request__beat { padding-block-start: var(--tap); }
}

/* a ground under the fields, so a long form reads as one panel and not as the whole screen */
@media (max-width: 29.99rem) {
  .request__form {
    padding: calc(var(--head-gap) * var(--phi)) var(--stack-gap);
    background: var(--surface);
    border: 1px solid var(--hairline);
  }
}