/* ===========================================================================
   INNER PAGES  (.pg-*)
   ---------------------------------------------------------------------------
   Ticket Booth, Birthdays, Classes & Workshops, The Midway Cafe.

   Base language is the homepage plus the zone pages: these files carry
   body class="zp pg", so they inherit the .zp spacing scale, the .zp
   line-height roles and the .zp header ink fix, and they reuse the shipped
   components verbatim (.zp-hero, .sec, .sec-cream, .zp-statement, .zp-cta,
   .ptable-card, .ticket, .tier, .class-card, .frame, .plaque, .trail).

   This file adds ONLY what those pages need and the system does not already
   have, borrowing devices from both About pages:
     from About v2 (.a2)  the wavy section edge, the boxed highlight word,
                          the badge cluster
     from About v1 (.ab)  the numbered creed list, the editorial index row

   Nothing here restyles a .zp-* or homepage rule, so the four zone pages and
   the homepage are untouched.
   =========================================================================== */
/* ---------- tokens ----------
   .zp supplies --s1..--s10 but stops there, and the radius/shadow/easing
   tokens are global. --s11 is the only gap, so it is added rather than the
   whole scale restated. */
.pg {
  --s11: 128px;
}
/* ===========================================================================
   boxed highlight word (from About v2)
   A filled, slightly rotated box behind one word of a heading. Fill and ink
   are always paired so the result passes AA.
   =========================================================================== */
.pg-box {
  display: inline-block;
  padding: .04em .3em .1em;
  border-radius: var(--r-sm);
  transform: rotate(-1.1deg);
}
.pg-box-sand {
  background: var(--sand);
  color: var(--redink);
}
.pg-box-red {
  background: var(--red);
  color: var(--paper);
}
.pg-box-teal {
  background: var(--teal);
  color: var(--night-2);
}
/* outlined variant, for dark grounds where a fill would shout */
.pg-box-out {
  display: inline-block;
  padding: .02em .28em .08em;
  border: 3px solid var(--sand);
  border-radius: var(--r-sm);
  color: var(--sand);
  transform: rotate(-.8deg);
}
/* ===========================================================================
   fact cards
   These reuse the homepage's .pillar card verbatim: the client picked that
   design over the flat badge that was here before. .pillar brings its own
   cream ground, redink border and hard offset shadow, so it reads correctly
   on the paper, cream and dark-night sections these pages use without a
   variant. It also carries the accent-driven icon tile and the hover lift.

   Only two things are added on top:
     - a three-column grid, because .pillars ships as four-up and these sets
       are six and three
     - accents for the fifth and sixth card, which .pillars does not define
   =========================================================================== */
.pg-pillars {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(32px, 4vw, 56px);
	text-align: left;
}
/* .pillars only accents children 1 to 4. Continuing the cycle here keeps the
   second row from stacking the same colour under the first. */
.pg-pillars .pillar:nth-child(5) {
  --accent: #E57D26;
  --accent-soft: rgba(229, 125, 38, .14);
  --accent-line: rgba(229, 125, 38, .42);
}
.pg-pillars .pillar:nth-child(6) {
  --accent: #6BA19C;
  --accent-soft: rgba(107, 161, 156, .16);
  --accent-line: rgba(107, 161, 156, .45);
}
/* ---- light-ground variant ----
   .pillars:not(.pillars-light) .pillar in style.css is the founders-board
   treatment: 5% cream on a dark board with a sand border. That is right on
   the .zp-statement sections, and invisible on the Cafe page where the set
   sits on .sec-cream. On any non-dark section the card takes the paper and
   redink treatment instead, and the darker half of the accent cycle becomes
   usable again. */
.pg .sec:not(.zp-statement) .pg-pillars .pillar {
  background: var(--paper);
  border-color: var(--redink);
  box-shadow: 0 6px 0 var(--redink);
}
.pg .sec:not(.zp-statement) .pg-pillars .pillar-name {
  color: var(--redink);
}
.pg .sec:not(.zp-statement) .pg-pillars .pillar-text {
  color: var(--ink-soft);
}
.pg .sec:not(.zp-statement) .pg-pillars .pillar:nth-child(3) {
  --accent: #B92D15;
  --accent-soft: rgba(185, 45, 21, .12);
  --accent-line: rgba(185, 45, 21, .38);
}
.pg .sec:not(.zp-statement) .pg-pillars .pillar:nth-child(4) {
  --accent: #17403D;
  --accent-soft: rgba(23, 64, 61, .11);
  --accent-line: rgba(23, 64, 61, .34);
}
/* ===========================================================================
   numbered list (from About v1's creed)
   The numeral gets its own grid column. On About v1 an 82px numeral at
   left:0 inside a 96px gutter collided with the title, so the column is
   explicit and both text children are pinned to column 2.
   =========================================================================== */
.pg-numlist {
  list-style: none;
  counter-reset: pgn;
  margin: clamp(28px, 3.5vw, 48px) 0 0;
  padding: 0;
  text-align: left;
}
.pg-numlist li {
  counter-increment: pgn;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: clamp(18px, 2.2vw, 30px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-top: 2px solid rgba(140, 31, 12, .14);
}
.pg-numlist li:last-child {
  border-bottom: 2px solid rgba(140, 31, 12, .14);
}
.pg-numlist li::before {
  content: counter(pgn, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / -1;
  font-family: 'Rye', serif;
  font-size: clamp(21px, 2.2vw, 29px);
  line-height: 1.1;
  color: var(--accent-ink);
}
/* both children in column 2, or auto-placement drops the paragraph into the
   numeral column and it wraps one word per line */
.pg-numlist h3, .pg-numlist p {
  grid-column: 2;
}
.pg-numlist h3 {
  font-family: Chicle, cursive;
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: var(--lh-head);
  color: var(--redink);
  margin: 0;
}
.pg-numlist p {
  font-size: 15.5px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: 52ch;
  margin: var(--s2) 0 0;
}
.pg-numlist li:nth-child(4n+1) {
  --accent-ink: #A85312;
}
.pg-numlist li:nth-child(4n+2) {
  --accent-ink: #3C6862;
}
.pg-numlist li:nth-child(4n+3) {
  --accent-ink: #8C1F0C;
}
.pg-numlist li:nth-child(4n+4) {
  --accent-ink: #0E2B29;
}
/* ===========================================================================
   ticket stubs  (Ticket Booth, "Good to know")
   These four are independent facts, not steps, so they read better as objects
   than as a numbered list. On a Ticket Booth page the obvious object is a
   ticket: a punched stub column holding the numeral, a perforated dashed
   divider, then the note. Distinct from .pillar above it and from the .ticket
   pass cards, which carry prices.
   =========================================================================== */
.pg-stubs {
  --stub-ground: var(--cream);        /* must match the section, for the notches */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(32px, 4vw, 56px);
  text-align: left;
}
.pg-stub {
  position: relative;
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 88px) 1fr;
  align-items: stretch;
  background: var(--paper);
  border: 3px solid var(--redink);
  border-radius: var(--r-card);
  box-shadow: var(--sh-rest) var(--redink);
  overflow: hidden;
  transition: transform var(--t-hover) var(--e-quart),
              box-shadow var(--t-hover) var(--e-quart);
}
.pg-stub-no {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border-right: 3px dashed var(--redink);
  font-family: 'Rye', serif;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
  color: var(--accent-ink);
}
/* the two punches that make the divider read as a perforation. They are
   filled with the section's own ground, so the card looks torn, not drawn. */
.pg-stub-no::before,
.pg-stub-no::after {
  content: "";
  position: absolute;
  right: -11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--stub-ground);
  border: 3px solid var(--redink);
}
.pg-stub-no::before { top: -12px; }
.pg-stub-no::after { bottom: -12px; }
.pg-stub-body { padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px); }
.pg-stub-body h3 {
  font-family: Chicle, cursive;
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: var(--lh-head);
  color: var(--redink);
  margin: 0;
}
.pg-stub-body p {
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: var(--s2) 0 0;
}
.pg-stub:nth-child(1) { --accent-ink: #A85312; --accent-soft: rgba(229, 125, 38, .14); }
.pg-stub:nth-child(2) { --accent-ink: #3C6862; --accent-soft: rgba(107, 161, 156, .18); }
.pg-stub:nth-child(3) { --accent-ink: #8C1F0C; --accent-soft: rgba(185, 45, 21, .12); }
.pg-stub:nth-child(4) { --accent-ink: #0E2B29; --accent-soft: rgba(23, 64, 61, .12); }
@media (hover: hover) {
  .pg-stub:hover { transform: translate3d(0, -6px, 0); box-shadow: var(--sh-lift) var(--redink); }
}

/* ===========================================================================
   step trail  (Birthdays, "How it works")
   Unlike the stubs above, this content really is sequential, so the design
   says so: four numbered discs joined by a dashed trail, the same device the
   zone pages use between sections.
   =========================================================================== */
.pg-steps {
  position: relative;
  list-style: none;           /* it is an <ol> for semantics, not for markers:
                                 the numeral is drawn inside the disc */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(40px, 5vw, 68px);
  counter-reset: pgstep;
}
/* the trail sits behind the discs and stops at the first and last one, so it
   never runs off the ends of the row */
.pg-steps::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 12.5%;
  right: 12.5%;
  border-top: 3px dashed rgba(140, 31, 12, .3);
  z-index: 0;
}
.pg-step {
  position: relative;
  z-index: 1;
  text-align: center;
  counter-increment: pgstep;
}
.pg-step-disc {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--redink);
  box-shadow: var(--sh-rest) var(--redink);
  display: grid;
  place-items: center;
  transition: transform var(--t-hover) var(--e-settle),
              box-shadow var(--t-hover) var(--e-quart);
}
.pg-step-disc::after {
  content: counter(pgstep, decimal-leading-zero);
  font-family: 'Rye', serif;
  font-size: 22px;
  line-height: 1;
  color: var(--accent-ink);
}
.pg-step h3 {
  font-family: Chicle, cursive;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 24px);
  line-height: var(--lh-head);
  color: var(--redink);
  margin: var(--s5) 0 0;
}
.pg-step p {
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: var(--s2) 0 0;
}
.pg-step:nth-child(1) .pg-step-disc { --accent-ink: #A85312; }
.pg-step:nth-child(2) .pg-step-disc { --accent-ink: #3C6862; }
.pg-step:nth-child(3) .pg-step-disc { --accent-ink: #8C1F0C; }
.pg-step:nth-child(4) .pg-step-disc { --accent-ink: #0E2B29; }
@media (hover: hover) {
  .pg-step:hover .pg-step-disc { transform: translateY(-5px) rotate(-4deg); box-shadow: var(--sh-lift) var(--redink); }
}

/* ===========================================================================
   menu panel  (Cafe, "The menu")
   Was a centred sentence and a button. Now a photograph beside a menu card,
   so the download reads as the point of the section rather than a footnote.
   =========================================================================== */
.pg-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 56px);
  align-items: stretch;        /* photo matches the card, as on the Visit split */
  margin-top: clamp(32px, 4vw, 56px);
}
/* .frame sizes from its parent (.zp-media gives it a height); standalone it
   collapses to its border, because .frame img is height:100%. */
.pg-menu .frame {
  /* no height:100% here. The grid already stretches the item to the row, and
     a percentage height resolves against the grid area instead, which left
     the photo 13px short of the card. min-height only sets the floor. */
  min-height: clamp(260px, 30vw, 380px);
}
.pg-menu-card {
  position: relative;
  background: var(--cream);
  border: 3px solid var(--redink);
  border-radius: var(--r-card);
  box-shadow: var(--sh-rest) var(--redink);
  padding: clamp(28px, 3.4vw, 44px);
  text-align: left;
}
/* a dashed inner rule, the way a printed menu card is ruled */
.pg-menu-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(140, 31, 12, .22);
  border-radius: 14px;
  pointer-events: none;
}
.pg-menu-card > * { position: relative; }
.pg-menu-kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.pg-menu-card h3 {
  font-family: 'Rye', serif;
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.14;
  color: var(--redink);
  margin: var(--s3) 0 0;
}
.pg-menu-card p {
  font-size: 15.5px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: var(--s4) 0 0;
  max-width: 34ch;
}
.pg-menu-card .btn { margin-top: var(--s6); }
.pg-menu-note {
  display: block;
  margin-top: var(--s4);
  font-size: 13px;
  font-weight: 700;
  color: var(--orange-ink);
}

/* ===========================================================================
   editorial index row (from About v1)
   One row per link, rule between, arrow travelling on hover.
   =========================================================================== */
.pg-index {
  display: block;
  text-align: left;
}
.pg-index a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s4);
  padding: clamp(16px, 2vw, 24px) 0;
  border-top: 2px solid rgba(140, 31, 12, .14);
  font-family: Chicle, cursive;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: var(--lh-head);
  color: var(--redink);
}
.pg-index a:last-child {
  border-bottom: 2px solid rgba(140, 31, 12, .14);
}
.pg-index svg {
  width: 21px;
  height: 21px;
  flex: none;
  color: var(--orange-ink);
  transition: transform .3s var(--e-expo);
}
@media (hover: hover) {
  .pg-index a:hover {
    color: var(--red);
  }
  .pg-index a:hover svg {
    transform: translate3d(7px, 0, 0);
  }
}
/* ===========================================================================
   contact cards (Visit Us)
   Three tappable cards. Anything genuinely actionable (email, phone) is a real
   link; anything not live yet is a plain card, so nothing pretends to work.
   =========================================================================== */
.pg-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(32px, 4vw, 52px);
}
.pg-contact > * {
  display: block;
  padding: var(--s6) var(--s5);
  border-radius: var(--r-md);
  border: 2.5px solid rgba(58, 33, 24, .16);
  background: var(--paper);
  box-shadow: var(--sh-rest) rgba(58, 33, 24, .2);
  text-align: center;
  color: var(--ink);
  transition: transform var(--t-hover) var(--e-settle), box-shadow var(--t-hover) var(--e-quart);
}
.pg-contact svg {
  width: 26px;
  height: 26px;
  display: block;
  margin: 0 auto var(--s3);
  color: var(--orange-ink);
}
.pg-contact b {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.pg-contact span {
  display: block;
  margin-top: 7px;
  font-family: Chicle, cursive;
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: var(--lh-head);
  color: var(--redink);
  word-break: break-word;
}
.pg-contact em {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
  color: var(--ink-soft);
}
@media (hover: hover) {
  .pg-contact a:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lift) rgba(58, 33, 24, .24);
  }
}
/* ===========================================================================
   map + form side by side (Visit Us)
   Two equal columns that must finish level. The columns are flex so the map
   can grow to whatever height the form ends up being: the form's height is
   content-driven and the map's is not, so the map is the one that flexes.
   =========================================================================== */
.pg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch; /* both columns share the taller height */
  margin-top: clamp(32px, 4vw, 56px);
}
.pg-split-col {
  display: flex;
  flex-direction: column;
  min-width: 0; /* or a long value can push the column wider */
}
.pg-split-title {
  font-family: Chicle, cursive;
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: var(--lh-head);
  color: var(--redink);
  margin: 0 0 var(--s4);
  text-align: left;
}
/* inside the split both children fill their column rather than centring on
   their own measure, and the map takes up the slack so the two finish level */
.pg-split .pg-form {
  max-width: none;
  margin: 0;
}
.pg-split .pg-map {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 300px;
  margin: 0;
}
.pg-split .pg-pending {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
/* ===========================================================================
   contact form (Visit Us)
   The newsletter form in the footer is a single field on a dark ground. This
   is a full form on a light one, so it gets its own field styling rather than
   overriding .signup. Behaviour follows the same site convention: native
   validation, a success state, and the real POST still to be wired.
   =========================================================================== */
.pg-form {
  max-width: 780px;
  margin: clamp(32px, 4vw, 52px) auto 0;
  text-align: left;
}
.pg-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}
.pg-field {
  display: block;
}
.pg-field-wide {
  grid-column: 1 / -1;
}
.pg-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: 8px;
}
.pg-field label .opt {
  letter-spacing: .06em;
  text-transform: none;
  font-weight: 700;
  color: var(--ink-soft);
}
.pg-field input, .pg-field select, .pg-field textarea {
  width: 100%;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  /* WCAG 1.4.11 wants 3:1 for a form control's visual boundary. At .28 this
     line measured 1.67:1 on paper, so the field edge was effectively
     invisible to anyone with low contrast sensitivity. .6 gives 3.37:1 on
     paper and 3.22:1 on cream, the two grounds this form can sit on. */
  border: 2.5px solid rgba(140, 31, 12, .6);
  border-radius: var(--r-md);
  padding: 13px 16px;
  transition: border-color var(--t-hover) var(--e-quart), box-shadow var(--t-hover) var(--e-quart);
}
.pg-field textarea {
  min-height: 148px;
  resize: vertical;
}
.pg-field select {
  appearance: none;
  cursor: pointer;
  /* the caret is drawn here because a native select arrow ignores the palette */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C1F0C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}
.pg-field input::placeholder, .pg-field textarea::placeholder {
  color: rgba(107, 74, 56, .62);
}
.pg-field input:hover, .pg-field select:hover, .pg-field textarea:hover {
  border-color: rgba(140, 31, 12, .8);
}
.pg-field input:focus, .pg-field select:focus, .pg-field textarea:focus {
  outline: none;
  border-color: var(--redink);
  box-shadow: 0 0 0 4px rgba(229, 125, 38, .22);
}
/* the error only shows once the field has actually been marked invalid, so
   nothing is red before the visitor has typed anything */
.pg-field .pg-err {
  display: none;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--redink);
}
.pg-form.is-checked .pg-field input:invalid, .pg-form.is-checked .pg-field select:invalid, .pg-form.is-checked .pg-field textarea:invalid {
  border-color: var(--red);
}
.pg-form.is-checked .pg-field input:invalid ~ .pg-err, .pg-form.is-checked .pg-field select:invalid ~ .pg-err, .pg-form.is-checked .pg-field textarea:invalid ~ .pg-err {
  display: block;
}
.pg-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s6);
}
.pg-form-note {
  font-size: 13px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0;
}
/* success panel replaces the form's own controls, announced to screen readers */
.pg-form-sent {
  display: none;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s6);
  border-radius: var(--r-md);
  border: 2.5px solid var(--teal-ink);
  background: rgba(107, 161, 156, .18);
}
.pg-form-sent svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--teal-ink);
}
.pg-form-sent b {
  display: block;
  font-family: Chicle, cursive;
  font-weight: 400;
  font-size: 21px;
  color: var(--redink);
}
.pg-form-sent p {
  margin: 5px 0 0;
  font-size: 14.5px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.pg-form.is-sent .pg-form-grid, .pg-form.is-sent .pg-form-foot {
  display: none;
}
.pg-form.is-sent .pg-form-sent {
  display: flex;
}
/* ===========================================================================
   map panel (Visit Us)
   Framed to match .frame elsewhere on the site. The embed is not loaded until
   the visitor asks for it: it is a third-party frame that would otherwise
   contact Google on every page view.
   =========================================================================== */
.pg-map {
  position: relative;
  margin: clamp(32px, 4vw, 52px) auto 0;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 3px solid var(--redink);
  box-shadow: var(--sh-lift) var(--redink);
  background: var(--cream);
  aspect-ratio: 16 / 8;
}
.pg-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.pg-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  text-align: center;
  padding: var(--s6);
  background:
    repeating-linear-gradient(45deg, rgba(140, 31, 12, .05) 0 12px, transparent 12px 24px), var(--cream);
}
.pg-map-placeholder svg {
  width: 38px;
  height: 38px;
  color: var(--orange-ink);
}
.pg-map-placeholder b {
  font-family: Chicle, cursive;
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 26px);
  color: var(--redink);
}
.pg-map-placeholder p {
  font-size: 14.5px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0;
}
/* ===========================================================================
   pending-content note
   Birthdays and Classes are waiting on the client for inclusions, prices and
   the timetable. Rather than invent them, the gap is marked honestly and
   styled so it is obviously a placeholder, not finished copy.
   =========================================================================== */
.pg-pending {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: start;
  max-width: 68ch;
  margin: clamp(28px, 3.5vw, 44px) auto 0;
  padding: var(--s5) var(--s6);
  text-align: left;
  background: rgba(243, 207, 131, .3);
  border: 2px dashed var(--orange-ink);
  border-radius: var(--r-md);
}
.pg-pending svg {
  width: 22px;
  height: 22px;
  color: var(--orange-ink);
}
.pg-pending b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.pg-pending p {
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 6px 0 0;
}
/* the hours list sits under a centred heading in a full-width section, so it
   needs its own measure or the rows stretch the whole container and the block
   reads off-balance against the heading above it. */
.pg-hours {
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
/* ---------- small shared helpers ---------- */
.pg-lede {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  max-width: 60ch;
  margin: var(--s5) auto 0;
}
.pg-statement-badges {
  margin-top: clamp(32px, 4vw, 52px);
}
/* the dark statement band carries badges here, so its own copy needs a cap */
.pg .zp-statement .pg-lede {
  color: rgba(251, 235, 198, .9);
}
.pg-tier-cta {
  margin-top: var(--s5);
}
/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1100px) {
  .pg-pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .pg-menu { grid-template-columns: 1fr; }
  /* min-height must go here: with aspect-ratio set, a 260px floor derives a
     416px width and pushes the page sideways at 360. */
  .pg-menu .frame { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  /* the trail only makes sense while all four discs share a row */
  .pg-steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--s7); }
  .pg-steps::before { display: none; }
}
@media (max-width: 640px) {
  .pg-stubs { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pg-steps { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  /* below this the two columns squeeze the form fields too hard */
  .pg-split {
    grid-template-columns: 1fr;
  }
  .pg-split .pg-map {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 820px) {
  .pg-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
  .pg-contact {
    grid-template-columns: 1fr;
  }
  .pg-form-grid {
    grid-template-columns: 1fr;
  }
  .pg-map {
    aspect-ratio: 4 / 3;
  }
  .pg-pending {
    padding: var(--s5);
  }
}
@media (max-width: 560px) {
  .pg-pillars {
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
  }
  .pg-numlist li {
    grid-template-columns: 2.3rem 1fr;
    column-gap: var(--s4);
  }
  .pg-pending {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pg-index svg, .pg-contact > *, .pg-stub, .pg-step-disc, .pg-field input, .pg-field select, .pg-field textarea {
    transition: none !important;
  }
  .pg-contact a:hover {
    transform: none !important;
  }
  .pg-index a:hover svg {
    transform: none !important;
  }
}

/* ===========================================================================
   PACKAGE COMPARISON  (Birthdays)
   Straight from the client's package sheet: 11 rows across three packages.
   A real <table> because it is tabular data and screen readers need the row
   and column association. Four columns cannot fit a 320px screen without
   making the values unreadable, so the table keeps a legible minimum width
   and scrolls inside its own bounded region. The page itself never scrolls
   sideways; the region is focusable and labelled so it is reachable by
   keyboard.
   =========================================================================== */
.pg-compare-wrap {
  margin-top: clamp(32px, 4vw, 56px);
  border: 3px solid var(--redink);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: var(--sh-rest) var(--redink);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.pg-compare-wrap:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.pg-compare {
  width: 100%;
  min-width: 560px;              /* below this the values stop being readable */
  border-collapse: collapse;
  text-align: left;
}
.pg-compare th, .pg-compare td {
  padding: 13px clamp(10px, 1.4vw, 18px);
  border-bottom: 2px dashed rgba(140, 31, 12, .18);
  vertical-align: middle;
}
.pg-compare tr:last-child th, .pg-compare tr:last-child td { border-bottom: none; }
/* package headers */
.pg-compare thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cream);
  border-bottom: 3px solid var(--redink);
  font-family: Chicle, cursive;
  font-weight: 400;
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.15;
  color: var(--redink);
  text-align: center;
}
.pg-compare thead th:first-child {
  text-align: left;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.pg-compare thead th .pg-compare-price {
  display: block;
  margin-top: 4px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-transform: none;
}
/* row labels */
.pg-compare tbody th {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--redink);
  white-space: normal;
}
.pg-compare tbody td {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}
.pg-compare tbody tr:nth-child(odd) td,
.pg-compare tbody tr:nth-child(odd) th { background: rgba(243, 207, 131, .16); }
/* the tick and the dash */
.pg-tick { width: 22px; height: 22px; color: var(--teal-ink); }
.pg-no {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgba(140, 31, 12, .26);
  vertical-align: middle;
}
/* one column tinted per package, matching the tier cards */
.pg-compare .col-2 { background: rgba(107, 161, 156, .07); }
.pg-compare .col-3 { background: rgba(185, 45, 21, .06); }
.pg-compare-hint {
  display: none;
  margin-top: var(--s3);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--orange-ink);
  text-align: center;
}
@media (max-width: 620px) {
  .pg-compare-hint { display: block; }
}

/* the standing conditions that apply to every package */
.pg-terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s5);
  margin-top: clamp(24px, 3vw, 36px);
}
.pg-term {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--cream);
  border: 2.5px solid var(--redink);
  font-size: 14px;
  font-weight: 800;
  color: var(--redink);
}
.pg-term svg { width: 18px; height: 18px; flex: none; color: var(--orange-ink); }

/* visually hidden, still announced. Used for the tick/dash meanings and the
   comparison table caption, where the visual carries information that a
   screen reader would otherwise miss entirely. */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A fourth card joined .pg-contact (opening times). The base grid is three
   fixed columns, which would strand the new card alone on a second row.
   
   Both rules below are bounded by min-width on purpose. This block sits at the
   END of the file, and a later unbounded rule beats an earlier @media rule of
   equal specificity, so an unscoped `repeat(4, 1fr)` here silently overrode the
   single-column rule at 820px and put four squashed cards on a phone. */
@media (min-width: 1101px) {
  .pg-contact { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .pg-contact { grid-template-columns: repeat(2, 1fr); }
}