/* ============================
   Hocus Pocus Play & Magic Beans Cafe
   Dual-brand stylesheet
   ============================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&family=Nunito:wght@400;600;700&family=Dancing+Script:wght@600;700&display=swap');

:root {
  /* Hocus Pocus Play brand palette */
  --hp-purple:       #5B21B6;
  --hp-purple-mid:   #7C3AED;
  --hp-purple-light: #EDE9FE;
  --hp-purple-pale:  #F5F3FF;
  --hp-navy:         #1E1B4B;

  /* Extended palette: pink & blue */
  --pink:            #F472B6;
  --pink-mid:        #EC4899;
  --pink-light:      #FBCFE8;
  --pink-pale:       #FDF2F8;
  --blue:            #60A5FA;
  --blue-mid:        #3B82F6;
  --blue-light:      #BFDBFE;
  --blue-pale:       #EFF6FF;

  /* Brand palette - amber-led, warm and grounded (Magic Beans) */
  --amber:        #F5A63D;
  --amber-light:  #FDD98A;
  --amber-pale:   #FEF6E4;
  --amber-dark:   #C47C18;

  --sage:         #5C7A62;
  --sage-light:   #EBF2EC;

  --cream:        #FEFAF4;
  --cream-mid:    #F5EDD8;
  --brown:        #2C1A0E;
  --brown-mid:    #6B4226;
  --brown-light:  #85603F;

  --white:        #FFFFFF;
  --border:       rgba(44, 26, 14, 0.09);

  /* Legacy aliases: keep old class references working */
  --yellow:       #F5A63D;   /* = --amber */
  --purple:       #7C3AED;   /* = --hp-purple-mid */
  --teal:         #60A5FA;   /* = --blue */
  --teal-dark:    #3B82F6;   /* = --blue-mid */
  --orange:       #F5A63D;   /* = --amber */
  --cream-dark:   #F5EDD8;   /* = --cream-mid */
  --cream-light:  #FEFAF4;   /* = --cream */
  --gold:         #F5A63D;   /* = --amber */

  --font-heading: 'Baloo 2', cursive;
  --font-body:    'Nunito', sans-serif;
  --font-script:  'Dancing Script', cursive;

  --shadow-sm:    0 2px 12px rgba(44, 26, 14, 0.06);
  --shadow:       0 6px 28px rgba(44, 26, 14, 0.08);
  --shadow-hover: 0 16px 48px rgba(44, 26, 14, 0.13);
  --nav-h:        68px;

  --radius:       18px;
  --radius-sm:    10px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  background: #FEFAF4; /* matches navbar, fills any overscroll gap on iOS */
  /* clip, not hidden: `hidden` makes the root a scroll container, which is
     what let page content render above the fixed nav on iOS. Nothing on the
     site actually overflows horizontally, so this is only a safety net. */
  overflow-x: clip;
}

/* Paint the notch / status-bar strip in the nav colour, so nothing can ever
   show through above the fixed header even if iOS mispositions it. Collapses
   to zero height anywhere without a safe-area inset. */
/* Sits at the very top edge in the nav's colour. Doubles as the element iOS 26
   Safari samples to tint the status bar, and as safe-area cover where there is
   an inset. Invisible either way: the nav is the same colour underneath. */
body::before {
  content: '';
  position: fixed;
  top: -120px; left: 0; right: 0;
  height: calc(120px + max(env(safe-area-inset-top, 0px), 1px));
  background: #FEFAF4;
  z-index: 1001;
  pointer-events: none;
}
body {
  position: relative;   /* so the grain overlay below can span the document */
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--brown);
  line-height: 1.65;
}

/* ── Grain texture overlay ── */
body::after {
  content: '';
  position: absolute;   /* not fixed: see the note on body above */
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.038;
  background-image: 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.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1,h2,h3,h4,h5 { font-family: var(--font-heading); line-height: 1.2; }


/* ============================================================
   ANNOUNCEMENT BAR
   Lives inside the fixed nav, so nothing below needs to move.
   ============================================================ */
.announce {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 3.25rem 0.85rem 1.5rem;
  background: linear-gradient(100deg, #4A1D3F 0%, #6B2340 45%, #2E5548 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}
.announce[hidden] { display: none; }

.announce-text {
  position: relative; z-index: 2;
  margin: 0; text-align: center;
  font-size: 0.9rem; line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.announce-tag {
  display: inline-block;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #1E1040; background: var(--amber-light);
  padding: 0.22rem 0.65rem; border-radius: 20px;
  margin-right: 0.5rem;
}

.announce-close {
  position: absolute; top: 50%; right: 0.75rem;
  transform: translateY(-50%);
  z-index: 3;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff; font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.announce-close:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-50%) scale(1.08); }

/* Drifting snow */
.announce-snow { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.announce-snow span {
  position: absolute; top: -14px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem; line-height: 1;
  animation: announce-fall 7s linear infinite;
}
.announce-snow span:nth-child(1)  { left:  4%; animation-duration: 6.5s; animation-delay: 0s;   }
.announce-snow span:nth-child(2)  { left: 14%; animation-duration: 8.5s; animation-delay: 1.4s; font-size: 0.55rem; }
.announce-snow span:nth-child(3)  { left: 25%; animation-duration: 7.2s; animation-delay: 3.1s; }
.announce-snow span:nth-child(4)  { left: 36%; animation-duration: 9s;   animation-delay: 0.7s; font-size: 0.5rem; }
.announce-snow span:nth-child(5)  { left: 47%; animation-duration: 6.8s; animation-delay: 4.2s; }
.announce-snow span:nth-child(6)  { left: 58%; animation-duration: 8.2s; animation-delay: 2.2s; font-size: 0.6rem; }
.announce-snow span:nth-child(7)  { left: 68%; animation-duration: 7.6s; animation-delay: 5.1s; }
.announce-snow span:nth-child(8)  { left: 78%; animation-duration: 9.4s; animation-delay: 1.9s; font-size: 0.52rem; }
.announce-snow span:nth-child(9)  { left: 88%; animation-duration: 7s;   animation-delay: 3.6s; }
.announce-snow span:nth-child(10) { left: 95%; animation-duration: 8.8s; animation-delay: 0.3s; font-size: 0.58rem; }

@keyframes announce-fall {
  0%   { transform: translateY(0) rotate(0deg);      opacity: 0; }
  15%  { opacity: 0.85; }
  85%  { opacity: 0.85; }
  100% { transform: translateY(90px) rotate(180deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .announce-snow span { animation: none; opacity: 0.5; top: 25%; }
}

@media (max-width: 640px) {
  .announce { padding: 0.7rem 2.4rem 0.7rem 0.9rem; }
  .announce-text { font-size: 0.8rem; line-height: 1.45; }
  /* keep the tag inline so it hugs its text instead of stretching the bar */
  .announce-tag { font-size: 0.6rem; padding: 0.12rem 0.45rem; margin-right: 0.4rem; }
  .announce-close { right: 0.5rem; width: 24px; height: 24px; }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #FEFAF4;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s;
  padding-top: env(safe-area-inset-top);
}
.nav-inner {
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
}
nav.scrolled { box-shadow: var(--shadow); }
.nav-inner + .announce { border-top-color: rgba(255, 255, 255, 0.14); }

.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 46px; width: auto; display: block; object-fit: contain; }

.nav-links { display: flex; gap: 0.15rem; align-items: center; }
.nav-links a {
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.93rem;
  color: var(--brown-mid);
  transition: all 0.2s ease;
}
.nav-links a:hover { color: var(--brown); background: var(--amber-pale); }
.nav-links a.active { color: var(--hp-purple-mid); }
.nav-links .nav-cta {
  background: var(--hp-purple-mid); color: var(--white);
  margin-left: 0.5rem;
}
.nav-links .nav-cta:hover,
.nav-dropdown:hover .nav-dropdown-toggle.nav-cta { background: var(--hp-purple); color: var(--white); }

/* ── Dropdown nav ── */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.93rem;
  color: var(--brown-mid);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle { color: var(--brown); background: var(--amber-pale); }
.nav-dropdown-toggle.active { color: var(--hp-purple-mid); }
.nav-arrow {
  font-size: 0.82rem; opacity: 0.7;
  transition: transform 0.2s ease;
  display: inline-block;
}
.nav-dropdown:hover .nav-arrow,
.nav-dropdown.open .nav-arrow { transform: rotate(180deg); }

.nav-sub {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  border: 1px solid var(--border);
  min-width: 160px;
  padding: 0.4rem 0;
  z-index: 200;
  list-style: none;
}
.nav-sub::before {
  content: '';
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
}
/* Invisible bridge across the 6px gap so the menu survives the trip
   from the toggle down to the submenu */
.nav-sub::after {
  content: '';
  position: absolute; left: 0; right: 0; top: -8px; height: 8px;
}
.nav-sub li a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem;
  color: var(--brown-mid);
  border-radius: 0;
  transition: all 0.15s;
}
.nav-sub li a:hover { background: var(--hp-purple-pale); color: var(--hp-purple-mid); }
.nav-sub li a.active { color: var(--hp-purple-mid); }

/* Show dropdown on desktop hover */
@media (min-width: 769px) {
  .nav-dropdown:hover .nav-sub { display: block; }
}

.hamburger {
  display: none; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px;
  cursor: pointer; padding: 0.4rem;
  /* 44px minimum touch target: the bars themselves are only 30px tall,
     which is an easy thing to miss on a phone. */
  min-width: 44px; min-height: 44px; margin: 0 -0.4rem;
  background: none; border: none;
}
.hamburger span {
  display: block; width: 24px; height: 2.5px;
  background: var(--brown); border-radius: 3px; transition: all 0.3s;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.8rem 1.9rem;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700;
  cursor: pointer; border: none;
  transition: all 0.25s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--amber); color: var(--brown);
  box-shadow: 0 4px 16px rgba(245, 166, 61, 0.35);
}
.btn-primary:hover {
  background: var(--amber-dark); color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196, 124, 24, 0.4);
}
.btn-secondary {
  background: transparent; color: var(--brown);
  border: 2px solid var(--brown);
}
.btn-secondary:hover {
  background: var(--brown); color: var(--white);
  transform: translateY(-2px);
}
.btn-yellow { background: var(--amber-pale); color: var(--brown); border: 2px solid var(--amber-light); }
.btn-yellow:hover { background: var(--amber-light); transform: translateY(-2px); }

/* ── Feature Pills ── */
.pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--white); border-radius: 50px;
  padding: 0.4rem 0.95rem;
  font-weight: 700; font-size: 0.82rem;
  border: 1.5px solid var(--border);
  color: var(--brown-mid);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}
.pill:hover { border-color: var(--amber); color: var(--brown); transform: translateY(-1px); }
/* Pill colour variants */
.pill-purple { border-color: var(--hp-purple-light); color: var(--hp-purple-mid); }
.pill-purple:hover { border-color: var(--hp-purple-mid); background: var(--hp-purple-pale); }
.pill-pink   { border-color: var(--pink-light); color: var(--pink-mid); }
.pill-pink:hover { border-color: var(--pink-mid); background: var(--pink-pale); }
.pill-teal   { border-color: var(--blue-light); color: var(--blue-mid); }
.pill-teal:hover { border-color: var(--blue-mid); background: var(--blue-pale); }
.pill-orange, .pill-green { border-color: var(--amber-light); }
.pill-orange:hover, .pill-green:hover { border-color: var(--amber); }

/* ============================================================
   SECTION LAYOUT
   ============================================================ */
section { padding: 4rem 2rem; }
.container { max-width: 1080px; margin: 0 auto; }

.section-header { text-align: center; margin-bottom: 2.25rem; }

.section-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--hp-purple-mid);
  margin-bottom: 0.6rem;
}

.section-title {
  font-size: clamp(2rem, 4.8vw, 3rem);
  color: var(--brown);
  margin-top: 0.5rem;
}
.section-title span { color: var(--hp-purple-mid); }

.section-subtitle {
  font-size: 1.1rem; color: var(--brown-light);
  max-width: 600px; margin: 0.85rem auto 0;
  line-height: 1.75;
}

/* Opening paragraph of a section: noticeably larger than the small print
   so the page has a top-to-bottom reading order rather than one flat size */
.about-text p:first-of-type,
.cafe-bridge-text p:first-of-type,
.zone-desc {
  font-size: 1.06rem;
  line-height: 1.8;
}

/* Wave divider */
.wave-wrap { width: 100%; overflow: hidden; line-height: 0; }
.wave-wrap svg { display: block; width: 100%; }

/* ============================================================
   HERO
   ============================================================ */
#hero {
  min-height: 100vh;
  background: #1a0800;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: 90px 2rem 4rem;
}

/* Blurred photo background */
#hero::after {
  content: '';
  position: absolute;
  inset: -24px;
  background-image: url('images/Outdoors pictures/image-23.jpg');
  background-size: cover;
  background-position: center 40%;
  filter: blur(5px);
  z-index: 0;
}

/* Warm amber-toned colour overlay */
#hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    150deg,
    rgba(160, 70, 10, 0.68) 0%,
    rgba(80, 30, 5, 0.58) 50%,
    rgba(30, 12, 2, 0.65) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Hide gradient blobs - not needed with photo bg */
.hero-blob { display: none; }

.hero-content {
  text-align: center; z-index: 10;
  max-width: 760px;
}

.hero-logo {
  max-width: 112px; width: 100%; height: auto;
  display: block; margin: 0 auto 0.7rem;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.5));
  animation: gentleBob 5s ease-in-out infinite;
}
@media (max-width: 600px) { .hero-logo { max-width: 96px; margin-bottom: 0.7rem; } }

@keyframes gentleBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.hero-tagline {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--amber-light);
  margin-bottom: 1rem;
  line-height: 1.3;
  text-shadow: 0 2px 18px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.5);
}

/* ── Homepage hero headline ── */
.hero-kicker {
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--amber-light);
  margin-bottom: 0.35rem;
  line-height: 1.2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}
.hero-title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 0.85rem;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.hero-title em { font-style: normal; color: var(--amber-light); }

/* Small phones: keep the Book button fully above the fold at 375x667,
   which is the size the conversion guidance tests against. */
@media (max-width: 600px) {
  #hp-hero { padding: calc(var(--nav-h) + 0.5rem) 1.25rem 5.5rem; }
  .hero-logo { max-width: 76px; margin-bottom: 0.5rem; }
  .hero-kicker { font-size: 1.05rem; margin-bottom: 0.25rem; }
  .hero-title { font-size: 1.85rem; margin-bottom: 0.7rem; }
  .hero-desc { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.15rem; }
  .hero-buttons { gap: 0.6rem; }
  .hero-pricing { margin-top: 1.1rem; }
}

.hero-desc {
  font-size: 1.06rem; color: rgba(255, 255, 255, 0.95);
  max-width: 520px; margin: 0 auto 1.5rem;
  line-height: 1.75;
  text-shadow: 0 1px 10px rgba(0,0,0,0.75), 0 2px 20px rgba(0,0,0,0.5);
}

.hero-buttons {
  display: flex; gap: 0.9rem;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 0;
}

/* Secondary button adapts to dark hero */
#hero .btn-secondary {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.6);
  color: white;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#hero .btn-secondary:hover {
  background: white;
  color: var(--brown);
  border-color: white;
}

/* ── Hero pricing display ── */
.hero-pricing {
  margin-top: 1.5rem;
}

.hpp-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin-bottom: 1rem;
}

.hpp-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 2rem;
  gap: 0.15rem;
}

.hpp-from {
  font-family: var(--font-heading);
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(253, 217, 138, 0.6);
  line-height: 1;
}

.hpp-amt {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  color: #FDD98A;
  line-height: 1;
  text-shadow: 0 2px 20px rgba(253, 217, 138, 0.3);
}

.hpp-lbl {
  font-family: var(--font-heading);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.2rem;
}

.hpp-sep {
  width: 1px; height: 3rem;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  align-self: center;
}

.hpp-meta {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.03em;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .hpp-item { padding: 0 1.2rem; }
  .hpp-amt  { font-size: 1.9rem; }
}

/* ============================================================
   ABOUT
   ============================================================ */
#about { background: linear-gradient(160deg, #ffffff 0%, var(--hp-purple-pale) 100%); }

.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.about-text h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  color: var(--brown); margin-bottom: 1rem;
}
.about-text p {
  font-size: 1.05rem; color: var(--brown-light);
  margin-bottom: 1rem; line-height: 1.75;
}
.about-text strong { color: var(--brown-mid); }

.about-image-wrap {
  border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 4/3;
  background: var(--cream-mid);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.about-image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
}
.fallback-emoji { font-size: 4rem; opacity: 0.4; }

/* ============================================================
   FEATURE CARDS
   ============================================================ */
#features { background: linear-gradient(160deg, var(--cream) 0%, var(--blue-pale) 100%); }

/* Flex rather than grid so a short final row centres instead of
   hanging off the left edge */
.features-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.25rem;
}
.features-grid > * { flex: 1 1 300px; max-width: 340px; }
.feature-card {
  background: var(--white); border-radius: var(--radius);
  padding: 1.75rem 1.5rem; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-hover);
  border-color: var(--amber-light);
}
/* Flatten old border-bottom variants */
.feature-card.c-purple, .feature-card.c-pink, .feature-card.c-teal,
.feature-card.c-orange, .feature-card.c-yellow, .feature-card.c-green { border-bottom: none; }

/* Icon wrap palette: cycles through all four accent colours */
.feature-card:nth-child(4n+1) .feature-icon-wrap { background: var(--amber-pale); }
.feature-card:nth-child(4n+2) .feature-icon-wrap { background: var(--pink-pale); }
.feature-card:nth-child(4n+3) .feature-icon-wrap { background: var(--blue-pale); }
.feature-card:nth-child(4n+4) .feature-icon-wrap { background: var(--hp-purple-pale); }
/* Hover: shift to a deeper shade of the same colour */
.feature-card:nth-child(4n+1):hover .feature-icon-wrap { background: var(--amber-pale); filter: brightness(0.93); }
.feature-card:nth-child(4n+2):hover .feature-icon-wrap { background: var(--pink-light); }
.feature-card:nth-child(4n+3):hover .feature-icon-wrap { background: var(--blue-light); }
.feature-card:nth-child(4n+4):hover .feature-icon-wrap { background: var(--hp-purple-light); }

.feature-icon {
  font-size: 2rem; display: block; margin-bottom: 0.9rem;
}
.feature-icon-wrap {
  width: 60px; height: 60px; border-radius: 14px;
  background: var(--cream-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; margin: 0 auto 1rem;
  transition: background 0.3s;
}
.feature-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--brown); }
.feature-card p  { font-size: 0.88rem; color: var(--brown-light); line-height: 1.6; }

/* Optional photo header inside feature cards */
.feature-photo {
  margin: -1.75rem -1.5rem 1.25rem;
  height: 130px;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
}
.feature-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.feature-card:hover .feature-photo img { transform: scale(1.05); }

/* ============================================================
   MENU HIGHLIGHTS
   ============================================================ */
#menu-highlight { background: var(--white); }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1.4rem; margin-bottom: 2.5rem;
}
.menu-card {
  background: var(--white); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: all 0.3s;
}
.menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--amber-light); }

.menu-card-img {
  height: 165px;
  background: var(--cream-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; position: relative; overflow: hidden;
}
/* Neutralise the old rainbow bg classes */
.menu-card-img.bg-purple, .menu-card-img.bg-pink, .menu-card-img.bg-yellow,
.menu-card-img.bg-teal,   .menu-card-img.bg-orange { background: var(--cream-mid); }
.menu-card-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

.menu-card-body { padding: 1.25rem 1.4rem 1.4rem; }
.menu-card-body h3 { font-size: 1.15rem; margin-bottom: 0.35rem; color: var(--brown); }
.menu-card-body p  { font-size: 0.88rem; color: var(--brown-light); margin-bottom: 0.75rem; line-height: 1.6; }

.menu-tag {
  display: inline-block; padding: 0.22rem 0.8rem;
  border-radius: 50px; font-size: 0.78rem; font-weight: 700;
  background: var(--amber-pale); color: var(--amber-dark);
}
/* Neutralise old coloured tag variants */
.mt-purple, .mt-pink, .mt-teal, .mt-orange, .mt-yellow {
  background: var(--amber-pale); color: var(--amber-dark);
}

/* ============================================================
   SUNDAES
   ============================================================ */
#sundaes { background: linear-gradient(135deg, var(--pink-pale) 0%, #ffffff 55%, var(--hp-purple-pale) 100%); text-align: center; }

.sundae-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem; margin: 2rem 0;
}
.sundae-card {
  background: var(--white); border-radius: var(--radius);
  padding: 1.5rem 1rem; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: all 0.3s;
}
.sundae-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--amber-light);
}
.sundae-emoji { font-size: 2.4rem; display: block; margin-bottom: 0.6rem; }
.sundae-card h4 { font-size: 0.95rem; color: var(--brown); margin-bottom: 0.2rem; font-weight: 700; }
.sundae-card p  { font-size: 0.78rem; color: var(--brown-light); }

/* Dog banner */
.dog-banner {
  background: var(--sage); color: var(--white);
  padding: 2rem 2.5rem; border-radius: var(--radius); margin: 1.5rem 0;
  box-shadow: 0 8px 28px rgba(92, 122, 98, 0.25);
  display: flex; align-items: center; gap: 2rem;
}
.dog-banner-text { flex: 1; }
.dog-banner h3 { font-size: 1.6rem; margin-bottom: 0.35rem; }
.dog-banner p  { opacity: 0.9; font-size: 1rem; }
.dog-banner-img {
  width: 130px; height: 130px;
  object-fit: cover; border-radius: 50%;
  flex-shrink: 0;
  border: 4px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
@media (max-width: 600px) {
  .dog-banner { flex-direction: column; text-align: center; }
}

/* ============================================================
   HOURS
   ============================================================ */
#hours {
  position: relative;
  background: linear-gradient(135deg, #2A2760 0%, #3D2878 35%, #6B2B5A 65%, #243352 100%);
  color: var(--white); text-align: center;
  padding-top: 7rem;
}
#hours .wave-top { position: absolute; top: -1px; left: 0; right: 0; z-index: 3; line-height: 0; }
#hours .wave-top svg { display: block; width: 100%; }
#hours .section-label { color: rgba(253,217,138,0.95); background: rgba(253,217,138,0.1); border-color: rgba(253,217,138,0.3); }
#hours .section-title { color: var(--white); }
#hours .section-title span { color: rgba(253,217,138,0.9); }
#hours .section-subtitle { color: rgba(255,255,255,0.65); }

.hours-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin-top: 2.5rem;
}
.hours-card {
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius); padding: 2rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-top-width: 3px;
  transition: all 0.3s;
}
.hours-card:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.hours-card .h-icon { font-size: 2.2rem; display: block; margin-bottom: 0.75rem; }
.hours-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
/* Palette rotation on hours cards */
.hours-card:nth-child(3n+1) { border-top-color: var(--amber-light); }
.hours-card:nth-child(3n+1) h3 { color: var(--amber-light); }
.hours-card:nth-child(3n+2) { border-top-color: var(--pink-light); }
.hours-card:nth-child(3n+2) h3 { color: var(--pink-light); }
.hours-card:nth-child(3n+3) { border-top-color: var(--blue-light); }
.hours-card:nth-child(3n+3) h3 { color: var(--blue-light); }
.hours-card p  { font-size: 0.95rem; opacity: 0.85; line-height: 1.65; }
.hours-card .note  { font-size: 0.8rem; opacity: 0.55; margin-top: 0.4rem; }
.hours-card .closed { color: #FFAAAA; font-weight: 700; }

/* ============================================================
   EVENTS (HOME PREVIEW)
   ============================================================ */
#events { background: linear-gradient(135deg, var(--blue-pale) 0%, #ffffff 55%, var(--hp-purple-pale) 100%); }

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.4rem;
}
.event-card {
  background: var(--white); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: all 0.3s;
}
.event-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--amber-light); }

.event-card-top {
  padding: 1.4rem;
  display: flex; align-items: flex-start; gap: 1rem;
  border-bottom: 1px solid var(--border);
}
.event-icon-box {
  width: 50px; height: 50px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
  background: var(--amber-pale);
}
/* Event icon box colour variants */
.eib-purple { background: var(--hp-purple-pale); color: var(--hp-purple-mid); }
.eib-pink   { background: var(--pink-pale);      color: var(--pink-mid); }
.eib-teal   { background: var(--blue-pale);       color: var(--blue-mid); }
.eib-yellow, .eib-orange { background: var(--amber-pale); color: var(--amber-dark); }
/* nth-child fallback where no colour class is set */
.event-card:nth-child(4n+1) .event-icon-box { background: var(--amber-pale); color: var(--amber-dark); }
.event-card:nth-child(4n+2) .event-icon-box { background: var(--pink-pale);  color: var(--pink-mid); }
.event-card:nth-child(4n+3) .event-icon-box { background: var(--blue-pale);  color: var(--blue-mid); }
.event-card:nth-child(4n+4) .event-icon-box { background: var(--hp-purple-pale); color: var(--hp-purple-mid); }

.event-card-top h3 { font-size: 1.1rem; color: var(--brown); margin-bottom: 0.2rem; }
.event-card-top .date { font-size: 0.82rem; color: var(--amber-dark); font-weight: 700; }
.event-card-top .time { font-size: 0.8rem; color: var(--brown-light); }

.event-card-body { padding: 1rem 1.4rem 1.4rem; }
.event-card-body p { font-size: 0.9rem; color: var(--brown-light); line-height: 1.65; }

/* ============================================================
   FIND US / CONTACT
   ============================================================ */
#find-us { background: var(--white); text-align: center; }

/* Find Us exterior photo */
.find-us-photo {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.find-us-photo img {
  width: 100%; height: 260px;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.contact-card {
  background: var(--cream); border-radius: var(--radius);
  padding: 1.75rem 1.4rem; text-align: center;
  border: 1px solid var(--border);
  transition: all 0.3s;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--amber-light); }
.contact-icon { font-size: 2rem; display: block; margin-bottom: 0.7rem; }
.contact-card h3 { font-size: 1rem; color: var(--amber-dark); margin-bottom: 0.4rem; font-weight: 800; }
.contact-card p, .contact-card a {
  font-size: 0.9rem; color: var(--brown-light); display: block; line-height: 1.65;
}
.contact-card a:hover { color: var(--amber-dark); }

.social-links {
  display: flex; justify-content: center; gap: 0.85rem;
  flex-wrap: wrap; margin-top: 2.5rem;
}
.social-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.65rem 1.4rem; border-radius: 50px;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.88rem;
  transition: all 0.25s; border: none;
}
.social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sb-fb { background: #1877F2; color: white; }
.sb-ig { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: white; }
.sb-tt { background: #111; color: white; }

/* ============================================================
   FOOTER
   ============================================================ */
body > footer { background: var(--brown); color: var(--white); padding: 3.5rem 2rem 2rem; }
.footer-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .footer-logo {
  height: 44px; width: auto; margin-bottom: 0.9rem;
  filter: brightness(0) invert(1) opacity(0.9);
}
.footer-brand p  { opacity: 0.65; font-size: 0.9rem; line-height: 1.7; max-width: 290px; }

.footer-section h3 {
  font-family: var(--font-heading);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber-light); margin-bottom: 1rem;
}
.footer-section ul li { margin-bottom: 0.5rem; }
.footer-section ul li a { opacity: 0.65; font-size: 0.9rem; transition: all 0.2s; }
.footer-section ul li a:hover { opacity: 1; color: var(--amber-light); }
.footer-section ul li.footer-plain {
  opacity: 0.65; font-size: 0.9rem; line-height: 1.6;
  margin-bottom: 0.9rem;
}

.footer-bottom {
  max-width: 1080px; margin: 0 auto;
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.82rem; opacity: 0.5;
}

/* ============================================================
   PAGE HERO (inner pages, compact 25vh header)
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(200px, 26vh, 300px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 3rem) 2rem 3rem;
  text-align: center;
  border-bottom: none;
  background: linear-gradient(145deg, #1E1040 0%, #2A2760 30%, #3D1A6E 55%, #5E2650 80%, #1A2845 100%);
}

/* Content sits above the decorative layers */
.page-hero > * { position: relative; z-index: 2; }
.page-hero .wave-bottom { position: absolute; bottom: -1px; left: 0; right: 0; z-index: 3; line-height: 0; }
.page-hero .wave-bottom svg { display: block; width: 100%; }

/* Text styles on photo background */
.page-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); color: #ffffff; margin: 0; }
.page-hero .section-label {
  color: rgba(253,217,138,0.95);
  border-color: rgba(253,217,138,0.35);
  background: rgba(253,217,138,0.1);
}
.page-hero .ph-tagline {
  font-family: var(--font-script); font-size: 1.4rem;
  color: rgba(253,217,138,0.9); margin-top: 0.35rem;
}
.page-hero p {
  font-size: 0.97rem; color: rgba(255,255,255,0.78);
  margin-top: 0.6rem; max-width: 520px;
  margin-left: auto; margin-right: auto;
}

/* ============================================================
   MENU PAGE
   ============================================================ */
#menu-page { background: var(--cream); }

.menu-category { padding: 2.5rem 0; border-bottom: 1px solid var(--border); }
.menu-category:last-child { border-bottom: none; }

.cat-photo-wrap {
  margin: -2.5rem 0 1.75rem;
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius);
}
.cat-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.cat-photo-wrap img:hover { transform: scale(1.03); }

.cat-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.cat-icon {
  width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
  background: var(--amber-pale);
}
/* Menu category icon colour variants */
.ci-purple { background: var(--hp-purple-pale); color: var(--hp-purple-mid); }
.ci-pink   { background: var(--pink-pale);      color: var(--pink-mid); }
.ci-teal   { background: var(--blue-pale);       color: var(--blue-mid); }
.ci-yellow, .ci-orange { background: var(--amber-pale); color: var(--amber-dark); }
.ci-green  { background: var(--sage-light);      color: var(--sage); }

.cat-header-text h2 { font-size: 1.65rem; color: var(--brown); }
.cat-header-text p  { font-size: 0.86rem; color: var(--brown-light); margin-top: 0.15rem; }

.menu-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 0.75rem;
}
.menu-item {
  background: var(--white); border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  display: flex; justify-content: space-between; align-items: flex-start;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: all 0.25s;
  border-left: 3px solid var(--amber-light);
}
.menu-item:hover {
  border-left-color: var(--amber);
  box-shadow: var(--shadow);
  transform: translateX(3px);
}
/* Flatten all coloured left-border variants */
.mi-purple, .mi-pink, .mi-teal, .mi-orange, .mi-yellow, .mi-green { border-left-color: var(--amber-light); }

.mi-info h4 { font-size: 0.95rem; color: var(--brown); margin-bottom: 0.2rem; font-weight: 700; }
.mi-info p  { font-size: 0.78rem; color: var(--brown-light); line-height: 1.5; }
.mi-tags { display: flex; gap: 0.25rem; margin-top: 0.35rem; flex-wrap: wrap; }

.dtag {
  font-size: 0.68rem; padding: 0.1rem 0.5rem;
  border-radius: 50px; font-weight: 700;
}
.dtag-v  { background: #E8F5E9; color: #388E3C; }
.dtag-vg { background: #E0F7FA; color: #00838F; }
.dtag-gf { background: #FFF3E0; color: #BF6000; }

.mi-price {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 800;
  color: var(--amber-dark); white-space: nowrap; margin-left: 0.75rem;
}

/* Pick n Mix */
.pnm-items { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.25rem; }
.pnm-item {
  background: var(--white); border: 1.5px solid var(--amber-light);
  border-radius: 50px; padding: 0.32rem 0.85rem;
  font-size: 0.86rem; font-weight: 700; color: var(--brown);
  transition: all 0.2s;
}
.pnm-item:hover { background: var(--amber-pale); border-color: var(--amber); }
.pnm-prices { display: flex; gap: 1rem; flex-wrap: wrap; }
.pnm-price-box {
  background: var(--white); border-radius: var(--radius-sm);
  padding: 1rem 1.75rem; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.pnm-price-box .amount { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 800; color: var(--amber-dark); }
.pnm-price-box .desc   { font-size: 0.82rem; color: var(--brown-light); margin-top: 0.1rem; }

.allergen-notice {
  background: var(--amber-pale); border: 1.5px solid var(--amber-light);
  border-radius: var(--radius-sm); padding: 1rem 1.5rem;
  margin-top: 2rem; text-align: center;
}
.allergen-notice p { font-size: 0.88rem; color: var(--brown-mid); }

/* ============================================================
   TEAM PAGE
   ============================================================ */
#team-page { background: linear-gradient(160deg, var(--pink-pale) 0%, #ffffff 45%, var(--hp-purple-pale) 100%); }

/* ── Owner / staff grids ── */
.team-owners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 580px;
  margin: 0 auto 1rem;
}
.team-staff-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.25rem;
  max-width: 880px; margin: 0 auto;
}
.team-staff-grid > * { flex: 1 1 200px; max-width: 260px; }

.team-card {
  background: var(--white); border-radius: var(--radius);
  padding: 2rem 1.5rem; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: all 0.3s;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--amber-light); }

/* Owner highlight */
.tc-owner { border-top: 3px solid var(--amber); }
.tc-owner:hover { border-top-color: var(--amber-dark); }

/* ── Photo ring ── */
.team-photo-wrap {
  width: 175px; height: 175px;
  border-radius: 50%; overflow: hidden;
  margin: 0 auto 1rem;
  border: 3px solid var(--amber-light);
  box-shadow: 0 4px 16px rgba(44, 26, 14, 0.12);
  transition: border-color 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
.team-card:hover .team-photo-wrap {
  border-color: var(--amber);
  box-shadow: 0 6px 22px rgba(245, 166, 61, 0.3);
}
.team-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform 0.4s ease;
}
.team-card:hover .team-photo-wrap img { transform: scale(1.08); }

/* Placeholder (no photo) */
.team-photo-placeholder {
  background: var(--amber-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
}

/* Owner photo = slightly larger */
.tc-owner .team-photo-wrap {
  width: 200px; height: 200px;
  border-width: 4px; border-color: var(--amber);
}

/* Old avatar kept for backwards compat on any page that still uses it */
.team-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; margin: 0 auto 1rem;
  background: var(--amber-pale);
}
/* Team activity icon colour variants */
.ta-purple { background: var(--hp-purple-pale); color: var(--hp-purple-mid); }
.ta-pink   { background: var(--pink-pale);      color: var(--pink-mid); }
.ta-teal   { background: var(--blue-pale);       color: var(--blue-mid); }
.ta-yellow, .ta-orange { background: var(--amber-pale); color: var(--amber-dark); }
.ta-green  { background: var(--sage-light);      color: var(--sage); }

.team-card h3 { font-size: 1.15rem; color: var(--brown); margin-bottom: 0.2rem; }
.team-card > p { font-size: 0.86rem; color: var(--brown-light); }

/* Fun-fact quote */
.team-fun {
  font-style: italic; font-size: 0.8rem;
  color: var(--brown-light); margin-top: 0.75rem;
  padding-top: 0.65rem; line-height: 1.55;
  border-top: 1px dashed var(--border);
}

.role-badge {
  display: inline-block; padding: 0.22rem 0.8rem;
  border-radius: 50px; font-size: 0.72rem; font-weight: 700;
  margin-top: 0.6rem;
}
.rb-owner   { background: var(--amber-pale);  color: var(--amber-dark); }
.rb-manager { background: var(--pink-pale);    color: var(--pink-mid); }
.rb-staff   { background: var(--blue-pale);    color: var(--blue-mid); }

/* Team values */
.values-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(225px,1fr)); gap: 1.25rem; margin: 2rem 0;
}
.value-card {
  background: var(--white); border-radius: var(--radius);
  padding: 1.6rem 1.4rem; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: all 0.3s;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.value-card .v-icon { font-size: 2.2rem; display: block; margin-bottom: 0.7rem; }
.value-card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.value-card p  { font-size: 0.88rem; color: var(--brown-light); line-height: 1.6; }

/* Value card palette rotation */
.value-card:nth-child(4n+1) { border-top: 3px solid var(--amber); }
.value-card:nth-child(4n+1) h3 { color: var(--amber-dark); }
.value-card:nth-child(4n+2) { border-top: 3px solid var(--pink); }
.value-card:nth-child(4n+2) h3 { color: var(--pink-mid); }
.value-card:nth-child(4n+3) { border-top: 3px solid var(--blue); }
.value-card:nth-child(4n+3) h3 { color: var(--blue-mid); }
.value-card:nth-child(4n+4) { border-top: 3px solid var(--hp-purple-mid); }
.value-card:nth-child(4n+4) h3 { color: var(--hp-purple-mid); }

.join-banner {
  background: linear-gradient(135deg, #2A2760 0%, #3D2878 40%, #6B2B5A 75%, #243352 100%);
  color: var(--white);
  border-radius: var(--radius); padding: 3rem 2rem; text-align: center;
  box-shadow: var(--shadow); margin-top: 3rem;
}
.join-banner h2 { font-size: 1.9rem; margin-bottom: 0.75rem; }
.join-banner p  { opacity: 0.75; font-size: 1rem; max-width: 500px; margin: 0 auto 1.5rem; line-height: 1.7; }

/* ============================================================
   EVENTS PAGE
   ============================================================ */
#events-page { background: linear-gradient(160deg, var(--blue-pale) 0%, #ffffff 45%, var(--pink-pale) 100%); }

.event-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 1.4rem; margin-bottom: 2.5rem;
}
.event-hero-card {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  background: var(--white); transition: all 0.3s;
}
.event-hero-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--amber-light); }

.ehc-banner {
  height: 120px;
  background: var(--amber-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
}
/* Flatten old coloured banner variants */
.ehc-banner.bg-pink, .ehc-banner.bg-purple, .ehc-banner.bg-teal,
.ehc-banner.bg-orange, .ehc-banner.bg-yellow { background: var(--amber-pale); }

.ehc-body { padding: 1.4rem; }
.ehc-body h3 { font-size: 1.25rem; color: var(--brown); margin-bottom: 0.5rem; }
.ehc-body .tag-row { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ehc-body .etag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.7rem; border-radius: 50px;
  font-size: 0.76rem; font-weight: 700;
  background: var(--amber-pale); color: var(--amber-dark);
}
.etag-date, .etag-time, .etag-loc { background: var(--amber-pale); color: var(--amber-dark); }
.ehc-body p { font-size: 0.9rem; color: var(--brown-light); line-height: 1.7; }

.instagram-cta {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: white; border-radius: var(--radius);
  padding: 2.75rem 2rem; text-align: center;
  box-shadow: 0 10px 34px rgba(220,39,67,0.25); margin-top: 3rem;
}
.instagram-cta h2 { font-size: 1.85rem; margin-bottom: 0.65rem; }
.instagram-cta p  { opacity: 0.9; font-size: 1rem; max-width: 480px; margin: 0 auto 1.5rem; }

.private-hire {
  background: var(--sage-light); border-radius: var(--radius);
  padding: 2.75rem 2rem; text-align: center;
  border: 1.5px solid rgba(92,122,98,0.2); margin-top: 1.5rem;
}
.private-hire h2 { font-size: 1.85rem; color: var(--sage); margin-bottom: 0.65rem; }
.private-hire p  { color: var(--brown-light); font-size: 1rem; max-width: 520px; margin: 0 auto 1.5rem; }

.faq-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
.faq-item {
  background: var(--white); border-radius: var(--radius-sm);
  border: 1px solid var(--border); border-left: 3px solid var(--amber);
  transition: all 0.25s;
  overflow: hidden;
}
.faq-item:hover { border-left-color: var(--hp-purple-mid); box-shadow: var(--shadow-sm); }
.faq-item[open] { border-left-color: var(--hp-purple-mid); }
.faq-item h4 { font-size: 0.97rem; color: var(--brown); margin-bottom: 0.3rem; }
.faq-item p  { font-size: 0.88rem; color: var(--brown-light); line-height: 1.65; }

/* details/summary accordion variant */
details.faq-item summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 1.4rem;
  cursor: pointer;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1rem; color: var(--brown);
  user-select: none;
  gap: 1rem;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+';
  font-size: 1.4rem; font-weight: 400; color: var(--hp-purple-mid);
  flex-shrink: 0; transition: transform 0.25s;
}
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item > p {
  padding: 0 1.4rem 1.2rem;
  font-size: 0.95rem; color: var(--brown-light); line-height: 1.7;
  margin: 0;
}

/* ============================================================
   TESTIMONIAL / REVIEWS
   ============================================================ */
#reviews { background: var(--white); }

.review-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}

.review-graphic {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.review-stars {
  font-size: 1.9rem;
  color: var(--amber);
  letter-spacing: 0.05em;
  margin: 0.75rem 0 1rem;
  display: block;
}

.review-text blockquote {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--brown);
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

.review-text cite {
  display: block;
  font-size: 0.9rem;
  color: var(--brown-light);
  font-style: normal;
  font-weight: 700;
}

.review-note {
  font-size: 0.9rem;
  color: var(--brown-light);
  margin-top: 0.75rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .review-wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 420px;
  }
}

/* ============================================================
   PHOTO STRIP
   ============================================================ */
.photo-strip {
  overflow: hidden;
  padding: 0.9rem 0;
  background: var(--cream-mid);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.photo-strip-track {
  display: flex;
  gap: 0.85rem;
  width: max-content;
  animation: scrollStrip 38s linear infinite;
}

.photo-strip-track:hover {
  animation-play-state: paused;
}

.strip-img {
  width: 210px;
  height: 158px;
  object-fit: cover;
  border-radius: 14px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.strip-img:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow);
}

@keyframes scrollStrip {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   SUNDAE PHOTO PAIR
   ============================================================ */
.sundae-photo-pair {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 0 auto 2.5rem;
  max-width: 640px;
}

.sundae-photo-pair img {
  flex: 1;
  min-width: 0;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sundae-photo-pair img:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-hover);
}

@media (max-width: 540px) {
  .sundae-photo-pair { flex-direction: column; max-width: 320px; }
  .sundae-photo-pair img { height: 220px; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes page-star {
  from { opacity: var(--op, 0.3); transform: scale(1)   rotate(0deg);   }
  to   { opacity: 0.08;           transform: scale(0.6) rotate(20deg);  }
}

.fade-up {
  opacity: 0; transform: translateY(28px) scale(0.97);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.visible { opacity: 1; transform: translateY(0) scale(1); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .about-grid      { grid-template-columns: 1fr; gap: 2.5rem; }
  .hours-grid      { grid-template-columns: 1fr; }
  .footer-inner    { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
  .nav-links {
    display: none; position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: var(--cream); flex-direction: column;
    /* stretch, not centre: every row spans the full panel width so the
       plain links and the dropdown toggles share one left edge */
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow); z-index: 999;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links > li > a { display: block; }
  .nav-links .nav-cta { margin-left: 0; text-align: left; }
  .hamburger { display: flex; }

  /* Mobile dropdown: align toggle with the other nav links */
  .nav-dropdown-toggle {
    display: block;
    width: 100%;
  }
  .nav-dropdown-toggle .nav-arrow { float: right; line-height: inherit; }
  .nav-sub {
    position: static; transform: none;
    box-shadow: none; border: none; border-radius: 0;
    padding: 0; background: transparent;
    min-width: 0;
  }
  .nav-sub::before, .nav-sub::after { display: none; }
  .nav-sub li a {
    padding: 0.4rem 1rem 0.4rem 2rem;
    font-size: 0.88rem; color: var(--brown-light);
  }
  .nav-sub li a:hover { background: var(--amber-pale); color: var(--brown); }
  .nav-dropdown.open .nav-sub { display: block; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .social-links { flex-direction: column; align-items: center; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .pnm-prices { flex-direction: column; }
}
@media (max-width: 560px) {
  /* One card per row on phones: let it use the full width instead of
     sitting narrow in the middle */
  .features-grid > *, .team-staff-grid > * { max-width: none; }
}
@media (max-width: 480px) {
  section { padding: 3rem 1.25rem; }
  .page-hero { padding: 4.75rem 1.25rem 1.75rem; }
  .btn { width: 100%; max-width: 300px; justify-content: center; }
  .nav-inner { padding: 0 1.25rem; }

  /* Team photos - cap size on very small screens */
  .team-photo-wrap { width: 130px; height: 130px; }
  .tc-owner .team-photo-wrap { width: 150px; height: 150px; }

  /* Hero hours aligns with buttons */
  .hero-buttons { align-items: center; }

  /* Sundae grid - 2 col on mobile is plenty */
  .sundae-grid { grid-template-columns: repeat(2, 1fr); }

  /* Dog banner tighter padding */
  .dog-banner { padding: 1.5rem 1.25rem; }

  /* Review section centred on small screens */
  .review-wrap { max-width: 100%; }
}

/* ============================================================
   MAGIC SPARKLE ANIMATIONS & MAGICAL BUTTON
   ============================================================ */

/* ── Hero magic frame ── */
@keyframes framePulse {
  0%, 100% {
    box-shadow:
      inset 0    0   80px 20px rgba(253, 217, 138, 0.18),
      inset 0    0  160px 60px rgba(124, 58,  237, 0.12),
      inset 0   60px 60px -30px rgba(253, 217, 138, 0.12),
      inset 0  -60px 60px -30px rgba(253, 217, 138, 0.12);
  }
  50% {
    box-shadow:
      inset 0    0  130px 40px rgba(253, 217, 138, 0.48),
      inset 0    0  260px 90px rgba(124, 58,  237, 0.30),
      inset 0   80px 80px -20px rgba(253, 217, 138, 0.32),
      inset 0  -80px 80px -20px rgba(253, 217, 138, 0.32);
  }
}

@keyframes cornerSpin {
  0%, 100% { opacity: 0.5; transform: scale(0.85) rotate(0deg); }
  50%       { opacity: 1;   transform: scale(1.15) rotate(180deg); }
}

.hero-magic-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  animation: framePulse 4s ease-in-out infinite;
}

/* Corner sparkles: positioned inside so overflow:hidden doesn't clip them */
.hero-magic-frame::before,
.hero-magic-frame::after {
  content: '✦';
  position: absolute;
  font-size: 1.4rem;
  color: #FDD98A;
  line-height: 1;
}
.hero-magic-frame::before {
  top: 0.6rem; left: 0.7rem;
  animation: cornerSpin 3.5s ease-in-out infinite;
}
.hero-magic-frame::after {
  bottom: 0.6rem; right: 0.7rem;
  animation: cornerSpin 3.5s ease-in-out infinite 1.75s;
}

/* Two more corners via child spans */
.hmf-tr, .hmf-bl {
  position: absolute;
  font-size: 1.4rem;
  color: #FDD98A;
  line-height: 1;
  pointer-events: none;
}
.hmf-tr { top: 0.6rem;    right: 0.7rem;  animation: cornerSpin 3.5s ease-in-out infinite 0.875s; }
.hmf-bl { bottom: 0.6rem; left: 0.7rem;   animation: cornerSpin 3.5s ease-in-out infinite 2.625s; }

/* Pulsing glow border for the hero CTA */
@keyframes magicGlow {
  0%, 100% {
    box-shadow:
      0 0 8px  3px  rgba(253, 217, 138, 0.7),
      0 0 28px 8px  rgba(124, 58,  237, 0.3),
      inset 0 0 8px rgba(253, 217, 138, 0.08);
    border-color: rgba(253, 217, 138, 0.9);
  }
  50% {
    box-shadow:
      0 0 18px 6px  rgba(253, 217, 138, 1),
      0 0 55px 14px rgba(124, 58,  237, 0.55),
      inset 0 0 16px rgba(253, 217, 138, 0.18);
    border-color: #ffffff;
  }
}

.btn-magic {
  border: 2px solid rgba(253, 217, 138, 0.9);
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  animation: magicGlow 2.4s ease-in-out infinite;
}
.btn-magic:hover {
  transform: translateY(-2px);
}

@keyframes twinkle {
  0%, 100% { opacity: 0;   transform: scale(0.4) rotate(0deg); }
  40%       { opacity: 1;   transform: scale(1.1) rotate(160deg); }
  60%       { opacity: 0.8; transform: scale(0.9) rotate(200deg); }
}
@keyframes floatStar {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  50%       { transform: translateY(-18px) rotate(20deg); }
}
@keyframes drift {
  0%   { transform: translateX(0)   translateY(0); }
  33%  { transform: translateX(12px) translateY(-8px); }
  66%  { transform: translateX(-8px) translateY(6px); }
  100% { transform: translateX(0)   translateY(0); }
}

.magic-star {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  font-style: normal;
  line-height: 1;
  animation: twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
  color: var(--col, #FDD98A);
  font-size: var(--sz, 1.4rem);
  opacity: 0;
}

/* Wavy section divider */
.wave-divider {
  width: 100%; overflow: hidden; line-height: 0;
  margin-bottom: -2px;
}
.wave-divider svg { display: block; width: 100%; }

/* ── HP section accent colours ── */
.hp-section { background: var(--hp-purple-pale); }
.hp-dark-section {
  background: linear-gradient(135deg, var(--hp-navy) 0%, #2D1B69 100%);
  color: var(--white);
}

/* ── Logo magic hit animation ── */
@keyframes logoMagicHit {
  0%   { transform: scale(1);    filter: none; }
  15%  { transform: scale(1.22); filter: brightness(2.2) drop-shadow(0 0 28px rgba(253,217,138,0.95)); }
  35%  { transform: scale(0.93); filter: brightness(1.5) drop-shadow(0 0 18px rgba(196,181,253,0.8)); }
  60%  { transform: scale(1.08); filter: brightness(1.2) drop-shadow(0 0 10px rgba(253,217,138,0.5)); }
  100% { transform: scale(1);    filter: none; }
}
.logo-magic-hit {
  animation: logoMagicHit 0.75s ease forwards !important;
}

/* ── "Not your average" differentiator strip ── */
.diff-strip {
  background: var(--hp-purple-pale);
  padding: 2rem 2rem 4rem;
}
.diff-strip .section-label-hp {
  background: rgba(124, 58, 237, 0.08);
}
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto;
}
.diff-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
}
.diff-card:nth-child(1) {
  background: var(--white);
  border-color: var(--amber-light);
  border-top: 3px solid var(--amber);
}
.diff-card:nth-child(2) {
  background: var(--white);
  border-color: var(--pink-light);
  border-top: 3px solid var(--pink);
}
.diff-card:nth-child(3) {
  background: var(--white);
  border-color: var(--blue-light);
  border-top: 3px solid var(--blue);
}
.diff-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--hp-purple-light);
}
.diff-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
  animation: floatStar 4s ease-in-out infinite;
}
.diff-card:nth-child(2) .diff-icon { animation-delay: 1.3s; }
.diff-card:nth-child(3) .diff-icon { animation-delay: 2.6s; }
.diff-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--brown);
  margin-bottom: 0.6rem;
}
.diff-card p {
  font-size: 0.95rem;
  color: var(--brown-light);
  line-height: 1.7;
}
@media (max-width: 720px) {
  .diff-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ── Magical feature cards (HP flavour) ── */
.feature-card-hp {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  text-align: left;
}
.feature-card-hp:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--hp-purple-light);
}
.fchp-banner {
  height: 160px;
  background: var(--hp-purple-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 4.5rem;
  position: relative; overflow: hidden;
}
.fchp-banner img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
  transition: transform 0.4s ease;
}
.feature-card-hp:hover .fchp-banner img { transform: scale(1.05); }
.fchp-label {
  position: absolute; bottom: 0.6rem; right: 0.75rem;
  background: var(--hp-purple-mid);
  color: white;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.7rem; border-radius: 50px;
}
.fchp-body {
  padding: 1.4rem;
}
.fchp-body h3 {
  font-size: 1.15rem; color: var(--brown);
  margin-bottom: 0.35rem;
}
.fchp-body p {
  font-size: 0.88rem; color: var(--brown-light); line-height: 1.65;
}
/* Icon inside fchp-body (used on play page) */
.fchp-icon {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* ── Events page: taller banners & colourful backgrounds ── */
#events-page .ehc-banner {
  height: 200px;
}
#events-page .event-hero-card:hover {
  transform: translateY(-8px);
}
#events-page .ehc-banner.bg-pink   { background: linear-gradient(135deg, #FFD5E8, #FFB3CC); }
#events-page .ehc-banner.bg-purple { background: linear-gradient(135deg, #E0CCFF, #C4A0FF); }
#events-page .ehc-banner.bg-teal   { background: linear-gradient(135deg, #B3F0E0, #80E5C8); }
#events-page .ehc-banner.bg-orange { background: linear-gradient(135deg, #FFD5B3, #FFBB80); }
#events-page .ehc-banner.bg-yellow { background: linear-gradient(135deg, #FFF3A3, #FFE566); }

/* ── Events page: richer private hire block ── */
#events-page .private-hire {
  background: linear-gradient(135deg, #E8F5E9, #C8EFD8);
  box-shadow: var(--shadow);
}
#events-page .private-hire h2 { color: var(--sage); }

/* ============================================================
   HOCUS POCUS PLAY: HERO
   ============================================================ */
#hp-hero {
  min-height: clamp(540px, 82vh, 760px);
  background: var(--hp-navy);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + 1rem) 2rem 8rem;
}

/* Swap background-image to a real HP photo when available */
#hp-hero::after {
  content: '';
  position: absolute; inset: -10px;   /* bleed so the blur has no soft edge */
  background-image: url('images/Outdoors pictures/image-23.jpg');
  background-size: cover; background-position: center 42%;
  filter: blur(2px);
  z-index: 0;
}

#hp-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    /* Readability scrim, tight behind the text rather than over the whole photo */
    radial-gradient(ellipse 58% 62% at 50% 50%, rgba(12, 6, 34, 0.72) 0%, rgba(12, 6, 34, 0.30) 62%, rgba(12, 6, 34, 0) 100%),
    /* Gentle top and bottom weighting so the nav and wave have something to sit on */
    linear-gradient(180deg, rgba(12, 6, 34, 0.45) 0%, rgba(12, 6, 34, 0.05) 30%, rgba(12, 6, 34, 0.10) 62%, rgba(30, 16, 64, 0.55) 100%);
  z-index: 1;
}

/* Magic sparkle blobs */
.hp-blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.25; z-index: 1; pointer-events: none;
}
.hp-blob-1 { width: 500px; height: 500px; background: var(--hp-purple-mid); top: -100px; left: -150px; }
.hp-blob-2 { width: 400px; height: 400px; background: #2563EB; bottom: -80px; right: -100px; }
.hp-blob-3 { width: 300px; height: 300px; background: var(--amber); top: 40%; left: 55%; }

/* Wave carved into the bottom of the hero */
.hero-wave-bottom {
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; z-index: 5;
  line-height: 0;
  pointer-events: none;
}
.hero-wave-bottom svg { display: block; width: 100%; }

/* HP hero content inherits .hero-content, .hero-logo, .hero-tagline etc. */
#hp-hero .hero-tagline { color: #C4B5FD; }

/* ============================================================
   HP SECTION LABELS
   ============================================================ */
.section-label-hp {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--hp-purple-mid);
  margin-bottom: 0.6rem;
}

.section-title-hp span { color: var(--hp-purple-mid); }

/* HP btn variant */
.btn-hp {
  background: var(--hp-purple-mid); color: var(--white);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}
.btn-hp:hover {
  background: var(--hp-purple); color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(91, 33, 182, 0.45);
}

/* ============================================================
   BOOKING SECTION
   ============================================================ */
#book-section {
  background: linear-gradient(to bottom, #1A1F3E 0%, #243870 35%, #3D2878 65%, #5E2650 100%);
  color: var(--white);
  text-align: center;
  padding: 5rem 2rem 0;
  overflow: hidden;
}
#book-section .section-label-hp { color: #C4B5FD; background: rgba(196,181,253,0.12); border-color: rgba(196,181,253,0.3); }
#book-section .section-title    { color: var(--white); }
#book-section .section-title span { color: #C4B5FD; }
#book-section .section-subtitle { color: rgba(255,255,255,0.7); }

.booking-cta-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  max-width: 700px;
  margin: 2rem auto 0;
  backdrop-filter: blur(10px);
}
.booking-cta-card p {
  color: rgba(255,255,255,0.8);
  font-size: 1rem; line-height: 1.7;
  margin-bottom: 1.75rem;
}
.booking-cta-card .booking-perks {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: center; margin-bottom: 1.75rem;
}
.booking-perk {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50px;
  padding: 0.4rem 1rem;
  font-size: 0.84rem; font-weight: 700;
  color: rgba(255,255,255,0.9);
}

/* ── Bookwhen embed wrapper ── */
.bookwhen-embed-wrap {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 500px;
  border: 1px solid var(--hp-purple-light);
  box-shadow: var(--shadow);
}

/* The iframe is cross-origin, so the panel around it is what we can style:
   a titled bar, a loading state, and a frame that matches the site's cards. */
.bookwhen-frame { display: flex; flex-direction: column; }
.bookwhen-frame[hidden] { display: none; }

.bookwhen-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
  padding: 0.8rem 1.25rem;
  background: var(--hp-purple-pale);
  border-bottom: 1px solid var(--hp-purple-light);
}
.bookwhen-bar-title {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--hp-purple-mid);
}
.bookwhen-expand {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--hp-purple-light);
  border-radius: 999px;
  background: var(--white);
  color: var(--hp-purple-mid);
  font-family: var(--font-heading); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bookwhen-expand:hover { background: var(--hp-purple-pale); }
.bookwhen-expand .icon-close { display: none; }
.bookwhen-expand[aria-pressed="true"] .icon-open { display: none; }
.bookwhen-expand[aria-pressed="true"] .icon-close { display: inline; }

.booking-gate-guest {
  display: flex; align-items: flex-start; gap: 0.5rem;
  max-width: 440px !important;
  margin: 0.25rem 0 0 !important;
  padding: 0.75rem 1rem;
  text-align: left;
  background: var(--hp-purple-pale);
  border: 1px solid var(--hp-purple-light);
  border-radius: var(--radius-sm);
  font-size: 0.86rem !important;
  line-height: 1.5;
  color: var(--brown-mid) !important;
}
.booking-gate-guest svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--hp-purple-mid); }
.booking-gate-guest strong { color: var(--hp-purple-mid); }

.bookwhen-loading {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 3.5rem 1.5rem;
  font-size: 0.9rem; color: var(--brown-light);
}
.bookwhen-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--hp-purple-light);
  border-top-color: var(--hp-purple-mid);
  animation: bookwhen-spin 0.7s linear infinite;
}
@keyframes bookwhen-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bookwhen-spinner { animation: none; } }

.bookwhen-frame iframe {
  display: block; width: 100%; height: 900px;
  border: 0; background: var(--white);
}
@media (max-width: 640px) { .bookwhen-frame iframe { height: 780px; } }

/* Fullscreen booking: lift the frame out to cover the whole viewport.
   viewport-fit=cover puts the page under the notch and home indicator, so the
   FRAME reserves those strips and the bar stays an ordinary row inside them.
   (Padding the bar itself and pinning it with position:sticky renders blank on
   iOS Safari — sticky inside a fixed, dvh-sized flex container is unreliable.) */
.bookwhen-frame.is-fullscreen {
  position: fixed; inset: 0; z-index: 3000;
  height: 100vh; height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  margin: 0; border-radius: 0;
  background: var(--hp-purple-pale);
  box-shadow: none;
}
/* Never let the flexed iframe squeeze the bar or its contents away. */
.bookwhen-frame.is-fullscreen .bookwhen-bar {
  flex: 0 0 auto;
  min-height: 56px;
  padding-top: 0.7rem; padding-bottom: 0.7rem;
}
/* The title gives way before the Close button does, so Close is always there. */
.bookwhen-frame.is-fullscreen .bookwhen-bar-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bookwhen-frame.is-fullscreen .bookwhen-expand {
  flex: 0 0 auto;
  min-height: 40px; padding: 0.5rem 1.1rem;
  background: var(--hp-purple-mid); color: var(--white);
  border-color: var(--hp-purple-mid);
}
.bookwhen-frame.is-fullscreen iframe {
  flex: 1 1 auto; height: auto; min-height: 0;
}
body.bookwhen-locked { overflow: hidden; }
/* .bookwhen-embed-wrap is its own stacking context (z-index: 2), so the fixed
   frame can't escape it on its own — lift the whole wrap above the navbar. */
body.bookwhen-locked .bookwhen-embed-wrap { z-index: 3000; }

.booking-gate-note {
  font-size: 0.85rem !important;
  color: var(--brown-light);
  opacity: 0.9;
}
.booking-gate-warning {
  display: flex; align-items: flex-start; gap: 0.6rem;
  max-width: 440px !important;
  text-align: left;
  margin: 0.25rem 0 0 !important;
  padding: 0.8rem 1rem;
  background: var(--amber-pale);
  border: 1px solid var(--amber-light);
  border-radius: var(--radius-sm);
  font-size: 0.84rem !important;
  line-height: 1.6;
  color: var(--brown-mid) !important;
}
.booking-gate-warning svg { color: var(--amber-dark); flex-shrink: 0; margin-top: 0.1rem; }

.booking-gate {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem;
  text-align: center; padding: 3rem 2rem;
}
.booking-gate-icon { color: var(--hp-purple-mid); line-height: 0; }
.booking-gate-icon svg { display: inline-block; }
.booking-gate h3 {
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800;
  color: var(--brown); margin: 0;
}
.booking-gate p {
  color: var(--brown-light); font-size: 0.92rem; line-height: 1.7;
  max-width: 420px; margin: 0;
}
.booking-gate-check {
  display: flex; align-items: flex-start; gap: 0.6rem;
  max-width: 420px; text-align: left;
  font-size: 0.88rem; color: var(--brown); cursor: pointer;
  background: var(--hp-purple-pale); border: 1px solid var(--hp-purple-light);
  border-radius: var(--radius); padding: 0.85rem 1rem;
}
.booking-gate-check input { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--hp-purple-mid); width: 16px; height: 16px; }
.booking-gate .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================================
   MAGIC BEANS BRIDGE SECTION (on HP homepage)
   ============================================================ */
#cafe-bridge {
  background: var(--amber-pale);
  padding: 5rem 2rem;
}
#cafe-bridge .section-header { text-align: center; margin-bottom: 2.5rem; }

/* ── Cafe content now lives in the dark book-section ── */
#book-section .section-label       { color: #C4B5FD; background: rgba(196,181,253,0.12); border-color: rgba(196,181,253,0.3); }
#book-section .cafe-bridge-text h2 { color: var(--white); }
#book-section .cafe-bridge-text p  { color: rgba(255,255,255,0.78); }
#book-section .cafe-bridge-perk    { color: var(--white); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }

/* ── Booking content on light backgrounds (cafe-bridge + find-us) ── */
#cafe-bridge .section-label-hp, #find-us .section-label-hp  { color: var(--hp-purple-mid); background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.25); }
#cafe-bridge .section-title,     #find-us .section-title      { color: var(--brown); }
#cafe-bridge .section-title span, #find-us .section-title span { color: var(--hp-purple-mid); }
#cafe-bridge .section-subtitle,  #find-us .section-subtitle   { color: var(--brown-light); }
#cafe-bridge .booking-cta-card,  #find-us .booking-cta-card   { background: rgba(124,58,237,0.06); border: 1.5px solid rgba(124,58,237,0.18); }
#cafe-bridge .booking-perk,      #find-us .booking-perk       { color: var(--brown); border-color: rgba(124,58,237,0.3); }

.cafe-bridge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  max-width: 1080px; margin: 0 auto;
}
.cafe-bridge-text .bridge-logo {
  height: 56px; width: auto; margin-bottom: 1.25rem;
}
.cafe-bridge-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: var(--brown); margin-bottom: 1rem;
}
.cafe-bridge-text p {
  font-size: 1rem; color: var(--brown-light);
  line-height: 1.75; margin-bottom: 1rem;
}
.cafe-bridge-perks {
  display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.5rem;
}
.cafe-bridge-perk {
  background: var(--white);
  border: 1.5px solid var(--amber-light);
  border-radius: 50px;
  padding: 0.35rem 0.9rem;
  font-size: 0.84rem; font-weight: 700; color: var(--brown-mid);
}
.cafe-bridge-img {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow);
}
.cafe-bridge-img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .cafe-bridge-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── Magical Events line-up (homepage #cafe-bridge) ──
   Poster panel + a scannable list of what's on, so the section carries
   real content instead of a heading and two buttons. Deliberately not
   another photo-card grid: the "What's Here" strip above already is one. */
#cafe-bridge { position: relative; overflow: hidden; }
#cafe-bridge::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 12% 0%,   rgba(124,58,237,0.10), transparent 65%),
    radial-gradient(60% 55% at 92% 100%, rgba(244,114,182,0.12), transparent 65%);
}
#cafe-bridge .container { position: relative; z-index: 2; }

/* The shared label is display:block, and #cafe-bridge/#find-us already give it
   a tint + border-colour -- which paints a full-width band with nothing to
   contain it. Shrink-wrap it into the pill those rules were clearly written for. */
#cafe-bridge .section-label-hp,
#reviews .section-label-hp {
  display: inline-block;
  padding: 0.34rem 0.85rem;
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 999px;
  background: rgba(124,58,237,0.08);
}

.ev-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 1.75rem;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Poster panel ── */
.ev-poster {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 430px;
  padding: 2rem 1.85rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ev-poster > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;   /* frame the bunting and decking, not the sky */
  transition: transform 0.7s ease;
}
.ev-poster::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(30,27,75,0.12) 0%,
    rgba(30,27,75,0.55) 45%,
    rgba(30,27,75,0.93) 100%);
}
.ev-poster:hover > img { transform: scale(1.05); }

.ev-poster h3 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.35rem, 2.5vw, 1.7rem); line-height: 1.2;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.ev-poster-body > p {
  font-size: 0.92rem; line-height: 1.7;
  color: rgba(255,255,255,0.82);
  margin-bottom: 1.2rem;
}
.ev-poster-btns { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.btn-ghost-light {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,0.22);
  color: var(--white);
  transform: translateY(-2px);
}

/* ── What's-on list ──
   One panel of hairline-separated rows, not four floating cards. No icons and
   no chevrons: the titles carry it, and the row is the click target. */
.ev-list {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(124,58,237,0.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ev-item {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.3rem;
  padding: 1.2rem 1.4rem;
  border-top: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.2s ease;
}
.ev-item:first-child { border-top: none; }
.ev-item:hover { background: var(--hp-purple-pale); }

.ev-item-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
}
.ev-item-head strong {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 1.02rem; color: var(--brown);
}
.ev-item:hover .ev-item-head strong { text-decoration: underline; text-underline-offset: 3px; }
.ev-when {
  flex-shrink: 0;
  font-size: 0.76rem; color: var(--brown-light);
}
.ev-item-text {
  font-size: 0.88rem; line-height: 1.6;
  color: var(--brown-light);
}

@media (max-width: 900px) {
  .ev-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .ev-poster { min-height: 330px; }
}
@media (max-width: 520px) {
  #cafe-bridge { padding: 4rem 1.25rem; }
  .ev-poster { padding: 1.6rem 1.3rem; }
  .ev-item { padding: 1.05rem 1.15rem; }
  /* The timing note has nowhere to sit beside a wrapped title on a phone. */
  .ev-item-head { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .ev-poster-btns .btn { flex: 1; text-align: center; }
}

/* ============================================================
   COOKIE BANNER
   The homepage folds consent into the magic intro overlay.
   Every other page can be landed on directly, so it needs
   this standalone banner.
   ============================================================ */
#cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998;
  background: var(--brown);
  color: var(--white);
  border-top: 3px solid var(--hp-purple-mid);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
  padding: 1.1rem 2rem;
  padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1rem 1.5rem;
  /* Off-screen until the script decides consent is still needed, so a
     returning visitor never sees it slide away on every page load. */
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
}
#cookie-banner.cb-show {
  transform: translateY(0);
  visibility: visible;
}
#cookie-banner p {
  flex: 1; min-width: 240px;
  font-size: 0.88rem; line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
#cookie-banner a { color: var(--amber-light); text-decoration: underline; }

.cookie-btn-group { display: flex; gap: 0.6rem; flex-shrink: 0; flex-wrap: wrap; }
.cookie-accept,
.cookie-decline {
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.88rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
}
.cookie-accept {
  background: var(--hp-purple-mid); color: var(--white);
  border: 1px solid var(--hp-purple-mid);
  padding: 0.55rem 1.4rem;
}
.cookie-accept:hover { background: var(--hp-purple); border-color: var(--hp-purple); }
.cookie-decline {
  background: transparent; color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.55rem 1.2rem;
}
.cookie-decline:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.6); }

@media (max-width: 600px) {
  #cookie-banner { padding: 1rem 1.25rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  #cookie-banner p { font-size: 0.82rem; }
  .cookie-btn-group { width: 100%; }
  .cookie-accept, .cookie-decline { flex: 1; text-align: center; }
}


/* ============================================================
   REVIEWS
   Masonry wall of real customer quotes. The first six are always
   visible; the rest are revealed by the "read more" button so the
   section can hold a lot of social proof without eating the page.
   ============================================================ */
#reviews {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(85% 55% at 50% -8%,  rgba(244,114,182,0.13), transparent 62%),
    radial-gradient(60% 50% at 4% 105%,  rgba(124,58,237,0.13),  transparent 65%),
    radial-gradient(55% 45% at 98% 60%,  rgba(245,166,61,0.10),  transparent 65%),
    var(--hp-purple-pale);
}
#reviews .container { position: relative; z-index: 2; }

/* ── Star glyphs: `data-rating` drives how many are filled ── */
.review-stars {
  display: inline-block;
  margin: 0 0 0.9rem;
  color: var(--amber);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(245,166,61,0.35);
}
.review-stars::before { content: "\2605\2605\2605\2605\2605"; }
.review-stars[data-rating="4"]::before { content: "\2605\2605\2605\2605\2606"; }
.review-stars[data-rating="3"]::before { content: "\2605\2605\2605\2606\2606"; }

/* ── Headline rating card ── */
.review-score {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 1rem 2.25rem;
  max-width: 720px;
  margin: 0 auto 2.5rem;
  padding: 1.2rem 1.75rem;
  background: var(--white);
  border: 1px solid rgba(124,58,237,0.16);
  border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(91,33,182,0.10);
}
.review-score-fig { display: flex; align-items: center; gap: 0.9rem; }
.review-score-num {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 2.7rem; line-height: 1;
  color: var(--brown);
}
.review-score-meta { display: flex; flex-direction: column; gap: 0.28rem; }
.review-score-meta .review-stars { margin: 0; font-size: 1.05rem; }
.review-score-note { font-size: 0.82rem; color: var(--brown-light); }
.review-score-note strong { color: var(--brown); }

.review-sources { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.review-source-pill {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.03em;
  color: var(--hp-purple-mid);
  background: rgba(124,58,237,0.07);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

/* ── Masonry wall ── */
.review-masonry { columns: 3; column-gap: 1.25rem; }
@media (max-width: 1000px) { .review-masonry { columns: 2; } }
@media (max-width: 640px)  { .review-masonry { columns: 1; } }

.review-masonry .review-card {
  position: relative;
  display: block;                       /* flex children break column layout */
  max-width: none;
  margin: 0 0 1.25rem;
  padding: 1.6rem 1.5rem 1.2rem;
  border: 1px solid rgba(124,58,237,0.14);
  border-radius: 20px;
  overflow: hidden;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Rainbow hairline along the top edge */
.review-masonry .review-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--hp-purple-mid), var(--pink), var(--amber));
}
.review-masonry .review-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124,58,237,0.32);
  box-shadow: 0 18px 44px rgba(91,33,182,0.16);
}

.review-quote-mark {
  position: absolute; top: 0.55rem; right: 0.75rem;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 4.5rem; line-height: 1;
  color: rgba(124,58,237,0.08);
  pointer-events: none; user-select: none;
}

.review-masonry .review-card p {
  flex: none;
  margin: 0 0 1.1rem;
  font-size: 0.93rem; line-height: 1.75;
  color: var(--brown-mid);
}

.review-masonry .review-card footer {
  display: flex; flex-direction: row; align-items: center; gap: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(124,58,237,0.2);
}
.review-avatar {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 0.95rem;
  color: var(--white);
  background: linear-gradient(135deg, var(--hp-purple-mid), var(--pink-mid));
  box-shadow: 0 3px 10px rgba(124,58,237,0.3);
}
.review-who { display: flex; flex-direction: column; gap: 0.16rem; min-width: 0; }
.review-src {
  width: fit-content;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.1rem 0.5rem; border-radius: 999px;
}
.review-src-google      { color: #1A73E8; background: rgba(26,115,232,0.10); }
.review-src-tripadvisor { color: #2E7D32; background: rgba(46,125,50,0.10); }
.review-src-facebook    { color: #1877F2; background: rgba(24,119,242,0.10); }
.review-src-dowtk       { color: var(--pink-mid); background: rgba(236,72,153,0.10); }

/* ── Reveal-more ── */
.review-card.is-extra { display: none; }
.review-masonry.expanded .review-card.is-extra {
  display: block;
  animation: review-reveal 0.45s ease both;
}
@keyframes review-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.review-cta {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}
.review-disclaimer {
  margin-top: 1.1rem;
  text-align: center;
  font-size: 0.76rem; line-height: 1.6;
  color: var(--brown-light); opacity: 0.85;
}

@media (max-width: 520px) {
  .review-score { gap: 0.9rem; padding: 1.1rem 1.2rem; }
  .review-score-num { font-size: 2.2rem; }
  .review-cta .btn { width: 100%; text-align: center; }
}


/* ============================================================
   DECORATIVE SPARKLE LAYER
   The page-wide star overlay is a positioned element, so by default it
   paints over everything in flow, including card text and faces in photos.
   Lifting the cards into their own layer keeps the sparkle on the section
   backgrounds where it reads as atmosphere rather than as debris.
   ============================================================ */
.feature-card, .feature-card-hp, .team-card, .value-card, .review-card,
.contact-card, .contact-info-card, .event-card, .menu-card, .menu-item,
.food-card, .age-card, .session-card, .party-card, .pricing-note-card,
.hire-contact-card, .hours-card, .faq-item, .pnm-item, .join-banner,
.pricing-table-wrap, .bookwhen-embed-wrap, .contact-form-wrap,
.allergen-notice, .hours-strip, .diet-key, .zone-copy, .zone-img,
.photo-strip, .play-photo-strip, .about-image-wrap, .cafe-bridge-img,
.find-us-photo, .cat-nav, .booking-cta-card, .ph-info-strip {
  position: relative;
  z-index: 2;
}

/* ============================================================
   PRIVACY POLICY PAGE
   ============================================================ */
#privacy-page {
  background: var(--cream);
  padding: 5rem 2rem;
}
.privacy-body {
  max-width: 760px; margin: 0 auto;
}
.privacy-body h2 {
  font-size: 1.5rem; color: var(--brown);
  margin: 2.5rem 0 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.privacy-body h2:first-of-type { border-top: none; padding-top: 0; }
.privacy-body p, .privacy-body li {
  font-size: 0.95rem; color: var(--brown-light); line-height: 1.8;
  margin-bottom: 0.75rem;
}
.privacy-body ul { padding-left: 1.5rem; list-style: disc; }
.privacy-body strong { color: var(--brown-mid); }
.privacy-last-updated {
  display: inline-block;
  background: var(--amber-pale); color: var(--amber-dark);
  border-radius: 50px; padding: 0.3rem 1rem;
  font-size: 0.82rem; font-weight: 700;
  margin-bottom: 2rem;
}

/* ============================================================
   BOOKING PAGE
   ============================================================ */
#booking-page {
  background: var(--hp-purple-pale);
  padding: 5rem 2rem;
}
.booking-page-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem; align-items: start;
  max-width: 1080px; margin: 0 auto;
}
.booking-faq h3 {
  font-size: 1.25rem; color: var(--brown);
  margin-bottom: 1.25rem;
}

@media (max-width: 860px) {
  .booking-page-grid { grid-template-columns: 1fr; }
}

/* ── Magic intro overlay ─────────────────────────────────────────────────── */
#magic-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 45%,
    #2a1650 0%, #1a0f35 45%, #0d0820 100%);
  overflow: hidden;
}

#mi-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

#mi-logo {
  display: block;
  width: clamp(160px, 34vw, 280px);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(196,181,253,0.35));
  animation: mi-breathe 3s ease-in-out infinite;
}

/* Consent panel */
#mi-consent {
  text-align: center;
}

#mi-consent-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin: 0 0 1rem;
}

#mi-consent-text a {
  color: rgba(253,217,138,0.75);
  text-decoration: underline;
}

#mi-consent-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

#mi-accept {
  padding: 0.6rem 1.6rem;
  background: #FDD98A;
  color: #2a1650;
  border: none;
  border-radius: 24px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

#mi-accept:hover {
  background: #ffe9a8;
  transform: scale(1.04);
}

#mi-decline {
  padding: 0.6rem 1.2rem;
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 24px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

#mi-decline:hover {
  border-color: rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.75);
}

@keyframes mi-breathe {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 40px rgba(196,181,253,0.35)); }
  50%       { transform: scale(1.025); filter: drop-shadow(0 0 60px rgba(196,181,253,0.55)); }
}

/* Ambient sparkle stars scattered around the overlay */
.mi-star {
  position: absolute;
  color: #FDD98A;
  pointer-events: none;
  animation: mi-twinkle 4s ease-in-out infinite;
  opacity: 0.55;
  font-size: 1.4rem;
  line-height: 1;
  text-shadow: 0 0 8px rgba(253,217,138,0.7);
}

@keyframes mi-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%       { opacity: 0.75; transform: scale(1.15); }
}

#mi-skip {
  display: none; /* shown via JS only on return visits */
  padding: 0.4rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.65);
  font-size: 0.75rem;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#mi-skip:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}

/* ═══════════════════════════════════════════════
   HEADS-UP NOTICE
   A quiet strip flagging a dated change that hasn't happened yet:
   a new menu, new opening hours. Deliberately understated, so it
   reads as useful information rather than a promotion.
════════════════════════════════════════════════ */
.heads-up {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  background: var(--amber-pale);
  border: 1px solid var(--amber-light);
  border-radius: var(--radius-sm);
  text-align: left;
}
.heads-up svg { color: var(--amber-dark); flex-shrink: 0; margin-top: 0.15rem; }
.heads-up-body { flex: 1; min-width: 0; }
.heads-up-date {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-dark);
  margin-bottom: 0.15rem;
}
.heads-up p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--brown-mid);
  margin: 0;
}
.heads-up p + p { margin-top: 0.4rem; }
.heads-up strong { color: var(--brown); font-weight: 700; }
.heads-up a { color: var(--amber-dark); font-weight: 700; }

/* Sitting inside a dark band, the pale amber fill is too loud. */
.heads-up.heads-up-dark {
  background: rgba(253, 217, 138, 0.1);
  border-color: rgba(253, 217, 138, 0.3);
}
.heads-up.heads-up-dark svg,
.heads-up.heads-up-dark .heads-up-date { color: var(--amber-light); }
.heads-up.heads-up-dark p { color: rgba(255, 255, 255, 0.75); }
.heads-up.heads-up-dark strong { color: #ffffff; }
.heads-up.heads-up-dark a { color: var(--amber-light); }

@media (max-width: 480px) {
  .heads-up { padding: 0.9rem 1rem; gap: 0.7rem; }
}