/* =============================================================================
   PCGC - 0.2.0 — main stylesheet
   Built directly from the Panther City Golf Design System
   (colors_and_type.css + ui_kits/website/site.css), extended for WP templates
   and the seven landing pages.
   ============================================================================= */

/* ─── FONTS — self-hosted display + condensed (substitutions for Espiritu /
       Tay Barrera per the design system README). DM Sans + Caveat are pulled
       from Google Fonts in inc/enqueue.php. ───────────────────────────────── */
@font-face {
  font-family: 'Espiritu';
  src: url('../fonts/folklore.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tay Barrera';
  src: url('../fonts/barrera.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* palette */
  --pcgc-vanilla:        #f9f1ea;
  --pcgc-midnight:       #131111;
  --pcgc-goldenrod:      #f3b91a;
  --pcgc-cherry:         #ed1c24;
  --pcgc-denim:          #bce4f6;

  --pcgc-vanilla-2:      #f3e9dd;
  --pcgc-vanilla-3:      #ebdfd0;
  --pcgc-midnight-2:     #2a2625;
  --pcgc-midnight-3:     #4a4341;
  --pcgc-goldenrod-2:    #d99f0a;
  --pcgc-goldenrod-3:    #fbd673;
  --pcgc-cherry-2:       #c8141b;
  --pcgc-cherry-3:       #f25a60;
  --pcgc-denim-2:        #8ec9e7;

  --pcgc-bg:             var(--pcgc-vanilla);
  --pcgc-bg-alt:         var(--pcgc-vanilla-2);
  --pcgc-bg-dark:        var(--pcgc-midnight);
  --pcgc-bg-dark-alt:    var(--pcgc-midnight-2);
  --pcgc-surface:        #ffffff;
  --pcgc-divider:        var(--pcgc-vanilla-3);
  --pcgc-divider-dark:   rgba(255,255,255,0.12);

  --pcgc-fg:             var(--pcgc-midnight);
  --pcgc-fg-2:           var(--pcgc-midnight-3);
  --pcgc-fg-3:           #6b6260;
  --pcgc-fg-on-dark:     var(--pcgc-vanilla);
  --pcgc-fg-on-dark-2:   rgba(249,241,234,0.78);
  --pcgc-fg-on-dark-3:   rgba(249,241,234,0.55);

  --pcgc-accent:         var(--pcgc-cherry);
  --pcgc-accent-hover:   var(--pcgc-cherry-2);
  --pcgc-highlight:      var(--pcgc-goldenrod);
  --pcgc-link:           var(--pcgc-cherry);
  --pcgc-link-on-dark:   var(--pcgc-goldenrod);

  --pcgc-grain-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  --pcgc-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");

  --pcgc-font-display:   'Espiritu','Bevan','Ultra',Georgia,serif;
  --pcgc-font-condensed: 'Tay Barrera','Oswald','Barlow Condensed',system-ui,sans-serif;
  /* Script accents render in the display font, italicised (matches the hero
     "to you" treatment). Caveat-as-script is parked until Google Fonts
     loads cleanly in this environment. */
  --pcgc-font-script:    var(--pcgc-font-display);
  --pcgc-font-body:      'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --pcgc-h1-size: clamp(2.75rem,6vw,4.5rem);
  --pcgc-h2-size: clamp(2rem,4vw,3rem);
  --pcgc-h3-size: clamp(1.375rem,2.4vw,1.75rem);

  --pcgc-space-1: 4px;  --pcgc-space-2: 8px;   --pcgc-space-3: 12px;
  --pcgc-space-4: 16px; --pcgc-space-5: 24px;  --pcgc-space-6: 32px;
  --pcgc-space-7: 48px; --pcgc-space-8: 64px;  --pcgc-space-9: 96px;

  --pcgc-radius-sm: 4px;
  --pcgc-radius-md: 10px;
  --pcgc-radius-lg: 18px;
  --pcgc-radius-xl: 28px;
  --pcgc-radius-pill: 999px;

  --pcgc-shadow-sm:    0 1px 2px rgba(19,17,17,0.08), 0 1px 1px rgba(19,17,17,0.06);
  --pcgc-shadow-md:    0 4px 14px rgba(19,17,17,0.10);
  --pcgc-shadow-lg:    0 12px 32px rgba(19,17,17,0.16);
  --pcgc-shadow-xl:    0 24px 60px rgba(19,17,17,0.22);
  --pcgc-shadow-press: 0 1px 0 rgba(19,17,17,0.22);

  --pcgc-ease:     cubic-bezier(.2,.8,.2,1);
  --pcgc-ease-out: cubic-bezier(.16,1,.3,1);
  --pcgc-dur-fast: 140ms;
  --pcgc-dur-base: 240ms;
  --pcgc-dur-slow: 420ms;

  --pcgc-container: 1200px;
  --pcgc-gutter:    clamp(1rem,4vw,2.5rem);

  --pcgc-header-h: 72px;
}

/* ─── RESET / BASE ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--pcgc-header-h); }
body {
  font-family: var(--pcgc-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--pcgc-fg);
  background: var(--pcgc-vanilla);
  background-image: var(--pcgc-grain-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--pcgc-goldenrod); color: var(--pcgc-midnight); }

.skip-link {
  position: absolute; left: -9999px; top: -9999px;
  background: var(--pcgc-midnight); color: var(--pcgc-vanilla);
  padding: 12px 18px; border-radius: var(--pcgc-radius-sm); z-index: 1000;
}
.skip-link:focus { left: 16px; top: 16px; }

/* WP screen-reader text */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px);
  -webkit-clip-path: inset(50%); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute !important; word-wrap: normal !important;
}

/* ─── LAYOUT PRIMITIVES ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--pcgc-container);
  margin-inline: auto;
  padding-inline: var(--pcgc-gutter);
}
.section { padding-block: clamp(3rem,7vw,6rem); }
.section--tight { padding-block: clamp(2rem,4vw,3.25rem); }
.section--dark {
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  color: var(--pcgc-fg-on-dark);
}
.section--dark a:not(.btn) { color: var(--pcgc-link-on-dark); }
.section--alt { background: var(--pcgc-vanilla-2); }
.section--surface { background: var(--pcgc-surface); }

.section-header { text-align: center; margin-bottom: clamp(2rem,4vw,3.5rem); }
.section-header .lead { max-width: 60ch; margin-inline: auto; }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--pcgc-font-condensed);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pcgc-cherry);
  margin: 0 0 12px;
}
.section--dark .eyebrow { color: var(--pcgc-goldenrod); }

/* Espiritu / folklore ships only weight-400, so a slightly thicker look is
   achieved with -webkit-text-stroke instead of font-weight (which would force
   the browser to synthesize bold and usually looks ugly on display faces). */
.h1 {
  font-family: var(--pcgc-font-display);
  font-weight: 400;
  font-size: var(--pcgc-h1-size);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  -webkit-text-stroke: 0.6px currentColor;
}
.h2 {
  font-family: var(--pcgc-font-display);
  font-weight: 400;
  font-size: var(--pcgc-h2-size);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  -webkit-text-stroke: 0.5px currentColor;
}
.h3 {
  font-family: var(--pcgc-font-display);
  font-weight: 400;
  font-size: var(--pcgc-h3-size);
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
  -webkit-text-stroke: 0.4px currentColor;
}
.h4 {
  font-family: var(--pcgc-font-condensed);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.script {
  font-family: var(--pcgc-font-script);
  font-weight: 400;
  text-transform: uppercase;
  font-style: italic;
}
.lead {
  font-size: clamp(1.0625rem,1.6vw,1.25rem);
  line-height: 1.55;
  color: var(--pcgc-fg-2);
}
.section--dark .lead { color: rgba(249,241,234,0.78); }

/* Default WP heading flow inside .entry-content */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--pcgc-font-display);
  text-transform: uppercase;
  margin: 1.4em 0 0.5em;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0.5px currentColor;
}
.entry-content h1 { font-size: var(--pcgc-h1-size); line-height: 1.05; }
.entry-content h2 { font-size: var(--pcgc-h2-size); line-height: 1.1; }
.entry-content h3 { font-size: var(--pcgc-h3-size); line-height: 1.2; }
.entry-content p, .entry-content ul, .entry-content ol { margin: 0 0 1em; }
.entry-content a { color: var(--pcgc-cherry); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--pcgc-cherry-2); }
.entry-content blockquote {
  border-left: 3px solid var(--pcgc-cherry);
  padding: 0.5em 1.25em;
  margin: 1.5em 0;
  font-style: italic;
  color: var(--pcgc-fg-2);
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--pcgc-radius-sm);
  font-family: var(--pcgc-font-condensed);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: all var(--pcgc-dur-fast) var(--pcgc-ease);
  white-space: nowrap; border: 0; cursor: pointer; line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--pcgc-shadow-press); }
.btn:focus-visible { outline: 3px solid var(--pcgc-cherry); outline-offset: 3px; }

.btn--cherry   { background: var(--pcgc-cherry); color: #fff; }
.btn--cherry:hover { background: var(--pcgc-cherry-2); box-shadow: 0 6px 20px rgba(237,28,36,0.28); }
.btn--midnight { background: var(--pcgc-midnight); color: var(--pcgc-vanilla); }
.btn--midnight:hover { background: var(--pcgc-midnight-2); }
.btn--gold     { background: var(--pcgc-goldenrod); color: var(--pcgc-midnight); }
.btn--gold:hover { background: var(--pcgc-goldenrod-2); }
.btn--ghost    { background: transparent; color: var(--pcgc-vanilla); border: 2px solid rgba(249,241,234,0.55); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--pcgc-vanilla); }
.btn--outline  { background: transparent; color: var(--pcgc-midnight); border: 2px solid var(--pcgc-midnight); }
.btn--outline:hover { background: var(--pcgc-midnight); color: var(--pcgc-vanilla); }
.btn--lg { padding: 16px 32px; font-size: 15px; }
.btn--xl { padding: 18px 36px; font-size: 16px; }
.btn--full { width: 100%; }

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
.site-hd {
  position: sticky; top: 0; z-index: 60;
  height: var(--pcgc-header-h);
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  color: var(--pcgc-vanilla);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.site-hd__inner {
  height: 100%; display: flex; align-items: center; gap: 24px;
}
/* Logo — matches the legacy theme's pattern. */
.site-hd__logo a {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none !important;
}
.site-hd__logo img {
  height: 44px;
  width: auto;
}
.site-hd__logo-text {
  font-family: var(--pcgc-font-display);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pcgc-vanilla);
}

.site-hd__nav { margin-left: auto; min-width: 0; }
.site-hd__nav-list,
.site-hd__nav .menu,
.site-hd__nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 2px; align-items: center;
  flex-wrap: nowrap;
}
.site-hd__nav a {
  display: inline-block;
  padding: 8px 12px;
  font-family: var(--pcgc-font-condensed);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(249,241,234,0.85);
  border-radius: var(--pcgc-radius-sm);
  transition: all var(--pcgc-dur-fast) var(--pcgc-ease);
  white-space: nowrap;
  line-height: 1.1;
}
@media (max-width: 1100px) {
  .site-hd__nav a { padding: 8px 9px; font-size: 12px; letter-spacing: 0.04em; }
  .site-hd__inner { gap: 14px; }
}
.site-hd__nav a:hover,
.site-hd__nav .current-menu-item > a,
.site-hd__nav a.is-active {
  color: #fff; background: rgba(255,255,255,0.12);
}
.site-hd__cta { display: inline-flex; }

.site-hd__burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(249,241,234,0.25);
  border-radius: var(--pcgc-radius-sm);
  color: var(--pcgc-vanilla);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px; padding: 0;
}
.site-hd__burger span {
  display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
}

@media (max-width: 900px) {
  .site-hd__nav { display: none; }
  .site-hd__cta .btn { padding: 12px 20px; font-size: 13px; }
  .site-hd__burger { display: inline-flex; }
}
@media (max-width: 520px) {
  .site-hd__cta { display: none; }
}

/* Mobile nav overlay */
.mnav {
  position: fixed; inset: 0; z-index: 100;
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  color: var(--pcgc-vanilla);
  padding: 24px;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--pcgc-dur-base) var(--pcgc-ease),
              transform var(--pcgc-dur-base) var(--pcgc-ease);
}
.mnav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mnav__top { display: flex; justify-content: space-between; align-items: center; }
.mnav__close {
  width: 44px; height: 44px;
  border: 1px solid rgba(249,241,234,0.25);
  border-radius: var(--pcgc-radius-sm);
  font-size: 22px; color: var(--pcgc-vanilla);
}
.mnav__list { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-direction: column; gap: 4px; }
.mnav__list a {
  display: block; padding: 14px 8px;
  font-family: var(--pcgc-font-display);
  font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--pcgc-vanilla);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mnav__cta { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.mnav__phone {
  display: block; padding: 14px;
  font-family: var(--pcgc-font-condensed);
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pcgc-goldenrod); text-align: center;
  border: 1px solid rgba(243,185,26,0.4);
  border-radius: var(--pcgc-radius-sm);
}

/* ─── HERO (homepage) ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 0;
  padding-block: clamp(2rem,4vw,3.25rem);
  display: flex; align-items: center;
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  color: var(--pcgc-vanilla);
  overflow: hidden;
}
.hero__panther {
  position: absolute; right: -80px; bottom: -40px;
  width: clamp(420px,55vw,720px);
  opacity: 0.16; pointer-events: none;
}
.hero__content { position: relative; z-index: 2; max-width: 760px; }
.hero h1, .hero .h1 { color: var(--pcgc-vanilla); }
.hero h1 .accent, .hero .h1 .accent,
.hero h1 em, .hero .h1 em { color: var(--pcgc-cherry); font-style: italic; }
.hero h1 .script, .hero .h1 .script {
  font-family: var(--pcgc-font-script);
  color: var(--pcgc-goldenrod);
  display: inline-block; transform: rotate(-2deg);
}
.hero__sub {
  font-size: clamp(1.0625rem,2vw,1.25rem);
  line-height: 1.55;
  color: rgba(249,241,234,0.8);
  margin: 24px 0 32px;
  max-width: 56ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.hero__price { font-size: 14px; color: rgba(249,241,234,0.65); }
.hero__price strong {
  color: var(--pcgc-goldenrod);
  font-family: var(--pcgc-font-condensed);
  font-weight: 700;
}

/* ─── STAT BAR ───────────────────────────────────────────────────────────── */
.stats {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 36px;
}
.stats__item { text-align: center; flex: 1 1 140px; }
.stats__num {
  display: block;
  font-family: var(--pcgc-font-display);
  font-size: clamp(2rem,4vw,2.75rem);
  color: var(--pcgc-goldenrod);
  line-height: 1;
}
.stats__label {
  display: block;
  font-family: var(--pcgc-font-condensed);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(249,241,234,0.7);
  margin-top: 4px;
}
.stats__divider {
  width: 1px; height: 42px;
  background: rgba(255,255,255,0.18);
  flex: 0 0 1px;
}
@media (max-width: 700px) { .stats__divider { display: none; } }

/* ─── EVENT CARDS ────────────────────────────────────────────────────────── */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .events-grid { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1100px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }

/* ─── EVENTS CAROUSEL — peek-style slider for "Pick your format" ─────────── */
.events-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 8px;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.events-carousel__viewport {
  overflow: hidden;
  /* Allow card hover/shadow to escape the viewport without clipping */
  padding: 8px 4px 24px;
}
.events-carousel__track {
  display: flex;
  gap: 24px;
  transition: transform var(--pcgc-dur-base) var(--pcgc-ease-out);
  will-change: transform;
}
.events-carousel__slide {
  flex: 0 0 calc((100% - 48px) / 3); /* 3 cards visible at desktop */
  max-width: calc((100% - 48px) / 3);
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .events-carousel__slide { flex-basis: calc((100% - 24px) / 2); max-width: calc((100% - 24px) / 2); }
}
@media (max-width: 700px) {
  .events-carousel { grid-template-columns: 40px 1fr 40px; }
  .events-carousel__slide { flex-basis: 100%; max-width: 100%; }
}

/* 4-up variant — fits all four cards on a single row at desktop. Controls
   stay rendered but disable themselves automatically when nothing's hidden. */
.events-carousel--four .events-carousel__slide {
  flex: 0 0 calc((100% - 72px) / 4);
  max-width: calc((100% - 72px) / 4);
}
@media (max-width: 1180px) {
  .events-carousel--four .events-carousel__slide {
    flex-basis: calc((100% - 48px) / 3);
    max-width:  calc((100% - 48px) / 3);
  }
}
@media (max-width: 900px) {
  .events-carousel--four .events-carousel__slide {
    flex-basis: calc((100% - 24px) / 2);
    max-width:  calc((100% - 24px) / 2);
  }
}
@media (max-width: 600px) {
  .events-carousel--four .events-carousel__slide {
    flex-basis: 100%;
    max-width:  100%;
  }
}

.events-carousel__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--pcgc-vanilla);
  border: 2px solid var(--pcgc-midnight);
  color: var(--pcgc-midnight);
  font-size: 18px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--pcgc-shadow-sm);
  transition: transform var(--pcgc-dur-fast) var(--pcgc-ease),
              box-shadow var(--pcgc-dur-fast) var(--pcgc-ease),
              background var(--pcgc-dur-fast) var(--pcgc-ease);
}
.events-carousel__btn:hover {
  background: var(--pcgc-cherry);
  color: #fff;
  border-color: var(--pcgc-cherry);
  transform: translateY(-1px);
  box-shadow: var(--pcgc-shadow-md);
}
.events-carousel__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.events-carousel__dots {
  grid-column: 2;
  display: flex; gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.events-carousel__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pcgc-vanilla-3);
  border: 0;
  transition: all var(--pcgc-dur-fast) var(--pcgc-ease);
}
.events-carousel__dot.is-active {
  background: var(--pcgc-cherry);
  transform: scale(1.4);
}
.events-carousel__dot:hover { background: var(--pcgc-cherry-3); }

/* Cherry pill CTA — full-card-width so the icon + label center in the card.
   Tightened padding/letter-spacing so the panther + "GET A QUOTE" + arrow
   stay on one line even in 4-up cards. */
.ec__cta {
  margin-top: auto;
  align-self: stretch;
  width: 100%;
  font-size: 14px;
  padding: 14px 14px;
  gap: 8px;
  letter-spacing: 0.05em;
  min-width: 0;
}
.ec__cta > span:not(.ec__cta-icon) { min-width: 0; }
.ec__cta-icon {
  height: 22px;
  width: auto;
  display: inline-block;
  flex-shrink: 0;
  /* panther-face-black.png is the panther HEAD silhouette; recolor to white
     for legibility on the cherry button. */
  filter: brightness(0) invert(1);
}
/* On goldenrod / outline / ghost buttons the white silhouette would vanish
   into the background — keep it black instead. */
.btn--gold .ec__cta-icon,
.btn--outline .ec__cta-icon,
.btn--ghost .ec__cta-icon {
  filter: brightness(0);
}

.ec {
  position: relative;
  background: var(--pcgc-surface);
  border: 1px solid var(--pcgc-vanilla-3);
  border-radius: var(--pcgc-radius-md);
  padding: 44px 28px;
  display: flex; flex-direction: column;
  transition: all var(--pcgc-dur-base) var(--pcgc-ease);
  box-shadow: var(--pcgc-shadow-md);
}
.ec:hover { transform: translateY(-4px); box-shadow: var(--pcgc-shadow-lg); }
.ec__badge {
  position: absolute; top: -1px; right: 24px;
  background: var(--pcgc-cherry);
  color: #fff;
  font-family: var(--pcgc-font-condensed);
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 0 0 var(--pcgc-radius-sm) var(--pcgc-radius-sm);
}
.ec__icon { width: 64px; height: 64px; margin-bottom: 24px; object-fit: contain; }
.ec__title {
  font-family: var(--pcgc-font-display);
  font-size: 1.375rem;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 18px;
}
.ec__desc {
  font-size: 14px; line-height: 1.7;
  color: var(--pcgc-fg-2);
  margin: 0 0 26px; flex: 1;
}
.ec__bullets {
  list-style: none; padding: 0; margin: 0 0 30px;
  display: flex; flex-direction: column; gap: 12px;
}
.ec__bullets li {
  font-size: 13px; line-height: 1.5; padding-left: 22px; position: relative;
}
.ec__bullets li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--pcgc-cherry); font-weight: 700;
}
.ec__link {
  font-family: var(--pcgc-font-condensed);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pcgc-midnight); margin-top: auto;
  transition: color var(--pcgc-dur-fast) var(--pcgc-ease);
}
.ec__link:hover { color: var(--pcgc-cherry); }


/* On dark sections (e.g. landing-page "use cases") */
.section--dark .ec {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: var(--pcgc-vanilla);
  box-shadow: none;
}
.section--dark .ec__title { color: #fff; }
.section--dark .ec__desc  { color: rgba(255,255,255,0.65); }
.section--dark .ec__link  { color: var(--pcgc-goldenrod); }
.section--dark .ec__link:hover { color: #fff; }
.section--dark .ec__bullets li::before { color: var(--pcgc-goldenrod); }

/* ─── HOW IT WORKS — three steps on an arched dotted path ────────────────── */
.steps-section { overflow: hidden; }

.steps-head {
  margin-bottom: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.steps-head__title {
  color: var(--pcgc-vanilla);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  margin: 0;
}
.steps-head__title .script { color: var(--pcgc-goldenrod); }

.steps-arch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 2vw, 2rem);
  align-items: end;
  max-width: 980px;
  margin: 0 auto;
  padding-top: 80px;          /* room for the apex of the arch */
  padding-bottom: 24px;
}
.steps-arch__path {
  position: absolute;
  inset: 16% 4% auto 4%;
  height: 60%;
  width: auto;
  pointer-events: none;
  z-index: 0;
  width: 92%;
}

.step-card {
  position: relative;
  text-align: center;
  z-index: 1;
}
.step-card--mid {
  transform: translateY(clamp(-72px, -7vw, -40px));
}

.step-card__num {
  display: block;
  font-family: var(--pcgc-font-display);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  color: var(--pcgc-goldenrod);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

/* Flat colored disc with a hex-tile dimple grid — no fake sphere lighting. */
.step-card__ball {
  --ball-size: clamp(120px, 16vw, 168px);
  --dimple-x: 14px;
  --dimple-y: 24.25px;            /* dimple-x * √3 — hex-tile vertical step  */
  width: var(--ball-size);
  height: var(--ball-size);
  margin: 0 auto 18px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--pcgc-midnight);
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  /* Two staggered radial-gradient grids form the hex/honeycomb dimple field. */
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.30) 1.6px, transparent 2.0px),
    radial-gradient(circle, rgba(0,0,0,0.30) 1.6px, transparent 2.0px);
  background-size: var(--dimple-x) var(--dimple-y), var(--dimple-x) var(--dimple-y);
  background-position: 0 0, calc(var(--dimple-x) / 2) calc(var(--dimple-y) / 2);
  overflow: hidden;
}
.step-card__ball--yellow { background-color: var(--pcgc-goldenrod); }
.step-card__ball--cherry { background-color: var(--pcgc-cherry); }
.step-card__ball--cream  { background-color: var(--pcgc-vanilla); }

.step-card__panther {
  width: 70%;
  height: auto;
  position: relative;
  z-index: 1;
  pointer-events: none;
  /* drop a tiny embossed feel onto the silhouette */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}
/* `panther-black.png` is solid black on transparent; recolor via filter
   for the white panther on the cherry ball. */
.step-card__panther--white {
  filter: brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}

.step-card__title {
  font-family: var(--pcgc-font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  text-transform: uppercase;
  color: var(--pcgc-vanilla);
  margin: 0 0 6px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.step-card__sub {
  font-family: var(--pcgc-font-condensed);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pcgc-goldenrod);
  margin: 0;
}

.steps-cta {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .steps-arch {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 24px;
    max-width: 380px;
  }
  .steps-arch__path { display: none; }
  .step-card--mid   { transform: none; }
  .step-card--left  .step-card__pill,
  .step-card--mid   .step-card__pill,
  .step-card--right .step-card__pill { transform: rotate(-3deg); }
}

/* ─── TECH HIGHLIGHT ─────────────────────────────────────────────────────── */
.tech-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .tech-grid { grid-template-columns: 1fr; gap: 32px; } }

.tech-screen {
  background: var(--pcgc-midnight);
  border-radius: var(--pcgc-radius-lg);
  padding: 16px;
  position: relative;
  box-shadow: var(--pcgc-shadow-xl);
}
.tech-screen__inner {
  background: linear-gradient(180deg, #1f3a3a, #0e1d1d);
  border-radius: var(--pcgc-radius-md);
  aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
}
.tech-screen__green {
  width: 90%; height: 70%;
  background: radial-gradient(ellipse at 50% 35%, #4a8c4a 0%, #2c5a2c 70%, #1a3a1a 100%);
  border-radius: 50%; position: relative;
}
.tech-screen__flag {
  position: absolute; left: 50%; top: 25%;
  width: 2px; height: 36%;
  background: #f9f1ea;
  transform: translateX(-50%);
}
.tech-screen__flag::before {
  content: '';
  position: absolute; top: 0; left: 2px;
  width: 16px; height: 10px;
  background: var(--pcgc-cherry);
}
.tech-screen__ball {
  position: absolute; left: 30%; top: 70%;
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,255,255,0.6);
}
.tech-screen__metrics { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.metric {
  flex: 1 1 120px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(243,185,26,0.25);
  border-radius: 8px;
  padding: 10px 12px;
}
.metric__val {
  display: block;
  font-family: var(--pcgc-font-display);
  font-size: 1.5rem;
  color: var(--pcgc-goldenrod);
  line-height: 1;
}
.metric__label {
  display: block;
  font-family: var(--pcgc-font-condensed);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(249,241,234,0.6);
  margin-top: 4px;
}

.tech-features {
  list-style: none; padding: 0;
  margin: 24px 0;
  display: flex; flex-direction: column; gap: 18px;
}
.tech-feature { display: flex; gap: 14px; align-items: flex-start; }
.tech-feature__icon { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; }
.tech-feature strong {
  font-family: var(--pcgc-font-condensed);
  font-weight: 700; font-size: 16px;
  letter-spacing: 0.02em; text-transform: uppercase;
  display: block; margin-bottom: 4px;
}
.tech-feature p { font-size: 14px; line-height: 1.55; color: var(--pcgc-fg-2); margin: 0; }
.section--dark .tech-feature p { color: rgba(249,241,234,0.78); }

/* ─── FAQ ────────────────────────────────────────────────────────────────── */
.faq-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: flex-start;
}
@media (max-width: 800px) { .faq-grid { grid-template-columns: 1fr; } }

.faq-item { border-bottom: 1px solid var(--pcgc-vanilla-3); }
.faq-q {
  width: 100%;
  padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  text-align: left;
  font-family: var(--pcgc-font-condensed);
  font-weight: 600; font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--pcgc-fg);
  transition: color var(--pcgc-dur-fast) var(--pcgc-ease);
}
.faq-q:hover { color: var(--pcgc-cherry); }
.faq-q__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pcgc-vanilla-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--pcgc-cherry);
  flex-shrink: 0;
  transition: all var(--pcgc-dur-base) var(--pcgc-ease);
}
.faq-item.is-open .faq-q__icon {
  background: var(--pcgc-cherry);
  color: #fff;
  transform: rotate(45deg);
}
.faq-a {
  padding: 0 0 18px;
  font-size: 14px; line-height: 1.6;
  color: var(--pcgc-fg-2);
  display: none;
}
.faq-item.is-open .faq-a { display: block; }

.faq-side {
  background: var(--pcgc-surface);
  border-radius: var(--pcgc-radius-lg);
  padding: 28px;
  box-shadow: var(--pcgc-shadow-md);
  border: 1px solid var(--pcgc-vanilla-3);
}
.faq-side h3, .faq-side .h3 { margin-bottom: 8px; }
.faq-side p { font-size: 14px; color: var(--pcgc-fg-2); margin: 0 0 16px; }
.faq-side .btn { width: 100%; }
.faq-side .btn + .btn { margin-top: 10px; }

/* Dark-section variant — used by the homepage FAQ. */
.section--dark .h1,
.section--dark .h2,
.section--dark .h3,
.section--dark .h4 { color: var(--pcgc-vanilla); }

.section--dark .faq-item { border-bottom-color: rgba(255,255,255,0.10); }
.section--dark .faq-q { color: var(--pcgc-vanilla); }
.section--dark .faq-q:hover { color: var(--pcgc-goldenrod); }
.section--dark .faq-q__icon {
  background: rgba(255,255,255,0.08);
  color: var(--pcgc-goldenrod);
}
.section--dark .faq-item.is-open .faq-q__icon {
  background: var(--pcgc-cherry);
  color: #fff;
}
.section--dark .faq-a { color: rgba(249,241,234,0.78); }

/* Side "Still got questions?" card stays cream — keep its text dark-on-cream
   so it doesn't inherit the dark-section overrides above. */
.section--dark .faq-side,
.section--dark .faq-side p { color: var(--pcgc-fg); }
.section--dark .faq-side .h1,
.section--dark .faq-side .h2,
.section--dark .faq-side .h3,
.section--dark .faq-side .h4 { color: var(--pcgc-fg); }
.section--dark .faq-side p { color: var(--pcgc-fg-2); }

/* ─── BOOKING CTA (cream card) ───────────────────────────────────────────── */
.cta-block {
  position: relative;
  background: var(--pcgc-vanilla);
  border: 1px solid rgba(19,17,17,0.10);
  border-radius: 20px;
  padding: clamp(2.5rem,6vw,4.5rem);
  text-align: center;
  color: var(--pcgc-fg);
  overflow: hidden;
}
.cta-block::before {
  content: '';
  position: absolute; left: 50%; top: 32px;
  transform: translateX(-50%);
  width: 56px; height: 2px;
  background: var(--pcgc-cherry);
  border-radius: 2px;
  opacity: 0.7;
}
.cta-block .h2 { color: var(--pcgc-fg); margin-top: 6px; }
.cta-block .h2 .script { color: var(--pcgc-cherry); font-style: italic; }
.cta-block__desc {
  font-size: 1rem; line-height: 1.6;
  max-width: 48ch;
  margin: 14px auto 28px;
  color: var(--pcgc-fg-2);
}
.cta-block__cta {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.cta-block__cta .btn--midnight { background: var(--pcgc-cherry); color: #fff; }
.cta-block__cta .btn--midnight:hover { background: var(--pcgc-cherry-2); }
.cta-block__cta .btn--gold {
  background: transparent; color: var(--pcgc-fg);
  border: 1px solid rgba(19,17,17,0.22);
}
.cta-block__cta .btn--gold:hover { background: rgba(19,17,17,0.05); }
.cta-block__trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px;
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--pcgc-fg-3);
  font-family: var(--pcgc-font-condensed);
  text-transform: uppercase;
}
.cta-block__trust span::before { content: '·  '; color: var(--pcgc-fg-3); }
.cta-block__trust span:first-child::before { content: ''; }

/* Sticky mobile "Ready to tee it up" ribbon */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  color: var(--pcgc-vanilla);
  padding: 10px 16px;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: 0 -2px 14px rgba(0,0,0,0.25);
  transform: translateY(110%);
  transition: transform var(--pcgc-dur-base) var(--pcgc-ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__label {
  font-family: var(--pcgc-font-condensed);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pcgc-goldenrod);
}
.sticky-cta .btn { padding: 10px 18px; font-size: 13px; }
@media (max-width: 700px) { .sticky-cta { display: flex; } }

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.footer {
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  color: var(--pcgc-vanilla);
  padding: 0 0 24px;          /* top padding handled by .footer__brand */
  position: relative; overflow: hidden;
}
.footer__ghost {
  position: absolute; right: -120px; bottom: -80px;
  width: 540px; opacity: 0.16; pointer-events: none;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px 32px;
  margin-top: 8px;
  position: relative; z-index: 2;
}
/* Keep multi-column layout all the way down to phones — never collapse to a
   single stacked column. */
@media (max-width: 800px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }
}

/* Top-of-footer centered brand lockup — tight top, flush bottom. */
.footer__brand {
  position: relative; z-index: 2;
  text-align: center;
  margin: 0 auto;
  padding: 8px var(--pcgc-gutter) 0;
}
.footer__brand img {
  display: block;
  height: 147px;            /* 5% larger than the previous 140px */
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}

.footer__tag {
  color: rgba(249,241,234,0.82);
  font-size: 14px; line-height: 1.6;
  margin: 0 0 22px; max-width: 36ch;
}
.footer__meta {
  list-style: none; padding: 14px 0; margin: 0 0 22px;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  display: flex; flex-direction: column; gap: 6px;
}
.footer__meta li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 12px;
}
.footer__meta-k {
  color: var(--pcgc-goldenrod);
  font-family: var(--pcgc-font-condensed);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer__meta-v {
  color: rgba(249,241,234,0.85);
  font-family: var(--pcgc-font-condensed);
  letter-spacing: 0.04em;
}
/* Social — lives at the bottom of the rightmost "Get In Touch" column. */
.footer__contact { display: flex; flex-direction: column; }
/* Brand-aligned social glyphs — single-color SVG marks (not round buttons).
 * Inherit `color: var(--pcgc-cherry)` so the SVGs paint via `currentColor`. */
.footer__social {
  display: flex; gap: 14px;
  margin-top: 18px;
  align-items: center;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  color: var(--pcgc-cherry);
  background: none;
  border: 0;
  border-radius: 0;
  transition: color var(--pcgc-dur-fast) var(--pcgc-ease),
              transform var(--pcgc-dur-fast) var(--pcgc-ease);
}
.footer__social a svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}
.footer__social a:hover,
.footer__social a:focus-visible {
  color: var(--pcgc-goldenrod);
  transform: translateY(-2px);
}
.footer__social a:focus-visible {
  outline: 2px solid var(--pcgc-goldenrod);
  outline-offset: 4px;
  border-radius: 2px;
}
.footer h4 {
  font-family: var(--pcgc-font-condensed);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pcgc-goldenrod);
  margin: 0 0 14px;
}
.footer ul:not(.footer__meta) {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.footer ul a {
  font-size: 14px;
  color: rgba(249,241,234,0.78);
  transition: color var(--pcgc-dur-fast) var(--pcgc-ease);
}
.footer ul a:hover { color: var(--pcgc-vanilla); }

.footer__bottom {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  color: rgba(249,241,234,0.55);
  flex-wrap: wrap; gap: 12px;
}
.footer__bottom-legal a {
  color: rgba(249,241,234,0.55);
  transition: color var(--pcgc-dur-fast) var(--pcgc-ease);
}
.footer__bottom-legal a:hover { color: var(--pcgc-vanilla); }

/* ─── BOOKING MODAL ──────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(19,17,17,0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--pcgc-dur-base) var(--pcgc-ease);
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--pcgc-vanilla);
  background-image: var(--pcgc-grain-light);
  border-radius: var(--pcgc-radius-lg);
  max-width: 560px; width: 100%;
  padding: 36px;
  box-shadow: var(--pcgc-shadow-xl);
  position: relative;
  transform: translateY(20px);
  transition: transform var(--pcgc-dur-base) var(--pcgc-ease);
  max-height: 92vh; overflow-y: auto;
}
/* Booking variant — wide enough to host the Amelia widget; tight padding so
   Amelia's own internal padding does the spatial work. */
.modal--booking {
  max-width: 960px;
  padding: 14px 14px 14px;
}
.modal--booking .eyebrow { margin-bottom: 2px; font-size: 11px; }
.modal--booking .h2 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); margin-bottom: 0; line-height: 1.1; }
.modal--booking .modal__sub { margin: 4px 0 8px; font-size: 12.5px; line-height: 1.4; }
.modal__amelia { margin: 0; }
.modal__amelia-fallback {
  background: rgba(243,185,26,0.12);
  border: 1px solid rgba(243,185,26,0.35);
  border-radius: var(--pcgc-radius-sm);
  padding: 14px 16px;
  font-size: 14px;
}
.modal__amelia-fallback a { color: var(--pcgc-cherry); text-decoration: underline; text-underline-offset: 3px; }

/* ─── AMELIA BRAND OVERRIDES ──────────────────────────────────────────────
   Amelia v2 used `#amelia-container` as the token-bearing root, but v3 (the
   Vue 3 SPA that ships with the current plugin) mounts the booking app
   inside `<step-form-wrapper>` under `<div id="amelia-v2-booking-NNNN"
   class="amelia-v2-booking">`. The `#amelia-container` element doesn't
   exist in v3, so we target BOTH selectors below — v2 (legacy) and v3
   (current) — and let the tokens cascade into the Vue tree. */
body #amelia-container,
body [id^="amelia-v2-booking"] #amelia-container,
body .amelia-v2-booking #amelia-container,
body [id^="amelia-v2-booking"],
body .amelia-v2-booking {
  /* Brand palette */
  --am-c-primary:             var(--pcgc-cherry)    !important;
  --am-c-primary-h:           var(--pcgc-cherry-2)  !important;
  --am-c-success:             #2c7a4b               !important;
  --am-c-error:               var(--pcgc-cherry-2)  !important;
  --am-c-warning:             var(--pcgc-goldenrod) !important;

  /* Main canvas — cream with midnight ink */
  --am-c-main-bgr:            var(--pcgc-vanilla)   !important;
  --am-c-main-heading-text:   var(--pcgc-midnight)  !important;
  --am-c-main-text:           var(--pcgc-midnight)  !important;

  /* Sidebar — midnight with vanilla text (replaces the navy default) */
  --am-c-sb-bgr:              var(--pcgc-midnight)  !important;
  --am-c-sb-text:             var(--pcgc-vanilla)   !important;

  /* Inputs */
  --am-c-inp-bgr:             #ffffff               !important;
  --am-c-inp-text:            var(--pcgc-midnight)  !important;
  --am-c-inp-placeholder:     var(--pcgc-fg-3)      !important;
  --am-c-inp-border:          var(--pcgc-vanilla-3) !important;

  /* Dropdown panels */
  --am-c-drop-bgr:            #ffffff               !important;
  --am-c-drop-text:           var(--pcgc-midnight)  !important;

  /* Buttons */
  --am-c-btn-prim:            var(--pcgc-cherry)    !important;
  --am-c-btn-prim-text:       #ffffff               !important;
  --am-c-btn-sec:             var(--pcgc-midnight)  !important;
  --am-c-btn-sec-text:        var(--pcgc-vanilla)   !important;

  /* Calendar — Amelia v3 uses these tokens for the date grid. Selectable
     days currently render in Amelia's default blue; remap to the cherry
     family so available dates match the booking button. */
  --am-c-cal-active:          var(--pcgc-cherry)    !important;
  --am-c-cal-active-bgr:      rgba(237,28,36,0.10)  !important;
  --am-c-cal-active-text:     var(--pcgc-cherry)    !important;
  --am-c-cal-selected:        var(--pcgc-cherry)    !important;
  --am-c-cal-selected-bgr:    var(--pcgc-cherry)    !important;
  --am-c-cal-selected-text:   #ffffff               !important;
  --am-c-cal-today:           var(--pcgc-goldenrod) !important;
  --am-c-cal-hover-bgr:       rgba(237,28,36,0.06)  !important;
  --am-c-day-available:       var(--pcgc-cherry)    !important;
  --am-c-day-available-bgr:   rgba(237,28,36,0.10)  !important;
  --am-c-day-selected:        #ffffff               !important;
  --am-c-day-selected-bgr:    var(--pcgc-cherry)    !important;

  /* Body font — switch from Amelia Roboto to our DM Sans stack */
  --am-font-family:           var(--pcgc-font-body) !important;
}

/* Headings inside the widget — display font, all caps, midnight ink. */
#amelia-container h1,
#amelia-container h2,
#amelia-container h3,
#amelia-container h4,
#amelia-container .am-fs__main h2,
#amelia-container .am-fs-sb h3 {
  font-family: var(--pcgc-font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  -webkit-text-stroke: 0.4px currentColor;
}

/* Sidebar step labels — condensed all-caps mirrors site eyebrow style. */
#amelia-container .am-fs-sb [class*="step"],
#amelia-container .am-fs-sb a {
  font-family: var(--pcgc-font-condensed) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Active step in the sidebar — cherry accent + cream chip */
#amelia-container .am-fs-sb [class*="active"],
#amelia-container .am-fs-sb [class*="current"] {
  color: var(--pcgc-goldenrod) !important;
}

/* Continue / primary CTA — square stamp, condensed, all caps. */
#amelia-container button[class*="primary"],
#amelia-container .am-button-primary,
#amelia-container [class*="btn-primary"] {
  border-radius: var(--pcgc-radius-sm) !important;
  font-family: var(--pcgc-font-condensed) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Field labels — condensed eyebrow style. */
#amelia-container label,
#amelia-container .am-form-label {
  font-family: var(--pcgc-font-condensed) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--pcgc-fg-3) !important;
}

/* Strip Amelia's default rounded card chrome inside the modal so the cream
   modal background shows through. */
.modal__amelia #amelia-container,
.modal__amelia [class*="amelia"] {
  background: transparent !important;
  box-shadow: none !important;
}
.modal__amelia #amelia-container .am-fs__wrapper {
  background: transparent !important;
}

/* ─── Force-recolor Amelia v2 elements that bake their colors directly into
       the bundled CSS (variables alone don't reach them). ────────────────── */

/* Sidebar — midnight ink instead of navy. */
html body #amelia-container .am-fs-sb,
html body #amelia-container [role="complementary"] {
  background-color: var(--pcgc-midnight) !important;
  background-image: var(--pcgc-grain-dark) !important;
  color: var(--pcgc-vanilla) !important;
}
html body #amelia-container .am-fs-sb svg,
html body #amelia-container .am-fs-sb [class*="step"],
html body #amelia-container .am-fs-sb [class*="title"] {
  color: var(--pcgc-vanilla) !important;
  fill: currentColor !important;
}
/* Active / current step pill in the sidebar — cherry stamp on midnight. */
html body #amelia-container .am-fs-sb [class*="active"],
html body #amelia-container .am-fs-sb [class*="current"],
html body #amelia-container .am-fs-sb [aria-current="true"] {
  background-color: rgba(237,28,36,0.22) !important;
  color: var(--pcgc-goldenrod) !important;
}

/* Primary button (Continue, Confirm, Book) — cherry. The Amelia v2 button
   class is opaque, so we cast a wide net and exclude obvious secondaries. */
html body #amelia-container .am-fs__main button[type="button"]:not([class*="cancel"]):not([class*="back"]):not([class*="secondary"]):not([class*="ghost"]):not([class*="link"]),
html body #amelia-container .am-fs__main [class*="primary"][class*="button"],
html body #amelia-container button[class*="am-button"],
html body #amelia-container .am-button-primary,
html body #amelia-container [class*="btn-primary"] {
  background-color: var(--pcgc-cherry) !important;
  border-color: var(--pcgc-cherry) !important;
  color: #fff !important;
  border-radius: var(--pcgc-radius-sm) !important;
  font-family: var(--pcgc-font-condensed) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
html body #amelia-container .am-fs__main button[type="button"]:hover {
  background-color: var(--pcgc-cherry-2) !important;
  border-color: var(--pcgc-cherry-2) !important;
}

/* Secondary / cancel / back / ghost buttons — midnight outline. */
html body #amelia-container button[class*="cancel"],
html body #amelia-container button[class*="back"],
html body #amelia-container button[class*="secondary"],
html body #amelia-container button[class*="ghost"] {
  background-color: transparent !important;
  border: 1px solid var(--pcgc-midnight) !important;
  color: var(--pcgc-midnight) !important;
}

/* Service Selection / Date & Time / Your Information pane heading. */
html body #amelia-container .am-fs__main > div > h1,
html body #amelia-container .am-fs__main > div > h2,
html body #amelia-container .am-fs__main [class*="title"]:not(.am-fs-sb [class*="title"]) {
  font-family: var(--pcgc-font-display) !important;
  text-transform: uppercase !important;
  color: var(--pcgc-midnight) !important;
  -webkit-text-stroke: 0.4px currentColor;
}

/* Loader / progress ring on active step — recolor the blue. */
html body #amelia-container svg circle[stroke="#1246D6"],
html body #amelia-container svg [stroke^="#12"],
html body #amelia-container svg [stroke^="#26"] {
  stroke: var(--pcgc-cherry) !important;
}
html body #amelia-container svg [fill="#1246D6"],
html body #amelia-container svg [fill^="#26"] {
  fill: var(--pcgc-cherry) !important;
}

/* ─── Amelia container — strip wasteful padding ────────────────────────── */
/* Amelia ships generous internal padding (sidebar has 69px padding-bottom
   set inline, main pane reserves a tall min-height). Override aggressively
   so the widget hugs the modal/booking-card frame. */
html body #amelia-container,
html body #amelia-container .am-fs__wrapper {
  padding: 0 !important;
  margin: 0 !important;
}
html body #amelia-container .am-fs-sb {
  padding: 14px 12px !important;
  padding-bottom: 14px !important;
}
html body #amelia-container .am-fs__main {
  padding: 16px !important;
  min-height: 0 !important;
}
html body #amelia-container .am-fs__main > * {
  padding: 0 !important;
  min-height: 0 !important;
}
/* Inner content blocks (Service Selection card, Date & Time, etc.) —
   suppress Amelia's chrome padding/margin around header/title and
   footer/actions elements. NOTE: `#amelia-container` IS present in v3 — it
   gets created by Vue inside `<step-form-wrapper>` at mount time. Earlier
   I incorrectly assumed it didn't exist (the static view-source HTML hides
   it) and added redundant v3-flavored rules below; those rules had lower
   specificity than these and were being overridden — these are the rules
   to edit when adjusting spacing around headers/titles/footers/actions. */
html body #amelia-container .am-fs__main [class*="header"],
html body #amelia-container .am-fs__main [class*="title"] {
  padding: 0 !important;
  margin: 0 !important;
}
html body #amelia-container .am-fs__main [class*="footer"],
html body #amelia-container .am-fs__main [class*="actions"] {
  padding: 12px 0 0 !important;
  margin: 16px 0 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   AMELIA v3 — STRUCTURAL FIXES (NO COLOR)
   DOM-verified rules that only touch layout/spacing. Color overrides were
   tried (cherry on step title, timezone pill, day labels, calendar dates,
   Continue button) and rolled back at the user's request — Amelia's stock
   palette stays.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Step heading row (back button + step title) ───────────────────────────
   DOM:
     .am-fs__main-heading
       .am-fs__main-heading-inner
         button.am-heading-prev (back button)
         span.am-fs__main-heading-inner-title  ← "Date & Time" etc.
   The two children are inline siblings → button sits on a different baseline
   from the title. Flex-align + tighten padding (~half of Amelia's default). */
.am-fs__main-heading {
  padding: 12px 16px !important;
  margin: 0 !important;
}
.am-fs__main-heading-inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Step name title — cherry red, bumped to ~22px so it reads as the section
   header it actually is. Applies to every step. */
.am-fs__main-heading-inner-title {
  color: var(--pcgc-cherry) !important;
  font-size: 1.375rem !important;
  line-height: 1.2 !important;
}

/* ── Day-of-week row (Mon Tue Wed …) — collapse vertical space ─────────────
   DOM:
     th.fc-col-header-cell.am-advsc__dayGridMonth-header-cell
       div.fc-scrollgrid-sync-inner
         a.fc-col-header-cell-cushion ("Mon")
   FullCalendar pads each of those three layers, plus the row itself, so the
   day labels render very tall with a big gap above the first date row. Zero
   the bottom contributions and tighten the cushion's line-height. */
.am-advsc__dayGridMonth-header-cell {
  padding: 4px 0 0 !important;     /* small top, no bottom */
}
.am-advsc__dayGridMonth-header-cell .fc-scrollgrid-sync-inner {
  padding: 0 !important;
  margin: 0 !important;
}
.am-advsc__dayGridMonth-header-cell .fc-col-header-cell-cushion {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}
.am-advsc .fc-scrollgrid-section-header > th {
  padding: 0 !important;
}
.am-advsc .fc-scrollgrid-section-body > td {
  padding-top: 4px !important;
}

/* ── Header SECTION height — the real cause of the days→dates gap ──────────
   FullCalendar uses a "liquid" grid layout (`.fc-scrollgrid-liquid` +
   `.fc-scroller-liquid-absolute`). Inside the inline-sized `.fc-view-harness`
   it distributes vertical space across the header and body sections — the
   header section frequently ends up much taller than its single row of day
   labels needs (e.g., `.fc-view-harness: 292px`, body table `216px`, header
   section gets the leftover `~76px` for a `~20px` row of labels). Padding
   tweaks can't touch this because the gap is the section's allocated HEIGHT,
   not anyone's padding/margin. Force the header section and every wrapper
   inside it to size to content, and zero out border-spacing on the table
   itself so the two sections sit tight. */
.am-advsc .fc-scrollgrid-section-header,
.am-advsc .fc-scrollgrid-section-header > th {
  height: auto !important;
  min-height: 0 !important;
}
.am-advsc .fc-scrollgrid-section-header .fc-scroller-harness,
.am-advsc .fc-scrollgrid-section-header .fc-scroller,
.am-advsc .fc-scrollgrid-section-header .fc-col-header {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.am-advsc .fc-scrollgrid,
.am-advsc .fc-col-header,
.am-advsc .fc-scrollgrid-sync-table {
  border-spacing: 0 !important;
}
.am-advsc .fc-scrollgrid-section-body .fc-scroller-harness,
.am-advsc .fc-scrollgrid-section-body .fc-scroller,
.am-advsc .fc-daygrid-body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Calendar / footer overlap — DATE & TIME STEP ONLY ─────────────────────
   The compound selector `.am-fs-dt__calendar.am-fs__main-content` matches
   only the Date & Time step's calendar container (the `am-fs-dt__calendar`
   class is unique to that step). Adding bottom clearance here cannot
   regress Service Selection / Your Information / Payments because their
   content area is just `.am-fs__main-content` without the dt class. */
.am-fs-dt__calendar.am-fs__main-content {
  padding-bottom: 56px !important;
}

.modal-overlay.is-open .modal { transform: translateY(0); }
.modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--pcgc-vanilla-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--pcgc-fg);
}
.modal h2, .modal .h2 { margin-bottom: 4px; }
.modal__sub { color: var(--pcgc-fg-2); margin: 0 0 24px; font-size: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
  font-family: var(--pcgc-font-condensed);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pcgc-fg-3);
}
.field input, .field select, .field textarea {
  font: inherit;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--pcgc-vanilla-3);
  background: #fff;
  outline: none;
  transition: all var(--pcgc-dur-fast) var(--pcgc-ease);
  color: var(--pcgc-fg);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pcgc-cherry);
  box-shadow: 0 0 0 3px rgba(237,28,36,0.15);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--pcgc-midnight);
  color: var(--pcgc-vanilla);
  padding: 14px 22px;
  border-radius: var(--pcgc-radius-md);
  box-shadow: var(--pcgc-shadow-xl);
  display: flex; align-items: center; gap: 10px;
  z-index: 250;
  opacity: 0;
  transition: all var(--pcgc-dur-base) var(--pcgc-ease);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast__check {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--pcgc-goldenrod);
  color: var(--pcgc-midnight);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

/* ─── BREADCRUMB ─────────────────────────────────────────────────────────── */
.breadcrumb { margin-bottom: 18px; }
.breadcrumb__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  font-family: var(--pcgc-font-condensed);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(249,241,234,0.7);
}
.breadcrumb__item + .breadcrumb__item::before {
  content: '/'; margin-right: 8px; color: rgba(249,241,234,0.35);
}
.breadcrumb__item a { color: var(--pcgc-goldenrod); transition: color var(--pcgc-dur-fast) var(--pcgc-ease); }
.breadcrumb__item a:hover { color: var(--pcgc-vanilla); }
.breadcrumb__item[aria-current="page"] { color: var(--pcgc-vanilla); }
.lp-hero--cream .breadcrumb__list { color: var(--pcgc-fg-3); }
.lp-hero--cream .breadcrumb__item a { color: var(--pcgc-cherry); }
.lp-hero--cream .breadcrumb__item a:hover { color: var(--pcgc-cherry-2); }
.lp-hero--cream .breadcrumb__item[aria-current="page"] { color: var(--pcgc-fg); }
.lp-hero--cream .breadcrumb__item + .breadcrumb__item::before { color: var(--pcgc-fg-3); }

/* ─── LANDING-PAGE HERO ──────────────────────────────────────────────────── */
.lp-hero {
  position: relative;
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  color: var(--pcgc-vanilla);
  padding-block: clamp(3.5rem,8vw,6rem);
  text-align: center;
  overflow: hidden;
}
.lp-hero--tight { padding-block: clamp(2rem,4vw,3.25rem); }
.lp-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  pointer-events: none;
}
.lp-hero__panther {
  position: absolute; right: -60px; bottom: -30px;
  width: clamp(280px,40vw,520px);
  opacity: 0.12; pointer-events: none;
}
.lp-hero__inner { position: relative; z-index: 2; }
.lp-hero .h1 { color: var(--pcgc-vanilla); margin-bottom: 16px; }
.lp-hero .h1 em, .lp-hero .h1 .script {
  font-family: var(--pcgc-font-script);
  font-style: italic;
  color: var(--pcgc-goldenrod);
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0;
}
.lp-hero__sub {
  font-size: clamp(1rem,1.6vw,1.125rem);
  line-height: 1.55;
  color: rgba(249,241,234,0.78);
  max-width: 60ch;
  margin: 0 auto 28px;
}
.lp-hero__cta {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* Cream variant for shop / lighter pages */
.lp-hero--cream {
  background: var(--pcgc-vanilla);
  background-image: var(--pcgc-grain-light);
  color: var(--pcgc-fg);
}
.lp-hero--cream .h1 { color: var(--pcgc-fg); }
.lp-hero--cream .h1 em, .lp-hero--cream .h1 .script { color: var(--pcgc-cherry); }
.lp-hero--cream .lp-hero__sub { color: var(--pcgc-fg-2); }

/* ─── PRICING GRID (landing pages) ───────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 20px;
}
.pc {
  position: relative;
  background: var(--pcgc-surface);
  border: 1px solid var(--pcgc-vanilla-3);
  border-radius: var(--pcgc-radius-md);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  box-shadow: var(--pcgc-shadow-sm);
  transition: transform var(--pcgc-dur-base) var(--pcgc-ease),
              box-shadow var(--pcgc-dur-base) var(--pcgc-ease);
}
.pc:hover { transform: translateY(-3px); box-shadow: var(--pcgc-shadow-md); }
.pc--featured {
  border: 2px solid var(--pcgc-cherry);
  box-shadow: var(--pcgc-shadow-md);
}
.pc__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--pcgc-cherry);
  color: #fff;
  font-family: var(--pcgc-font-condensed);
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--pcgc-radius-sm);
}
.pc__label {
  font-family: var(--pcgc-font-condensed);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pcgc-fg-3);
  margin: 0 0 8px;
}
.pc__price {
  font-family: var(--pcgc-font-display);
  font-size: 2rem;
  color: var(--pcgc-cherry);
  line-height: 1;
  margin: 0 0 4px;
}
.pc__duration {
  font-size: 13px;
  color: var(--pcgc-fg-2);
  margin: 0 0 18px;
}
.pc__features {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.pc__features li {
  font-size: 13px; line-height: 1.4;
  padding-left: 22px; position: relative;
}
.pc__features li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--pcgc-cherry); font-weight: 700;
}
.pc__cta { width: 100%; }

/* Add-ons table */
.addons {
  margin-top: 32px;
  background: var(--pcgc-vanilla-2);
  border: 1px solid var(--pcgc-vanilla-3);
  border-radius: var(--pcgc-radius-md);
  padding: 28px;
}
.addons h3 {
  font-family: var(--pcgc-font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.addons table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.addons th, .addons td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--pcgc-vanilla-3);
}
.addons thead th {
  font-family: var(--pcgc-font-condensed);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pcgc-fg-3);
  border-bottom: 2px solid var(--pcgc-vanilla-3);
}
.addons td:nth-child(2) { font-weight: 700; color: var(--pcgc-cherry); white-space: nowrap; }
.addons td:nth-child(3) { color: var(--pcgc-fg-2); }
.addons tr:last-child td { border-bottom: 0; }

/* Service area block */
.service-area {
  text-align: center;
}
.service-area__list {
  font-family: var(--pcgc-font-condensed);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--pcgc-fg-2);
  line-height: 2;
  max-width: 65ch; margin-inline: auto;
}

/* ─── PRICING PAGE ───────────────────────────────────────────────────────── */
/* "Always Included" strip */
.includes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin-inline: auto;
}
@media (max-width: 1000px) { .includes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .includes-grid { grid-template-columns: 1fr; } }
.includes-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--pcgc-surface);
  border: 1px solid var(--pcgc-vanilla-3);
  border-radius: var(--pcgc-radius-md);
  padding: 20px;
  box-shadow: var(--pcgc-shadow-sm);
  transition: transform var(--pcgc-dur-base) var(--pcgc-ease),
              box-shadow var(--pcgc-dur-base) var(--pcgc-ease);
}
.includes-grid__item:hover { transform: translateY(-2px); box-shadow: var(--pcgc-shadow-md); }
.includes-grid__icon { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; }
.includes-grid__title {
  font-family: var(--pcgc-font-condensed);
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: var(--pcgc-fg);
}
.includes-grid__desc { font-size: 14px; color: var(--pcgc-fg-2); margin: 0; line-height: 1.55; }

/* Pricing stamps — large featured cards on the dark tier section */
.pricing-tiers { position: relative; overflow: hidden; }
.pricing-tiers__panther {
  position: absolute;
  right: -80px; bottom: -40px;
  width: clamp(320px, 38vw, 520px);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.pricing-tiers__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin-inline: auto;
}
@media (max-width: 980px) { .pricing-tiers__grid { grid-template-columns: 1fr; max-width: 480px; } }
.pricing-stamp {
  position: relative;
  background: var(--pcgc-vanilla);
  background-image: var(--pcgc-grain-light);
  border: 3px solid var(--pcgc-midnight);
  border-radius: var(--pcgc-radius-md);
  padding: 36px 28px 28px;
  text-align: center;
  box-shadow:
    0 14px 0 rgba(0,0,0,0.55),
    0 18px 36px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  transition: transform var(--pcgc-dur-base) var(--pcgc-ease);
}
.pricing-stamp:hover { transform: translateY(-3px); }
.pricing-stamp--featured {
  border-color: var(--pcgc-cherry);
  transform: translateY(-12px);
  box-shadow:
    0 16px 0 rgba(200,20,27,0.65),
    0 22px 44px rgba(0,0,0,0.45);
}
.pricing-stamp--featured:hover { transform: translateY(-15px); }
.pricing-stamp__badge {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--pcgc-cherry);
  color: #fff;
  font-family: var(--pcgc-font-condensed);
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 2px solid var(--pcgc-midnight);
  border-radius: 2px;
  box-shadow: var(--pcgc-shadow-sm);
}
.pricing-stamp__label {
  font-family: var(--pcgc-font-condensed);
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pcgc-fg-3);
  margin: 0 0 6px;
}
.pricing-stamp__price {
  font-family: var(--pcgc-font-display);
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  color: var(--pcgc-cherry);
  line-height: 1;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.pricing-stamp__duration {
  font-family: var(--pcgc-font-condensed);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pcgc-fg-2);
  margin: 0 0 22px;
}
.pricing-stamp__features {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
  flex: 1;
}
.pricing-stamp__features li {
  font-size: 14px;
  padding-left: 26px;
  position: relative;
  color: var(--pcgc-fg);
  line-height: 1.5;
}
.pricing-stamp__features li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 16px; height: 16px;
  background: var(--pcgc-cherry);
  border-radius: 50%;
  background-image:
    linear-gradient(45deg, transparent 5px, #fff 5px, #fff 6px, transparent 6px),
    linear-gradient(-45deg, transparent 5px, #fff 5px, #fff 6px, transparent 6px);
}
.pricing-stamp__cta { margin-top: auto; }

.pricing-tiers__note {
  position: relative; z-index: 1;
  text-align: center;
  margin: 36px auto 0;
  max-width: 60ch;
  font-size: 14px;
  color: rgba(249,241,234,0.78);
}
.pricing-tiers__note .script {
  color: var(--pcgc-goldenrod);
  font-size: 1.4em;
  margin-right: 4px;
}

/* Add-ons block merged into the same dark "Pick your slot" section. */
.pricing-tiers__addons {
  position: relative; z-index: 1;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(255,255,255,0.10);
  max-width: 980px;
}
.pricing-tiers__addons .section-header {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Dark-themed add-ons table — transparent canvas, vanilla dividers. */
.addons--dark {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 auto;
  max-width: 880px;
  color: var(--pcgc-vanilla);
}
.addons--dark h3 { color: var(--pcgc-vanilla); }
.addons--dark table { color: inherit; }
.addons--dark th,
.addons--dark td {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: rgba(249,241,234,0.92);
}
.addons--dark thead th {
  border-bottom: 2px solid rgba(255,255,255,0.20);
  color: var(--pcgc-goldenrod);
}
.addons--dark td:nth-child(2) { color: var(--pcgc-goldenrod); }
.addons--dark td:nth-child(3) { color: rgba(249,241,234,0.65); }
.addons--dark tr:last-child td { border-bottom: 0; }

/* Per-event-type pricing cards (smaller variant of .ec) */
.ec--pricing { text-align: left; }
.ec--pricing__price {
  font-family: var(--pcgc-font-display);
  font-size: 2rem;
  color: var(--pcgc-cherry);
  line-height: 1;
  margin: 0 0 10px;
}

/* Deposits / policies strip */
.pricing-policies__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
}
@media (max-width: 800px) { .pricing-policies__grid { grid-template-columns: 1fr; } }
.pricing-policies__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.pricing-policies__list li {
  font-family: var(--pcgc-font-condensed);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(249,241,234,0.78);
  border-left: 2px solid var(--pcgc-goldenrod);
  padding: 4px 0 4px 14px;
}
.pricing-policies__list strong {
  display: block;
  font-family: var(--pcgc-font-display);
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--pcgc-goldenrod);
  letter-spacing: 0;
  margin-bottom: 2px;
}

/* ─── CONTACT PAGE ───────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-grid__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-card {
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  color: var(--pcgc-vanilla);
  padding: 28px;
  border-radius: var(--pcgc-radius-md);
  text-align: left;
}
.contact-card__big {
  font-family: var(--pcgc-font-display);
  font-size: 1.875rem;
  color: var(--pcgc-vanilla);
  letter-spacing: 0.02em;
  margin: 8px 0 4px;
  line-height: 1.1;
}
.contact-card__sub {
  font-family: var(--pcgc-font-condensed);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pcgc-goldenrod);
  margin: 0 0 16px;
}
.contact-card--alt {
  background: var(--pcgc-surface);
  background-image: none;
  color: var(--pcgc-fg);
  border: 1px solid var(--pcgc-vanilla-3);
}
.contact-card--alt .contact-card__big { color: var(--pcgc-fg); }
.contact-card--alt .contact-card__sub { color: var(--pcgc-cherry); }
.contact-card--meta {
  background: var(--pcgc-vanilla);
  background-image: var(--pcgc-grain-light);
  color: var(--pcgc-fg);
  border: 1px solid var(--pcgc-vanilla-3);
  padding: 18px 22px;
}

/* CF7 form styling — neutralize CF7's defaults to match design tokens */
.contact-grid__form .wpcf7 form p {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-grid__form .wpcf7 form label {
  font-family: var(--pcgc-font-condensed);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pcgc-fg-3);
}
.contact-grid__form .wpcf7 input[type="text"],
.contact-grid__form .wpcf7 input[type="email"],
.contact-grid__form .wpcf7 input[type="tel"],
.contact-grid__form .wpcf7 input[type="url"],
.contact-grid__form .wpcf7 input[type="number"],
.contact-grid__form .wpcf7 input[type="date"],
.contact-grid__form .wpcf7 select,
.contact-grid__form .wpcf7 textarea {
  font: inherit;
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--pcgc-vanilla-3);
  background: #fff;
  color: var(--pcgc-fg);
  outline: none;
  transition: all var(--pcgc-dur-fast) var(--pcgc-ease);
}
.contact-grid__form .wpcf7 input:focus,
.contact-grid__form .wpcf7 select:focus,
.contact-grid__form .wpcf7 textarea:focus {
  border-color: var(--pcgc-cherry);
  box-shadow: 0 0 0 3px rgba(237,28,36,0.15);
}
.contact-grid__form .wpcf7 input[type="submit"],
.contact-grid__form .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px;
  border-radius: var(--pcgc-radius-sm);
  font-family: var(--pcgc-font-condensed);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--pcgc-cherry);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: all var(--pcgc-dur-fast) var(--pcgc-ease);
  width: auto;
}
.contact-grid__form .wpcf7 input[type="submit"]:hover {
  background: var(--pcgc-cherry-2);
  box-shadow: 0 6px 20px rgba(237,28,36,0.28);
  transform: translateY(-1px);
}
.contact-grid__form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--pcgc-radius-sm);
  font-size: 14px;
}

/* ─── PAGE HERO (default WP pages, blog) ─────────────────────────────────── */
.page-hero {
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  color: var(--pcgc-vanilla);
  padding-block: clamp(3rem,6vw,5rem);
}
.page-hero__title {
  font-family: var(--pcgc-font-display);
  font-size: var(--pcgc-h1-size);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--pcgc-vanilla);
}
.page-content { padding-block: clamp(2.5rem,5vw,4rem); }

/* Blog index */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 28px;
  margin-top: 32px;
}
.post-card {
  background: var(--pcgc-surface);
  border: 1px solid var(--pcgc-vanilla-3);
  border-radius: var(--pcgc-radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--pcgc-dur-base) var(--pcgc-ease),
              box-shadow var(--pcgc-dur-base) var(--pcgc-ease);
  box-shadow: var(--pcgc-shadow-sm);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--pcgc-shadow-md); }
.post-card__thumbnail img { width: 100%; height: 200px; object-fit: cover; display: block; }
.post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__meta {
  font-family: var(--pcgc-font-condensed);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pcgc-fg-3);
}
.post-card__title {
  font-family: var(--pcgc-font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}
.post-card__title a { color: var(--pcgc-fg); transition: color var(--pcgc-dur-fast) var(--pcgc-ease); }
.post-card__title a:hover { color: var(--pcgc-cherry); }
.post-card__excerpt { font-size: 14px; color: var(--pcgc-fg-2); line-height: 1.6; flex: 1; }

.posts-navigation { margin-top: 40px; display: flex; justify-content: space-between; gap: 16px; }
.posts-navigation a {
  font-family: var(--pcgc-font-condensed);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pcgc-cherry);
}

.entry-thumbnail { margin: 0 0 28px; border-radius: var(--pcgc-radius-md); overflow: hidden; }
.entry-thumbnail img { width: 100%; height: auto; display: block; }
.entry-article { max-width: 720px; margin-inline: auto; }

.post-navigation {
  margin-top: 48px;
  border-top: 1px solid var(--pcgc-vanilla-3);
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 24px;
}
.post-navigation .nav-subtitle {
  display: block;
  font-family: var(--pcgc-font-condensed);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pcgc-fg-3);
  margin-bottom: 4px;
}
.post-navigation .nav-title {
  font-family: var(--pcgc-font-display);
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--pcgc-fg);
}

/* ─── 404 ────────────────────────────────────────────────────────────────── */
.error-page { text-align: center; }
.error-icon {
  font-size: 4rem;
  color: var(--pcgc-cherry);
  margin-bottom: 16px;
}
.error-title {
  font-family: var(--pcgc-font-display);
  font-size: var(--pcgc-h1-size);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.error-desc {
  font-size: 1.0625rem;
  color: var(--pcgc-fg-2);
  max-width: 50ch;
  margin: 0 auto 28px;
  line-height: 1.55;
}
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ─── BOOKING PAGE — Amelia rendered inside a soft framed container ─────── */
/* Amelia v2/v3 (rendered into the `<step-form-wrapper>` web component) is a
   Vue 3 SPA that handles its own responsive layout. We deliberately stay out
   of its internals — no `display`, `flex-direction`, `grid-template-columns`,
   `:empty`, or footer-positioning overrides on `.am-fs__main`,
   `.am-fs__main-content`, `.am-fs__main-footer`, etc. Forcing those collapses
   the layout, hides the Continue button on some steps, or causes the calendar
   to overlap the action bar. Restyling is limited to:
     1. The outer wrapper (width, border, background).
     2. The `--am-c-*` token overrides defined around line 1255.
     3. Brand-color cleanup in Amelia → Customize (WP admin).
   The wrapper stays wide (1000px). That means the Date & Time step uses
   Amelia's native two-column layout (calendar | time slots) — there will be
   a reserved-but-empty time-slot column until a date is picked. That's a
   plugin behavior; the alternative (narrowing the wrapper to force single
   column) introduces a calendar/footer overlap that can't be fixed without
   touching Amelia internals. We've chosen the empty-panel side of the
   tradeoff. */
.booking-section { background: var(--pcgc-vanilla); }
.booking-amelia {
  /* Constrained width so Amelia uses its narrow single-column layout
     (calendar full-width, time slots stacked below once a date is picked)
     instead of the wider two-column layout that leaves an empty time-slot
     panel beside the calendar. The Date & Time overlap with the Continue
     button is handled by the `.am-fs-dt__calendar.am-fs__main-content`
     bottom-padding rule near line 1495. */
  max-width: 760px;
  margin-inline: auto;
  background: var(--pcgc-surface);
  border: 1px solid var(--pcgc-vanilla-3);
  border-radius: var(--pcgc-radius-lg);
  box-shadow: 0 12px 32px rgba(19,17,17,0.10);
  /* `overflow: hidden` was clipping Amelia's date-picker popovers and the
     time-slot scroller, which is why dates/times appeared un-selectable.
     `clip-path` masks to the same rounded shape but lets popovers paint
     freely outside the box. */
  clip-path: inset(0 round var(--pcgc-radius-lg));
  isolation: isolate;
}
/* Let the framed wrapper own the surface color — drop Amelia's own card
   shadow but keep its panes visible against the wrapper. */
.booking-amelia #amelia-container,
.booking-amelia [class*="amelia"] { box-shadow: none !important; }
.booking-amelia #amelia-container .am-fs__wrapper { background: transparent !important; }

/* Fallback contact form keeps its card chrome — only Amelia goes flush. */
.booking-card {
  max-width: 720px; margin-inline: auto;
  background: var(--pcgc-surface);
  border: 1px solid var(--pcgc-vanilla-3);
  border-radius: var(--pcgc-radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--pcgc-shadow-md);
}
.booking-card .field-row { grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .booking-card .field-row { grid-template-columns: 1fr; } }
.booking-callouts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-top: 28px;
}
@media (max-width: 600px) { .booking-callouts { grid-template-columns: 1fr; } }
.booking-callout {
  border-radius: var(--pcgc-radius-md);
  padding: 22px;
  text-align: center;
}
.booking-callout--dark {
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  color: var(--pcgc-vanilla);
}
.booking-callout--cream {
  background: var(--pcgc-surface);
  border: 1px solid var(--pcgc-vanilla-3);
  color: var(--pcgc-fg);
}
.booking-callout h3 {
  font-family: var(--pcgc-font-display);
  font-size: 1.125rem;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.booking-callout p { font-size: 13px; margin: 0 0 12px; opacity: 0.8; }

/* ─── /WHATS-NEXT/ POST-BOOKING PAGE ─────────────────────────────────────── */
/* Reuses .ec card visuals from the events carousel (line ~619) so the
 * timeline matches the rest of the site's "stamp card" language without
 * dragging in the carousel JS — these are static cards in a 4-up grid. */
.whats-next__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin-inline: auto;
}
@media (max-width: 1080px) { .whats-next__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .whats-next__cards { grid-template-columns: 1fr; gap: 18px; } }

.ec--step {
  padding: 36px 26px 28px;
  position: relative;
  overflow: hidden;
}
.ec--step__num {
  position: absolute;
  top: -8px; right: -8px;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--pcgc-cherry);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pcgc-font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(237,28,36,0.28);
  transform: translate(0, 0);
  transition: transform var(--pcgc-dur-base) var(--pcgc-ease);
}
.ec--step:hover .ec--step__num { transform: translate(-3px, 3px); }
.ec--step__icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 18px;
  opacity: 0.9;
}
.ec--step__when {
  display: inline-block;
  font-family: var(--pcgc-font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pcgc-cherry);
  margin-bottom: 8px;
}
.ec--step .ec__title {
  font-size: 1.125rem;
  margin: 0 0 14px;
  padding-right: 60px; /* leave room for the corner numeral */
}
.ec--step .ec__desc {
  margin-bottom: 14px;
  font-size: 14px;
}
.ec--step__meta {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--pcgc-vanilla-3);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pcgc-fg-3);
}
@media (max-width: 600px) {
  .ec--step { padding: 30px 22px 24px; }
  .ec--step__num { width: 60px; height: 60px; font-size: 1.5rem; }
  .ec--step .ec__title { padding-right: 48px; }
}

.whats-next__policies {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 820px;
  margin-inline: auto;
}
.whats-next__policy {
  background: var(--pcgc-surface);
  border: 1px solid var(--pcgc-vanilla-3);
  border-radius: var(--pcgc-radius-md);
  padding: 22px 24px;
}
.whats-next__policy .h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--pcgc-cherry);
}
.whats-next__policy p {
  margin: 0;
  color: var(--pcgc-fg-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .whats-next__policies { grid-template-columns: 1fr; }
}

/* ─── COMMENTS / WIDGETS ─────────────────────────────────────────────────── */
.widget-area { padding: 24px 0; }
.widget {
  margin-bottom: 28px;
  background: var(--pcgc-surface);
  border: 1px solid var(--pcgc-vanilla-3);
  border-radius: var(--pcgc-radius-md);
  padding: 20px;
}
.widget-title {
  font-family: var(--pcgc-font-display);
  font-size: 1.125rem;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ─── Header Early Access Dropdown ─── */
/* ═══════════════════════════════════════════════════════════════════════════
   EARLY ACCESS — Menu Item Cherry Buttons + Hidden Dropdown Panel
   ───────────────────────────────────────────────────────────────────────────
   The .menu-cta-early and .menu-cta-book classes are added to specific menu
   items in Appearance → Menus. Both render as cherry buttons matching
   .btn--cherry. The Early Access button toggles the dropdown panel below
   the header via JS in header.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cherry button styling for the two CTA menu items — matches .btn--cherry */
.site-hd__nav-list .menu-cta-early > a,
.site-hd__nav-list .menu-cta-book > a {
  background: var(--pcgc-cherry);
  color: #fff !important;
  padding: 10px 18px;
  font-family: var(--pcgc-font-condensed);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  transition: background var(--pcgc-dur-fast) var(--pcgc-ease),
              box-shadow var(--pcgc-dur-fast) var(--pcgc-ease),
              transform var(--pcgc-dur-fast) var(--pcgc-ease);
}

.site-hd__nav-list .menu-cta-early > a:hover,
.site-hd__nav-list .menu-cta-book > a:hover {
  background: var(--pcgc-cherry-2);
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(237,28,36,0.28);
  transform: translateY(-1px);
}

/* Caret on Early Access — signals the dropdown behavior */
.site-hd__nav-list .menu-cta-early > a::after {
  content: '▾';
  font-size: 10px;
  margin-left: 2px;
  transition: transform var(--pcgc-dur-fast) var(--pcgc-ease);
}
.site-hd__nav-list .menu-cta-early.is-active > a {
  background: var(--pcgc-cherry-2);
}
.site-hd__nav-list .menu-cta-early.is-active > a::after {
  transform: rotate(180deg);
}

/* Tighten the cherry buttons on narrower desktop widths */
@media (max-width: 1100px) {
  .site-hd__nav-list .menu-cta-early > a,
  .site-hd__nav-list .menu-cta-book > a {
    padding: 9px 14px;
    font-size: 12px;
    letter-spacing: 0.05em;
  }
}

/* ─── Early Access Dropdown Panel ───────────────────────────────────────
   HIDDEN by default. JS adds .is-open to reveal and sets fixed left/top
   coordinates relative to the trigger menu item. */
.site-hd__early-dropdown {
  position: fixed;
  width: 320px;
  background: var(--pcgc-midnight);
  background-image: var(--pcgc-grain-dark);
  border: 1px solid rgba(249,241,234,0.10);
  border-top: 2px solid var(--pcgc-cherry);
  border-radius: 0 0 var(--pcgc-radius-sm) var(--pcgc-radius-sm);
  padding: 24px;
  box-shadow: var(--pcgc-shadow-xl);
  z-index: 90;

  /* HIDDEN by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--pcgc-dur-base) var(--pcgc-ease),
              transform var(--pcgc-dur-base) var(--pcgc-ease),
              visibility 0s linear var(--pcgc-dur-base);
}

.site-hd__early-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity var(--pcgc-dur-base) var(--pcgc-ease),
              transform var(--pcgc-dur-base) var(--pcgc-ease),
              visibility 0s linear 0s;
}

.site-hd__early-eyebrow {
  font-family: var(--pcgc-font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pcgc-goldenrod);
  margin-bottom: 10px;
}

.site-hd__early-title {
  font-family: var(--pcgc-font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--pcgc-vanilla);
  -webkit-text-stroke: 0.4px currentColor;
  margin: 0 0 8px;
  line-height: 1.15;
}

.site-hd__early-tag {
  color: rgba(249,241,234,0.7);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Hide the desktop dropdown on mobile — mobile uses .mnav__early instead */
@media (max-width: 900px) {
  .site-hd__early-dropdown {
    display: none;
  }
}

/* ─── Mobile Nav Early Access Block ─── */
.mnav__early {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(249,241,234,0.10);
}

.mnav__early-eyebrow {
  font-family: var(--pcgc-font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pcgc-goldenrod);
  margin-bottom: 8px;
}

.mnav__early-title {
  font-family: var(--pcgc-font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--pcgc-vanilla);
  -webkit-text-stroke: 0.4px currentColor;
  margin: 0 0 8px;
  line-height: 1.15;
}

.mnav__early-tag {
  color: rgba(249,241,234,0.7);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* On mobile, strip cherry-button styling from menu items — they read as
   regular mobile menu links, since the form lives below in .mnav__early */
@media (max-width: 900px) {
  .mnav__list .menu-cta-early > a,
  .mnav__list .menu-cta-book > a {
    background: transparent;
    padding: 14px 8px;
    font-family: var(--pcgc-font-display);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--pcgc-vanilla) !important;
    text-transform: uppercase;
    box-shadow: none;
    transform: none;
  }
  .mnav__list .menu-cta-early > a::after {
    display: none;
  }
  .mnav__list .menu-cta-early > a:hover,
  .mnav__list .menu-cta-book > a:hover {
    background: rgba(255,255,255,0.05);
    box-shadow: none;
    transform: none;
  }
}

/* ─── Footer Signup Block ─── */
.footer__signup {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(249,241,234,0.10);
}

.footer__signup h4 {
  margin: 0 0 6px;
}

.footer__signup-tag {
  color: rgba(249,241,234,0.7);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 280px;
}

/* ─── MailerLite Form Overrides — header dropdown, mobile nav, and footer ─── */
.site-hd__early-dropdown .ml-form-embedContainer,
.site-hd__early-dropdown .ml-form-embedWrapper,
.mnav__early .ml-form-embedContainer,
.mnav__early .ml-form-embedWrapper,
.footer__signup .ml-form-embedContainer,
.footer__signup .ml-form-embedWrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Hide MailerLite's default title/text block — we provide our own */
.site-hd__early-dropdown .ml-form-embedContent,
.mnav__early .ml-form-embedContent,
.footer__signup .ml-form-embedContent {
  display: none !important;
}

.site-hd__early-dropdown .ml-form-embedBody,
.mnav__early .ml-form-embedBody,
.footer__signup .ml-form-embedBody {
  padding: 0 !important;
}

.site-hd__early-dropdown input[type="email"],
.site-hd__early-dropdown input[type="text"],
.mnav__early input[type="email"],
.mnav__early input[type="text"],
.footer__signup input[type="email"],
.footer__signup input[type="text"] {
  background: rgba(249,241,234,0.06) !important;
  border: 1px solid rgba(249,241,234,0.15) !important;
  color: var(--pcgc-vanilla) !important;
  border-radius: var(--pcgc-radius-sm) !important;
  padding: 11px 14px !important;
  font-family: var(--pcgc-font-body) !important;
  font-size: 13px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 8px !important;
}

.site-hd__early-dropdown input::placeholder,
.mnav__early input::placeholder,
.footer__signup input::placeholder {
  color: rgba(249,241,234,0.4) !important;
}

.site-hd__early-dropdown input:focus,
.mnav__early input:focus,
.footer__signup input:focus {
  border-color: var(--pcgc-cherry) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(237,28,36,0.15) !important;
}

.site-hd__early-dropdown button[type="submit"],
.site-hd__early-dropdown .primary,
.mnav__early button[type="submit"],
.mnav__early .primary,
.footer__signup button[type="submit"],
.footer__signup .primary {
  background: var(--pcgc-cherry) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--pcgc-radius-sm) !important;
  padding: 12px 18px !important;
  font-family: var(--pcgc-font-condensed) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background var(--pcgc-dur-fast) var(--pcgc-ease) !important;
}

.site-hd__early-dropdown button[type="submit"]:hover,
.mnav__early button[type="submit"]:hover,
.footer__signup button[type="submit"]:hover {
  background: var(--pcgc-cherry-2) !important;
}

/* Success / thank-you state */
.site-hd__early-dropdown .ml-form-successContent,
.mnav__early .ml-form-successContent,
.footer__signup .ml-form-successContent {
  color: var(--pcgc-vanilla) !important;
}

.site-hd__early-dropdown .ml-form-successContent h4,
.mnav__early .ml-form-successContent h4,
.footer__signup .ml-form-successContent h4 {
  color: var(--pcgc-cherry) !important;
  font-family: var(--pcgc-font-display) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
}

.site-hd__early-dropdown .ml-form-successContent p,
.mnav__early .ml-form-successContent p,
.footer__signup .ml-form-successContent p {
  color: rgba(249,241,234,0.65) !important;
  font-size: 12px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   SIGNUP LANDING PAGE (/signup)
   Mirrors the homepage .hero pattern: dark midnight bg, panther illustration
   in the background, single-column left-aligned content, max-width 760px.
   ═══════════════════════════════════════════════════════════════════════════ */

.signup-hero {
	position: relative;
	background: var(--pcgc-midnight);
	background-image: var(--pcgc-grain-dark);
	color: var(--pcgc-vanilla);
	padding-block: clamp(3.5rem, 8vw, 6rem);
	overflow: hidden;
}

.signup-hero__panther {
	position: absolute;
	right: -80px;
	bottom: -40px;
	width: clamp(380px, 50vw, 640px);
	opacity: 0.12;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}

.signup-hero__content {
	position: relative;
	z-index: 2;
	max-width: 760px;
}

.signup-hero__eyebrow {
	color: var(--pcgc-goldenrod);
}

.signup-hero__title {
	color: var(--pcgc-vanilla);
	margin: 0 0 24px;
}

.signup-hero__title em {
	color: var(--pcgc-cherry);
	font-style: italic;
	font-family: var(--pcgc-font-script);
}

.signup-hero__sub {
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	line-height: 1.55;
	color: rgba(249,241,234,0.8);
	margin: 0 0 40px;
	max-width: 56ch;
}

/* Form block — sits below the hero copy, divider above, constrained width */
.signup-hero__form-block {
	max-width: 460px;
	padding-top: 32px;
	border-top: 1px solid rgba(249,241,234,0.15);
}

.signup-hero__form-label {
	display: block;
	font-family: var(--pcgc-font-condensed);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pcgc-goldenrod);
	margin: 0 0 14px;
}

.signup-hero__form-note {
	font-family: var(--pcgc-font-condensed);
	font-size: 11px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(249,241,234,0.45);
	margin: 14px 0 0;
}

/* MailerLite overrides scoped to this form */
.signup-hero__form .ml-form-embedContainer,
.signup-hero__form.ml-form-embedContainer,
.signup-hero__form .ml-form-embedWrapper {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	max-width: 100% !important;
	width: 100% !important;
}

.signup-hero__form .ml-form-embedContent { display: none !important; }
.signup-hero__form .ml-form-embedBody { padding: 0 !important; }

.signup-hero__form input[type="email"],
.signup-hero__form input[type="text"] {
	background: rgba(249,241,234,0.06) !important;
	border: 1px solid rgba(249,241,234,0.18) !important;
	color: var(--pcgc-vanilla) !important;
	border-radius: var(--pcgc-radius-sm) !important;
	padding: 14px 16px !important;
	font-family: var(--pcgc-font-body) !important;
	font-size: 14px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin-bottom: 10px !important;
}

.signup-hero__form input::placeholder { color: rgba(249,241,234,0.45) !important; }

.signup-hero__form input:focus {
	border-color: var(--pcgc-cherry) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(237,28,36,0.15) !important;
}

.signup-hero__form button[type="submit"],
.signup-hero__form .primary {
	background: var(--pcgc-cherry) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--pcgc-radius-sm) !important;
	padding: 14px 24px !important;
	font-family: var(--pcgc-font-condensed) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.10em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	width: 100% !important;
	transition: background var(--pcgc-dur-fast) var(--pcgc-ease) !important;
}

.signup-hero__form button[type="submit"]:hover { background: var(--pcgc-cherry-2) !important; }

.signup-hero__form .ml-form-successContent { color: var(--pcgc-vanilla) !important; }
.signup-hero__form .ml-form-successContent h4 {
	color: var(--pcgc-cherry) !important;
	font-family: var(--pcgc-font-display) !important;
	font-size: 16px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
}
.signup-hero__form .ml-form-successContent p {
	color: rgba(249,241,234,0.7) !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   THANK-YOU PAGE (/thanks)
   Centered, tight, minimal. Same dark hero treatment as signup page.
   ═══════════════════════════════════════════════════════════════════════════ */

.thanks-hero {
	position: relative;
	background: var(--pcgc-midnight);
	background-image: var(--pcgc-grain-dark);
	color: var(--pcgc-vanilla);
	padding-block: clamp(4rem, 10vw, 7rem);
	overflow: hidden;
	text-align: center;
}

.thanks-hero__panther {
	position: absolute;
	right: -100px;
	bottom: -60px;
	width: clamp(360px, 45vw, 560px);
	opacity: 0.08;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}

.thanks-hero__content {
	position: relative;
	z-index: 2;
	max-width: 640px;
	margin-inline: auto;
}

.thanks-hero__eyebrow {
	color: var(--pcgc-goldenrod);
}

.thanks-hero__title {
	color: var(--pcgc-vanilla);
	margin: 0 0 24px;
}

.thanks-hero__title em {
	color: var(--pcgc-cherry);
	font-style: italic;
	font-family: var(--pcgc-font-script);
}

.thanks-hero__sub {
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	line-height: 1.6;
	color: rgba(249,241,234,0.8);
	margin: 0 auto 40px;
	max-width: 52ch;
}

.thanks-hero__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 56px;
}

/* Social row — small, inline, label + 3 icons in a tight line */
.thanks-hero__social {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding-top: 28px;
	border-top: 1px solid rgba(249,241,234,0.12);
}

.thanks-hero__social-label {
	font-family: var(--pcgc-font-condensed);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(249,241,234,0.55);
}

.thanks-hero__social-icons {
	display: inline-flex;
	gap: 14px;
	align-items: center;
}

/* The fix for the giant-icons bug: explicit pixel dimensions on both the
   <a> wrapper AND the <svg> itself, with !important so they beat the
   inherited "width:100%; height:100%" rule from .footer__social a svg. */
.thanks-hero__social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--pcgc-cherry);
	flex-shrink: 0;
	transition: color var(--pcgc-dur-fast) var(--pcgc-ease),
	            transform var(--pcgc-dur-fast) var(--pcgc-ease);
}

.thanks-hero__social-icons a svg {
	width: 20px !important;
	height: 20px !important;
	display: block;
	fill: currentColor;
}

.thanks-hero__social-icons a:hover {
	color: var(--pcgc-goldenrod);
	transform: translateY(-2px);
}

@media (max-width: 520px) {
	.thanks-hero__social {
		flex-direction: column;
		gap: 12px;
	}
}