/* ==========================================================================
   Photobooth.Melbourne — site stylesheet
   Hand-written design system. No framework, no build step.
   Edit → pm2 restart gsl-photobooth (CSS is static; restart only needed
   for view/route changes, but browsers cache /assets for 7 days — bump
   the ?v= query in layout.ejs when shipping CSS changes).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, variable)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --pb-charcoal-950: #16120F;
  --pb-charcoal-900: #1F1915;
  --pb-charcoal-800: #2A231E;
  --pb-cream-50:  #FBF7F0;
  --pb-cream-100: #F5EEE3;
  --pb-cream-200: #E9DFD1;
  --pb-ink:       #201A16;
  --pb-ink-soft:  #6E6259;
  --pb-red-600:   #DC2626;
  --pb-red-700:   #B91C1C;
  --pb-red-500:   #EF4444;
  --pb-red-050:   #FBEAE6;
  --pb-flash:     #FFD867;
  --pb-white:     #FFFFFF;
  --pb-on-dark:      #F6F0E7;
  --pb-on-dark-soft: #B4A99B;
  --pb-success: #15803D;
  --pb-success-bg: #EAF5EE;
  --pb-error:   #B91C1C;
  --pb-error-bg: #FBEAE6;

  /* Type */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: clamp(2.1rem, 4vw, 2.75rem);
  --text-hero: clamp(2.75rem, 7vw, 4.5rem);

  /* Layout */
  --container: 72rem;
  --container-narrow: 56rem;
  --section-y: clamp(2.25rem, 5vw, 3.75rem);

  /* Shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-polaroid: 4px;
  --r-full: 999px;

  /* Elevation (warm-tinted) */
  --shadow-sm: 0 1px 2px rgba(22,18,15,.06), 0 2px 8px rgba(22,18,15,.05);
  --shadow-md: 0 2px 6px rgba(22,18,15,.07), 0 12px 28px rgba(22,18,15,.09);
  --shadow-lg: 0 4px 12px rgba(22,18,15,.09), 0 28px 56px rgba(22,18,15,.16);
  --shadow-red: 0 8px 24px rgba(220,38,38,.28);

  /* Chrome */
  --pb-nav-h: 84px;

  /* Motion */
  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--pb-ink);
  background: var(--pb-cream-50);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--pb-red-600); color: #fff; }
:focus-visible { outline: 3px solid var(--pb-red-500); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. Utilities
   -------------------------------------------------------------------------- */
.pb-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.pb-container--narrow { max-width: var(--container-narrow); }
.pb-section { padding-block: var(--section-y); }
.pb-section--tight { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.pb-center { text-align: center; }
.pb-muted { color: var(--pb-ink-soft); }
.pb-lead { font-size: var(--text-lg); color: var(--pb-ink-soft); max-width: 42rem; margin-bottom: .5em; }
.pb-center .pb-lead { margin-inline: auto; }

.pb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pb-red-600);
  margin-bottom: .5rem;
}
.pb-eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--pb-red-600);
  border-radius: var(--r-full);
}
.pb-dark .pb-eyebrow { color: var(--pb-red-500); }

.pb-h2 { font-size: var(--text-4xl); }
.pb-h3 { font-size: var(--text-2xl); }

/* Dark sections */
.pb-dark {
  background: var(--pb-charcoal-950);
  color: var(--pb-on-dark);
}
.pb-dark .pb-muted, .pb-dark .pb-lead { color: var(--pb-on-dark-soft); }

/* --------------------------------------------------------------------------
   5. Film-strip + polaroid motifs
   -------------------------------------------------------------------------- */
/* Sprocket-hole strip: use on a 14px-tall element or as ::before/::after */
.pb-filmstrip {
  height: 16px;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 10px,
    var(--pb-charcoal-800) 10px 24px,
    transparent 24px 34px
  );
  background-size: 34px 8px;
  background-repeat: repeat-x;
  background-position: center;
}
.pb-filmstrip--on-dark {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 10px,
    rgba(246,240,231,.16) 10px 24px,
    transparent 24px 34px
  );
}

.pb-polaroid {
  background: var(--pb-white);
  border-radius: var(--r-polaroid);
  padding: 10px 10px 34px;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pb-polaroid__frame {
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 25%, rgba(220,38,38,.16), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(255,216,103,.18), transparent 55%),
    linear-gradient(160deg, var(--pb-cream-100), var(--pb-cream-200));
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-polaroid__frame img { width: 100%; height: 100%; object-fit: cover; }
.pb-polaroid__caption {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--pb-ink-soft);
  text-align: center;
  margin-top: 10px;
  line-height: 1.2;
}
.pb-polaroid--placeholder .pb-polaroid__frame { color: var(--pb-ink-soft); }
.pb-polaroid:hover { transform: translateY(-6px) rotate(0deg) !important; box-shadow: var(--shadow-lg); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1;
  padding: 1rem 1.75rem;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.pb-btn:active { transform: scale(.97); }

.pb-btn--primary {
  background: var(--pb-red-600);
  color: #fff;
}
.pb-btn--primary:hover { background: var(--pb-red-700); box-shadow: var(--shadow-red); }
/* flash-bulb sweep */
.pb-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,216,103,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.pb-btn--primary:hover::after { transition: transform var(--dur-slow) var(--ease-out); transform: translateX(120%); }

.pb-btn--ghost {
  background: transparent;
  color: var(--pb-ink);
  border-color: var(--pb-cream-200);
}
.pb-btn--ghost:hover { border-color: var(--pb-ink); }
.pb-dark .pb-btn--ghost { color: var(--pb-on-dark); border-color: rgba(246,240,231,.28); }
.pb-dark .pb-btn--ghost:hover { border-color: var(--pb-on-dark); background: rgba(246,240,231,.06); }

.pb-btn--sm { padding: .65rem 1.25rem; font-size: var(--text-sm); }
.pb-btn--lg { padding: 1.15rem 2.25rem; font-size: var(--text-lg); }

/* Text link with arrow */
.pb-link {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--pb-red-600);
  text-decoration: none;
}
.pb-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   7. Nav
   -------------------------------------------------------------------------- */
.pb-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22,18,15,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(246,240,231,.08);
}
.pb-nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  height: var(--pb-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* breakout badge logo: pinned high in the corner, bigger than the bar,
   bottom edge breaking past the header line */
.pb-nav__logo { position: relative; z-index: 52; width: 250px; align-self: stretch; display: block; }
/* heights/offsets assume the cropped logo viewBox (badge fills the file) —
   these values render the badge at the same on-screen size as before the crop */
.pb-nav__logo img {
  position: absolute;
  top: 9px;
  left: 0;
  height: 88px;
  width: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.45));
  transition: transform var(--dur-fast) var(--ease-out);
}
.pb-nav__logo:hover img { transform: rotate(-3deg) scale(1.05); }
@media (max-width: 767px) {
  .pb-nav__logo { width: 160px; }
  .pb-nav__logo img { height: 59px; top: 8px; }
}
.pb-nav__links { display: flex; align-items: center; gap: 1.75rem; }
.pb-nav__link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: .02em;
  color: var(--pb-on-dark-soft);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.pb-nav__link:hover { color: var(--pb-on-dark); }
.pb-nav__cta { margin-left: .25rem; }

.pb-nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  color: var(--pb-on-dark);
}
.pb-nav__toggle svg { width: 26px; height: 26px; }
.pb-nav__toggle .icon-close { display: none; }
.pb-nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.pb-nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.pb-nav__mobile {
  display: none;
  background: var(--pb-charcoal-950);
  border-bottom: 1px solid rgba(246,240,231,.08);
  padding: .75rem clamp(1rem, 4vw, 2rem) 1.5rem;
}
.pb-nav__mobile.is-open { display: block; }
.pb-nav__mobile a {
  display: block;
  padding: .8rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--pb-on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(246,240,231,.07);
}
.pb-nav__mobile .pb-btn { margin-top: 1rem; width: 100%; }

@media (max-width: 767px) {
  .pb-nav__links { display: none; }
  .pb-nav__toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   8. Flash messages
   -------------------------------------------------------------------------- */
.pb-flash-wrap { max-width: var(--container); margin: 1rem auto 0; padding-inline: clamp(1rem, 4vw, 2rem); }
.pb-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: .5rem;
  box-shadow: var(--shadow-sm);
}
.pb-flash--error   { background: var(--pb-error-bg); color: var(--pb-error); border: 1px solid rgba(185,28,28,.2); }
.pb-flash--success { background: var(--pb-success-bg); color: var(--pb-success); border: 1px solid rgba(21,128,61,.2); }
.pb-flash__icon { flex: 0 0 auto; width: 20px; height: 20px; }
.pb-flash__body { display: flex; align-items: center; gap: .6rem; }
.pb-flash__close { background: none; border: 0; color: inherit; opacity: .6; padding: .25rem; line-height: 0; }
.pb-flash__close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.pb-hero {
  background:
    radial-gradient(ellipse 90% 65% at 70% -10%, rgba(220,38,38,.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 12% 105%, rgba(255,216,103,.07), transparent 60%),
    var(--pb-charcoal-950);
  color: var(--pb-on-dark);
  overflow: hidden;
}
.pb-hero__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: center;
}
.pb-hero h1 {
  font-size: var(--text-hero);
  margin-bottom: 1rem;
}
.pb-hero h1 .accent { color: var(--pb-red-500); }
/* flash-yellow marker sticker for a word in the headline */
.pb-marker {
  display: inline-block;
  background: var(--pb-flash);
  color: var(--pb-charcoal-950);
  padding: 0 .18em .04em;
  border-radius: 8px;
  transform: rotate(-2deg);
}
.pb-hero__sub {
  font-size: var(--text-lg);
  color: var(--pb-on-dark-soft);
  max-width: 34rem;
  margin-bottom: 1.25rem;
}
.pb-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Booth-graphic composition: two comic-style booth stickers, floating */
.pb-hero__art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  padding: .5rem 0 1rem;
}
.pb-hero__art img { height: auto; }
/* per-booth widths tuned to each cropped SVG's aspect so their heights match */
.pb-hero__art .booth-trad { width: clamp(190px, 24vw, 350px); }
.pb-hero__art .booth-360 { width: clamp(300px, 40vw, 580px); }
/* on wide screens: wider centred container, booths hug the text column —
   no viewport bleed, so the whole hero reads as one centred composition */
@media (min-width: 901px) {
  .pb-hero--mega .pb-hero__inner {
    max-width: 90rem;
    gap: clamp(.75rem, 1.5vw, 1.5rem);
  }
  .pb-hero--mega .pb-hero__art {
    justify-content: flex-start;
    gap: clamp(.75rem, 2vw, 1.5rem);
  }
}
/* die-cut sticker outline for transparent cutout art (white stroke around
   black-edged shapes) + ambient shadow. Directional passes compound, so the
   diagonals fill in too. */
.pb-cutout {
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 16px 24px rgba(0,0,0,.5));
}
.pb-hero__art .booth-trad {
  /* staggered: classic booth rides high... */
  transform: rotate(-8deg) translateY(-4%);
}
.pb-hero__art .booth-360 {
  /* ...360 sits low. No overlap — both logos stay visible. */
  transform: rotate(7deg) translateY(10%);
}
.pb-hero__art img:hover { animation-play-state: paused; }

/* countdown badge floating over the art */
.pb-hero__badge {
  position: absolute;
  top: -48px;
  right: 4px;
  z-index: 2;
  background: var(--pb-red-600);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: .08em;
  padding: .55rem 1rem;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-red);
  transform: rotate(3deg);
}


/* --------------------------------------------------------------------------
   10. Trust strip (facts + counters)
   -------------------------------------------------------------------------- */
.pb-trust {
  background: var(--pb-cream-100);
  border-block: 1px solid var(--pb-cream-200);
}
.pb-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  /* the fork section now sits between the band and this strip */
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.pb-trust__item { text-align: center; }
.pb-trust__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  color: var(--pb-ink);
  line-height: 1.1;
}
.pb-trust__num .accent { color: var(--pb-red-600); }
.pb-trust__label { font-size: var(--text-sm); color: var(--pb-ink-soft); margin-top: .25rem; }
@media (max-width: 700px) {
  .pb-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   12. Cards — packages, extras
   -------------------------------------------------------------------------- */
.pb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.pb-card {
  background: var(--pb-white);
  border: 1px solid var(--pb-cream-200);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.pb-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--shadow-md); }

/* Comic booth graphic atop package cards */
.pb-card__art {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
}
.pb-card__art img {
  max-height: 100%;
  width: auto;
  transform: rotate(-2deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.pb-card:hover .pb-card__art img { animation: pb-wiggle .5s ease-in-out; }

.pb-card--featured { border: 2px solid var(--pb-red-600); box-shadow: var(--shadow-md); }
.pb-card__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pb-red-600);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.pb-card h3 { font-size: var(--text-xl); margin-bottom: .35rem; }
.pb-card__desc { color: var(--pb-ink-soft); font-size: var(--text-sm); margin-bottom: 1.25rem; flex-grow: 1; }
.pb-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1.1;
}
.pb-card__price small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--pb-ink-soft); }
.pb-card__meta { font-size: var(--text-sm); color: var(--pb-ink-soft); margin: .35rem 0 1.5rem; }
.pb-card .pb-btn { width: 100%; }

/* Extras chips */
.pb-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .85rem;
  margin-top: 1.5rem;
}
.pb-extra {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--pb-white);
  border: 1px solid var(--pb-cream-200);
  border-radius: var(--r-md);
  padding: 1.25rem 1.35rem;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pb-extra:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.pb-extra__body { flex: 1; }
.pb-extra h4 { font-size: var(--text-base); margin: 0 0 .15rem; }
.pb-extra p { font-size: var(--text-sm); color: var(--pb-ink-soft); margin: 0; }
.pb-extra__price {
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}
.pb-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: var(--r-full);
  background: var(--pb-success-bg);
  color: var(--pb-success);
}
.pb-badge--red { background: var(--pb-red-050); color: var(--pb-red-600); }

/* --------------------------------------------------------------------------
   13. Gallery marquee
   -------------------------------------------------------------------------- */
.pb-marquee {
  overflow: hidden;
  padding-block: 1.5rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pb-marquee__track {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: max-content;
  animation: pb-marquee 32s linear infinite;
}
.pb-marquee .pb-sticker { width: 150px; flex: 0 0 auto; filter: drop-shadow(0 8px 16px rgba(22,18,15,.2)); }
.pb-marquee:hover .pb-marquee__track { animation-play-state: paused; }
.pb-marquee .pb-polaroid { width: 200px; flex: 0 0 auto; }
.pb-marquee .pb-polaroid:nth-child(odd)  { transform: rotate(-2.5deg); }
.pb-marquee .pb-polaroid:nth-child(even) { transform: rotate(2deg) translateY(8px); }
@keyframes pb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   14. FAQ accordion
   -------------------------------------------------------------------------- */
.pb-faq {
  max-width: var(--container-narrow);
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  align-items: start; /* an open item grows its own cell only, not its neighbour */
}
.pb-faq__item {
  background: var(--pb-white);
  border: 1px solid var(--pb-cream-200);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 767px) { .pb-faq { grid-template-columns: 1fr; } }
.pb-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: 0;
  text-align: left;
  padding: 1.15rem 1.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--pb-ink);
}
.pb-faq__q svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--pb-red-600); transition: transform var(--dur-base) var(--ease-out); }
.pb-faq__item.is-open .pb-faq__q svg { transform: rotate(45deg); }
.pb-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.pb-faq__item.is-open .pb-faq__a { grid-template-rows: 1fr; }
.pb-faq__a-inner { overflow: hidden; }
.pb-faq__a p { padding: 0 1.35rem 1.15rem; margin: 0; color: var(--pb-ink-soft); font-size: var(--text-base); }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */
.pb-cta-band { position: relative; }
.pb-cta-band .pb-filmstrip--on-dark { position: absolute; left: 0; right: 0; }
.pb-cta-band .pb-filmstrip--on-dark:first-child { top: 14px; }
.pb-cta-band .pb-filmstrip--on-dark:last-of-type { bottom: 14px; }
.pb-cta-band__inner { padding-block: clamp(2.75rem, 5.5vw, 4rem); text-align: center; }
.pb-cta-band h2 { font-size: var(--text-4xl); margin-bottom: .75rem; }
.pb-cta-band p { color: var(--pb-on-dark-soft); font-size: var(--text-lg); margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: 1.35rem; }
.form-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--pb-ink);
  margin-bottom: .45rem;
}
.form-label .req { color: var(--pb-red-600); }
.form-input {
  width: 100%;
  padding: .9rem 1rem;
  border: 2px solid var(--pb-cream-200);
  border-radius: var(--r-sm);
  background: var(--pb-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--pb-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
}
.form-input:hover { border-color: #D5C8B4; }
.form-input:focus { border-color: var(--pb-red-600); box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
.form-input::placeholder { color: #B0A597; }
select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236E6259' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; }
.form-hint { font-size: var(--text-sm); color: var(--pb-ink-soft); margin-top: .35rem; }

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--pb-cream-200);
  border-radius: var(--r-full);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  background: var(--pb-red-600);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  background: var(--pb-red-600);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

/* Colour pickers (step 4 custom theme) */
input[type="color"] {
  width: 56px;
  height: 40px;
  border: 2px solid var(--pb-cream-200);
  border-radius: var(--r-sm);
  background: var(--pb-white);
  padding: 3px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   17. Booking chrome — progress, panels, selection cards
   -------------------------------------------------------------------------- */
.pb-booking { max-width: var(--container-narrow); margin-inline: auto; padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 4vw, 2rem) 2.5rem; }
.pb-booking__title { text-align: center; margin-bottom: .35rem; font-size: var(--text-3xl); }
.pb-booking__sub { text-align: center; color: var(--pb-ink-soft); margin-bottom: 2.25rem; }

/* Film-strip progress indicator */
.pb-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2.5rem;
  padding: .9rem 1rem;
  background: var(--pb-charcoal-950);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.pb-progress::before, .pb-progress::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(246,240,231,.22) 6px 14px, transparent 14px 20px);
}
.pb-progress::before { top: 4px; }
.pb-progress::after { bottom: 4px; }
.pb-progress__step { display: flex; align-items: center; }
.pb-progress__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  background: var(--pb-charcoal-800);
  color: var(--pb-on-dark-soft);
  border: 2px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.pb-progress__step.is-done .pb-progress__dot { background: var(--pb-red-700); color: #fff; }
.pb-progress__step.is-current .pb-progress__dot { background: var(--pb-red-600); color: #fff; border-color: rgba(255,216,103,.7); box-shadow: 0 0 0 4px rgba(220,38,38,.25); }
.pb-progress__bar {
  width: clamp(18px, 6vw, 56px);
  height: 2px;
  background: var(--pb-charcoal-800);
  margin-inline: 6px;
}
.pb-progress__step.is-done + .pb-progress__step .pb-progress__bar,
.pb-progress__bar.is-done { background: var(--pb-red-700); }
.pb-progress__label {
  display: none;
}
@media (min-width: 640px) {
  .pb-progress__label { display: block; font-size: var(--text-xs); color: var(--pb-on-dark-soft); margin-left: .5rem; font-family: var(--font-display); letter-spacing: .04em; }
  .pb-progress__step.is-current .pb-progress__label { color: var(--pb-on-dark); }
}

/* Booking card panel */
.pb-panel {
  background: var(--pb-white);
  border: 1px solid var(--pb-cream-200);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.1rem;
}
.pb-panel h2, .pb-panel h3 { font-size: var(--text-xl); margin-bottom: 1rem; }
.pb-panel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
@media (max-width: 640px) { .pb-panel__grid { grid-template-columns: 1fr; } }

/* Selection cards (packages step2, themes/layouts step4, extras step3) */
.pb-select-card {
  position: relative;
  border: 2px solid var(--pb-cream-200);
  border-radius: var(--r-md);
  background: var(--pb-white);
  padding: 1.35rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  display: block;
}
.pb-select-card:hover { border-color: #D5C8B4; transform: translateY(-2px); }
.pb-select-card.is-selected {
  border-color: var(--pb-red-600);
  box-shadow: 0 0 0 4px rgba(220,38,38,.12), var(--shadow-sm);
}
.pb-select-card input[type="radio"],
.pb-select-card input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

/* tick indicator */
.check-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--pb-cream-200);
  background: var(--pb-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check-indicator .checkmark { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.pb-select-card.is-selected .check-indicator { background: var(--pb-red-600); border-color: var(--pb-red-600); }
.pb-select-card.is-selected .checkmark { opacity: 1; }

/* Price summary panel */
.pb-summary {
  background: var(--pb-charcoal-950);
  color: var(--pb-on-dark);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  position: sticky;
  bottom: 1rem;
  box-shadow: var(--shadow-lg);
}
.pb-summary h3 { color: var(--pb-on-dark); font-size: var(--text-base); margin-bottom: .4rem; }
.pb-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--text-sm);
  color: var(--pb-on-dark-soft);
  padding-block: .18rem;
}
.pb-summary__row strong { color: var(--pb-on-dark); font-weight: 600; }
.pb-summary__row--total {
  border-top: 1px solid rgba(246,240,231,.15);
  margin-top: .4rem;
  padding-top: .55rem;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--pb-on-dark);
}
.pb-summary__row--total strong { color: var(--pb-red-500); font-size: var(--text-xl); }

/* Step footer nav */
.pb-stepnav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }

/* Review rows (step 5) */
.pb-review__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .55rem;
  font-size: var(--text-sm);
  border-bottom: 1px dashed var(--pb-cream-200);
}
.pb-review__row:last-child { border-bottom: 0; }
.pb-review__row dt { color: var(--pb-ink-soft); }
.pb-review__row dd { margin: 0; font-weight: 600; text-align: right; }
.pb-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.pb-panel__head .pb-link { font-size: var(--text-sm); }

/* Upload dropzone-ish */
.pb-upload {
  border: 2px dashed var(--pb-cream-200);
  border-radius: var(--r-md);
  padding: 1.75rem;
  text-align: center;
  color: var(--pb-ink-soft);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.pb-upload:hover { border-color: var(--pb-red-600); background: var(--pb-red-050); }

/* Confirmation */
.pb-confirm__tick {
  width: 84px;
  height: 84px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--pb-success-bg);
  color: var(--pb-success);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-confirm__tick svg { width: 40px; height: 40px; }
.pb-confirm__ref {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: .06em;
  background: var(--pb-charcoal-950);
  color: var(--pb-flash);
  padding: .6rem 1.4rem;
  border-radius: var(--r-md);
}
.pb-timeline { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.pb-timeline li { display: flex; gap: 1rem; padding-block: .75rem; }
.pb-timeline__dot {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pb-red-050);
  color: var(--pb-red-600);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Error pages */
.pb-errorpage { text-align: center; padding: clamp(4rem, 12vw, 8rem) 1rem; }
.pb-errorpage h1 { font-size: var(--text-hero); }
.pb-errorpage .code {
  font-family: var(--font-display);
  color: var(--pb-red-600);
  letter-spacing: .1em;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.pb-footer { background: var(--pb-charcoal-950); color: var(--pb-on-dark-soft); margin-top: auto; }
.pb-footer__strip { margin-bottom: 0; }
.pb-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 4vw, 2rem) 1.25rem;
}
.pb-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.75rem;
}
@media (max-width: 767px) { .pb-footer__grid { grid-template-columns: 1fr; } }
.pb-footer__logo img { height: 96px; width: auto; margin-bottom: 1rem; }
.pb-footer h4 {
  color: var(--pb-on-dark);
  font-size: var(--text-base);
  letter-spacing: .04em;
  margin-bottom: 1rem;
}
.pb-footer ul { list-style: none; margin: 0; padding: 0; }
.pb-footer li { margin-bottom: .6rem; }
.pb-footer a { color: var(--pb-on-dark-soft); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.pb-footer a:hover { color: var(--pb-on-dark); }
.pb-footer__contact li { display: flex; align-items: center; gap: .6rem; }
.pb-footer__contact svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--pb-red-500); }
.pb-footer__legal {
  border-top: 1px solid rgba(246,240,231,.1);
  margin-top: 1.5rem;
  padding-top: 1rem;
  font-size: var(--text-sm);
  text-align: center;
}

/* --------------------------------------------------------------------------
   19. Animations
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.reveal-visible { opacity: 1; transform: none; }

/* Hero entrance (runs once on load) */
@keyframes pb-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pb-pop {
  0%   { opacity: 0; transform: scale(.8) rotate(var(--pop-rot, 0deg)); }
  70%  { transform: scale(1.04) rotate(var(--pop-rot, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--pop-rot, 0deg)); }
}
.pb-hero [data-rise] { animation: pb-rise var(--dur-slow) var(--ease-out) both; }
.pb-hero [data-rise="2"] { animation-delay: 90ms; }
.pb-hero [data-rise="3"] { animation-delay: 180ms; }
.pb-hero__badge { animation: pb-pop 500ms var(--ease-out) 700ms both; --pop-rot: 3deg; }

/* Flash-bulb overlay used on hero CTA click-area (subtle) */
@keyframes pb-flashbulb {
  0% { opacity: 0; }
  12% { opacity: .9; }
  100% { opacity: 0; }
}

/* Playful motion */
@keyframes pb-float {
  from { translate: 0 0; }
  to   { translate: 0 -14px; }
}
@keyframes pb-wiggle {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -3deg; }
  75% { rotate: 3deg; }
}
.pb-btn--primary:hover { transform: scale(1.05) rotate(-1deg); }
.pb-hero__badge:hover { animation: pb-wiggle .45s ease-in-out; }
.pb-badge, .pb-card__flag { transition: transform var(--dur-fast) var(--ease-out); }
.pb-card:hover .pb-card__flag { transform: translateX(-50%) rotate(-3deg) scale(1.08); }
/* sticker treatment for comic SVGs dropped around the page */
.pb-sticker { transition: transform var(--dur-base) var(--ease-out); }
.pb-sticker:hover { transform: rotate(3deg) scale(1.06); }

/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .pb-marquee__track { animation: none; }
}

/* ==========================================================================
   21. V3 — showstopper front page
   ========================================================================== */

/* Booth art = deliberate tilted posters (trad has a black canvas, 360 white) */
.pb-poster {
  border-radius: 14px;
  border: 3px solid var(--pb-charcoal-950);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: #fff;
}

/* Parallax bits (emoji stickers, bolts, stars) — JS moves [data-depth] */
.pb-bit {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
}
.pb-bit img, .pb-bit svg { width: 100%; height: auto; display: block; }

/* --- Hero v3: full-viewport layered scene ------------------------------- */
.pb-hero--mega { position: relative; overflow: hidden; padding-bottom: clamp(3rem, 5vw, 5rem); }
.pb-hero--mega .pb-hero__inner {
  min-height: calc(100svh - var(--pb-nav-h));
  align-content: center;
  position: relative;
  z-index: 2;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}
.pb-hero .pb-hero__mega-title {
  font-size: clamp(3rem, 8.5vw, 6rem);
  line-height: .95;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
/* camera-flash on page load */
.pb-flashfx {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  animation: pb-flashbulb .65s ease-out .2s both;
}
/* halftone dot texture corner (comic print texture) */
.pb-halftone {
  position: absolute;
  inset: auto 0 0 auto;
  width: 45%;
  height: 55%;
  background-image: radial-gradient(rgba(246,240,231,.14) 2px, transparent 2.5px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at bottom right, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at bottom right, #000, transparent 70%);
  pointer-events: none;
}
/* heartbeat pulse divider strip */
.pb-pulseline {
  height: 34px;
  background: url('/assets/img/bits/pulse.svg') repeat-x center / auto 100%;
  opacity: .9;
}
/* bouncing scroll cue */
.pb-scrollcue {
  position: absolute;
  left: 50%;
  bottom: calc(1.5vw + 22px);
  translate: -50% 0;
  z-index: 3;
  color: var(--pb-on-dark-soft);
  animation: pb-float 1.1s ease-in-out infinite alternate;
}

/* --- Red marquee text band --------------------------------------------- */
.pb-band {
  background: var(--pb-red-600);
  color: #fff;
  overflow: hidden;
  transform: rotate(-1.25deg);
  margin: -1px -1rem;
  border-block: 3px solid var(--pb-charcoal-950);
  position: relative;
  z-index: 3;
}
.pb-band--straight { transform: none; margin-inline: 0; }
.pb-band__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: pb-marquee 16s linear infinite;
  padding-block: .55rem;
}
.pb-band__track span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  padding-inline: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
}
.pb-band__track img { height: 1em; width: auto; }

/* --- Booth showcase scenes ---------------------------------------------- */
.pb-show {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
  padding-block: clamp(2rem, 4.5vw, 3.5rem);
}
.pb-show__art { position: relative; }
.pb-show__art .pb-poster {
  width: min(100%, 440px);
  margin-inline: auto;
  display: block;
  transform: rotate(-3deg);
}
.pb-show--flip .pb-show__art .pb-poster { transform: rotate(3deg); }
.pb-show--flip .pb-show__art { order: 2; }
.pb-show h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); text-transform: uppercase; line-height: .98; }
.pb-show__ticks { list-style: none; margin: 1.25rem 0; padding: 0; }
.pb-show__ticks li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-block: .32rem;
  font-size: var(--text-base);
}
.pb-show__ticks img { width: 20px; height: 20px; }
.pb-show__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  margin-bottom: 1.25rem;
}
.pb-show__price small { font-size: var(--text-sm); color: var(--pb-ink-soft); font-weight: 500; }
@media (max-width: 820px) {
  .pb-show { grid-template-columns: 1fr; }
  .pb-show--flip .pb-show__art { order: 0; }
  .pb-show__art .pb-poster { width: min(100%, 340px); }
}

/* --- Pinned 3·2·1·FLASH countdown scene --------------------------------- */
.pb-count { position: relative; height: 320vh; background: var(--pb-charcoal-950); }
.pb-count__stage {
  position: sticky;
  top: var(--pb-nav-h);
  height: calc(100svh - var(--pb-nav-h));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pb-on-dark);
  transition: background-color 120ms linear;
}
.pb-count__step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: scale(.7);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
  pointer-events: none;
  padding-inline: 1rem;
}
.pb-count__step.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }
.pb-count__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(9rem, 32vw, 22rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 5px var(--pb-red-500);
}
.pb-count__step.is-active .pb-count__num { animation: pb-pop 380ms var(--ease-out) both; }
.pb-count__label { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.5vw, 2.25rem); margin-top: .5rem; text-transform: uppercase; }
.pb-count__hint { color: var(--pb-on-dark-soft); font-size: var(--text-lg); max-width: 30rem; }
/* FLASH payoff beat */
.pb-count__stage.is-flash { background: #fff; color: var(--pb-charcoal-950); }
.pb-count__step--flash .pb-count__num {
  -webkit-text-stroke: 0;
  color: var(--pb-red-600);
  font-size: clamp(4.5rem, 16vw, 11rem);
  text-transform: uppercase;
}
.pb-count__step--flash .pb-count__hint { color: var(--pb-ink-soft); }
/* static fallback (reduced motion / no JS) */
.pb-count--static { height: auto; padding-block: var(--section-y); }
.pb-count--static .pb-count__stage { position: static; height: auto; flex-direction: column; gap: 1rem; }
.pb-count--static .pb-count__step { position: static; opacity: 1; transform: none; }
.pb-count--static .pb-count__num { font-size: clamp(3.5rem, 8vw, 6rem); -webkit-text-stroke-width: 3px; }


@media (prefers-reduced-motion: reduce) {
  .pb-flashfx { display: none; }
  .pb-bit { transform: none !important; }
  .pb-band__track { animation: none; }
}

/* rotated band + parallax bits must never cause sideways scroll */
html, body { overflow-x: clip; }

/* the rotated band straddles the section boundary: negative margins let the
   hero gradient fill above its tilt and the cream section fill below it */
.pb-band-wrap {
  position: relative;
  z-index: 5;
  margin-block: -1.5vw;
  pointer-events: none;
}
.pb-band-wrap .pb-band { margin-block: 0; }


/* ==========================================================================
   22. Countdown scene v2 + extras revamp + /extras page
   ========================================================================== */

/* halftone variants (base .pb-halftone sits bottom-right on dark) */
.pb-halftone--tl {
  inset: 0 auto auto 0;
  mask-image: radial-gradient(ellipse at top left, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top left, #000, transparent 70%);
}
.pb-halftone--light {
  background-image: radial-gradient(rgba(22,18,15,.07) 2px, transparent 2.5px);
}

/* --- Countdown scene v2 ------------------------------------------------- */
/* --beat (0..1 through the current step) is set by JS on the stage, so the
   ring and numeral move WITH the scroll instead of snapping */
.pb-count__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(300px, 44vw, 620px);
  aspect-ratio: 1;
  margin: 0;
  translate: -50% -50%;
  border: 3px dashed rgba(239,68,68,.35);
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(calc(var(--beat, 0) * 120deg)) scale(calc(.82 + .22 * var(--beat, 0)));
  transition: border-color 300ms linear;
}
.pb-count__stage.is-flash .pb-count__ring { border-color: rgba(220,38,38,.25); }
.pb-count__step {
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
  transform: scale(.72) translateY(36px) rotate(-2deg);
}
.pb-count__step.is-active { transform: scale(1) translateY(0) rotate(0deg); }
.pb-count__step.is-active .pb-count__num {
  animation: none;
  transform: scale(calc(.94 + .1 * var(--beat, .5)));
}
.pb-count__num { transition: transform 120ms linear; }
/* small comic accents orbiting each numeral */
.pb-count__accent {
  position: absolute;
  pointer-events: none;
  animation: pb-float 2.8s ease-in-out infinite alternate;
}
.pb-count__accent img { width: 100%; height: auto; }
/* flash beat: dots become visible on white, filmstrips invert */
.pb-count__stage.is-flash .pb-halftone,
.pb-count__stage.is-flash .pb-halftone--tl {
  background-image: radial-gradient(rgba(22,18,15,.1) 2px, transparent 2.5px);
}
.pb-count__film {
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
}
.pb-count__film--top { top: 0; }
.pb-count__film--bottom { bottom: 0; }

/* --- Extras cards: sticker energy -------------------------------------- */
.pb-extra {
  border-width: 2px;
  transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.pb-extras .pb-extra:nth-child(odd) { transform: rotate(-1deg); }
.pb-extras .pb-extra:nth-child(even) { transform: rotate(1deg); }
.pb-extras .pb-extra:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-md);
  border-color: var(--pb-charcoal-950);
}
.pb-extra__price {
  font-size: var(--text-xl);
  color: var(--pb-red-600);
}

/* --- /extras detail page ------------------------------------------------ */
.pb-xhead {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
}
.pb-xhead h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); text-transform: uppercase; }
.pb-xrows { display: grid; gap: 1rem; margin-top: 2rem; }
.pb-xrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  background: var(--pb-white);
  border: 2px solid var(--pb-cream-200);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
  transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.pb-xrow:nth-child(odd) { transform: rotate(-.5deg); }
.pb-xrow:nth-child(even) { transform: rotate(.5deg); }
.pb-xrow:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pb-charcoal-950); }
.pb-xrow__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: .12em;
  color: var(--pb-red-600);
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.pb-xrow h2 { font-size: var(--text-2xl); margin-bottom: .4rem; }
.pb-xrow p { color: var(--pb-ink-soft); margin: 0; max-width: 44rem; }
.pb-xrow__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--pb-red-600);
  white-space: nowrap;
  text-align: center;
}
.pb-xrow__price .pb-badge { font-size: var(--text-sm); }
.pb-xrow__bit {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 74px;
  opacity: .9;
  rotate: -12deg;
  pointer-events: none;
}
@media (max-width: 640px) {
  .pb-xrow { grid-template-columns: 1fr; gap: .75rem; }
  .pb-xrow__price { text-align: left; }
}

/* feature chips on /extras detail rows */
.pb-xrow__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.pb-xrow__chips span {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: var(--r-full);
  background: var(--pb-red-050);
  color: var(--pb-red-700);
  border: 1px solid rgba(220,38,38,.18);
}

/* AI example carousel on /extras */
.pb-xrow--feature { border-color: var(--pb-red-600); border-width: 2px; }
.pb-xrow--feature:hover { border-color: var(--pb-red-600); }
.pb-carousel-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
}
.pb-carousel {
  display: flex;
  gap: .85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  padding-block: .25rem;
}
.pb-carousel::-webkit-scrollbar { display: none; }
.pb-carousel__item {
  flex: 0 0 auto;
  width: clamp(150px, 20vw, 210px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  border: 2px solid var(--pb-cream-200);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--pb-cream-100);
}
.pb-carousel__item img { width: 100%; height: 100%; object-fit: cover; }
.pb-carousel__item--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  color: var(--pb-ink-soft);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 30% 25%, rgba(220,38,38,.12), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(255,216,103,.16), transparent 55%),
    var(--pb-cream-100);
}
.pb-carousel__btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--pb-red-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pb-carousel__btn:hover { background: var(--pb-red-700); transform: scale(1.08); }
@media (max-width: 640px) {
  .pb-carousel__btn { display: none; }
}

/* extras rows with a left-side feature image */
.pb-xrow--media { grid-template-columns: auto minmax(0, 1fr) auto; }
.pb-xrow__media {
  width: clamp(120px, 13vw, 165px);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  border: 2px solid var(--pb-cream-200);
  overflow: hidden;
  background: var(--pb-cream-100);
  flex: 0 0 auto;
}
.pb-xrow__media img { width: 100%; height: 100%; object-fit: cover; }
.pb-xrow__media-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  color: var(--pb-ink-soft);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 30% 25%, rgba(220,38,38,.12), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(255,216,103,.16), transparent 55%),
    var(--pb-cream-100);
}
/* corner bits were oversized (the bolt especially, being tall) */
.pb-xrow__bit { width: 46px; right: -6px; bottom: -6px; }
@media (max-width: 640px) {
  .pb-xrow--media { grid-template-columns: 1fr; }
  .pb-xrow__media { width: 100%; aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   23. Booking wizard v2 — bring the flow in line with the comic-pop pages.
   CSS-only where possible so the plan flow inherits it too.
   ========================================================================== */
.pb-booking { position: relative; }
/* subtle halftone in the top-right of every wizard page, zero markup */
.pb-booking::before {
  content: '';
  position: absolute;
  top: 0;
  right: -10%;
  width: 55%;
  height: 320px;
  background-image: radial-gradient(rgba(22,18,15,.055) 2px, transparent 2.5px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at top right, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top right, #000, transparent 70%);
  pointer-events: none;
}
.pb-booking__title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  text-transform: uppercase;
  line-height: .98;
  position: relative;
}
.pb-booking__sub { font-size: var(--text-lg); position: relative; }
.pb-panel { border-width: 2px; position: relative; }
/* red kick under every panel heading — applies across booking + plan flows */
.pb-panel > h2:first-child::after,
.pb-panel .pb-panel__head h2::after {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  background: var(--pb-red-600);
  border-radius: var(--r-full);
  margin-top: .4rem;
}
/* step-2 booth cutout art atop package cards */
.pb-select-card .pb-card__booth {
  height: 96px;
  width: auto;
  margin: 0 auto .85rem;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(22,18,15,.18));
  transition: transform var(--dur-base) var(--ease-out);
}
.pb-select-card:hover .pb-card__booth { transform: rotate(-2deg) scale(1.04); }
/* progress bar: slightly larger presence */
.pb-progress { padding-block: 1.05rem; }
.pb-progress__dot { width: 38px; height: 38px; }

/* docked one-line variant of the price summary (booking step 3) */
.pb-summary--dock { padding: .6rem 1.1rem; }
.pb-summary--dock .pb-summary__details { display: none; }
.pb-summary--dock .pb-summary__row--total {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  align-items: center;
  font-size: var(--text-base);
}
.pb-summary--dock .pb-summary__row--total strong { font-size: var(--text-xl); }


/* ==========================================================================
   25. Homepage experiences trio + true mobile hero
   ========================================================================== */
.pb-xp-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.pb-xp-card { text-decoration: none; }
.pb-xp-card img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 2px solid var(--pb-charcoal-950);
  margin-bottom: .85rem;
}
.pb-xp-card h3 { font-size: var(--text-lg); margin-bottom: .5rem; }



/* ─────────────────────────────────────────────────────────────
   25b. AFFILIATE PORTAL — nav strip, status pills, month calendar,
        booking lists, notes and files. Mobile rules live in §26.
   ───────────────────────────────────────────────────────────── */
.aff-shell { --aff-width: 1120px; max-width: var(--aff-width); margin-inline: auto; padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 4vw, 2rem) 3rem; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; align-items: start; position: relative; }
.aff-main { min-width: 0; }
.aff-main .pb-booking__title, .aff-main .pb-booking__sub { text-align: left; }
.aff-main .pb-booking__sub { margin-bottom: 1.5rem; }
.aff-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.aff-head__status { text-align: right; }
.aff-side { position: sticky; top: calc(var(--pb-nav-h, 84px) + 1rem); display: grid; gap: .75rem; }
.aff-side__who { padding: .8rem .9rem; background: var(--pb-cream-100); border: 1px solid var(--pb-cream-200); border-radius: var(--r-md, 12px); font-size: var(--text-xs); color: var(--pb-ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.aff-side__who strong { display: block; color: var(--pb-ink); font-size: var(--text-base); text-transform: none; letter-spacing: 0; margin: .15rem 0; }
.aff-side__links { display: flex; flex-direction: column; gap: .15rem; padding: .4rem; background: #fff; border: 1px solid var(--pb-cream-200); border-radius: var(--r-md, 12px); }
.aff-side__links a, .aff-side__links button { display: block; width: 100%; text-align: left; padding: .6rem .8rem; border-radius: 8px; color: var(--pb-ink); text-decoration: none; background: none; border: 0; font: inherit; font-weight: 500; cursor: pointer; line-height: 1.2; }
.aff-side__links a:hover, .aff-side__links button:hover { background: var(--pb-cream-100); text-decoration: none; }
.aff-side__links a.is-active { background: var(--pb-charcoal-950); color: #fff; }
.aff-side__links form { margin: 0; }
.aff-side__links button { color: var(--pb-ink-soft); }
.aff-side__sep { display: block; height: 1px; background: var(--pb-cream-200); margin: .3rem .4rem; }
.aff-status { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .7rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.aff-status--amber { background: #FEF3C7; color: #92400E; }
.aff-status--green { background: var(--pb-success-bg); color: var(--pb-success); }
.aff-status--red { background: var(--pb-red-050); color: var(--pb-red-600); }
.aff-status--muted { background: var(--pb-cream-200); color: var(--pb-ink-soft); }
.aff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.aff-stat { padding: .85rem 1rem; border: 1px solid var(--pb-cream-200); border-radius: var(--r-md, 12px); background: #fff; }
.aff-stat strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; }
.aff-stat span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--pb-ink-soft); }
.aff-cal { border: 1px solid var(--pb-cream-200); border-radius: var(--r-md, 12px); overflow: hidden; background: #fff; }
.aff-cal__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .9rem; border-bottom: 1px solid var(--pb-cream-200); }
.aff-cal__dow, .aff-cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.aff-cal__dow span { padding: .4rem .5rem; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--pb-ink-soft); border-bottom: 1px solid var(--pb-cream-200); }
.aff-cal__day { min-height: 96px; padding: .35rem .4rem; border-right: 1px solid var(--pb-cream-200); border-bottom: 1px solid var(--pb-cream-200); font-size: var(--text-xs); }
.aff-cal__day:nth-child(7n) { border-right: 0; }
.aff-cal__week:last-child .aff-cal__day { border-bottom: 0; }
.aff-cal__day.is-out { background: var(--pb-cream-050, #FBF7F0); color: #B0A597; }
.aff-cal__num { display: inline-block; min-width: 1.6rem; text-align: center; border-radius: 999px; padding: .12rem .3rem; font-weight: 600; margin-bottom: .2rem; }
.aff-cal__day.is-today .aff-cal__num { background: var(--pb-red-600); color: #fff; }
.aff-cal__chip { display: block; margin-top: .2rem; padding: .22rem .4rem; border-radius: 6px; font-size: 11px; line-height: 1.25; text-decoration: none; color: var(--pb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid transparent; background: var(--pb-cream-100); }
.aff-cal__chip:hover { background: var(--pb-cream-200); text-decoration: none; }
.aff-cal__chip--amber { border-left-color: #D97706; }
.aff-cal__chip--green { border-left-color: var(--pb-success); }
.aff-cal__chip--red { border-left-color: var(--pb-red-600); text-decoration: line-through; color: var(--pb-ink-soft); }
.aff-cal__chip--muted { border-left-color: #B0A597; color: var(--pb-ink-soft); }
.aff-list { display: grid; gap: .6rem; }
.aff-row { display: flex; gap: 1rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--pb-cream-200); border-radius: var(--r-md, 12px); background: #fff; text-decoration: none; color: inherit; }
.aff-row:hover { border-color: #D5C8B4; text-decoration: none; }
.aff-row__date { flex: 0 0 60px; text-align: center; }
.aff-row__date strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.aff-row__date span { font-size: var(--text-xs); text-transform: uppercase; color: var(--pb-ink-soft); }
.aff-row__body { flex: 1; min-width: 0; }
.aff-row__body h4 { margin: 0 0 .15rem; font-size: var(--text-base); }
.aff-row__body p { margin: 0; font-size: var(--text-sm); color: var(--pb-ink-soft); }
.aff-files { display: grid; gap: .5rem; }
.aff-file { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .6rem .9rem; border: 1px solid var(--pb-cream-200); border-radius: var(--r-sm, 8px); background: #fff; font-size: var(--text-sm); }
.aff-note { padding: .75rem .9rem; border: 1px solid var(--pb-cream-200); border-radius: var(--r-md, 12px); background: #fff; }
.aff-note--you { background: var(--pb-cream-100); }
.aff-note__head { display: flex; gap: .6rem; align-items: baseline; font-size: var(--text-xs); color: var(--pb-ink-soft); margin-bottom: .3rem; }
.aff-note__head strong { color: var(--pb-ink); font-size: var(--text-sm); }
.aff-note__body { white-space: pre-wrap; font-size: var(--text-sm); }
.pb-booking textarea.form-input { resize: vertical; line-height: 1.5; }

/* ==========================================================================
   26. MOBILE — single source of truth.
   Two breakpoints: ≤900 collapses the hero, ≤640 is the phone layer.
   Everything mobile-specific lives HERE — do not scatter new @media blocks.
   ========================================================================== */

/* the rotated band's negative margins must never widen the page */
.pb-band-wrap { overflow-x: clip; }

/* visibility utilities */
@media (max-width: 640px) { .pb-hide-sm { display: none !important; } }
@media (min-width: 641px) { .pb-hide-lg { display: none !important; } }

/* rail primitive: swipeable snap row that bleeds to the viewport edge.
   Grid/flex containers gain this behaviour ≤768 when carrying .pb-rail. */
@media (max-width: 768px) {
  .pb-rail {
    display: flex;
    overflow-x: auto;
    overflow-y: clip;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: .9rem;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem));
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-bottom: .5rem;
  }
  .pb-rail::-webkit-scrollbar { display: none; }
  .pb-rail > * { flex: 0 0 78vw; scroll-snap-align: center; }
  .pb-rail .reveal, .pb-rail.reveal { transform: none; }
}

/* ---- ≤900: hero becomes a real single column ---------------------------- */
@media (max-width: 900px) {
  .pb-hero--mega .pb-hero__inner {
    grid-template-columns: 1fr;   /* Bug A fix: matches base specificity */
    text-align: center;
    min-height: 0;
    padding-block: 2.25rem 1rem;
    gap: 1.1rem;
  }
  .pb-hero--mega .pb-eyebrow { justify-content: center; }
  .pb-hero__sub { margin-inline: auto; margin-bottom: 1.1rem; }
  .pb-hero__ctas { justify-content: center; }
  .pb-hero--mega .pb-hero__art {
    justify-content: center;
    gap: 3vw;
    margin-right: 0;
    padding: 2.5rem 0 1.25rem;   /* more air above the booths, pair sits lower */
    max-width: none;
  }
  .pb-hero__art .booth-trad { width: min(30vw, 190px); transform: rotate(-8deg) translate(-14%, -2%); }
  .pb-hero__art .booth-360 { width: min(44vw, 280px); transform: rotate(7deg) translateY(5%); }
  .pb-hero__badge { display: none; }
  .pb-scrollcue { display: none; }
}

/* ---- ≤767: nav (slim bar, breakout preserved) --------------------------- */
@media (max-width: 767px) {
  :root { --pb-nav-h: 64px; }
  .pb-nav__logo { width: 120px; }
  .pb-nav__logo img { height: 82px; top: 4px; }   /* 86px vs 64px bar = real 22px breakout */
}

/* ---- ≤640: the phone layer ---------------------------------------------- */
@media (max-width: 640px) {
  /* comic bits: hidden by default on phones; opt back in with --keep */
  .pb-bit { display: none; }
  .pb-bit--keep { display: block; }
  /* the two keepers: small, tucked in clear corners (inline desktop
     positions must be overridden with !important) */
  .pb-bit--stars { top: 10px !important; left: auto !important; right: 10px !important; width: 40px !important; }
  .pb-bit--wink { display: none; }

  /* hero */
  .pb-hero .pb-hero__mega-title { font-size: clamp(2.4rem, 11vw, 3rem); }
  .pb-hero__sub { font-size: var(--text-base); }
  .pb-hero__ctas, .pb-cta-ctas { flex-direction: column; align-items: stretch; gap: .7rem; }
  .pb-hero__ctas .pb-btn, .pb-cta-ctas .pb-btn { width: 100%; }

  /* countdown scene: desktop theatre only */
  .pb-count { display: none; }

  /* packages become a rail; card art is a desktop luxury */
  #packages .pb-cards {
    display: flex;
    overflow-x: auto;
    overflow-y: clip;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: .9rem;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem));
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-bottom: .5rem;
  }
  #packages .pb-cards::-webkit-scrollbar { display: none; }
  #packages .pb-card { flex: 0 0 78vw; scroll-snap-align: center; }
  #packages .pb-cards .reveal { transform: none; }
  .pb-card__art { display: none; }

  /* type scale */
  .pb-booking__title { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .pb-xhead h1 { font-size: clamp(2rem, 9.5vw, 2.6rem); }

  /* footer, compact edition: no logo (nav badge already brands the page),
     no marketing tagline, no column headings — GSL line, tappable contact
     rows, quick links as pill chips, legal line. */
  .pb-footer__logo { display: none; }
  .pb-footer__inner { padding-block: 1.5rem .9rem; }
  .pb-footer__grid { gap: 1.1rem; }
  .pb-footer__grid > div:first-child > p:first-of-type { display: none; }
  .pb-footer__grid > div:first-child > p { font-size: var(--text-sm); margin-bottom: 0; }
  .pb-footer h4 { display: none; }
  .pb-footer__contact { font-size: var(--text-sm); }
  .pb-footer__contact li { margin-bottom: .45rem; }
  .pb-footer__grid > div:nth-child(3) ul { display: flex; flex-wrap: wrap; gap: .5rem .45rem; }
  .pb-footer__grid > div:nth-child(3) li { margin-bottom: 0; }
  .pb-footer__grid > div:nth-child(3) a {
    display: inline-block;
    padding: .45rem .85rem;
    border: 1px solid rgba(246, 240, 231, .22);
    border-radius: var(--r-full);
    font-size: var(--text-sm);
  }
  .pb-footer__legal { margin-top: .9rem; padding-top: .8rem; font-size: var(--text-xs); }
}

/* ---- ≤400: booking progress bar breathing room -------------------------- */
@media (max-width: 400px) {
  .pb-progress__dot { width: 32px; height: 32px; }
  .pb-progress__bar { margin-inline: 4px; width: 18px; }
}

/* ---- sticky bottom action bar (marketing pages, phones) ----------------- */
.pb-actionbar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: .6rem;
  padding: .6rem clamp(1rem, 4vw, 2rem) max(.6rem, env(safe-area-inset-bottom));
  background: rgba(22, 18, 15, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(246, 240, 231, .12);
  transform: translateY(110%);
  transition: transform 250ms var(--ease-out);
}
.pb-actionbar.is-visible { transform: translateY(0); }
.pb-actionbar .pb-btn { width: 100%; padding: .8rem 1rem; font-size: var(--text-sm); }
.pb-actionbar .pb-btn--ghost { color: var(--pb-on-dark); border-color: rgba(246,240,231,.3); }
/* keep the page bottom clear of the fixed bar — the clearance lives INSIDE
   the charcoal footer so no cream body background can peek through */
@media (max-width: 640px) {
  body:has(.pb-actionbar) .pb-footer .pb-footer__inner {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .pb-actionbar { transition: none; }
}

/* Affiliate portal (§25b): tablets get a slimmer sidebar; phones stack it
   above the content as a scrolling bar, the month grid becomes a list of
   days with bookings, rows and headers wrap, review rows go vertical. */
@media (max-width: 900px) {
  .aff-shell { grid-template-columns: 176px minmax(0, 1fr); gap: 1.25rem; }
}
@media (max-width: 640px) {
  .aff-shell { grid-template-columns: 1fr; gap: 1rem; padding-top: 1rem; }
  .aff-side { position: static; gap: .5rem; }
  .aff-side__who { padding: .55rem .8rem; display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
  .aff-side__who strong { display: inline; font-size: var(--text-sm); margin: 0; }
  .aff-side__links { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .3rem; }
  .aff-side__links::-webkit-scrollbar { display: none; }
  .aff-side__links a, .aff-side__links button { width: auto; white-space: nowrap; padding: .5rem .7rem; font-size: var(--text-sm); }
  .aff-side__links form { margin-left: auto; }
  .aff-side__sep { display: none; }
  .aff-head { align-items: flex-start; }
  .aff-head__status { text-align: left; }
  .aff-head__status p { max-width: none !important; }
  .aff-main .pb-booking__title { font-size: var(--text-2xl); }
  .aff-main .pb-review__row { flex-direction: column; gap: .15rem; }
  .aff-main .pb-review__row dd { text-align: left; }
  .aff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .aff-stat { padding: .65rem .8rem; }
  .aff-cal__head { padding: .55rem .6rem; }
  .aff-cal__dow { display: none; }
  .aff-cal__week { grid-template-columns: 1fr; }
  .aff-cal__day { display: none; min-height: 0; border-right: 0; }
  .aff-cal__day.has-items, .aff-cal__day.is-today { display: block; }
  .aff-cal__day .aff-cal__num::after { content: attr(data-label); margin-left: .45rem; font-weight: 400; color: var(--pb-ink-soft); }
  .aff-cal__chip { white-space: normal; }
  .aff-row { flex-wrap: wrap; }
  .aff-row .aff-status { margin-left: 76px; }
  .aff-file { flex-wrap: wrap; }
  .aff-booths { grid-template-columns: 1fr; }
  .aff-main .pb-stepnav { flex-direction: column; align-items: stretch; }
  .aff-main .pb-stepnav .pb-btn { width: 100%; justify-content: center; }
}