/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* clip (not hidden) so horizontal overflow is contained without breaking position:sticky */
html, body { overflow-x: clip; max-width: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--navy);
  color: var(--white);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* Full-bleed model: every section's BACKGROUND (colour or image) spans the
   viewport edge-to-edge; only the CONTENT inside is contained and centred.
   .site is just a full-width wrapper that clips any 2000-frame overflow. */
.site {
  width: 100%;
  position: relative;
  overflow-x: clip;
}

/* Centered content column shared by most sections — the design content band,
   scaled by --px and capped at --max-w (1140px), centred in the full-bleed
   section. Fills the viewport below 1140, then caps. */
.container {
  width: calc(var(--content-w) * var(--px));
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section content holders that aren't .container but must still be contained
   and centred inside their full-bleed background. */
.nl-top__inner,
.walkins__inner,
.expect__inner,
.riot__inner,
.ft__inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

/* Pill button used across the site (Figma BOOK: Inter Bold 16.958px, tracking
   4.24px = 0.25em, border 1.931px, h30 px55 py4.8) */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.25em;
  border-radius: 999px;
  white-space: nowrap;
}
.btn-book {
  background: var(--red);
  color: var(--white);
  border: calc(1.931 * var(--px)) solid var(--white);
  padding: calc(4.8 * var(--px)) calc(40 * var(--px));
  font-size: calc(16.958 * var(--px));
}

/* Per-field validation errors — a floating tooltip below the field (absolute,
   so it never pushes the layout). JS sets top/left from the input's offset;
   the field wrapper / form is the positioned anchor. */
.field-error {
  position: absolute;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  max-width: 250px;
  padding: 8px 11px;
  background: #fff;
  color: #2b2b33;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  white-space: normal;
  pointer-events: none;
  animation: kb-tip-in 0.12s ease-out;
}
/* Red "!" badge before the message text. */
.field-error::before {
  content: "!";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  background: var(--color-error);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
/* Arrow pointing up to the field. */
.field-error::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 14px;
  border: 6px solid transparent;
  border-bottom-color: #fff;
}
@keyframes kb-tip-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.field-error[hidden] { display: none; }
.nl-pill.is-invalid { border-color: var(--color-error); }