/* ==========================================================================
   PCP — Reserve Your Slot: the decision point

   The quietest page on the site. Near-black ground, clean white type,
   controlled warm gold, and almost nothing else. Where Business is
   structural navy and the Founder chapter is documentary, this one removes
   noise so a person can decide: cards become hairline rows, panels lose
   their borders, and the only bright thing on the page is the button —
   and only once it is touched.

   Scoped to .page-reserve. Nothing here changes the form's DOM contract:
   `.field-error` stays a following sibling of `.field`, and immediately
   after the consent label, because site.css reveals it with
   `~ .field-error` / `+ .field-error` and site.js drives `aria-invalid`.
   ========================================================================== */

.page-reserve {
  --rsv-ground: #040404;
  --rsv-raise: #0a0a0b;
  --rsv-gold: #D4AF37;
  --rsv-gold-soft: rgba(212, 175, 55, 0.85);
  --rsv-rule: rgba(212, 175, 55, 0.16);
  --rsv-ink: rgba(255, 255, 255, 0.66);
  --rsv-ink-dim: rgba(255, 255, 255, 0.62);
  --rsv-air: clamp(4rem, 11vh, 8rem);
}

/* Near-black, and calmer than the shared navy ground. */
.page-reserve.bg-page {
  background-color: var(--rsv-ground);
  background-image:
    radial-gradient(900px 620px at 50% -8%, rgba(212, 175, 55, 0.05), transparent 64%),
    linear-gradient(180deg, #050505 0%, #030303 60%, #050506 100%);
}

/* Driven by --hdr — see assets/js/header.js. */
.page-reserve .site-header { background-color: rgba(4, 4, 4, calc(0.74 * var(--hdr, 1))); }

/* Ambient glows belong to louder pages. */
.page-reserve .pcp-ambient-glow { opacity: 0.03; }

/* --- The opening statement -------------------------------------------- */

[data-reserve] .rsv-open {
  position: relative;
  padding-block: clamp(3.5rem, 10vh, 7rem);
  text-align: center;
}

/* Extremely subtle Phoenix particles. The layer never receives pointer
   events and carries no ground of its own. */
[data-reserve] .rsv-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

[data-reserve] .rsv-open-inner {
  position: relative;
  z-index: 1;
}

[data-reserve] .rsv-eyebrow {
  margin: 0;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--rsv-gold-soft);
}

[data-reserve] .rsv-statement {
  margin: clamp(1.75rem, 4vh, 2.5rem) auto 0;
  max-width: 40rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #fff;
  text-wrap: balance;
}

[data-reserve] .rsv-support {
  margin: clamp(1.75rem, 4vh, 2.5rem) auto 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--rsv-gold);
}

/* Detail row: what the four cards used to say, at a fraction of the noise. */
[data-reserve] .rsv-facts {
  display: grid;
  grid-template-columns: 1fr;                 /* mobile: stacked */
  gap: 1.5rem clamp(1.25rem, 3vw, 2.5rem);
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  padding: clamp(1.1rem, 2.5vh, 1.5rem) 0 0;
  border-top: 1px solid var(--rsv-rule);
  max-width: 52rem;
  list-style: none;
}
@media (min-width: 640px) {
  /* Tablet: a clean 2×2. */
  [data-reserve] .rsv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem clamp(1.25rem, 3vw, 2.5rem); }
  /* A short, centred hairline — not a full-height rule — between the two
     columns of each row. Same --rsv-rule token as every other divider on
     this page, so it reads as part of the existing design, not an addition. */
  [data-reserve] .rsv-fact:nth-child(2)::before,
  [data-reserve] .rsv-fact:nth-child(4)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.75rem;
    background: var(--rsv-rule);
  }
}
@media (min-width: 1024px) {
  /* Desktop: one straight row of four equal columns. */
  [data-reserve] .rsv-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem clamp(1.25rem, 3vw, 2.5rem); }
  [data-reserve] .rsv-fact:nth-child(2)::before,
  [data-reserve] .rsv-fact:nth-child(3)::before,
  [data-reserve] .rsv-fact:nth-child(4)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.75rem;
    background: var(--rsv-rule);
  }
}

[data-reserve] .rsv-fact {
  position: relative;                          /* anchors the divider above */
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rsv-ink-dim);
}

[data-reserve] .rsv-fact strong {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.8);
}

/* --- Layout ----------------------------------------------------------- */

[data-reserve] .rsv-body {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(1.25rem, 3.5vh, 2rem);
}

@media (min-width: 1024px) {
  [data-reserve] .rsv-body {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  /* The aside tracks the form rather than running off on its own. */
  [data-reserve] .rsv-aside { position: sticky; top: calc(84px + 3rem); }
}

/* --- Aside: hairline rows, not cards ---------------------------------- */

[data-reserve] .rsv-aside-title {
  margin: 0 0 1.5rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--rsv-gold-soft);
}

[data-reserve] .rsv-learn {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rsv-rule);
}

[data-reserve] .rsv-learn li {
  position: relative;
  padding: 1.05rem 0 1.05rem 1.5rem;
  border-bottom: 1px solid var(--rsv-rule);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--rsv-ink);
}

/* A hairline mark rather than a filled tick — quieter at this size. Anchored
   near the top of the row now that each row carries a heading above its
   description, so it reads next to the heading rather than mid-paragraph. */
[data-reserve] .rsv-learn li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.7rem;
  height: 1px;
  background: var(--rsv-gold);
}

/* Item heading: the same bold-over-dim relationship already used by
   .rsv-fact strong above, scaled to this row's larger 0.92rem type instead
   of introducing a new pattern. Uppercase per spec; the description below
   keeps its existing size, weight and colour untouched. */
[data-reserve] .rsv-learn li strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

/* --- The form panel --------------------------------------------------- */

/* A panel that reads as a surface, not a card: one hairline, no shadow
   competing with the button. */
[data-reserve] .rsv-panel {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--rsv-rule);
  border-radius: var(--radius-edit, 4px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212, 175, 55, 0.045) 0%, transparent 58%),
    linear-gradient(180deg, var(--rsv-raise) 0%, #060607 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}

/* THE PANEL HEADER IS THE MODAL'S HEADER.

   The form itself was already shared between the two entry points — same
   partial, same fields, same picker, same validation. What still looked
   different was the furniture around it: this title was Cormorant serif
   while the modal's was Montserrat in the gold gradient, so the same form
   read as two designs. These are the modal's values, to the number
   (assets/css/reserve-modal.css, .rsv-modal-title and .rsv-modal-eyebrow).

   The words stay page-appropriate. The modal says "Phoenix Comprehensive
   Project" because it is a detached overlay that has to name itself; a page
   under the site header does not, so it keeps "Reserve your slot". Same
   treatment, right words for each place. */
[data-reserve] .rsv-panel-eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.88);
}

[data-reserve] .rsv-panel-title {
  margin: 0;
  font-size: clamp(1.3rem, 3.1vw, 1.95rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  background: linear-gradient(104deg, #F7E7A8 0%, #D4AF37 42%, #F4D98B 72%, #C9A227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 1024px) {
  [data-reserve] .rsv-panel-title { font-size: 1.5rem; }
}

[data-reserve] .rsv-panel-note {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--rsv-ink-dim);
}

/* Breathing room between groups, which is most of what "improved hierarchy"
   means on a form this long. */
[data-reserve] .rsv-form { display: grid; gap: clamp(1.5rem, 3vh, 2rem); }
/* …and `display: grid` is exactly what stopped the form from disappearing on
   success. forms.js sets form.hidden = true and shows the success panel, but
   Tailwind's preflight hides [hidden] through
   `[hidden]:where(:not([hidden=until-found]))`, and :where() carries NO
   specificity — so the line above, at (0,2,0), beat it and the whole form
   stayed on screen underneath the confirmation. Restores what the attribute
   was always meant to do, here and in the reservation modal, which share
   this stylesheet. */
[data-reserve] .rsv-form[hidden] { display: none; }
[data-reserve] .rsv-row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { [data-reserve] .rsv-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The format select now sits alone on its row — the session dropdown beside
   it became the calendar below. Half a row of nothing is not a layout, so
   the row collapses to one column and the control keeps a sensible measure
   rather than stretching the full width of the panel. */
[data-reserve] .rsv-row-format { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  [data-reserve] .rsv-row-format { grid-template-columns: minmax(0, 24rem); }
}

/* ==========================================================================
   THE SCHEDULE PICKER
   --------------------------------------------------------------------------
   A seven-day strip and three times, in place of a dropdown with eleven
   options in it. Built by assets/js/reserve-schedule.js; everything here is
   the look of it.

   The <select> it writes into is still in the form, still required, still
   the thing that is submitted — it is only taken off the screen. NOT with
   display: none: a hidden control is exempt from constraint validation, and
   forms.js validates this field with checkValidity(). Clipped instead, which
   leaves it validatable, focusable and, crucially, still invalid when empty.
   ========================================================================== */
[data-reserve] .rsv-session-native {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  /* Not display:none and not visibility:hidden — see above. */
}

[data-reserve] .rsv-schedule {
  border: 1px solid var(--rsv-rule);
  border-radius: 14px;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(212, 175, 55, 0.05) 0%, transparent 60%),
    rgba(255, 255, 255, 0.015);
}

[data-reserve] .rsv-sched-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-bottom: 0.9rem;
}
[data-reserve] .rsv-sched-head-times {
  margin-top: clamp(1.1rem, 2.4vw, 1.5rem);
  padding-top: clamp(1rem, 2.2vw, 1.35rem);
  border-top: 1px solid var(--rsv-rule);
}
[data-reserve] .rsv-sched-title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rsv-gold-soft);
}
[data-reserve] .rsv-sched-note {
  margin: 0;
  font-size: 0.76rem;
  color: var(--rsv-ink-dim);
}

/* Seven columns on anything wide enough, and a scrollable strip below that.
   auto-fit would let a short week stretch into odd wide cards; the count is
   fixed because the window is fixed. */
[data-reserve] .rsv-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
}
@media (max-width: 479px) {
  [data-reserve] .rsv-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

[data-reserve] .rsv-day {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.25rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color 240ms ease, background-color 240ms ease,
              transform 320ms var(--ease-spring), box-shadow 240ms ease;
}
[data-reserve] .rsv-day-dow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
[data-reserve] .rsv-day-num { font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
[data-reserve] .rsv-day-mon {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

[data-reserve] .rsv-day:hover:not(:disabled) {
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.07);
  transform: translateY(-1px);
}
[data-reserve] .rsv-day:focus-visible {
  outline: 2px solid var(--rsv-gold);
  outline-offset: 2px;
}
[data-reserve] .rsv-day:active:not(:disabled) { transform: translateY(0); }

/* Chosen. aria-pressed is the state; the look follows it, so the two can
   never disagree. */
[data-reserve] .rsv-day[aria-pressed="true"] {
  border-color: var(--rsv-gold);
  background: rgba(212, 175, 55, 0.14);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 10px 26px -14px rgba(212, 175, 55, 0.6);
}
[data-reserve] .rsv-day[aria-pressed="true"] .rsv-day-dow,
[data-reserve] .rsv-day[aria-pressed="true"] .rsv-day-mon { color: var(--rsv-gold-soft); }

/* Not bookable: a Friday, a weekend, or a time already gone. Still shown —
   a visitor can see the shape of the week — but plainly out of reach. */
[data-reserve] .rsv-day:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.05);
  background: transparent;
}

/* Today gets a mark, whether or not it can be booked. */
[data-reserve] .rsv-day[data-today] .rsv-day-num::after {
  content: "";
  display: block;
  width: 3px; height: 3px;
  margin: 0.18rem auto 0;
  border-radius: 50%;
  background: var(--rsv-gold);
}

/* ---- the times --------------------------------------------------------- */
[data-reserve] .rsv-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
[data-reserve] .rsv-time {
  flex: 1 1 8rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 240ms ease, background-color 240ms ease,
              transform 320ms var(--ease-spring), box-shadow 240ms ease;
}
[data-reserve] .rsv-time:hover:not(:disabled) {
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.07);
  transform: translateY(-1px);
}
[data-reserve] .rsv-time:focus-visible { outline: 2px solid var(--rsv-gold); outline-offset: 2px; }
[data-reserve] .rsv-time:active:not(:disabled) { transform: translateY(0); }
[data-reserve] .rsv-time[aria-pressed="true"] {
  border-color: var(--rsv-gold);
  background: rgba(212, 175, 55, 0.14);
  color: var(--rsv-gold-soft);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 10px 26px -14px rgba(212, 175, 55, 0.6);
}
[data-reserve] .rsv-time:disabled { opacity: 0.3; cursor: not-allowed; }

/* Stands in for the schedule until a format has been chosen. */
[data-reserve] .rsv-sched-await {
  margin: 0;
  padding: clamp(0.9rem, 2.2vw, 1.25rem) clamp(1rem, 2.4vw, 1.5rem);
  border: 1px dashed rgba(212, 175, 55, 0.22);
  border-radius: 14px;
  font-size: 0.85rem;
  color: var(--rsv-ink-dim);
}
[data-reserve] .rsv-sched-await[hidden],
[data-reserve] .rsv-schedule[hidden] { display: none; }

/* [hidden] HAS TO BE SAID OUT LOUD HERE.

   Tailwind's preflight hides it with `[hidden]:where(:not([hidden=until-found]))`
   and :where() carries no specificity at all, so the display: flex on these
   two beat it and the "Preferred time" heading sat on screen with an empty
   box under it before any date had been chosen. Same trap as the one the
   form itself fell into further up this file. */
[data-reserve] .rsv-sched-head[hidden],
[data-reserve] .rsv-times[hidden],
[data-reserve] .rsv-sched-picked[hidden] { display: none; }

/* ---- what has been chosen ---------------------------------------------- */
[data-reserve] .rsv-sched-picked {
  margin: clamp(0.9rem, 2vw, 1.25rem) 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rsv-rule);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
}
[data-reserve] .rsv-sched-picked strong { color: var(--rsv-gold-soft); font-weight: 700; }

/* Nothing available in the window at all — it can happen, a seven-day run
   starting on a Friday has only three bookable days, and a bank holiday
   closure would be configured the same way. Never an empty box with no
   explanation. */
[data-reserve] .rsv-sched-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--rsv-ink-dim);
}

@media (prefers-reduced-motion: reduce) {
  [data-reserve] .rsv-day,
  [data-reserve] .rsv-time { transition: border-color 240ms ease, background-color 240ms ease; }
  [data-reserve] .rsv-day:hover:not(:disabled),
  [data-reserve] .rsv-time:hover:not(:disabled) { transform: none; }
}

/* A hairline between logical groups, so the form reads in stages. */
[data-reserve] .rsv-group {
  padding-top: clamp(1.5rem, 3vh, 2rem);
  border-top: 1px solid rgba(212, 175, 55, 0.10);
}

.page-reserve .field-label {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
}

.page-reserve .field {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-edit, 4px);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.018);
  transition: border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
}

.page-reserve .field:hover { border-color: rgba(212, 175, 55, 0.32); }

/* Accessible focus: a visible 2px gold ring that meets contrast against the
   near-black ground, on top of the border change — never outline:none alone. */
.page-reserve .field:focus,
.page-reserve .field:focus-visible {
  outline: 2px solid var(--rsv-gold);
  outline-offset: 2px;
  border-color: var(--rsv-gold);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.page-reserve .check:focus-visible {
  outline: 2px solid var(--rsv-gold);
  outline-offset: 3px;
}

[data-reserve] .rsv-consent {
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  border-top: 1px solid rgba(212, 175, 55, 0.10);
}

[data-reserve] .rsv-fineprint {
  margin: 1rem 0 0;
  font-size: 0.72rem;
  line-height: 1.7;
  text-align: center;
  color: rgba(255, 255, 255, 0.58);
}

/* ==========================================================================
   The CTA
   Thin gold perimeter, internal illumination that follows the pointer, a
   directional arrow, and a restrained magnetic pull applied by reserve.js.
   Dark and quiet at rest — it brightens ONLY on hover, focus or press.
   No idle glow, no pulse.
   ========================================================================== */

[data-reserve] .rsv-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
  padding: 1.15rem 2rem;
  border: 0;
  border-radius: var(--radius-edit, 4px);
  background: linear-gradient(180deg, #0d0d0e 0%, #070708 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transition:
    transform 420ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    color 300ms ease;
}

/* The perimeter. One hairline at rest, brighter on engagement. */
[data-reserve] .rsv-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.42);
  transition: box-shadow 340ms ease;
}

/* The internal illumination. Opacity 0 at rest — this is the whole reason
   the button does not glow until it is touched. */
[data-reserve] .rsv-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    12rem circle at var(--cx, 50%) var(--cy, 50%),
    rgba(212, 175, 55, 0.42) 0%,
    rgba(212, 175, 55, 0.14) 38%,
    transparent 72%
  );
  transition: opacity 380ms ease;
}

[data-reserve] .rsv-cta > * { position: relative; z-index: 1; }

[data-reserve] .rsv-cta:hover,
[data-reserve] .rsv-cta:focus-visible {
  color: #fff;
}

[data-reserve] .rsv-cta:hover::after,
[data-reserve] .rsv-cta:focus-visible::after { opacity: 1; }

[data-reserve] .rsv-cta:hover::before,
[data-reserve] .rsv-cta:focus-visible::before {
  box-shadow: inset 0 0 0 1px rgba(241, 210, 122, 0.95);
}

/* Accessible focus ring, in addition to the perimeter brightening. */
[data-reserve] .rsv-cta:focus-visible {
  outline: 2px solid var(--rsv-gold);
  outline-offset: 3px;
}

[data-reserve] .rsv-cta:active { transform: scale(0.988); }

[data-reserve] .rsv-cta[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none !important;
}

[data-reserve] .rsv-cta[disabled]::after { opacity: 0; }

/* The arrow moves a little, in the direction of the decision. */
[data-reserve] .rsv-cta-arrow {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--rsv-gold);
  transition:
    transform 420ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    color 300ms ease;
}

[data-reserve] .rsv-cta:hover .rsv-cta-arrow,
[data-reserve] .rsv-cta:focus-visible .rsv-cta-arrow {
  transform: translateX(4px);
  color: #F1D27A;
}

/* --- Success panel ---------------------------------------------------- */

[data-reserve] .rsv-success { text-align: center; padding: clamp(1.5rem, 4vh, 2.5rem) 0; }

[data-reserve] .rsv-success-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  border: 1px solid var(--rsv-gold-soft);
  border-radius: 50%;
  color: var(--rsv-gold);
}

[data-reserve] .rsv-success-mark svg { width: 1.25rem; height: 1.25rem; }

[data-reserve] .rsv-success-title {
  margin: 1.75rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
}

[data-reserve] .rsv-success-body {
  margin: 1rem auto 0;
  max-width: 26rem;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--rsv-ink-dim);
}

/* --- Continuation cue: bridges the form into "what happens next" -------
   Reuses .rsv-aside-title and .rsv-panel-note verbatim for the two lines of
   text; only the wrapper (centring + a hairline, same idiom as every other
   divider on this page) and the arrow's motion are new. */
[data-reserve] .rsv-continue {
  text-align: center;
  padding-top: clamp(1.25rem, 3.5vh, 2rem);
  border-top: 1px solid var(--rsv-rule);
}
[data-reserve] .rsv-continue .rsv-aside-title { margin-bottom: 0.5rem; }

[data-reserve] .rsv-continue-arrow {
  display: inline-block;
  color: var(--rsv-gold);
  animation: rsv-continue-float 2.4s ease-in-out infinite;
}
@keyframes rsv-continue-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* --- What happens next: hairline rows -------------------------------- */

[data-reserve] .rsv-next { padding-top: clamp(1rem, 3vh, 1.5rem); padding-bottom: var(--rsv-air); }

[data-reserve] .rsv-steps {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rsv-rule);
}

[data-reserve] .rsv-step {
  display: grid;
  gap: 0.4rem clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 4vh, 2.25rem);
  border-bottom: 1px solid var(--rsv-rule);
}

@media (min-width: 768px) {
  [data-reserve] .rsv-step { grid-template-columns: 4rem 14rem minmax(0, 1fr); align-items: baseline; }
}

[data-reserve] .rsv-step-num {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--rsv-gold-soft);
}

[data-reserve] .rsv-step-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

[data-reserve] .rsv-step-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--rsv-ink-dim);
}

/* --- Motion policy --------------------------------------------------- */

@media (hover: none) {
  [data-reserve] .rsv-cta::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reserve] .rsv-cta,
  [data-reserve] .rsv-cta-arrow {
    transition: none;
    transform: none !important;
  }
  [data-reserve] .rsv-particles { display: none; }
  [data-reserve] .rsv-aside { position: static; }
  [data-reserve] .rsv-continue-arrow { animation: none; }
}

/* ==========================================================================
   Submission states — added by the real-submission work (forms.js)
   --------------------------------------------------------------------------
   Reuses the success panel's type and mark so the three outcomes read as one
   family. Only transform and opacity animate.
   ========================================================================== */

/* Honeypot: off-screen, not display:none, so a naive bot still sees a field. */
[data-reserve] .rsv-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Loading: the arrow yields to a small ring while the request is in flight. */
[data-reserve] .rsv-cta-spinner {
  display: none;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(5, 5, 5, 0.25);
  border-top-color: rgba(5, 5, 5, 0.9);
  animation: rsv-spin 800ms linear infinite;
}
[data-reserve] .rsv-cta[aria-busy="true"] .rsv-cta-spinner { display: inline-block; }
[data-reserve] .rsv-cta[aria-busy="true"] .rsv-cta-arrow   { display: none; }
[data-reserve] .rsv-cta[aria-busy="true"] { cursor: progress; opacity: 0.85; }
@keyframes rsv-spin { to { transform: rotate(360deg); } }

/* Error and pending share the success layout; only the mark's colour differs. */
[data-reserve] .rsv-error-mark { border-color: rgba(232, 106, 36, 0.6); color: #F0A277; }
[data-reserve] .rsv-error-detail {
  margin: 0.9rem auto 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.38);
}
[data-reserve] .rsv-error-detail:empty { display: none; }
[data-reserve] .rsv-link { color: var(--rsv-gold); text-decoration: underline; text-underline-offset: 0.15em; }
[data-reserve] .rsv-link:hover, [data-reserve] .rsv-link:focus-visible { color: var(--pcp-gold-light); }

/* The fine print becomes the not-connected notice; a touch more visible. */
[data-reserve] .rsv-fineprint[data-not-connected] { color: var(--rsv-gold-soft); }

@media (prefers-reduced-motion: reduce) {
  [data-reserve] .rsv-cta-spinner { animation: rsv-pulse 1.2s ease-in-out infinite; }
  @keyframes rsv-pulse { 50% { opacity: 0.35; } }
}

/* ==========================================================================
   2026 form redesign — status strip, section hierarchy, referral, window
   --------------------------------------------------------------------------
   Additive to everything above: the panel surface, the CTA, the submission
   states and the motion policy are all unchanged. This block only styles the
   new structure inside the panel. Same restraint as the rest of the page —
   gold is used for information and accents, never as a loud fill, and the
   only glow at rest belongs to the countdown badge (a real-time status, not
   a decoration) and the CTA on touch (unchanged from above).
   ========================================================================== */

/* ---- status strip: quiet, informational, sits under the subheadline ---- */
[data-reserve] .rsv-status-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--rsv-ink-dim);
}
[data-reserve] .rsv-status-label {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rsv-gold-soft);
}
[data-reserve] .rsv-status-sep { color: rgba(212, 175, 55, 0.35); }
[data-reserve] .rsv-status-detail { color: var(--rsv-ink-dim); }

/* ---- section hierarchy: a small tracked label above each field group ---- */
[data-reserve] .rsv-section-title {
  margin: 0 0 1.1rem;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--rsv-gold-soft);
}
[data-reserve] .rsv-section { display: grid; gap: 1.25rem; }
/* The first section sits right under the panel header with no divider — the
   header block already separates it. Later sections reuse .rsv-group for the
   hairline + top padding that was already part of this page's language. */
[data-reserve] .rsv-section.rsv-group { gap: 1.25rem; }

[data-reserve] fieldset { border: 0; padding: 0; margin: 0; }
[data-reserve] fieldset legend { padding: 0; width: 100%; }

/* ---- consent supporting line ---- */
[data-reserve] .rsv-consent-note {
  margin: 0.75rem 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
}

/* ---- referral ---- */
[data-reserve] .rsv-referral-help {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--rsv-ink-dim);
}
[data-reserve] .field.is-locked {
  color: var(--rsv-gold-soft);
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.04);
  cursor: default;
}
[data-reserve] .rsv-referral-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  font-size: 0.76rem;
  font-weight: 500;
}
[data-reserve] .rsv-referral-status[data-state="pending"] { color: var(--rsv-gold-soft); }
/* Dormant until assets/js/referral.js has a real backend to verify against —
   kept in the same gold family as the rest of the page, never green, so a
   future "verified" moment still reads as this design system. */
[data-reserve] .rsv-referral-status[data-state="verified"] {
  color: var(--rsv-gold);
  font-weight: 600;
}

/* ---- CTA area: countdown badge, button, fineprint, evenly spaced ---- */
[data-reserve] .rsv-cta-area {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
}

/* The one legitimate, shared reservation countdown (see
   assets/js/reservation-window.js) — not a second, page-invented timer. */
[data-reserve] .rsv-window {
  display: flex;
  justify-content: center;
  transition: opacity 320ms ease;
}
[data-reserve] .rsv-window-glass {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.22);
  transition: border-color 900ms ease, box-shadow 900ms ease;
}
[data-reserve] .rsv-window-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rsv-ink-dim);
  transition: color 600ms ease;
}
[data-reserve] .rsv-window-sep { font-size: 0.65rem; color: rgba(212, 175, 55, 0.55); }
[data-reserve] .rsv-window-time {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--rsv-gold-soft);
  font-variant-numeric: tabular-nums;
}
[data-reserve] .rsv-window-time[hidden] { display: none; }
[data-reserve] .rsv-window-colon { display: inline-block; animation: rsv-window-colon 2s ease-in-out infinite; }
@keyframes rsv-window-colon { 50% { opacity: 0.35; } }

/* Under 02:00 — a slightly stronger, still-quiet glow. No red, no flashing. */
[data-reserve] .rsv-window.is-urgent .rsv-window-glass {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.1), 0 0 20px -6px rgba(212, 175, 55, 0.35);
}
[data-reserve] .rsv-window.is-urgent .rsv-window-time { color: var(--rsv-gold); }

/* The end: a brief dip while the copy changes, then a calmer resting state. */
[data-reserve] .rsv-window.is-ending { opacity: 0.35; }
[data-reserve] .rsv-window.is-ended .rsv-window-glass { border-color: rgba(212, 175, 55, 0.14); }
[data-reserve] .rsv-window.is-ended .rsv-window-label { color: rgba(255, 255, 255, 0.6); }
[data-reserve] .rsv-window.is-ended .rsv-window-sep { display: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reserve] .rsv-window-colon { animation: none; }
}

/* ---- mobile: comfortable stacking, no overflow, tap targets held ---- */
@media (max-width: 639px) {
  [data-reserve] .rsv-status-strip { padding: 0.5rem 0.85rem; font-size: 0.68rem; }
  [data-reserve] .rsv-window-glass { padding: 0.5rem 0.9rem; gap: 0.55rem; }
  [data-reserve] .rsv-window-time { font-size: 1.05rem; }
}

/* ==========================================================================
   RESERVE YOUR SLOT — the hero film as a fixed page background
   --------------------------------------------------------------------------
   Matches the Member Login page. position: fixed, so the footage holds still
   while the page scrolls over it. z-index -2 puts it behind all content and
   behind .pcp-cinematic-bg (-1), so the shared ambient layer still reads on
   top of it. A negative z-index paints above the canvas, which is why body's
   own near-black does not hide it.

   object-fit: cover fills the viewport at any size without distorting the
   frame — the video is 16:9 and the viewport rarely is.

   The veil is the page's readability. It is deepest at the top and bottom
   edges and steady through the middle band, where the statement and the form
   sit; the form panel keeps its own surface on top of this.

   This file is loaded by reserve.html and by nothing else, so these rules
   cannot reach another page.
   ========================================================================== */
/* .page-reserve is required, not decorative: site.css sets
   `.grain > *:not(.pcp-cinematic-bg) { position: relative; z-index: 1 }` at
   the same specificity a bare .rsv-video-bg cannot beat, which pinned this
   layer into the flow and made it scroll with the page. */
.page-reserve .rsv-video-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.page-reserve .rsv-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-reserve .rsv-video-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(3, 10, 20, 0.94) 0%,
      rgba(3, 10, 20, 0.80) 18%,
      rgba(3, 10, 20, 0.78) 82%,
      rgba(3, 10, 20, 0.94) 100%);
}

/* The bar stays opaque at the colour it already uses, so the film cannot play
   through the navigation. Only the alpha changes — the hue does not. The
   .page-reserve prefix is required: the rule near the top of this file sets
   the same property at that specificity, and this one wins on order. */
.page-reserve .site-header,
.page-reserve .site-header.is-scrolled { background-color: rgb(4, 4, 4); }

/* ==========================================================================
   A thicker frame on the Reserve panel's boxes
   --------------------------------------------------------------------------
   Requested: slightly heavier border frames, everything else as it was. Only
   border-width changes here — each box keeps its own colour, its own radius
   and its own hover, focus and state rules, which are all declared above and
   set border-COLOR, never width.

   Nothing moves. Tailwind's preflight puts box-sizing: border-box on
   everything, so the extra pixel is taken from the inside of the box: the
   outer width and height, the grid, the gaps and the panel's own size are
   identical to before.

   FRAMES ONLY. The rules that read as dividers rather than boxes are left at
   1px on purpose — .rsv-learn's top line, the .rsv-section group separators,
   the .rsv-consent rule and the list item underlines. Those are single edges
   setting off a block, not frames around one, and thickening them would read
   as a heavier line through the form rather than as sturdier boxes.

   Scoped to this page. .field and .check are shared with the Login page, so
   these are written against [data-reserve] / .page-reserve and that page is
   untouched. */
[data-reserve] .rsv-status-strip,
[data-reserve] .rsv-window-glass,
.page-reserve .check {
  border-width: 2px;
}

/* The form box keeps its heavier frame. THE FIELDS DO NOT.

   Every input and select was taken to 3px when a heavier frame was asked
   for, and at a field's size that reads as a doubled outline rather than a
   border — ten of them stacked turned the panel into a grid of heavy boxes.
   They are back to one standard hairline, which is what the shared .field
   rule in site.css gives them; nothing is restated here. Sizes, radii,
   colours and the gold focus ring are all untouched and still come from the
   rules above.

   .rsv-panel is left alone: it is the frame AROUND the form, not a field in
   it, and in the modal it carries no border at all. */
/* One hairline, like the modal's dialog edge and like the fields inside it.
   3px was the last of the heavy outlines; next to 1px fields it read as a
   box drawn around a box. */
[data-reserve] .rsv-panel {
  border-width: 1px;
}

/* ...and the extra pixel given back out of the padding, so the boxes are the
   size they were.

   box-sizing: border-box holds a box to a width and height it has been GIVEN.
   Only .check has been given one (1.15rem square, and it measures 18x18 both
   before and after). Every other box here is sized by its content, so the
   second pixel of border simply made it 2px taller: each field grew 55px to
   57px, and the panel, which is as tall as the ten fields inside it, grew by
   18px. Small, but it is a size change, and the brief was that the sizes stay.

   The same number of pixels off each side of the padding cancels it exactly
   — two for the panel and the fields at 3px, one for the rest at 2px. The inner
   spacing is a pixel tighter, which is invisible at this scale; the outer
   dimensions, the rhythm of the form and the panel's own height are the ones
   that were already there. The mobile padding overrides further up are
   adjusted the same way, for the same reason. */
[data-reserve] .rsv-panel { padding: calc(clamp(1.5rem, 4vw, 2.75rem) - 2px); }
[data-reserve] .rsv-status-strip { padding: calc(0.55rem - 1px) calc(1rem - 1px); }
[data-reserve] .rsv-window-glass { padding: calc(0.55rem - 1px) calc(1.1rem - 1px); }
/* The padding that was given back to cancel the thicker border goes with it:
   at 1px there is nothing to compensate for, and keeping the subtraction
   would make every field 4px shorter than it should be. */
.page-reserve .field { padding: 1rem 1.1rem; }

@media (max-width: 639px) {
  [data-reserve] .rsv-status-strip { padding: calc(0.5rem - 1px) calc(0.85rem - 1px); }
  [data-reserve] .rsv-window-glass { padding: calc(0.5rem - 1px) calc(0.9rem - 1px); }
}

/* ==========================================================================
   Pill corners, across the page
   --------------------------------------------------------------------------
   Everything framed on this page is brought to the same very rounded shape as
   the Reserve Your Slot button. Two of them were already there — the status
   strip and the countdown pill are both 999px — so this is the rest.

   NOT done by redefining --radius-edit. That token is declared on :root in
   site.css and the Founder page reads it too; changing it there would reach
   another page, and this change is meant for this one. Each rule is named
   instead, and every one is scoped to [data-reserve] / .page-reserve.

   Sizes, colours, borders, text and layout are all untouched: a radius
   changes the corner and nothing else.

   999px IS NOT RIGHT FOR EVERY BOX. A radius is clamped to half the shorter
   side, so on the 621x1613 panel it would resolve to 310px and turn the card
   into a lozenge. The controls, which are short, become true pills; the panel
   gets a large radius that still reads as a rectangle.
   ========================================================================== */
[data-reserve] .rsv-panel {
  border-radius: clamp(1.75rem, 3.2vw, 2.5rem);
}

.page-reserve .field,
[data-reserve] .rsv-cta {
  border-radius: 999px;
}

/* A select's native arrow and the text both sit nearer the edge once the ends
   are round, so the horizontal padding opens up to clear the curve. The
   vertical padding — and so the height — is unchanged. */
.page-reserve .field {
  padding-left: calc(1.1rem + 0.45rem);
  padding-right: calc(1.1rem + 0.45rem);
}

/* The checkbox stops short of a circle on purpose. At 18px square, 999px
   resolves to 9px — a perfect circle, which is the shape a radio button uses
   for "choose one of these". These are independent checkboxes, and the shape
   is part of how that is understood. Strongly rounded, still a square. */
[data-reserve] .check,
.page-reserve .check {
  border-radius: 7px;
}

/* ==========================================================================
   A light travelling round the button's frame
   --------------------------------------------------------------------------
   A conic gradient, rotated, showing through a one-pixel ring cut from the
   button's own rounded shape. The ring is made with two masks: the whole box
   minus its content box, which leaves exactly the border band — and because
   both inherit border-radius, the band follows the pill around its ends.

   Only `rotate` is animated, so this stays on the compositor and costs no
   layout or paint. Nothing about the button's text, size, padding, colours,
   hover or focus changes; this layer is inert and sits above them.

   The sweep is angular, not arc-length, so the light runs a little faster
   along the long edges than around the ends. On a pill this reads as a
   natural ease rather than as an error, and it is the only way to do this in
   CSS without hard-coding the button's dimensions into an SVG path.
   ========================================================================== */
[data-reserve] .rsv-cta-trace {
  position: absolute;
  inset: 0;
  z-index: 3;                /* over the perimeter hairline at z-2 */
  border-radius: inherit;
  overflow: hidden;          /* contains the oversized gradient */
  pointer-events: none;
  padding: 1px;              /* the thickness of the light */

  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
}

[data-reserve] .rsv-cta-trace::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* Square and wider than the button, so the gradient is a true circle and
     its sweep reaches every corner. The overflow above crops the rest. */
  width: 170%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg,
    transparent 0%,
    transparent 76%,
    rgba(241, 210, 122, 0.55) 85%,
    #F6E3A8 90%,
    rgba(241, 210, 122, 0.55) 95%,
    transparent 100%);
  animation: rsv-trace 5.5s linear infinite;
}

@keyframes rsv-trace {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reserve] .rsv-cta-trace { display: none; }
}