/* ============================================================
   Plantation Bay — Demographic 2026 promo page
   DS treatment (2026-08-20): Colonial Plantation Luxury.
   Tokens come from the site-wide plantation-ds.css (linked by
   includes/header_v3/header.php); the fallbacks here mirror the
   token values. Everything is scoped under .promoDS so nothing
   leaks into the production header / footer chrome.
   jQuery Mobile paints a 1px text-shadow across page text — reset
   it inside the promo content.
   ============================================================ */

.promoDS,
.promoDS * {
  box-sizing: border-box;
  text-shadow: none;
}

.promoDS {
  font-family: var(--pb-font-sans, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  color: var(--pb-text, #2A2420);
  line-height: var(--pb-lh-normal, 1.7);
  -webkit-text-size-adjust: 100%;
  /* Fluid body-copy scale (Leo 2026-08-22: all font sizes responsive).
     ~15px on a 390px phone, ~16px at the 900px rail, capped at 17px on
     wide screens. Display text already scales via its own clamp()s. */
  font-size: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);
}

/* global.css pins table/.ui-table, li, and .ui-content p to a FIXED
   14px at every viewport - the one non-responsive text on this page.
   Inside the promo they follow the fluid base above instead (same
   specificity as global's `.ui-content p`; this sheet loads later).
   Elements with explicit sizes (eyebrows, fine print, folio, calls,
   headings) keep their own declarations. */
.promoDS p,
.promoDS li,
.promoDS table,
.promoDS td {
  font-size: inherit;
}

/* ── AaMgScript (brush script) — brand-voice moments only ─────── */
@font-face {
  font-family: 'AaMgScript-Regular';
  src: url('../AaMgScript-Regular.woff2') format('woff2'),
       url('../AaMgScript-Regular.woff') format('woff'),
       url('../AaMgScript-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Shared section rail (centered content column) ───────────── */
.promoDS .hero,
.promoDS section {
  max-width: 900px;
  margin: 0 auto;
  /* Leo 2026-08-22: more air between sections - the vertical rhythm
     grew from clamp(1.75rem, 4vw, 2.75rem). */
  padding: clamp(2.5rem, 6vw, 4rem) var(--pb-gutter-mobile, 16px);
}

.promoDS section h2 {
  margin: 0 0 1.25rem;
  color: var(--pb-deep, #1E3C38);
  font-weight: var(--pb-weight-light, 300);
  font-size: var(--pb-text-h2, clamp(1.35rem, 3.5vw, 2.2rem));
  letter-spacing: var(--pb-ls-heading, 0.09em);
  text-transform: uppercase;
  line-height: var(--pb-lh-tight, 1.2);
  text-align: center;
}
.promoDS section h2::after {
  content: '';
  display: block;
  width: var(--pb-rule-len-sm, 36px);
  height: var(--pb-hairline, 1px);
  background: var(--pb-brass, #B8882E);
  margin: 0.9rem auto 0;
}

/* ── Hero — eyebrow + display heading pattern ─────────────────── */
.promoDS .hero {
  text-align: center;
  padding-top: clamp(2rem, 5vw, 3.25rem);
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

.promoDS .hero .slash {
  margin: 0;
  color: var(--pb-deep, #1E3C38);
  font-weight: var(--pb-weight-light, 300);
  font-size: var(--pb-text-h1, clamp(1.6rem, 5vw, 2.5rem));
  letter-spacing: var(--pb-ls-heading, 0.09em);
  line-height: var(--pb-lh-snug, 1.4);
  text-transform: uppercase;
}

.promoDS .hero h1 {
  margin: 0.4rem 0 0;
  color: var(--pb-crimson, #C0392B);
  font-weight: var(--pb-weight-light, 300);
  font-size: var(--pb-text-hero, clamp(2rem, 5vw, 3.8rem));
  letter-spacing: var(--pb-ls-display, 0.14em);
  line-height: var(--pb-lh-tight, 1.2);
  text-transform: uppercase;
}

/* Rate medallion — two rows now, per the flyer: the regular rate
   struck through in crimson above the promo rate staged as the
   hero's jewel (crimson amount, brass small-caps "per night",
   flanking brass hairlines on the promo row only). */
.promoDS .hero .rate {
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.55em;
  letter-spacing: var(--pb-ls-body, 0.01em);
}

.promoDS .hero .rate::before,
.promoDS .hero .rate::after {
  content: "";
  align-self: center;
  width: clamp(36px, 8vw, 72px);
  height: 1px;
  background: var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
}

.promoDS .hero .rate-reg::before,
.promoDS .hero .rate-reg::after {
  content: none;
}

.promoDS .hero .rate-promo {
  margin-top: 0.7rem;
}

.promoDS .hero .rate .rate-label {
  color: var(--pb-deep, #1E3C38);
  font-size: var(--pb-text-eyebrow, 0.68rem);
  font-weight: var(--pb-weight-bold, 700);
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  text-transform: uppercase;
  white-space: nowrap;
}

.promoDS .hero .rate-reg .rate-strike {
  color: var(--pb-muted, #6B6259);
  font-size: var(--pb-text-lead, clamp(1.15rem, 2vw, 1.4rem));
  font-weight: var(--pb-weight-light, 300);
  letter-spacing: var(--pb-ls-heading, 0.09em);
  text-decoration: line-through;
  text-decoration-color: var(--pb-crimson, #C0392B);
  white-space: nowrap;
}

.promoDS .hero .rate .rate-amount {
  color: var(--pb-crimson, #C0392B);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: var(--pb-weight-light, 300);
  letter-spacing: var(--pb-ls-heading, 0.09em);
  line-height: var(--pb-lh-tight, 1.2);
  white-space: nowrap;
}

/* The consumables rider under the promo rate: part of the offer, so
   its amount keeps the crimson rate voice at lead size, with the
   F&B/Spa split as muted fine print. No flanking hairlines - the
   promo row above stays the jewel. */
.promoDS .hero .rate-plus {
  margin-top: 0.35rem;
  color: var(--pb-deep, #1E3C38);
  font-size: var(--pb-text-lead, clamp(1.15rem, 2vw, 1.4rem));
  font-weight: var(--pb-weight-light, 300);
}

.promoDS .hero .rate-plus::before,
.promoDS .hero .rate-plus::after {
  content: none;
}

.promoDS .hero .rate-plus .plus-amount {
  color: var(--pb-crimson, #C0392B);
  letter-spacing: var(--pb-ls-heading, 0.09em);
  white-space: nowrap;
}

.promoDS .hero .rate-fine {
  margin: 0.4rem 0 0;
  color: var(--pb-muted, #6B6259);
  font-size: var(--pb-text-fine, 0.8rem);
  letter-spacing: var(--pb-ls-body, 0.01em);
}

/* Hero photograph — the lagoon-life proof under the offer. Framed in
   the DS card language (a full-bleed background would fight the
   crimson/deep hero type): rail-wide band, cover-cropped to keep the
   kayaking couple and the waterside rooms in frame. */
.promoDS .hero .hero-photo {
  display: block;
  width: 100%;
  height: clamp(240px, 42vw, 400px);
  object-fit: cover;
  object-position: 50% 42%;
  margin-top: clamp(1.4rem, 3.5vw, 2.25rem);
  border: var(--pb-hairline, 1px) solid var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  border-radius: var(--pb-radius-sm, 2px);
  box-shadow: var(--pb-shadow-card, 0 2px 24px rgba(30, 30, 20, 0.07), 0 1px 4px rgba(30, 30, 20, 0.04));
}

.promoDS .hero .rate .rate-per {
  color: var(--pb-brass, #B8882E);
  font-size: var(--pb-text-eyebrow, 0.68rem);
  font-weight: var(--pb-weight-bold, 700);
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Windows table — flyer gold/grey bands reinterpreted in the
      DS palette: warm alternating rows, brass date column, and
      the current window unmistakably marked in crimson. ──────── */
.promoDS table.windows {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 auto;
  border: var(--pb-hairline, 1px) solid var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  border-radius: var(--pb-radius-sm, 2px);
  overflow: hidden;
  box-shadow: var(--pb-shadow-card, 0 2px 24px rgba(30, 30, 20, 0.07), 0 1px 4px rgba(30, 30, 20, 0.04));
}

.promoDS table.windows tr {
  background: var(--pb-cream-card, #FFFEF9);
}

.promoDS table.windows tr.alt {
  background: var(--pb-ivory-dark, #EDE8DC);
}

.promoDS table.windows td {
  padding: var(--pb-space-md, 12px) var(--pb-space-base, 16px);
  min-height: var(--pb-tap-min, 44px);
  vertical-align: middle;
  border-bottom: var(--pb-hairline, 1px) solid var(--pb-border-gold, rgba(184, 150, 90, 0.18));
  color: var(--pb-text, #2A2420);
}

.promoDS table.windows tr:last-child td {
  border-bottom: none;
}

.promoDS table.windows td:first-child {
  white-space: nowrap;
  width: 38%;
  color: var(--pb-brass, #B8882E);
  font-weight: var(--pb-weight-bold, 700);
  letter-spacing: var(--pb-ls-body, 0.01em);
}

.promoDS table.windows td:last-child {
  color: var(--pb-deep, #1E3C38);
  font-weight: var(--pb-weight-medium, 500);
  letter-spacing: var(--pb-ls-body, 0.01em);
}

/* current window — crimson accent bar + light crimson wash */
.promoDS table.windows tr.now {
  background: var(--pb-group-2-light, #F5EAEC);
  box-shadow: inset var(--pb-accent-bar, 3px) 0 0 var(--pb-crimson, #C0392B);
}
.promoDS table.windows tr.now td {
  font-weight: var(--pb-weight-bold, 700);
  border-bottom-color: var(--pb-border-crimson, rgba(192, 57, 43, 0.18));
}
.promoDS table.windows tr.now td:first-child {
  color: var(--pb-crimson-dark, #96281B);
}
.promoDS table.windows tr.now td:last-child {
  color: var(--pb-crimson-dark, #96281B);
}

/* The tag is a link: for now it walks the guest down to the
   BOOK NOW! / inquiry section (#call) until online booking opens. */
html {
  scroll-behavior: smooth;
}

/* Anchor targets clear the fixed .pb-header (140px measured, plus
   breathing room) - also fixes the ?inq=ok#inquire banner landing. */
.promoDS section {
  scroll-margin-top: 170px;
}

.promoDS .nowtag {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  margin-left: var(--pb-space-sm, 8px);
  padding: 3px var(--pb-space-sm, 8px);
  background: var(--pb-crimson, #C0392B);
  color: var(--pb-on-dark, #FFFEF9);
  font-size: var(--pb-text-eyebrow, 0.68rem);
  font-weight: var(--pb-weight-bold, 700);
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  text-transform: uppercase;
  border-radius: var(--pb-radius-sm, 2px);
  vertical-align: middle;
  white-space: nowrap;
}

/* Pin the tag's ink across every link state - global.css/jqm paint
   :visited links blue otherwise (!important matches their weight). */
.promoDS a.nowtag,
.promoDS a.nowtag:link,
.promoDS a.nowtag:visited,
.promoDS a.nowtag:active {
  color: var(--pb-on-dark, #FFFEF9) !important;
}

.promoDS a.nowtag:hover,
.promoDS a.nowtag:focus {
  background: var(--pb-crimson-dark, #96281B);
  color: var(--pb-on-dark, #FFFEF9) !important;
  text-decoration: none;
}

.promoDS .closednote {
  margin-top: var(--pb-space-base, 16px);
  padding: var(--pb-space-md, 12px) var(--pb-space-base, 16px);
  background: var(--pb-ivory-dark, #EDE8DC);
  border-left: var(--pb-accent-bar, 3px) solid var(--pb-brass, #B8882E);
  color: var(--pb-text, #2A2420);
  text-align: center;
}

.promoDS .stayrule {
  margin-top: var(--pb-space-lg, 20px);
  text-align: center;
  font-weight: var(--pb-weight-semibold, 600);
  color: var(--pb-deep, #1E3C38);
  letter-spacing: var(--pb-ls-heading, 0.09em);
  text-transform: uppercase;
  font-size: var(--pb-text-fine, 0.8rem);
}

/* ── Mechanics — DS numbering: brass numerals, gold hairlines ─── */
.promoDS #mechanics ol {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  counter-reset: promo-item;
}
.promoDS #mechanics li {
  counter-increment: promo-item;
  position: relative;
  padding: 0.85rem 0 0.9rem 2.6rem;
  color: var(--pb-text, #2A2420);
  border-bottom: var(--pb-hairline, 1px) solid var(--pb-border-gold, rgba(184, 150, 90, 0.18));
  line-height: var(--pb-lh-normal, 1.7);
}
.promoDS #mechanics li:last-child {
  border-bottom: none;
}
.promoDS #mechanics li::before {
  content: counter(promo-item);
  position: absolute;
  left: 0;
  top: 0.95rem;
  color: var(--pb-brass, #B8882E);
  font-size: 0.8rem;
  font-weight: var(--pb-weight-bold, 700);
  letter-spacing: 0.05em;
}

.promoDS .fineprint {
  margin-top: var(--pb-space-lg, 20px);
  font-size: var(--pb-text-fine, 0.8rem);
  font-style: italic;
  color: var(--pb-muted, #6B6259);
  text-align: center;
}

/* ── Clear section panels: BOOK ONLINE / BOOK NOW! / SEND AN INQUIRY.
      Leo (2026-08-22): the three action sections ran together on the
      shared page ground - give each its own bounded panel (the windows
      table's card language: gold hairline, small radius, card shadow)
      with breathing room between, so the boundaries are unmistakable.
      The centering margin:0 auto from the shared section rule keeps
      the left/right auto values - only the vertical gaps are added. */
.promoDS #book,
.promoDS #call,
.promoDS #inquire {
  background: var(--pb-cream-card, #FFFEF9);
  border: var(--pb-hairline, 1px) solid var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  border-radius: var(--pb-radius-sm, 2px);
  box-shadow: var(--pb-shadow-card, 0 2px 24px rgba(30, 30, 20, 0.07), 0 1px 4px rgba(30, 30, 20, 0.04));
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}

/* The phone-call moment is the warm middle band: muted ivory against
   the two cream form panels around it, so the three read 1-2-3. */
.promoDS #call {
  background: var(--pb-ivory-dark, #EDE8DC);
}

/* ── Book online notes ───────────────────────────────────────── */
.promoDS #book .soon {
  text-align: center;
  padding: var(--pb-space-base, 16px);
  background: var(--pb-cream-card, #FFFEF9);
  border: var(--pb-hairline, 1px) solid var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  border-radius: var(--pb-radius-sm, 2px);
  color: var(--pb-deep, #1E3C38);
}

.promoDS .booknote,
.promoDS .rangeinfo,
.promoDS .totalline {
  max-width: 640px;
  margin: 0 auto var(--pb-space-base, 16px);
  color: var(--pb-muted, #6B6259);
}
.promoDS .rangeinfo,
.promoDS .totalline {
  font-weight: var(--pb-weight-semibold, 600);
  color: var(--pb-deep, #1E3C38);
  text-align: center;
}

/* ORM search-widget calendar, mounted as the stay-date picker (stage 2).
   The widget renders in light DOM, so these rules reach inside it. Scoped
   under #bkWidget ONLY so no other page's widget mount is affected. The
   Guests-and-Rooms segment and the button relabel are handled in
   promoBook.js; here we just seat the bar in the form and keep its popover
   above sibling fields with no page-level horizontal scroll. */
.promoDS #book #bkWidget {
  max-width: 640px;
  margin: 0 auto var(--pb-space-base, 16px);
}
.promoDS #book #bkWidget[hidden] { display: none; }

/* Phone viewport: match the ORM app's mobile display (ref-booknow-mobile).
   The old GUESTS AND ROOMS re-seat rule (nth-child(3) order fix) went with
   widget v1.0.21 (2026-10-07): the bar merged CHECK-IN / CHECK-OUT into one
   SELECT DATES capsule and now seats all three segments full-width on
   phones itself. */
@media (max-width: 630px) {
  /* Full-width widget elements on phones. The widget's own <=630px branch
     makes its bar a width:100% grid, but the promo mount centers #bkWidget
     with margin:0 auto - and a flex item (the mount lives in a flex-column
     fieldset) with auto side-margins does NOT stretch: it shrinks to the
     grid's intrinsic width and the auto margins center it, leaving the whole
     bar inset with visible side space. Force the mount to fill the column so
     SELECT DATES, GUESTS AND ROOMS, and CHECK AVAILABILITY all reach the
     column edges. Scoped to the promo mount so no other page's widget is
     touched. */
  .promoDS #book #bkWidget {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Out-of-window day cells (calendar range guard). promoBook.js tags every
   calendar day outside the selected group's stay range with data-pbdisabled;
   here we mirror the widget's OWN native disabled-day look (faded ivory text,
   default cursor) so a guest cannot tell our range limit from the calendar's
   built-in past-day greying. Interaction is blocked in JS (a capture-phase
   click handler) - this rule is purely the matching visual. Scoped under the
   promo mount only. */
.promoDS #book #bkWidget [data-pbdisabled="1"] {
  color: var(--pb-ivory-dark, #EDE8DC) !important;
  cursor: default !important;
}

/* On the widget path the bridge hides the native date + party grids (their
   .two/.three display:grid outranks the UA [hidden] rule, so state it here). */
.promoDS #book #bkNativeDates[hidden],
.promoDS #book #bkNativeParty[hidden] { display: none; }

/* Occupancy explainer under the adults/children row */
.promoDS #book .occnote {
  max-width: 640px;
  margin: 0 auto;
  font-size: var(--pb-text-fine, 0.8rem);
  color: var(--pb-muted, #6B6259);
}

/* No-availability notice (bk=noavail): red-bordered, jumps to inquiry */
.promoDS #book .noavail {
  max-width: 640px;
  margin: 0 auto var(--pb-space-base, 16px);
  padding: var(--pb-space-md, 12px) var(--pb-space-base, 16px);
  background: var(--pb-group-2-light, #F5EAEC);
  border: var(--pb-hairline, 1px) solid var(--pb-crimson, #C0392B);
  border-left: var(--pb-accent-bar, 3px) solid var(--pb-crimson, #C0392B);
  border-radius: var(--pb-radius-sm, 2px);
  color: var(--pb-crimson-dark, #96281B);
  text-align: center;
}
.promoDS #book .noavail a {
  color: var(--pb-crimson-dark, #96281B);
  font-weight: var(--pb-weight-bold, 700);
}

/* ── Action-section headers — brush-script booking prompts ─────
      Leo (2026-08-22): BOOK ONLINE / BOOK BY PHONE / SEND AN
      INQUIRY all carry the brand-voice script BOOK NOW! wore, so
      the three action panels read as one family of booking
      prompts. Script stays reserved for these prompts - the rest
      of the page keeps the sans DS headings. ──────────────────── */
.promoDS #call {
  text-align: center;
}
.promoDS #book h2,
.promoDS #call h2,
.promoDS #inquire h2 {
  /* !important matches header.css:116's idiom - global.css puts an
     !important sans on * that must be outranked for script moments. */
  font-family: 'AaMgScript-Regular', var(--pb-font-sans, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif) !important;
  color: var(--pb-crimson, #C0392B);
  font-weight: normal;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing: 0.01em;
  text-transform: none;
}
.promoDS #book h2::after,
.promoDS #call h2::after,
.promoDS #inquire h2::after {
  display: none;
}
.promoDS #call .calls {
  font-size: var(--pb-text-lead, clamp(1.15rem, 2vw, 1.4rem));
  color: var(--pb-deep, #1E3C38);
}
.promoDS #call .calls a {
  display: inline-block;
  min-height: var(--pb-tap-min, 44px);
  line-height: var(--pb-tap-min, 44px);
  padding: 0 var(--pb-space-sm, 8px);
  color: var(--pb-crimson, #C0392B);
  font-weight: var(--pb-weight-bold, 700);
  text-decoration: none;
}
.promoDS #call .calls a:hover,
.promoDS #call .calls a:focus {
  color: var(--pb-crimson-dark, #96281B);
  text-decoration: underline;
}

/* WhatsApp pill beside Clara's number. Brand green per Leo
   (2026-08-20) - the one deliberate off-palette color on the page;
   hex is WhatsApp's own, not a DS token. Glyph stays hand-inlined. */
.promoDS #call .calls a.wa-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: var(--pb-tap-min, 44px);
  line-height: 1;
  margin-left: var(--pb-space-sm, 8px);
  padding: 0 var(--pb-space-md, 16px);
  border: 0;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF;
  font-size: var(--pb-text-eyebrow, 0.68rem);
  font-weight: var(--pb-weight-bold, 700);
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  text-transform: uppercase;
  vertical-align: middle;
}
.promoDS #call .calls a.wa-pill::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 2px;
  flex: none;
}
.promoDS #call .calls a.wa-pill:hover,
.promoDS #call .calls a.wa-pill:focus {
  background: #1DA851;
  color: #FFFFFF;
  text-decoration: none;
}

/* ── Forms (booking + inquiry) ───────────────────────────────── */
.promoDS #book form,
.promoDS #inquire form {
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-base, 16px);
  max-width: 640px;
  min-width: 0;
  width: 100%;
  margin: 0 auto;
}

/* The booking form is a five-stage sequence: group -> stay ->
   party -> details -> proof/payment. Each stage is a fieldset whose
   legend sits on a brass hairline - the numbering is the process. */
.promoDS #book form#bookForm {
  max-width: 720px;
  gap: var(--pb-space-lg, 28px);
}

.promoDS #book fieldset.stage {
  margin: 0;
  padding: var(--pb-space-base, 16px) 0 0;
  border: 0;
  border-top: var(--pb-hairline, 1px) solid var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-base, 16px);
}

/* Widget path: stages 3-4 stay hidden until Check Availability passes. The
   display:flex above outranks the UA [hidden] rule, so state it here. */
.promoDS #book fieldset.stage[hidden] { display: none; }

.promoDS #book fieldset.stage legend {
  padding: 0 var(--pb-space-md, 12px) 0 0;
  margin-bottom: calc(-1 * var(--pb-space-sm, 8px));
  color: var(--pb-brass, #B8882E);
  font-size: var(--pb-text-eyebrow, 0.68rem);
  font-weight: var(--pb-weight-bold, 700);
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  text-transform: uppercase;
}

.promoDS #book fieldset.stage legend .stageno {
  color: var(--pb-crimson, #C0392B);
  margin-right: var(--pb-space-xs, 4px);
}

/* ── Influencer code box (stage 1) ─────────────────────────────
      A quiet single-row card above the group tickets: type the code,
      Apply asks the server, and a pass switches the form into code
      mode (group cards hide, dates open to the campaign span). The
      applied state borrows the deep-green confirmation voice; errors
      take the noavail crimson. ──────────────────────────────────── */
.promoDS #book .codebox {
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-sm, 8px);
}
.promoDS #book .codehint {
  margin: 0;
  font-size: var(--pb-text-fine, 0.8rem);
  color: var(--pb-muted, #6B6259);
}
/* the one-line advantage note rides tight under the hint, one thought */
.promoDS #book .codewhy {
  margin-top: calc(-1 * var(--pb-space-xs, 4px));
}
.promoDS #book .coderow {
  display: flex;
  gap: var(--pb-space-sm, 8px);
  align-items: stretch;
}
/* the code field wears the standard capsule; the input shouts the code.
   margin 0 kills the global label bottom-margin so the capsule and the
   stretched Apply button land at exactly the same height. */
.promoDS #book .coderow label {
  flex: 0 1 260px;
  margin: 0;
}
.promoDS #book .coderow input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Apply/Remove: a real solid button beside the capsule (Leo 2026-09-08 -
   the earlier outline read as another empty field). Deep plantation green,
   stretched to the capsule's full height so the row sits flush; the crimson
   CTA voice stays reserved for Book and pay now. */
.promoDS #book .coderow button {
  flex: none;
  align-self: stretch;
  margin: 0;
  min-height: var(--pb-tap-min, 44px);
  padding: 0 var(--pb-space-lg, 28px);
  border: 0;
  border-radius: var(--pb-radius-sm, 2px);
  background: var(--pb-deep, #1E3C38);
  color: var(--pb-on-dark, #FFFEF9);
  font-family: inherit;
  font-weight: var(--pb-weight-bold, 700);
  font-size: var(--pb-text-eyebrow, 0.68rem);
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--pb-dur, 0.25s) var(--pb-ease, cubic-bezier(0.16, 1, 0.3, 1));
  -webkit-appearance: none;
  appearance: none;
}
.promoDS #book .coderow button:hover,
.promoDS #book .coderow button:focus {
  background: var(--pb-teal, #3D6B64);
  color: var(--pb-on-dark, #FFFEF9);
}
.promoDS #book .coderow button[hidden] { display: none; }
.promoDS #book .codemsg {
  margin: 0;
  font-size: var(--pb-text-fine, 0.8rem);
}
.promoDS #book .codemsg[hidden] { display: none; }
.promoDS #book .codemsg.ok { color: var(--pb-deep, #1E3C38); }
.promoDS #book .codemsg.err { color: var(--pb-crimson-dark, #96281B); }

/* ── Group ticket cards (stage 1) ──────────────────────────────
      Each group's identity on this page IS its booking window, so
      each choice is a date-stamped ticket: brass small-caps window
      dates over the group name, in schedule order. The SELECTED
      ticket takes the calendar table's own current-window stamp -
      crimson accent bar + light crimson wash (tr.now's exact
      language) - so picking a group reads as "this is now my
      window". Real radios drive it; the card is their label. */
.promoDS #book .grouppick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: var(--pb-space-md, 12px);
}
.promoDS #book .grouppick[hidden] { display: none; }

.promoDS #book .gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-xs, 4px);
  padding: var(--pb-space-md, 12px) var(--pb-space-base, 16px);
  background: var(--pb-cream-card, #FFFEF9);
  border: var(--pb-hairline, 1px) solid var(--pb-border-gold, rgba(184, 150, 90, 0.18));
  border-radius: var(--pb-radius-sm, 2px);
  cursor: pointer;
  transition: border-color var(--pb-dur, 0.25s) var(--pb-ease, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow var(--pb-dur, 0.25s) var(--pb-ease, cubic-bezier(0.16, 1, 0.3, 1)),
              background var(--pb-dur, 0.25s) var(--pb-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.promoDS #book .gcard:hover {
  border-color: var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  box-shadow: var(--pb-shadow-card, 0 2px 24px rgba(30, 30, 20, 0.07), 0 1px 4px rgba(30, 30, 20, 0.04));
}
/* the radio itself is invisible but stays focusable for the keyboard */
.promoDS #book .gcard input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}
.promoDS #book .gcard:focus-within {
  outline: var(--pb-rule, 2px) solid var(--pb-brass, #B8882E);
  outline-offset: var(--pb-focus-offset, 2px);
}
.promoDS #book .gcard .gdates {
  color: var(--pb-brass, #B8882E);
  font-size: var(--pb-text-eyebrow, 0.68rem);
  font-weight: var(--pb-weight-bold, 700);
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
}
/* the date range itself never breaks; the BOOKING NOW chip wraps to
   its own stamp line when the card is too narrow to share the row */
.promoDS #book .gcard .gd { white-space: nowrap; }
.promoDS #book .gcard .gname {
  color: var(--pb-deep, #1E3C38);
  font-weight: var(--pb-weight-semibold, 600);
  font-size: var(--pb-text-fine, 0.8rem);
  letter-spacing: var(--pb-ls-body, 0.01em);
  line-height: var(--pb-lh-snug, 1.4);
}
.promoDS #book .gcard .gnow {
  display: inline-block;
  padding: 1px 6px;
  background: var(--pb-crimson, #C0392B);
  color: var(--pb-on-dark, #FFFEF9);
  font-size: 0.6rem;
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  border-radius: var(--pb-radius-sm, 2px);
  white-space: nowrap;
}
/* selected = the your-window stamp (mirrors table.windows tr.now) */
.promoDS #book .gcard.sel {
  background: var(--pb-group-2-light, #F5EAEC);
  border-color: var(--pb-border-crimson, rgba(192, 57, 43, 0.18));
  box-shadow: inset var(--pb-accent-bar, 3px) 0 0 var(--pb-crimson, #C0392B);
}
.promoDS #book .gcard.sel .gdates { color: var(--pb-crimson-dark, #96281B); }
.promoDS #book .gcard.sel .gname { color: var(--pb-crimson-dark, #96281B); }
.promoDS #book #bkGroupNative[hidden] { display: none; }

.promoDS #book .three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--pb-space-base, 16px);
}

/* Prefix is a short word; give the names the room. */
.promoDS #book .three.prefix-lead {
  grid-template-columns: minmax(90px, 0.55fr) 1fr 1fr;
}

/* ── The folio — the running total as a ledger slip ──────────── */
.promoDS #book .folio {
  background: var(--pb-cream-card, #FFFEF9);
  border: var(--pb-hairline, 1px) solid var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  border-radius: var(--pb-radius-sm, 2px);
  box-shadow: var(--pb-shadow-card, 0 2px 24px rgba(30, 30, 20, 0.07), 0 1px 4px rgba(30, 30, 20, 0.04));
  padding: var(--pb-space-base, 16px) var(--pb-space-lg, 20px);
}

.promoDS #book .folio .folio-head {
  margin: 0 0 var(--pb-space-sm, 8px);
  color: var(--pb-brass, #B8882E);
  font-size: var(--pb-text-eyebrow, 0.68rem);
  font-weight: var(--pb-weight-bold, 700);
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  text-transform: uppercase;
  text-align: center;
}

.promoDS #book .folio .folio-line {
  display: flex;
  align-items: baseline;
  margin: var(--pb-space-xs, 6px) 0 0;
  font-size: var(--pb-text-fine, 0.85rem);
  color: var(--pb-text, #2A2420);
}

/* The extra-adults line is hidden when there is no surcharge; display:flex
   above outranks the UA [hidden] rule, so an empty row would otherwise show. */
.promoDS #book .folio .folio-line[hidden] { display: none; }

.promoDS #book .folio .folio-line .fl {
  flex: 0 1 auto;
  min-width: 0;
}

.promoDS #book .folio .folio-line .dots {
  flex: 1 0 24px;
  border-bottom: 1px dotted var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  margin: 0 var(--pb-space-sm, 8px) 4px;
}

.promoDS #book .folio .folio-line .amt {
  font-variant-numeric: tabular-nums;
  font-weight: var(--pb-weight-semibold, 600);
  white-space: nowrap;
}

.promoDS #book .folio .folio-total {
  margin-top: var(--pb-space-md, 12px);
  padding-top: var(--pb-space-sm, 8px);
  border-top: var(--pb-hairline, 1px) solid var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  color: var(--pb-crimson-dark, #96281B);
  font-weight: var(--pb-weight-bold, 700);
  font-size: 1rem;
}
.promoDS #book .folio .folio-total .amt {
  font-weight: var(--pb-weight-bold, 700);
}

.promoDS #book .folio .folio-stamp {
  margin: var(--pb-space-sm, 8px) 0 0;
  color: var(--pb-crimson, #C0392B);
  font-size: var(--pb-text-eyebrow, 0.68rem);
  font-weight: var(--pb-weight-bold, 700);
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  text-transform: uppercase;
  text-align: center;
}

/* ── Proof preview: thumbnail chip + click-to-enlarge lightbox ── */
.promoDS #book .proof-prev {
  display: flex;
  align-items: center;
  gap: var(--pb-space-md, 12px);
}
.promoDS #book .proof-prev .proof-thumbbtn {
  padding: 2px;
  margin: 0;
  border: var(--pb-hairline, 1px) solid var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  border-radius: var(--pb-radius-sm, 2px);
  background: var(--pb-white, #FFFFFF);
  cursor: zoom-in;
  line-height: 0;
}
.promoDS #book .proof-prev .proof-thumbbtn:focus {
  outline: var(--pb-rule, 2px) solid var(--pb-brass, #B8882E);
  outline-offset: var(--pb-focus-offset, 2px);
}
.promoDS #book .proof-prev img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
}
.promoDS #book .proof-prev .proof-meta {
  font-size: var(--pb-text-fine, 0.8rem);
  color: var(--pb-muted, #6B6259);
  word-break: break-all;
}
.promoDS #book .proof-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10001; /* pb-header is 10000 - the scrim must cover it */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 20, 0.82);
  cursor: zoom-out;
  padding: var(--pb-space-lg, 24px);
}
.promoDS #book .proof-lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  border: var(--pb-rule, 2px) solid var(--pb-cream-card, #FFFEF9);
  border-radius: var(--pb-radius-sm, 2px);
  box-shadow: var(--pb-shadow-card, 0 2px 24px rgba(30, 30, 20, 0.4));
}

/* display:flex would defeat the hidden attribute - keep it decisive */
.promoDS #book .proof-prev[hidden],
.promoDS #book .proof-lightbox[hidden] {
  display: none;
}

/* notice mode: a rule violation replaces the line items */
.promoDS #book .folio .folio-msg {
  margin: 0;
  color: var(--pb-crimson-dark, #96281B);
  font-weight: var(--pb-weight-semibold, 600);
  text-align: center;
}
.promoDS #book .folio.notice {
  border-color: var(--pb-crimson, #C0392B);
  background: var(--pb-group-2-light, #F5EAEC);
}

.promoDS #book .two,
.promoDS #inquire .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pb-space-base, 16px);
}

/* ── Field capsules ────────────────────────────────────────────
      Leo (2026-08-22): the bare label-over-input pairs read as
      scattered fields. Every field now wears the ORM widget's own
      field anatomy - one bordered box per field, the label inside
      as a small-caps brass eyebrow (CHECK-IN's exact language),
      the control borderless within, the BOX carrying focus - so
      stage 2's widget bar, stages 3-4, and the inquiry form all
      read as one system. The markup's label IS the wrapper, so
      this is pure CSS; .gcard tickets and the checkbox/proof rows
      opt back out below. */
.promoDS #book label,
.promoDS #inquire label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--pb-space-sm, 8px) var(--pb-space-md, 12px);
  background: var(--pb-white, #FFFFFF);
  border: var(--pb-hairline, 1px) solid var(--pb-border-gold-strong, rgba(184, 136, 46, 0.35));
  border-radius: var(--pb-radius-sm, 2px);
  color: var(--pb-brass, #B8882E);
  font-weight: var(--pb-weight-bold, 700);
  font-size: var(--pb-text-eyebrow, 0.68rem);
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  text-transform: uppercase;
  cursor: text;
}
.promoDS #book label:focus-within,
.promoDS #inquire label:focus-within {
  border-color: var(--pb-brass, #B8882E);
  outline: var(--pb-rule, 2px) solid var(--pb-brass, #B8882E);
  outline-offset: var(--pb-focus-offset, 2px);
}

.promoDS #book input,
.promoDS #book select,
.promoDS #inquire input,
.promoDS #inquire select,
.promoDS #inquire textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--pb-weight-regular, 400);
  letter-spacing: normal;
  text-transform: none;
  min-height: 32px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pb-text, #2A2420);
}
.promoDS #book label input:focus,
.promoDS #book label select:focus,
.promoDS #inquire label input:focus,
.promoDS #inquire label select:focus,
.promoDS #inquire label textarea:focus {
  outline: none; /* the capsule carries the focus ring */
}

.promoDS #inquire textarea {
  min-height: 88px;
  resize: vertical;
}

/* jQuery Mobile wraps plain text inputs in div.ui-input-text with its
   own grey border, inset shadow, and margins - the capsule owns the
   field chrome now, so the wrapper goes invisible (promo scope only). */
.promoDS .ui-input-text,
.promoDS .ui-input-text.ui-shadow-inset {
  border: 0;
  background: transparent;
  margin: 0;
  box-shadow: none;
}

.promoDS #book input[disabled] {
  color: var(--pb-muted, #6B6259);
}
/* fallback path only: a capsule whose control is disabled reads muted */
.promoDS #book label:has(input[disabled]) {
  background: var(--pb-stone, #F0ECE4);
}

/* The conditions row: PROSE with a checkbox, not a field - it opts out
   of the capsule and instead reads as a conditions panel (the
   closednote idiom: muted ivory wash + brass accent bar), with a
   hand-drawn DS checkbox: 2px brass box that fills crimson with a
   white stroke check when agreed. */
.promoDS #book .agreeline {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--pb-space-md, 12px);
  padding: var(--pb-space-md, 12px) var(--pb-space-base, 16px);
  background: var(--pb-ivory-dark, #EDE8DC);
  border: 0;
  border-left: var(--pb-accent-bar, 3px) solid var(--pb-brass, #B8882E);
  border-radius: var(--pb-radius-sm, 2px);
  color: var(--pb-text, #2A2420);
  font-weight: var(--pb-weight-regular, 400);
  font-size: inherit;
  letter-spacing: var(--pb-ls-body, 0.01em);
  text-transform: none;
  cursor: pointer;
}
.promoDS #book .agreeline input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin: 2px 0 0;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  border: var(--pb-rule, 2px) solid var(--pb-brass, #B8882E);
  border-radius: var(--pb-radius-sm, 2px);
  background: var(--pb-white, #FFFFFF);
  cursor: pointer;
  transition: background var(--pb-dur, 0.25s) var(--pb-ease, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color var(--pb-dur, 0.25s) var(--pb-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.promoDS #book .agreeline input[type="checkbox"]:checked {
  background: var(--pb-crimson, #C0392B);
  border-color: var(--pb-crimson, #C0392B);
}
/* the check itself: a rotated 2px-stroke L, the DS's hand-inlined idiom */
.promoDS #book .agreeline input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--pb-on-dark, #FFFEF9);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.promoDS #book .agreeline input[type="checkbox"]:focus-visible {
  outline: var(--pb-rule, 2px) solid var(--pb-brass, #B8882E);
  outline-offset: var(--pb-focus-offset, 2px);
}
/* the checkbox carries its own focus ring - no panel-wide ring on click */
.promoDS #book .agreeline:focus-within {
  outline: none;
}
.promoDS #book input[type="file"] {
  padding: var(--pb-space-sm, 8px);
  font-size: var(--pb-text-fine, 0.8rem);
}

/* CTA buttons — DS crimson call-to-action */
.promoDS #book button[type="submit"],
.promoDS #inquire button[type="submit"] {
  min-height: var(--pb-tap-min, 44px);
  align-self: center;
  padding: 1rem 2.25rem;
  border: none;
  border-radius: var(--pb-radius-sm, 2px);
  background: var(--pb-crimson, #C0392B);
  color: var(--pb-on-dark, #FFFEF9);
  font-family: inherit;
  font-weight: var(--pb-weight-bold, 700);
  font-size: 0.72rem;
  letter-spacing: var(--pb-ls-eyebrow, 0.22em);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--pb-shadow-cta, 0 4px 24px rgba(192, 57, 43, 0.30));
  transition: background var(--pb-dur-slow, 0.35s) var(--pb-ease, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow var(--pb-dur-slow, 0.35s) var(--pb-ease, cubic-bezier(0.16, 1, 0.3, 1)),
              transform var(--pb-dur, 0.25s) var(--pb-ease, cubic-bezier(0.16, 1, 0.3, 1));
  -webkit-appearance: none;
  appearance: none;
}
.promoDS #book button[type="submit"]:hover,
.promoDS #book button[type="submit"]:focus,
.promoDS #inquire button[type="submit"]:hover,
.promoDS #inquire button[type="submit"]:focus {
  background: var(--pb-crimson-dark, #96281B);
  box-shadow: var(--pb-shadow-cta-hv, 0 8px 32px rgba(150, 40, 27, 0.45));
  transform: translateY(-2px);
}
.promoDS #book button[type="submit"]:active,
.promoDS #inquire button[type="submit"]:active {
  transform: translateY(0);
}

/* status banners */
.promoDS .inqok {
  max-width: 640px;
  margin: var(--pb-space-base, 16px) auto 0;
  padding: var(--pb-space-md, 12px) var(--pb-space-base, 16px);
  background: var(--pb-group-1-light, #E8F2F0);
  border-left: var(--pb-accent-bar, 3px) solid var(--pb-teal, #3D6B64);
  color: var(--pb-deep, #1E3C38);
  text-align: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.promoDS .inqok.inqok-fade {
  opacity: 0;
}
.promoDS .inqerr {
  max-width: 640px;
  margin: var(--pb-space-md, 12px) auto 0;
  padding: var(--pb-space-md, 12px) var(--pb-space-base, 16px);
  background: var(--pb-group-2-light, #F5EAEC);
  border-left: var(--pb-accent-bar, 3px) solid var(--pb-crimson, #C0392B);
  color: var(--pb-crimson-dark, #96281B);
  text-align: center;
}

/* ── Small screens ───────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Phones get ONE slim gutter, not two: the ui-content wrapper's
     16px (global.css `.ui-page div.ui-content`, hence the matching
     specificity here) and each section's own 16px were stacking to
     32px per side. Wrapper keeps 10px; sections go flush. */
  .ui-page div.promoDS.ui-content {
    padding-left: 10px;
    padding-right: 10px;
  }
  .promoDS .hero,
  .promoDS section {
    padding-left: 0;
    padding-right: 0;
  }
  /* The three action panels are bordered cards - going flush would put
     text against their hairline. Keep a slim inner gutter (the id
     selectors outrank the flush rule above at any order). */
  .promoDS #book,
  .promoDS #call,
  .promoDS #inquire {
    padding-left: var(--pb-space-md, 12px);
    padding-right: var(--pb-space-md, 12px);
  }

  /* The rate medallion sheds its hairlines on phones so each
     label + price row stays on one line. */
  .promoDS .hero .rate::before,
  .promoDS .hero .rate::after {
    display: none;
  }

  /* Stage rows stack; the folio keeps its ledger shape. */
  .promoDS #book .three,
  .promoDS #book .three.prefix-lead {
    grid-template-columns: 1fr;
  }
  .promoDS #book .folio .folio-line {
    flex-wrap: wrap;
  }
  .promoDS #book .folio .folio-line .fl {
    flex-basis: 100%;
  }
  .promoDS #book .folio .folio-line .dots {
    margin-left: 0;
  }

  .promoDS table.windows td:first-child {
    width: auto;
  }
  .promoDS table.windows tr {
    display: flex;
    flex-direction: column;
    padding: var(--pb-space-sm, 8px) 0;
  }
  .promoDS table.windows td {
    display: block;
    border-bottom: none;
    padding-top: var(--pb-space-xs, 4px);
    padding-bottom: var(--pb-space-xs, 4px);
    min-height: 0;
  }
  .promoDS table.windows tr.now {
    padding: var(--pb-space-sm, 8px) 0;
  }
  .promoDS #book .two,
  .promoDS #inquire .two {
    grid-template-columns: 1fr;
  }
}